Webshark Blog

Amikor digitális felületek tervezéséről van szó, akkor a hibaüzenetek kialakítása valahol a feladatlista végén található. Már csak azért is, mert sokan azt gondolják, hogy nagyon nincs is rajtuk mit tervezni: jelzik a hibát, magukba foglalnak egy üzenetet, mely a megfelelő irányba tereli a felhasználókat. Pedig a hibaüzenetek fontosak, tönkretehetik a felhasználói élményt. (Frissítés, 2023.01.03. – Egy új fejezettel bővítettünk: Milyen legyen a hibaüzenet szövege?)

Amikor hibaüzenetek megtervezéséről van szó, akad néhány olyan alapelv, melyeket érdemes betartani. A Smashing Magazine egyik bejegyzésének tanácsai közül válogattunk.

Nem minden hibaüzenet azonos fontosságú

A hibaüzeneteket egy felosztás szerint két típusba lehet sorolni. Az egyik típust „csúszásnak” nevezték el, és olyan hibák tartoznak ide, mint amikor a felhasználó végre akar hajtani egy cselekvést, de aztán nem egészen úgy tesz. Ugyanakkor vannak azok a hibák, ahol a felhasználó mentális modellje és a rendszer között eltérés van. A „csúszásokat” egyszerűbb megoldani, bár a felületnek mindkét hibát korrigálnia kell.

A csúszások elkerülése érdekében be lehet állítani olyan korlátokat, mint például egy szövegdoboz szélessége, lehet automatikus kitöltés funkciót használni, alapértelmezett beállításokkal segíteni a felhasználót, és nem erőltetni a formázások betartását.

A hibáknál viszont megerősítést kell kérni, ha valami komoly következménnyel járó hibát készül elkövetni a felhasználó, de érdemes minél előbb jelezni számára az elvárásokat (például, hogy milyen jelszót várunk tőle, vagy mekkora fájlméretet fogad el legfeljebb a rendszer), illetve lehetővé kell tenni azt is, hogy meggondolják magukat (például az e-mail címet vagy a fizetési módot megváltoztassák).

A hibaüzenetek hatékonysága egyébként mérhető:

• egy felhasználói út alatt elkövetett hibák átlagos száma
• a hiba helyreállítási ideje,
• teljesítési arányok és teljesítési idők.

Egy rendszerből a hibák teljesen nem küszöbölhetők ki, mivel nincs hibátlan felhasználói bevitel.

Ne bízd rá magad kizárólag a piros színre!

Amikor hibaüzenetekben gondolkodunk, akkor szinte tudattalanul egy piros színben pompázó szöveg jut eszünkbe. Ez valóban egy bevett megjelenési forma, ugyanakkor nem minden esetben jelzi megfelelően a felhasználó számára azt, hogy valami probléma merült fel. Már csak azért sem, mert sok felhasználó számára gondot jelent a színek megfelelő érzékelése. Ezért a hibaüzenetet a piros színen kívül például ikonnal is jelezni kell. Emellett hasznos lehet az adott rész kiemelése egy vastag függőleges vonallal, ahol a vonal mellett megjelenik a hibaüzenet szövege is.

Az ikon a hibáknál megjelenhet a beviteli mező jobb vagy bal oldalán, akár a beviteli mezőn belül is. Ha az ikon a jobb oldalra kerül, akkor azok a felhasználók, akik mobilon rázoomoltak az űrlap bal oldalára, nem fogják kiszúrni a jobb oldali ikont, mivel az nem látszik a kijelzőjükön. Emiatt a bal oldali megjelenés némileg biztosabbnak tűnik.

Emellett érdemes lehet a felhasználót egy hibaüzenet-összefoglalóval is segíteni. Az összefoglalóban helyet kaphatnak linkek az űrlap azon részeire, ahol a hiba található, melyek segítségével a felhasználó azonnal az adott részhez ugorhat. Ez az összefoglaló megjelenhet akár a lap tetején, akár a gomb felett.

Ami fontos, hogy lehetőleg ne a gomb alatt, a lap alján jelenjen meg az összefoglaló, mivel ezáltal – jellemzően mobilon – nem jelenik meg az üzenet a kijelzőn.

Kerüld az automatikus görgetést és ugrásokat!

Ha egy felhasználó a beküldés gombra kattint, akkor érdemes automatikusan, görgetés által megmutatni a hibát neki? Erre nincs egyértelmű válasz, ugyanakkor sok felhasználót megzavar egy ilyen működés. Bizonyos felhasználók nagyon érzékenyek arra, ha kikerül a kezükből az irányítás. Ugyanez érvényes az automatikus ugrásra is, ami annyival rosszabb az automatikus görgetésnél, hogy még azt sem észlelik, hogyan is kerültek egy bizonyos pontra a felületen.

Az automatikus mozgatást tehát érdemes elkerülni, és egyszerűen csak megmutatni a felhasználóknak a hiba-összefoglalót. Ha ez mégsem lenne elegendő, akkor érdemes megfontolni, hogy automatikus görgetéssel vezeted rá a hibára a felhasználót.

