Keresés
Header Háttér

Webshark Blog

… jquery, ajax, design, psd, plugin, modul, web2, social, miegymás…

2017-09-130 komment

Mitől néz ki kattinthatónak egy elem a weboldaladon?

A webdesign sokat változott az aláhúzott, kék linkek kora óta. Most már új jelzések is használhatók a kattinthatóságra, melyek egyértelműek a felhasználók számára. De mi az, ami egyértelműen jelzi a kattinthatóságot?

Régen minden egyszerű volt: a weboldalakon a kék színű, aláhúzott elemek és a háromdés gombok linkeket takartak, melyekre kattintani lehetett, míg az oldal többi részére nem. A dolgok azonban változnak, bekopogtatott a flat design, és már rég nem elégednek meg a designerek és a weboldalak tulajdonosai az unalmas kék linkekkel, meg a gomboknak kinéző gombokkal. Ez viszont okozhat némi zavart a felhasználókban.

Megszokás

Nielsen Norman Group blogjának egyik bejegyzése arra az alapvető tényre hívja fel a figyelmet, hogy az online világban az emberek korábbi tapasztalataik alapján határozzák meg egy elemről, hogy az kattintható-e vagy sem. Jelentést kapcsolnak néhány formához, színhez és kontextushoz. Klasszikusan linkként kezelik a kék, aláhúzott szövegeket, valamint az olyan gombokat, melyek hasonlítanak a való világban létező gombokra, azaz háromdimenziós megjelenést utánoznak.

Ezek a jelzések évekig működtek is, azonban mára bonyolultabb lett a helyzet, az egyszerűsítésre törekvő flat design ugyanis kétdimenziós megjelenítésben gondolkodik. Nem is csak öncélúan hajszolva a letisztultságot, hanem a sokféle méretű kijelzőhöz való igazodás kényszere miatt. Viszont egy-egy túlzott leegyszerűsítéssel pont ellentétes hatást érhetnek el, túlságosan bonyolulttá teszik az interakciók kivitelezését a felhasználók számára. Vagyis mivel eltűnnek a háromdimenziósként ábrázolt gombok, az embereknek nehézséget okoz megállapítani egy elemről, hogy kattintható-e.

Pedig egy weboldalon történő navigáció során egyértelmű jeleket kell adni a felhasználóknak arra vonatkozóan, hogy hol találnak sima szöveget, és melyek a kattintható elemek. A felhasználóknak nem szabadna egy-egy elem láttán gondolkodóba esniük, hogy az vajon kattintható-e, illetve csalódást sem okozhatunk nekik azáltal, hogy olyan elemekre kattintanak az oldalunkon, melyek nem linkként funkcionálnak.

A találós kérdés: hányféle kattintható szöveget látunk az oldalon? A következetesség lehetne erősebb.

A találós kérdés: hányféle kattintható szöveget látunk az oldalon? A következetesség lehetne erősebb.

Természetesen, ha egy elem fölé visszük az egeret, akkor a kézzé formálódó nyíl egyértelműen utal arra, hogy kattintható az elem. De erre a lépésre nem szabad rákényszeríteni az embereket. Ez jelenti ugyanis a vadászatot a linkek után, ami komoly erőfeszítést igényel, ezért az emberek nem fognak egy ilyen oldalon sokáig próbálkozni, nem is várhatjuk el ezt tőlük. Habár az aláhúzott kék link egyértelmű megoldás, de mégsem a legjobb. Lássuk, miért!

Mi a gond az aláhúzott kék linkekkel?

A linkek hagyományosan aláhúzottan és kék színben jelennek meg a webdesignban, azonban nem biztos, hogy ragaszkodni kell ehhez a formához. Legalábbis akkor, ha az olvashatóságot is szem előtt tartjuk, mert egyébként az aláhúzott kék linkeknek vannak előnyei is.

Miért lettek kékek és aláhúzottak a linkek?

A web előtti időkben alapvetően aláhúzással jelöltük azt, ha valamit hangsúlyozni akartunk egy szövegben. Az aláhúzás tehát még azokból az időkből származik, amikor írógépet használtunk, és ez volt a legegyszerűbb megoldás sorok, mondatok, szavak kiemelésére a gépelt szövegben. Hiszen az írógépen nem voltak vastag vagy dőlt betűk (bár persze lehetett trükközni dupla leütéssel, ritkább szedésű szavakkal vagy eltérő szín használatával).

