Jste tu poprvé? - Skrýt (musíte být přihlášeni)

9

Použitelnost v praxi 3. - přehlednost webu a seskupování obsahu

Spousta lidí vám řekne, že se jim nějaký design zdá nepřehledným. Rozebírat všechny případy, jak se něčemu takovému bránit by vydalo na knihu. Ne jednu - proto jsem vybral problém, podle mě jeden z nejčastějších, který prozkoumáme.

Upozornění: Pro nově příchozí - tato série článků na blogu reprezentuje moje osobní názory, které se vždy snažím podepřít rozumnými argumenty. Mým úmyslem je jednak informovat ostatní, jednak rozpoutat diskuzi o dané problematice - protože ne vždy musím mít pravdu a zvlášť u nejistých témat (kdy se "domnívám" a spíš tak trochu hádám) ocením názor ostatních.

Hlavním účelem jakéhokoliv webu bylo a vždy bude uživateli předat nějakou informaci, nebo pokud chcete, zkušenost. Taková informace může obsahovat textové, obrazové nebo jiné prvky, které jsou obsahem, který uživatele zajímá. A protože obsah webu je různorodý a neskládá se pouze z odstavců a ničeho jiného, je třeba tyto různé informace řadit podle důležitosti, podle toho aby měl celek nějaký řád, a vedle toho hledět na to, aby byly informace návštěvkům servírovány co nejlépe, tedy jak oni požadují. To zní jednoduše, ale v praxi to může být těžký oříšek, zvlášť když jste opičák, který se nedokáže rozhodnout, co za web vlastně dělá (teď mluvím o sobě a těchto stránkách).

Seskupování obsahu - to je každýmu hned jasný...

Původně jsem chtěl nějak analyzovat, jak může dojít k tomu, že je web nepřehledný. Pak jsem to vzdal, protože přes všechny poznatky, které jsem schopen shrnout, je tohle u mnoha lidí individuální záležitost, takže se může snadno stát, že na nějaký design budou návštěvníci reagovat rozdílně podle jejich vnímání a toho, na co jsou zvyklí. Nemluvě o tom, že když se jich zeptáte na hodnocení, jejich komentáře se mohou dost lišit od vlastní zkušenosti, pokud je skutečně přimějete, aby web prozkoumali. Prostě mi nepřijde vhodné odbýt tohle velmi komplexní téma několika body, možná se o to pokusím později, až mi budou docházet témata o čem psát. Proto se zaměříme na to, jak prvky obsahu, což znamená věci jako logo (nebo název webu), kontakt, vyhledávání, menu, hlavní blok obsahu, nejdůležitější tlačítko, články a další věci... Snažím se oddělit každou logickou část obsahu jako samostatný díl, a poté tyhle díly skládám do větších celků - kupříkladu hlavička je obvykle spojení loga, vyhledávání a kontaktu, nebo pokud je menu malé, kombinuji to a logo.

Obvykle je víc cest, jak dosáhnout výsledku, a je na vás, jak dobře dokážete posoudit, která je lepší (protože co je nejlepší se často posoudit nedá, a i se statistikami zůstává ono "co kdyby"). Právě tady nastává největší tanec a zárodek všech problémů. Tahle fáze rozdělování obsahu se v naprosté většině případů má řešit, dokud děláte wireframe, nebo jednoduchý prototyp - protože ošklivou grafiku můžete napravit kdykoliv, ale špatně složený obsah může zničit celý web, a pokud se v pokročilé fázi vývoje rozhodnete výrazněji měnit rozmístění obsahu, bývá to frustrující a nepříjemná věc, právě kvůli veškeré grafice, o kterou jste váš design už vylepšili.

