UI vagy UX, nem mindegy?

A rövid válaszom a kérdésre: Határozottan nem! A User Interface, röviden UI nagyon más, mint a UX, ezért nem szabad összekevernünk ezt a két fogalmat. Más a feladata egy UI designernek és más kompetenciákat is igényel. Na de akkor mi is ez pontosan? Nézzük meg a UI design alapokat!

A UI design minden interaktív felület vizuális megjelenítéséhez kapcsolódik. Biztosan találkoztatok már olyan alkalmazással, amit a szép színek és a jól kinéző vektoros grafikák kinézete miatt töltöttetek le. Persze ez lehet operációs rendszer, alkalmazás vagy weboldal is.

Nos, a UI designer feladata, hogy az alkalmazásunkat a lehető legszebb “csomagolásban” mutassa meg, vagy ha jobban tetszik adja el. Minél jobban megfogja a felhasználót a design, annál valószínűbb, hogy már csak a “kinézete” miatt is azt fogja választani.

+1 Tipp: Ne keverjétek össze az arculattervezéssel vagy logótervezéssel. Különösen ne a mindennapi termékekkel, mint például a fánk, amin cukormáz csordogál és színes cukorral van megszórva. Ezeket nem UI designer készítette vagy tervezte. Gyakran hallom sokaktól, hogy rosszul használják a kifejezést.

Felhasználó itt is, ott is.

Igen, a design minden végén a felhasználható található. A UX design inkább a usability-re, azaz a használhatóságra törekszik és igyekszik minél jobban leegyszerűsíteni a felhasználó életét. Legyen ez kevesebb funkció vagy két kattintással kevesebb. Ebben nagy segítségünkre van a hálóterv vagy másnéven wireframe. Lényege, hogy gyorsan összerakja az általunk elképzelt oldalt, mindenféle design nélkül. A hálóterv így néz ki, ha az InnoDesgin weboldalát veszem górcső alá:

A UI design pedig olyan elemeket használ, aminek segítségével a felhasználó beleszeret az alkalmazásba vagy termékbe. Ez lehet bármilyen színes-szagos megjelenítés, videó, lebegő menü vagy ki-be kapcsoló gombok. :

Hogyan segít minket a használata?

A helyzet a következő: A szemünk eszik először és a jó UI design segít abban, hogy minket válasszanak. Minél szebb a külső, annál valószínűbb, hogy több embert érünk el, terjed barátok, ismerősök között vagy a közösségi médián. Ha azt szeretnénk, hogy gyorsan fejlődjünk, akkor mindenképpen érdemes követni az aktuális trendeket és inspirálódni általuk.

Amikor multinacionális cégeknél dolgoztam, és szerettünk volna egy új terméket bevezetni, minden alkalommal napokat töltöttem azzal, hogy olyan prezentációt készítsek, ami megfelel a vezetőmnek és a vezetőségnek is. Mindig visszadobták, hogy na még ezt egy kicsit, na még azt egy kicsit csináljam máshogy. Magán a tartalmon egyszer sem változtattam, csak a színeken, és a kis téglalapokat szerkesztgettem napokig. Vállalati környezetben azt tapasztaltam, hogy mindig az nyer, aki a világ legszebb prezentációját viszi, még akkor is ha a mögöttes termék használhatatlan vagy nem is illik bele a kultúrába. Szerintem ez sokaknak ismerős érzés lehet.

Egy rossz UX és UI design példa

A mostani trendek azt mondják ki, hogy ne tüntess fel mindent azonnal. A kevesebb több. Emlékszem, hogy amikor fiatal voltam, és elérhetővé vált az internet, gyakran lógtam a barátaimmal a startlapon (startlap.hu). Az ember két perc alatt veszítette el a fókuszát, és nagyon gyorsan sietett a kis x-hez, hogy bezárja a böngészőt. Annyi minden volt feltüntetve és órákig lehetett böngészni benne, mire megtaláltuk azt, amit kerestünk (ezek általában játékok voltak). Hogy mit szeretnék ezzel mondani? Legyen átlátható a felület, amit terveztek és ne akarjatok túl sok mindent kipakolni és túl extrázni. 

Ha emlékeztek erre az oldalra vagy esetleg megnéztétek, akkor már Ti is tudjátok, hogy milyen a rossz UX/UI kombó!

Mi az a reszponzív?

Tudjuk, hogy különböző felhasználókkal találkozhatunk és designerként a célunk az, hogy megfeleljünk az Ő elvárásaiknak. Egy szimpla weboldal elkészítésénél arra törekszünk elsőkörben, hogy amikor a felhasználó a weboldalunkat megnyitja, elkápráztassuk a gyönyörű designunkkal. De vajon Ő is azt látja, amit mi? Képzeljük el, hogy egy hatalmas 27 colos monitoron tervezzük az oldalunkat. Minden elfér, nincsen helyszűke. Megnézzük az elkészült termékünket előnézet módban, és azt tapasztaljuk, hogy egy csoda. Kész. Már ki is tettük a hálóra, hogy megtaláljanak minket. Na, eddig volt szép. 

