Jak navrhnout strukturu webu, ve které se lidé neztratí

Struktura webu není jen seznam položek v horním menu

O struktuře se často začne mluvit větou: „Nahoře bude O nás, Služby, Reference a Kontakt.“ To je možný výsledek, ale ještě ne návrh. Struktura webu popisuje, jak spolu souvisejí témata, stránky a kroky, kterými člověk prochází. Menu z ní ukazuje jen jednu část.

Návštěvník navíc nemusí přijít přes úvodní stránku. Může přistát z vyhledávače rovnou na detailu služby, dostat od obchodníka odkaz na referenci nebo otevřít článek sdílený kolegou. I na takové stránce musí pochopit kontext, najít související informace a udělat rozumný další krok. Struktura proto žije také v nadpisech, odkazech uvnitř textu, drobečkové navigaci, přehledech a jasných názvech stránek.

GOV.UK doporučuje navrhovat službu od začátku do konce podle toho, co potřebuje člověk vyřídit, a nevystavovat mu zbytečně vnitřní uspořádání organizace. Firemní web by se neměl stát kopií organizačního diagramu. Zákazník nemusí vědět, které oddělení má produkt na starosti. Potřebuje poznat, zda řešíte jeho situaci a co má udělat dál.

Začněte tím, co o lidech a obsahu opravdu víte

Než začnete kreslit novou mapu webu, vraťte se k zadání a přípravě obsahu a podkladů. Jaký problém má web řešit, kdo jej používá a které úkoly jsou nejdůležitější? Pokud odpovědi chybějí, samotný workshop s barevnými lístečky je nenahradí. GOV.UK upozorňuje, že názor kolegy nebo nápad z porady je předpoklad, dokud jej neopřete o chování skutečných lidí.

Užitečné stopy bývají blíž, než se zdá. Projděte dotazy z e-mailů a telefonů, interní vyhledávání, nejnavštěvovanější stránky, časté chyby ve formulářích nebo poznámky obchodníků. Promluvte si s několika zákazníky, kteří službu hledali poprvé. Nechtějte po nich, aby navrhli menu. Ptejte se, co řešili, jakými slovy to pojmenovali, co potřebovali vědět a kde váhali.

Současně udělejte jednoduchou inventuru obsahu. Nemusí to být dokonalá tabulka o stovkách sloupců. U každé důležité stránky si poznamenejte adresu, účel, vlastníka, aktuálnost a rozhodnutí: ponechat, přepracovat, sloučit, odstranit nebo teprve vytvořit. Tady se často ukáže, že web není nepřehledný kvůli špatné barvě menu, ale kvůli pěti podobným stránkám, z nichž každá říká něco jiného.

Sepište hlavní cesty jako skutečné situace

Mapa webu se navrhuje lépe, když před ní leží několik konkrétních příběhů. „Uživatel si prohlíží služby“ je příliš obecné. Lepší je: „Majitel malé firmy řeší naléhavý problém, potřebuje během pár minut ověřit, zda mu umíme pomoci, a chce vědět, co si připravit k prvnímu hovoru.“ Taková situace napoví, které informace musí být pohromadě a co naopak může počkat.

1. 01

   Spouštěč

   Co se právě stalo, že člověk web otevírá? Hledá poprvé, porovnává nabídky, vrací se pro dokument nebo potřebuje pomoc?

2. 02

   Otázky

   Co musí zjistit, než se dokáže rozhodnout? Cena, vhodnost, termín, podmínky, důvěryhodnost nebo konkrétní parametr?

3. 03

   Rozhodnutí

   Podle čeho vybere správnou variantu a jak pozná rozdíl mezi podobnými službami?

4. 04

   Výsledek

   Co má zvládnout: zavolat správnému člověku, odeslat dobrou poptávku, objednat, stáhnout podklad nebo problém vyřešit bez kontaktu?

Pro první návrh obvykle stačí tři až pět nejdůležitějších cest. Neznamená to, že ostatní lidé nejsou důležití. Jen potřebujete pevný bod pro rozhodování. Když se dvě sekce přou o místo v navigaci, vraťte se k cestám a ptejte se, která varianta usnadní častý a důležitý úkol.

Seskupujte obsah podle otázek, ne podle toho, kdo jej napsal

Vezměte důležitá témata a zkuste je seskupit tak, jak by je hledal člověk zvenku. Firemní názvosloví zatím odložte. Pokud návštěvníci mluví o školení, nenazývejte položku „Rozvoj lidského kapitálu“ jen proto, že tak zní název interního programu. Dobré pojmenování bývá obyčejné, přesné a předvídatelné.

