Felhasználói élmény tervezés

Az OANDER Solution Design csapata ergonómiai és design tervezéssel, a felhasználói felületek technológiai megvalósításával segíti világmárkák és startup-ok digitális transzformációját. A felhasználói élmény tervezés végeredményeként több mint egy évtizede átgondolt, funkcionális és márkahű online termékek kerülnek ki a kezeink közül.

A víziótól a megvalósuló termékig

Egy komplex digitális termék esetében (legyen az portál, webáruház, alkalmazás vagy szoftver) a felhasználói élmény tervezés sok, egymásra épülő lépésből áll és sosem a felhasználói felület dizájnjával kezdődik. A tervezés ott indul, hogy átgondoljuk, mit fognak tenni a website-on a látogatók, megfigyeljük hogyan viselkednek és kattintásról kattintásra megtervezzük a használat módját. Lássuk, hogyan is néz ki ez a felfedezőút, mik egy sikeres online terméktervezés legfontosabb lépései!

Hőtérképes vizsgálatok és forgalomelemzés

Meglévő portál átalakítása esetén hőtérképes és forgalomanalitikai elemzéseket végzünk, amely során a felhasználók viselkedését tárjuk fel (pl. mozgások, görgetések, kattintások). Az egyes oldaltípusok átvilágítása során azonosítjuk a konverziós lemorzsolódásokat és feltárjuk a fájdalompontokat. A kutatási eredményekből egy tervezési vezérfonal készül, amely kijelöli, hogy az ergonómiai tervezésnek az egyes felületek esetében milyen fókuszt kell venniük.

Best practice kutatás

Egy webes terméket jellemzően nem egyetlen alapötlet tesz kiválóvá, hanem sok elképzelés, apró, ámde egyedi megoldás. A best practice kutatás során mintaértékű megoldásokat gyűjtünk és rendszerezünk a készülő termék számára. Célja, hogy funkcionális ötletekkel és ergonómiai elképzelésekkel segítse elő a terméktervezést. Emellett fontos feladata, hogy tisztán lássuk: a konkurensek milyen megoldásokat alkalmaznak, ezekből mit érdemes adaptálnunk, és mivel válhatunk egyedivé?

Kvalitatív vizsgálatok

Buyer / user persona alkotással felállítjuk a felhasználókkal kapcsolatos hipotéziseket, a termékkel kapcsolatos elvárásokat, attitűdöket és a megoldandó élethelyzeteket pedig irányított felhasználói interjúkkal mélyítjük. Az információs architektúra kialakításához jellemzően a card sorting módszertanához nyúlunk, amely során kulcsfelhasználókkal csoportosíttatjuk a tartalmakat, majd azokat szoftveresen kiértékeljük.

Wireframe tervezés

Az ergonómiai tervezés döntések sorozata. Mit mutassunk meg egy képernyőn és mit rejtsünk el? Hogyan lehet egyszerűbbé tenni egy funkciót? Miként fókuszáljuk a felhasználó figyelmét egy adott irányba? Ezen kérdések eldöntéséhez drótvázakat (wireframe terveket) készítünk, amelyek gyakorlatilag a készülő webes alkalmazás felületek szabásmintái. A wireframe tervek tartalmazzák a portál valamennyi oldaltípusának összes állapotát, és egyértelműen orientálják a későbbi látványtervek elkészítését.

UI design

A tényleges látványvilág megtervezése az adott oldaltípus drótváz tervein alapszik. Egy kiválasztott layoutra webarculati koncepciókat készítünk, majd a legjobb variációt tökéletesre finomítjuk. Csak azt követően látunk neki az aloldalak, alsóbb szintű felületek grafikai tervezésének, ha már egy főképernyős design terv formájában véglegesítettük a felhasználói felület arculati jellemzőit. A UI design során a drótvázak alapján elkészítjük a látványterveket valamennyi releváns reszponzív állapotban.

Mikrointerakciók

Tökéletesen kidolgozott gombok, igényes hover hatások, elegáns, finom mozgatások. Ezektől élő és intuitív egy user interface. Nemcsak statikus látványterveket készítünk, de kialakítjuk a mikrointerakciókat és az animációs szabályrendszert. A precíz részletgazdagság kidolgozása ugyan tovább tart, de az eredmény mindig magáért beszél.

UI kit kialakítása

