tento blogísek je úplně na changu

Není odkaz jako odkaz

21. září 2005 v 20:18 | Timy |  použitelnost na webu
Dnešní článek bude věnovám odkazům - jak psát, aby byly dobře vidět a přitom nevadily uživateli ve čtení. Pryč jsou totiž doby, kdy odkaz byl v podobě klikněte zde. Takovýto odkaz je nejen proti použitelnosti, ale také proti přístupnosti.

I. Podtrhávejte všechny odkazy a nepodtrhávejte nic, co není odkazem. Už to, že tag {a} má od přírody nastavené nějaké podtržení znamená, že to asi nějaký smysl bude mít. Uživatel je zvyklý, že odkaz je podtrhnutý, pokud vidí podtrhnutý text, řekne si, aha tohle bude odkaz. Pokud vidí pouze nějak barevně odlišený text, řekne si, hmm, tohle je nějaký výrazný text, možná to je taky odkaz, zkusím to.

Sami vidíte ten rozdíl. Podtrhnutý a barevně odlišený text je uživateli vnímán bez pochybností jako odkaz. Naproti tomu, když vidí nějaký text, který je odlišen jinak než podtrhnutím (pouze barevně, tučné písmo, kurzíva apod.), budou chvíli váhat, jestli to je odkaz nebo není. Většinou to zjistí tak, že nad text najedou kurzorem myši a když se objeví ona pacička, zajásají. Opravdu nepodtrhávejte nic než odkaz, ani pokud by se jednalo o nadpis či něco opravdu významného. Důležitost nadpisu bývá dána v jeho velikosti a odsazením od textu a pro vyznačení důležitého textu zase slouží tagy jako {strong} nebo {em}.

Častým argumentem proti podtrženým odkazům bývá, že to není estetické. Osobně se přiznám, že jsem neviděl žádný web, na kterém by se mi podtržený odkaz hnusil. Ale budiž. Pokud tedy skutečně nechcete podtržené odkazy, vyberte si jiný způsob, jak je výrazně odlišit od okolního textu. Nejlépe pak ještě přidat nějaký symbol za odkaz, jako má třeba Pixy.

Navíc odkaz, který je odlišen pouze barevně má dvě zásadní negativa - designer může zvolit malou barevnou odlišnost od okolního textu (špatný kontrast) a odkaz se tak stane neviditelný a neviditelný odkaz = žádný odkaz. No a za druhé - uživatel si může myslet, že to je pouze zvýrazněný (nebo též důležitý) text, ne odkaz.

Samozřejmě toto pravidlo neplatí tam, kde je zcela evidentní, že se jedná o odkaz. Typický příklad je menu. Tam odkaz pochopitelně podtržený být nemusí, zde by to už opravdu vypadalo neesteticky. Běžnému uživateli je jasné, že v menu najde odkazy.

II. Z textu odkazu má být jasné, kam odkaz směřuje, takže odkazy typu klikněte zde jsou opravdu nepřijatelné a to hned z několika důvodů. Protože slovo zde je poněkud malé, dost špatně se na něj kliká. Z tohoto pohledu jsou mnohem lepší větší (delší) odkazy.

Dále pokud se podíváte na text odkazu -
zde - poznáte, kam odkaz vede? Vede na stránku kontakty nebo na freepornxxx? To nezjistíte. Pokud by byl text takovýto - pokud máte nějaké dotazy, kontaktuje nás, je zcela jasné, kam odkaz vede, i pokud by text - kontaktuje nás - stál sám o sobě. Samozřejmě můžete namítnout, že i takovýto odkaz může vést na freepornxxx, ale to už je pak otázka důvěryhodnosti serveru, ne použitelnosti:-)

Poslední důvod je relativně jednoduchý a prostý - představte si, že si stránku vytisknete a všude tam bude text klikněte zde. Přinejmenším to bude vypadat dost blbě. Takže s tím souvisí další pravidlo -

III. Text odkazu má být součástí okolního textu, tudíž kdybyste z toho odkazu udělali normální text, nemělo by být poznat, že se dříve jednalo o odkaz. Odkaz by prostě neměl nijak razit z kontextu, měl by zapadnout mezi okolní text jako poslední díl skládanky. Příklad:

...pokud jste postupovali správně, váš pracně vytvořený objekt se bude pohybovat za kurzorem. Výsledek si můžete prohlédnout. To ale není všechno, můžeme ještě...

Zde odkaz není součástí textu, kdyby ten odkaz nebyl funkční, nedával by text smysl. Kde si mám ten výsledek prohlédnout? Nebylo by jednodušší dát odkaz takto?

...pokud jste postupovali správně, váš pracně vytvořený objekt se bude pohybovat za kurzorem. To ale není všechno, můžeme ještě...

Odkaz je nyní logičtěji vložený, zapadá do okolního textu a navíc je zřetelnější už jen ze samotného textu, kam daný odkaz vede. Samozřejmě ne vždy to jde zapsat odkaz tak, aby zcela zapadl do okolního textu a ještě bylo na sto procent jasné, kam vede. I z textu - pohybovat za kurzorem - není úplně jasné, kam odkaz povede, ale je to pořád jasnější, než z textu - můžete prohlédnout.


IV. U obrázkových odkazů by mělo být jasné, že se na ně dá kliknout. Nemyslím zrovna různé obrázkové tlačítka nebo (nedejbože) obrázková menu, ale různé "polodekorační" obrázky - třeba krásná rozevřená kniha, která je ve skutečnosti odkazem na knižní novinky.

