Ügyfélközpontú tervezés 2. rész: UX és UI design

Cikkünk első részében a felhasználói kutatásról és termékstratégia tervezésről írtunk. A folytatásban a design folyamat második, befejező fázisával, a UX és UI design tervezéssel foglalkozunk.

Miután megismertük és priorizáltuk az üzleti célokat és a valós felhasználói igényeket, definiáltuk a megoldandó problémákat, megfogalmaztuk a tervezési irányelveket, feltettük a releváns „Hogyan tudnánk…” kérdéseket és kidolgoztuk a termékkoncepciót, minden eszközünk megvan ahhoz, hogy elkészítsük digitális termékünk UX és UI designját.

1. User flow tervezés
2. Információs architektúra tervezés
3. Drótvázak
4. Felhasználói tesztelés és iteráció (drótvázak és user flow)
5. UI design
6. Felhasználói tesztelés és iteráció (UI design)
7. Design system átadás

A felhasználók különböző módon és útvonalakon léphetnek interakcióba egy termékkel. A folyamat minden esetben egy belépési ponttal (például egy kezdőlap vagy egy landing oldal) kezdődik és valamilyen végső művelettel (regisztráció, feliratkozás, stb.) vagy eredménnyel (termék vásárlás) zárul.

A teljes konverziós folyamat lépések sorozatából áll, ezért a megfelelő felhasználói utak kialakításának kulcsa a megfelelő információ megfelelő időben történő megjelenítése. A felhasználók nagyobb valószínűséggel hajtanak végre egy kívánt konverziót, ha minden lépésben biztosítjuk számukra a szükséges információt.

Annak érdekében, hogy minimalizáljuk a felhasználók „lemorzsolódását”, minden lépésnél csakis annyi információt célszerű megjelenítenünk, amennyire a felhasználónak valóban szüksége van az adott lépés elvégzéséhez. Ezáltal egy hatékony és intuitív felhasználói felületet tudunk elérni.

A már használatban lévő termékek esetében a felhasználói folyamatábrák segítenek arra is rávilágítani, hogy a felhasználók miért akadnak el egy bizonyos ponton és mit tehetünk a problémájuk elhárítása érdekében.

Mielőtt egy író megír egy könyvet, vázlatot készít, az építész tervrajzot csinál. Az információs architektúra tervezés során olyan módon rendszerezzük a tartalmat, hogy a felhasználók a lehető legkisebb erőfeszítéssel találjanak meg minden számukra szükséges információt.

Az információk rendszerezése által könnyebbé válik a termék funkcióinak, hierarchiájának, navigációjának és egyéb interakcióinak a megértése. Ez lesz a tervezési projektünk alapváza, a legfontosabb dokumentum, ami távlatból mutatja be a teljes digitális terméket.

A megfelelő információs architektúra hiánya megnehezíti és érthetetlenné teszi a navigációt, így a felhasználók könnyen elveszhetnek a felületen és az első rossz benyomások után nem adnak még egy esélyt a termékünknek.

Az épületek tervrajzától eltérően az információs architektúra folyamatosan változik, a változó felhasználói igények és új funkciók mentén fejlődik, így egy mindenkori aktuális térképet biztosít a csapat számára.

Minél jobban ismeri a teljes termékfejlesztő csapat az információs architektúrát, annál pontosabban fogja mindenki tudni, hogy az adott pillanatban mi kivitelezhető és mi nem, és hogy egy adott változtatás vagy új fejlesztés várhatóan mekkora munkával jár. A jól átgondolt információs architektúrával tehát rengeteg időt és pénzt takaríthatunk meg.

A felhasználói utak és információs architektúra birtokában már elkezdhetjük vázlatosan megtervezni az egyes folyamatokat, képernyőket és felvázolhatjuk mindazokat a funkcionalitásokat és felületi elemeket (pédául gombok, menük, legördülő menük, stb.), amelyekkel a felhasználók a termék használata közben majd interakcióba lépnek.

A drótvázakkal elsősorban a funkcionalitásra, a tervezett viselkedésre, valamint a hierarchiára és az elemek elrendezésére összpontosítunk. Stílust és színt minimálisan használunk itt még, általában csak szürkenyárnyalatos elemekkel dolgozunk annak érdekében, hogy a lényegre koncentráljunk.

A drótvázakat rajzolhatjuk kézzel vagy digitálisan, attól függően, hogy mennyi részletre van épp szükségünk. A kidolgozatlanabb, skicc szerű drótvázakkal („low fidelity wireframes”) a felület legalapvetőbb folyamatait jeleníthetjük meg és itt még mellőzünk minden olyan részletet, amely elvonhatja a figyelmet a lényegről.

Ezek a sematikus drótvázak nagyszerűen alkalmazhatók a brainstorming fázisban, amikor gyorsan akarunk több öteletet, koncepciót felvázolni, például egy termék legjellemzőbb képernyőiről, a főbb interakcióiról, vagy, hogy melyik képernyő hová vezet. Az első felhasználói teszteléseken is lényegretörőbb, őszintébb válaszokat kaphatunk első benyomásként, hiszen a felhasználók nem a részletekkel vannak elfoglalva.

Kattintható prototípust is készíthetünk (miért fontos a prototípus?) ebben a fázisban, amivel már most életre tudjuk kelteni a terméket, így sokkal könnyebben megérthetjük, hogyan kommunikálnak a felhasználóink a felülettel, mi az, ami intuitív számukra és mi az, ami nem.

