Használhatósági heurisztikák

Az általános használhatósági heurisztikák segítségével intuitív, hatékony és felhasználóbarát felületeket tervezhetünk.

A heurisztikákhoz Jakob Nielsen iparági sztenderdnek tekinthető munkáját, a 10 Usability Heuristics for User Interface Designt dolgoztuk fel és adaptáltuk a közigazgatási szolgáltatások sajátosságaihoz.

1. Állapot visszajelzése

A felhasználónak mindig tudnia kell, hogy mi történik. Ha valós idejű visszajelzéseket adnunk a rendszer aktuális állapotáról, a felhasználó értesülhet az interakciók eredményéről, könnyebben megjósolhatja a következő lépéseket, és azt érezheti, hogy kézben tartják a dolgokat.

Egy töltő képernyő, amin az adatok betöltése százalékosan és szövegesen is megjelennek.
A hosszabb ideig tartó műveletekről progress vagy spinner komponenssel tájékoztathatjuk a felhasználót.
Példák
  • Mindig jelezzük, hogy sikerült-e végrehajtani egy műveletet – például egy űrlap beküldését – vagy sem. Ha szükséges, jelezzük a feldolgozás állapotát és várható idejét is.
  • Ha egy művelet végrehajtása – például egy beállítás mentése – több másodpercig tart, jelezzük, hogy folyamatban van a művelet. Ehhez töltést jelző animációt vagy más vizuális jelzést is használhatunk.
  • Világosan kommunikáljuk, ha nem érhető el egy funkció. Ne titkoljuk el, ha a felhasználónak nincs jogosultsága valamihez, inkább magyarázzuk el egyértelműen az okot.
2. Felület és a valóság megfeleltetése

A felhasználó a megszokott megoldásokat keresi. A világgal és a fizikai tárgyakkal kapcsolatos tapasztalatait és elvárásait továbbviszi a felhasználói felületekre is. Az intuitív, való világból ismerős elemek beépítése segít, hogy ösztönösen, gondolkodás nélkül lehessen használni a felületeket.

A felületnek a felhasználó nyelvén kell megszólalnia. Úgy kell fogalmaznunk, olyan szavakat és kifejezéseket kell használnunk, amelyek ismerősek számára.

Egy illusztrált személyi igazolvány, amelynek családi és utónév és az okmányazonosító sorai egy űrlap megfelelő beviteli mezőihez vannak kötve.
Az adatokat érdemes a fizikai okmányokon megszokott megnevezésekkel, sorrendben és formátumban bekérni.
Példák
  • Ha egy űrlapnak van elterjedt, papíralapú változata, érdemes egyeztetni az online és a papíralapú verzió megnevezéseit és formátumát.
  • Ha lehet, használjuk a köznyelvben előforduló megnevezéseket. Például az "ideiglenes forgalomban tartási engedély" helyett használjuk az "ideiglenes forgalmi engedély" kifejezést.
3. A felhasználó irányít

A felhasználó időnként rosszul dönt vagy hibázik. Biztosítanunk kell, hogy egyszerűen visszavonhassa a műveletet vagy kiléphessen a folyamatból.

Ezzel visszaadhatjuk a kontrollt, és csökkenthetjük a frusztrációt.

Egy modális ablak, ami a kilépés előtt megerősítést kér a felhasználótól.
Komolyabb következményekkel járó műveletek előtt érdemes megerősítést kérni a felhasználótól.
Példák
  • Komolyabb következményekkel járó műveletek – például egy kérvény benyújtása – előtt kérjünk megerősítést a felhasználótól vagy biztosítsuk a visszavonás lehetőségét.
  • Ha a felhasználó elfelejt csatolni egy dokumentumot, engedjük meg, hogy később pótolja, anélkül, hogy újra kellene kezdenie a folyamatot.
  • Tervezzünk megszakítható és könnyen folytatható folyamatokat, hogy a felhasználó a saját tempójában haladhasson. Jó gyakorlat a többlépcsős űrlap, amely minden lépés után menti az adatokat.
4. Konzisztencia és következetesség

