Nielsenových desať najväčších chýb webdesignu v roku 2005

Handmade weblog stručne spísal v slovenčine Top Ten Web Design Mistakes of 2005. Pokúsim sa to okomentovať tak, ako tomu rozumiem ja.

Nečitateľný text

Pod týmto rozumiem malé písmo, zle zvolené odstupy medzi riadkami (dlhší riadok vyžaduje väčšiu medzeru ale príliš veľká opäť poškodzuje čitateľnosť), zlý kontrast (napr. nevhodným pozadím), zle zvolený typ písma (napr. „ručne“ písané, kurzíva a pod.). Často je vzhľad textu najzanedbávanejšou oblasťou webdesignu a to aj u inak nápaditých stránok.

Neštandardné odkazy

Za najväčšiu chybu považujem iné vizuálne prevedenie odkazov ako je ich podčiarknutie a iná farba. Menšou chybou je napr. neodlišovanie už navštívených odkazov a nereagovanie na prechod myšou ponad odkaz. Z pravidla podčiarkovať odkazy by som ja osobne vybral ako výnimku odkazy, ktoré inak zdôrazňujú, že sú to aktívne prvky stránky. Vo väčšine prípadov ide teda o záložky, položky menu a iné vizuálne prvky, ktoré sú známe z iných aplikácií.
Častou chybou je odlíšenie odkazov púhou zmenou farby a hrubou chybou je dokonca v príbuznom spektre odtieňov ako okolitý text. Potrebu podčiarkovania odkazov zdôrazňujem najmä pri ich výskyte v súvislom texte, čo je napríklad text článku. Dôvodom prečo podčiarkovať je hlavne fakt, že práve podčiarkovanie je vizuálnym označením zaužívaným naprieč celým hypertextom na webe.
Nepodčiarkované odkazy sú proste výnimka a bolo by zrejme veľmi ťažke presadiť práve takúto zmenu zvyku.
Na druhú stranu je tiež chybou podčiarknutie napríklad celého odstavca textu, ktorý je zároveň odkazom. Tento problém sa rieši zvyčajne dvomi spôsobmi: odkaz sa urobí na konci odstavca ako „pokračovanie“ alebo sa proste nepodčiarkne ale v tom prípade je naozaj otázne ako púhym pohľadom čitateľ zistí, že ide o odkaz (pre tento účel si predstavte, že nemáte ani myš ani klávesnicu a pozeráte iba na monitor).

Nesprávne používanie Flashu

Flash použitý napríklad na položky menu a obecne na navigáciu pričom hodne často neexistuje náhrada pre prípad nefunkčnej podpory Flash prehliadača. Za chybu by som považoval aj použitie Flashu ako „intro“ stránku webu s tým známym „preskočiť intro“.

Obsah, ktorý nie je písaný s ohľadom na web

Rozvláčne texty plné výrazov používaných v odbornej „hantýrke“, špecializované skratky, prehnané používanie rovnakých spojení „To a to ponúka možnosti…“, „Naša firma poskytuje…“, vysvetľovanie pojmov ešte viac nejasnými spojeniami „výrobok podporuje šekenelizáciu, čo je vyšekenelizovanie odbetizátora vyanbulantu podporného zariadenia vyaktufikátora“. Texty bez odkazov – je to priam rúhanie, pokiaľ sa snaží autor textov postihnúť v dokumente všetky nuansy, a takto zbytočne odvádza pozornosť, pričom by mohol s úspechom využiť odkazy do „slovníka“, na samostatné stránky s dovysvetlením. Málokedy je súčasťou textu odkaz na podrobnejšiu problematiku.

Zlé vyhľadávanie

Používateľ v prvom momente potrebuje na vyhľadávanie jednu kolónku na napísanie hľadaného výrazu. Často je hľadanie znepríjemnené nutnosťou ponastavovať ďalšie parametre. U podrobnejšieho hľadania je priam potrebné zachovať nastavené parametre, aby si čitateľ mohol jemnejšie upravovať kritéria hľadania.

Nekompatibilita stránok v rôznych prehliadačoch