Dovolím si tvrdit, že ve webdesignu existují zavedená, ověřená řešení, na která jsou uživatelé internetu zvyklí, a pak specifické případy, které se přizpůsobují potřebám konkrétní skupiny uživatelů, která web využívá. V ideálním případě by se mělo kombinovat obojí. Druhá možnost, řešení na míru podle situace, může být těžko účinná bez analýzy chování uživatelů webu - pokud nemáte nějaká data, tak můžete jen odhadovat. Někdy to vyjde, někdy se můžete opřít o to, jak fungují podobné weby, a někdy taky narazíte. K tomu se nedá moc co dodat, a z toho důvodu se zaměříme na první případ, zažité zvyklosti a logiku, která se dá uplatnit díky znalostem a přehledu o to, co funguje a co ne. Čím víc webů shlédnete a jen se nad nimi lehce zamyslíte, tím ostřejší vaše designérské smysly budou.

Základ, ze kterého vždy vycházet...

Základní koncept - design se skládá z jednotlivých bloků obsahu. Ty bloky by měly být samostatně dostatečně rozeznatelné, a zároveň by měly tvořit logický celek - doplňují se, a neměly by absolutně čnít z designu (neplést s výraznými prvky, které mají přitáhnout pozornost), pokud se tak neděje za určitým účelem. Spousta designérů, speciálně ti méně zkušení, začne rovnou bezhlavě vytvářet design, a celou plánovací část vynechá. Nemusíte vždy mít wireframe a zkoumat, jak co pasuje dohromady - ale pokud to neuděláte, tak byste měli být v dané oblasti zkušení a mít za sebou řadu typově podobných webů, abyste si mohli bez obav dovolit rovnou začít pracovat s jistotou, že se nic nepokazí. I když je wireframe a prototypování extra práce navíc, pokud můžete, alespoň těch pár (u prezentace to nemusí být ani pár hodin, než něco poskládáte dohromady) hodin tomu rezervujte.

Protože je mnoho druhů stránek, a každý druh má různá řešení, která můžete zvolit (a která se dále dělí), rozhodl jsem se nejlépe demonstrovat seskupování na jednoduchém prototypu. Tak se můžete soustředit jen na rozmístění bez grafiky. Půjde o jednoduchou prezentaci, jejíž smyslem je zákazníkovi nabídnout nebo prodat konkrétní produkt.

Ukázka prezentace a její srovnání s popisky

I přes zmenšení jsou všechny prvky dobře vidět - váš dojem z celkové prezentace je sice jiný, než jaký by byl při 100% zobrazení (proto toho spousta designérů zákeřně zneužívá a na portfolio si umisťuje designy v 80% zobrazení, zostřené, protože vypadají atraktivněji než ve skutečném zobrazení), ale v tomto případě nemusíte nic hodnotit, jen srovnat jednotlivé skupiny obsahu, které jsem v druhém případě zachytil. Nejde o celý web, pak by měl následovat podrobnější popis služby, nějaká doporučení zákazníků a další věci, které mohou návštěvníka zajímat a pomoct mu v rozhodnutí, zda si objedná produkt/využije služby/kontaktuje váš kvůli objednávce.

1 - Hlavička, který se skládá z loga a menu

Klasika. Hlavička by měla jasně indentifikovat na jakém webu jste a s ohledem na to vám poskytovat možnosti a volby, podle situace - jen zřídka zde není přítomné menu, a podle situace bývají nejčastější části hlavičky již dříve vyjmenované vyhledávání, kontakt, případně panel uživatele a další věci. Identifikační a ovládací část, tak je hlavička dlouhodobě u většiny webů prezentována a není rozumné to nějak měnit, pokud si opravdu nejste jistí.

2 - Hlavní obsah, stručný a shrnující text, obrázky pro zachycení pozornosti, a výrazné tlačítko spolu s doplňujícím textem

