Návrh obsahu, funkcí a základní struktury

Předchozích 11 dílů tohoto seriálu o budování firemního webu se týkalo přípravných prací, ve kterých jsme si vytvořili kompletní podklady k tomu, abych začali samotný web tvořit.

Už víme, co chceme na webu nabídnout a pro koho. Víme také, jak uzpůsobit nabídku webu v souvislosti s konkurencí nebo našimi možnostmi.

V dnešním dvanáctém díle už začínáme kreativně tvořit. Položíme základy samotného webu. Nadefinujeme jeho strukturu, obsah a funkcionalitu. Nejprve bych rád uvedl tři dobré rady, kterých byste se měli držet:

1. Nezapomente na přípravu

Zajímavé je, že definicí struktury, obsahu a funkcionality webu začíná své weby tvořit většina lidí. Bohužel však bez předchozí přípravy, které jsme se věnovali ve zmíněných jedenácti dílech. To je však velmi špatný postup. Mé doporučení zní jednoznačně: Nepodcente přípravu, nezapomente na přesnou definici cílů, výzkum cílových skupin, vlastní SWOT analýzu, své možnosti. Veškeré podklady pak zohledněte právě v této fázi.

2. Buďte důkladní

Představte si definici obsahu, funkcí a struktury webu jako projekt ke stavbě rodinného domu. Kvalitní projekt se vyznačuje tím, že ztělesnuje přání a představy budoucích majitelů domu a navíc je dostatečně konkrétní a popisný, aby podle něj stavební firma dům skutečně postavila. Počítejte s tím, že čím detailnější projekt, tím menší pravděpodobnost, že stavební firma udělá stavbu jinak, než si představujete. Dokazovat pak, čí je to chyba a na čí náklady se uskuteční orpava, bývá velmi nepříjemné. Pokuste se sami, nebo s pomocí někoho jiného dotáhnout svůj projekt do nejmenšího detailu.

3. Buďte kreativní

Fázi definice obsahu, funkcí a struktury webu nejraději provádíme řízeným brainstormingem – tedy kreativní diskuzí mezi lidmi, kteří mají k tématu co říci. V příjemném prostředí u tabule nebo flipchartu vymyslíte během krátké chvíle věci, které byste u svého počítače nad prázdnou stránku ve Wordu vymýšeli dlouhé hodiny nebo také vůbec nikdy. V rámci diskuze se nenechávejte odradit myšlenkami typu „to nepůjde“ nebo „to je na výrobu moc složité“. V tuto chvíli je čas chrlení myšlenek, škrtat v projektu můžete vždycky

Vezmete-li si tyto rady k srdci, můžete se pustit do práce. Doporučuji postupovat následujícími kro­ky:

1. Výčet obsahu a struktury

Pomocí odrážek si sepište seznamy toho, co chcete na webu mít. Nezapomente při této diskuzi zohlednit veškerou přípravu, kterou jste si udělali. Nadefinujte si obsahové prvky webu (texty, články, aktuality, přehledy produktů, detailní popisy produktů a služeb, refernce klientů, představení týmu, kontaktní informace atp.) a funkcionalitu (formuláře, objednávky, poptávky, hlasování, ankety porovnání produktů atp.). V této fázi není nutné vše do detailu popisovat, stačí heslovité body.

2. Seřazení do priorit

Vytvořené seznamy si seřaďte podle priorit. Shodněte se na tom, co je pro vás prioritní, co může trochu ustoupit do pozadí a co je naopak zcela minoritní.

3. Vytvořte strukturu

S výjimkou některých aplikačních webů by měly být všechny weby uspořádány do pyramidové struktury. Vaším úkolem je tedy uspořádat návrh svého webu do základní struktury. Zcela na vrcholu pyramidy si představte titulní stránku. Pod ní poskládejte první úroven podstránek, které většinou reprezentují základní rubriky/sekce vašeho webu a jsou většinou velmi prioritní. Zkuste v této fázi zatím zapomenout na navigační mechanismy webu, na ně přijde čas později. Pod první úroven pak poskládajte další úrovně a propojujte je vazbami. Vznikne vám tak přehledný strom, který reprezentuje základní informační architekturu webu, ze které bude pro každou stránku patrné, do které větve patří, co je její nadřazenou stránkou (tzv. rodič) a co jsou naopak podřízené stránky (tzv. potomci).

