Keresés
Header Háttér

Webshark Blog

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

2019-04-040 komment

Mitől néz ki gombnak egy gomb a weboldaladon? És mitől lesz hatékony?

Az interakciók tervezése során a gombok a leggyakrabban használt elemek. Ezért nagyon egyszerűnek tűnhet bárki számára egy gomb megjelenítése, megtervezése. Valójában azonban számtalan olyan részlet van, melyet fontolóra kell venni, ha valóban hatékony gombot akarsz elhelyezni a weboldaladon.

A gondos tervezés azért is fontos, mert egy gomb sokszor kapcsolódik a CTA-hoz, vagyis magára a konverzióra ennek segítségével kerül sor. Ha nem sikerül a kialakítása, akkor közvetlenül rontja a weboldal eredményeit. Lássuk tehát az alapokat!

Mitől hatékony egy gomb?

Egy hatékony gombnak jeleznie kell magáról, hogy gombként funkcionál, a felhasználónak pedig tudnia kell, hogy mit várhat a gombtól. A hatékony gomb mindig tájékoztatja a felhasználót arról, hogy mi fog történni, amikor kapcsolatba lép vele. Emellett jeleznie kell a gombnak a saját fontosságát is.

Egy gomb tehát akkor tekinthető hatékonynak, ha

  1. a felhasználó egyértelműen meg tudja állapítani róla, hogy gombról van szó
  2. a felhasználó könnyen megérti a gomb célját
  3. a felhasználó tudja, hogy mire számíthat a gombtól

A gomboknak 5 típusa van

  1. Kiemelkedő gomb – egy általában négyzet alakú (lekerekített sarkú) gomb, amelyik úgy néz ki, mint amit le lehet nyomni.
  2. Flat gomb – egy olyan négyzet alakú gomb, melynél nincsenek háromdimenziós hatások, azaz árnyékok, átmenetek, fények.
  3. Szellemgombok – olyan négyzet alakú gomb, melynek csak kerete van, de nincs kitöltve színnel.
  4. Szöveges gomb – amely pusztán szövegből áll.
  5. Lebegő akciógomb – kör alakú gomb, mellyel leggyakrabban az andoridos, material designt követő alkalmazásoknál találkozhatsz.
Egy kiemelkedő gomb, mely gombnak néz ki, és jelzi, hogy kattintható
Egy kiemelkedő gomb, mely gombnak néz ki, és jelzi, hogy kattintható

Teljesen mindegy, hogy az előbbiek közül melyik típust választod a weboldaldon, annak mindig azonnali visszajelzést kell adnia a felhasználónak, amikor az kapcsolatba lép vele. Ennek révén fogja tudni a felhasználó, hogy a weboldal vagy az alkalmazás a vártnak megfelelően működik.

Szellemgombok
Szellemgombok

A gomboknak 4 állapota van

A gomboknak tehát vizuális vagy hangjelzést kell adnia különböző állapotairól. Melyek ezek az állapotok?

  • Normál,
  • hover,
  • lenyomott,
  • nem aktív.

A vizuális jelzések által ezeknek az állapotoknak határozottan elkülöníthetőnek kell lenniük.

Gomb-állapotok
Gomb-állapotok

Milyen tipikus helyzetekben jelenhetnek meg a gombok?

Elsődleges és másodlagos gombok űrlapoknál

Gyakran előfordul egy weboldalon, hogy nem csak egy gombra van szükség, hanem kettőre. Ilyenkor van egy elsődleges fomb, mely a fő cselekvést teszi lehetővé az oldalon, például egy űrlap elküldését vagy egy megrendelést egy webáruházban. Ugyanakkor megjelenik mellette más funkciójú gomb is, melynek vizuálisan is el kell különülnie.

Elsődleges és másodlagos gomb
Elsődleges és másodlagos gomb

Ha elsődleges és másodlagos gombok is megjelenítésre kerülnek egy weboldalon vagy applikációban, akkor

  • vizuálisan jól megkülönböztethetőnek kell lenniük
  • az elsődleges gombnak határozottan el kell különülnie megjelenésében a weboldal más elemeitől.

Gombok a párbeszédablakokban

Egy párbeszédpanel kérdéseket fogalmaz meg a felhasználónak, majd hagyja őket valamilyen parancsot adni. Az alapvető megoldás az Ok és a Törlés gomb, melyeknek sorrendjét tekintve nincs egyetértés. A Windows például jobb oldalra teszi az Ok-t, míg az Apple vagy a Google balra.

Egy alkalmazásnál tehát az adott platform szabályait kell követni, ugyanakkor weboldalaknál ez nem járható út, ott azt kell figyelembe venni, hogy a legtöbb felhasználó milyen eszközt használ. Ezeknél a gomboknál is célszerű azonban az általános Oké/Nem szövegtől eltérő szöveget használni.

A megfelelő kontrasztarány

A kontrasztarány a gomboknál azt fejezi ki, hogy mennyire tér el a gombon szereplő szöveg színe a gomb színétől. A World Wide Web Consortium (W3C) által ajánlott kontrasztarány a szövegeknél legalább 4,5:1, kivéve a következő eseteket:

  1. Amikor a szövegméret 18 pt vagy nagyobb, illetve ha 14 pt vagy nagyobb, de vastagon van szedve. Ilyenkor a kontrasztarány 3:1 lehet.
  2. Inaktív gomboknál nincs követelmény a kontrasztarányra.
A megfelelő kontraszt gomboknál
A megfelelő kontraszt gomboknál

Mit ellenőrizz egy gomb designjánál?

  • A gomb jelzi-e, hogy gombról van szó?
  • A gomb megfelelően visszajelez különböző állapotairól?
  • Az elsődleges akciógomb erősebb vizuális súlyú, mint a többi gomb?
  • A gomb elhelyezése követi a platformon megszokott elrendezést?
  • A gomb és szövegének kontrasztaránya megfelel a W3C követelményeinek?
  • A gomb szövege egyedi, és reagál a felhasználói igényekre?
Kategória: Design | 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.