Posunout na článek


21 kroků k použitelnému webu: 2. část

Pátek, 4. září 2009    Použitelnost, Webdesign a grafika

V první části trilogie o použitelnosti webu jsem uvedl zásadní předpoklady použitelného webu. Druhý díl (právě čtete) je věnovaný otázce designu, typografie a zvyklosti rozvržení jednotlivých prvků – tedy jakým způsobem by měly být ony základní informace z první části návštěvníkovi podány. V závěrečných 7 krocích se pak objeví některá doporučení a častá očekávání uživatelů na funkčnost webu.

Pojeta.cz

Tomáš Pojeta, Pojeta.cz

8. Dobrý design

Kvalitní design webové stránky napomáhá žádanému vedení návštěvníkovy pozornosti za pomoci správně voleného kontrastu barev, velikosti prvků nebo případně i animací. Vzhled webu je to první, co na člověka udělá dojem. Ve spojení s logem je základnou webového brand-buildingu. Měl by být také v souladu s tématem webu. Může v návštěvníkovi vzbudit důvěru, sympatie, nadšení a mnoho dalšího – web si díky dobrému designu zapamatuje a v budoucnu se vrátí zpět. To vše se dá však snadno pohřbít jinými částmi webu.

Především design nesmí v návštěvníkovi nechtěně vyvolávat úzkost, zmatení, vztek, nebo dokonce nějaký záchvat. 🙂

Compose to a vertical rythm – 24ways.org

Compose to a vertical rythm – 24ways.org

9.  Dobrá typografie

Aby byl obsah pro návštěvníka čitelný, je třeba dodržovat aspoň ta nejdůležitější typografická pravidla. Velikost písma by měla přímo odrážet zanoření ve struktuře textu – tedy čím výše ve struktuře, tím větší písmo. Text by měl mít dostatečnou výšku řádku (většinou kolem 1,5 velikosti písma) a také vhodné zarovnání.

Podmínkou čitelnosti Velkým plusem pro čitelnost a orientaci v textu je také dobrý vertikální rytmus, tedy horní a spodní okraje jednotlivých částí textu. Zdařilý článek na toto téma (včetně komentářů) je Compose to a vertical rythm, kde jsou uvedeny i konkrétní rady a styly.

BezChyb.cz

BezChyb.cz

10. Strukturovaný obsah

Obsah stránku by měl být přehledný a dobře strukturovaný. Toho dosáhneme členěním textu na kratší odstavce, vkládáním podnadpisů a používáním seznamů tam, kde je to na místě. V přehlednosti může také pomoci shrnutí obsahu několika větami v úvodu a v případě některých druhů textu i odlišení závěru – tedy co si má člověk z textu odnést.

Důležité je i vyznačování podstatných částí odstavce – zpravidla tučným písmem. To proto, aby si návštěvník mohl text prohlédnout bez nutnosti čtení a měl zhruba tušení, o čem je.

Maximize the Use of Hover (WebDesignerWall.com)

Maximize the Use of Hover (WebDesignerWall.com)

11. Odlišené odkazy

Odkazy v obsahovém textu by měly být barevně odlišené od okolí a nejlépe i podtržené. Pokud odkazy nepodtrhnete, musíte počítat s tím, že tak znevýhodníte návštěvníky se zhoršeným vnímáním barev, kterých nemusí být zrovna malé procento. Vhodným doplňkem může být rovněž odlišení již navštívených odkazů, což je věc často zbytečně opomíjená.

Aspoň většina odkazů na webu, jak textových tak i grafických, by měla mít nějaký efekt po najetí myší. Pro návštěvníka je to jasné znamení, že na odkaz může opravdu kliknout a často ho k tomu ještě motivuje.

Použitelnost také značně zvyšuje použití atributu title – tedy po najetí myší podrobněji popsat, co se pod odkazem vlastně nachází. Hodně lidí tuto část podceňuje… často se v titulku odkazu jen zopakuje jeho text a to už je pak lepší ho neuvádět vůbec.

SushiAndRobots.com

SushiAndRobots.com

12. Konzistence webu

