A webdesign nem ízlés kérdése: kutatás-alapú alapelvek a hatékony weboldalakhoz

A weboldal grafikai tervezése kívülről sokszor „ízlés” kérdésének tűnik: mi miért van ott, miért akkora, miért az a szín, miért ennyi szöveg. Valójában a jó design elsősorban nem díszítés, hanem egy olyan döntéssorozat, ami a felhasználót segíti: gyorsan megértse, hogy jó helyen jár, megtalálja, amit keres, és magabiztosan megtegye a következő lépést.

Ebben a cikkben összegyűjtöttem azokat a szempontokat, amelyek a mai, felhasználói élményre épülő és konverzióra optimalizált weboldalak tervezését meghatározzák — nem saját benyomásokból, hanem a legismertebb UX-kutatással foglalkozó szervezetek és szakmai műhelyek ajánlásai, kutatási eredményei és irányelvei alapján. Ahol csak lehet, konkrét UX-kutatásokra, felmérésekre és bevált elvekre támaszkodom (pl. NN/g jellegű kutatások, design guideline-ok, akadálymentességi ajánlások).

Végigmegyek a legfontosabb döntési területeken – a struktúrától és figyelemvezetéstől a szövegezésen, tipográfián, színeken és képeken át egészen a CTA-kig, bizalomépítő elemekig és az animációk használatáig. A cél egyszerű: érthetővé tenni, mitől lesz egy weboldal modern, átlátható és hatékony – és miért pont úgy néz ki, ahogyan.

UX alapelvek és viselkedési minták

Ebben a részben azokat az alapvetéseket veszem végig, amelyek minden modern weboldal tervezésénél meghatározzák a jó döntéseket: mit keres a felhasználó, milyen megszokásokkal érkezik, és mi az, ami csökkenti a bizonytalanságát. Ha ezek megvannak, akkor a későbbi döntések (elrendezés, szöveg, design) már nem ízlésből, hanem a felhasználói logikából következnek.

Design vs funkcionalitás, melyik a fontosabb?

„A designnak a tartalmat és a funkcionalitást kell támogatnia, nem fordítva. A felhasználók túlnyomó többsége azért megy az oldaladra, mert információt keres, nem pedig azért, mert „szép nézni” az oldalt” – mondja Claire Escobedo, az Online Optimism kreatívigazgatója.

A fókusz legyen a funkcionalitáson, ne csak az esztétikán. Olyan megoldásokat érdemes készíteni, amelyek könnyen használhatók, megbízhatók és praktikusak, és amelyek a felhasználók igényeit teszik az első helyre.

Két kutatás hasonló következtetéssel

Két vizsgálat is ugyanarra a megállapításra jutott:

Az első egy HubSpot-kérdőíves felmérése, amely azt mutatja, hogy a látogatók számára fontosabb, hogy az információ könnyen megtalálható legyen, mint az, hogy a design „szép” legyen vagy a felhasználói élmény látványosan „extra” legyen.

A második az NN Group több felhasználói tesztjének összegzése. Ez arra jutott, hogy amikor a látogatók elakadnak vagy „sikertelenek”, annak jellemzően az az oka, hogy nem találják meg az információt — nem pedig az, hogy az oldal nem elég esztétikus.

A legfontosabb feladatok kiemelése egyértelmű vizuális hierarchiával

Egy friss, nagy mintás kérdőíves kutatásban három különböző online információkeresési viselkedést azonosítottak a céljuk alapján:

• Megszerezni: a felhasználó egy konkrét tényt keres, termékinformációt talál, vagy letölt valamit. Példa: valaki utánanéz a dobos torta készítés lépéseinek.
• Összehasonlítani: a felhasználó több terméket vagy információforrást értékel, hogy döntést hozzon. Példa: a látogató LED tévék árát és funkcióit hasonlítja össze, hogy kiválassza, melyiket vegye meg.
• Megérteni: a felhasználó mélyebb megértést szerez egy témáról. Példa: valaki a talált információk alapján végül úgy dönt, hogy nem kezdi el a keto diétát.

A három feladattípus (megszerezni / összehasonlítani / megérteni) abban segít, hogy pontosabban lássuk, miért érkezik a látogató az oldalra. Ezért a tervezés elején érdemes összegyűjteni a legmagasabb prioritású feladatokat (top taskok), és a nyitólapot úgy építjük fel, hogy ezek kapjanak egyértelmű fókuszt.

A gyakorlatban a kulcsfeladatoknak tisztán felépített vizuális hierarchiát kell adni, hogy a felhasználó azonnal lássa, hol érdemes kezdenie. A top taskok azonosítása után hierarchiával és „vizuális súllyal” (pozíció, méret, kontraszt, térköz) irányítjuk rájuk a figyelmet.

Arra is figyelni kell, hogy a legkritikusabb feladatok szembetűnőek legyenek, és a nyitólap elemei ne versenyezzenek egymással a figyelemért — mert ha mindent kiemelünk, akkor semmi nem fog igazán kitűnni.

Miért van az, hogy manapság minden weboldal hasonló, sablonos?

Avagy az internetes felhasználói élmény törvénye ( Jakob’s law)