4. Popište obsahové prvky a funkcionalitu

Jakmile jste poskládali stránky do struktury, přišel čas na bližší popis jednotlivých obsahových součástí a funcionalit. Buďte skutečně důkladní a popisní. Představte si, že někdo jiný bude váš popis číst a bude to programovat. Měl by jednoznačně vědět, co si pod daným obsahovým prkvem představujete a jakým způsobem chcete mít provedené jednotlivé funkcionality.

Vezmete-li tuto fázi budování firemního webu vážně a definici obsahu, funkčnosti a struktury nepodceníte, ušetříte si spoustu těžkostí ve fázi samotné výroby. Vyhnete se celé řadě komunikačním šumů, které bývají časté právě v situaci, kdy se projektová příprava pojme spíše vágně.

V dalších dílech seriálu se pak dozvíte, jak s těmito podklady dále pracovat, jak z nich nadefinovat navigaci atp.

 

Autor: David Špinar

Návrh struktury webu a navigace

Návrh struktury webu a navigace samozřejmě vychází ze všech připravených podkladů pro nový web. Úspěšný web se neobejde bez přehledné navigace a srozumitelné struktury webu. Tento článek pojednvá právě o tom, na co se soustředit při jejich návrhu.

Struktura webu, navigace, menu

Tyto 3 pojmy spolu souvisí, a proto se často zaměnují. Zde je jejich krátké představení:

• Struktura pokud možno logicky uspořádává a rozděluje jednotlivé informace na stránky podle různých souvislostí.
• Pod pojmem navigace se ukrývají konkrétní ovládací prvky (odkazy, tlačítka, formuláře apod.), které uživateli umožnují pohyb mezi stránkami, uspořádanými ve struktuře.
• Menu je jen jedním z navigačních prvků. Většinou je řešené jako skupina setříděných odkazů.

Struktura webu

Kvalitní struktura webu napomáhá tomu, aby se uživatel lépe orientoval v informacích, které mu stránky nabízí. Na její význam se často zapomíná.

Jak už zaznělo v předchozím dílu tohoto seriálu – struktura většiny webů by měla být stromová. Pro potřeby firemních webů a e-shopů si s touto strukturou vystačíme.

Vytvářejte stromovou (pyramidovou) strukturu

Stromová struktura je jednoduchý model, ve kterém mají informace jediné místo, jsou seřazené do kategorií a jsou mezi sebou nadřízené a podřízené. Pokud je to potřeba můžete vytvořit pro jeden web více struktur. Jedna z nich bude hlavní a ostatní doplnkové.

Berte strukturu webu vážně

Nejpohodlnější a nejrychlejší způsob, jak vytvořit strukturu stránek je jednoduše okopírovat produktový katalog, nebo organizační strukturu firmy či instituce. Tento způsob je velmi konfortní a vskutku je to také jedna z nejhorších variant. Bohužel je také velmi často využívaná. Podle toho také vypadá velké množství e-shopů, či stránky různých institucí.

Detaily a rozcestníky

Určete si, které stránky budou představovat nějaký detail a které budou pouze rozcestníky (kategorie, sekce, rubriky apod.). Detail je obvykle taková stránka, kterou uživatel hledá. V e-shopu jsou typickým detailem jednotlivé stránky zboží, ale také stránky kontakt, obchodní podmínky apod. I detail může mít podstránku např. upřesnění informací, informace pro odborníky apod.

