A lecke végére meg tudod különböztetni a felület vizuális minőségét a teljes felhasználói élménytől. Meg tudsz nevezni egy digitális szolgáltatás több érintkezési pontját, és egy problémát nem képernyőhibaként, hanem felhasználói feladat és következmény összefüggéseként tudsz leírni.
Miért kezdjük itt?
Aki először hall az UX/UI tervezésről, gyakran a „szép appokra” gondol: lekerekített gombokra, ügyes színekre, finom animációkra. Ez érthető, hiszen ezt látjuk. A tervezés nagyobbik része viszont nem látszik: annak megértése, hogy ki mit szeretne elérni, hol akad el, mit ért félre, és mi történik, ha valami nem sikerül. Ha ezt az alapot kihagyjuk, akkor a legszebb felület is csak szép dobozba csomagolt bizonytalanság marad. Ezért az első lecke célja, hogy pontos fogalmaink legyenek arról, mit tervezünk valójában.
Mit jelent az UX?
Vegyünk egy hétköznapi példát: egy hallgató vizsgára jelentkezik. Az élménye nem a „Jelentkezés” gombra kattintásnál kezdődik. Már akkor elkezdődik, amikor megpróbálja kideríteni, mikor van a vizsgaidőszak, és hol találja a jelentkezést. Része az, hogy érti-e a feltételeket, hogy hibátlanul ki tudja-e tölteni az űrlapot, hogy kap-e visszaigazolást, és hogy két héttel később vissza tudja-e keresni, melyik időpontra jelentkezett. Ha a folyamat bármelyik pontján bizonytalan, az az élmény része, akkor is, ha az adott képernyő önmagában jól néz ki.
Az UX tehát folyamat és következmény, nem pillanatnyi benyomás. Három kérdés segít észben tartani:
Mit akar elérni az ember? (cél)
Mi történik útközben? (lépések, döntések, akadályok)
Mi lesz a végén, mit tud, mit érez, mi vár rá? (következmény)
Mit jelent az UI?
Az UI, vagyis user interface (felhasználói felület) az a réteg, amelyen keresztül a felhasználó a folyamatot látja és kezeli: címsorok, gombok, mezők, navigáció, ikonok, színek, térközök és visszajelzések. Az UI fontos, mert rajta keresztül válik érthetővé a rendszer. Ha a gombok nem látszanak gombnak, vagy a hibaüzenet olvashatatlan, akkor a legjobb folyamat sem fog működni.
Az UI és az UX viszonyát jól mutatja a következő hasonlat. Az UI olyan, mint egy étterem berendezése, tányérjai és étlapja. Az UX az egész vacsora: a foglalás, az érkezés, a várakozás, az ételek sorrendje, a számla és az, hogy a vendég jól érezte-e magát. Szép tányérokkal is lehet rossz vacsorát felszolgálni, és egyszerű berendezésben is lehet kiváló estét tölteni.
Gyakorlati következmény: a „tegyük modernebbé” önmagában nem tervezési cél. A kérdés inkább az, hogy melyik ember milyen helyzetben milyen feladatot nem tud most elég biztosan, gyorsan vagy méltányosan elvégezni? A felület ennek a megoldásához ad eszközöket.
Egy folyamatot tervezünk, nem egy képernyőt
A feladatfolyam a cél eléréséhez szükséges lépések, döntések és állapotok sora. Nézzünk egy példát, amely végigkíséri majd a tananyagot.
A Mai program kezdőképernyőjén lehet egy nagy, látványos keresőmező. A valódi élmény azonban több lépésből áll:
A hallgató eldönti, hogy ma este kimozdul, és kivel.
Megpróbál találni valamit, ami közel van, olcsó, és illik a hangulatához.
Összehasonlít néhány eseményt: időpont, ár, nyelv, jelentkezési feltétel.
Eldönt, és ha kell, jelentkezik vagy jegyet vesz.
Később megtalálja a részleteket: hol és mikor kezdődik, mit kell vinni, hogyan mondhatja le.
Ha csak a harmadik lépés képernyőjét tervezzük meg, könnyen elvesznek az előzmények és a következmények. Az „Elérhető” címke kevés, ha nem világos, hogy hányra kezdődik az esemény, mennyi a belépő, és be kell-e jelentkezni előre. A jó UX nem azt jelenti, hogy minden egyszerre látható; azt jelenti, hogy a döntés pillanatában a szükséges információ elérhető és érthető.
flowchart LR
A["Cél:<br>ma este kimozdulok"] --> B["Keresés"]
B --> C["Összehasonlítás"]
C --> D["Döntés és jelentkezés"]
D --> E["Visszaigazolás"]
E --> F["Esemény előtt:<br>részletek, lemondás"]
C -.->|"nem talál megfelelőt"| B
Az ábrán a szaggatott nyíl azt mutatja, hogy a felhasználó útja ritkán lineáris: visszalép, újra keres, meggondolja magát. A jó tervezés ezt is figyelembe veszi.
Érintkezési pontok és szolgáltatásélmény
A szolgáltatásélmény a digitális felületen túlmutató, teljes ügyfélút élménye. Az érintkezési pont a szolgáltatás bármely pillanata vagy csatornája, ahol a felhasználó információval, felülettel vagy szervezettel találkozik.
Digitális terméknél is gyakori, hogy a felhasználó útjának egy része a felületen kívül történik. Érintkezési pont lehet az alkalmazás képernyője, de ugyanúgy egy e-mail, egy push értesítés, egy ügyfélszolgálati válasz, egy automatikusan generált számla, egy fizikai helyszín vagy egy másik szervezet rendszere. A Mai programban például az érintkezési pontok: a keresőfelület, az esemény oldala, a jelentkezési visszaigazoló e-mail, az esemény előtti emlékeztető és a helyszínen a bejáratnál fogadó szervező.
Hogy miért fontos ez? Mert a felhasználó nem érzékeli, hogy ezeket más-más csapat vagy rendszer működteti. Ha a felület azt ígéri, hogy a jelentkezésed sikeres, de az e-mail nem érkezik meg, akkor a szolgáltatás számára bizonytalan marad. Az ő szemszögéből egyetlen szolgáltatás van, nem tíz érintkezési pont.
Ez nem azt jelenti, hogy egy hallgatói projektben minden csatornát teljes részletességgel meg kell tervezni. Azt jelenti, hogy azonosítanod kell a kritikus pontokat: azokat, ahol egy hiba vagy bizonytalanság miatt a felhasználó feladja a feladatot, vagy rossz döntést hoz. Egy feladat akkor tekinthető lezártnak, ha a felhasználó azt is tudja, mi történt, mi fog ezután történni, és hol kérhet segítséget.
UX, UI és product design
A terméktervezés (product design) kifejezés általában a problémamegértést, a megoldás kialakítását és a termékcélokkal való összehangolását fogja össze. Nem minden szervezet használja ugyanígy a szerepneveket: van, ahol az „UX designer” kutat és wireframe-et rajzol, máshol az „UI designer” csinálja a vizuális stílust, és megint máshol egyetlen „product designer” viszi végig az egészet. A lényeg állandó: a design döntés nem csak ízlés. Kutatásra, működési korlátra, üzleti célra, technológiára és a felhasználóra vonatkozó bizonyítékot mérlegel.
Egy bejelentkezési folyamatban például a szervezet csökkenteni szeretné a visszaélést, a fejlesztő biztonságos azonosítást akar, a felhasználó pedig gyorsan be szeretne lépni. A jó terv nem választja ki egyszerűen az egyik célt a többi helyett. Megvizsgálja, mekkora a hiba kockázata, milyen lépés indokolt, és hogyan lehet a szükséges biztonságot érthetően kommunikálni.
Végigvezetett példa: hol a probléma?
A Mai program első ötlete egy csapat fejében így hangzik: „Kell egy modern, térképes eseményapp.” Ebben a mondatban egyetlen szó sem a felhasználóról szól. Mielőtt bármit rajzolnánk, érdemes feltenni a kérdést: mit nem tud most a hallgató elég biztosan, gyorsan vagy méltányosan elvégezni?
Lehet, hogy a hallgatók ma Facebook-eseményekben, plakátokon és ismerősök üzenetében keresgélnek. A fő nehézség talán nem az, hogy nincs térkép, hanem hogy sok forrásban kell összeszedni az adatokat, és gyakran csak a helyszínen derül ki, hogy az esemény ára vagy nyelve nem megfelelő. Ha ez igaz, akkor a „modernebb térkép” nem oldja meg a problémát, de az „egy helyen, összehasonlítható adatokkal” igen. Hogy ez igaz-e, azt a következő fejezetek kutatási módszereivel tudjuk megállapítani.
Gyakori tévhitek
Állítás
Pontosítás
„Az UX a kutatás, az UI a rajzolás.”
A kutatás fontos UX-tevékenység, de a prototípus, a szöveg, a hibaállapot és a tesztelés is az élményt alakítja. Az UI-tervezőnek is értenie kell a felhasználói feladatot.
„Ha a felhasználó végül eléri a célt, a folyamat jó.”
Nem feltétlenül. Lehet, hogy túl sok bizonytalansággal, kerülővel vagy olyan hibakockázattal jutott el oda, amely legközelebb elriasztja.
„A felhasználó mindig tudja, mire van szüksége.”
A saját helyzetét és nehézségét jól ismeri, de a megfelelő megoldási forma megtervezése a kutatás és az iteráció feladata.
„Az UX csak digitális termékekre vonatkozik.”
Bármilyen szolgáltatásnak van felhasználói élménye. A digitális felület ennek csak egy része.
Röviden
Az UX a teljes élmény a céltól a következményig; az UI az a réteg, amelyen keresztül a felhasználó a folyamatot látja és kezeli.
Folyamatot tervezünk, nem képernyőt; az érintkezési pontok a felületen kívül is léteznek.
A „modernebb” nem cél; a cél egy konkrét felhasználói feladat jobb elvégezhetősége.
A tervezési döntés bizonyítékra épül, nem ízlésre.
Ellenőrző kérdések
Mi a különbség UX és UI között egy konkrét digitális szolgáltatásban, amit te is használsz?
Nevezz meg három érintkezési pontot, amely nem maga a fő alkalmazásképernyő.
Miért nem elég egy problémát úgy megfogalmazni, hogy „a felület elavult”?
Milyen információ kell egy felhasználónak ahhoz, hogy egy feladat végét biztosnak érezze?
UX, UI és szolgáltatásélmény
Célok
A lecke végére meg tudod különböztetni a felület vizuális minőségét a teljes felhasználói élménytől. Meg tudsz nevezni egy digitális szolgáltatás több érintkezési pontját, és egy problémát nem képernyőhibaként, hanem felhasználói feladat és következmény összefüggéseként tudsz leírni.
Miért kezdjük itt?
Aki először hall az UX/UI tervezésről, gyakran a „szép appokra” gondol: lekerekített gombokra, ügyes színekre, finom animációkra. Ez érthető, hiszen ezt látjuk. A tervezés nagyobbik része viszont nem látszik: annak megértése, hogy ki mit szeretne elérni, hol akad el, mit ért félre, és mi történik, ha valami nem sikerül. Ha ezt az alapot kihagyjuk, akkor a legszebb felület is csak szép dobozba csomagolt bizonytalanság marad. Ezért az első lecke célja, hogy pontos fogalmaink legyenek arról, mit tervezünk valójában.
Mit jelent az UX?
Vegyünk egy hétköznapi példát: egy hallgató vizsgára jelentkezik. Az élménye nem a „Jelentkezés” gombra kattintásnál kezdődik. Már akkor elkezdődik, amikor megpróbálja kideríteni, mikor van a vizsgaidőszak, és hol találja a jelentkezést. Része az, hogy érti-e a feltételeket, hogy hibátlanul ki tudja-e tölteni az űrlapot, hogy kap-e visszaigazolást, és hogy két héttel később vissza tudja-e keresni, melyik időpontra jelentkezett. Ha a folyamat bármelyik pontján bizonytalan, az az élmény része, akkor is, ha az adott képernyő önmagában jól néz ki.
Az UX tehát folyamat és következmény, nem pillanatnyi benyomás. Három kérdés segít észben tartani:
Mit jelent az UI?
Az UI, vagyis user interface (felhasználói felület) az a réteg, amelyen keresztül a felhasználó a folyamatot látja és kezeli: címsorok, gombok, mezők, navigáció, ikonok, színek, térközök és visszajelzések. Az UI fontos, mert rajta keresztül válik érthetővé a rendszer. Ha a gombok nem látszanak gombnak, vagy a hibaüzenet olvashatatlan, akkor a legjobb folyamat sem fog működni.
Az UI és az UX viszonyát jól mutatja a következő hasonlat. Az UI olyan, mint egy étterem berendezése, tányérjai és étlapja. Az UX az egész vacsora: a foglalás, az érkezés, a várakozás, az ételek sorrendje, a számla és az, hogy a vendég jól érezte-e magát. Szép tányérokkal is lehet rossz vacsorát felszolgálni, és egyszerű berendezésben is lehet kiváló estét tölteni.
Gyakorlati következmény: a „tegyük modernebbé” önmagában nem tervezési cél. A kérdés inkább az, hogy melyik ember milyen helyzetben milyen feladatot nem tud most elég biztosan, gyorsan vagy méltányosan elvégezni? A felület ennek a megoldásához ad eszközöket.
Egy folyamatot tervezünk, nem egy képernyőt
A feladatfolyam a cél eléréséhez szükséges lépések, döntések és állapotok sora. Nézzünk egy példát, amely végigkíséri majd a tananyagot.
A Mai program kezdőképernyőjén lehet egy nagy, látványos keresőmező. A valódi élmény azonban több lépésből áll:
Ha csak a harmadik lépés képernyőjét tervezzük meg, könnyen elvesznek az előzmények és a következmények. Az „Elérhető” címke kevés, ha nem világos, hogy hányra kezdődik az esemény, mennyi a belépő, és be kell-e jelentkezni előre. A jó UX nem azt jelenti, hogy minden egyszerre látható; azt jelenti, hogy a döntés pillanatában a szükséges információ elérhető és érthető.
flowchart LR A["Cél:<br>ma este kimozdulok"] --> B["Keresés"] B --> C["Összehasonlítás"] C --> D["Döntés és jelentkezés"] D --> E["Visszaigazolás"] E --> F["Esemény előtt:<br>részletek, lemondás"] C -.->|"nem talál megfelelőt"| BAz ábrán a szaggatott nyíl azt mutatja, hogy a felhasználó útja ritkán lineáris: visszalép, újra keres, meggondolja magát. A jó tervezés ezt is figyelembe veszi.
Érintkezési pontok és szolgáltatásélmény
A szolgáltatásélmény a digitális felületen túlmutató, teljes ügyfélút élménye. Az érintkezési pont a szolgáltatás bármely pillanata vagy csatornája, ahol a felhasználó információval, felülettel vagy szervezettel találkozik.
Digitális terméknél is gyakori, hogy a felhasználó útjának egy része a felületen kívül történik. Érintkezési pont lehet az alkalmazás képernyője, de ugyanúgy egy e-mail, egy push értesítés, egy ügyfélszolgálati válasz, egy automatikusan generált számla, egy fizikai helyszín vagy egy másik szervezet rendszere. A Mai programban például az érintkezési pontok: a keresőfelület, az esemény oldala, a jelentkezési visszaigazoló e-mail, az esemény előtti emlékeztető és a helyszínen a bejáratnál fogadó szervező.
Hogy miért fontos ez? Mert a felhasználó nem érzékeli, hogy ezeket más-más csapat vagy rendszer működteti. Ha a felület azt ígéri, hogy a jelentkezésed sikeres, de az e-mail nem érkezik meg, akkor a szolgáltatás számára bizonytalan marad. Az ő szemszögéből egyetlen szolgáltatás van, nem tíz érintkezési pont.
Ez nem azt jelenti, hogy egy hallgatói projektben minden csatornát teljes részletességgel meg kell tervezni. Azt jelenti, hogy azonosítanod kell a kritikus pontokat: azokat, ahol egy hiba vagy bizonytalanság miatt a felhasználó feladja a feladatot, vagy rossz döntést hoz. Egy feladat akkor tekinthető lezártnak, ha a felhasználó azt is tudja, mi történt, mi fog ezután történni, és hol kérhet segítséget.
UX, UI és product design
A terméktervezés (product design) kifejezés általában a problémamegértést, a megoldás kialakítását és a termékcélokkal való összehangolását fogja össze. Nem minden szervezet használja ugyanígy a szerepneveket: van, ahol az „UX designer” kutat és wireframe-et rajzol, máshol az „UI designer” csinálja a vizuális stílust, és megint máshol egyetlen „product designer” viszi végig az egészet. A lényeg állandó: a design döntés nem csak ízlés. Kutatásra, működési korlátra, üzleti célra, technológiára és a felhasználóra vonatkozó bizonyítékot mérlegel.
Egy bejelentkezési folyamatban például a szervezet csökkenteni szeretné a visszaélést, a fejlesztő biztonságos azonosítást akar, a felhasználó pedig gyorsan be szeretne lépni. A jó terv nem választja ki egyszerűen az egyik célt a többi helyett. Megvizsgálja, mekkora a hiba kockázata, milyen lépés indokolt, és hogyan lehet a szükséges biztonságot érthetően kommunikálni.
Végigvezetett példa: hol a probléma?
A Mai program első ötlete egy csapat fejében így hangzik: „Kell egy modern, térképes eseményapp.” Ebben a mondatban egyetlen szó sem a felhasználóról szól. Mielőtt bármit rajzolnánk, érdemes feltenni a kérdést: mit nem tud most a hallgató elég biztosan, gyorsan vagy méltányosan elvégezni?
Lehet, hogy a hallgatók ma Facebook-eseményekben, plakátokon és ismerősök üzenetében keresgélnek. A fő nehézség talán nem az, hogy nincs térkép, hanem hogy sok forrásban kell összeszedni az adatokat, és gyakran csak a helyszínen derül ki, hogy az esemény ára vagy nyelve nem megfelelő. Ha ez igaz, akkor a „modernebb térkép” nem oldja meg a problémát, de az „egy helyen, összehasonlítható adatokkal” igen. Hogy ez igaz-e, azt a következő fejezetek kutatási módszereivel tudjuk megállapítani.
Gyakori tévhitek
Röviden
Ellenőrző kérdések