Így tervezz jó formokatKollin Zoltán

Bevezetés a user experience-be

– Luke Wroblewski

“Forms suck.”

Mert ki kell tölteni őket

Mert túl nagyok az elvárásaik

Mert meg kell fejteni őket

Mert gondolkodni kell rajtuk

Mert szivatnak

Hogy lehet ezt jól csinálni?

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

Az első a kontextus.

Kik a kitöltők? Hogy kerültek ide?

Mit vársz tőlük? Mi az ő céljuk?

Vásárlás

“Megveszem ezt a könyvet.”

Keresés

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

Regisztráció

“Ezt most muszáj kiposztolnom!”

Belépés

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

Mit szeretne a felhasználó?

Leginkább túl lenni rajta.

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

A jó form áttekinthető

SegítségCimke

Mező

(Hiba)üzenet

Akciógomb

Anatómia

Path to completion

A több oszlop problémája

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

Jobbra igazított cimkék

A cimkék és mezők szorosan kapcsolódnak

A cimkék scannelése viszont nehéz

Felülre igazított cimkék

Ismert kérdéseknél javasolt

A leggyorsabban kitölthető elrendezés

A white space alkalmazása kritikus

Mezőbe írt cimkék

Mezőbe írt cimkék

“Ez mi is volt?”

Egyértelmű akciógombok

Tagolás

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ó

Folyamat jelzése

Elsődleges és másodlagos gomb

✓

✓

✓

✓

✓

×

A jó form rövid

Ne kérdezz, ha nem muszáj

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

Jelöld a kötelező mezőket

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

Oldd meg kevesebb interakcióval

Akár egy kattintással

És felejtsd el a captchát

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

A megfelelő beviteli mód segít

<

A megfelelő mezőhossz segít

<

A jó default érték segít

A megfelelő kérdéstípus segít

< <

Nem csak rádiógombok vannak

Nem csak rádiógombok vannak

Nem csak rádiógombok vannak

Dolgozzon a form a user helyett

Előzze meg az elgépelést

Vagy javítsa utólag

Vagy javítsa utólag

Találd ki, mire gondol

A formátum se legyen kérdés

A formátum se legyen kérdés

A formátum se legyen kérdés

Példákkal, tippekkel segítsd

Példákkal, tippekkel segítsd

Példákkal, tippekkel segítsd

Példákkal, tippekkel segítsd

A jó form barátságos

A jó form mobil

Egy oszlopos

Lényegretörő

Megfelelő mezőtípusokat használ

Technológiailag felkészült

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

A jó form felhasználóbarát

Ajánlott olvasmány:

Luke Wroblewskitől bármi.

@lukew

Köszi a figyelmet!Kérdezzetek, kommentáljatok!

Bevezetés a user experience-be