Usability lecke: hogyan tervezzünk regisztrációs folyamatot?

Egy viszonylag bonyolult regisztrációs folyamattal rendelkező szolgáltatáson kísérlem meg bemutatni, hogyan lehet rávenni egy netezőt arra, hogy akár tíz lépésen keresztül se unjon rá a regisztrációra. Tesztszájtunk az Emlékgéphez és a Futrinkához hasonló emlékmegosztó szájt, a ThisMoment lesz...

1. Regisztrációs folyamatnál általában az első, hogy accountot kell készíttetni a felhasználóval. Akkor járunk el helyesen, ha a fióklétrehozás felülete a lehető legegyszerűbb, és miként manapság sok szolgáltatásnál láthatjuk, maguk a szövegmezők is igen nagyok, látványosak. Ennek elsősorban azért van szerepe, mert a felhasználó könnyebben észreveszi az elütéseket, biztosabban ügyködik ezen a fontos felületen. Ezen a ponton pedig minden elütés, bizonytalankodás kritikus lehet.

Csak a legszükségesebb adatokat kérjük el a felhasználótól az első lépésben. Így az accountja gyorsan elkészülhet, és ha esetleg meg is akad a regisztráció további lépései során, emailben már ki tudjuk küldeni az értesítést, hogy hogyan tudja befejezni megkezdett regisztrációját. Az utolsó megjegyzésem ehhez a felülethez, hogy a navigációs gombok nagyon egyértelműek, határozottan jelzik a mentés, továbbhaladás módját:

2. Ezt követi csak a jelszó megadása és a felhasználási feltételek elfogadása. Mint láthatjuk, a jelszóellenőrzés on-the-fly történik, vagyis a felhasználó a beíráskor értesül arról, hogy elfogadható jelszót adott-e meg. A felhasználási feltételek elfogadásához pedig már ez a szájt sem használ checkboxot. Az "Elfogadom" gombra kattintva egyszerre erősíti meg a jelszómentést és a felhasználási feltételek elfogadását:

3. A felhasználó accountja mostmár teljes. A regisztrációs folyamatnak ugyanakkor nem csak az a célja, hogy a felhasználó elkészítse a fiókját, hanem az is, hogy elkezdje használni aktívan a szájtot. Ezért a regisztrációs folyamat következő lépése nem a "regisztrációs sikeres, mostmár használhatod a szájtot" eset. Hanem a szájt működésébe való bevezetés. Lévén ez egy emlékmegosztó szolgáltatás, a következő lépésben a legfontosabb, eseményt leíró adatok kitöltésére lesz szükség. Megadjuk az emlék nevét, majd pedig felcímkézzük az adott emléket. Vagyis megteremtjük az emlék és más emlékek közti potenciális kapcsolatot.

A ThisMoment felülettervezője is tudja valószínűleg, hogy a felhasználók nem nagyon szeretnek címkézni. Ezért egy olyan megoldást választott, melynek segítségével az is felcímkézi saját eseményét, aki nem akarja. Az emotikonokra kattintva automatikus kategóriaszintű címkék jönnek létre. Vagyis a ThisMomentbe felvitt minden emlék valamilyen érzelemmel jellemezhető, és ezen érzelmi leírások mentén az emlékek közt egyből kapcsolat is teremtődik. Nagyon egyszerű és szép megoldás, mellyel alapszinű aktivitás és relációrendszer keletkezik a szolgáltatásban. Íme:

4. A következő lépésben az emlék tájolása következik: iddőhatározót és helyhatárrozót kell rendelnünk az eseményhez. Az időpont megadásakor több formulát is elfogad a rendszer. Sőt, fel is ajánlj párat azoknak, akik vagy nem tudják pontosan az emlék időpontját, vagy nem akarnak foglalkozni az időpont felkutatásával. Teljesen jó opció a "mostanában", "nem olyan régen", "éppen most", stb. A felhasználó tehát nem fog megakadni a folyamatban, ha esetleg nem tud egészen pontos adatot megadni ezen a ponton. Szintén opcionális a hely megadása. A felületen maradva egy szabadszavas kereséssel határozhatjuk meg Google Mapsen a lokációt, melynek egyből az emlékünkre jellemző saját névvel is illethetünk. Természetesen mindezen adatok megadása opcionális, mégis, a dizájn finomsága és a felület egyszerű funkcionalitása miatt gyerekjáték, sőt, kifejezetten élvezetes bíbelődni ezen adatok megadásával:

5. Végül pedig az emlék fontosságát és extra címkéket adhatunk meg. Mindkettő kötött listás. Vagyis két másodperc alatt betájolható az adott szempont ezen paraméterek alapján is:

Lévén a kibővített regisztrációs folyamatban nem csak accountot hoztunk létre, hanem aktívan el is kezdtük használni a szájtot, a felhasználó érdeklődése ezen a ponton a többi felhasználó aktivitása felé irányul. Melyek ráadásul alapesetben ugye érzelmeket leíró aktivitások (a címkekezelés miatt), így minden olyan felhasználót aktivitásra ösztönöz, aki csak kapcsolódik valahogy az adott emlékképhez.

Nagyon fontos, hogy a folyamat közben felajánlja nekünk a rendszer, hogy a ThisMoment-beli aktivitásunkról különböző külső csatornákon értesíthetjük ismerőseinket. Nem csak emailértesítés van a világon: a Google Friend Connect, a Twitter, Facebook segítségével virtuális közösségeinket is automatikusan értesíthetjük egy-egy emlék megszületéséről.

A felületek WSVGA felbontásra optimalizáltak, a betű- és színkezelés az adott felület fő fókuszpontjait támogatja. A belső oldalakon a lehető legfinomabban oldják meg a rengeteg emlékkel kapcsolatos információ megjelenítését. És még az értesítő emailek is a lehető legegyszerűbben vannak megszerkesztve. Minden ponton figyeltek tehát arra, hogy a felhasználó ne tévedhessen el, és a lehető legtöbb támogatást adják a felületek könnyű és értelemszerű kezeléséhez.

A ThisMoment kellemes és informatív dizájnmegoldásai, egyszerű, funkcionális felületei és nyitottsága (külső szolgáltatásokkal való kapcsolata) egyszerre kelti a felhasználóban azt a benyomást, hogy nem volt elvesztegetett idő kipróbálni "egy huszonhatodik webkettes cuccot".

 

Tippek még:

- "Fordított regisztráció". Bizonyos esetekben célszerű nem a felhasználónév/emailcím/jelszó elkérésével kezdeni a regfolyamatot, hanem pár opcionális kérdéssel. A ThisMoment esetében például kezdődhetne úgy is a regisztrációs folyamat, hogy megkérdezik tőlünk, mi a legkedvesebb emlékünk. És mivel azt akarjuk, hogy ez az információ ne vesszen el, a következő lépésben nagyobb valószínűséggel fogunk accountot létrehozni magunknak.

- Captcha, mint reklám. A captcha szövegadatbázisa épülhet a szolgáltatás címkerendszerére is. Ezzel azt érjük el, hogy a felhasználó már a regisztrációs folyamat során találkozik a szolgáltatás egyes címkéivel, vagyis ismerős lesz számára az adott címke, ha a későbbiekben, a szolgáltatás használata közben találkozik vele.

- Aktivitáshoz kötött aktiválás. Miként a ThisMoment esetében is láthatjuk, szolgáltatásoldalról az a regisztrációs folyamat sikeres, mely egyből aktivitásra is ösztönzi a felhasználót. Kérjünk a felhasználótól valamilyen aktivitást ahhoz, hogy a szolgáltatást igénybe vehesse. Például írjon megjegyzést valaki más emlékéhez, hogy láthassa a többi emlék kommentjeit.

- Log. Készítsünk egy olyan felületet a felhasználó számára, mely naplózza a felhasználó szájton belüli aktivitásait: mikor regisztrált, mikor és miként volt aktív a szájton. Ezzel segítjük a felhasználót, hogy saját szolgáltatásbéli "életét" nyomon tudja követni. Ha elég összetett ez a naplózó oldal, akár még to-do listaként is szolgálhat a felhasználó számára (mit felejtett el, mit nem próbált még ki az adott oldalon, stb.)