A felhasználók az idejük nagy részét más weboldalakon töltik. Ez azt jelenti, hogy azt szeretik, ha a te weboldalad is ugyanúgy működik, mint azok az oldalak, amelyeket már ismernek. Ezért érdemes olyan mintákra és megoldásokra tervezni, amelyekhez a felhasználók hozzá vannak szokva.

Mivel az emberek sok különböző oldalt használnak, idővel hozzászoknak az uralkodó design-szabványokhoz és konvenciókhoz. Amikor megérkeznek a te oldaladra, alapból azt feltételezik, hogy az is hasonlóan fog működni, mint a többi oldal.

Forrás: https://www.nngroup.com/videos/jakobs-law-internet-ux/ 

Mit várnak el a felhasználók a webes elemek működésétől?

Sok webes megoldás annyira elterjedt, hogy a látogatók automatikusan ugyanazt várják el egy új weboldalon is, mint amit már megszoktak máshol.

A felhasználói kutatások szerint:

• Ha egy elemet vagy funkciót a weboldalak legalább 80%-a ugyanúgy használ, akkor ez kvázi szabvánnyá válik, és a felhasználók erősen elvárják, hogy nálad is így működjön.
• Ha egy megoldás 50–79% között terjedt el, akkor ez inkább bevett gyakorlat (konvenció): a látogatók általában erre számítanak, mert „többnyire így szokott lenni”.

Néhány példa ezekre a sztenderd elemekre:

• A logó a bal felső sarokban
• Főmenü a fejlécben
• Az érték ajánlatok az oldal felső részében
• Keresőmező a nyitólapon
• Breadcrumb (morzsamenü) vízszintes elrendezésben
• A webhelytérkép megnevezése „Site map”
• A már meglátogatott linkek színének megváltoztatása
• A kosár link elhelyezése jobb felül
• Közösségi média elérhetőségek a láblécben
• Adatvédelem és jogi információk a láblécben

Forrás: https://www.nngroup.com/articles/the-need-for-web-design-standards/ 

Információ architektúra és layout döntések

Ebben a részben azt mutatom meg, hogy egy weboldal miért úgy épül fel és miért úgy rendeződik el, ahogy — nem ízlés vagy „szépérzék” alapján, hanem olyan UX-ajánlások és kutatási megállapítások mentén, amelyek a tájékozódást, a megértést és a következő lépés megtételét teszik könnyebbé.

Az információ-architektúra (IA) a weboldal „tartalmi térképe”: azt jelenti, hogyan rendezzük logikus rendszerbe a tartalmakat és funkciókat (milyen fő kategóriák vannak, mi hova tartozik, milyen hierarchiában és milyen elnevezésekkel jelennek meg), hogy a felhasználó gyorsan megtalálja, amit keres. A layout döntések pedig ennek a térképnek a vizuális megvalósításai az egyes oldalakon: mi hol helyezkedik el a képernyőn, milyen sorrendben következnek az információk, és mi kap hangsúlyt.

A cél, hogy az oldal(ak) tudatosan vezessék a figyelmet, és a felhasználó ne egyszerre „mindent” lásson, hanem mindig a következő logikus lépést. Ezért a fejléc, navigáció, kereső, tartalmi blokkok, minták és bizalomépítő elemek elhelyezését UX-döntési pontokként kezeljük: hol csökkentjük a súrlódást, hol erősítjük a megértést, és hol tesszük könnyűvé a továbblépést.

Egyszerre egy fő üzenet

A nyitólap, az aloldalak, a landing oldalak célja nem az, hogy „mindent megmutasson egyszerre”, hanem hogy egyértelmű sorrendben vezesse végig a látogatót a döntéshez szükséges információkon. Ezért a jó weboldal-design egyik alapelve: egyszerre egy fő tartalmi egység legyen fókuszban.

Ha egy képernyőn (különösen a hajtás felett) túl sok, hasonló erővel kiemelt elem jelenik meg — több főcím, több nagy gomb, több doboz, több „kiemelt” ajánlat — akkor a felhasználó figyelme szétaprózódik. Ilyenkor nem az történik, hogy „többet lát”, hanem az, hogy nehezebben dönt: mi a fontos, hol érdemes kezdeni, mi a következő lépés. A végeredmény gyakran bizonytalanság, gyors pásztázás, majd kilépés vagy visszalépés.

Ezzel szemben, ha a nyitólapot úgy építjük fel, hogy görgetés közben a látogató mindig csak egy témával találkozzon (egy ígéret, egy probléma, egy megoldás, egy bizonyíték, egy következő lépés), akkor a felület:

• csökkenti a kognitív terhelést (kevesebb dolgot kell egyszerre értelmezni),
• növeli az információ befogadását (a tartalom “átmegy”, nem csak átfut rajta),
• és támogatja a konverziót (minden blokk a következő logikus lépéshez terel).

Fontos: az „egyszerre egy dolog” nem azt jelenti, hogy a képernyőn fizikailag csak egy elem lehet. Azt jelenti, hogy egy domináns üzenet van, és minden más csak ezt támogatja — alárendelten.

Fejléc

A fejlécnél általában az működik a legjobban, ha egyértelmű vizuális hierarchiára épül, és hagyja „lélegezni” a felületet. A mérettel, kontraszttal és tudatos térközökkel úgy kell vezetni a figyelmet, hogy a belépéskor a szem természetes sorrendben haladjon: először a logóra, utána a navigációra, és csak ezután a CTA-ra.

