Mi a UI és a UX jelentése? Mi a különbség közöttük?

perc

2023

‍

Ha egy digitális termék vagy szolgáltatás létrehozásáról beszélünk, egy átlag felhasználó általában kétféle tevékenységet nevesít meg a munkafolyamat során: a programozást és a dizájnt. A dizájn pedig rögtön két feladatkörre bontható szét: ezek pedig a UI és a UX.

A két betűszó mögött egészen összetett folyamatok rejlenek. Ebben a bejegyzésben két dizájner feladatkörét fogjuk összehasonlítani. Nézzük meg, hogy mit jelent a UI és a UX dizájn.

Mi a különbség a UI és a UX között?

Először is: mit jelent magyar nyelvre lefordítva a UI és a UX betűszó?

UI: User Interface, azaz felhasználói felület
UX: User Experience, azaz felhasználói élmény

Már most leszögeznénk, hogy mindkét elem kulcsfontosságú a termék megvalósulásának szempontjából. Fontos, hogy a napi munkavégzés során két szorosan együttműködő területről beszéljünk. A szorosan összefűződő szakmai kapcsolat ellenére a “UI-os” és a “UX-es” feladatkörei egészen mások, a tervezés különböző aspektusaival foglalkoznak.

Hogy egy érthető példát hozzunk: egy autóban például felhasználói élményt ad az, hogy a tempomat miatt magától tartja a sebességet az autó. Vagy ilyen az automatikus váltó is. Egyszerűbbé teszi a sofőr számára a vezetést. Ez a UX. A UI viszont vonzóvá teszi az autót: az ő feladatuk az, hogy aki autót akar vásárolni, már egy kép alapján is beleszeressen a járműbe. Ha pedig beleszeretett, akkor a UX dolga biztosítani a vásárlást egy jó tesztvezetés során.

Mielőtt azonban még mélyebben megvizsgálnánk a UI és a UX közötti különbségeket és hasonlóságokat, nézzük meg mit jelentenek külön-külön.

‍

User Interface (UI): felhasználói felület

A UI nem más, mint az angol User Interface kifejezés rövidítése, aminek jelentése: felhasználói felület. Ez az a felület, ahol a felhasználó és a szoftver kapcsolatba lép egymással egy meghatározott feladat, cél eléréséhez.

Jelenleg is egy felhasználói felületen tartózkodsz, méghozzá egy blogbejegyzésen.

A felhasználói felület felel tehát elsősorban a vezérlésért. Ezt a következő elemekkel teszi lehetővé:

Gombok, érintőgombok, kapcsolók, csúszkák
Billentyűparancsok, kombinációk
Hangvezérlés

A felhasználói felület hagyományosan 3 részre osztható. Bejegyzésünkben az utóbbit taglaljuk:

CLI: parancssoros felhaszálói felület (Command Line Interface)
TUI: szöveges felhasználói felület (Text User Interface)
GUI: grafikus felhasználói felület (Graphic User Interface)

UI designer feladatai

Nézzük, milyen feladatokkal foglalkozik egy UI designer a mindennapi munkavégzés során:

szorosan együttműködik a UX designerekkel és a fejlesztőkkel
megérti a UX designer által kialakított folyamatokat
kutatásokat végez a megfelelő design kialakításának érdekében
gombokat, ikonokat és animációkat tervez
tipográfiát (betűstílus) és színpalettákat választ és tervez
kialakítja a brandinget
felhasználói útmutatókat készít
wireframeket, azaz drótvázakat és UI prototípusokat készít
reszponzív tervezés: különböző kijelzőméretekre is tervez
a fejlesztőkkel együttműködve felel a megvalósításért

Egy UI designer tehát egyszerre érzi és tudja, hogy egy adott digitális termékhez milyen stílusirányzat passzol, és ezeket megtervezi és el is készíti. A munka során szorosan együttműködik a UX-esekkel és a fejlesztőkkel. Nem utolsó sorban pedig folymatosan követi a legújabb vizuális trendeket, hogy tudása és szemléletmódja naprakész legyen.

