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).

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? Lássuk!

A Mozilla blogja ásta elő nemrég a választ az alcímben feltett kérdésre, és kutatásuk során azt találták, hogy régen sem voltak mindig kékek és aláhúzottak a linkek.

Például az első Windowsban, az 1.0-ban, mely 1985-ben jelent meg, még feketék voltak a linkek, igaz, aláhúzták őket.

De ugyanígy, az Apple sem használt még ekkoriban kék linkeket. Az általa kitalált HyperCard nevű program 1987-ben már linkeket használt az oldalak között, de ezek feketék voltak.

Sőt, még az első internetes böngésző is, melyet Tim Berners-Lee alkotott 1987-ben, szintén teljesen fekete-fehér volt, kék linkek nélkül, ugyanakkor az aláhúzások már itt is megjelentek.

A kék szín először a Windows 3.1-nél jelent meg 1992-ben úgy, hogy az aktív állapotot jelölte azoknál az elemeknél, melyekre a felhasználó rákattintott: például mappákra, ikonokra. Ez tehát még nem a kék link megjelenése, de mutatja a közeledést hozzá.

Sokat aztán már nem kellett várni a kék link megjelenésére, ugyanis, amikor 1993-ban felbukkant a Mosaic böngésző 0.13-as verziója, ott a leírásban már olvasható, hogy a linkek kéken, aláhúzással jelennek meg, illetve, ha a felhasználók kattintottak rájuk, akkor lilává válnak.

Kép sajnos nincs erről, ugyanakkor a Distilled blognak sikerült szereznie egyet az 1993-as Cello Beta böngészőről, ami így nézett ki:

Egyetlen kis hiba van ezzel, hogy itt nem a linkek voltak kékek és aláhúzottak, hanem a címsorok. Mindenesetre a szintén 1993-ban megjelent Mosaic Ports esetében már látható az aláhúzott kék link:

Az 1994-ben megjelent Netscape böngészőben is ugyanaz a vizuális nyelv jelenik meg, mint a Mosaicnál, így szürke a háttér, a linkek pedig kékek és aláhúzottak.

1995-ben aztán a Microsoft is előállt az Internet Explorerrel, ahol ugyanezzel a megjelenéssel találkozunk:

Az Internet Explorer a Windows 95-tel együtt érkezett, beépítve. És itt vette kezdetét a nagy böngészőháború is, először a Netscape és az IE között.

Mindezek alapján felmerülhet a kérdés, hogy mi történt 1993-ban, amiért kék linkek jelentek meg. Biztos válasz nincs, ugyanakkor akad néhány elmélet ezzel kapcsolatban.

Az egyik oka, amit gyakran hallani, a színkontraszt. Ez azonban nem igaz, mert ha megnézzük a klasszikus kék szín és a fekete szövegszín közötti kontrasztarányt, akkor 2,3:1-et kapunk. Ez pedig nem jelent igazán jelentős kontrasztot.

Valószínűbb, hogy a Mosaic és a Cello is felült ugyanarra a trendre, mely a felhasználói felületeket akkor uralta. A Windows 3.1 ugyanis néhány hónappal korábban jelent meg és a linkeknél is alkalmazott kék színt használta a kijelölt, aktív elemeknél. Egészen addig (1985-től) a linkek feketék és aláhúzottak voltak, szintén a Microsoft operációs rendszere az 1 miatt.

Hozzájárulhatott még a kék linkek megjelenéséhez az is, hogy ekkor kezdtek terjedni a színes monitorok, melyeken jól mutatott egy kék színű link az addigi fekete aláhúzott helyett. Aztán amikor a Netscape és az Internet Explorer megjelent, már a meghonosodott a kék link a weben.

Milyen előnyei vannak az aláhúzott kék linkeknek?

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.

És milyen hátrányai?

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?

A megszokás

A 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.

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!

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.

Az 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.

A 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.

A 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.

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.
• 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!

További tippek

Letölthető elemek linkjei