Soha ne takard ki a hibaüzenettel a beviteli mezőt!

Amikor hibaüzenetet jelenítünk meg, akkor arra hívjuk fel az emberek figyelmét, hogy valami probléma merült fel. Ez azonban nem elég, megoldást is kell kínálni számukra. Ez akkor működik jól, ha a felhasználó egyszerre látja a megoldást leíró hibaüzenetet és magát a hibát is. Tehát tudniuk kell szerkeszteni a beviteli mezőt, miközben látják a hibaüzenetet, illetve a tájékoztatást.

A megoldás egyrészt az, hogy a tájékoztatást tartalmazó szöveg ne hoverrel nyíljon meg, hanem csak akkor, ha a felhasználó kattint (vagy érint). Így aztán eltűnni is csak kattintásra fog.

Ugyanakkor használhatunk lenyíló tájékoztatást is alternatívaként, ami a hibajelzés és az utána lévő tartalom között nyílik ki. Így aztán nem is takar ki semmit.

Űrlapoknál a hibaüzenet a beviteli mező felett legyen

Általában a hibaüzenetek a beviteli mező alatt kapnak helyet, vagy ritkábban a jobb oldalon. Ezekkel az elhelyezésekkel azonban több probléma is van. A jobb oldali megjelenést korábban már említettük: kicsúszhat a kijelzőről. Ha viszont alulra kerül, akkor mobilon vagy a virtuális billentyűzet takarhatja ki, vagy szerkesztésnél a böngésző automatikus kiegészítés funkciója.

A hiba feletti megjelenés sem tökéletes megoldás azonban, mivel minden hibaüzenet felbukkanása elmozdítja függőleges irányban az egész űrlapot.

Ne bízd rá magad az animált, lebegő üzenetekre!

Gyakran használják felhasználói felületeken azokat az animált, lebegő üzeneteket, melyek a rendszer állapotának változásáról tájékoztatják a felhasználót. Ezek jellemzően nem űrlapoknál jelennek meg, hanem táblázatoknál vagy irányítópultoknál. Az ilyen üzenetekkel azonban akad néhány használhatósági probléma:

• A felhasználók gyakran nem tudják elolvasni vagy megérteni a teljes hibaüzenetet, ha azok automatikusan eltűnnek egy idő után.
• Általában a kijelző szélén jelennek meg, távol a problémát okozó résztől, így nincs kapcsolat közöttük, ráadásul nem is lehet javítani akkor a hibát, amikor olvassuk az üzenetet.
• A hosszú, lebegő üzenetek gyakran nagy területeket takarnak ki a tartalomból, sőt olykor még azt a részt is, ahol a hiba megtörtént.
• Az ilyen üzenetekre nem fér el hosszabb magyarázó szöveg, kép vagy videó, ha szükség lenne rá. A benne elhelyezett link pedig elvezeti a felhasználót az adott oldalról, mert egy másik lapon nyílik meg.

Tedd lehetővé a felhasználóknak a hibaüzenetek felülbírálását!

Bizonyos űrlapoknál előfordul, hogy nagyon szigorúak a készítők azzal kapcsolatban, hogy mi és hogyan kerülhet egy beviteli mezőbe. A szigorú szabályok betartása néha akkora kihívás elé állítja a felhasználókat, hogy inkább otthagyják az űrlap kitöltését. Ez például nem jön jól, amikor már készen állnak a vásárlásra és csak az adataikat kell megadni. Ilyenkor lehet megoldás, ha lehetővé tesszük a figyelmeztető üzenetek felülbírálását a felhasználóknak. A kérdés az, hogy megéri-e nekünk például egy nem pontosan olyan formában megadott kiszállítási cím, mint ahogy elvárjuk, vagy inkább bukjuk az egész megrendelést.

Persze vannak olyan beviteli mezők, ahol ez nem engedhető meg. Ilyenkor nem marad más megoldás, mint a pontos hibaüzenetek és javítási megoldások.

Adj mintát a helyes bevitelre!

Egy hibaüzenet akkor lesz igazán nagy segítség a felhasználónak, ha arról is tájékoztatja, hogy mit és hogyan kellene csinálnia, azaz mintát ad neki. Tehát a hibaüzenet szövege nem csak annyit mond, hogy valami probléma merült fel, hanem egy példán keresztül mutatja meg, pontosan mit is vár el a felhasználótól.

Mindezek a tanácsok sokszor csak kis változtatásoknak tűnnek, azonban mégis jelentős lehet a hatásuk. És, ha más nem is teszel, legalább próbálj meg nem általános, hanem konkrétabb hibaüzeneteket megjeleníteni a felhasználóidnak.

Frissítés, 2022.12.05.:

Ne ess túlzásokba a hibaüzeneteknél!

