Deeje Cooley posztolta Twitterre a fenti képet, azzal a kísérőszöveggel, hogy a Facebook futtatott egy A/B tesztet, és a bal oldalon látható esetben a Facebookot okolták az app lassúságáért, a jobb oldali esetben pedig az iOS-t, vagyis az Apple-t. 

Nem tudom, hogy igaz-e ez a történet. Mindenesetre egy fontos problémára rávilágít. Nevezetesen arra, hogy a felhasználó nagyon nehezen tudja eldönteni, hogy ha problémát érzékel egy alkalmazás futtaásakor, akkor az az oprendszer, az alkalmazás vagy netán a telefon hardverének a hibája-e. 

A fenti példa azt sugallja, hogy ha az oprendszer loadergifjét használjuk az appunkban, akkor megúszhatjuk a dolgot. Mégha így is van, azt gondolom, hogy az a legszerencsésebb, ha a várakozást magát tesszük elfogadhatóbbá a felhasználó számára. 

Androidon jelenleg a Facebook app egy elég jó belépő progress barral rendelkezik. Végtelenített köranimáció helyett egy kör alakú progress bart használnak. A progress bar kétségtelen előnye a loadergifekkel szemben, hogy jelzik a felhasználó számára, hogy várhatóan mennyi idő is lesz, míg betöltődik az adott tartalom. Ez önmagában is segít elfogadhatóbbá tenni a várakozást. Még akkor is - miként az androidos Facebook app esetében is látjuk -, ha a progress bar valójában nem is a valódi betöltődési folyamatot mutatja. Ugyanis soha nem ér körbe az animáció. 

Az az állításom tehát, hogy ne kapkodjuk el a dolgot, amikor alkalmazásfejlesztésnél a loader gif / progress bar témakörhöz érünk. Ez az én szempontrendszerem: 

1. Egyedi loader gif készítése, mely az alkalmazás brandjegyeit magában hordozza. Törekedjünk az óra, homokóra, fogaskerék, gömbvillám, építési terület ("work in progress") metafórák elkerülésére. Csakúgy mint a recycle/refresh nyilacskák szerepeltetésétől is próbáljuk meg megóvni a dizájnt. 

2. Lehetőleg ne loader gifet, hanem progress bart használjunk minden olyan esetben, amikor 2-3 másodperc feletti várakozási idő valószínű.

3. Progress bar esetében az animáció utolsó egyharmada történjen gyorsabb tempóban, mint az első kétharmad. A felhasználó fokozódó türelmetlenségét ellensúlyozhatjuk egy, a szokásosnál tempósabb véghajrával.

4. Maga a progress bar csíkját ellentétes irányba animáljuk, mint a kitöltődés iránya. Lásd a Gmail betöldődési progress barjánál megvalósított Barber's pole effekt:

5. Ha mindenképpen loader gifet kell használnunk, próbáljuk meg minél realivisztikusabban, elvontabban megjeleníteni az idő múlását, a körfolyamatot. Mint ahogyan a Google teszi ebben az esetben:

Ez pedig egy másik jó példa a ciklikusság relativizálására. És itt egy másik. És egy másik. És egy újabb. Illetve egy progress bar megoldás, mely hatszögre van értelmezve.

Rossz példákért nem kell messzire mennünk. Csak nyissuk meg bármelyik loadergif generáló oldalt.

6. Tervezésnél érdemes tekintettel lenni arra, hogy a felhasználó sokszor (esetleg: egy felületen egyszerre többször) fog összefutni ezekkel a felületi elemekkel, tehát semmiképpen se legyen túlságosan hivalkodó, hangsúlyos a megjelenése. 

7. Loader gifek esetében törekedjünk minél kisebb fájlméretekre, illetve előre gondoljuk végig, hogy a gif nem tud transzparens lenni, tehát végleges színkódokkal kell dolgoznunk, ráadásul max 256 színre optimalizálva. Ilyen módon mindenképpen a tervezési folyamat utolsó fázisában foglalkozzunk ezzel a kérdéskörrel. Miként a touch és fav ikonok megtervezésével is. 

A jó loader gif, miként a jó progress bar is segít a felhasználónak elfogadtatni a várakozást. Ezt a pszichológiai hatást pedig fontos megértenünk, mert az alkalmazáshasználat egyik fontos alapélménye a folyamatosság, a flow. Ebben a folyamatosságban a hiányzó pillérek áthidalására szolgál egy jól megtervezett loader gif, progress bar, 404 oldal vagy más empty states felületek. 

Ma már az alkalmazástervezésből nem maradhatnak ki ezek a lépések. Sőt, ezen lépések nélkül nem is beszélhetünk valódi folyamatkezelésről, harmonikus működésről.

Pár link a téma iránt érdeklődőknek:

• Android 4+: Progress and activity
• iOS activity indicators
• Create a Loading Circle Animation in Photoshop CS6
• Estimated remaining time: monitoring lengthy computations
• JQuery/CSS3 progress bars
• The importance of percent-done progress indicators for computer-human interfaces
• Completeness meter

Címkék: web design progress bar loader gif