8+1 tipp a felhasználói élmény növeléséhez

Káosz uralta struktúra, sietve összeállított csoportosítás, következetlen szöveges és képi tartalmak. Számos ilyen vagy ehhez hasonló hibával találkozhatunk a különböző weboldalakon — ezektől nemcsak egy webergonómia-szakértő, de egy felhasználó is sikítófrászt kaphat. Ahhoz, hogy te véletlenül se kövess el ilyen ballépéseket, érdemes betartanod néhány szabályt. Cikkünkben összegyűjtöttük a legalapvetőbbeket, melyek használatával esztétikus, felhasználóbarát, és nem utolsósorban több kattintást eredményező weboldalt készíthetsz.

1. Tipográfia: törekedj az esztétikumra, illetve az egyszerűségre, és segítsd a honlapodon szereplő szöveg megértését! Egyszerre csak egy vagy maximum kettő egymáshoz illő, de ne hasonló betűtípust használj az adott oldalon belül! Ha így teszel, rendezett és letisztult site-ot kapsz. A betűk kiválasztásánál dönthetsz a talpas típusok mellett (ezeket könyvekhez vagy nagyobb szövegekhez ajánljuk), de mi inkább a groteszk, talp nélkülieket javasoljuk. Természetesen egyedieket is alkalmazhatsz; azokat bátran használhatod például a címsorokban, nem rontva ezzel a kenyérszöveg olvashatóságán. Törekedj a 10px feletti betűméretek és a kellő mértékű térközök kialakítására! A felsoroltak mind együttesen járulnak hozzá a gördülékeny és kényelmes olvasáshoz.
2. Színek: legalább annyira erősíthetik, mint gyengíthetik az emberek felé közvetíteni kívánt üzeneteidet. Ha túl sok színt használsz a weboldalon, az óhatatlanul is elviheti a felhasználók fókuszát a lényegről, ha viszont túl keveset, akkor a tartalom befogadhatatlanná válik. A legelterjedtebb színkombináció a fehér-fekete, de nem ritka az sem, hogy ezek árnyalatait szőjük bele a honlapba. Bár a 90%-os szürke és nem teljes fehér pihentetőbb a szemnek. A weboldalon lévő színek, formák és méretek kontrasztot teremthetnek vagy bonthatnak: ezek arányára vonatkozóan a WCAG ajánlása irányadó.
3. Negatív terek (whitespace): az üres felületekkel gyakran nem tudunk mit kezdeni a weboldalon. Megnyugtatunk, nem kell mindig tartalommal feltölteni ezeket a részeket, ún. negatív tereket. Kovácsolj inkább előnyt a meglétükből! Minél nagyobb egy elem körül a negatív tér, annál inkább magára vonja a felhasználók figyelmét, kiemeli a tartalmat, és segít, hogy a weblapon található lényeges tartalmakra fókuszáljanak. Mikro negatív tér például a betűk közti sortávolság is, ami minél nagyobb, annál olvashatóbb lesz általa a szöveg.

4. Ikonok: ezek használatával könnyebb és gyorsabb megértést biztosíthatunk a felhasználóknak a szerintünk lényegesnek ítélt információkról. Azonban célszerű vigyázni a használatukkal, ugyanis ha nem vagyunk elég körültekintőek, akkor zsúfolttá, zavarossá tehetik a layoutot. Bár a webdesign kialakítása során számos modern ikonnal találkozhatunk, mi inkább alkalmazzunk egyszerűeket, letisztultakat, olyanokat, melyek mindenki számára teljesen egyértelműek!
5. Minőségi vizuál: a nagy és látványos képek, valamint videók használata erősíti a cég kommunikációját — az első benyomást, közvetve pedig a brandet is. A silány minőségű fotók és videók használata abszolút kerülendő a weblapokon, hiszen egy rosszul megválasztott mozgókép gyakorlatilag teljesen tönkreteheti az összképet. Legyen kiemelkedő a minőség, de lehetőleg ne ugyanazokat használjuk, amiket mindenki ismer, mert gyengítik az azonosítást. A képméretezés szintén fontos tényező: ha például a maximális szélesség 1800px, akkor ne a html kódban adjuk meg, hogy 1800px-re csökkentse a böngésző a képet, ami „fizikailag” 4000px széles, hanem ténylegesen 1800px méretűre vágjuk, a kisebb kijelzőkhöz pedig az annak megfelelően méretezett, kisebb képet szolgáljuk ki.

6. Harmónia: az oldalak többsége jó arányokkal rendelkező Grid-es felépítéssel bír, ami segít az elemek szisztematikus elrendezésében, illetve a jó vizuális hierarchia kialakításában. Ha neked is számít, hogy a weboldalad harmonikus és áttekinthető legyen, akkor próbáld ki ezt a kétdimenziós elrendezést biztosító layout technikát minél előbb!

7. Minimalista oldal: a minimalizmus nagyjából azt jelenti, hogy az adott site-ról „kidobunk” minden felesleget, ami a látogatókat eltérítheti a céltól. Ha egy honlapon sok a kattintható elem, link, gomb, kép vagy szöveg, az rendkívül zavaró lehet a felhasználók számára. Ez komoly dilemma, főleg az olyan weblapoknál, ahol rengeteg a tartalom. A minimalista webdesign egyik alapszabálya, hogy a legjobb felhasználói élmény elérésének érdekében minden elemnek valamilyen célt kell szolgálnia: így a felületek nemcsak átláthatóbbak lehetnek, de csökkenhet a betöltődési idő, és a reszponzív kialakítást is könnyebben elérhetjük.
8. Reszponzivitás: a platform független megjelenése egy mai modern weboldal esetében nem extrafunkció, hanem már-már alapkövetelmény. Így egyre inkább elengedhetetlenné válik, hogy a honlap alkalmazkodjon minden felülethez: a felhasználók egyre ritkábban ülnek le az asztali PC-k elé, inkább néznek tartalmakat a munkahelyi laptopon, vagy út közben tableten és okostelefonon. Ügyeljünk rá, hogy a userek ugyanazt a site-ot ugyanolyan minőségben élvezhessék eltérő eszköz esetén is!

9. Több scroll, kevesebb kattintás: a mobileszközök megjelenésével a felhasználói szokások is változtak a weboldalakkal kapcsolatban. Az internetezők többsége ma már szívesebben scrolloz végig egy hosszabb oldalt, mintsem menüpontokat bogarásszon. A mobileszközökön egyszerűbb görgetni, mint kattintani – azonban ha „kézzel fogható” az adott hivatkozás/button, (kellő távolságra van egy másik hivatkozástól/kattintható elemtől – ez a Google ajánlása is egyben), akkor segítheti a felhasználót a tájékozódásban. Egy-egy szolid animációval pedig a felhasználói élmény is javítható.

Akár új site-ról van szó, akár meglévőről, a felsorolt formulák alkalmazásával te is könnyedén felhasználóbaráttá teheted az oldaladat. Az eredmények gyorsan megmutatkoznak majd. És fogadj el tőlünk még egy jó tanácsot: ne hagyd abba az optimalizálást akkor sem, ha megnövekedik a látogatószám, és több lesz a vásárlás! Egy weboldal akkor tud igazán szárnyalni, ha folyamatosan gondozzák.