U prezentace bezpochyby nejdůležitější část. Teď by bylo vhodné zmínit roli pozadí - sám mám rád pozadí, které pokračuje po celé šířce. Přijde mi, že je potom vyzdvihován dojem jednotlivých pater designu. V tomto případě bylo třeba oddělit hlavičku od obsahu dostatečně výraznou, ale neagresivní barvou. Bez ní by to ve wireframu nemělo smysl, protože dojem před použitím barvy a poté je úplně jiný. A to se ještě výraznost tohoto bloku zvýší, až se použijí obrázky. Proto pokud potřebujete nějakou část stránek zvýraznit, setřete si pro ní pozadí. Právě to, že "obyčejný" obsah stránek pozadí nemá, nebo má dostatečně odlišné, že ho to odděluje od obsahu (hlavička v tomto případě) vám dává možnost pozadí využít pro těch několik nejdůležitějších částí libovolně komplikovaného designu.

Vše kombinované dohromady (velký text, obrázek, pozadí a tlačítko) dělá z této skupiny nejvýraznější část na webu, ale zároveň není příliš rušivá a pro člověka nepříjemná. To nejhorší, čeho byste se mohli kdy dopustit, je vložit na stránky něco, co bude připomínat reklamní banner, a způsobí u návštěvníka bannerovou slepotu, tedy stav, kdy automaticky ignoruje velmi výrazné části webu. Zde bych rád upozornil (tak trochu skok mimo, ale když už se to týká výrazných věcí...), že pokud vám někdo bude tvrdit, že červená barva na web nepatří, protože symbolizuje chybu, nevěřte mu, protože tohle není tak zažité, nemluvě o tom že v reálném světě červená rozhodně neplní pouze tuto činnost. Používejte tak červenou (střídmě) na výrazné upozornění návštěvníků jak potřebujete.

3 - Dodatečné informace, zvýrazněné a zjednodušené

Metoda 3-4 bodů na jednom řádku je velmi oblíbená, protože tam můžete přidat několik stručných odstavců/obrázků, které jsou pěkně srovnané a obvykle na ně člověk očima plynule naváže poté, co si přečte nejvýraznější část nad nimi. Toto není případ seskupení různých obsahových prvků, ale dostatečného oddělení od hlavního obsahu. Navíc pokud při skenování stránky člověk nejprve zabrousí do tohoto místa, dostane se mu podobných, jen trochu více rozvedených informací, než které najde v hlavním bloku.

Co si odnést?

Vaší prvotní snahou by vždy mělo být vytváření skupin prvků, které jsou ale vzájemně dostatečně oddělitelné. Pokud jste si jisti, že některé věci se na webu netěší takové pozornosti, můžete si dovolit je zkombinovat s jinými, pokud to dává smysl. Třeba propojení menu a vyhledávání (kde vyhledávání je napravo a všechny položky menu hezky zleva) není špatná volba, protože tak máte hned vedle navigace další formu získávání obsahu. Vyhledávání je tak trochu upozaděné, ale když je potřeba, je k dispozici.

Nevytvářejte tak neuspořádané designy, kde náhodně rozházíte váš obsah sem a tam. Vytvořte si předpokládaný prostor, který bude každý prvek vyplňovat, případně ho rovnou doplňte zkušebním textem nebo jednoduchými tvary v případě grafiky, a testujte vzájemné vztahy takového obsahu. Mějte na paměti, že lidé stránky procházejí - nečtou a nesledují vše, a pokud se vám podaří web rozdělit do několika částí, které si mohou rychle prolétnout, a až poté, co je v nich něco zaujme, využijou i další obsah, které se v té části nachází, splňuje váš web svůj účel. Člověk tak najde věci tam, kde je očekává, případně vidí, že se mu vedle nějakého obsahu nabízí něco dalšího (jsem vážně konkrétní, já vím), co k tomu logicky patří.

Velmi zjednodušeně se tohle rozmístění obsahu dá přirovnat k samoobsluze - taky tam nemají vyrovnané vrtačky vedle rohlíků (i když...).

Chystám se teď víc věnovat této sérii, a každý týden budu vydávat jeden díl. (Den, kdy budou vycházet ještě upřesním, ale pravděpodobně půjde o středu, tenhle teď vydávám, protože se s ničím nepřekrývá).

