Mi a UI és a UX design? Különbségek, feladatok, folyamat

Ha app-ötleted van, vagy egy meglévő termék nem hozza a számokat, előbb-utóbb szembejön a két rövidítés: UX és UI. Az ajánlatokban hol együtt, hol külön szerepelnek, az árak pedig nagyon eltérnek. Ebben a cikkben azt szedtük össze, amit egy döntéshozónak tudnia érdemes a kettőről: mi a különbség, ki mit csinál, hogyan függ össze a kettő egy projektben, és mikor melyikre van szükséged.

Egy mondatban: a UX design arról szól, hogy a termék működik-e a felhasználónak, a UI design pedig arról, hogy közben hogyan néz ki és hogyan viselkedik a felület. A kettő nem választható el egymástól, de nem is ugyanaz a munka.

Mi a UX design?

A UX a user experience, magyarul felhasználói élmény rövidítése. A UX design tehát felhasználói élmény tervezés: annak a folyamatnak a megtervezése, ahogy valaki egy digitális terméket használ. A képernyők szépsége itt mellékes. Az számít, hogy a felhasználó érti-e, mit kell tennie, célba ér-e gyorsan, és van-e kedve visszajönni.

A UX designer ezért a munka nagy részében kérdez és mér, rajzolni csak utána kezd. Interjúzik a célcsoporttal, végignézi, hol akadnak el a jelenlegi felhasználók, felrajzolja a folyamatokat (user flow), megtervezi az információs architektúrát, vagyis azt, hogy mi hol legyen, és drótvázakat (wireframe) készít, amin még nincs szín és tipográfia, csak szerkezet. Ezeket prototípusban teszteli valódi emberekkel, mielőtt egyetlen sor kód elkészülne.

A tipikus UX-kérdések: hány lépés a regisztráció, és mindegyik kell-e? Mit lát a felhasználó, ha valami hibára fut? Miért hagyja ott a látogatók nagy része a kosarat a fizetés előtt? Ezek üzleti kérdések, csak a felület nyelvén.

Mi a UI design?

A UI a user interface, azaz felhasználói felület. A UI design az a réteg, amit a felhasználó ténylegesen lát és megérint: a gombok, a mezők, a tipográfia, a színek, az ikonok, a térközök, és az, hogy ezek hogyan reagálnak egy érintésre vagy kattintásra.

A UI designer a drótvázból kész felületet csinál. Eldönti, hogy a fő gomb hogyan különbözzön a másodlagostól, hogyan nézzen ki egy mező hibás állapotban, mekkora legyen a betű mobilon, hogy ne kelljen nagyítani. Nagyobb termékeknél design systemet épít: újrafelhasználható komponensek és szabályok gyűjteményét, ami miatt a századik képernyő is ugyanúgy néz ki, mint az első, és a fejlesztők nem találgatnak.

A jó UI-nak két mércéje van. Az egyik, hogy a márkához illik-e, a másik, hogy segíti-e a használatot: a fontos dolgok szembetűnőek, a kevésbé fontosak hátrébb lépnek. Egy felület lehet gyönyörű és használhatatlan is egyszerre. Ilyenkor a UI rendben van, a UX nem.

UI vs UX: mi a különbség valójában?

A legegyszerűbb hasonlat az építkezés. A UX az alaprajz és a közlekedési útvonalak: hol a bejárat, hány lépés a konyhától a spájzig, van-e értelme a helyiségek sorrendjének. A UI a belsőépítészet: a burkolat, a világítás, a kilincs formája. Rossz alaprajzot a legszebb burkolat sem ment meg. Egy jó alaprajz viszont gyenge kivitelezéssel is használható marad, csak senki nem fog benne szívesen élni.

A gyakorlatban így válik szét a kettő:

• A UX a folyamatot tervezi, a UI a képernyőt.

• A UX kérdése: érti és eléri-e a célját a felhasználó? A UI kérdése: látja, felismeri és szívesen használja-e, amivel dolgozik?

• A UX eszközei a kutatás, a user flow, a wireframe és a használhatósági teszt. A UI eszközei a tipográfia, a színrendszer, a komponensek és az állapotok.

• A UX eredménye egy tesztelt prototípus és egy logikus szerkezet. A UI eredménye a kész, fejlesztésre átadható felület és a design system.

Azért keverik a kettőt, mert a végeredményben összeolvadnak: a felhasználó egyetlen felületet lát, és nem kell tudnia, hogy a mögötte lévő döntések melyik szakmából jöttek. A megrendelő oldalán viszont fontos a különbség, mert máshol van a kockázat. Ha a UX gyenge, a termék nem fog működni. Ha a UI gyenge, a termék olcsónak és megbízhatatlannak tűnik.

Ki mit csinál: UX designer, UI designer, product designer

Nagyobb csapatokban a két szerep külön ember. A UX designer erőssége a kutatás, az elemzés és a folyamattervezés; gyakran pszichológiai vagy kutatói háttérrel érkezik, és sok időt tölt felhasználókkal. A UI designer vizuális tervező: tipográfiához, színhez, kompozícióhoz és mozgáshoz ért, és tudja, hogyan lesz a tervből olyan komponens, amit a fejlesztő pontosan meg tud építeni.

