Keresés
Header Háttér

Webshark Blog

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

2017-09-130 komment

Hogyan nézzen ki egy link a weboldaladon? Mitől látszik kattinthatónak? (Frissítve: 2021.11.14.)

Tartalomjegyzék
Bővített tartalomjegyzék

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. De mi az, ami egyértelműen jelzi a kattinthatóságot a felhasználók számára? (Frissítés, 2021.11.14. – Egy új fejezettel bővítettünk:
Egy új vagy a már megnyitott lapon nyíljon meg a linkünk?)

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

Frissítés, 2021.11.14.:

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.

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.

Comments are closed.