Typickými rozcestníky jsou kategorie zboží v e-shopu, služeb nebo titulní stránka. Uživateli by měl rozcestník dát na výběr a pomoci mu najít detail, který hledá. I na stránce, která je spíše rozcestníkem, musí být nějaký obsah. Při návrhu struktury tedy zvažujte, jestli vytvořená kategorie bude pro uživatele přínosná a dostatečně návodná, aby se zde dokázal uživatel rozhodnout, kudy a kam dál.

Zvolte vhodné kritérium

Při návrhu struktury musíte vždy mít jasno, podle jakých kritérií budete strukturu tvořit. Struktura e-commerce webu nejčastěji odráží strukturu nabízených produktů nebo služeb. Např.: hlavní část struktury webu autobazaru může vzniknout podle značek vozů, typu jejich karoserie, stáří, nebo mnoha jiných parametrů. Ne každá firma ale může vybírat z tolika kritérií.

Myslete na lidi, pro které strukturu tvoříte

Hlavní struktura bude uživatelům nejvíce na očích, a tak by měla být co nejsrozumitelnější a nejnázornější. Podle hlavní struktur y se většinou vytváří i hlavní navigace. Měli byste tedy důkladně uvažovat o tom, jaké cilové skupině bude struktura sloužit a s jakým cílem na váš web budou lidé přicházet.

Např.: Stránky úřadu určené pro úředníky by měly mít jinou strukturu než stránky stejného subjektu určené pro firmy a občany. Více cílových skupin je někdy možné obsloužit pomocí vedlejší struktury. Vedlejší struktura ale nemusí být stoprocentní řešení a nejspíš bude potřeba vytvořit obsah pro nově vzniklé kategorie.

Různé cílové skupiny se liší nejen v požadavcích, ale také v chápání problematiky a používané terminologie. Strukturu tedy musíte přizpůsobit hlavně potřebám lidí, kterým bude sloužit.

Navigace

Pro návrh ideální navigace neexistuje žádný recept. Vždy je nutné uvažovat v zájmu uživatele a z pohledu toho, co může web nabídnout.

Základní navigace

Základní navigace většinou odpovídá základní struktuře webu a často je zobrazena jako kombinace hlavního a lokálního menu.

Hlavní navigace

Snad každý vícestránkový web obsahuje hlavní navigaci. Obvykle se jí říká menu. Vyskytuje se na každé stránce a obvykle obsahuje odkazy na hlavní sekce webu, nebo na podsekce. Hlavní menu bývá realizováno jako horní – vodorovná navigace, nebo postranní menu (svislá navigace) – častěji se objevuje na levé straně, ale zejména u obsahových stránek a blogů je stále častěji můžeme najít v pravém sloupci.

Lokální (místní) navigace

Na podstránkách webu se často objevuje tzv. lokální navigace, která obsahuje odkazy na vnitřní stránky sekce či podsekce, ve které se uživatel právě nachází. Lokální navigace se nejčastěji vyskytuje na levé nebo pravé straně jako součást svislého hlavního menu (rozbalená část menu), nebo doplněk horního menu. Méně často se vyskytujeméně často ve vodorovné podobě pod horním menu.

Rozbalovací menu

Čím dál méně populární je dynamicky rozbalovací menu, která se rozbaluje při najetí myši na položky. Nejčastěji se objevuje ve vodorovné formě, která je obvyklá i v počítačových programech. Méně často je k vidění ve svislé podobě. Rozbalovací menu často obsahuje celou základní strukturu. Z pohledu tvůrce webu je nutné říci, že k zajištění funkčnosti rozbalovacího menu se používají technologie, které v některých prohlížečích nefungují (kapesní počítače, čtečky handicapovaných občanů, textové prohlížeče), proto je nutné k dynamické navigaci vytvořit alternativu, která umožní používání webu i těmto uživatelům.

Drobečková navigace (breadcrumb)

Obvykle se vyskytuje nad hlavním nadpisem stránky. Má za úkol vyznačovat polohu aktuální stránky v hlavní navigační struktuře a zároven umožnit rychlý přesun na stránky umístěné výše ve struktuře.

Navigační stránky (rozcestníky)

