User flow és kivételes állapotok

Célok

A lecke végére egy felhasználói célt lépésekre, döntési pontokra és rendszerállapotokra tudsz bontani. Érted, hogy a flow nem képernyők sorrendje, és hogy a kivételes állapotok tervezése nélkül a fő út sem tekinthető késznek.

Miért kell a sitemap mellé flow?

A sitemap megmutatja, mi van. A user flow megmutatja, hogyan halad át rajta a felhasználó egy konkrét cél felé. Ugyanazon a sitemapen sok flow létezik (keresés, jelentkezés, lemondás), és mindegyik más döntési pontokat és kivételeket tartalmaz. A flow-ra azért van szükség, mert ez mutatja meg, hol hiányzik információ vagy lépés, még mielőtt képernyőt rajzolnánk.

Mit ábrázol a user flow?

A user flow a feladat eléréséhez vezető lépések, döntések és állapotok ábrázolása. A fő út (happy path) a leggyakoribb vagy elsődleges sikeres feladatút. Kezdd a felhasználói céllal, ne a nyitóképernyővel. Például: „megfelelő időpont foglalása”. Ezután írd le, milyen információt kell megtalálnia, milyen feltételt kell kiválasztania, mit ellenőriz a rendszer, és miből tudja, hogy sikerült. Ha több út is vezet a célhoz, azonosítsd, melyik a fő út, és miért.

A flow jelölései

A legtöbb diagram egyszerű jelekből áll (FigJamben is ezek érhetők el):

Forma	Jelentés
Kerekített téglalap	Kezdet vagy vég
Téglalap	Lépés vagy képernyő
Rombusz	Döntési pont (kérdés, igen/nem)
Nyíl	Haladási irány, a nyílon a feltétel

Három rokon fogalom, amit ne keverj össze: a user journey (2. fejezet) a tapasztalatot írja le érzésekkel; a user flow a lépéseket és döntéseket; a wireflow a flow, kiegészítve kis wireframe-ekkel (6. fejezet).

Döntési pontok és információigény

A döntési pont olyan lépés, ahol a felhasználó vagy a rendszer több út közül választ. Minden döntési pontnál kérdezd meg: milyen információ kell a jó választáshoz, honnan érkezik, és mi történik, ha nincs meg? A „válassz időpontot” lépés nem elég részletes, ha nem jelzi a szabad helyet, helyszínt, árat, időtartamot vagy lemondási feltételt. A flow segít meglátni, ha egy későbbi képernyőre került olyan adat, amelyre korábban szükség lenne.

Különösen figyelj a visszalépésre és módosításra. A felhasználó nem mindig lineárisan halad: összehasonlít, meggondolja magát, adatot keres, vagy félbehagyja a folyamatot. A jó flow nem bünteti ezt, hanem megőrzi, amit ésszerű megőrizni, és világosan jelzi, mi változik.

Kivételes állapotok

A kivételes állapot (edge case) a normál feladatút folytatását megváltoztató hiba, hiány vagy alternatív helyzet. A kivételes állapot nem ugyanaz, mint a ritka eset. Ha elfogy egy hely, megszakad a kapcsolat vagy az adat hibás, akkor a fő feladat valódi helyzete változik meg. A flow-ban jelöld legalább a nagy hatású ágakat:

• nincs találat;
• nem jogosult;
• érvénytelen adat;
• már nem elérhető erőforrás (elfogyott a hely);
• megszakított művelet (kilépés, kapcsolat megszakadása);
• sikeres lezárás.

Nem minden kivételhez kell teljesen külön képernyősor. Némelyik mezőszintű visszajelzés, másik alternatív út vagy segítségkérési lehetőség. A fontos az, hogy a felhasználó értse, mi történt, mi maradt meg, és mit tehet most. Ezek a szükségletek a 3. fejezet állapotaira épülnek.

Hogyan készíts flow-t? Lépések

1. Jelöld ki a célt és a kezdőpontot. Mi a felhasználó célja, honnan indul?
2. Írd le a fő utat lépésről lépésre.
3. Keresd a döntési pontokat. Hol kell választani, ellenőrizni, bevinni valamit?
4. Adj minden döntési ponthoz információt (mit tud, mit kell tudnia).
5. Add hozzá a kivételes ágakat a kockázat szerint.
6. Ellenőrizd a végét: a felhasználó tudja-e, hogy sikerült vagy nem?

Folyamatábra: jelentkezés a Mai programban

flowchart TD
    A(["Cél: jelentkezni egy ma esti eseményre"]) --> B["Esemény kiválasztása a listából"]
    B --> C{"Van még hely?"}
    C -->|Nem| D["Hasonló események ajánlása"]
    D --> B
    C -->|Igen| E["Ár és feltételek áttekintése"]
    E --> F{"Jelentkezés szükséges?"}
    F -->|Nem| H(["Részletek mentése, kész"])
    F -->|Igen| G["Adatok megadása és elküldés"]
    G --> I{"Elfogadta a rendszer?"}
    I -->|Nem| J["Hiba és javítási lehetőség"]
    J --> G
    I -->|Igen| K(["Visszaigazolás és következő lépések"])

Az ábrán két kivételes ág (elfogyott hely, hibás adat) és két sikeres vég (nincs jelentkezés, sikeres jelentkezés) látható. Észreveheted, hogy egy kivételes ágnak is van kimenete: nem zsákutca.

Végigvezetett példa: a Mai program kritikus ágai

A fő flow: események böngészése → esemény kiválasztása → feltételek ellenőrzése → adatok megadása → jelentkezés elküldése → visszaigazolás. A kritikus ágak: a kiválasztott esemény közben betelt; a felhasználó nem fogadja el a lemondási feltételt; a jelentkezés feldolgozása késik; a visszaigazoló e-mail nem érkezik meg. Mindegyikhez tervezd meg a tájékoztatást és a következő lépést. Így a prototípus tesztjén nem csak az ideális út, hanem a bizalom és a helyreállíthatóság is vizsgálható.

Gyakori tévhitek

Állítás	Pontosítás
„A flow a képernyők sorrendje.”	A flow célhoz tartozó lépések, döntések és állapotok sora; egy lépéshez nem mindig tartozik külön képernyő.
„A kivételes eset ritka, ráér később.”	A kivétel a fő feladat valódi helyzetét változtatja; sokszor ott vész el a felhasználó bizalma.
„Minden kivételhez új képernyő kell.”	Lehet mezőszintű visszajelzés, alternatív út vagy segítség is.

Röviden

• A user flow célhoz vezető lépések, döntések és állapotok ábrája, a felhasználó céljától indulva.
• A döntési pontnál mindig tedd fel: milyen információ kell, honnan jön, mi van, ha hiányzik?
• A kivételes állapotok a fő feladat részei; a nagy hatású ágakat jelöld.
• A user journey tapasztalat, a user flow lépés és döntés, a sitemap szerkezet.

Ellenőrző kérdések

1. Mi a fő feladatod kezdő- és sikerállapota?
2. Mely döntési ponthoz hiányzik még fontos információ?
3. Mi történik, ha a felhasználó az utolsó lépés előtt meggondolja magát?
4. Mely kivételnek lenne a legnagyobb következménye?