Loading…

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

Like this presentation? Why not share!

Like this? Share it with your network

Share

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

  • 422 views
Uploaded on

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

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

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
422
On Slideshare
422
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
4
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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ól2. Beszéljük át szóban3. Küldjünk egymásnak best practice-eket4. 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ó user• Interakció begyűjtése frontend• Feldolgozás, háttérfolyamatok backend• Válasz visszaadása backend• Válasz kijelzése frontend• User fogadja a választ 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”
  • 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. 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. Progress bar Ajax preloader
  • 12. Amikor a kontextus elegendő
  • 13. Amikor kell a plusz infó
  • 14. Plusz infó a kontextusban
  • 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. Pontosabb státuszAdatban (százalékosan) hol tart Mennyi idő van még hátra Adatban (relatív) hol tart Adatban (abszolút) hol tart Haladás elvárható üteme
  • 17. Pontosabb státuszMennyi van még hátra időben Adatban (relatív) hol tart
  • 18. Mi történik a háttérben
  • 19. Mi történik a háttérben
  • 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. Mit csináljon míg vár – szórakoztatás
  • 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. RészeredményekLoading indikátorok Folyamatos kijelzés
  • 24. RészeredményekLoading indikátorok Folyamatos kijelzés
  • 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. Menekülési útvonal visszafelé
  • 27. Menekülési útvonal előrefelé
  • 28. Mikor kell preloader?
  • 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. A játék neve:Felismerni a preloadert
  • 31. Köszi a figyelmet! Varga Csabacs.varga@mito.hu UX Fetishfacebook.com/uxfetish