Your SlideShare is downloading. ×
  • Like
Ami a speckóból kimarad #1: Preloaderek
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

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

  • 298 views
Published

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

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

Published 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
298
On SlideShare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
4
Comments
0
Likes
2

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ó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”
  • 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. 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. Mennyi van még hátra időben Adatban (relatív) hol tart Pontosabb státusz
  • 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ények Loading indikátorok Folyamatos kijelzés
  • 24. Részeredmények Loading 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. Varga Csaba cs.varga@mito.hu UX Fetish facebook.com/uxfetish Köszi a figyelmet!