Kisebb csapatokban és ügynökségeknél, így nálunk is, a kettő általában egy kézben van, ezt hívják product designernek. Ennek előnye, hogy a folyamat és a felület egyszerre készül, nincs átadási veszteség a kettő között. Hátránya, hogy sokat kell tudni: egy jó product designer ugyanolyan otthonosan mozog egy interjún, mint egy Figma-fájl komponenskönyvtárában.

Ha ajánlatot kérsz, ezt érdemes megkérdezned: ki fog kutatni, ki fog tervezni, és ugyanaz az ember tesztel-e, aki a felületet rajzolta. Egy „UI/UX design" tétel az árajánlatban önmagában nem mondja meg, hogy a kettőből mennyit kapsz.

Hogyan dolgozik össze a kettő egy projektben?

Egy digitális termék tervezése nálunk nagyjából ebben a sorrendben megy, és a sorrend nem véletlen: a UX-döntések előbb születnek, mint a UI-döntések, mert olcsóbb egy drótvázat átrajzolni, mint egy kész felületet.

1. Kick-off és felfedezés: kik a felhasználók, mi az üzleti cél, mit mérünk majd. Interjúk, versenytárs-elemzés, a meglévő adatok átnézése.

2. Szerkezet és folyamatok: információs architektúra, user flow-k, drótvázak. Itt dől el, hány lépés a fő folyamat és mi marad ki.

3. Prototípus és teszt: kattintható prototípus valódi felhasználókkal. Ami itt kiderül, az még olcsón javítható.

4. Vizuális tervezés és design system: a tesztelt szerkezetre kerül a felület, a komponensek és a szabályok, amivel a fejlesztés dolgozik.

5. Átadás és utókövetés: a fejlesztés közbeni kérdések, majd az élő termék mérése és finomítása.

A gyakorlatban a lépések átfednek, egy kisebb MVP-nél pedig rövidülnek, de a logika ugyanez. A folyamat részletes leírását a digitális terméktervezés szolgáltatásoldalunkon találod. Hogy ez élesben hogyan néz ki, azt a Krewly toborzóplatform és a Bubbles mosodahálózat design systemje mutatja meg: az egyiknél a folyamat, a másiknál a felület és a komponenskönyvtár volt a nagyobb munka.

Mikor kell UX, mikor UI, és mikor mindkettő?

Ez a kérdés dönti el, mennyit és mire érdemes költened.

Ha új terméket építesz, appot vagy webalkalmazást, mindkettő kell, és a UX-szel érdemes kezdeni. Az ötlet validálása, az MVP scope és a prototípus előbb jön, mint a szép felület; erről részletesen írtunk a mobilalkalmazás-ötlet validálásáról. A leggyakoribb hiba, amit látunk, hogy a csapat a UI-val kezd, mert az mutatós, és a folyamat hibái csak az élő termékben jönnek elő.

Ha van egy élő terméked, ami sok letöltést vagy látogatót kap, de kevesen maradnak és kevesen fizetnek, szinte biztosan UX-problémád van. Ilyenkor UX-audit kell, nem teljes újratervezés: mérés, néhány felhasználói teszt, és a legnagyobb elakadások javítása. Az öt leggyakoribb okot külön cikkben szedtük össze arról, miért bukik el egy app a rossz UX-en.

Ha a termék működik, de elavultnak néz ki, vagy nem illik az új arculathoz, akkor UI-munka kell: vizuális frissítés és design system, a folyamatok érintetlenül hagyásával. Ez a legkisebb kockázatú beavatkozás, feltéve, hogy tényleg nem a szerkezettel van a baj.

Weboldalnál, ahol a cél a látogatóból érdeklődőt csinálni, a két szakma a konverzióoptimalizálásban találkozik: a UX mondja meg, hol veszíted el az embereket, a UI pedig azt, hogyan vezesd őket tovább.

Mennyibe kerül, és mennyi időt vesz igénybe?

Erre nincs őszinte általános szám, mert a kettő ára nagyon máshogy alakul. A UX-munka ideje a kutatás mélységétől és a folyamatok számától függ: egy UX-audit néhány hét, egy új termék felfedezési és prototípus-szakasza jellemzően 4-8 hét. A UI-munka ára a képernyők számától és attól függ, kell-e design system; egy kisebb app tucatnyi képernyője és egy több platformon élő rendszer több száz komponense között nagyságrendi a különbség.

Amit érdemes tudni: a UX-re költött idő a teljes projekt költségének kis része, de a legnagyobb hatással van arra, hogy a fejlesztés végén használható termék születik-e. Egy fejlesztés közben átírt folyamat többe kerül, mint az egész tervezés. Ha konkrét számokra van szükséged, az applikáció-fejlesztés költségeiről szóló cikkünkben adunk sávokat.

Ha van egy termékötleted, vagy egy meglévő termék, ami nem hozza a számokat, beszéljünk róla: egy rövid egyeztetésen általában kiderül, hogy a folyamattal, a felülettel vagy mindkettővel van dolgunk. Az egyeztetést a terméktervezés oldalunkról tudod kérni.