A jak to nedělat!
Když kolem roku 2000 firmy začaly poptávat webové stránky, často ještě ani nevěděly, na co jim budou: “Konkurence je má, tak my je chceme taky.” Nikoho nezajímalo, co na nich bude, ale měli jste vidět ty bitvy o to, jak budou vypadat! Texty nakonec dodala sekretářka tak, že zkopírovala firemní inzerát ze Zlatých stránek.
Je to teď jiné? Jak co. Obecně se už ví, že obsah je také důležitý, ale nejvíce připomínek je i tak vždy ke grafice. Stále s ní někdo začíná, a obsah se pak musí natlačit do hotové „šablony“, ať už tam pasuje nebo nepasuje.
Jak tedy navrhnout užitečný web?
1. Víte, na co web potřebujete? (Strategie)
Začněte dvěma opačnými pohledy a ujasněte si:
a) potřeby uživatelů
Váš zákazník nechce vaše webové stránky. Chce něco úplně jiného. Web je jen jedno z médií, které mu pomůže k dosažení dané věci. A cílem webových stránek je umožnit zákazníkovi splnit jeho cíl. Ať už je cílem nákup sukně, rezervace schůzky nebo jen ujištění, že u vás zaparkuje.
Takže – kdo jsou vaši uživatelé a co chtějí vyřešit? Zde nastupuje uživatelský výzkum, persony a analýza konkurence. I když si myslíte, že potřeby svých zákazníků znáte, doporučuji nepřeskakovat. Viděl jsem už mnoho překvapených obchodníků a majitelů webů.
b) cíle webu
To, co chce vaše firma, je samozřejmě také důležité. Jde o vaše peníze. Cíle webu vycházejí přímo od vás a odpovídají na otázku: “Co od plánovaného webu nebo aplikace očekáváme my jako jeho tvůrci?” Zlepšení prodeje o 80 %? Budování značky? Úspory nákladů na infolinku o 50%…
Ideálně vymyslete nějaké měřitelné přínosy, abyste si pak mohli ověřit, jestli se web povedl.
A takhle vám sama vznikne strategie webu. Strategie není to, co si vymyslí šéf, ale průnik toho, co potřebuje váš byznys a toho, co skutečně chce uživatel.
2. Co přesně budete stavět? (Rozsah projektu)
Strategie vám říká, čeho chcete webem dosáhnout. Teď si musíte odpovědět na to, jak to ten web udělá. Musíte určit, jaké funkce má web mít a co bude obsahovat. A naopak to, co mít nemá.
a) funkce webu
Popište vše, co má web umět. Ne jak bude vypadat, ale jaké bude mít funkce. Např. uživatel si může přidat tovar do košíku, uživatel musí mít možnost resetovat heslo, uživatel může filtrovat produkty podle ceny, uživatel může…
b) obsahové požadavky
Ujasněte si, jaké informace na webu budou a pak ten obsah musíte vytvořit. Nebo určit toho, kdo to udělá za vás. Obsahem myslím textové popisky, produktové obrázky, pdf manuály, video tutoriály…
Také rozhodněte, kdo a jak často jej bude aktualizovat.
Častou chybou je řešit rozsah až na konci. Bez jasně definovaného rozsahu hrozí, že se projekt neustále nafukuje, termíny se posouvají a rozpočet pláče.
3. Jak se web bude chovat a jak bude uspořádaný? (Struktura)
Dáte požadavkům z předchozí fáze řád. Definujete, jak se uživatel v systému pohybuje.
a) informační architektura
Jak je obsah uspořádán? Kategorie, podkategorie, hierarchie… Cílem je, aby uživatel našel to, co hledá bez přemýšlení.
b) interakční design
Jak systém reaguje na akce uživatele? Co se stane, když klikne na toto tlačítko? Kam se dostane? Co uvidí, když nastane chyba?
4. Jak budou jednotlivé stránky vypadat a fungovat? (Obrys)
Tady se konečně abstraktní struktura mění v konkrétní rozvržení obrazovek. Zde se už začíná „kreslit“, ale stále bez barev a fotek. Toto je doména UX designérů a jejich wireframů.
a) informační design
Jde o to rozhodnout, jak prezentovat informace tak, aby byly srozumitelné. Např. grafické znázornění vývoje akcií vs. pouhá tabulka čísel.
b) návrh rozhraní
Výběr a umístění prvků, se kterými uživatel interaguje. Rozmístění ovládacích prvků (tlačítka, formuláře, checkboxy) tak, aby byla interakce efektivní.
c) navigace
Jak se uživatel dostane z bodu A do bodu B? Menu, drobečková navigace, vyhledávání. Prvky, které uživateli umožňují pohybovat se strukturou z jedné stránky na druhou.
5. Jak to bude vypadat? (Povrch)
Toto je to, co uživatel vnímá jako první. Tento krok je to, co většina lidí mylně považuje za „celý design“. Je to vizuální zpracování všeho, co jste rozhodli a připravili předtím.
Grafika webu nebo aplikace má také svůj význam:
a) určuje vizuální hierarchii
Barva, velikost a kontrast říkají uživateli, co je jak důležité.
b) zaručuje přehlednost a srozumitelnost
Správně prezentované informace se lépe čtou a uživatel snáze pochopí vztahy a souvislosti.
c) reprezentuje a podporuje značku
Používá firemní a brandové barvy, písma a grafické prvky.
d) dodává emoce
Barvy, ilustrace, fotky a typografie nejsou jen estetickou záležitostí, ale mají i psychologický význam.
Ale měla by být grafika tím, o čem jsou největší diskuse?
Proč tenhle postup funguje?
Umožní domluvu mezi byznysem a designem
Fáze Strategie a Rozsah mluví jazykem managementu (peníze, cíle, funkce). Další fáze – Obrys a Povrch mluví jazykem designérů (pixely, barvy, layout). No a struktura je mostem mezi nimi.
Můžete pracovat na vícero fázích najednou
Nemusíte vždy čekat, až se jedna fáze 100% dokončí, aby začala další. Jenom si musíte uvědomit, že každá změna v “nižší” fázi vyžaduje revizi těch vyšších.
Ale kdo to vše udělá?
U malých webů to zvládnete sami, nebo vám pomůže kvalitní designér. Třeba já. U větších projektů s ambicióznějšími cíli už budete pravděpodobně potřebovat tým odborníků.