O rozcestnících už byla řeč v souvislosti se strukturou. Jedná se o stránky, které samy nemají žádný vlastní obsah a představují tedy pouze cestu k detailu (obsahu na stránkách). Typickou navigační stránkou je úvodní stránka zpravodajského serveru, úvodní stránky jeho rubrik či přehled článků podle autorů. Navigačními stránkami jsou i výpisy zboží v elektronických obchodech či výsledky vyhledávání vyhledavače. V povídání o struktuře byly nazvány jako rozcestníky.

Kontextová navigace

Pouze se základní navigací si vystačíte pouze u malých webů a i tam bude uživateli mnohdy chybět nějaký ten kontextový odkaz – odkaz, který v souvislosti s obsahem konkrétní stránky odkazuje na jiné místo na stránkách (či na jiný web). Kontextová navigace tedy spojuje související stránky, které nemusí být ve struktuře vedle sebe a pomáhá uživateli najít detailnější nebo příbuzné informace, o kterých se píše jinde na webu. Kontextová navigace se tedy vyskytuje jako odkazy přímo v textu obsahu, nebo jako samostatný blok odkazů na „související stránky“.
Kontextová navigace je velmi vítaná a velmi pomáhá nejen uživateli v orientaci na webu, ale je prospěšná při optimalizaci pro vyhledávače a často se za tímto účelem používá cíleně.

Alternativní a fasetová navigace

Je-li obsah webu velmi rozsáhlý a jde-li na něj pohlížet z různých úhlů, nemusí jedna základní struktura k jeho přehlednému uspořádání stačit. V takovém případě může být vytvořeno více tzv. klasifikačních schémat, které obsah utřiďují podle různých kritérií.

Zminovaný autobazar může tedy třídit auta podle značek (základní struktura), ale také podle alternativních struktur: pobočky, na kterých se auta nacházejí, podle roku výroby a mnoha dalších kritérií. Každé z nich může být pro uživatele přínosné. Podle méně důležitých kritérií lze vyhledávat nebo třídit v seznamech, ta důležitější kritéria mají své vlastní ovládací prvky.

Nástroje

Zajímavé služby, které lze uplatnit téměř na celém webu, nespadají do klasických prvků navigace, ale je dobré na ně odkazovat. Obvykle jsou to např. tisk stránky, doporučení známému, přidání do oblíbených položek, odeslání dotazu k produktu.

Mezi nástroje se ale také dá zařadit fulltextové vyhledávání umístěné na každé stránce, nebo různé parametrické vyhledávání typické pro cestovní agentury, elektronické obchody, autobazary apod. U uživatelů jsou tyto prvky oblíbené, ale musí být opravdu dobře zpracované, aby z nich lidé měli odpovídající zážitek. Pozornost by se měla věnovat nejen samotnému vyhledávacímu formuláři, ale ještě více stránce, která zobrazuje samotné výsledky.

Pomocná navigace

Velmi často se na webech vyskytují důležité odkazy v zápatí stránky – kontakty, právní doložka, mapa stránek apod.

Mapa webu

Již zmíněná mapa stránek je poměrně často používaným navigačním prvkem. Je to jedna či více stránek, které přehledně shrnují obsah celého webu s odkazy na všechny jeho stránky či alespon sekce.

 

Autor: Roman Appeltauer

Návrh funkčních prvků

V drtivé většině případů budeme muset definovat také alespon základní funkční prvky, jejich vzhled a zejména chování.

Které funkční prvky použít

Nejsložitější je v tomto ohledu samozřejmě návrh ucelených webových aplikací, například internetového obchodu. Pokud se ale budeme držet v intencích běžného firemního webu, setkáme se většinou jen s několika obvyklými funkčními prvky, typicky s vyhledáváním, kontaktním formulářem nebo registrací do newsletteru.