Vannak olyan linkek, melyek letölthető elemekre mutatnak, például egy pdf-re vagy bármilyen dokumentumra, képre, videóra, stb. Ezeket egy kicsit eltérően kell kezelni. Mert amellett, hogy a szövegnek értelmesnek kell lennie, arról is tájékoztatnia kell a felhasználókat, hogy milyen fájlformátumról és mekkora méretű fájlról van szó.

Mikor használj inkább gombot link helyett?

Egy weboldalon nem minden link egyforma fontosságú. Előfordulhat, hogy valamelyik linked úgynevezett elsődleges link. Ha az elsődleges linkre szeretnéd felhívni az emberek figyelmét, akkor azt megjelenítheted gombként is. Tipikusan ilyen lehet egy letöltés, egy feliratkozás, vagy valamilyen vásárlás.

Ha technikai korlát miatt a szövegben nem tudsz gombot elhelyezni, akkor azzal emelheted ki a linked, hogy egy külön sorba helyezed, alatta és fölötte kihagysz egy-egy sort, vagyis a nagyobb whitespace-szel hívhatod fel rá a figyelmet, emellett a nagyobb kontraszttal is kiemelheted.

Ezeknél a kiemelt linkeknél is figyelj arra, hogy értelmes legyen a szöveg, legfeljebb 4-5 szóból álljon. Mivel CTA-ról van szó, igével kezdődjön a szöveg.

Ha sok link kerülne egy rövid szövegbe

Ha egy szövegben minden mondatra jut egy link, az nem igazán jó megoldás, mert zsúfolt lesz, és az sem szerencsés, ha a link eleje még az egyik sorba kerül, míg a vége már egy másik elejére. Sok link esetében első körben érdemes átgondolni, hogy szükség van-e mindegyikre.

Ha igen, akkor valamiképpen próbáld meg egy csoportba rendezni őket, például úgy, hogy egy külön listát készítesz a linkek a szöveg vagy szövegrész után, de elhelyezheted a bekezdés mellé is a linkcsoportot, de akár egy külön fejezetbe, vagyis egy alcím alá is felsorakoztathatod a linkeket.

Kell a jó kontraszt!

Korábban már szó volt a kontrasztról: vagyis, hogy nem elegendő utalás a linkre egy eltérő szín használata. Akiknek látási problémáik vannak, azok számára nem észlelhető eltérőként a fekete helyett kékkel írt link színe. Az alapvető megoldás az aláhúzás, ami ugyanakkor rosszabb olvashatóságot eredményez. Emellett még a vastag betűk használata is jó lehet.

A kontrasztot érdemes ellenőrizni, és az úgynevezett AA szintet elérni, mely a link és a háttér viszonylatában 4,5:1 a normál betűméretnél, míg 3:1 a nagyobb betűméreteknél.

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

Mint azt 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.

Képek, ikonok, mint linkek

• 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.

Milyen legyen a linked szövege?

Ha linkek szövegéről van szó, akkor elkezdünk SEO-s vizekre evezni, de inkább megpróbáljuk azt áttekinteni, hogy felhasználói élmény szempontjából mi lenne az optimális megoldás (annál is inkább, mivel igen közel esik ahhoz, amit a Google is látni szeretne, hiszen a felhasználó számára is az első).

Egy jobb link jobb felhasználói élményt jelent. Ha több kattintást szeretnél kapni egy linkre, akkor oda kell figyelni a vizuális megjelenése mellett a szövegére is.

Sokan esnek bele abba a hibába, hogy még mindig a „kattints ide!” vagy egyéb semmitmondó, de feltételezésük szerint cselekvésre ösztönző szöveget adnak a linkjüknek. A helyzet azonban az, hogy ezek „varázsa” mára erősen elhalványult, és semmilyen szempontból nem működnek linkszövegként.

Miért? Mert a „kattints ide” nem árul el semmit sem a felhasználónak, sem a keresőmotoroknak arról, hogy mire számíthatnak, ha rákattintanak a linkre. Egy semmitmondó link elbizonytalanítja a felhasználót, megakasztja az éppen zajló folyamatot, zavart okoz.