A linkeket is azért húzzuk alá a szövegekben, mert ki akarjuk őket emelni, fel akarjuk rájuk hívni a figyelmet, el akarjuk különíteni őket a szöveg többi részétől. Habár a weben ma már szofisztikáltabb lehetőségeink is vannak a kiemelésre, sokáig bevett megoldásnak számított a hagyományos aláhúzás, hiszen ezt mindenki értette, és a web hőskorában még a lehetőségek száma is korlátozottabb volt a hangsúlyos megjelenésre.

Az eltérő színnel történő megjelenésnek ugyancsak a kiemelés, a figyelemfelhívás az oka. És hogy miért pont kékek lettek? Állítólag, amikor még az első bögészőkkel kísérleteztek a szakemberek, a számítógépek csak 16 szín megjelenítésére voltak képesek, ha egyáltalán láthatóak voltak színek a monitoron. És a fekete után a kék volt a következő legsötétebb szín. A technológia aztán gyors fejlődésnek indult, a kék és az aláhúzás viszont még sokáig velünk maradt.

Milyen előnyei vannak?

Természetesen megvan annak is az oka, hogy az aláhúzás miért nem kopott ki sokáig a webről. Az egyik oka az, hogy valóban hatékonyan emelte ki a linkeket a szövegben, amikor a felhasználók csak átfutották azt. Vagyis olyan vizuális kulcsként viselkedett, amely javította az átkattintási arányt. Az emberek számára könnyebbé tette azt, hogy megtalálják a fontosnak, illetve hasznosnak ítélt információkat a weboldalon.

Azért is volt indokolt az aláhúzás használata, mert egyértelműen jelölte – a kék színnel kiegészülve -, hogy linkről van szó. Teljes mértékben megfelelt Steve Krug “ne törd a fejem!” jelmondatának. Ráadásul még a színvakok, illetve a színekre kevésbé érzékenyek számára is egyértelművé tette, hogy linkeket látnak egy webes szövegben. Amire még egy eltérő színű link sem volt képes.

Negatív hatások a felhasználói élményre

Mindez azonban nem jelenti azt, hogy ne érhetné kritika az aláhúzásokat a linkeknél. Különösen, ha UX-ről van szó. 2014-ben egy történelmi lépéssel, maga a Google is ejtette az aláhúzást a linkeknél. Jon Wiley, vezető designer szerint az aláhúzás elhagyása javítja az olvashatóságot, és egy letisztultabb megjelenést ad a találati oldalnak. Ha ez valakinek még nem lenne elég, akkor érdemes tudni, hogy a webdesignben konzervatívnak tekinthető Nielsen Norman Group is elhagyta már az aláhúzásokat a linkeknél.

A Google kijelentése azzal kapcsolatban, hogy az aláhúzás elhagyása javítja az olvashatóságot, azt is jelenti, hogy az aláhúzás rossz hatással van a használhatóságra és az általános felhasználói élményre. Ugyanezt állapította meg a Hamburgi Egyetem 2003-ban, amikor jelezték, hogy az olvashatóság szempontjából az aláhúzott linkek teljesítettek a legrosszabbul.

Az aláhúzás tehát egy komoly kompromisszum a webdesignban, amit a legtöbben ma már nem vállalnak be. Ha megnézzük a most készülő weboldalakat, nem nagyon találunk közöttük olyat, ahol aláhúzással jelölnék a linkeket. De akkor mivel pótolhatjuk az aláhúzás funkcióját, úgy hogy a megoldás hatékony is maradjon? Azaz hogyan, milyen egyértelmű jelzésekkel hozhatjuk tudtára a felhasználóknak, hogy kattintható elemekkel állnak szembe?

Milyen tényezők működnek közre egy kattintható elem jelzésében?

Azt, hogy mi néz ki kattintható elemnek egy weboldalon, a körülötte lévő design, az ahhoz való viszony határozza meg. Alapvetően tehát két dologtól függ: az eltéréstől és a változástól. Ez a Hipper Element szerzőjének, Joel Marshnak a megfogalmazása, melyet bővebben ki is fejtett.