Písať stránky a netušiť nič aspoň o „veľkej trojke“ je znakom veľkej ignorancie :-) Zároveň podotýkam, že nie je vrcholne nutné zachovať vzhľad stránky na pixel presne. Ak sa náhodou šírka textu mierne zmení, nemusí to byť vôbec na závadu. Dôležitejšie je, aby napr. odstavec textu „nevybehol“ z prvku s ktorým tvori vizuálne jeden objekt.

Ťažkopádne formuláre

Najmenej príjemné sú rôzne roletkové zoznamy, zaškrtávacie boxy, prepínače. Vo formulároch by sa malo čo najmenej vizuálne „špekulovať“ a skôr premýšľať nad tým, či čitateľovi postačí najkratší možný čas na jeho pochopenie.

Chýbajúce kontaktné alebo iné firemné informácie

Na kontakty a informácie o firme sa zvykne vyhradiť samostatná stránka. Odkaz na ňu by mal byť na všetkých podstránkach na tom istom mieste a s rovnakým názvom. Vhodné je pri písaní textu odkazovať na túto stránku miesto uvedenia konkrétneho kontaktu (výnimky sa dajú pochopiť). Ak teda v popise produktu uvediete, že k produktu kontaktujte pána Mrkvičku na tel. č. 02 / 000 111 22, tak máte o problém viac – ak neskôr p. Mrkvička firmu opustí, musíte prácne dohľadávať kam všade v obsahu ste ho uviedli. Riešením je teda urobiť v texte iba odkaz na stránku s kontaktami alebo takéto špeciálne kontakty v texte riešiť menej „závislé“ na možných zmenách v budúcnosti.

Fixná šírka stránky

Fixná šírka vznikla proste z toho, že si grafik stránky nedokáže predstaviť stránku inak ako A4 leták a svoje programové vybavenie používa práve a iba takto. Je naozaj ťažké vymyslieť „grafiku“ vo Photoshope aj keď ja osobne si to viem predstaviť práve za pomoci vrstiev a neexportovaním „grafiky“ ako JPEG s jeho rozrezaním ale exportovaním jednotlivých vrstiev a „nasimulovanie“ vrstiev za pomoci CSS pri konštrukcií vzhľadu stránky.
Zároveň je veľkým mýtom, že fixná šírka stránky sa používa práve kvôli šírke textu „aby sa nerozťahoval donekonečna“. Šírka okna prehliadača je triválne meniteľná omnoho ľahšie ako snaha zmeniť si „zle“ navrhnutú stránku inými prostriedkami prehliadača. Mýty pokračujú aj ďalej – veľmi často zástanca fixnej šírky navrhne stránku nastavenú na ľavý okraj okna prehliadača pričom by mohol aspoň ju umiestniť na stred okna, čo trochu zmenší zlý dojem z takejto stránky. Pokračovaním tohto mýtu je však aj možnosť, že jednotlivé časti stránky môžu byť zložené z prvkov pevnej šírky ale „dekoračné“ prvky môžu byť fluidné. Takto môžete spraviť hlavičku stránky na celú šírku, text článku však obmedzíte na maximálnu povolenú šírku a pod.
Možností je veľa a práve tu je ešte nevyužitý potenciál zohratej dvojky grafika a CSS kodéra. Naozaj sa práve tu očakáva najväčšie množstvo veľmi neotrelých vizuálnych prevedení stránok, ktoré tu ešte neboli.

Nedostačné zväčšeniny obrázkov produktov najmä na stránkach internetových obchodov

No toto ma osobne vie hodne dožrať, keď klepnem na lupu a zobrazí sa mi ten istý obrázok ako je v náhľade. Eshop bez obrázkov je nepoužiteľný.
Dnes som dokonca bol na eshope českej firmy, ktorá ako náhľady použila nezmenšené obrazky upravené vlastnosťami WIDTH a HEIGHT. V zozname produktov bol pohyb neskutočne spomalený.
Nielsen zároveň popisuje potreby používateľov, ktoré sa s týmto zoznamom zhodujú práve v prvom bode, čiastočne s bodom 4., vo formulároch – priamo chcú jednoduché formuláre a praktická nutnosť – aktualizovanie stránok. Nič nevie naštvať ako „umretý“ eshop či komerčná stránka z ktorej až po pár minútach zistíte, že obsah bol aktuálny pred pár rokmi a firma tú stránku akosi „zabudla“.