A hibák megelőzése érdekében sokan túlságosan agresszív megoldásokhoz folyamodnak a weboldalakon. A Nielsen Norman Group szerint alapvetően két probléma szokott előfordulni:

• A túlságosan korán felbukkanó hibaüzenet – vagyis, amikor a hibát még el sem követte a felhasználó, de már valamilyen jelzéssel találkozik
• Hibáknál megjelenő vizuális jelzések nem csak hibáknál, hanem figyelmeztetések esetén történő alkalmazása – ilyen lehet egy piros szöveg, keret, jel, ami feleslegesen megakasztja a felhasználót.

A túlságosan korán felbukkanó hibaüzenetek esetében a rendszer annyira igyekszik a hibát elkerülni, hogy már akkor jelez a felhasználónak, amikor az még nem ért el egy olyan pontra, hogy valóban elkövette volna a hibát. Ilyennel gyakran találkozhatsz űrlapoknál, ahol ha elkezdesz beírni egy telefonszámot vagy e-mailt, a rendszer már írás közben jelez, teljesen feleslegesen. Sőt, olyan is előfordul, amikor már akkor hibaüzenetet kapsz, ha épp csak belekattintasz a mezőbe, vagy már eleve alapértelmezetten ott egy hibaüzenet.

Természetesen a felhasználókat érdemes valós időben értesíteni az űrlapoknál elkövetett hibáknál, tehát nem akkor, amikor elküldenék az űrlapot. Ugyanakkor sokan túlzásokba esnek a „valós idő” értelmezésével, így valójában egy hibátlan – de folyamatban lévő – kitöltés kap hibajelzést, ami megakaszthatja, de legalábbis mindenképpen zavarja a felhasználót. Ez a hibaüzenet általában addig meg is marad, amíg az előre meghatározott formát el nem éri a felhasználó.

A megoldás annyi lenne, hogy addig ne mutass hibaüzenetet a felhasználónak, amíg be nem fejezte az adott mező kitöltését, és ki nem lépett a mező szerkesztéséből. Ha pedig valamit közölni akarsz, akkor egy csillagozott megjegyzéssel megteheted a mezőnél (nem piros színű betűkkel).

A másik probléma, amikor egy üzenet vagy figyelmeztetés hibaüzenetnek néz ki, de nem az. Ezek sokszor nem kritikus fontosságú rendszerüzenetek, viszont vizuális megjelenésük hibaüzenetre hasonlít.

Persze a kritikus fontosságú üzeneteket és figyelmeztetéseket ki kell emelni, hogy a felhasználó felfigyeljen rájuk, kifejezetten megzavarja őket a feladatuk elvégzésében. Ilyenkor van értelme a zavaró vizuális jelek alkalmazásának, mint például a piros szöveg, keret vagy figyelmeztető szimbólum, mint amilyen egy felkiáltójel.

Ugyanakkor a megszokott rendszerüzenetek, melyeknek nincs nagy fontosságuk, nem lehetnek annyira zavaróak, hogy megakasszák a felhasználót a feladat végrehajtásában. Láthatónak kell lenniük, de nem tolakodónak.

A tájékoztatásnak így kellene megjelennie:

A lényeg ugyanis az, hogy a felhasználókat segíteni kell, nem pedig büntetni.

Frissítés, 2023.01.03.:

Milyen legyen a hibaüzenet szövege?

Hibaüzenet esetében annak szövege is segít abban, hogy pozitív élménnyé váljon a felhasználó számára egy kellemetlen dolog. Ehhez azonban először meg kell érteni, hogy mit is akarunk mondani a hibaüzenettel a felhasználónak. Elsősorban informálni akarjuk arról, hogy valami hiba következett be, másodsorban pedig megoldást találni a hibára. Ebből kell kiindulni, emellett megfogadni néhány tanácsot:

• Ideális esetben egy hibaüzenet egyszerű, világos és végrehajtható. Nem az a cél, hogy az emberek még jobban összezavarodjanak.
• Fontos, hogy emberi hangnemben íródjon, hiszen emberekhez szólunk, nem robotokhoz.
• Kerüld a szakkifejezéseket! Olyan nyelvet használj, amit bárki megért.
• Segítőkész legyen, ne lekezelő! A hibaüzenet hangnemén érződjön, hogy segíteni akarsz a felhasználónak, nem pedig kioktatni. Sokan automatikusan utóbbit választják, mert a személyiségük része, értelme, haszna azonban nincs a weboldalakon. A megoldás keresése legyen a cél.
• Pozitív állításokat fogalmazz meg! Ha lehetséges, akkor a hibaüzenet pozitív, barátságos hangvételű legyen.
• Legyen összhangban a cég hangnemével! A cég image-ének a hibaüzenetekben is meg kellene jelennie, nem kezelheted ezeket teljesen idegen elemként.
• Ha nem muszáj, ne hibakódokkal kommunikálj! Ha meg is kell jelennie a hibakódnak az üzenetben az egyértelműség miatt, legyen mellette egy érthető magyarázat, hogy miről is van szó.