Érdemes kerülni azt a helyzetet, amikor több elem egyszerre akar a legfontosabb lenni. Ha nincs egy domináns fókusz, a fejléc „zajosnak” hat, lassítja a tájékozódást, és csökkenti a navigáció hatékonyságát.

Logó

A nyitólapon a cégnevet és a logót jól látható, kiemelt helyen jelenítjük meg, jellemzően a bal felső sarokban. Ez mára bevett minta: a felhasználók itt keresik először az azonosítást, ezért a logót úgy tervezzük, hogy egyértelműen kivehető legyen, és vizuálisan elkülönüljön a környező elemektől. Általában kerüljük a középre zárt logót, mert kevésbé illeszkedik a megszokott pásztázási mintákhoz.

Az „azonosító területet” (identity area) nem méretezzük túl, de biztosítjuk, hogy hangsúlyosabb legyen, mint a közvetlenül mellette lévő elemek, így belépéskor gyorsan rögzül, hogy „melyik cégnél vagyok”. A logó és a cég név a weboldal céljának egyik legegyszerűbb jelzése is: a már ismerő látogatóknak azonnali felismerést ad, az új látogatóknál pedig idővel ismerősségérzetet épít.

Mivel a nyitólap sokak számára „biztonságos visszatérési pont” (akkor is, ha nem ott érkeznek be), a headerben lévő azonosításnak stabil kapaszkodót kell adnia. Ezért a fejlécet úgy alakítjuk, hogy a vizuális hierarchia tiszta legyen: először a logó, utána a navigáció, és csak ezután a további elemek.

Navigáció

A fő navigációt mindig jól észrevehető, könnyen elérhető helyre kell tenni, lehetőleg közvetlenül a fő tartalmi terület közelébe. Figyelni kell arra, hogy a felső navigáció ne „banneres” keretben vagy az fölött kapjon helyet (pl. vastag sávok, látványos fejléc-banner, nagy téglalap alakú grafikus blokkok tetején), mert ezekre a zónákra a felhasználók gyakran nem figyelnek („banner-vakság” jelenség). A navigációt úgy kell integrálni a headerbe, hogy ne tűnjön hirdetésnek, hanem természetes, használható kezelőfelületnek.

A nyitólap sok esetben a látogatói út kezdőpontja és egyben „központi csomópont”: innen indul a felfedezés, és innen lépnek tovább az aloldalak felé. Emiatt a navigációnak nem csak jelen lennie kell, hanem egyértelműen jeleznie is kell, milyen lehetőségek vannak, és merre érdemes továbblépni.

A menüstruktúránál nem cél mindent egyszerre megmutatni. A legfontosabb pontokat kell kitenni az első szintre, a kapcsolódó vagy ritkábban használt linkeket pedig lenyílókba (dropdownokba) javasolt rendezni. 

A menüpontok és linkek feliratait úgy kell megfogalmazni, hogy leíróak és ismerősek legyenek. A cél, hogy már a címkéből egyértelmű legyen, mi történik kattintás után. A nyitólapon ez különösen fontos, ezért kerüljük a túl kreatív, „kitalálós” elnevezéseket, és inkább olyan megfogalmazásokat használunk, amelyeknek erős az „információszaga” (information scent): a felirat önmagában is irányt mutat.

A navigáció formátumát és elhelyezését is a bevett mintákhoz kell igazítani: tipikusan egy felső vízszintes sáv, mert ezt a felhasználók azonnal felismerik. Ha a weboldal sok aloldalt és mély tartalmi struktúrát kezel, akkor jellemzően másodlagos menüben (külön vagy szomszédos navigációban) vezetjük ki a kevésbé fontos linkeket, hogy a fő navigáció továbbra is tiszta és jól pásztázható maradjon.

Ahol csak lehet, a legfelső szintű menüpontokat láthatóan jelenítjük meg, nem ikon mögé rejtve. Kutatások alapján a rejtett navigáció (pl. hamburger menü) lassítja a tájékozódást, ezért inkább azt a megoldást preferáljuk, hogy a fő menüpontok a képernyő tetején, vízszintesen (vagy bizonyos esetekben bal oldali sávban) azonnal elérhetők legyenek.

A menüpontok sorrendjét érdemes átgondolni, de nem kell „mindent eldöntő” tényezőként kezelni. Egyes szemkövetéses vizsgálatok szerint önmagában a menüpontok sorrendje és a felhasználói sikeresség között sokszor gyenge a kapcsolat — vagyis általában nem az a fő kérdés, hogy mi hányadik helyen van, hanem hogy a menü érthető, jól címkézett és könnyen pásztázható legyen.

Nem szabad „túldizájnolni” a kritikus tartalmakat, például a navigációs területeket. Könnyű azt gondolni, hogy a nyitólap fontos elemeihez látványos illusztrációk, keretezett dobozok és erős színek kellenek — de a valóságban a felhasználók gyakran reklámnak nézik a túlzottan grafikus megoldásokat, és inkább azokra a részekre figyelnek, amelyek hasznosnak tűnnek.

A felhasználók hajlamosak figyelmen kívül hagyni a túl erősen formázott területeket, mert hirdetés jellegűnek hatnak.

Céginformációk

