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

539 views

Published on

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

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
539
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
6
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

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

  1. 1. Ami a speckóból kimarad #1 Preloaderek Varga Csaba
  2. 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. 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. 4. Preloaderek
  5. 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. 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. 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. 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”
  9. 9. 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ó
  10. 10. 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
  11. 11. Progress bar Ajax preloader
  12. 12. Amikor a kontextus elegendő
  13. 13. Amikor kell a plusz infó
  14. 14. Plusz infó a kontextusban
  15. 15. 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)
  16. 16. 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
  17. 17. Mennyi van még hátra időben Adatban (relatív) hol tart Pontosabb státusz
  18. 18. Mi történik a háttérben
  19. 19. Mi történik a háttérben
  20. 20. 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
  21. 21. Mit csináljon míg vár – szórakoztatás
  22. 22. 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
  23. 23. Részeredmények Loading indikátorok Folyamatos kijelzés
  24. 24. Részeredmények Loading indikátorok Folyamatos kijelzés
  25. 25. 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
  26. 26. Menekülési útvonal visszafelé
  27. 27. Menekülési útvonal előrefelé
  28. 28. Mikor kell preloader?
  29. 29. 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)…”
  30. 30. A játék neve: Felismerni a preloadert
  31. 31. Varga Csaba cs.varga@mito.hu UX Fetish facebook.com/uxfetish Köszi a figyelmet!

×