bybence
Kapcsolat
bybence

Felfedezés

Eszközök

Academy

Blog

Hírek

Kapcsolat

Academy

UI & UX tananyag

ByBence Academy

UI & UX

54 anyag

UI/UX alapok

UI és UX különbségeMi az a UX design?Mi az a UI design?UsabilityMentális modell

Információs architektúra és navigáció

Információs architektúraNavigáció tervezésMenü designBreadcrumb navigációKeresés UX
User flow
Academy

/

UI & UX

/

Információs architektúra és navigáció

User flow

A user flow egy konkrét cél eléréséhez szükséges képernyők, döntések és lépések útvonalát ábrázolja. Segít a feladatlogikát még a részletes UI előtt átlátni.

2 perc olvasás

Frissítve: 2026. augusztus 30.

Balogh Bence

Röviden

A user flow egy konkrét cél eléréséhez szükséges képernyők, döntések és lépések útvonalát ábrázolja. Segít a feladatlogikát még a részletes UI előtt átlátni.

Vizuálisan

A user flow a célhoz vezető döntéseket teszi láthatóvá

Ugyanazt a helyzetet kétféleképp nézd meg: először a tipikus hibát, utána azt a megoldást, amelyik jobban támogatja a felhasználó feladatát.

×

GYAKORI HIBA

Felesleges visszafordulások és mellékágak

Belépés

Fiók?

Profil

Szolgáltatás

Kupon?

Adatok

Időpont

Vissza

A folyamat többször kér olyan döntést vagy adatot, ami csak később lenne releváns, ezért nő az elakadás esélye.

HELYES IRÁNY

A lépések a felhasználói cél köré rendeződnek

Szolgáltatás

Időpont

Adatok

Siker

A flow csak a következő szükséges döntést mutatja, és egyértelmű sikerállapotban ér véget.

Mit jelent a user flow?

A user flow egy konkrét cél eléréséhez szükséges képernyők, döntések és lépések útvonalát ábrázolja. Segít a feladatlogikát még a részletes UI előtt átlátni.

A flow megmutatja a felesleges lépéseket, zsákutcákat, elágazásokat és hiányzó állapotokat. Így hamarabb és olcsóbban javítható a folyamat.

A legfontosabb alapelvek

  • Egy flow egyértelmű céllal induljon.
  • Jelöld a döntési pontokat.
  • Ne csak happy path legyen.
  • A sikeres és hibás végállapot is legyen látható.

Gyakorlati példa

Foglalásnál: szolgáltatás → időpont → adatok → fizetés → siker. Ha a fizetés sikertelen, külön visszatérési út kell, nem egyszerűen „hiba”.

Célhoz vezető képernyők és döntési pontok

Belépés

Döntés

Adatbevitel

Megerősítés

Siker

Gyakori hibák

  • A képernyőket flow nélkül egymás mellé rakni.
  • Minden edge case-t egyetlen diagramra zsúfolni.
  • A business folyamatot összekeverni a user flow-val.

Hogyan alkalmazd a saját felületeden?

Ne izolált szabályként kezeld a témát. A user flow akkor működik jól, ha a felhasználó céljával, a tartalom fontossági sorrendjével és a teljes felület többi döntésével együtt vizsgálod.

Teszteld valós feladattal: adj a felhasználónak konkrét célt, figyeld meg, hol bizonytalanodik el, mit ért félre, és mely pontokon kell indokolatlanul gondolkodnia. A jó UI/UX döntés nem attól jó, hogy látványos, hanem attól, hogy kiszámíthatóbbá és könnyebbé teszi a feladat elvégzését.

A vizuális minőség és a használhatóság nem egymás ellenfelei. A jó felület mindkettőt ugyanannak a felhasználói célnak rendeli alá.

Hogyan mérd a megtalálhatóságot?

Adj olyan feladatot, amelynek megoldásához a felhasználónak meg kell találnia egy oldalt vagy funkciót. Ne mondd meg a menüpont nevét. Figyeld meg, melyik kategóriát választja elsőre, visszalép-e, használ-e keresést, és mely címkék okoznak bizonytalanságot.

A navigációs probléma sokszor nem vizuális. Ha az emberek következetesen rossz kategóriába mennek, lehet, hogy az információs architektúra vagy a megnevezés hibás. Ilyenkor egy nagyobb ikon vagy látványosabb dropdown nem oldja meg a valódi okot.

  • első próbálkozásra jó irányba indulnak-e
  • érthető-e az aktuális hely és visszaút
  • a címkékből előre megjósolható-e a céloldal tartalma

Gyakori kérdések

Miért fontos a user flow?

A flow megmutatja a felesleges lépéseket, zsákutcákat, elágazásokat és hiányzó állapotokat. Így hamarabb és olcsóbban javítható a folyamat.

Mikor érdemes tesztelni?

Már korai wireframe vagy prototípus szinten is. Minél később derül ki egy alapvető használhatósági probléma, annál drágább lehet a javítása.

Előző

Keresés UX

Következő

Gomb design

Ezen az oldalon

Mit jelent a user flow?A legfontosabb alapelvekGyakorlati példaGyakori hibákHogyan alkalmazd a saját felületeden?Hogyan mérd a megtalálhatóságot?