- 1/0. Amennyire csak lehetséges, törekedjünk arra, hogy igen/nem kérdéseket tegyünk fel a felhasználónak. A szabad szavas mezők kitöltése általában kevésbé hasznos és a felhasználó számára több gondolkodást, zavart okozó akció, mint egy eldöntendő kérdésre egyetlen gomb lenyomásával választ adni. Legördülő menüt, checkboxot csak nagyon indokolt helyeken alkalmazzunk. A prediktív szövegbevitellel operáló mezők és az igen/nem válaszgombok kényelmesebb alternatívák.

- Lépésről lépésre. Inkább bontsuk sok lépésre a regisztrációs folyamatot, minthogy egyetlen felületen hatalmas űrlap kitöltésével rémísztgessük a felhasználót.

Címkék: dizájn usability startup how to thismoment
2009.01.24. 12:46. írta: hírbehozó

Kommentek:

A hozzászólások a vonatkozó jogszabályok  értelmében felhasználói tartalomnak minősülnek, értük a szolgáltatás technikai  üzemeltetője semmilyen felelősséget nem vállal, azokat nem ellenőrzi. Kifogás esetén forduljon a blog szerkesztőjéhez. Részletek a  Felhasználási feltételekben.

Nem tudom Ti hogy vagytok vele, de en a Facebookon szoktam neha ugy erezni, hogy eltevedtem.

Ennek a thismomentnek meg gyonyoru a felulete.
Én a www.yetisports.org-on láttam olyan regisztrációs formot amit szinte élvezetes volt kitölteni.
Egy kis interaktivitást is vittek a dologba és még a nyelvi korlátokon is túlléptek, az oldal célcsoprtja biztos szívesebben regisztrál így.
hozzátenném, hogy az e-mailt is célszerű on-the-fly csekkolni, akár ugy hogy bekérdezünk a postafiókjába, hogy valoban létezik-e. mert iszonyat hogy egyeseknek fogalmuk sincs az emailcímükről, akár többször egymás után képes elírnia fremil.hu-t úgy, hogy szoltál neki, hogy az nem van.
@cadmagician: ez nem olyan egyszerű, mert sok mail szerver úgy van konfigurálva, hogy "kamuzik", külöben a spammereknek szabad pálya lenne.
@Hodicska Gergely: hogy érted? hát elhezdek egy levélküldési kommunikációt...

ja hogy a graylistre gondolsz.... mert az benntartja... hm...
nekem a memiary.com regisztrációja tetszett, ott az egész képernyőn nem volt más, csak egyetlen mező, amibe beírhatjuk amit kell.

el sem lehet téveszteni :D
nagyon szép meg okos meg minden, csak semmire sem jó :D
Se captcha, se email ellenőrzés? (a pontok között nem volt)

Akkor sikeresen regisztráltátok Obamát?
@nyomasek_bobo: captcha nincs, emailellenorzes van. obama csak vicc volt.
az adultfriendfinderen (aki valaha internetezett már 15 percnél tovább, belebotlott :)) van olyan regisztráció, aminél a lépések között egy csaj levetkőzik... :)