A nyitólapi szlogen (tagline) mellett minden üzleti weboldalnak egyértelmű módon biztosítania kell, hogy a látogatók könnyen megtalálják a céggel kapcsolatos információkat — függetlenül attól, hogy mekkora a vállalkozás, illetve mennyire egyszerű vagy összetett a termék-/szolgáltatásportfóliója.

Az emberek szeretnék tudni, kivel üzletelnek, és a cégre vonatkozó részletek hitelességet adnak a weboldalnak. Egyes weboldalaknál (például nagy vállalatcsoportok esetén) a céginformációk elérése akár az egyik fő oka is lehet annak, hogy a felhasználók felkeresik az oldalt. De még egy egyszerű webes szolgáltatásnál is sokan kíváncsiak arra, ki áll a szolgáltatás mögött.

A vállalati információkat — például Rólunk, Befektetői információk, Sajtószoba / Hírek, Karrier / Állások és egyéb céges tartalmak — érdemes egy jól elkülönített, egységes területre rendezni. 

Kereső

A kereső minden nagyobb weboldal fontos része. Amikor a felhasználók keresni akarnak, jellemzően a nyitólapot pásztázzák, és a „kis dobozt, ahová be lehet gépelni” keresik — ezért a kereső legyen tényleges beviteli mező, ne csak egy link egy külön keresőoldalra.

A keresőmezőt érdemes legalább 25 karakter szélesre méretezni, hogy több szavas kifejezések is kényelmesen elférjenek anélkül, hogy a felhasználó beírt szövegének egy része „eltűnne”. 

A kereső a nyitólap egyik legfontosabb eleme, ezért alapvető, hogy a felhasználók könnyen megtalálják és erőfeszítés nélkül használják. Az ajánlások a nyitólapi keresőhöz egyszerűek: legyen látható, legyen elég széles, és legyen egyszerű. A keresés igazi értéke persze a megvalósítás minőségén múlik (találatok relevanciája, szinonimák kezelése, szűrők stb.).

Gyakorlati irányelvek

• Adj a felhasználóknak beviteli mezőt a nyitólapon keresőkifejezések megadásához, ne csak egy linket a kereső oldalra.
• A beviteli mező legyen elég széles, hogy a felhasználók lássák és szerkeszthessék a tipikus keresőkifejezéseiket.
• Ne adj a keresőterületnek külön címet (pl. „Keresés” feliratot a mező fölé); helyette legyen a mező jobb oldalán egy „Keresés” gomb.
• Ha az oldaladon nem jellemző az összetett keresés, akkor a nyitólapon elég az egyszerű keresés, és opcionálisan lehet link haladó kereséshez vagy keresési tippekhez.
• A nyitólapi kereső alapértelmezetten az egész weboldalon keressen (ne csak egy szűk részben).

Hero

A hero terület a nyitólap legfelső, „belépéskor” elsőként látható, kiemelt része: tipikusan a fejléc (header) alatt helyezkedik el, és rögtön megmutatja, miről szól az oldal, kinek szól, és mi a következő logikus lépés.

A hero akkor működik jól, ha a vizuális hierarchia tudatosan alakítja a design-elemek méretét, elhelyezését, színeit és tipográfiáját, és ezzel sorrendben kiemeli, mi a legfontosabb. Ez azért hasznos, mert segít a figyelmet a megfelelő pontra irányítani, és finoman a kívánt irányba terelni a felhasználót (például a konverzió felé).

Ebben a szakaszban kiemelt szerepet kap, hogy mi az az egyedi érték, amit a látogató kap, és miben különbözünk a versenytársaktól. A nyitólapnak világosan kell kommunikálnia az egyedi értékajánlatot (unique value proposition) — ezt jellemzően egy beszédes, leíró szlogen/tagline, és a hero részben elhelyezett meggyőző tartalom adja át.

Szlogen

Adj meg egy olyan szlogent (tagline-t), amely egyértelműen összefoglalja, hogy mivel foglalkozik a weboldal vagy a cég. A tagline legyen rövid, egyszerű és lényegre törő.

A homályos vagy zsargonos szlogenek csak összezavarják a felhasználókat — vagy még rosszabb: bizalmatlanságot keltenek, különösen akkor, ha a látogató marketing „hype”-nak érzi a megfogalmazást. Például a Ford szlogenje („Striving to Make the World a Better Place”) optimista, de nem derül ki belőle, hogy a cég autóipari vállalat, tehát nem írja le a tevékenységet.

Miért fontos?

• Ne feltételezd, hogy a látogatók ismerik a márkádat. Ha a cégnév önmagában nem teszi egyértelművé, mivel foglalkozol, akkor a nyitólapon egy tömör tagline mondja meg: ki vagy, mit csinálsz.
• Az emberek online ritkán olvasnak végig mindent — inkább pásztáznak. Ezért a tagline legyen könnyen átfutható, azonnal érthető, és kerüld a „szövegfalakat”, amelyek zsúfolttá teszik a nyitólapot és elriaszthatják a látogatót.

A hajtás feletti rész fogalma még mindig fontos?

A „page fold” (a hajtás) fogalma továbbra is meghatározó a nyitólapoknál, annak ellenére, hogy rengeteg képernyőméret létezik, és a reszponzív design általános. A hajtás feletti rész — vagyis amit a felhasználó görgetés nélkül lát — kulcsfontosságú, mert az emberek jellemzően csak akkor görgetnek tovább, ha az ott látható tartalom felkelti az érdeklődésüket. Emiatt a hajtás feletti tartalom egyfajta kapuőr: nagyban eldönti, hogy a látogató tovább foglalkozik-e az oldallal.