Legyen leíró jellegű

Kezdjük ott, hogy a felhasználók számára az a jó link, ami érthető. Ha semmitmondó vagy zűrzavaros a szövege, az csak gyanakvásra adhat okot. Az egyik probléma az, hogy nem derül ki belőle semmi – a felhasználónak újra kell olvasnia az előtte álló szöveget, hogy valami támpontot kapjon a link céljáról -, hanem azért is, mert a kis méret miatt nehezebben kattintható.

Arról nem beszélve, hogy a linkekhez kapcsolódó szöveg, vagyis a horgonyszöveg, a Google számára is jelentéssel bír, rangsorolási tényezőként működik. Ennek szabályaira itt nem térünk ki, a rangsorolási tényezőkről szóló anyagunkban írtunk róla bővebben. A Google azt javasolja, hogy a szövegekben szereplő linkek szövege segítsen a felhasználó tájékoztatásában. Tegye világossá számára, hogy mi következik a kattintás után.

Egy link szövege akkor lesz jó, ha önmagában, a szövegkörnyezetből kiemelve is van értelme: megjelenik benne a témára való utalás, illetve az is, hogy rá kattintva mivel találkozik a felhasználó.

Kezdd a kulcsszóval!

Habár a kulcsszó kérdése részben megint keresőoptimalizálási probléma lehet, és ebből a szempontból érdemes tudni, hogy a Google nem szereti a túloptimalizált (azaz az oldal kulcsszavaival telezsúfolt) horgonyszövegeket, ugyanakkor felhasználói szempontból célszerű a kapcsolódó kulcsszavakkal indítani. Ez megkönnyíti az emberek dolgát.

Amikor ugyanis átfutják a látogatók a weboldalad – és mint tudjuk, a web a weboldalak átfutásáról szól, mint azt ebben a blogbejegyzésünkben már áttekintettük -, akkor leginkább az elejére figyelnek. Legalábbis a Nielsen Norman Group ezt állapította meg, amikor azt tapasztalta, hogy a felhasználók 85 százaléka egy link első 11 karakterét látva képes volt megjósolni, hogy hová mutat.

Passzoljon a linkelt oldal témájához!

Sőt, a legbiztosabb az, ha a link horgonyszövege a linkelt oldal címével azonos, vagy legalábbis összhangban van vele. Persze, előfordult, hogy a linkelt oldal címe nem illeszkedik a szövegedbe – akár csak azért, mert túl hosszú -, de ilyenkor is érdemes a minél nagyobb azonosságra törekedni.

Ennek oka, hogy amikor a felhasználó rákattint a linkre a link horgonyszövege alapján, akkor egy olyan oldalra jut, ahol ugyanazt a szöveget olvassa címsorként, vagyis egyből tudja, hogy jó helyen jár.

A mondatvégi írásjeleket ne linkeld!

A mondatok végén mindig áll valamilyen írásjel. Ha egy egész mondatot linkelsz, vagy a mondat végén álló szavakat, akkor se kerüljön bele a link horgonyszövegébe a mondatvégi írásjel. Habár problémát nem okoz, ez a bevett gyakorlat, és furcsán néz ki, ha a mondatvégi pont is a link szövegének része. Ugyanakkor bekerülhet a linkszövegbe vessző, zárójel, stb., tehát olyan írásjel, mely a mondatban található, de a legjobb az, ha a link horgonyszövege csak szavakból áll össze.

Használhatsz csupasz linkeket is