Eltérés

Amikor megtervezed a weboldalad, akkor annak van egy stílusa. A szövegnek például van színe és a betűknek méretei. A tartalmat elhelyezheted dobozokban, meghatározod az egyes mezők és a háttér színeit, hogy strukturáld a weboldal felépítését. A design részletei most nem számítanak, egyvalami azonban igen.

A kattintható dolgoknak eltérőnek kell lenniük a többi elemtől valamilyen módon. Kicsit különállónak. Ha például a szöveged fekete, akkor a linkek eltérő színt kapnak. Nem igazán számít, hogy milyen színt választasz, amíg a színeltérés arra utal, hogy a link kattintható. Vagy esetleg használhatsz aláhúzást, mint a hagyományos linkeknél, egészen addig, amíg semmi mást nem húzol alá a szövegedben, csak a linkeket.

Ez az oka annak, hogy a nem működő gombok (amelyek nem kattinthatóak, de bármikor azzá tehetőek) általában szürke színűek és “vizuálisan csendesek”. Mikor van erre a megoldásra szükség?

Képzelj el egy gombot, ami csak akkor aktiválódik, amikor kitöltöd egy űrlap valamely mezőjét! Ha ez megtörténik, akkor a gomb kattinthatóvá válik. Ha a gomb szürke és unalmas, akkor egyszerűen beleolvad a háttérbe. Nem néz ki kattinthatónak. Nincs túl nagy különbség a gomb és a design többi része között, vagyis tapasztalatból tudod, hogy nem kattintható. Amikor az űrlapmező kitöltésre kerül, a gomb hirtelen színes lesz, kialakul a kontraszt és mindjárt élőnek fog tűnni a design több részéhez képest. Ekkor már tudod, hogy kattintható az elem.

Változás

A másik fontos dolog a kattintható megjelenés szempontjából az, hogy a felhasználók általában valamilyen reakcióra számítanak azoktól a dolgoktól, melyek interakcióra képesek és amelyek fölött éppen elhaladnak az egérrel, vagy megérintik őket az ujjukkal. Ha kapcsolatba lépünk egy kattintható, mozgatható vagy csúsztatható elemmel a kijelzőn, és az az elem világosabbá válik vagy megváltoztatja a színét, akkor tudjuk, hogy mi okoztuk a változást.

A UX-ben ezt úgy hívják, hogy felhasználói visszajelzés. A felhasználó tesz valamit és kap egy visszajelzést, így tudja, hogy a dolog működik. Az emberek így tanulnak. A pszichológusok pedig úgy hívják ezt a jelenséget, hogy kondicionálás.

Következetesség

Sok designer ezen a ponton még megjegyzi, hogy a következetesség is fontos a kattinthatóság szempontjából. Ez igaz, de érdemes egy kicsit kibontani. Hiszen minden kattintható dolognak ugyanazon a módon kellene kattinthatónak lennie, de nem ezen tulajdonság miatt jönnek rá az emberek, hogy kattintható egy elem. A következetesség csak segít nekik abban, hogy megtanulják, hogyan néznek ki a kattintható dolgok a weboldaladon. Arra edzed őket, hogy kattintsanak.

A szivárvány valamennyi színét használhatod arra, hogy jelezd egy elem kattinthatóságát egyazon designon belül egészen addig, amíg bármelyik szín is arra utal, hogy az kattintható. Ha viszont egy színes elem nem kattintható, akkor az zavart okoz. De ha minden rózsaszín, sárga, kék, zöld, piros és lila elem kattintható az oldaladon, akkor nincs gond. Hiszen a szín azt jelzi, hogy az elem kattintható.

Persze, minél kevesebb dolgot kell a felhasználónak megtanulnia ahhoz, hogy használni tudja a weboldalad, annál gyorsabban lesz képes megtanulni. A következetesség tehát egy hasznos szabály, mivel csökkenti a kattintható elemek stílusainak számát. Ráadásul, ha olyan stílust használsz, amely gyakran előfordul a weben, akkor gyorsabban rá fognak ezekre ismerni.

