A felhasználói felület sokáig az egérrel és billentyűzettel történő kapcsolódási felületeket jelentette. Amikor egy űrlapon kitöltünk valamit, lefelé görgetünk a weboldalon, keresünk, szűrünk, megnyitunk vagy becsukunk egy ablakot, akkor a felhasználói felületen keresztül kommunikálunk a rendszerrel.
A mobil eszközök egy másfajta megközelítést alkalmaznak. Az érintőképernyők újabb műveleteket kapcsoltak a mozdulatokhoz. Két ujjal nagyíthatunk, vagy lapozhatunk, és ha hosszan rajta tartjuk az ujjunkat egy navigációs elemen, megint másfajta műveletek válnak elérhetővé.
Ha érdekel mi a különbség a felhasználói felület és a felhasználói élmény között, akkor ebben a blogbejegyzésből megtudhatod.
A felhasználói felületeken meglepően apró különbségek is hatással lehetnek a felhasználók viselkedésére. A saját tapasztalataink és konverziós méreseink az elmúlt 20 év projektjeiben az alábbi megoldásokat hozták ki győztesként.
A felhasználói felület sokáig az egérrel és billentyűzettel történő kapcsolódási felületeket jelentette. Amikor egy űrlapon kitöltünk valamit, lefelé görgetünk a weboldalon, keresünk, szűrünk, megnyitunk vagy becsukunk egy ablakot, akkor a felhasználói felületen keresztül kommunikálunk a rendszerrel.
A mobil eszközök egy másfajta megközelítést alkalmaznak. Az érintőképernyők újabb műveleteket kapcsoltak a mozdulatokhoz. Két ujjal nagyíthatunk, vagy lapozhatunk, és ha hosszan rajta tartjuk az ujjunkat egy navigációs elemen, megint másfajta műveletek válnak elérhetővé.
Ha érdekel mi a különbség a felhasználói felület és a felhasználói élmény között, akkor ebben a blogbejegyzésből megtudhatod.
A felhasználói felületeken meglepően apró különbségek is hatással lehetnek a felhasználók viselkedésére. A saját tapasztalataink és konverziós méreseink az elmúlt 20 év projektjeiben az alábbi megoldásokat hozták ki győztesként.
Használj kevesebb oszlopot
Az egyoszlopos elrendezés segít egy irányba terelni a felhasználók figyelmét. Jobban kézben tudod tartani a mondanivalódat, szinte kézen fogva vezeted az érdeklődőidet. Több oszlop esetén meg van annak a kockázata, hogy elvonja a figyelmet az oldal fő céljától. Ha csak teheted, mesélj el egy történetet, ahelyett, hogy információkat zúdítasz a téma iránt érdeklődőkre, és soha ne felejtsd el az akcióra hívó, angolul „call to action” gombot az oldal végén.
A kevesebb, több – az egyoszlopos elrendezés előnyei
Az egyetlen oszlop semmiképpen sem jelenti azt, hogy teljes képernyőszélességben kígyóznak a hosszú, apró betűs sorok. Érdemes a könnyebb olvashatóság miatt olyan oldalakat tervezni, ahol kihasználhatod az üres részek figyelem összpontosító erejét. Nem szabad félni a margóktól.
Természetesen nem minden oldal lehet ennyire egyszerű, hiszen sokszor éppen a böngészés vagy a navigáció az oldal célja. Tipikusan, amikor egy blogban böngészhetnek a posztok között, akkor éppen az a cél, hogy a felhasználó úgy érezze, ő irányítja az eseményeket, ő választ a pillanatnyi érdeklődésének megfelelően. Egy webshop esetén sem jó megközelítés az egyoszlopos történet mesélés.
Használj kontrasztos elemeket
Nem csak a színkontraszt létezik
A felhasználók nagyon rövid idő alatt képet alkotnak egy weboldalról. Nem vizsgálják át tüzetesen, nem elemezgetik, csak vetnek rá egy pillantást és néhány másodperc alatt alakítanak ki egy képet a témáról. Emiatt nagyon fontos, hogy ha valamilyen tevékenységet jelölsz az oldalon, akkor már messziről látsszon, hogy itt a felhasználó részéről cselekvési lehetőség adódott és hogy ez a tevékenység milyen nyereséggel jár a felhasználó számára. Például meg lehet nyomni egy akció gombot a hírlevélre, ingyenes oktatásra, letölthető ajándékra való feliratkozáshoz. Vagy meg lehet nyomni a Megrendelés, Vásárlás gombokat.
Alkalmazd tudatosan a kontrasztot
Hogyan lehet elérni vizuális eszközökkel, hogy a felhasználó nagy valószínűséggel rákattintson a neki odakészített gombra? Az egyik leghatásosabb fegyvered a kontraszt alkalmazása lehet.
Színkontraszt
A semleges színű környezetből egyetlen erős színnel emeld ki az akció gombokat. Ha világos a szövegháttered és a sötét a betűtípusod, akkor a gombon cserélhetsz: legyen sötét a gomb színed és világos a ráírt szöveg. Abban az esetben, ha nagyon színes a környezet, sok a fotó, vagy színes grafikai elemeket, háttereket, blokkokat használsz, már nem fog kiemelkedni a színes gomb. érdemes az egyetlen céllal létrehozott, ún. landing page-eket kevésbé tarka tartalommal ellátni. Vagy legalábbis a gomb közvetlen környezetébe ne kerüljenek más harsány elemek. Amikor a kontraszt hatás szóba kerül, akkor az első gondolata mindenkinek a színkontraszt, azonban számtalan más eszközzel is élhetsz.
Térhatás
A gomb térhatása elüt, ha a környezet alapvetően síkbeli elemekből, szövegekből, kitöltendő mezőkből áll. Válassz olyan sablont, vagy vásárolj olyan grafikus felhasználói felületet, amelyen a gombok nem csak színes téglalapok, hanem árnyékolással is jelölik, hogy ez egy benyomható, kattintható elem. Tompítja a kontraszt hatását, ha az oldalon térhatású grafikákat használsz illusztrációként.
Betűméret és fonttípus
Az olvasható szövegektől lényegesen különböző, akár írottnak ható fonttípust is alkalmazhatsz a gombokon. Csak arra vigyázz, hogy még tisztán olvasható legyen. A nagyon kalligrafikus fontok sok helyet foglalnak a gombon, és nehéz olvasni, értelmezni őket. nem baj, ha nagy gombokat, és viszonylag nagy betűket használsz, amelyek a méret miatt is elütnek a környező szövegek font-méretétől. Gondolja mobil eszközökre, hiszen az érintőképernyőn legalább akkorának kell látszania a gombnak, hogy egy mutatóujj még kényelmesen beletaláljon.
Ne félj az üres helyektől
Sokan esnek abba a hibába, hogy minél jobban ki akarják használni a képernyőt, „ne kelljen görgetni” felkiáltással. Ennél sokkal fontosabb, hogy legyen megfelelő tér az akciógombok körül, mert a fehér szegélyek közepén csücsülő nagy, színes folt úgy tekintet-mágnesként viselkedik. A legábrándosabb, szórt figyelmű, szerelmes felhasználó is észre fogja venni.
Emelj ki egy alternatívát
Amikor több alternatívát is mutatsz, nem szerencsés mindet ugyanolyan hangsúllyal szerepeltetni. Bizonyíthatóan jobb a kattintási arány, ha kiemelsz egy előnyösebbet a tömegből. A te ajánlásod egyszerűsíti a felhasználó döntését, és sokkal nagyobb eséllyel kattint, mintha egyedül kéne kiválasztania asok, vizuálisan egyforma lehetőség közül a neki legmegfelelőbbet.
Legyen kiemelt javaslatod több lehetőség esetén
Érdemes azzal kísérletezni, hogy a több terméket felvonultató oldalakon kiemelsz egyet valamilyen szempont szerint a többi közül. Az optimális hatás kedvéért hangsúlyozd vizuálisan a kiemelt terméket, és lásd el valamilyen vonzó címkével. A lehetőségeket az adott termék, illetve szolgáltatás alapján kell mérlegelned: „Legkedvezőbb ár-érték arány”, „legtöbbet eladott”, „optimális kisvállalkozásoknak”, „akció csak ebben a hónapban”, stb.