Elhangzott a Frontend Meetup Budapesten, 2011. december 19-én.

1. Ami a speckóból kimarad #1
Preloaderek
Varga Csaba

2. Miért marad ki?
• Nem fér bele az a szintű részletesség
(interakció tervezés)
• Kimaradt az oldaltípusok közül
(pl. 404, kereső találati oldal)
• Nem marad rá idő
(“majd menet közben kitaláljuk”)
• Azt gondoljuk, hogy ugyanazt gondoljuk
(“majd a fejlesztő tudja, nem hülye”)

3. Mi a megoldás?
1. Ne hagyjuk ki a speckóból
2. Beszéljük át szóban
3. Küldjünk egymásnak best practice-eket
4. Beszéljük meg az alapokat

4. Preloaderek

5. Miféle eszköz az a preloader?
• Kezdjük innen: HCI – erről beszélünk
• UX design adja az interakció H oldalát (UCD)
• Egy alapszabály: a felhasználó mindig legyen ura
annak, ami történik
• A kontroll alapja a visszajelzés
• HCI + UCD + feedback  preloader

6. Válaszidő 101 by Jakob Nielsen
• 0,1 másodperc
instant érzés, közvetlen manipuláció
• 1 másodperc
user flow nem akad el, de érezhető az indirekt
kapcsolat
• 10 másodperc
figyelem elvesztése, multitasking, várni kell,
bizonytalanság, távoli manipuláció érzése

7. Válaszidőbe számoljuk bele
• User interakció
• Interakció begyűjtése
• Feldolgozás, háttérfolyamatok
• Válasz visszaadása
• Válasz kijelzése
• User fogadja a választ
user
frontend
backend
backend
frontend
user

8. Válaszidő indikátor igénye
• 0,1 másodperc alatt
– gyakorlatilag nem kell várni
– nem szükséges indikátor
– NUI érzés
– “én csinálom”

10. Válaszidő indikátor igénye
• 0,1 - 1 másodperc között
– nem közvetlen a manipuláció, de én irányítok
– megérzem a gépet
– weben nem szükséges indikátor
– desktopon kurzor animáció

12. Válaszidő indikátor igénye
• 1 - 10 másodperc között
– közvetett manipuláció  irányítok valamit, ami
irányít valamit
– kötelező az indikátor, ami jelzi:
• várni kell
• de halad a dolog előre
– ha kontextusból nem egyértelmű:
• mire/miért kell várni
• mennyit kell várni

13. Progress bar Ajax preloader

14. Amikor a kontextus elegendő

15. Amikor kell a plusz infó

16. Plusz infó a kontextusban

17. Válaszidő indikátor igénye
• 10 másodperc fölött
– a figyelem határa  már nem irányítom, csak
reménykedek
– kötelező az indikátor, ami jelzi:
• várni kell (jelezni a potenciálisan több időt)
• de halad a dolog előre
• pontosabb státusz: mennyit kell várni, hol tartok ebben
• mi történik a háttérben (értelmez, megnyugtat, elfoglal)

18. Adatban (százalékosan) hol tart
Adatban (relatív) hol tart
Mennyi idő van még hátra
Adatban (abszolút) hol tart
Haladás elvárható üteme
Pontosabb státusz

19. Mennyi van még hátra időben
Adatban (relatív) hol tart
Pontosabb státusz

20. Mi történik a háttérben

21. Mi történik a háttérben

22. 10+ mp extrák
• Mit csináljon míg vár?
– szórakoztatás
– előre dolgozás
• Részeredmények
– folyamatos kijelzés
• Önellenőrzés
– tényleg nincs gáz?
• Menekülési útvonal
– ha meggondolja magát

23. Mit csináljon míg vár – szórakoztatás

24. Mit csináljon míg vár – előre dolgozás
Mixcloudon:
Feltöltés egyéb infóinak
megadása míg a file
feltöltése történik

25. Részeredmények
Loading indikátorok Folyamatos kijelzés

26. Részeredmények
Loading indikátorok
Folyamatos kijelzés

27. Tényleg nincs gáz?
• Menet közben újraellenőrzés
• Preloader frissítés
• Preloader típus váltás:
– plusz infó hozzáadása
– plusz indikátor hozzáadása
– lehetséges problémák jelzése és megoldások felkínálása

28. Menekülési útvonal
visszafelé

29. Menekülési útvonal
előrefelé

30. Mikor kell preloader?

31. Gyanús hívószavak
• “Prediktíven mutassa…”
• “Legyen ajax-os…”
• “Lapozhat végtelenig…”
• “Előre be kéne tölteni…”
• “Csinálja on-the-fly, nem kell gomb…”
• “Majd az meghív valami API-t…”
• “De mi van, ha (elmegy a net)…”

32. A játék neve:
Felismerni a preloadert

33. Varga Csaba
cs.varga@mito.hu
UX Fetish
facebook.com/uxfetish
Köszi a figyelmet!