Zviditelnit textové odkazy je jednoduché, stačí podtrhnout a změnit barvu písma a hned je to všem jasné, ale u obrázků je to horší. Pokud slouží obrázek jako odkaz, automaticky bývá ohraničen fialovým okrajem, který ale záhy autor nechá přes css zmizet, protože to vypadá děsně - bohužel to je ale pravda. Takže to chce jiný způsob.

Ideální je, pokud obrázek nemizí různě do ztracena, není po okrajích poloprůhledný apod. Vyjímku tvoří například logo, u kterého je naopak zvykem, že je klikací vždy. Také je velmi důležité, aby byl obrázek věcný, uživatel by si ho neměl splést s dekoračním obrázkem. Třeba na kniha.cz musí být všem návštěvníkům jasné, že obrázky knih zároveň slouží jako odkaz.

V. Používejte hover u odkazů, vypadá to lépe. Nemám pro to žádné logické vysvětlení, ale prostě uživatelé jsou zvyklý na to, že když přejedou kurzorem přes odkaz, něco to udělá. Většinou text změní barvu nebo se změní pozadí. Nepoužíval bych změnu z normálního písma na tučné, protože, obzvláště v normálním delším textu, se písmo zvětší a musí se přeskupit celý odstavec a vypadá to pak blbě.

VI. Stejné odkazy na stránce odlište různým titlem. Občas se stane, že použijete na stránce více stejných odkazů. Například odkaz - objednat - pokud je tento odkaz v rámci nějakého uceleného bloku, kde se popisuje jeden druh výrobku, většina uživatelů pochopí, který výrobek ten a ten odkaz objednává.

Jenže takovýto zápis odkazu není příliš přístupný pro různě hendikepované lidi, takže správně by měl odkaz obsahovat atribut title, který objasní znění odkazu. Takže by to vypadalo asi takto: {a href="vyrobek_xyz.php" title="objednat výrobek xyz"}objednat{/a}.

Atribut title můžete pochopitelně použít kdykoliv, když není zcela jasné, kam odkaz vede, nejenom když je na stránce vícero stejných odkazů.
 

Buď první, kdo ohodnotí tento článek.

Komentáře

1 SQi SQi | Web | 22. září 2005 v 17:47 | Reagovat

Určitě souhlas, někteří si s tím bohužel nelámou hlavu:-)

2 Charlie Charlie | Web | 22. září 2005 v 17:54 | Reagovat

Na jedné stránce jsem viděl odkazy, které vypadaly jako prostý text. Přišel jsem na to úplně náhodou, když jsem přes jeden přejel kurzorem.

Co se týče bodu tři, tak musím částečně nesouhlasit. Jde tu především o zvyklost. Lidé nejsou zvyklí na úplně logické odkazy. Podle mě je nejlepší něco mezi, třeba ten tvůj druhý příklad.

3 timy timy | E-mail | Web | 22. září 2005 v 21:19 | Reagovat

Charlie:

Na jedné stránce jsem viděl odkazy, které vypadaly jako prostý text. -- no tak to lol

Podle mě je nejlepší něco mezi -- asi máš pravdu, ono je to většinou stejně nemožné napasovat to přesně do textu a ještě ke všemu aby to dávalo smysl. Vlastně v tom bodu jde o to, aby někde uprostřed textu nebyla nějaká dvouřádková věta jenom vyloženě kvůli tomu odkazu.

SQi:

ano, bohužel... tak snad jsem jim alespoň trochu pomohl:-)

4 Charlie Charlie | Web | 23. září 2005 v 0:17 | Reagovat

no tak to lol - to každopádně

ono je to většinou stejně nemožné napasovat to přesně do textu - naprosto souhlasím

5 Smithg672 Smithg672 | E-mail | Web | 10. května 2014 v 18:16 | Reagovat

I like the helpful information you provide for your articles. Ill bookmark your blog and check again right here frequently. I am quite certain Ill be informed many new stuff proper right here! Best of luck for the next! kgddecekadgedded

6 Pharme249 Pharme249 | E-mail | Web | 11. května 2014 v 12:36 | Reagovat

Very nice site! <a href="http://opeyixa2.com/qovqyo/1.html">cheap goods</a>

7 Pharmb644 Pharmb644 | E-mail | Web | 11. května 2014 v 12:37 | Reagovat

Very nice site! cheap goods http://opeyixa2.com/qovqyo/4.html

8 Pharmb367 Pharmb367 | E-mail | Web | 11. května 2014 v 12:39 | Reagovat

Very nice site!

9 viagra viagra | E-mail | Web | 13. května 2014 v 8:44 | Reagovat

Hello!

10 Smithd320 Smithd320 | E-mail | Web | 24. června 2014 v 18:01 | Reagovat

Wow, awesome blog layout! How long have you been blogging fkakdcdkeegeeced

11 cialis_dosage cialis_dosage | E-mail | Web | 9. července 2015 v 23:06 | Reagovat

I am now not certain the place you're getting your info, however good topic. I needs to spend some time learning more or figuring out more. Thank you for magnificent info I was on the lookout for this information for my mission.

Nový komentář

Přihlásit se
  Ještě nemáte vlastní web? Můžete si jej zdarma založit na Blog.cz.
 

Aktuální články

Reklama