Při třídění se ptejte, zda každá skupina odpovídá jedné srozumitelné otázce. Sekce „Pro zákazníky“ a „Naše řešení“ mohou obsahovat téměř cokoli. Bez rozkliknutí člověku mnoho neřeknou. Naproti tomu „Účetnictví pro firmy“, „Ceník“ nebo „Návody k výrobku“ nastavují očekávání poměrně jasně.

• Jedno téma má jedno hlavní místo. Na jiných stránkách na něj odkazujte, nevytvářejte pokaždé další verzi.
• Skupiny se navzájem co nejméně překrývají a člověk nemusí hádat mezi dvěma podobnými názvy.
• Důležité stránky nejsou schované jen proto, že nezapadají do organizačního členění firmy.
• Každá stránka má vlastníka, který pozná, kdy je obsah zastaralý.

U většího webu můžete použít třídění karet: lidé dostanou názvy témat a skládají je do skupin, které jim dávají smysl. Výsledek není hlasování o jediné správné struktuře. Ukáže spíš místa, kde jsou vaše názvy nejasné nebo kde různí lidé očekávají obsah jinde. Právě tato sporná místa stojí za další ověření.

Nakreslete mapu webu, které rozumí i člověk mimo projekt

Teprve teď převeďte skupiny do mapy webu. Začněte hlavními přehledy a pod ně umístěte konkrétní stránky nebo typy obsahu. Mapa nemusí zachycovat každou budoucí novinku. Musí ale ukázat vztahy, úrovně a cesty mezi důležitými místy.

Úvodní stránka
├── Služby
│   ├── Přehled služeb
│   ├── Vedení účetnictví
│   └── Mzdy a personalistika
├── Jak spolupráce probíhá
├── Reference
│   └── Detail reference
├── Poradna
│   └── Detail článku
└── Kontakt

Hloubka sama o sobě není nepřítel. Horší než tři smysluplné kroky jsou dva kroky založené na nejasné volbě. Přesto každou další úroveň obhajte: pomáhá lidem rozlišit větší množství obsahu, nebo jen vytváří mezistránku s jediným odkazem? Prázdné rozcestníky a stránky vzniklé pouze kvůli menu cestu často prodlužují.

Mapa webu také není totéž co XML sitemap pro vyhledávače. Tady jde o pracovní model obsahu pro tým a návštěvníky. Technický soubor se řeší při vývoji a spuštění. Oba výstupy by si samozřejmě neměly odporovat, ale každý má jiný účel.

Menu má být krátké na přemýšlení, ne za každou cenu na počet položek

Neexistuje univerzální počet položek, který udělá menu dobrým. Pět nesrozumitelných názvů může být horších než osm jasných. Sledujte hlavně to, zda člověk dokáže správně odhadnout, co se po kliknutí stane, a zda jsou nejdůležitější cesty dostupné bez hledání v několika rozbalovacích úrovních.

Názvy pište jazykem publika a držte je napříč webem stejné. Pokud jednou nabízíte „Konzultaci“, jinde „Úvodní hovor“ a ve formuláři „Nezávaznou poptávku“, může jít o tři rozdílné kroky — nebo o tentýž krok pokaždé pojmenovaný jinak. Sjednoťte pojmy, případně rozdíl otevřeně vysvětlete.

W3C připomíná, že navigace musí být použitelná myší, dotykem i klávesnicí a její struktura má být vyznačená srozumitelně i pro asistivní technologie. To neznamená, že při návrhu informační architektury musíte napsat hotový kód. Už teď se ale vyhněte řešení, které spoléhá pouze na najetí myší, skrývá důležité odkazy nebo vyžaduje přesné trefování do malých ploch.

Každá stránka potřebuje vlastní malou osnovu

I výborná mapa webu selže, když jednotlivé stránky začínají dlouhou firemní historií a odpověď schovají až pod třetí banner. U každého důležitého typu stránky si napište, s čím člověk přichází, co musí pochopit jako první a jaké rozhodnutí má udělat potom.

Nadpisy tvoří osnovu stránky. Mají popisovat obsah následující části, ne sloužit jen jako větší dekorativní text. Když si přečtete pouze hlavní nadpis a mezititulky, měli byste získat věrný přehled. W3C doporučuje používat nadpisy ve smysluplné hierarchii a rozpoznatelné oblasti stránky, protože pomáhají s orientací lidem, kteří obsah čtou, skenují i používají čtečku obrazovky.