Design, typografie a rozvržení jednotlivých prvků stránek by měly být jednotné a konzistentní na všech stránkách webu.

Konzistentní web působí silně a spolehlivě – návštěvník ví, že na stránkách může získat jakoukoliv informaci tak, jak je zvyklý a nedočká se žádného nepříjemného překvapení nebo zmatení.

Design Patterns – SmileyCat.com

Design Patterns – SmileyCat.com

13. Šablony prvků webu

Tzv. design patterns, tedy modelové příklady prvků stránek, mohou být velice užitečnou inspirací při rozmisťování a samotném provedení jednotlivých částí stránek.

Databáze s těmito šablonami sdružují řešení jednotlivých prvků používaná na úspěšných a z velké části i použitelných webech. Na tato řešení jsou návštěvníci zvyklí a je zkušeností ověřené, že fungují. A přesně to na použitelném webu chceme. Další pěkné pattern databáze jsou: box.mepholio.com, PatternTap.com či UI-Patterns.com.

Mobilní verze Twitteru

Mobilní verze Twitteru

14. Myslete na mobilní zařízení

Chytré mobilní telefony s dotykovými displeji ve stále větší míře zaplavují trh. Pokud se vám mobilní internet ještě nezdá natolik rozšířený, abyste se na něj museli ohlížet, vězte, že v příštích letech se bude stále rychleji rozvíjet a myslete tedy aspoň na budoucnost.

Speciální vzhled stránek pro mobilní telefon s viditelným přepínáním na standardní verzi může vašim návštěvníkům v terénu ušetřit mnoho starostí.

… poslední díl ve znamení funkčnosti

Mohlo by se zdát, že vše důležité v otázce použitelnosti již bylo řečeno. Už je jasné, jaké informace návštěvníkovi nabídnout a jakým způsobem, aby pro něj byly snadno a příjemně čitelné. V poslední části však ještě stále zbývá místo pro aspekty funkčnosti webu, které jsou mnohdy stejně zásadní jako body v prvních dvou dílech, a není tedy radno je opomenout.



Komentáře

  • >> Podmínkou čitelnosti je také dobrý vertikální rytmus textu

    Obávám se, že vertikální rytmus není podmínkou čitelnosti textu. Vertikální rytmus text typograficky učeše, ale kdyby byl podmínkou čitelnosti, tak je většina webů nečitelná. Což neplatí.

  • ↑ Filosof: Díky za upozornění… upraveno. Bylo to trochu moc idealizované. 🙂

  • Muhehe. Njn, stane se. Stále přemýšlím nad tím „použitelným“ webem a důležitosti skvělé typografie či designu pro použitelnost… když si vezmeš useit.com, tak ten web je POUŽITELNÝ, je PŘESVĚDČIVÝ (aspoň pro tu půlmegu lidí měsíčně) a má mizerné typo i design.

  • ↑ Filosof: Jakob Nielsen designu nepřikládá moc velkou váhu a asi je to tím, že má spíše „mužský“ mozek, respektive větší vliv má u něj levá hemisféra mozku. Tím pádem nějaký design a emoce ustupují do pozadí…

    UseIt.com je použitelný web, ale podle mě by mohl být daleko lépe použitelný…

    Pořád je na světě zhruba polovina lidí, pro které design a dobrá typografie hraje na webu dost velkou roli. Jak píšu v poslední větě 8. bodu – aby člověk (tedy jeden z té zhruba poloviny) na webu zůstal, nesmí v něm design vyvolávat nepříjemné pocity. Ať už jsou na useit.com jakkoliv hodnotné informace, nějaký vnitřní hlas mě zkrátka pořád nutí tu stránku zavřít a radši si informace najít jinde.

  • >> nesmí v něm design vyvolávat nepříjemné pocity

    Tak to shrnem :-). Působení vzhledu webu na člověka je součástí jeho pocitu spokojenosti při práci s webem. Ale ve chvíli, kdy existuje další motivátor, tak může hrát jen podružnou roli (cena produktu, exklusivita informací apod.)



Jedenmecítma šlépějí

Všechny články