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