A UI kit a főbb design komponenseket és a projektre jellemző webarculati szabványokat definiáló állomány, amelyben az összes fontos visszatérő elem (gombok, formok, kiajánlók, boxok, stb.), valamint a készülő terméket meghatározó színvilág, tipográfia és ikonhasználat szabályrendszerét véglegesítjük. A UI kit biztosítja, hogy a visszatérő komponensek egységesek legyenek az összes felületen és a frontend fejlesztést is hatékonyabbá teszi.

Layout fejlesztés

A felhasználói élmény nem ér véget a design tervcsomag elkészítésével. Annak éppúgy része a frontend kialakítás, vagyis a pixelpontos megvalósítás, az animációk és a precízen kidolgozott reszponzivitás. A grafika és a sitebuild kéz a kézben járnak. A webdesign ma már egy technológiák által vezérelt szakterület, amelyhez szükséges a design érzékenységet támogató fejlesztői tudás. A felhasználói élményt ezért kompletten kivitelezett, jó minőségű frontend megoldásokkal tesszük teljessé.

Kiemelt munkáink

Csatlakoznál partnereink táborához? A felhasználói élmény tervezés igazi csapatmunka. Dolgozzunk együtt a fejlesztésén! Kapcsolatba lépés

A gyors piacra lépés módszertana

A fejlesztések mellett a felhasználói élmény tervezés terén is agilis módszertannal dolgozunk. A SCRUM lényege, hogy minél előbb egy működő prototípust állítsunk elő, tényleges felhasználói visszajelzések alapján, gyors release-ciklusok mellett tegyük egyre jobbá a terméket és gyorsan reagáljunk a menetközben változó igényekre.

Elhúzódó projekt helyett MVP-fókusz

A komplex digitális termékfejlesztések egyik gyakori hibája, hogy mindent egy lépésben és egyszerre szeretnénk megtervezni és megvalósítani. Valójában a projekt kezdetén sosem látható előre tökéletesen az a műszaki tartalom, amire végül ténylegesen szükségünk lesz. Ezért agilis megközelítésben az MVP (minimum viable product), azaz a leggyorsabban elkészíthető első működő prototípus elérése az elsődleges cél, majd pedig annak a release ciklusonként történő továbbfejlesztésén dolgozunk.

Igazodás a változó követelményekhez

Természetesen minden projekt kezdetén meghatározzuk a scope-ot, a végső célt, amit el szeretnénk érni. Ezzel együtt nem baj, ha a tervezés vagy fejlesztés alatt álló termékkel szembeni követelmények menet közben megváltoznak. Ez szinte minden digitális projekt természetes velejárója. A Scrum módszertana éppen arra épül, hogy ha egy követelmény változik, új ötlet merül fel, arra gyorsan reagáljunk.

Nem kell előre megtervezni az egész projektet

2 hetes sprintekben dolgozunk, amelyek meghatározzák, hogy milyen felületeket készítünk el az adott két hét alatt. Azt, hogy a munka mivel folytatódjon, a kétheti sprintfordulón döntjük el a megrendelővel közösen. Így a product owner kézben tartja az irányítást, és ha változnak a prioritások, a tervező csapat munkája gyorsan tud azokhoz igazodni.

Azonnal használható terméknövekmények

Az egyes sprintekben ténylegesen felhasználható terméknövekményeket állítunk elő. Vagyis a munka szervezhető úgy, hogy a tervezőasztalról lekerülő eredményeket a fejlesztő csapatok azonnal használatba tudják venni. Így a tervezés és fejlesztés párhuzamosítható, kéz a kézben járnak.

Tervezési döntések valós visszajelzések alapján

A működő szoftvert látva és használva pontosabb döntések és jobb továbbfejlesztési ötletek születnek, amik akár eltérhetnek a projekt kezdeti víziójától is. Ráadásul a sprintről sprintre való tervezés révén a tesztelés, kipróbálás is könnyebb, amelybe felhasználók is bevonhatók. Így a tervezési-fejlesztési döntések valós visszajelzéseken alapulnak.

Transzparencia és közvetlen munkakapcsolat

A Scrum-ban dolgozó kivitelező csapatainkkal nem egy elszigetelt ügynökségként vagyunk jelen a megrendelő projektjében, hanem folyamatos iteráció mellett tényleges részeseivé válunk. A projekt ideje alatt közvetlen megrendelői munkakapcsolat alakul ki az elemzőkkel, UX tervezőkkel, designerekkel és fejlesztőkkel. Ezzel minimalizáljuk a kommunikációs asszimetriát.

Bővebben az OANDER tervezési és fejlesztési módszertanáról