Tehát nem is elsősorban a korszerű, modern, akár flat design megjelenés miatt adódhatnak gondok egy weboldalon – melyet egyre könnyebben dekódolnak a felhasználók a folyamatos terjedés miatt -, sokkal inkább a konzisztencia hiánya okozhat problémákat. Vagyis amikor egy-egy kattintható elemet, színt, formát nem tökéletesen következetesen alkalmaznak a tervezők a teljes honlapon keresztül, hanem itt-ott összezavarják a felhasználókat.

Összefoglalva tehát: a kattintható elemek stílusának, színének különbözniük kell a webdesign többi elemének stílusától, és a kattintható elemnek reagálnia kell, azaz meg kell változnia, amikor a felhasználó interakcióba lép vele. Ezután már csak arra kell figyelned, hogy a kattintható elemek stílusainak számát a lehető legalacsonyabban tartsd, mert ez az, ami segít a felhasználóknak gyorsabban befogadni a weboldalad.

A gyakorlat: hogyan nézzen ki egy link?

Amikor a webdesignerek linkeket terveznek egy weboldalra, két megoldás közül választhatnak. Lehetőségük van arra, hogy a hagyományokra támaszkodjanak, és ezeket fejlesszék tovább, vagy pedig kipróbáljanak valami új megoldást. Ha nem akarunk túl messze mozdulni a konvencióktól, akkor módosíthatunk a linkek eredeti kék árnyalatán. De ha valami merészebbet akarunk, akkor jöhetnek a “kérésre” felbukkanó linkek, vagy más trükkök a színekkel.

Jakob Nielsen szerint, ha a link szövege színes, akkor nem feltétlenül van szükség arra, hogy aláhúzzuk, ugyanakkor az elengedhetetlen, hogy valamiképpen kihangsúlyozzuk. Alapvetően egy eltérő színnel.

Amikor kiválasztják a link színét a webdesignerek, akkor fontolóra kell venniük a kontraszt mértékét, és azt, hogy a felhasználók egy része nem látja jól a színeket. A linkeknek ideális esetben 3:1-es kontraszarányban kellene lenniük a fekete szöveghez és 4.5:1 kontrasztnak a fehér háttérhez. (Ezt a szabályt persze időnként feláldozzuk az esztétika vagy a márkázás oltárán.)

A designereknek emellett még arra is figyelniük kell, hogy a színeket gyengébben látók is felismerjék a linkeket egy szövegben, vagyis a linkeknél számukra is egyértelműen láthatónak kell lennie annak – aláhúzás nélkül -, hogy linkekről van szó. Vannak persze más variációk is, melyekkel lehet kísérletezni az eltérő szövegszínen is túl: így például, hogy egy színes hátteret teszünk a linkek mögé, de lejjebb láthatók más megoldások is. Hogy ezeknek mennyire jó a használhatóságuk, az más kérdés.

linkek

A szabályok

De lássuk akkor, hogy a Nielsen Norman Group szerint mikor, hogyan ajánlatos kattinthatóként bemutatni egy linket a gyakorlatban!

  • Még mindig a kék a legbiztonságosabb jelzés, más szín csak akkor működik jól, ha világosan eltér a szöveg színétől. Ezért, ha nincs valami különös indok, design-megfontolás más szín használata mellett, még mindig érdemes kékkel jelölni a linkeket.
  • A linkek pozíciója meghatározza, hogy szükséges-e aláhúzni őket, vagy sem. Egy navigációs menüben és listáknál egyértelmű, hogy linkről van szó, így felesleges az aláhúzás.
  • Azt is is érdemes megvizsgálni, hogy a színvakok meg tudják-e különböztetni a linket a sima szövegtől.
  • A statikus elemeket viszont semmiképpen nem szabad olyan színnel megjeleníteni, mint a linkeket.
  • Ahogy kék színt vagy aláhúzást sem szabad használni nem klikkelhető elemeknél.
  • De bármelyik megoldást válasszuk, azt következetesen kell alkalmazni végig az egész weboldalon.
Lehet gondolkodni: természetesen a kékkel írt szöveg nem kattintható, viszont a kattintható képeknél semmi nem utal erre.

Lehet gondolkodni: természetesen a kékkel írt szöveg nem kattintható, viszont a kattintható képeknél semmi nem utal a kattinthatóságra