A problémák, fájdalmas pontok is könnyen azonosíthatók ebben a szakaszban, és jelentősebb idő- és pénzráfordítás nélkül javíthatók, hiszen a tervezés későbbi szakaszaiban már sokkal nehezebb változtatásokat végrehajtani.

A kidolgozottabb drótvázakkal („high fidelity wireframes”) már részletesebben tudjuk bemutatni felületeinket és elkezdhetjük előkészíteni azokat az egyéb elemeket, melyekre később, a UI design tervezéskor és a design system elkészítésekor is szükségünk lesz.

A felületek szövegezése például jelentősen befolyásolhatja a felhasználók viselkedését, a  „lorem ipsumok” helyett már most elkezdhetünk foglalkozni a valós jövőbeli szöveges tartalmakkal, azok kontextusával és helyigényével.

A drótvázak hatékonyan használhatók a felhasználókkal és az ügyféllel való kommunikáció során is, párbeszédet kezdeményeznek és megkönnyítik a felhasználók visszajelzését, ötleteket generálnak a tervezők számára és segít minden résztvevőnek abban, hogy mély ismerettel rendelkezzen a termékről.

Rengeteg fejlesztési időt és erőforrást tudunk a későbbiekben megspórolni, ha még korán, a  drótvázak felhasználói tesztelése során derül ki, hogy a folyamat vagy az elrendezés nincs összhangban az intuitív felhasználói használattal.

A drótvázak tesztelésével viszonylag gyorsan kipróbálhatunk különböző koncepciókat, majd gyors tervezési döntéseket hozhatunk meg. Ha ezt a munkát még most, a design kidolgozása és az implementáció előtt végezzük el, nagyon sok időt és fejlesztési költséget spórolhatunk meg.

A tesztelés során összegyűjtött felhasználói visszajelzések és insight-ok alapján elvégezzük a user flow-n és a drótvázakon a szükséges módosításokat és újra le is tesztelhetjük azokat a felhasználókkal.

A felhasználói felület (angolul „user Interface”, röviden UI) tervezés végcélja, hogy olyan terméket hozzunk létre, ami megragadja a felhasználók figyelmét és élménnyé teszi annak használatát. Ez az élmény pedig a használhatóság, az esztétikusság és az egyediség együttes jelenlétéből származtatható.

Digitális világunkban a vállalkozások megértették, hogy a kiemelkedő felhasználói élmény ma már létfontosságú a bizalom és a márkahűség eléréséhez. A jól megtervezett digitális élmény nem kívánalom, sokkal inkább elvárás, annak hiányában a felhasználók nagyon gyorsan egy konkurens cég termékéhez pártolhatnak át.

A jó felhasználói felület azon felül, hogy esztétikus és könnyen használható, a termék vizualitásával magát a brandet és az üzleti célokat is kifejezi és felhasználókra szabottan kommunikálja.

A UI tervezés során megrajzoljuk az összes olyan tipikus képernyőt, ami alapján a későbbiekben egyértelműen elkészíthető a termék implementációja. Weboldalak esetében elkészítjük a különböző képernyőméretekre (mobil, tablet, desktop) is a reszponzív webdesignt.

A sikeres felhasználói felület létrehozásához a felületi elemek mellett tervezési irányelvek alkalmazására is szükségünk van, ezeket foglaljuk össze az ún. „design system”-ben. A design system minden UI elemet és egyedi képernyőtervet magában foglal, ami alapján a fejlesztőcsapat elvégezheti a termék implementálását.

Az elkészült UI dizájnt leteszteljük a felhasználókkal és a tesztelés során összegyűjtött visszajelzések alapján elvégezzük a szükséges módosításokat, majd újra letesztelhetjük a felületet.

A design system a tervezés során létrehozott UI építőelemeket (színeket, formákat, tipográfiát, gombokat), komponenseket (ismétlődő, újra felhasználható, összetett elemeket), egyedi képernyőterveket, valamint azokat a UX és UI szabályokat és irányelveket (guideline-okat) tartalmazza, melyek alapján a megtervezett képernyők lefejleszthetők, illetve kiterjeszthetők további, jövőben elkészülő oldalakra.

A design system folyamatosan változik együtt a termékkel, az eszközökkel és a rendelkezésre álló új technológiákkal, egyértelműséget és következetességet biztosít mind a tervezői, mind a fejlesztői csapat számára.

A termék vizuális és funkcionális egységessége, a közös tervezési nyelv segítségével a tervezői és a kivitelezői csapat sokkal gyorsabban és hatékonyabban tud kommunikálni egymással, jelentősen csökkentve ezzel a projekt költségét.

A jól megtervezett, kiemelkedő felhasználói élmény a mai, digitálisan vezérelt környezetben már inkább elvárás, mint kívánalom. Óriási szerepet játszik a bizalom és a márkahűség kiépítésében.

A sikeres felhasználói felület egyszerre esztétikus, könnyen használható, közvetíti a brandet, az üzleti célokat, és a felhasználókra szabottan kommunikál. Munkánkkal a tervezéstől a kivitelezésig minden lépésben partnerként segítünk ügyfeleinknek.

Ha kérdéseid merültek fel a témával kapcsolatban, keress minket bátran, vagy jelentkezz ingyenes konzultációnkra, ahol közösen kitaláljuk, milyen típusú fejlesztés illik leginkább a cégedhez!