Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

Így tervezz jó formokat

649 visualizaciones

Publicado el

Használható és felhasználóbarát formok tervezése, az XLABS UX tanfolyamán elhangzott előadás.

Publicado en: Diseño
  • Sé el primero en comentar

Így tervezz jó formokat

  1. 1. Így tervezz jó formokat Kollin Zoltán Bevezetés a user experience-be
  2. 2. “Forms suck.” – Luke Wroblewski
  3. 3. Mert ki kell tölteni őket
  4. 4. Mert túl nagyok az elvárásaik
  5. 5. Mert meg kell fejteni őket
  6. 6. Mert gondolkodni kell rajtuk
  7. 7. Mert szivatnak
  8. 8. Hogy lehet ezt jól csinálni?
  9. 9. A form egy párbeszéd. (Nem kihallgatás.)
  10. 10. Az első a kontextus. Kik a kitöltők? Hogy kerültek ide? Mit vársz tőlük? Mi az ő céljuk?
  11. 11. Vásárlás “Megveszem ezt a könyvet.”
  12. 12. Keresés “Kéne egy olcsó, de jó szállás.”
  13. 13. Regisztráció “Ezt most muszáj kiposztolnom!”
  14. 14. Belépés “Nyereményjáték, ahol sört nyerhetek? Naná!”
  15. 15. Mit szeretne a felhasználó? Leginkább túl lenni rajta.
  16. 16. A formtól pedig azt, hogy legyen áttekinthető, minél rövidebb, kényelmesen kitölthető. (És persze barátságos és mobilbarát is.)
  17. 17. A jó form áttekinthető
  18. 18. Segítség Cimke Mező (Hiba)üzenet Anatómia Akciógomb
  19. 19. Path to completion
  20. 20. A több oszlop problémája
  21. 21. Balra igazított cimkék Ha a kérdések szokatlanok A cimkék jól scannelhetők, de távol állnak a mezőktől Hosszú cimkéknél nem működik
  22. 22. Jobbra igazított cimkék A cimkék és mezők szorosan kapcsolódnak A cimkék scannelése viszont nehéz
  23. 23. Felülre igazított cimkék Ismert kérdéseknél javasolt A leggyorsabban kitölthető elrendezés A white space alkalmazása kritikus
  24. 24. Mezőbe írt cimkék
  25. 25. Mezőbe írt cimkék “Ez mi is volt?”
  26. 26. Egyértelmű akciógombok
  27. 27. Tagolás
  28. 28. Egy hosszú form Több oldalra bontva Kialakult bizalom Ismert kérdések Rutinos felhasználó Első találkozás Elágazások Kezdő felhasználó
  29. 29. Folyamat jelzése
  30. 30. Elsődleges és másodlagos gomb
  31. 31. ✓ ✓ ✓ ✓ × ✓
  32. 32. A jó form rövid
  33. 33. Ne kérdezz, ha nem muszáj
  34. 34. Ne kérdezz kétszer, ha nem muszáj
  35. 35. Jelöld a kötelező mezőket
  36. 36. Már kitöltés közben ellenőrizd
  37. 37. Oldd meg kevesebb interakcióval
  38. 38. Akár egy kattintással
  39. 39. És felejtsd el a captchát
  40. 40. A jó form kitöltése kényelmes
  41. 41. A megfelelő beviteli mód segít <
  42. 42. A megfelelő mezőhossz segít <
  43. 43. A jó default érték segít
  44. 44. A megfelelő kérdéstípus segít < <
  45. 45. Nem csak rádiógombok vannak
  46. 46. Nem csak rádiógombok vannak
  47. 47. Nem csak rádiógombok vannak
  48. 48. Dolgozzon a form a user helyett
  49. 49. Előzze meg az elgépelést
  50. 50. Vagy javítsa utólag
  51. 51. Vagy javítsa utólag
  52. 52. Találd ki, mire gondol
  53. 53. A formátum se legyen kérdés
  54. 54. A formátum se legyen kérdés
  55. 55. A formátum se legyen kérdés
  56. 56. Példákkal, tippekkel segítsd
  57. 57. Példákkal, tippekkel segítsd
  58. 58. Példákkal, tippekkel segítsd
  59. 59. Példákkal, tippekkel segítsd
  60. 60. A jó form barátságos
  61. 61. A jó form mobil
  62. 62. Egy oszlopos
  63. 63. Lényegretörő
  64. 64. Megfelelő mezőtípusokat használ
  65. 65. Technológiailag felkészült
  66. 66. Kihasználja az érintőképernyőt
  67. 67. A jó form felhasználóbarát
  68. 68. Ajánlott olvasmány: Luke Wroblewskitől bármi. @lukew
  69. 69. Köszi a figyelmet! Kérdezzetek, kommentáljatok! Bevezetés a user experience-be

×