Top 5 UI hiba, amelyet könnyen elkerülhetsz

13/08/2020

3 perc olvasási idő

A jó felhasználói felület, azaz user interface (UI) egyszerre szép és felhasználóbarát. Ennek megalkotása azonban kemény munka és olykor-olykor problémákkal teli. Bemutatjuk, melyek a legnagyobb UI hibák, amelyeket a Codecool Frontend Fejlesztő képzésének diákjai biztosan nem fognak elkövetni.

Tablet, laptop, mobil, okosóra. Millió féle eszközön millió féle tranzakciót hajtunk végre gyakorlatilag napjaink minden egyes percében. Legyen az online bevásárlás, egy e-krimi virtuális fellapozása vagy a legújabb PS4 videójáték tesztelése a haverokkal, mindegyik tevékenység egy grafikai felületen valósul meg, amellyel mi a felhasználók interakcióba tudunk lépni. A felhasználói felület az átlag ember számára láthatatlan és irreleváns mindaddig, amíg valamilyen probléma fel nem üti a fejét. Egy nem működő gomb, egy olvashatatlan fül vagy egy kaotikus háttér garantáltan szemet fog szúrni minden használónak, ami pedig azt jelzi, valamit elrontottak a webdizájnerek. A legnagyobb UI bakikból válogattunk.

1. A reszponzív dizájn alábecsülése
Naiv volna azt feltételezni, hogy egy laptop user interface-e ugyanúgy fest, mint egy mobil eszközé. Kütyüink különböző felbontásúak, így nem nehéz belátni miért van szükség némi extra erőfeszítésre a felhasználói felület tervezésekor. A mobilos böngészés egyre elterjedtebb, a nem megfelelően betöltő honlapok kis képernyőn pedig egyenesen dühítőek, így ha nem szeretnénk felbosszantani a felhasználókat, érdemes a reszponszív dizájnnal megbarátkozni. Arról nem beszélve, hogy gyakran mást várnak el az Android-os és az iPhone-s felhasználók egy-egy szoftvertől, sőt, a mobilbarát weboldalakat a Google algoritmusa is jobban kedveli, így ezeket sem árt észben tartani a UI megálmodásakor.

2. Hibás feltételezések és elmaradt tesztelés
Felhasználói felületet tervezni kreatív alkotó munka, ami belemerülést igényel. Ne felejtsük el azonban meglátni az erdőtől a fát! Sok webfejlesztő hajlamos azt feltételezni – néha hibásan – , hogy amit alkottak, az teljesen logikus, funkcionális, sőt még esztétikus is. A probléma ott kezdődik, hogy nem gondolkodunk egyformán, így ami egyértelmű a tervezőnek, az nem biztos, hogy világos a felhasználó számára is. Erre a dilemmára egyetlen megoldás létezik: tesztelés, tesztelés és még több tesztelés. Ne magunkból induljunk ki, amikor UI dizájnba kezdünk: fogalmazzuk meg, kinek készül a felület, nekik mire van szükségük és hogyan lehet azt megoldani. Végül teszteljük munkánkat több körben, hogy az apróbb rejtett hibákat is ki tudjuk küszöbölni.

3. Zsúfolt, kaotikus dizájn
Annyira sok inger éri az embert minden nap – online és offline is -, hogy igazán nem hiányzik senkinek egy-egy túlzsúfolt weboldal bogarászása. Nincs is annál idegölőbb, mint amikor egy számunkra fontos információt keresünk egy weboldalon, de az el van rejtve valahol a száznyolcvanadik kép és az ötvenedik hirdetés mögött. Érthető, hogy szeretnénk minél több mindent kommunikálni a felhasználó felé, ezért bezsúfolunk még egy extra bekezdést az oldalra, de egész egyszerűen ne tegyük. Minél letisztultabb egy felület, annál jobb. Az egyszerűség eleganciát, határozottságot és minőséget sugároz – jegyek, amelyekre minden márka, szolgáltató törekszik. Vegyük végig, hogy melyek a legfontosabb dizájnelemek és használjuk azokat mértékkel, ugyanakkor megfelelő hangsúlyokkal. Itt sem árt a tesztelés: több szem többet lát.

4. Olvashatatlan színek és betűtípusok
Ha nagyítóval, lámpa alatt sem tudjuk elolvasni, mit is írnak egy oldalon, akkor ott egészen biztosan elrontott valamit a dizájner. Sajnos gyakran nem szentelünk elég figyelmet a színeknek, háttereknek és betűtípusoknak – kommunikációk eszközöknek, amelyek tudalatt sok mindent elárulnak a tervezőről, de legfőképp a termékről vagy szolgáltatásról. Sárga betűk egy narancssárga háttéren valószínűleg el fognak veszni és vele együtt az információ is, amit át szerettünk volna adni. A legtöbb cég kialakít magának egy ‘brand guidelinet’, ami meghatároz egy bizonyos betűtípust és néhány színkódot – ekkor nehezebb ilyen típusú hibát véteni. Ha azonban nincs ilyenünk, mindenképp gondoljuk át mi passzol mivel, melyik betűtípus képviseli a weboldalunk stílusát a legjobban és hogy az jól olvasható-e.

5. Értelmetlen fülek és kitölthetetlen mezők
Valószínűleg mindannyian jártunk már úgy, hogy nem tudtunk továbblépni egy regisztrációkor mert a mező hibás adatot jelzett holott mindent rendben adtunk meg. Ez akkor fordulhat elő, ha a UI dizájn során nem gondolunk azokra a külföldi felhasználókra, akiknek rövidebb vagy hosszabb egy karakterrel a telefonszáma vagy éppen az irányítószáma. Ugyanígy fejfájását okozhatnak a legördülő menük, ha nem szerepel a listában az a tétel, ami ránk igaz vagy éppen amikor több is igaz ránk, de csak egyet enged a rendszer választani. Ha úgy érezzük, sokféle válasz várható és azok egymástól nem egyértelműen elhatárolhatóak (nemúgy mint például az országok), tegyük fel magunknak a kérdést: tényleg szükséges ez a legördülő menü? Elképzelhető, hogy egy üres mező célravezetőbb lesz, ahová mindenki megadhatja egyedi válaszát.

Jó felhasználói felületet készíteni nehéz feladat. A netezők egyszerre várják el, hogy amit látnak az letisztult, stílusos és felhasználóbarát legyen. A jó fejlesztőnek tehát egyszerre kell tudni a felhasználó fejével, rendszerben és logikusan gondolkodni, ugyanakkor a szépérzék is fontos. A Codecool négy hónapos frontend programozó képzésén éppen ezeket a készségeket sajátíthatod el, amelyekkel garantáltan nem fogod elkövetni a fenti hibákat. 

Rólunk

A Codecool az a programozóiskola, ahol a tech karriered kezdődik. Bízd magad profi mentorainkra, csapj le az állásgaranciánkra, és fizess csak utólag, kényelmes, havi részletekben.
Kérdésed van? Segítünk! Kérdezz a chatbot-tól, kérj visszahívást, vagy dobj egy emailt a [email protected] címre.

Kapcsolódó posztok

Váltanál? Így tudsz most érvényesülni junior fejlesztőként
Lehetetlen helyzetet kiáltanak az IT-piacot elemzők,...
Codecool vélemények és gyakori kommentek – Itt vannak a válaszok!
Érdekel a Codecool 10 hónapos képzése,...
Az interjú kérdéseken túl: így leszel az IT-s állásinterjúk mestere
IT-karrieren gondolkodsz, de már előre izzadsz...

Add meg elérhetőséged, és hamarosan visszahívunk!