Hodn∞ se o tom mluvφ, n∞kdy a╛ moc, ale mßlokdo si pod pou╛itelnostφ p°edstavφ n∞co p°esnΘho. Jß takΘ nevφm, co to pou╛itelnost je, ale svoje p°edstavy jsem drze shrnul do tohoto textu.
Co je pou╛itelnost strßnek - Rozhodnutφ pro pou╛itelnost - KlφΦe pou╛itelnosti - Jednoduchost - Odkazy a tlaΦφtka - Rozmφst∞nφ prvk∙ - Kde to jsem - Respektujte u╛ivatele - Testovßnφ pou╛itelnosti - Dal╣φ studium
Dobrß pou╛itelnost m²ch strßnek znamenß, ╛e:
Na prvnφ pohled to nenφ nic podstatnΘho. Ale dobrΘ weby se prosadily dφky svΘ pou╛itelnosti, vezm∞te si t°eba Google. Z nepou╛iteln²ch strßnek naopak lidΘ rad∞ji odchßzejφ, aby si nep°ipadali jako pitomci.
Anglicky se pou╛itelnosti °φkß usability.
Jin²m pojmem je p°φstupnost, angl. accesibility. Vyjad°uje mφru, s jakou dokß╛ou s webem pracovat r∙zn∞ omezenφ u╛ivatelΘ. P°φstupnost se hodn∞ spojuje s vozφΦkß°i (asi kv∙li obrßzk∙m), co╛ je nep°esnΘ. P°φstupn² web se dß ovlßdat t°eba takΘ bez my╣i, bez obrßzk∙, na ΦernobφlΘm monitoru, z mobilu nebo z matfyzßck²ch laborato°φ. Ale o p°φstupnosti jsem psßt necht∞l, t°eba╛e s pou╛itelnostφ souvisφ.
Spousta lidφ mß nepou╛itelnΘ strßnky. NejΦast∞j╣φm d∙vodem je (p°ekvapiv∞) to, ╛e je moc pou╛itelnΘ necht∞jφ mφt. Je to p²cha. Domnφvajφ se, ╛e jejich strßnky jsou velmi dobrΘ. Pokud je na takov²ch strßnkßch n∞co nesmyslnΘho nebo nepou╛itelnΘho, tak je to tam v∞t╣inou schvßln∞. "U╛ivatelΘ se p°ece musejφ sami sna╛it, aby se k informacφm dostali!" Jen╛e u╛ivatelΘ jsou ka╛dou chvφli jedno klepnutφ od uzav°enφ prohlφ╛eΦe. A jakmile jejich zmatenφ dosßhne urΦitΘ ·rovn∞, odchßzejφ jinam.
Naopak majitelΘ pou╛iteln²ch a vst°φcn²ch strßnek tu╣φ, ╛e u╛ivatel∙m je nutno hodn∞ pomßhat. M∙╛ete se pro to rozhodnout takΘ. Je ale t°eba p°ekonat kus kreativnφ p²chy, proto╛e stavba pou╛iteln²ch strßnek v∞t╣inou znamenß zjednodu╣ovßnφ.
«ßdn² u╛ivatel va╣φ strßnky tu strßnku nepou╛φvß p°esn∞ tak, jak si myslφte. «ßdnφ dva u╛ivatelΘ nepou╛φvajφ web stejn²m zp∙sobem. Prakticky ka╛d², koho znßm, d∞lß se strßnkami trochu jinΘ v∞ci. Tuto zku╣enost potvrzujφ i experti.
Poproste n∞kdy n∞jakΘho kamarßda, aby si sednul k va╣φ strßnce a n∞co na nφ ud∞lal (na╣el, zaregistroval se apod.). Budete p°ekvapeni, jak moc mu to dß prßce. Je to dobrΘ pouΦenφ. Py╣nφ webmaste°i nad tφmto faktem °φkajφ: "ti kretΘni BΘEf┌Φka neum∞jφ ty strßnky pou╛φvat. Jsou ·pln∞ pitomφ, posa∩te k tomu n∞koho normßlnφho". Kdopak se tu m²lφ?
HTML a CSS jsou zlatΘ technologie. Strßnky jsou dokumenty, ne programy. Kdo si moc hraje s obrßzky, ten tvo°φ strßnky jako um∞leckΘ dφlo. To sice m∙╛e vyvolat dobr² prvnφ dojem (pokud se to stihne natßhnout), ale dojem vydr╛φ jen v p°φpad∞, ╛e se to dob°e ovlßdß.
Jakmile n∞kdo zaΦne strßnky moc programovat javascriptem, v∞t╣inou z nich ud∞lß nepou╛iteln² paskvil. Ka╛dΘ originßlnφ ovlßdßnφ je ne·sp∞╣nΘ jednodu╣e proto, ╛e je originßlnφ. Nikdo s tφm neumφ a nechce se uΦit. Mo╛nß to znφ moc tvrd∞, ale takovß je moje zku╣enost. Z∙sta≥te u jednoduchosti.
ZaΦneme n∞Φφm znßm²m:
To byla zatφm pozitivnφ doporuΦenφ. Te∩ pßr v∞cφ, kter²ch se vyvarovat:
Logo firmy nebo strßnky pat°φ do levΘho hornφho rohu ka╛dΘ strßnky webu a klikß na hlavnφ strßnku webu. U╛ivatelΘ jsou na to zvyklφ. Zatφmco je╣t∞ tak p°ed rokem se spekulovalo o tom, jestli se to tak mß d∞lat, dnes (podzim 2003) tvrdφm, ╛e cokoli jinΘho je hrubß chyba.
Vedle loga by m∞l b²t krßtk² text popisujφcφ poslßnφ webu. Z textu by nßhodn² nßv╣t∞vnφk m∞l b²t schopen poznat, Φφm se web nebo firma zab²vß. Tomu krßtkΘmu textu se °φkß slogan.
Hledßnφ se v∞t╣inou dßvß doprava nahoru, ale je╣t∞ to nenφ nezvratnΘ pravidlo.
Poslednφ dobou si u╛ivatelΘ zvykajφ na hornφ a levou navigaci. V∞dφ, ╛e jsou tam odkazy na dal╣φ strßnky serveru. Zatφmco hornφ navigaci chßpou v∞t╣inou jako spoleΦnou pro cel² web, v levΘm sloupeΦku si Φast∞ji v╣imnou v∞ci, kterß souvisφ s aktußlnφ strßnkou. P°esto je spφ╣e chybou dßvat do levΘho (nebo pravΘho) sloupeΦku n∞jakou d∙le╛itou Φßst textu strßnky -- u╛ivatelΘ by to p°ehlφ╛eli.
V hlavnφm sloupeΦku Φekajφ u╛ivatelΘ text, kter² je unikßtnφ jen pro tu kterou strßnku. Na vrchu hlavnφho sloupeΦku oΦekßvajφ u╛ivatelΘ nadpis strßnky. Co nenφ v hlavnφm sloupeΦku, u╛ivatelΘ velmi Φasto ignorujφ. Pro tuto ideu nemßm ╛ßdnΘ spolehlivΘ m∞°enφ, ale myslφm si to hodn∞.
Takov²chhle pouΦek je vφc a v∞t╣inou je znßte. T°eba ╛e odesφlacφ tlaΦφtko formulß°e se dßvß dolu pod formulß°. UrΦit∞ si na ta pravidla vzpomenete v praxi (a to je d∙le╛itΘ).
Pro zji╣t∞nφ, kde zrovna jsou, u╛ivatelΘ pou╛φvajφ t°i v∞ci:
Nadpis strßnky je nejd∙le╛it∞j╣φ. M∞l by b²t nejv∞t╣φm pφsmem v hornφ Φßsti textu. Pokud bude od textu n∞jak graficky odd∞len² (Φßra, jinß barva pozadφ), je nebezpeΦφ, ╛e u╛ivatel hned nepochopφ, ╛e jde o nadpis.
DrobeΦkovß nßpov∞da je takovΘ to Obsah > Slu╛by > Kv∞tiny > R∙╛e. Nßv╣t∞vnφk strßnky tak hned vφ, kde je. DrobeΦkovß navigace je trochu nßroΦnß na ·dr╛bu, dobrΘ redakΦnφ systΘmy by ji m∞ly tvo°it automaticky. Nem∞lo by to b²t moc velk²m pφsmem. Nejlep╣φm odd∞lovaΦem odkaz∙ je znak >, v╣echny jinΘ (/|-[]) si u╛ivatelΘ mohou splΘst. DrobeΦkovß navigace mß smysl jenom na webech, kterΘ majφ dobrou stromovou strukturu (co╛ je t°eba d∙vod, proΦ ji zde nepou╛φvßm: tento web vznikl moc ╛iveln∞ a mß spφ╣e tvar sφt∞ ne╛li stromu).
Titulek strßnky je obsah tagu <title>, zobrazuje se v prohlφ╛eΦi ·pln∞ naho°e v modrΘm pruhu. U╛ivatelΘ se podle n∞j orientujφ, zejmΘna kdy╛ pracujφ ve vφce oknech.
Jenom mßlokdo si v╣imne vysvφcenΘ polo╛ky v menu, aΦkoli to d°φve b²valo hlavnφ upozorn∞nφ "tady jsi".
ProΦ je d∙le╛itΘ, aby u╛ivatel v∞d∞l, kde zrovna je?
Hodn∞ lidφ mß nastaven² prohlφ╛eΦ a jeho okno tak, aby se jim s tφm dob°e pracovalo. Pokud se jim do toho zaΦnete mφchat (v∞t╣inou javascriptem), tak sklidφte akorßt nelibost.
Neotevφrejte novß okna. P°ekvapilo m∞, kdy╛ jsem b∞hem r∙zn²ch ╣kolenφ zjistil, jak mßlo lidφ vφ, jak okna vlastn∞ fungujφ. NovΘ okno hodn∞ u╛ivatel∙ zmate, neum∞jφ se vrßtit do toho p∙vodnφho (tlaΦφtko zp∞t nefunguje). Obzvlß╣╗ velkß prasßrna je otev°enφ novΘho okna do fullscreenu, to skoro nikdo neumφ vypnout (alt F4).
Nem∞≥te velikost oken. To javascriptem takΘ jde a hodn∞ lidφ na to nadßvß.
Nezakazujte pravΘ tlaΦφtko. Je to trapnΘ. ZdrojovΘ k≤dy stejn∞ p∙jdou stßhnout tak jako tak.
Rozmyslete si barvenφ rolovacφ li╣ty. TΘm∞° v╛dy je ru╣ivΘ. Hodn∞ Φasto lidi zmate natolik, ╛e nev∞dφ, kterß Φßst li╣ty ukazuje odrolovanou a kterß aktußlnφ Φßst dokumentu.
U rßm∙ nechte u╛ivatele, a╗ si je mohou p°izp∙sobit (nepou╛φvejte atribut noresize). Jß si navφc t°eba myslφm, ╛e rßmy jsou ╣patn∞ pou╛itelnΘ obecn∞.
Mimo oblast webov²ch strßnek je studium a testovßnφ pou╛itelnosti normßlnφ pr∙myslovΘ odv∞tvφ. Testujφ se letadla, auta, mobily (proΦpak jen neumφm ovlßdat sv∙j nov² mobil?). Na internet vtrhla pou╛itelnost jako obor teprve nedßvno, a╛ kdy╛ si lidi zaΦali v╣φmat, jak blb∞ se jim s internetem d∞lß. V automobilkßch majφ na pou╛itelnost celΘ t²my a standardy, za co╛ se na internetu necht∞lo nikomu utrßcet (krom∞ nejv∞t╣φch gigant∙). Na╣t∞stφ se strßnky dajφ testovat lacin∞ji.
O lacinΘm testovßnφ pou╛itelnosti pojednßvß celß pasß╛ v²bornΘ knihy Steve Kruga Nenu╗te u╛ivatele p°em²╣let (v originßle Don't Make Me Think). Testovßnφ spoΦφvß v tom, ╛e se n∞jak² dobrovolnφk posadφ ke strßnce a na strßnce se mu zadß n∞jak² jednoduch² ·kol. NatßΦφ se to na kameru, v²vojov² t²m se na to v jinΘ mφstnosti dφvß a nadßvß. Zßznam se pak analyzuje a podle toho se p°ed∞lßvajφ strßnky.
V Φesk²ch pom∞rech znßm je╣t∞ jednodu╣╣φ testovßnφ pou╛itelnosti. Vezm∞te si brßchu nebo sΘgru, posa∩te je ke strßnce, nemluvte jim do toho a nechte je na strßnce n∞co ud∞lat. Budete zpravidla zd∞╣eni, jak je to pro n∞ nesrozumitelnΘ a obtφ╛nΘ. TakovΘ pouΦenφ je zßklad ·sp∞chu.
Do pou╛itelnosti takΘ pat°φ n∞co o pφsmu, o pozadφ a o barvßch. TakΘ se poΦφtß srozumitelnost adres strßnek. Nechßm to v╣echno va╣emu ·sudku, v oblasti pou╛itelnosti jde stejn∞ hlavn∞ o zku╣enosti a o zdrav² rozum.
Steve Krug: Nenu╗te u╛ivatele p°em²╣let. Krßsnß tenkß obrßzkovß knφ╛ka, vydal CompeterPress 2003. Sranda a hodn∞ informacφ.
Jakob Nielsen: Web Design. Oran╛ovß, docela tlustß, vydal myslφm SoftPress. FundovanΘ, mφsty nudnΘ. Je to i o p°φstupnosti.
o tvorb∞, ·dr╛b∞ a zlep╣ovßnφ internetov²ch strßnek