A weboldal usability alapjai – weboldalunk használhatósága
A web usability lényege, hogy weboldalunkat úgy alakítsuk ki, hogy a látogatók gyorsan és egyszerűen megtalálják azt, amit keresnek és ugyanilyen könnyen és gyorsan meg tudják vásárolni a termékünket/szolgáltatásunkat vagy fel tudják venni velünk a kapcsolatot.
Egy meglévő weboldal használhatósági szempontú átalakításába fektetett minden forintunk egyes külföldi elemzések szerint 10-100 forintos bevételnövekedést hozhat, illetve a konverziós arányunkat – vagyis azt az arányt, hogy 100 látogatóból hány vásárlónk/ajánlatkérőnk lesz – akár 100%-kal is növelheti.
Melyek a legfontosabb követelmények, ha egy weboldal használhatóságáról beszélünk?
Weboldal elérhetősége és hozzáférhetősége
Ha a weboldalunkat meglátogatni kívánó felhasználók nem jutnak el a weboldalunkra bármilyen okból, akkor feleslegesen fizetünk a hirdetésekért, mert a kifizetett kattintásokból (akár AdWords-, akár Facebook hirdetésből, akár organikus keresésekből jönnek) nem lesz látogatónk, a látogatóból pedig vásárló/megrendelő. Ekkor a weboldalunk értéktelen.
A weboldal elérhetőség/hozzáférhetőség legfontosabb elemei:
- Szerver válaszidő: fontos, hogy a látogatók ne hibaüzenetet kapjanak, amikor megpróbálják betölteni a weboldalunkat. Fontos a jó tárhelyszolgáltató!
- Törött linkek: ellenőrizzük, hogy ne legyen nem működő link a weboldalunkon. A 404-es oldal villámgyorsan viszi vissza a látogatót a Google keresőbe, aki helyettünk egy versenytársunk oldalát fogja meglátogatni.
- Reszponzív, mobileszközön is jól használható weboldal: teszteljük a weboldalunkat minden képernyőméretben, figyelembe véve azt is, hogy nem minden internetezőnek van villámgyors internetkapcsolata. A weboldalunknak minden körülmények között be kell töltődnie.
Tökéletes példa az elérhetőségre és hozzáférhetőségre: http://www.amazon.com/
Az amazon.com weboldal desktop verziója tökéletesen optimalizált mind asztali számítógépre, mind mobileszközre és nincsen olyan időszak, amikor nem elérhető. A layout rugalmas és reszponzív. Mobileszközre egy megfelelően letisztult, tiszta dizájnt alkalmaznak.
Gyors oldalbetöltődés
A legfrissebb adatok szerint egy átlagos internetező maximum 2 másodpercet vár arra, hogy egy weboldal vagy annak valamely aloldala betöltődjön. Ha ennél lassabban töltődik be a weboldalunk, akkor nagy arányban elveszítjük a látogatókat, mivel azok inkább elkattintanak, mint hogy megvárják az oldal betöltődését.
Például az alábbiakkal gyorsíthatjuk a weboldalunk betöltődését:
- Használjunk CSS-t táblázatok helyett a layoutban
- Használjunk CSS-t képek helyett a navigációs elemekben
- Használjuk a Google “Page Speed Insights” diagnosztikai eszközét és implementáljuk az abban található javaslatokat (pl. böngésző gyorsítótárazása, képek tömörítése, képek optimalizálása stb.)
Könnyű navigáció
Az internetezők az idők során hozzászoktak számos olyan alap navigációs elemhez, amelyekkel gyakran találkoznak, ezért ezeket érdemes figyelembe vennünk a weboldalunk kialakításakor.
Például:
- A márka-, termék- vagy céglogó a fejléc bal oldalán található és erre kattintva a weboldalunk nyitólapjára térhetnek vissza a látogatók
- A “Rólunk” menüben találhatják meg a weboldal tulajdonos cégre/vállalatra vonatkozó információkat
- A navigációra szolgáló menüsor minden egyes aloldalon ugyanott található, egységes
- Bármilyen mozgó, villogó elem a menüsor felett általában hirdetést takar
- A “kosár” tartalmazza a megvásárolni kívánt termékeket
A fentieken kívül számtalan más megszokást tudnánk mondani, amely magától értetődő bármilyen weboldalon. Ne becsüljük alá a megszokás erejét! Amihez az internetezők hozzászoktak, azt el is várják, tehát egy túlságosan egyedi, a szokványostól eltérő navigációjú weboldallal inkább csak megzavarhatjuk, mint elkápráztathatjuk őket.
Jó példa a könnyű navigációra: http://www.microsoft.com
Bár a dizájn letisztult és modern, a layout klasszikus és teljes mértékben alkalmazkodik az internetezők által megszokott weboldal felépítéshez. Balra felül található a logó a megszokott módon, jobbra fent pedig a keresőmező, amellyel a weboldal tartalmában kereshetünk. A felső menüsor a legfőbb tartalmakat emeli ki (ún. 1-es szintű menük). Ezekre kattintva egy lenyíló menüben nyílnak meg a további tartalmak (ún. 2-es szintű menü). Az is teljesen szokványos, hogy a kiemelt tartalmak még könnyebben elérhetőek a felső menüsor alatt, ún. szlájderben elhelyezett gombokra kattintva. Teljesen szokványos, standard felépítésének köszönhetően a látogatók könnyen és gyorsan megtalálhatják azt, amit keresnek.
Könnyen befogadható információ
A weboldalakat alapvetően teljesen más módon olvassuk, mint a nyomtatott anyagokat. Alapvetően egy weboldal tartalmát nem szóról szóra olvassuk el, hanem csupán pásztázzuk, szkenneljük a szemünkkel.
A pásztázás során egyes elemek szinte kiugranak a tartalomból, például:
- a címsorok
- a linkek
- a félkövér szövegrészek
- a felsorolások
Nem véletlen, hogy a képes elemek kimaradtak ebből a felsorolásból. A nyomtatott anyagokkal ellentétben a weboldalak esetében először a szöveget észleljük, nem a képet. A jó weboldal használhatóság érdekében ne helyezzünk kiemelten fontos szöveget képre, mert ott nagy eséllyel észrevétlen marad.
Hitelesség
Minden weboldal kulcseleme a hitelesség. Hiába találja meg a látogató a weboldalunkon a szükséges információt és tartalmat, ha nem nyerjük el a bizalmát, nem fog vásárolni tőlünk, illetve nem fog kapcsolatba lépni velünk.
Fontos a látogatóink számára megmutatnunk, hogy egy valódi vállalat vagyunk, hús-vér emberekkel. A weboldalunk “Rólunk” szekciójában mutassuk be hitelesen a cégünket. Győzzük meg a látogatókat arról, hogy jól választanak, ha tőlünk vásárolnak.
A hitelességet növelhetjük ügyfél testimonialokkal. Mondják el elégedett vásárlóink, hogy miért választottak minket.
Jó példa a hitelességre: http://www.loreal.com/
A L’ORÉAL márka jó munkát végzett a hitelesség megteremtése szempontjából. A professzionális dizájn mellett – amely teljes mértékben illik a márkához – számos minőségi tartalmat kínálnak, amellyel szakértelmüket igazolják. Például egy teljes menüt szenteltek a kutatás-fejlesztés témakörnek, amellyel szintén reputációjukat erősítik és termékek magas minőségét igazolják. A kutatási adatok mellett szakértői testimonialokat és hírességekről szóló fotókat. Szintén a bizalmat erősíti az is, hogy nagyon könnyű kapcsolatba lépni a céggel a weboldalon keresztül.
Relevancia
Nem elegendő, hogy a weboldalunkon átlátható, világos tartalmakat helyezzünk el, azoknak relevánsnak is kell lenniük a látogatóink számára. Ehhez ismernünk kell a termékünk/szolgáltatásunk célcsoportját és hogy mi érdekli őket a termékünkkkel összefüggésben.
Ennek meghatározását azzal kell kezdenünk, hogy meghatározzuk, ki a célcsoportunk és mi a fő céljuk, amikor ellátogatnak a weboldalunkra. Harmadsorban ún. “user scenario”-kat kell felállítanunk, hogy milyen helyzetben is használják a látogatók a weboldaunkat.
Jó példa a relevanciára: http://www.nike.com/hu/hu_hu/
A Nike központi weboldalára érkezve női, férfi, gyermek vagy sportágankénti kínálatukban böngészhetünk. Ahelyett, hogy nem vagy életkor szerint skatulyázná be a vásárlóit, a Nike tisztában van azzal, hogy egy adott sportág iránt érdeklődő sportolókat szolgál ki.
Ne korlátozzuk be a látogatókat!
Ahányszor egy weboldal link új ablakban nyílik meg, az új ablakban a “vissza” gomb nem használható. Az internetezők kb. 60%-a elsősorban a vissza gombbal navigál az interneten. A linkek új ablakban történő megnyitásakor tehát a látogatóink 60%-át megakadályozzuk abban, hogy az általuk preferált navigációs gombot használják. Ez nyilván nem fog tetszeni nekik!
Ne használjunk kereteket a webodalunk layout elemeként. Az ún. keretek számos használhatósági (usability) problémát okozhatnak, például:
- visszalépés” gomb letiltása (lásd előzőekben)
- Weboldal mentése könyvjelzőként nem működik
- Weboldal link továbbküldésének, megosztásának blokkolása
- Nyomtatási probléma
- A felhasználó csapdában érzi magát, ha a külső linkek ugyanazon ablakban nyílnak meg
- Keresőoptimalizálási problémák
Tesztelés, tesztelés és tesztelés!
Egy igazán jól használható weboldal nem egy nap alatt születik meg. Folyamatos kutatást, tartalmi és layout tesztelést igényel weboldalunk továbbfejlesztése.
A jó használhatóság feltétele, hogy a weboldalunk:
- könnyen elérhető és hozzáférhető
- hiteles
- megtanulható és
- releváns legyen.
Ne féljünk tesztelni új megoldásokat, ötleteket, amellyel javíthatjuk weboldalunk használhatóságát!
Ha segítségre van szüksége weboldala használhatóságának javításához, érdemes igénybe vennie a WebMa “weboldal usability audit” szolgáltatását!
Felhasznált források:
- http://www.webcredible.com/blog/web-usability-basics/
- http://usabilitygeek.com/a-7-step-guide-to-website-usability/
- http://www.crazyegg.com/blog/principles-website-usability/
- http://www.advisorwebsites.com/blog/blog/general/7-website-usability-principles-you-should-know
- http://www.intechnic.com/blog/the-best-5-tools-for-website-usability-testing/
Keressen minket bizalommal, ha online marketing aktivitásaihoz profi segítségre van szüksége!