Mik a UI szakember készségei?

Milyen skillek szükségesek ahhoz, hogy valaki jó UI designer legyen?

kommunikáció, empátia, nyitott gondolkodásmód
alkalmazkodóképesség és együttműködés
kreativitás és problémamegoldás
vizuális márkaépítés: tipográfia, színelmélet, ikontervezés
drótváz és prototípus készítés
a reszponzív tervezés ismerete
animáció és interaktivitás

‍

User Experience (UX): felhasználói élmény

A UX a User Experience kifejezés rövidítése, ami felhasználói élményt jelent.

Ha felelevenítjük a UI fogalmánál felsorolt példákat, akkor a UX pedig arra ad választ, hogy

az adott gombot hol a legjobb elhelyezni, hogy minél többen kattintsanak rá,
a hangvezérlés milyen szóra induljon be, milyen funkciók legyenek vele elérhetők,
és hogy milyen billentyűparancsok egyszerűsítenék a user dolgát?

A felhasználói élmény magában foglalja a felhasználó minden interakcióját az adott termék vagy szolgáltatás használata kapcsán.

UX designer feladatai

A hazai közvéleményben még relatíve újnak számító szakma, ezért sokan összetévesztik vagy külön sem választják a UI designertől. A UX designer feladata azonban a felhasználói élménytervezés, ami egy összetettebb, másjellegű feladatnak mondható.

A UX designer:

szorosan együtt dolgozik a menedzsmenttel, a UI designerrel és a programozókkal
piackutatást és felhasználói kutatásokat végez
elemzi a versenytársak termékeinek / szolgáltatásainak felhasználói élményét
auditál: azaz UX auditot készít egy már meglévő felhasználói felületre a felhasználó szemszögéből
drótvázakat és prototípusokat készít
tesztel és integrál
a terveket és a kutatási eredményeket átadja a UI designernek
nem utolsó sorban pedig folyamatosan képzi magát és tájékozódik a legújabb UX trendekről.

Összefoglalva tehát: perszónát alkot a felhasználókról, majd belehelyezkedik a perszóna helyzetébe, hogy javíthassa az adott felhasználó élményét a használat során. Rengeteget tesztel, és folyamatosan fejleszt.

Jellemzői

Milyen skillek szükségesek ahhoz, hogy valaki jó UX designer legyen?

együttműködés, kommunikáció és nyitott gondolkodásmód
empátia
kíváncsiság és folyamatos tanulás
kritikai gondolkodás és problémamegoldás
ismerkedés a felhasználói kutatási és elemzési technikákkal
drótváz és prototípus készítés
az információs architektúra megértése
felhasználói és használhatósági teszt

Hogy dolgoznak össze? A UX és a UI kapcsolata, összefoglalás

A UX designer / UX researcher felhasználói kutatásokat végez
A UX designer a vállalat vezetőivel / a menedzsmenttel üzleti termékötleteket fejleszt
A UX designer drótvázakat készít, prototípusokat hoz létre
A UX designer elsődleges felhasználói teszteket végez, mielőtt átadná a feladatokat a UI designernek
A UI designer kialakítja a termék összes vizuális és interaktív tulajdonságát, pl. a színvilág kiválasztása, ikonok és tipográfia megtervezése, valamint animációk készítése
A UI designer interaktív, nagy pontosságú prototípusokat készít a további felhasználói tesztek elvégzéséhez
A UI designer átadja a végső tervet azoknak a fejlesztőknek, akik életre kódolják a terméket

Összefoglalva, a UI-on keresztül interakcióba lépünk egy termékkel (gombok, kifejlzők, csúszkák, stb.), míg a UX azzal foglalkozik, hogy ez az átfogó interakció közben hogyan érzi magát egy felhasználó.

Érdekel a UX? Próbáld ki UX képzésünket!

Vagy inkább grafikus vénával rendelkezel? Nézz rá UI tanfolyamainkra!