A hajtásra tervezésnek két része van:

• A legkritikusabb tartalmakat a lehető legfeljebb kell elhelyezni, hogy különböző eszközméreteken is jó eséllyel látszódjanak görgetés nélkül.
• Olyan elrendezést kell kialakítani, amely természetesen lefelé vezeti a felhasználót, és jelzi, hogy érdemes tovább görgetni.

Amikor a Chartbeat 25 millió látogatást elemzett, azt találták, hogy az elköteleződés (engagement) nagy része a hajtás alatt történik. Attól, hogy a lap tetején lévő tartalom látható, még nem biztos, hogy az a leghatékonyabb hely a cselekvésre ösztönző elemek (CTA-k) számára. Érdemes a CTA-kat lejjebb is elhelyezni az oldalon, olyan pontokon, ahol a látogató érdeklődése várhatóan már magasabb. 

Nyitólap tartalom

A nyitólap akkor működik igazán jól, ha nem csak általános bemutatkozást ad, hanem konkrét példákat is mutat abból, amit a weboldal kínál. Általában az a javasolt megközelítés, hogy a túl tág „ernyőfogalmak” helyett gondosan válogatott tartalomminták jelenjenek meg (termékekből, szolgáltatásokból, cikkekből, esetekből), mert ezek sokkal hatékonyabban kommunikálják az értéket.

A tartalomminták több szempontból is segítik a látogatót:

• Azonnal érthetővé teszik, miről szól az oldal, így gyorsan eldönthető, hogy jó helyen jár-e.
• Megmutatják a kínálat szélességét: milyen típusú termékek, szolgáltatások vagy tartalmak érhetők el.
• Érdekesebbek és könnyebben befogadhatók, mint az általános megnevezések, ezért jobban felkeltik a figyelmet.
• Megkönnyítik a tájékozódást, mert látszik, mi van a kategóriák mögött, így kevesebb „vakon kattintgatásra” van szükség.

Gyakorlati szempontból ezért sokszor hatásosabb például egy valódi, válogatott lista (kiemelt termékek / friss cikkek / esettanulmányok) megjelenítése, mint egy generikus link, ami csak egy kategóriaoldalra vezet. Arra viszont érdemes figyelni, hogy a kiemelt tartalom reprezentatív legyen: a túl szezonális vagy promóciós elemek könnyen eltolhatják a látogató fejében azt a képet, hogy valójában mi a weboldal fő ajánlata.

A nyitólap ajánlott tartalmi részeiről ebben a cikkben olvashatsz bővebben: https://www.usernet.hu/blog/hogyan-nez-ki-egy-jol-felepitett-nyitolap-utmutato-mindenkinek-aki-uj-weboldalt-szeretne

Bizalomépítő elemek

 Ideális esetben minden marketingállítást meg kell támogatni valamilyen társas bizonyítékkal (social proof), vagy számszerű, mérhető adatokkal. Íme néhány olyan bizonyítéktípus, amit szinte bármely marketing weboldalon el lehet helyezni:

• Ügyfélvélemények (testimonials)
• Ügyfél-/partnerlogók
• „Megjelent itt” / sajtómegjelenés logók (as-seen-in press logos)
• Díjak, elismerések
• Tanúsítványok, minősítések
• Influenszerek vagy szakértők ajánlásai
• Mióta működik a cég (évek a piacon)
• Ügyfelek / vásárlók száma
• Eredmények adatokkal (ROI, megspórolt költség, megspórolt idő stb.)

Társas bizonyíték (Social proof)

A „konformitási torzítás” (conformity bias) az emberi hajlam arra, hogy azt tegyük, amit mások is tesznek. Ha tehát bizonyítékot adsz rá, hogy mások már téged választottak, akkor a látogató számára az a döntés, hogy téged válasszon, biztonságosabbnak és “jó választásnak” tűnik. 

Adj a látogatóknak bizonyítékot arra, hogy valós és megbízható szereplő vagy. Ideális esetben minden marketingállításod mellé kerüljön valamilyen alátámasztás (social proof vagy adat).

Az alábbi képen egy Amazon oldalt látsz, ahol az oldaltartalom 43%-át az ügyfél ajánlások (social proof) tölti ki.

Lábléc

A footer nem csak az oldal vége, hanem UX szempontból „safe harbor”: segít, ha a látogató elakadt, bizalmat épít, és második esély navigációt ad. Akkor működik jól, ha letisztult, márkakonzisztens és mobilon is könnyen használható.

Kötelező elemek

• Logó / cégnév (opcionálisan 1 soros tagline)
• Kapcsolat: telefonszám, e-mail, cím (mobilon kattintható), opcionálisan űrlap/chat link
• Kulcsoldalak linkjei: pl. Szolgáltatások, Referenciák/Esettanulmányok, Árak, Rólunk, Kapcsolat, Blog/Help
• Jogi + adatvédelem: Adatkezelés, Cookie tájékoztató/beállítások, ÁSZF (ha kell), Impresszum (ha releváns)
• Copyright (évszám + cégnév)
• Sitemap: link vagy sitemap-jellegű struktúra (főleg nagyobb oldalaknál)

