Keresés
Header Háttér

Webshark Blog

… jquery, ajax, design, psd, plugin, modul, web2, social, miegymás…

2021-02-180 komment

Miért ne tedd egymás mellé az ellentétes funkciójú gombokat?

Gyakran látjuk weboldalakon vagy appokban, hogy egymás mellé kerülnek olyan gombok, melyek egymással ellentétes opciót kínálnak a felhasználók számára. Ez sok esetben nem olyan nagy gond, mert nincs akkora jelentősége, ha véletlenül félrekattintanak. Néha viszont komoly problémákat okozhat. De mi a megoldás?

A hibák megelőzése mindig sokkal jobb megoldás, mint a javításuk. Hiszen, amikor egy felhasználónak korrigálnia kell egy hibát, akkor az már megzavarja a feladatvégzésében és jelentős energiákat kell a hiba megoldására fordítania, még akkor is, ha néhány másodperc alatt helyrehozható – hívta fel a figyelmet egy bejegyzésében a Nielsen Norman Group, mely alaposan körüljárta a problémát.

Az, hogy két, ellentétes lehetőséget kínáló gomb egymás mellé kerül, általában azért következik be, mert a designerek nem veszik figyelembe, hogy a felhasználók nem teljes figyelmükkel fordulnak egy weboldal vagy alkalmazás felé. A felhasználóknak nagyon sokszor automatikusak a reakcióik, nem gondolkodnak, különösen, ha rutinból végzik a feladatot.

Ha megnézed ezt a menüt, ami egy rosszul írt szó miatt jelenik meg a Firefoxban, akkor láthatod, hogy a szó javítását lehetővé tevő link egészen közel van a szótárhoz adáshoz. Nagyon könnyű véletlenül rákattintani az utóbbira, és így nem, hogy nem kerül javításra a szó, hanem mindjárt gazdagabb lesz a szótárunk egy hibás szóval.

Ez a probléma nagyon gyakran felmerül az úgynevezett menük, megerősítő panelek, hibaüzenetek, stb. esetében. Gondolj például a szinte mindenhol elérhető jobbgombos menüre, mely a “Másolás” és a “Beillesztés” lehetőséget tartalmazza, pont egymás alatt. Ugye előfordult már veled is, hogy nem arra kattintottál, amelyikre szerettél volna, így másolás helyett mondjuk egy szöveg szerkesztése közben kitörlődött a kijelölt szöveg, és belekerült egy, a vágólapon meglévő korábbi szöveg.

Ez sok esetben korrigálható egy egyszerű “Undo” paranccsal, de nem minden esetben ez a helyzet. Különösen, ha például párbeszédpanelekről vagy űrlapokról van szó. Ahol szintén jellemzően egymás mellett jelennek meg az ellentétes funkciójú gombok. Annyira gyakran, hogy az ellentétes opciók egymás mellé helyezése az egyike a 10 leggyakrabban előforduló designhibának. De mit lehet tenni az elkerülésük érdekében?

Arra, hogy jobban megkülönböztess két ellentétes funkciójú gombot több lehetőség is kínálkozik a való életben:

  • eltérő textúrák alkalmazása,
  • egy fizikailag eltérő irányítás (tehát nem nyomás, hanem elforgatás vagy húzás),
  • és persze ott van a közelség, illetve annak hiánya.

A lényeg, hogy jelezni tudjuk nem csak azt, hogy miként léphet kapcsolatba a felhasználó a gombbal, hanem annak hatását is egy olyan módon, mely nem igényli a felhasználó tudatos figyelmét.

Tehát, amikor a való életben például egy kart jóval nehezebb meghúzni, mint egy másikat, akkor az erőfeszítés eltérő mértéke már vissza is jelez a felhasználónak, hogy hibázni készül, és nem csak utólag derül ki a hiba.

Természetesen van logika a mögött, hogy egymás mellé kerül két ellentétes funkciójú gomb, hiszen pont emiatt van közöttük kapcsolat. Ugyanakkor a két kapcsolódó gomb hatása egészen eltérő (például egy Mentés és egy Törlés esetében). Emiatt pedig a designereknek mégis csak arra kell törekedniük, hogy amennyire csak lehetséges, megkülönböztessék a kettőt, így minimálisra csökkentsék a felhasználók hibázási lehetőségét.

Mondhatod, hogy erre szolgál a címke a gombon, ez azonban még messze nem elég. Más vizuális jelzésekre és eltérő elhelyezésre is szükség van, ha biztosra akarunk menni. Itt van például egy másik helyesírási megoldás, ahol eltérő színnel, ikonnal, betűmérettel jelzik a két eltérő opciót, azaz a szó javítását, illetve szótárba való felvételét.

Egy másik megoldás, ha jól elkülönítjük egymástól a lehetőségeket, és egy kicsit megnehezítjük a két lehetőség összecserélését. A felhasználónak akkora utat kelljen bejárnia az egérmutatóval vagy az ujjával a két ellentétes opció között, hogy ezáltal csökkenjen a hiba lehetősége. Persze mondhatjuk, hogy ez további fáradtságot jelent a használatnál, ugyanakkor még mindig kevesebb erőfeszítést igényel, mint ha utána javítani kell a félrekattintás miatt bekövetkező hibát.

A nagyobb távolságra lehet példa az alábbi app, ahol a két rendkívül lényeges és nagy hatású funkció távol került a menü többi elemétől.

Látható tehát, hogy a súlyos következményekkel járó funkciók elérését miként lehet megnehezíteni, hogy ezáltal elkerüljük egy komolyabb hiba bekövetkeztét. Használhatunk jelentősen eltérő vizuális megjelenést vagy megnövelt teret, estleg egyszerre mind a kettőt, hogy jelezzük a két vagy több funkció különbségét

(Forrás: a Nielsen Norman Group blogbejegyzése)

Kategória: Egyéb | Címke:

Főleg írok. Főleg blogot és közösségi médiát, de tágabb perspektívában: online marketing, úgyhogy van benne bőven SEO, laza AdWords, webdesign-okoskodás, és még ami belefér.

Comments are closed.