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

1. Így tervezz jó formokat
Kollin Zoltán
Bevezetés a user experience-be

3. “Forms suck.”
– Luke Wroblewski

4. Mert ki kell tölteni őket

5. Mert túl nagyok az elvárásaik

6. Mert meg kell fejteni őket

7. Mert gondolkodni kell rajtuk

8. Mert szivatnak

9. Hogy lehet ezt jól csinálni?

10. A form egy párbeszéd.
(Nem kihallgatás.)

11. Az első a kontextus.
Kik a kitöltők?
Hogy kerültek ide?
Mit vársz tőlük?
Mi az ő céljuk?

12. Vásárlás
“Megveszem ezt a könyvet.”

13. Keresés
“Kéne egy olcsó, de jó szállás.”

14. Regisztráció
“Ezt most muszáj kiposztolnom!”

15. Belépés
“Nyereményjáték, ahol sört nyerhetek? Naná!”

16. Mit szeretne a felhasználó?
Leginkább túl lenni rajta.

17. 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.)

18. A jó form áttekinthető

19. Segítség
Cimke
Mező
(Hiba)üzenet
Anatómia
Akciógomb

20. Path to completion

21. A több oszlop problémája

22. 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

23. Jobbra igazított cimkék
A cimkék és mezők szorosan
kapcsolódnak
A cimkék scannelése viszont
nehéz

24. Felülre igazított cimkék
Ismert kérdéseknél javasolt
A leggyorsabban kitölthető
elrendezés
A white space alkalmazása
kritikus

25. Mezőbe írt cimkék

26. Mezőbe írt cimkék
“Ez mi is volt?”

27. Egyértelmű akciógombok

28. Tagolás

29. 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ó

30. Folyamat jelzése

31. Elsődleges és másodlagos gomb

32. ✓
✓
✓
✓
×
✓

33. A jó form rövid

34. Ne kérdezz, ha nem muszáj

35. Ne kérdezz kétszer, ha nem muszáj

36. Jelöld a kötelező mezőket

37. Már kitöltés közben ellenőrizd

38. Oldd meg kevesebb interakcióval

39. Akár egy kattintással

40. És felejtsd el a captchát

41. A jó form kitöltése kényelmes

42. A megfelelő beviteli mód segít
<

43. A megfelelő mezőhossz segít
<

44. A jó default érték segít

45. A megfelelő kérdéstípus segít
< <

46. Nem csak rádiógombok vannak

47. Nem csak rádiógombok vannak

48. Nem csak rádiógombok vannak

49. Dolgozzon a form a user helyett

50. Előzze meg az elgépelést

51. Vagy javítsa utólag

52. Vagy javítsa utólag

53. Találd ki, mire gondol

54. A formátum se legyen kérdés

55. A formátum se legyen kérdés

56. A formátum se legyen kérdés

57. Példákkal, tippekkel segítsd

58. Példákkal, tippekkel segítsd

59. Példákkal, tippekkel segítsd

60. Példákkal, tippekkel segítsd

61. A jó form barátságos

68. A jó form mobil

69. Egy oszlopos

70. Lényegretörő

71. Megfelelő mezőtípusokat használ

72. Technológiailag felkészült

73. Kihasználja az érintőképernyőt

74. A jó form felhasználóbarát

75. Ajánlott olvasmány:
Luke Wroblewskitől bármi.
@lukew

76. Köszi a figyelmet!
Kérdezzetek, kommentáljatok!
Bevezetés a user experience-be