Při vymýšlení, které funkční prvky na svých stránkách použijeme, je třeba vycházet z charakteru webu a skutečných potřeb našich návštěvníků. Zároven musíme respektovat i technické možností či rozpočtová omezení. Je tedy například zbytečné nabízet formulář pro registraci a přihlašování uživatelů jenom proto, abychom ho na stránkách měli, když vlastně nemáme registrovaným uživatelům co nabídnout. Stejně tak nemůžeme zobrazovat formulář pro vlastní fulltextové vyhledávání, pokud nemáme k dispozici žádnou technologii, která by zajistila vracení kvalitních a relevantních výsledků hledání.

Způsoby návrhu

Vývojáři našeho webu musíme předat popis jednotlivých funkčních prvků. Požadované chování se dá zachytit pomocí některého z následujících prostředků či jejich kombinace:

• Popis funkcí – prostý textový popis chování funkce, vstupů a výstupů za různých okolností.
• Use case diagramy – diagramy zobrazující interakci mezi uživatelem a funkcí.
• Textové use case diagramy – fungují stejně jako klasické use case diagramy, pouze se nevyjadřují graficky. Jedná se o zápis interakce v podobné posloupnosti jako interview (dotaz uživatele, odpověď systému, dotaz uživatele, odpověď systému…).
• Procesní diagramy.

Při sepisování specifikace bychom měli být důslední a požadované chování popsat do posledního detailu. Předejdeme tak častým nedorozuměním, obtížným dodatečným opravám a změnám.

Obecné vlastnosti formulářů

Většina funkčních interakcí s uživatelem se na webu děje pomocí formulářů. Pro ty platí obecně několik zásad, kterých bychom se měli držet.

Účel formuláře by měl být uživatelům zcela jasný. Neměli by být na pochybách, k čemu slouží, proč a jak ho mají vyplnovat a co se stane, až jej odešlou. Obvykle jej stačí doprovodit výstižným titulkem či krátkým a popisným textem. Je sem také dobré zakomponovat nějakou výzvu, která povzbudí uživatele k použití formuláře.
Každý formulář by měl být co nejkratší a požadovat jen nejnutnější informace.

Dlouhý formulář je vhodné rozdělit do více postupných kroků v podobě průvodce. V opačném případě může jeho rozsáhlost odradit uživatele od vyplnění. Například u kontaktního formuláře si vystačíme zpravidla se třemi vstupními poli – pro jméno, kontakt a samotnou zprávu. Jakékoliv další položky (jako je předmět zprávy, firma, funkce nebo pět dalších kontaktů) jsou obvykle zbytečné. Stejně tak pro vyhledávání stačí na běžných stránkách nabízet pouze jedno vstupní pole pro hledanou frázi a odesílací tlačítko, všechny další volby či rozšířené vyhledávání je dobré nechat až na speciální stránku. K objednání newsletteru zase stačí vyplnit e-mail a je zbytečná jakákoliv registrace s uživatelským jménem a heslem.

U jednotlivých prvků formuláře se musíme rozhodnout, zda je jejich vyplnění povinné či volitelné. Povinná pole musíme vždy zřetelně odlišit, obvykle se k tomu používá hvězdička. Mají-li být údaje do pole zadávány v nějakém speciálním formátu nebo mohou-li být uživatelé na pochybách, v jakém formátu mají údaj uvést (typicky například datum), měli bychom jim to jednoznačně sdělit a nejlépe doprovodit i příkladem. Na druhou stranu by měly být formuláře schopny zpracovat a pochopit všechny obvyklé formáty (rodné číslo s lomítkem i bez lomítka, PSČ s mezerou i bez apod.).

Po odeslání formuláře probíhá kontrola správnosti vstupních údajů, jejich formátu, vyplnění všech povinných položek apod. Při návrhu musíme specifikovat chování webu při všech případných chybách. Chybová hláška by měla být vypsána jasně a zřetelně, aby si jí uživatel okamžitě všiml. Nejlépe je výrazně označit inkriminované formulářové pole a chybovou hlášku vypsat přímo k němu.