Fontos szabályok (best practice)

• Egyszerű, tiszta layout: sok white space, jól csoportosított oszlopok, jó olvashatóság
• Vizuális hierarchia: a legfontosabb linkek/CTA legyenek könnyen pásztázhatók, jól címkézett csoportokban
• Márkakonzisztencia: betűk, színek, tónus illeszkedjen a teljes oldalhoz
• Mobilreszponzív: elemek egymás alá, opcionálisan harmonika menük; ne legyen túl sok link; olvasható betűméret
• CTA: 1 egyértelmű CTA (pl. ajánlatkérés) vagy hírlevél (csak ha van valós érték + rövid ígéret + adatkezelés link)
• Bizalomjelek: díjak, tanúsítványok, partnerlogók, social linkek – csak annyi, amennyi nem zsúfol

Kerülendő

• Túl sok link vagy hosszú szöveg (zsúfoltság, nehéz pásztázás)
• Mobilon nehezen kezelhető footer (apró betűk, túl sűrű linkek, nincs rendezés)
• Gyenge kontraszt / nehezen olvasható tipó
• Túl sok ikon, szín, “flashy” elemek (reklámérzet, figyelemelvonás)
• Üres/halott social csatornák vagy túl sok bizalom-badge (hitelességromboló)

Vizuális nyelv: a design rendszer elemei

Ebben a részben azt mutatom meg, hogyan lesz az elrendezésből érthető és olvasható felület: milyen szín- és kontrasztdöntések támogatják a használhatóságot, hogyan segít a tipográfia a pásztázásban, miért fontos a tömör szöveg, és mikor érdemes képet/animációt használni (vagy épp elhagyni). A fókusz nem a “szépítésen” van, hanem azon, hogy a vizuális eszközök támogassák a tartalmat és a konverziót.

Színek

A szín és a kontraszt segít abban, hogy a felhasználók könnyebben észrevegyék és értelmezzék az oldal tartalmát, a megfelelő elemekkel lépjenek interakcióba, és megértsék a műveletek következményeit. A színek emellett hangulatot és tónust is közvetítenek, illetve kiemelhetnek kritikus információkat.

UX-ajánlások alapján a használhatóságot támogatja, ha az elsődleges (primary), másodlagos (secondary) és kiemelő (accent) színek tudatosan vannak kijelölve, és az elemek között megfelelő színkontraszt van. A kontraszt különösen fontos a gyengébben látó felhasználók számára, mert így a felület mindenki számára könnyebben olvasható és használható.

Egyszerű színpaletta (praktikus irányelv)

Gyakori, bevált ökölszabály, hogy a színpaletta három fő színre épül, és a 60/30/10 arány segít a következetes, áttekinthető használatban:

• 60%: elsődleges szín a nagy felületekre/hátterekre
• 30%: másodlagos szín szövegekhez, fontosabb szekciókhoz/elemekhez
• 10%: kiemelő (accent) szín a CTA-khoz (pl. fő gombok)

Emellett célszerű, hogy a paletta összhangban legyen a márkaidentitással, mert a következetes színhasználat erősíti a felismerhetőséget és a bizalmat.

Betűtípusok

Tipográfiánál általában az működik jól, ha kevés betűtípust használunk. Ajánlásként gyakran megjelenik a maximum három betűtípus irányelv, lehetőleg azonos betűcsaládon belül (például Sans Serif készletből). 

Ez segít megőrizni a vizuális következetességet, miközben elég változatosságot ad ahhoz, hogy jól elkülönüljenek a különböző szövegtípusok (főcím, alcím, törzsszöveg).

Szövegformázás

A kutatások és bevált gyakorlatok alapján érdemes korlátozni a betűstílusok és egyéb szövegformázások számát (például méretek, színek, dőlt/félkövér variációk), mert a túlzottan „túldizájnolt” szöveg könnyen elvonja a figyelmet a tartalomról, és ronthatja az érthetőséget.

Az olvashatóság szempontjából szintén ajánlott a nagy kontrasztú szöveg–háttér kombinációk használata, hogy a tipográfia a lehető legkönnyebben befogadható legyen.

Nyelvezet

A szekciók és kategóriák elnevezésénél alapelv az ügyfélközpontú nyelvezet: úgy kell elnevezni az egyes részeket, hogy az a látogató számára rögtön azt az értéket fejezze ki, amit kap belőle — nem pedig azt, hogy az adott rész a cég oldaláról mire szolgál.

Például egy fűtőolajjal foglalkozó oldalon az „otthoni energiatippek” jellegű kategória elnevezésénél az a cél, hogy a látogatónak azonnal világos legyen, miért hasznos számára.

Szövegírás

Nem szabad olyan „szellemes” kifejezéseket és marketing zsargont használni, amelyek miatt a látogatónak túl sokat kell gondolkodnia azon, hogy mit akarsz mondani.

Valahányszor homályos, túl cuki vagy túl kreatív megfogalmazások mögötti jelentésen kell töprengeniük a felhasználóknak, kockáztatod, hogy elbizonytalanodnak, frusztrálttá válnak, és végül el is hagyják az oldalt. A felhasználók gyorsan elveszítik a türelmüket, ha csak azért kell egy linkre kattintaniuk, hogy kiderüljön, mit jelent.

