SlideShare une entreprise Scribd logo
1  sur  33
Télécharger pour lire hors ligne
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á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
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”
Ami a speckóból kimarad #1: Preloaderek
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ó
Ami a speckóból kimarad #1: Preloaderek
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őben
Adatban (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 útvonal
visszafelé
Menekülési útvonal
elő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
cs.varga@mito.hu
UX Fetish
facebook.com/uxfetish
Köszi a figyelmet!

Contenu connexe

Ami a speckóból kimarad #1: Preloaderek