• Hlavní nadpis jednoznačně říká, o čem stránka je, i když člověk přišel přímo z vyhledávače.
• Úvod rychle potvrdí, pro koho je obsah určený a co zde lze vyřešit.
• Nejdůležitější otázky přicházejí před firemními argumenty a doplňkovými detaily.
• Odkazy popisují cíl. Samotné „více“, „zde“ nebo „klikněte“ mimo kontext nestačí.
• Na konci není slepá ulička, ale přiměřený další krok nebo cesta k pomoci.

Ověřte názvy a cesty dřív, než je obalíte hotovým designem

Strukturu lze testovat jako jednoduchý textový strom, bez barev a fotografií. Dejte člověku situaci — například „potřebujete zjistit, zda firma umí zpracovat mzdy pro třicet zaměstnanců“ — a požádejte ho, aby v navržené struktuře ukázal, kam by šel. Sledujte cestu a nechte ho nahlas popsat, co pod názvy očekává.

Nenapovídejte a neptejte se jen „líbí se vám menu?“. Zajímejte se, kde člověk zaváhal, proč se vrátil a zda cíl našel tam, kde jej čekal. Pět dobře vybraných rozhovorů není statistická jistota, ale může odhalit opakující se nejasnost dřív, než se promítne do návrhu všech obrazovek.

Potom stejné cesty projděte v jednoduchém wireframu na mobilu i na větší obrazovce. Mobilní verze nesmí být ochuzenou odbočkou, ve které důležitá stránka zmizí. Google u mobilního indexování doporučuje zachovat na mobilní variantě stejnou sadu odkazů. Pro návštěvníka je ovšem důvod ještě přímočařejší — jeho úkol není méně důležitý jen proto, že drží telefon.

Předejte vývoji vztahy a pravidla, ne jen obrázek menu

Schválená mapa webu je začátek technické domluvy. Každý typ stránky potřebuje navrženou adresu, rodičovskou sekci, cestu z dalších relevantních míst a pravidla pro budoucí obsah. Google doporučuje jednoduché a popisné URL v jazyce publika. Není nutné do adresy vtěsnat celou hierarchii, měla by však být stabilní a čitelná.

Důležité stránky propojte běžnými HTML odkazy s adresou v atributu href. Google Search Central uvádí, že takové odkazy dokáže spolehlivě procházet. Prvky, které pouze vypadají jako odkaz a reagují na skript, nemusí stejnou roli splnit. Především ale zachovejte odkazy srozumitelné a funkční pro člověka i bez hádání.

Při předání pojmenujte také výjimky. Co se stane se službou, která patří do dvou kategorií? Která cesta je její hlavní a odkud se na ni pouze odkazuje? Jak se zařadí nový článek? Kdo může změnit název položky navigace? Bez těchto pravidel se čistá struktura začne krátce po spuštění znovu rozpadat.

Samostatně pak následuje přístupnost komponent, rychlost, indexační signály, XML sitemapa, přesměrování starých adres a kontrola před spuštěním. Struktura jim dává společný základ, sama je ale nenahrazuje.

Co má po návrhu struktury zůstat na stole

Výstup nemusí být stostránková prezentace. Měl by být natolik konkrétní, aby podle něj dokázal obsahový tým psát, designér navrhovat a vývojář stavět bez tří rozdílných výkladů.

• Seznam hlavních situací a cest, pro které web vzniká.
• Inventura současného a chybějícího obsahu s vlastníky a rozhodnutím o dalším použití.
• Mapa webu s jasnými názvy, vztahy a označením typů stránek.
• Návrh hlavní a doplňkové navigace včetně chování na mobilu.
• Osnovy nejdůležitějších stránek a jejich další kroky.
• Záznam ověřených cest, problémových názvů a rozhodnutí, která ještě čekají.
• Pravidla pro adresy, propojování a zařazování budoucího obsahu.

Dokument označte datem a vlastníkem. Struktura se při práci s reálným obsahem pravděpodobně ještě upraví a je v pořádku ji zpřesnit. Důležité je, aby změna měla důvod: nové zjištění o lidech, chybějící obsah nebo technické omezení. Ne pouze to, že někomu na poradě připadá jiné slovo modernější.

Dalším krokem je návrh skutečných stránek a komponent s reálnými texty. Během vývoje průběžně kontrolujte, zda navigace funguje klávesnicí, odkazy dávají smysl, stránky jsou rychlé a žádná hlavní cesta nezmizela. Před spuštěním pak projděte strukturu znovu jako celek — tentokrát už na hotovém webu a podle společného kontrolního seznamu.