Ez nem azt jelenti, hogy a nyitólap szövegének unalmasnak kell lennie, de informatívnak és félreérthetetlennek mindenképp kell lennie.

Címek

Címet (szekciócímet, alcímet) akkor érdemes adni egy tartalmi résznek a weboldalon, ha az segíti a gyors pásztázást és egyértelművé teszi, miről szól az adott blokk. A jó cím „iránytű”: segít a látogatónak gyorsan eldönteni, hogy az adott rész releváns-e számára, és megkönnyíti az oldalon belüli tájékozódást.

Különösen hasznos címet használni, ha:

• a blokk tartalma nem magától értetődő első ránézésre,
• több, egymás után következő szakasz van, és fontos a strukturált felépítés,
• hosszabb oldalról van szó, ahol a felhasználó inkább pásztáz, mint olvas,
• a cím növeli az úgynevezett információszagot: már a címből sejthető, mit kap kattintás vagy olvasás után.

A jó cím konkrét és jelentést hordoz (pl. „Árképzés és határidők”, „Hogyan zajlik a közös munka?”), nem csak „dísz”, hanem valódi támpont.

Ezzel szemben viszont nem adunk címet olyan jól elkülönített oldalrésznek, amelynek a szerepe a tartalom és a vizuális megjelenés alapján magától is egyértelmű. Például általában nincs szükség arra, hogy a nap fő hírét külön címkézzük, mert a méret és az elhelyezés amúgy is jelzi, hogy ez a kiemelt tartalom.

Ugyanígy, ha van egy bekeretezett rész, ahol egy terméket emelünk ki, valószínűleg nem érdemes generikus címet adni neki, például „Kiemelt termék”. Az ilyen címek gyakran nem hordoznak valódi információt, és csak értékes helyet foglalnak el.

Bekezdések

A hosszú, tömbszerű bekezdések nem illeszkednek a digitális tartalmak megjelenítésének gyakorlatához. Már az is sokat segít az olvashatóságon, ha a hosszú bekezdéseket egyszerűen rövidebb részekre tördeljük — így a tartalom könnyebben befogadható.

Általános ökölszabályként a weboldalon nem szabad 3–4 sornál hosszabb bekezdéseket alkalmazni.
„A rövid bekezdéseket elolvassák, a hosszabbakat átfutják, a nagyon hosszúakat pedig átugorják.” – Jason Fried, a Basecamp alapítója és vezérigazgatója

Ha egy sor túl hosszú, az szintén megnehezíti az olvasást. A Web Style Guide ajánlása szerint a sorok hossza lehetőleg ne legyen több 12 szónál (55-72 karakter).

Képek

A weboldal tervezésénél fontos, hogy a kiemelt képi tartalmak hitelesen tükrözzék a márkádat.
A nyitólapon a képeket megfontoltan érdemes használni: segítsenek bevonni a felhasználót és erősítsék a márkaidentitást. Olyan vizuális elemeket célszerű választani, amelyek informatívak és relevánsak, és valódi betekintést adnak abba, mit képvisel a márka.

Kerülni kell a pusztán dekoratív vagy kevés értéket adó képi elemeket, mert a felhasználók hajlamosak átsiklani rajtuk. A nyitólap a weboldal legértékesebb felülete, ezért minden képnek legyen célja, és adjon hozzá értéket a tartalomhoz.

Gombok és linkek

A gombok és linkek a weboldal „irányítópultjai”: ezekből érti meg a látogató, mi kattintható, mi a következő lépés, és mi történik kattintás után. Ezért alapelv, hogy a link és a gomb szerepe ne mosódjon össze: a link jellemzően oda visz (navigál), a gomb pedig valamit csinál (műveletet indít, például „Ajánlatot kérek”, „Küldés”).

A használhatóság szempontjából általában ezekre érdemes figyelni:

• Egyértelmű felismerhetőség (affordance): már ránézésre derüljön ki, mi interaktív. A látogatók nem szeretik a „szövegnek látszik, de kattintható” megoldásokat, mert bizonytalanságot okoznak.
• Következetesség: ugyanaz a gombtípus ugyanúgy néz ki és ugyanúgy viselkedik az oldalon mindenhol. Ha valami „fő gomb”, az mindig „fő gomb” maradjon, ne változzon meg oldalanként a jelentése.
• Vizuális hierarchia a gombokon is: jellemzően egy képernyőn egy domináns (primary) cselekvés kap nagy hangsúlyt, a többi (secondary/tertiary) alárendelt. Ez összhangban van az „egyszerre egy fő üzenet” elvvel: ha több gomb ugyanakkora súlyt kap, a felhasználó lelassul.
• Szövegezés: a gombfelirat általában konkrét és cselekvést leíró (pl. „Árajánlat kérése”, „Időpont egyeztetés”), a linkfelirat pedig információszagot ad (már a szövegből sejthető, mi lesz kattintás után).
• Állapotok és visszajelzés: fontos, hogy legyen érzékelhető különbség a gomb/link állapotai között (pl. amikor ráviszed az egeret, amikor aktív, amikor tiltott). Ezek apróságok, de erősen növelik a biztonságérzetet.
• Akadálymentesség és billentyűzet-használat: fontos szempont, hogy a fókusz (amikor tabbal lépegetsz) jól látható legyen, és ne csak szín alapján lehessen megkülönböztetni állapotokat vagy kiemelést.

