A te weboldalad mennyire felhasználóbarát?

A legtöbb cég az online marketingben csak arra figyel, hogy az oldalra minél nagyobb forgalom érkezzen. De ennél sokkal fontosabb az, hogy az oldaladon hogy „érzik” magukat a látogatók, könnyedén eligazodnak-e a tartalmaid között, végigfutják-e a landing page-edet és megtörténik-e a konverzió.

Gyorsan tudjuk le a trivialitásokat: ha az oldalad használata könnyű, akkor sok oldalletöltést kapsz, ám kevesebb lepattanást, de sok visszatérő látogatót és magasabb konverziókat. Ez nemcsak az árbevételednek, hanem a keresőpozíciódnak is jót tesz (előrébb rangsorol a felhasználóbarát oldal).

Ha viszont az oldaladat nehéz használni, akkor hiába szerzed meg rá a forgalmat, ha végül nem konvertál.

De hogyan javítsd a UX-et? Nézd meg ezt a 8 szempontot.

1) Egyszerűsíts

Minden oldaladnak van egy célja: feliratkoztatod a látogatót, másik aloldalra tereled és így tovább.

(Ha egy oldaladnak nincs célja, akkor kukázd.)

Nagyjából tudod, hogy arra az oldalra honnan érkezik a látogatód és ő mit tudhat a cégedről vagy az ajánlatodról. Ezért minden információt adj meg neki, ami az adott célhoz kell – ami pedig nem a célt segíti, azt töröld. Már a mikromomentumoknál olvashattad, hogy a jó információ kell és azonnal.

A túl sok felesleges információ megzavarja a látogatódat és csökkenti az oldalak teljesítményét. Tudtad, hogy átlagosan a szöveg 28%-át olvassuk el? (Ez nem azt jelenti, hogy a hosszú szövegek ne működnének, sőt épp ellenkezőleg.)

Ezért csak a lényeget rakd ki.

Az optimalizációs folyamatban nem azt nézed, hogy mit tudsz még hozzátenni, hanem azt, hogy mivel teheted egyszerűbbé.

2) Rakd a szemük elé az infót

A legfontosabb információk legyenek a „hajtás fölött” (hajtásnak hívjuk azt a részt, ami görgetés nélkül látszik). Balról jobbra olvasunk, ezt is vedd figyelembe. Nyilvánvaló, hogy a jobb alsó sarokban szereplő elemet kevesebben fogják észrevenni, mint a bal felső sarokban levőt.

Olcsó megoldás: nagymamateszt.

Drágább megoldás: szemkamerás teszt, hőtérkép, kurzorkövetés.

Ez itt egy optimalizált kép.

3) Úgy építsd fel, ahogy olvassák

Évek óta internetezel, ugye? Megszoktad már, hogy nagyjából hogy épül fel egy oldal: mi lehet a navigációs sáv, merrefelé van a keresődoboz, a nagy kiemelés általában a cikk címe. Ezekre az elvárásokra építs.

Emellett vedd figyelembe azt is, hogy egy weboldalt „F alakban” olvasunk: a bal oldali hasábot hosszan lefelé (ez a sorok eleje), és vízszintesen is egy kicsit, ha pedig ezt hőtérképen megnézed, akkor egy F formát látsz.

4) Gyorsítsd a betöltést

Ha lassan tölt be az oldalad, akkor rengeteg látogatódat elveszíted. Ha a webáruházad oldalai 3 másodperc felett töltenek be, akkor a konverziód 80-90%-a elúszik.

Az Aberdeen Group szerint minden plusz 1 másodperc az oldalad betöltésénél:

• 11%-kal csökkenti a megtekintett oldalak számát
• 16%-kal csökkenti a vásárlói elégedettséget
• 7%-kal csökkenti a konverziódat

Az Akamai tovább hozza rád a frászt, mert az emberek:

• 47%-a 2 másodperces (vagy még gyorsabb) betöltést vár el
• 40%-a elhagyja a weboldalt, ha 3 másodpercnél többet kell várnia a betöltésre

Sőt a vásárlók 52%-a kiemeli, hogy a betöltési sebesség a hűségük alapja (tehát ha lassú az oldalad, akkor átmennek a konkurenshez).

Nézzük az oldalgyorsító lépéseket.

1. Minimalizáld a lekéréseket

Minden plusz betöltendő elem plusz egy lekérést jelent, ami pedig idő.

Ezért:

• Szedj ki mindent, ami felesleges (értsd: nem segíti a konverziódat)
• Használj képek helyett CSS-t (pl. gombszövegnél)
• Kevés szkriptet használj, és azokat is a kód végére tedd (hogy már olvasható legyen az oldal akkor is, amikor még nem töltött be minden szkript)

2. Használj jó tárhelyszolgáltatót

Nem tudom, hogy egy szerveren mit és hogyan kell beállítani ahhoz, hogy gyors legyen – de ezt amúgy is a tárhelyszolgáltatódnak kell tudnia. Mi a NetMasters tárhelyeit használjuk, és ők a „legyen minél alacsonyabb a betöltési sebességem” kérésemet lefordítják sávszélre és a gépek kapacitására.

3. Használj kevesebb plugint

A nem használt pluginokat töröld, hogy ne lassítsa az oldaladat a feleslegesen megmaradt, ám inaktív kódjuk.

4. Optimalizáld a képeket

Vágd le a fölös részeket és csökkentsd a felbontását (600×400 körüli kép ugyanolyan minőségi mentés mellett is kisebb lesz, mint az az óriási felbontású kép, amit a fényképezőgépek alapbeállításból nyers képként készítenek neked).

5. Használd ki a cache-elést

Ez lényegében előtöltés: ha én már jártam az oldaladon, akkor a böngészőm letölti a dizájnelemeket, és visszatérő látogatóként már nem nulláról kell letöltenem az oldalt. (Feltételezve, hogy a webfejlesztőd beállította, én pedig engedélyeztem a böngészőben.)

6. Tömörítsd a weboldalad

Erre való a Gzip. A módszer lényege az, hogy a szerver tömörítve küldi el a látogató böngészőjének az adatokat, majd azt a böngésző kicsomagolja és betölti – tehát kisebb fájlcsomag utazgat a neten.

5) Nagyítsd a keresődobozt

Sok weboldalnál látsz keresődobozt, ami jó. Viszont a legtöbb keresődoboz használhatatlan, mert túl rövid. Viszont a 27 karakter hosszú doboz a keresések 90%-át elbírja.

(Ez olyan fontos téma, hogy hamarosan egy egész cikket szánunk rá.)

6) Egyértelmű és következetes dizájn

A landing page-eid kivételével minden aloldalad felépítése legyen ugyanaz: ne ugráljon a navigációs sáv, ne legyen más a színvilág, ne kerüljön át a feliratkozási doboz balról jobbra. A látogatód pár aloldal után megszokja, hogy hogy épül fel az oldalad, ezért ezt a felépítést tartsd be.

Fontos, hogy minden aloldalad vezessen valahova, tehát a látogatód ne kerüljön „zsákutcába”, ahonnan sehogy nem tud tovább haladni.

Úgy találták, hogy az ideális weboldalszélesség 770 pixel, az ideális hossz pedig 1000–1600 pixel, természetesen reszponzív felépítéssel.

Betűtípusok: kezdő webdizájnosok szoktak beleesni abba a hibába, hogy túl sok betűtípust használnak. Ezzel csak szétesik az oldal: minél kevesebb fonttal dolgozz.

És a legolvashatóbb szövegfelépítés: 45–75 karakter hosszú sorok.

8) Linkek

Milyen színe van a linknek? Természetesen kék!

Lehetőleg a linkjeid színe legyen kék, mert ezt szoktuk meg. Ha nem, akkor is egyértelműen eltérő betűszín (mint nálunk a piros). Kattintás után pedig váltson színt a link.

A linkszövegeknél (anchor text) ne a Google-re figyelj, hanem a látogatóidra: az a jó linkszöveg, ami egyértelművé teszi, hogy az adott link konkrétan hova vezet (egyébként a Google legújabb frissítései ugyanezt támogatják, ezért a konkrét és egyértelmű szövegezést mindig helyezd a kulcsszavak elé).

A link mindig új ablakban nyíljon meg (kivéve akkor, ha nyomós indokod és marketingcélod van arra, hogy ne).

Két hasonló termék és szolgáltatás között sokszor a használhatóság dönt. Nagyon komoly versenyelőny, mert végül is mindannyian az egyszerű és felhasználóbarát élményeket és termékeket keressük.

Fókuszálj a usabilityre, és a weboldalat hatékonysága többet fog nőni, mintha csak a forgalomszerzésre figyelnél. A konverzió nem az AdWords-hirdetéseidnél dől el, hanem magán az oldaladon (de erről részletesebben olvashatsz itt).