Po úspěšném odeslání formuláře je třeba určit, co se má stát se zadanými daty. V případě kontaktního formuláře si tedy budeme chtít nechat zprávu poslat na e-mail, u newsletteru přidat zadanou adresu do databáze odběratelů. Složitější to bude u vyhledávání. Tam musíme popsat přesný způsob, podle kterého se má vyhledávat, ve kterých oblastech webu hledat, zda používat rozšiřování dotazů o různé tvary slov a synonyma, jak následně výsledky vypisovat, podle čeho je řadit, zda a jak je seskupovat apod. Zvláštní specifikaci si pak vyžádá rozšířené hledání.

Po bezchybném odeslání formuláře nesmí zůstat uživatel na pochybách, zda vše proběhlo v pořádku. U vyhledávání se tedy uživateli zobrazí výsledky hledání, u dalších formulářů je ideální speciální potvrzovací či děkovací stránka, kde uživateli navíc nabídneme i možné odkazy, kam může na našem webu pokračovat dále.

 

Autor: Jan Tichý

Jak pracovat s maketami stránek

V předchozích dílech seriálu jsme si ukázali, jak důležitá je příprava základní struktury webu. V tomto díle se strukturami pokročíme – nadefinujeme si struktury jednotlivých klíčových stránek a znázorníme je v tzv. maketách (wireframes).

Jak tedy nejlépe nadefinovat strukturu klíčových stránek webu? Nejprve si vemte k ruce vše, co jste si v přípravě připravili do této doby. Zejména to budou obsahové, funkční navigační prvky, se kterými pro web počítáte. Dejte si na pomyslnou hromádku veškeré textové části webu (články, aktuality, textové tipy atp.), navigační prvky (drobečková navigace, hlavní menu, kontextová menu), funkční prvky (vyhledávání, přihlášení uživatelů, řazení a porovnání produktů atp.) nebo orientační prvky (hlavička s logem, patička, nadpisy atp.).

Pokud máte pohromadě všechny prvky, které se mají do stránky vejít, vaším dalším úkol bude jejich vzájemná prioritizace. Jednotlivé prvky si seřaďte podle toho, jakou mají vůči sobě prioritu. Jsou články důležitější než titulky? Je vyhledávací formulář důležitější než formulář pro přihlášení uživatele? Prvky s větší prioritou by totiž měly ve výsledném grafickém návrhu dostat vyšší vizuální prioritu, které se dá jednoduše docílit vhodným umístěním ve stránce, použitou barvou pozadí a popředí, velikostí písma atp.

Nyní můžeme pokročit s samotným maketám stránek – tzv. wireframům. Wireframe je jednoduchá skica webové stránky, ve které jsou načrtnuty všechny prvky tak, jak by jednou měly vypadat v grafickém návrhu. Představte si, že pomocí obyčejné tužky a kusu papíru namalujete, kde bude hlavička, kde patička, co se všechno nachází v hlavním sloupci, co obsahuje vedlejší sloupci, kde jsou aktuality, kde vyhledávací formulář atp. Nemusíte zacházet do bližších detailů, stačí obrysy a kontury, které si dobře popište a znázorněte priority.

Blok a tužka je sice dobrý prostředek, ale často bývá vhodnější využít některého elektronického formátu. V takovém případě můžete použít některý kreslící program, nebo specializovaný program typu Microsoft Visio nebo Omnigraffle.

Pomocí wireframů navrhněte všechny klíčové stránky vašeho budoucího webu. K čemu jsou vlastně tak užitečné? Jejich přínos poznáte v situaci, kdy se budete bavit s grafikem o grafickém návrhu. Wireframe nejlépe popisuje, jaké prvky se mají vyskytovat na stránce, jaká je jejich vzájemná priorita atp. Grafik pak může lépe odvést svoji kreativní práci, přičemž zachová zadání, které jste mu připravili, na nic nezapomene, nezamění vzájemné priority. Čím více času a úsilí věnujete tvorbě wireframů, tím více si ušetříte času a námahy při přípravě grafických návrhů.

Autor: David Špinar