A felhasználó minden felületen hasonló működésre és megjelenésre számít. Ha követjük a platformok sztenderdjeit, az iparági konvenciókat és a jó gyakorlatokat, csökkenthetjük a kognitív terhelést.

Egy minta ügyintézési weboldal, keresővel és navigációval. A weboldal ugyanúgy néz ki laptopon és mobiltelefonon is, de az elrendezés az eszköz méreteinek megfelelően változik.
A design system tokenjeivel és komponenseivel bármilyen platformon konzisztenssé tehetjük a felhasználói élményt.
Példák
  • Mindenhol legyen konzisztens a navigáció és az űrlapok elrendezése, hogy a felhasználó könnyebben megtanulhassa a felületeket.
  • Érdemes követni az elterjedt konvenciókat és a népszerű szolgáltatások megoldásait. Az ismerős felületeket gyorsabban és hatékonyabban lehet használni.
  • Ugyanazt a műveletet mindig ugyanúgy kell hívni. Például a bejelentkezés mindig bejelentkezés legyen, ne cseréljük azonosításra vagy belépésre.
5. Hibák megelőzése

Úgy kell megterveznünk a felületeket, hogy lehetőleg ne hibázhasson a felhasználó. Jó gyakorlat, ha a nagyobb döntések előtt megerősítést kérünk a felhasználótól.

Egy áttekintő oldal, amin egy űrlap kitöltése során megadott adatok jelennek meg. Mindegyik adathoz tartozik egy Módosítás link.
A hosszabb űrlapok végén érdemes összefoglalni a felhasználó által megadott adatokat, hogy beküldés előtt ellenőrizhesse őket.
Példák
  • Jól megválasztott alapértékekkel és korlátokkal sokszor megelőzhetők a kisebb hibák. Például a telefonszám bekérésénél érdemes alapértékként beállítani a magyar hívószámot, illetve tiltani a nem numerikus karaktereket.
  • Legyünk toleránsak a beviteli mezőknél! Nem kell hibaként kezelni, ha a felhasználó kötőjellel vagy szóközökkel adja meg a TAJ-számát. Beküldés után egyszerűen törölhetjük a felesleges karaktereket.
6. Visszaemlékezés helyett felismerés

A felhasználó gyakrabban hibázik, válik frusztrálttá vagy adja fel a feladatot, ha a memóriájára kell hagyatkoznia.

Látható és elérhető információkkal, ikonokkal és egyéb vizuális segítségekkel, illetve a felhasználó számára ismert mintázatok és megoldások használatával csökkenthetjük a kognitív terhelést.

Egy lista egy űrlap kitöltéséhez szükséges elemekről (személyazonosító okmány, fotó az arcodról, PIN-kód), kártyákon megjelenítve.
Hosszabb űrlapok előtt érdemes tájékoztatni a felhasználót az elvárásokról.
Példák
  • A hosszabb folyamatok előtt érdemes tájékoztatni a felhasználót arról, hogy mire számíthat, milyen adatokat kell majd megadnia vagy milyen okmányokra lesz szüksége. Így felkészülhet, és nem kell ügyleírásokból vagy más felületekről szerzett információkra hagyatkoznia.
  • Mindig helyben, kontextuálisan segítsünk a felhasználónak. Például a beviteli mező kitöltéséhez szükséges segítséget a mező közelében helyezzük el.
  • A műveletek és a menük sorrendje legyen állandó. Így a felhasználó könnyebben megtanulja, hogy mit hol kell keresnie.
7. Rugalmasság és hatékonyság

Érdemes megkülönböztetni a kezdő és a tapasztalt felhasználókat.

Ha eltérő opciókat kínálunk és lehetővé tesszük a gyakori műveletek testreszabását, a felhasználó gyorsabban, kényelmesebben és az igényeinek megfelelően használhatja a felületet.