Nem mindenki rendelkezik ekkora monitorral és felbontással, sőt az átlag felhasználók nem használnak ekkora kijelzőt. Azoknál, akik ennél kisebb méretben nyitják meg, a weboldal teljesen össze fog csúszni, használhatatlan lesz. Legyen az egy kisebb laptop, tablet vagy telefon. Ebben a pillanatban a felhasználót el is vesztettük. Így vásárolni sem fog tőlünk, de még csak a beköszönő szöveget sem fogja elolvasni. Rosszul hangzik, ugye?

Nos, a reszponzív design azt jelenti, hogy bármilyen kijelzőn is legyen megnyitva az adott oldal, alkalmazás, az mindig optimálisan mutatkozzon. Ha tabletről érjük el, akkor a tablet méreteit kövesse, ha telefonról, akkor pedig annak a méreteit, és így tovább. Sosem egy eszközre tervezünk!

+Tipp: Ha a weboldalad vagy alkalmazásod nem felel meg ennek a kritériumnak, akkor nem tudod felvenni a versenyt azokkal az oldalakkal, amelyek optimálisan jelennek meg. Ha nem tudod elkészetni a reszponzív designt, mindenképpen keress egy szakértőt!

Mire kell még figyelnünk?

Az olvasónk nem úgy fogja átböngészni a weboldalunkat, ahogyan mi azt gondoljuk. Általában “pásztázzák”, ami azt jelenti, hogy bizonyos pontok mentén viszik végig a tekintetüket. Bal oldalról haladunk jobbra, majd haladunk lejjebb. Valahogy így:

Ha jobban megfigyelitek a piros alakzatokat, egy F betűt lehet felfedezni.

Érdemes figyelnünk a színek harmóniájára, és próbáljunk meg egyféle színvilágot használni. Semmiképpen ne legyen nagyon tarka az alkalmazásunk, ha csak nem az a célja, hogy az legyen. Néha most is látni egy-két alkalmazást vagy weboldalt, ahol nagyon erős neon színeket használtak. Nem szép, sőt még zavarják is a szememet a nagyon erős rikító színek. Főleg, ha sok különböző van belőle.

Figyeljünk a tipográfiára is, hiszen nem mindegy, hogyan szeretnénk hatni a felhasználó érzéseire. A lenti kép mindig nagyon jól illusztrálja, hogy a tipográfia igenis fontos! 

Figyeljünk a szöveg méretére, és ne használjunk háromnál több betűtípust, ha lehet. Ha nem tetszenek a számítógépeden elérhető betűtípusok, akkor lehetőséged van ezeknek a bővítésére is. A Google Fonts az egyik legjobb alternatíva lehet. Ezen kívül rengeteg inspirációt gyűjthettek a Pinteresten vagy az Instagramon az ezzel foglalkozó fiókok követésével.

Használjunk képeket és animációkat, amik feldobják oldalunkat vagy alkalmazásunkat. Nem csak szép megjelenést biztosítanak, hanem a felhasználók számára is jobb érzés ezeket az alkalmazásokat használni. Nekem személyes kedvencem az egyik pénzügyi applikációban, hogy amikor utalás érkezik, egy unikornis lépked az összeg felett. Engem ezzel megvettek, mindig mosolygok rajta!

Képek, animációk sokasága!

Kérlek Benneteket, hogy mindenképpen kerüljétek a feleslegesen sok képet, animációt, mert az alkalmazásotok vagy weboldalatok olyan lassan fog betölteni a felhasználóknál, hogy meg sem fogják azt várni. Három másodperc. Rövid? Mégis ennyi idő alatt a felhasználó el tudja dönteni, hogy marad vagy megy. Gazdálkodjunk okosan, és figyeljünk arra is, hogy gyors legyen a termékünk.

Teszteljünk és kérjünk visszajelzést!

Mielőtt elindulnánk a nagyvilág felé a termékünkkel, előtte mindenképpen teszteltessük belső köreinkben, és kérjünk visszajelzést. Ez egy nagyon fontos eleme annak, hogy azt mondhassuk: Készen vagyunk! Jobb olyanoktól visszajelzést kapnunk és elfogadnunk, akiket ismerünk és tudjuk, hogy a jó szándék miatt osztják meg velünk tapasztalataikat. Mindig mérlegeljük, hogy a visszajelzések közül mi az, amit megfogadunk és mi az, amit nem. Amit egyszer valaki már észre vett és visszajelzett nekünk, valószínű, hogy más is észre fogja venni. Tegyünk ellene, és ha lehet, javítsuk ezeket a hibákat minél hamarabb. 

Ha a fentieket figyelembe vettük, és útnak indítjuk termékeinket, biztosak lehetünk abban, hogy az ügyfeleink is elégedettek lesznek a munkánkkal, és vele együtt az termékünkkel is. Ne feledjük, hogy elsősorban a felhasználónak szeretnénk megfelelni, ezért fontos az Ő szemüvegén keresztül megtervezni a designt!