Kellemes olvasgatást kívánunk! Reméljük cikkeink közül te is megtalálod a számodra hasznosat, érdekeset!
Ha van, amiről szívesen olvasnál többet, kérlek jelezd felénk és úgy alakítjuk témáinkat!

Sorozatunk első részében a menüstruktúra kialakításának szerepét mutattuk be, kitérve a menü szélességének, mélységének és a menüpontok megfogalmazásának jelentőségére. Illetve adtunk néhány tippet, hogyan érdemes a már meglévő vagy tervezett menüstruktúránkat tesztelni, ha nem vagyunk biztosan annak hatékonyságában.
A második részben a weboldalak esetében is megjelenő funkciók, funkcióra utaló jelekkel kapcsolatos alapvető tudnivalók kerülnek bemutatásra. Ez, ahogy a megfelelő menüszerkezet, szintén bagatell dolognak tűnhet elsőre, mégis megint egy olyan dologról van szó, ami jelentősen tudja növelni egy weboldal konverziós rátáit.

2. Tipp: Funkcióra utaló jelek

A designerek körében ismert kifejezés az affordancia, melyet ugyan elsősorban tárgyak vonatkozásában használnak, azonban egyre többször jelenik meg weboldalak, alkalmazások kapcsán is. Az affordancia nem más, mint az eszközöknek, felületeknek azon tulajdonsága, hogy ránézésre mit üzennek, mire és hogyan tudjuk őket használni? A leghétköznapibb példákkal élve: egy kilincsre ha ránézünk, tudjuk hogy azt le kell nyomni vagy el kell forgatni, az ajtócsengőt meg kell nyomni, de nem is feltétlen kell olyan tárgynak lennie, melyet rendszeresen használunk.

Legyen szó bármiről, ha az jól van megtervezve, már elsőre tudni fogjuk használni akár kézikönyv nélkül is, függetlenül attól, hogy életünkben először látjuk-e. Mégis sokan esnek abba a hibába, hogy az esztétikumot a funkcionalitás elé helyezik, így a végeredmény egy rendkívül mutatós, de nem egyértelműen használható eszköz. Hasonló problémába futhatunk akár szállodákban, bevásárlóközpontokban, ahol a mosdókagyló és a csaptelep nagyon jól néz ki, de meg kell lesnünk a többi embert, ahhoz hogy rájöjjünk, hogyan varázsolhatunk belőle vizet.

Ahogy a kézzel fogható eszközök esetében fontos a használhatóság, érthetőség, úgy nem kevésbé igaz ez a weboldalakra, alkalmazáskora is. Néhány alap dolog, amire feltétlenül figyelnünk kell:

1. Gombnak is látszó gombok: legyen egyértelmű, hogy mi az, ami gombként funkcionál a honlapunkon, kiváltképp, ha az valamilyen fontos konverzióhoz társul. Gombjaink hatékonyságát könnyedén mérni tudjuk, ha Google Analytics eventeket helyezünk rá, illetve A/B tesztek használatával akár a különböző megjelenítésű, elhelyezésű, megfogalmazású variációk hatékonyságát is tesztelhetjük.

Példa: az Alexandra könyváruház weboldalán árnyékokkal emelik ki a gombokat.

Gombok

2. Szöveges mezők, formok: ne csak arra ügyeljünk, hogy tudják, az adott mezőbe írni tudnak, segítsük a látogatókat azzal, hogy megmutatjuk, milyen formátumban várjuk azt. Például telefonszámoknál, bankkártya számoknál segíthetünk akár a tagolással, akár placeholder szövegek megadásával.

Példa: placeholderek a Wizzair járat és szobafoglalás űrlapjánál.

Placeholderek

3. Ikonok használata: telefonszám, email ikon azok előtt, hogy egyetlen pillantással beazonosíthatóak legyenek, webshopok esetében ilyen a kosán ikon a termékeknél (akár azok kosárba helyezésére, akár csak a már összeállított kosár megjelenítéséhez).

Példa: hiába egy orosz webáruházat nézünk cirill betűkkel, az ikonok segítségével könnyedén kiválaszthatjuk az egyes termékcsoportokat vagy megtalálhatjuk a szállítási, fizetési információkra vonatkozó részt.

Ikonok

4. Látható linkek: mindig egyértelmű legyen, hogy mi az, ami kattintható, főleg ha egy szóra, mondatrészletre helyeztük a linket. Ehhez sem kell mást tenni, mint az adott szöveg színét megváltoztatni, aláhúzást adni neki, a kurzort megváltoztatni, ha fölé viszik.

Példa: cikkrészlet a Portfolio oldaláról, ahol a szövegben sárga betűszínt kapnak a linkek.

Linkek

Írj nekünk!

Ha felkeltettük az érdeklődéset és szeretnél árajánlatot kérni vagy személyesen konzultálni a projektedről, vedd fel velünk a kapcsolatot és mi még aznap felkeresünk!

Kapcsolat