ami a speckóból kimarad #1: preloaderek
TRANSCRIPT
Ami a speckóból kimarad #1
Preloaderek
Varga Csaba
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”)
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
Preloaderek
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
Válaszidő 101 by Jakob Nielsen
• 0,1 másodpercinstant érzés, közvetlen manipuláció
• 1 másodpercuser flow nem akad el, de érezhető az indirekt kapcsolat
• 10 másodpercfigyelem elvesztése, multitasking, várni kell, bizonytalanság, távoli manipuláció érzése
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
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”
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ó
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
Progress bar Ajax preloader
Amikor a kontextus elegendő
Amikor kell a plusz infó
Plusz infó a kontextusban
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)
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
Mennyi van még hátra időbenAdatban (relatív) hol tart
Pontosabb státusz
Mi történik a háttérben
Mi történik a háttérben
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
Mit csináljon míg vár – szórakoztatás
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
Részeredmények
Loading indikátorok Folyamatos kijelzés
Részeredmények
Loading indikátorok
Folyamatos kijelzés
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
Menekülési útvonalvisszafelé
Menekülési útvonalelőrefelé
Mikor kell preloader?
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)…”
A játék neve:
Felismerni a preloadert
Varga Csaba
UX Fetishfacebook.com/uxfetish
Köszi a figyelmet!