Jako obvykle, uvítám vaše vlastní postřehy, případně tipy čím se při skládání obsahu řídit. Pokud máte pocit, že tenhle systém nefunguje, máte jedinečnou příležitost mě zničit, protože na něj při práci hodně spoléhám a prakticky neustále se podle něj řídím :)

Petr Široký Profil na fóru / Osobní stránky / Twitter Webdesignér povoláním, kritik přesvědčením, šašek duší, to vše zde najdete. Tutoriarts jsou poslední 3 roky můj největší osobní projekt. Kromě toho se zkouším věnovat jiným menším webovým projektům, živím se jako nezávislý webový designér a snažím se více hledět do budoucnosti, aby tyto stránky vzkvétaly.

Komentáře k článku

Nejste přihlášeni - před odesláním příspěvku vyplňte protispamovou kontrolu níže - váš komentář bude viditelný až po schválení správcem. Pro okamžité schválení se přihlašte, nebo registrujte. Registrace nezabere déle než minutu.

  • :-D
  • 8-|
  • :-/
  • 8-)
  • :-(
  • :-O
  • =(
  • =D
  • :-)
  • <3
  • ;-)

* Povinné položky

Super článek :)

"stacilo by keby ste sem pridali funkciu zoom"

ctrl + kolečko myši ti nic neříká?

  • #8
  • lefiath
  • 17. October 2011 | 09:20
  • Skupina: Správci

Pokud se ti stránka roztahuje, tak máš asi něco špatně nastaveného ve svém prohlížeči. Web je nastaven na základních 960 na šířku.

  • #7
  • Neregistrovaný kolemjdoucí
  • 17. October 2011 | 05:00
  • Skupina: Neregistrovaní

vidim ze ste zmenili grafiku 8-| mohol by som vas poprosit aby ste zmensili stranku? je velmi velka ja mam velky monitor a cela stranka sa mi roztiahla. ked citam jeden riadok tak musim otacat hlavou z prava do lava ako ked pozeram tenis, ked je dlhsi clanok tak mam z toho rozboli hlava tlaci na krku, a niekedy mi trpnu aj ruky a citim mravencenie v kolenach. stacilo by keby ste sem pridali funkciu zoom, nechcem skoncit ako invalid.

  • #6
  • lefiath
  • 16. October 2011 | 18:06
  • Skupina: Správci

Fireworks je na to přímo určen, takže je to určitě dobrá volba. Já ho nepoužívám proto, že v něm nejsem sběhlý, a tak raději zatím zůstávám u Photoshopu.

  • #5
  • House23
  • 16. October 2011 | 17:01
  • Skupina: Registrovaní Uživatelé

Pěkné

Ja osobně používám na wireframy Fireworks docela se na to hodí.

  • #4
  • weblok
  • 15. October 2011 | 19:56
  • Skupina: Registrovaní Uživatelé

evidentne sa rád počúvaš a rád po sebe čítaš. téma dobrá, prevedenie horšie. prosím ťa nabudúce stručnejšie a k veci. toť vsjo.

  • #3
  • lefiath
  • 15. October 2011 | 19:36
  • Skupina: Správci

Jen Photoshop, žádný speciální program. Já těch wireframů zatím nedělám tolik, takže necítím potřebu si něco stáhnět. Ale asi na to časem dojde.

  • #2
  • Neregistrovaný kolemjdoucí
  • 15. October 2011 | 19:25
  • Skupina: Neregistrovaní

Lefe, můžu se zeptat, jaký program používáš na wireframy?

  • #1
  • exarion
  • 15. October 2011 | 19:22
  • Skupina: Registrovaní Uživatelé

Paradni clanek. Myslim, ze hodne webu by toto potrebovalo, aby mohly kvalitneji prodavat svuj obsah. Tesim se na pokracovani.

Nahoru

Autoři: Jakub Houdek, Jakub Šimůnek, Petr Široký a příležitostní sebevrazi