Nem teljesen elvetendő az sem, hogy horgonyszöveg helyett úgynevezett „csupasz linket” használsz (mint pl. https://webshark.hu), de ilyenkor az URL szövegének érhetőnek kell lennie. Ha túl hosszú, vagy értelmetlen karakterek sora, akkor arra az emberek nem szívesen kattintanak. És azt is hozzá kell tenni, hogy horgonyszöveg hiányában a Google számára egy jelzés kiesik.

Egy új vagy a már megnyitott lapon nyíljon meg a linkünk?

A Nielsen Norman Group a választ a megszokott alapossággal adta meg, és mint megállapította, érdemes alaposan megvizsgálni előbb a kontextust, majd a folyamatban lévő feladatot és a következő lépést, mielőtt valamelyik megoldás mellett döntetnénk.

Érvek az új ablakos vagy lapos megnyitás ellen

Az NNG 1999-ben úgy vélekedett, hogy jobb, ha a linkek nem egy új böngészőablakban nyílnak meg. Akkoriban még nem voltak mobilok, illetve lapok a böngészőablakokon belül, de úgy gondolják, hogy a kijelentés továbbra is érvényes.

• A több megnyitott ablak vagy lap növeli a felhasználó információs terének zsúfoltságát és nehezíti annak kezelését.
• Az új ablakok vagy lapok eltérítik a felhasználót, de sokan nem is észlelik, hogy egy új ablak vagy lap nyílt meg, ha az a háttérben történik. Ez a probléma fokozottan jelentkezik mobilon, ahol viszont sokszor a régi lap válik láthatatlanná.
• A kevésbé gyakorlott felhasználóknak nehézséget okoz a több ablak vagy lap kezelése, különösen mobilon.
• Az új ablak vagy lap megnyitása miatt nem használható a “Vissza” gomb arra, hogy az előző oldalra lépjen vissza a felhasználó, ezáltal megnehezíti a visszatérést a korábban olvasott tartalomhoz.
• Az új ablakok vagy lapok problémát okozhatnak a gyengén látó vagy vak felhasználók számára.

Érvek az új lapon vagy ablakban megnyitás mellett

Az egyik legfontosabb ok, ami miatt megéri új lapon megnyitásra állítani egy linket akkor merül fel, ha a felhasználónak az új lap tartalmára is szüksége van annak érdekében, hogy az előző lapon megkezdett feladatot elvégezze.

Ilyenkor gyakorlatilag kettő vagy akár több oldal párhuzamos nyitva tartására is szükség lehet annak érdekében, hogy végrehajtsa a feladatát. Erre példa, ha mondjuk valaki kutat egy témában, és miközben írja a jegyzeteit, egyszerre több forrást is elemez. Ilyen esetben egyáltalán nem hatékony, ha a felhasználónak újra és újra be kell töltenie korábban megnyitott lapokat.

Emellett akkor is célszerű lehet új lapon megnyitni egy linket, ha az a link egy eltérő tartalomtípusra mutat. Ez persze feltételezi azt, hogy a felhasználó mindig ugyanazt teszi egy bizonyos fájlformátummal, ami viszont nem állja meg a helyét.

Tehát például egyik esetben arra van szüksége, hogy kinyomtasson egy PDF-et, míg egy másik esetben mondjuk egy részletes használati utasításra érkezik, amit akár rá is lehet nyitni az előző oldalra. Előbbinél hasznos, ha egy új lapon nyílik meg a PDF, ugyanakkor a második eset már bonyolultabb.

Végül pedig talán a legfontosabb érv, hogy ha új lapon nyitja meg a linket a felhasználó, akkor a mi oldalunk nyitva marad a böngészőjében. Így egy hosszú távú emlékeztetőként látható lesz a lap, egészen addig, amíg be nem zárja. Ez persze nehezíti a felhasználó információ-kezelését, miközben nincs garancia arra, hogy valóban visszatér az oldalunkra. Az NNG szerint még az is elképzelhető, hogy a felhasználók valami hátsó szándékot feltételeznek amögött, hogy mi új lapon nyittatjuk meg a linket, ezért kevésbé fognak bízni az oldalunkban.

A lényeg tehát az, hogy általánosságban nem lehet kijelenteni, hogy egyik vagy másik megoldás a jobb, mert a helyzettől függ.

Mit kell fontolóra venni?

Az NNG felhasználói kutatása alapján azt állapította meg, hogy a felhasználók reakciója aszerint változik az új lapon történő link-megnyitásra, hogy

• Mi a kontextus: azokat a felhasználókat, akik nincsenek épp nyomás alatt egy feladat miatt, nem igazán zavarja, ha új ablakban nyílik meg a link.
• Milyen eszközt használ: a mobilos felhasználókat jobban idegesíti, ha új lapon nyílik meg egy link, mivel ott körülményesebb a visszanavigálás, ha nem tudják használni a “Vissza” gombot.
• Mi a feladat: akadnak olyan feladatok, amikor hasznos, ha a tartalom új lapon nyílik meg. Ilyen például, ha a felhasználó össze akarja hasonlítani a tartalmakat, vagy össze akar dolgozni információkat.

Mikor érdemes mindenképpen elkerülni az új lapon történő megnyitást?

Ugyanakkor vannak olyan helyzetek, amikor a felhasználók biztosan nem örülnek annak, ha a linkre kattintva egy tartalom új lapon vagy ablakban nyílik meg. Ilyen például, amikor gyorsan át akarnak futni egy új oldalt, majd visszatérnének az eredeti oldalra, hogy folytassák az olvasást.

Szintén nem hasznos, ha több lépéses munkafolyamatról van szó, és minden egyes lépés egy új lapon nyílik meg.

De akkor sem szerencsés, ha már több ablak vagy lap meg van nyitva a felhasználónál, és mi rányitunk egy újat. Ilyenkor egy idő után idegesek lesznek, ha mindig újabb és újabb lapok nyílnak, így egy idő után megállnak, hogy kitakarítsák a korábban megnyitott lapokat.

Fontos tehát tisztában lenni a helyzettel, a feladattal, a környezettel, amikor arról döntünk, hogy egy URL-ünk azonos vagy új lapon nyíljon-e meg. Ugyanakkor elég sok a variáció, így nem feltétlenül lehet tudni, hogy melyik megoldás lenne hasznosabb a felhasználó számára.

Mindenesetre az NNG szerint új lapon történő megnyitásnál célszerű egy jelzéssel, valamilyen speciális ikonnal felhívni a felhasználó figyelmét még kattintás előtt arra, hogy új lapon fog megnyílni a tartalom.

Amit még érdemes megjegyezni, hogy gyakran idegesíti a felhasználókat az új lap megnyílásánál, ha egy PDF vagy bármely más nem-HTML oldal jelenik meg. Nem szeretik ugyanis a weben ezeket a fájformátumokat, mivel egy teljesen más felhasználói élményt kínálnak, mint a normál weboldalak.

Azon túl azonban, hogy a tartalmainkat HTML-formában tesszük elérhetővé, ha mégis muszáj például PDF-et linkelni, akkor érdemes úgynevezett HTML-átjáró oldalakat használni ezek letöltésére. Tehát ilyenkor a linkre kattintva közvetlenül letöltésre kerül a fájl a megnyitás helyett. Ez persze megint egy olyan dolog, melynél a felhasználó helyzete adja meg a jó megoldást.

Desktopon például jobb megoldás, ha a PDF-dokumentum egyszerűen egy új lapon nyílik meg a böngészőben. Általában az embereknek, amikor PDF-fel van dolguk, akkor természetesebben használják a bezárás gombot, mint a visszalépést. Ez pedig akkor működik, ha a PDF-et új ablakban nyitottuk meg.

Összességében tehát azt lehet mondani, hogy alaphelyzetként érdemes a linkeket úgy beállítani, hogy azok azonos ablakban vagy lapon nyíljanak meg. Ugyanakkor, ha a felhasználó számára adott helyzetben vagy feladatnál előnyösebb az új lapon történő megnyitás, akkor azt kell választani. Ezt a döntést önmagában nem indokolhatja a link típusa vagy a tartalom. Ezért leginkább csak felhasználói tesztek, vizsgálatok után lehet kijelenteni, hogy az új lapon való megnyitás hasznosabb a felhasználók számára.

The post Hogyan nézzen ki egy link a weboldaladon? (Frissítve: 2022.02.17.) appeared first on Webshark Blog.