Űrlapok és hibajelzések

Az űrlapok a legtöbb üzleti weboldalon a konverzió „kritikus pontjai”: itt dől el, hogy a látogató tényleg megteszi-e a lépést (kapcsolatfelvétel, ajánlatkérés, rendelés). Ezért úgy kell tekinteni rájuk, mint súrlódáscsökkentési felületre: a cél, hogy minél kevesebb bizonytalanság és minél kevesebb felesleges munka legyen a kitöltésben.

A gyakorlatban általában ezek a fő elvek:

• Csak a szükséges mezők: amit nem muszáj elkérni a folytatáshoz, azt ne kérd el. 5 kitöltő mező felett exponenciálisan nő az elhagyási kedv.
• Logikus sorrend és csoportosítás: a mezők olyan sorrendben jöjjenek, ahogy a felhasználó fejében is összeáll a feladat (kapcsolati adatok → kérés részletei → megjegyzés). Ha több téma van, blokkokba kell rendezni.
• Egyértelmű címkék és segítség: a mező neve legyen világos („Telefonszám”, „Cégnév”), és ahol kell, adj rövid példát vagy magyarázatot, hogy mit vársz (pl. „Mikor lenne jó a hívás?”).
• Hibajelzés, ami segít, nem „büntet”: a jó hibaüzenet megmondja:
  1.    mi a probléma,
  2.    hol van,
  3.    hogyan javítható.
  Kerülni kell a technikai, általános üzeneteket („Hiba történt”), mert nem viszik előre a felhasználót.
• A hibát a mezőnél is jelöljük: nem csak felül írjuk ki, hanem ott is látszódjon, ahol javítani kell. Emellett figyelünk arra, hogy ne csak szín jelezze a hibát (legyen szöveg is).
• Ne vesszen el a kitöltött adat: ha valami hibás, a felhasználónak ne kelljen mindent újra beírnia.
• Megnyugtató „mi történik most?” visszajelzés: beküldés után legyen egyértelmű megerősítés (sikeres elküldés, következő lépés, várható válaszidő). Ez bizalmat épít és csökkenti az utólagos bizonytalanságot.
• Adatkezelés röviden, kéznél: ahol indokolt, röviden jelezni kell, mi lesz az adatokkal, és legyen belinkelve az adatkezelési tájékoztató — ez sok esetben növeli a kitöltési hajlandóságot is.

Grafikai elemek

A grafikai elemeket arra használjuk, hogy valódi tartalmat mutassanak, ne pusztán a nyitólap díszítésére szolgáljanak.

Érdemes például beazonosítható, a tartalomhoz kapcsolódó emberekről készült fotókat használni modellek vagy általános, sablonos stock képek helyett. Az embereket ösztönösen vonzzák a képek, ezért a felesleges vagy öncélú grafikai elemek könnyen elterelhetik a figyelmet a lényeges tartalomról.

CTA (Call-to-Action)

Amikor weboldalt tervezünk, kiemelt figyelmet fordítunk a cselekvésre ösztönző elemekre (CTA-kra). Az egyértelmű CTA-k segítik a látogatókat abban, hogy megtegyék a kívánt következő lépést — például vásároljanak, vagy kitöltsék a kapcsolatfelvételi űrlapot. Az ilyen, UX-re épülő fókusz akár több száz százalékkal is növelheti a konverziós arányt.

Animáció és videó

Ne használj animációt vagy mozgást pusztán azért, hogy a nyitólapon egy elemre ráirányítsd a figyelmet — a mozgó elemeket a felhasználók gyakran reklámnak (hirdetésnek) nézik. Ráadásul a túlzott mozgás és animáció akadálymentességi problémákat vet fel: a parallax effektek, az automatikusan lapozó (önmaguktól váltó) carouselek és a „scrolljacking” (amikor az oldal átveszi az irányítást a görgetés felett) dezorientációt okozhatnak, és vestibuláris (egyensúlyszervi) tüneteket is kiválthatnak.

Kerüld az automatikusan induló videókat. A nyitólapra érkezők általában nem számítanak rá — és nem is értékelik —, hogy rögtön hangos, mozgó tartalom fogadja őket. Az automatikusan elinduló videó annyira tolakodó lehet, hogy megnehezíti, hogy a látogató bármilyen más tartalommal érdemben foglalkozni tudjon az oldalon.

Ne animáld a kulcsfontosságú oldalelemeket, például a logót, a szlogent (tagline-t) vagy a főcímet. A kutatások azt mutatták, hogy a görgetésre induló szöveganimációk lelassítják a felhasználókat. A szlogennek azonnal láthatónak kell lennie a nyitólapon. Időérzékeny helyzetekben már a legkisebb késés is elég lehet ahhoz, hogy a felhasználó elszalasztson egy lehetőséget.

A felhasználók nemcsak azért hajlamosak figyelmen kívül hagyni az animált területeket, mert reklámnak tűnnek, hanem azért is, mert nehezebben olvashatók. Az animáció gyakran hipnotikus hatást vált ki: még ha el is éred, hogy a felhasználó odanézzen, kisebb eséllyel fogja befogadni és megjegyezni az információt, mintha egyszerű, statikus formában látta volna.