Egy minta alkalmazás Beállítások oldala világos és sötét módban. A beállítások között szerepel a sötét mód ki- és bekapcsolása.
Az opciók és egyéb beállítások egy oldalra gyűjtése segíti testreszabni az élményt.
Példák
  • A platformok által támogatott megjelenítési és testreszabási beállítások implementálásával – például a sötét mód, a magas kontrasztú mód és a csökkentett animációk – lefedhetjük a leggyakoribb preferenciákat.
  • A gyorsbillentyűk és a gesztusvezérlés segíthet a tapasztaltabb felhasználóknak, de fontos, hogy ne csak ezekkel lehessen használni a felületet.
  • A haladó vagy részletes beállítások kontextuális megjelenítésével csökkenthetjük a kezdő felhasználók kognitív terhelését. Megfelelő alapértékekkel a leggyakoribb eseteket is lefedhetjük.
8. Esztétikus és minimalista design

A felhasználói felület nem tartalmazhat felesleges információkat vagy elemeket, mert ezek csak elterelik a figyelmet.

A minimalista design segít, hogy a felhasználó gyorsabban megtalálja a szükséges információkat, és egyszerűbben elérje a célját.

Két példa egy űrlap áttekintő oldalára. A rosszként megjelölt példán minden elem más színű, színesek az ikonok és a gombok. A jó példán ugyanezek az információk egy letisztult, monokróm felületen jelennek meg.
A funkció nélküli elemek és a felesleges dekorációk elhagyásával letisztultabb, könnyebben használható felületet kapunk.
Példák
  • A felhasználók tranzakcionálisan gondolkoznak az ügyintézésről. Egy egyszerű, dekorációktól mentes, de jól működő felület jobb felhasználói élményt nyújt, mint egy innovatív, de lassú felület.
  • Az egyszerű, letisztult design inkluzívabb felületeket eredményez. A felületeket úgy kell megtervezni, hogy minél szélesebb körben használhatóak legyenek, függetlenül a felhasználók képességeitől vagy digitális érettségétől.
9. Hibakezelés

Bár a hibakezelés helyett a hibák megelőzésére kell törekednünk, előfordulhatnak váratlan problémák.

A hibaüzeneteket érthetően – szakkifejezések és hibakódok nélkül – kell megírnunk. Pontosan meg kell mondanunk, hogy mi a hiba oka, és segítenünk kell a megoldásban.

Egy jó és egy rossz példa egy TAJ-számot kérő beviteli mezőhöz. A beviteli mező üres, ezért hibásként van jelezve. A rossz példán a hibaüzenet 'Kötelező mező'. A jó példán a hibaüzenet: 'Írd be a TAJ-számod!'.
Általános hibaüzenetek helyett konkrét instrukciókkal gyorsíthatjuk az űrlapok kitöltését.
Példák
  • Fontos, hogy a felhasználó érthető hibaüzeneteket kapjon, szakkifejezések és hibakódok nélkül.
  • A hibaüzenet ne csak a hiba tényéről tájékoztasson, hanem adjon útmutatást a hiba javításához.
  • Ha egy űrlapon sok a hiba, érdemes összegyűjteni és az űrlap tetején is megjeleníteni őket.
10. Súgók és egyéb dokumentációk

A legjobb, ha olyan felületeket tervezünk, amelyek nem szorulnak további magyarázatra.

Ha mégis súgóra vagy egyéb dokumentációra van szükség, ügyeljünk a kereshetőségre, a tömörségre, és összpontosítsunk az elvégzendő lépésekre.

Egy gyakran ismételt kérdéseket tartalmazó felület, ahol a kérdések accordion komponensekben jelennek meg.
A leggyakrabban felmerülő kérdéseket érdemes a szolgáltatás oldalán megjeleníteni, nem csak a súgóban.
Példák
  • A felhasználói dokumentációt ne csak PDF-ként töltsük fel, hanem integráljuk a szolgáltatásba, hogy közvetlenül elérhető legyen.
  • A súgónak kereshetőnek kell lennie, hogy a felhasználó minél gyorsabban megtalálja az információkat.
  • Ha a gyakran ismételt kérdéseket közvetlenül a szolgáltatás oldalán jelenítjük meg, könnyebben és gyorsabban elérhetővé válik a felhasználó számára.