További tippek:

  • Használj eltérő színt a már kattintott linkeknél!
  • Írjál egyéni üzeneteket a linkjeid horgonyszövegeiben, melyek előre jelzik a felhasználónak, hogy hova irányítod. (Kerüld az olyan semmitmondó szövegeket, mint a “kattints ide”!)
  • Legyenek a linkjeid rövidek, 3-5 szó közöttiek!

A hover csak kiegészítés, de nem megoldás

Mint az korábban már említettük, hoverrel is láthatóvá tehetjük a linket, ez azonban önmagában nem elegendő. Ilyenkor történik “felhasználói kérésre” a link felbukkanása. Ehhez viszont az kell, hogy a felhasználó a link fölé vigye az egérmutatót. Ami azért jelenthet gondot, mert egészen addig, amíg fölé nem mozdul az egérmutató, semmilyen vizuális jel nem utal arra, hogy linkről lenne szó.

Az eltérő szín, illetve aláhúzás nélkül az emberek arra kényszerülnek, hogy keresgéljék a linkeket az egérmutatóval, ami kevesebb interakcióhoz vezet. Hoa Loranger, az NNGroup részéről úgy vélekedett, hogy a felhasználót soha nem szabad arra kényszeríteni, hogy kutasson a linkek után, mert az erőfeszítést igényel a részéről, és így nem is fogja hosszú ideig csinálni.

Ezért a leggyakoribb megoldás, hogy egy eltérő színnel eltérő megjelenést adnak egy linknek, majd amikor az egérmutató fölé mozdul, akkor az egy interakcióval jelzi a felhasználónak, hogy ténylegesen linkről van szó. A hover használatánál azonban felmerül az érintőképernyőkkel kapcsolatos probléma is, mégpedig, hogy mobilon nem működik a hover, mivel nincs egérmutató.

Kattinthatóság jelzése gombok esetén

  • A gombok próbáljanak hasonlítani a valódi gombokra. Ezért még akkor is érdemes megtartani a négyzet alakot (javasolt az NNG szerint lekerekített sarkokkal), ha a háromdimenziós megjelenésről a korszerű kinézet érdekében már lemondtunk.
  • Ugyanakkor fontos, hogy a nem klikkelhető elemek semmiképpen ne nézzenek ki úgy, mintha gombok lennének.
  • Figyeljünk a tartalmi hierarchiára az oldalon belül, és kerüljük a különféle méretű színes boxokat, hiszen így az emberek még nehezebben találják meg a kattintható linkeket a sok hasonló megjelenésű elem között.
Egy egyre népszerűbb és egyébként kattintható ghost buttont látunk a felső sarokban “products” felirattal? Ami meglepő, hogy nem, pedig pont úgy néz ki.

Egy egyre népszerűbb és egyébként kattintható ghost buttont látunk a felső sarokban “products” felirattal? Ami meglepő, hogy nem, pedig pont úgy néz ki.

Képek, ikonok

  • A kisebb méretű képek mindig jelenjenek meg nagyobb méretben, ha rájuk kattintanak.
  • Az összes olyan elemet (kép, ikon és a hozzájuk kapcsolódó szöveg), melyek összefüggésben vannak egymással, tegyük kattinthatóvá.
  • Amennyiben ikont használunk linkként, akkor azt egyértelműen azonosíthatóvá kell tenni. Hacsak nem egy olyan ikonról van szó, melynek esetében már megszokottá vált a kattinthatóság, érdemes szöveggel is jelezni, hogy klikkelhető elemről van szó. Például a már elterjedt nyíl is kattinthatóságra utal, ugyanakkor érdemes mértékkel használni, mert még nem vált sztenderddé és sokak számára nehéz azonosítani egy aprócska nyilat.
A jobb oldalon egyértelmű, hogy linkekről van szó, de a bal oldalon a kép alatt? Pedig azok is linkek, és zavart okoznak a következetlenség miatt

A jobb oldalon egyértelmű, hogy linkekről van szó, de a bal oldalon a kép alatt? Pedig azok is linkek, és zavart okoznak a következetlenség miatt

Főleg írok. Főleg blogot és közösségi médiát, de tágabb perspektívában: online marketing, úgyhogy van benne bőven SEO, laza AdWords, webdesign-okoskodás, és még ami belefér.