mi, a www.noko.hu -n az egy adatos regisztrációra szavaztunk.
@hírbehozó: na de a szövegben szó sincs email ellenőrzésről (ami gondolom a 3. pont előtt maradt ki). Így viszont már ugyanolyan a regisztrációs folyamat, mint bárhol máshol, csak átláthatóbb.
@nyomasek_bobo: "És még az értesítő emailek is a lehető legegyszerűbben vannak megszerkesztve."
Személy szerint utálok regisztrálni ezért elsősorban az érdekel, hogy gyors legyen. Ha mindenféle flash-ek kezdenek akciózni, tuti hogy tovább állok. Attól is idegbajt kapok, ha 43 rublika kitöltése után visszadob mert elütöttem vagy kihagytam valamit és üres űrlap fogad. Többek között azért szoktam rá az Operára, mert az Ok előtt tudok vele fülmásolatot csinálni.
A captcha mint reklám ? Gondolom ez valami vicc. Beírásnál próbálom a betűket kibogarászni, meg eldönteni hogy kis vagy nagy betű, mert hátha azt is nézi az oldal. Tőlem akármit is jelenthetnek az összeolvasott betűk, tuti hogy nem kötöm semmihez.
Szerintem bőven elég a név/jelszó esetleg emaillel kiegészítve, a többit meg a személyes profilban később is ki lehet tölteni.
"egy huszonhatodik webkettes cuccot"

de miert???:-)
@hírbehozó: akkor megpróbálom máshogy:
szerintem az emailcím ellenőrzését is bele lehetett volna írni a postba, mert most nem derül ki, ez mikor történik meg.
Én azt a regelést szeretem, amikor kéri a google accountomat, és kész is...
Ha vhol már regeltem, akkor miért még, még, még? Ha mindenhol ugyanazt adom meg (kb. 10 variációt), akkor annál már jobb, ha a guglisat kéri, és a gugliék -ha már úgyis tudnak rólam mindent- igazolják nekik, hogy vagyok.
Lustaság rulez!
@kpityu2: "Captcha, mint reklám."
Szerintem ez egy nagyon jó ötlet. Gondoljunk bele a tisztelt cracker helyzetébe, mikor megtudja, hogy 11 emotion közül kell felismernie a helyes megoldást..
Bocs, HH, egy apró hiba a példádban: a "first name" (tehát a keresztnév) a Barack, a "last name" (a vezetéknév) az Obama... (ez engem mindig megzavar, ezért jelzem a dolgot)
@gitáros: igen, igaz. meg szerencse h nem ezen a neven, hanem a sajat nevemen regisztraltam.
@◄ViZion: OpenID a te barátod. (googlés is az)
@charlie: Nekem épp ez volt a furcsa: hogy 2009-ben egy regisztrációról szóló cikkben nem szerepel az openid. :(
Egyébként az a legjobb regisztráció (az openid-n kívül), ha az elején csak egy login nevet kell megadnod (akár mindenféle jelszó nélkül is), és már el is kezdheted használni az oldalt; s a komplett regisztrációt csak akkor kell megcsinálnod, ha egyébként tetszik a szolgáltatás és te is hasznosnak érzed, hogy megadd a többi szükséges adatodat.
Melóhelyemen mi is alakítottunk ki "új regisztrációs" felületet. Ami enyire azért sajnos nem egyszerű... mert sokkal komolyabb, pénzügyi témáról van szó. Ott pedig a csilli-villi kinézed, sajnos nem segít. Informatívnak és részletezőnek kell lenni, hogy bizalmat tudjunk kelteni a kedves "ügyfelek"-ben, és megadják a sok-sok személyes adatukat...
szép, szép, azért nekem is van egy két megjegyzésem. Egy kicsit én több csak a regisztrációra vonatkozó állítást vártam volna, a végén úgy érzem egy kicsit elmentünk általánosságokba, habár maga az írás nagyon jó, és sok értékes info van benne.

A lépésre lépésnénél nagyon fontos, hogy a felhasználó tudja hány űrlap vár rá, mert ha jön a ha még egy űrlap jön megint érzése, akkor tud elege lenni.

a captcha szerintem nem olyan jó reklám, mert maga egy negatív kellemetlen folyamat, nem szívesen asszociálnék semmit ehhez az oldalamról.

még egy kérdés. Miért hívjátok ezt az egészet usabilitynek? Arra gondoltok, hogy akit érdekel annak úgyis így ugrik be, meg hogy a "magyar" nevei csúnyák? Nem kötözködök, tényleg kíváncsi vagyok.
egy weboldal akkor használható, ha azt csinálom rajta, amit akarok és nem azt amit kell

mi ezt az elvet valljuk, pl:

haccpinfo.hu