5. október 2005 20.10 WEB
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".
Pokiaľ sa ti zdá, že tento článok by sa hodil do výberu zaujímavých stránok, tak ho 
pošli do vybrali.sme.sk
pošli do vybrali.sme.skKomentáre k obsahu príspevku:
Chcete napísať nesúhlasný komentár? Prosím, zvážte nasledovné: je šanca, aby niekto zmenil Váš názor alebo chcete iba trvať na svojom? V prvom prípade sú Vaše slová vítané.
Chcete urážať? Nepíšte sem urážky a invektívy. Každý, kto na týchto stránkach publikuje je automaticky (doplňte vhodný výraz). Takže už to všetci vopred vieme, čo si myslíte a preto sa neopakujte.
Fajn, mne sa to nechcelo rozpisovať :) Inak paci sa mi tento termin "zohrata dvojka grafika a CSS kodera" - presne to je to, co este asi chyba mnohym web studiam, bud len dobry grafik alebo len koder alebo nezohrata dvojka (jeden druhemu nerozumie).
Typicky pripad je, ked grafik urobi v navrhu navigaciu, ktora musi byt na webe nakoniec obrazkami, inak sa navrh neda previest/pouzit, lebo nevyzera dobre. To je prave pripad, ked by mu jeho partak koder mal povedat "urob to prosim tak, aby to mohlo byt textovo a vyzeralo to dobre" (a ze to ide vidno jasne na Bowmanovych Sliding Doors na Alistapart)
Dalsie moznosti takejto spoluprace su aj v dizajne, ktory sa meni podla rozlisenia a maximalne efektivne vyuziva dostupnu plochu, priklad na http://www.themaninblue.com/experiment/ResolutionLayout/
Fixnú šírku považujem ja za pliagu dnešného webdesignu. Osobne s ňou do budúcna nepočítam. Ináč dík Ľuboš za tip, ten resolution layout vyzerá celkom dobre a použitelne
Z vlastnej skúsenosti môžem potvrdiť, že vyriešenie každého z uvedených bodov, vrátane aj tých z originálu nepreložených/nespomenutých detailov, prináša zlepšenie ..., ... a hlavne ...
Schíza jak hovado. Ako užívateľ by som to propagoval ako sa len dá, ale ako správca/organizátor eShopu by som takéto články najradšej zadupal pod čiernu zem ;-)
"Top 10 ways to tell if you have a sucky home page" - stale aktualne, aj po 10 rokoch :)
http://jeffglover.com/sucky.html
[4] Ano pred par mesiacmi sa tiez niekde pripominali Nielsenove clanky z roku 1995, ze su v pohode aktualne ;-)
rony, preboha... z Nielsena si robia prdel uz aj decka na zakladnej skole v Dansku...
"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". "
vies nieco o typografii? o tazisku vizualu, zarovnani a pod.?
pri "gumenych" strankach je NEMOZNE zachovat spravne zalomenie.
chybou na slovensku je, ze vacsina web-coderov su zaroven aj "grafikmi"... preto veci vyzeraju ako vyzeraju.
osobne budem VZDY preferovat fixnu sirku stranky.
pri fixnych strankach je NEMOZNE zachovat spravne zalomenie. Dokaz to a objavis neexistujucu vlastnost vsetkych prehliadacov: korektne zalamovanie textu ;-)
Osobne z tohto dovodu je blbost vyhradne trvat na fixnej sirke stranky.
Nebuďte tak tvrdí! Také se mi jako uživateli mnoho stránek nelíbí, ale teď jsem si vyzkoušel vlastní projekt, bez předchozích zkušeností, a musím říct, že vyhovět všem požadavkům bez najmutého profíka je dost složité. Tím ovšem vůbec nechci omlouvat obchody s miliónovými obraty. www.rajnabytku.cz