Petr Staníček

2016

I. vydání

Copyright © Petr Staníček, 2016

Ilustrace © Marek Douša, 2016

Vydáno vlastním nákladem autora

Tato e-kniha byla poskytnuta jako doplněk k zakoupené tištěné publikaci. Další šíření a prodej nejsou dovoleny.

ISBN 978-80-260-9534-7  (ePUB)
ISBN 978-80-260-9535-4  (Mobipocket)
ISBN 978-80-260-9536-1  (PDF)

Děkuji své ženě a dětem za tu dvouletou trpělivost.

„Dokonalosti nedosáhneme tehdy, když už není co přidat, ale pokud už nemáme co odstranit.“

— Antoine de Saint-Exupéry

Předmluva

Tato kniha se věnuje popisu základních postupů velmi širokého a obsáhlého oboru webového (a obecně interakčního) designu se spoustou dílčích podoborů a souvisejících profesí. O tématu každé z jejích kapitol by se dala napsat samostatná kniha — a dost často taky napsána byla, mnohdy dokonce spousty knih, článků a příspěvků. Nechce a ani nemůže si proto klást za cíl být nějakou kompletní encyklopedií všech profesních znalostí. To při současném rozsahu tohoto oboru není ani možné. Spíše ji chápu jako jakési kompendium, souhrnný přehled tohoto oboru, základní průřez hlavními otázkami, problémy i zákoutími, se kterými se webový designér při své práci může setkat. Každá kapitola načrtává základní informace a poskytuje zběžné seznámení s danou částí oboru, vývojovým krokem či pracovním postupem — a čtenář si k nim v případě potřeby může přibrat další zdroje a literaturu k hlubšímu studiu.

Úmyslně ale na žádné konkrétní články či související literaturu neodkazuji a snažím se pokud možno vyhýbat i příliš konkrétním příkladům. V dnešní době je kvantum publikovaného obsahu tak velké a vývoj technologií tak překotný, že jen během samotného procesu dokončení a vydání této knihy už bude polovina odkazů zastaralá, nefunkční nebo již dávno změněná. Místo toho jsem si dal za cíl jen vytyčit příslušná témata, sepsat související pojmy a klíčová slova, aby tato publikace mohla po nějakou dobu sloužit alespoň jako průvodce a klíč pro vyhledávání právě platných a aktuálních informací i vodítko pro další studium. Neboť jednotlivé používané technologie, dostupné zdroje i módní trendy se mění každým dnem, ale postupy a zásady zmíněné v této knize by mohly mít přece jen obecnější platnost a zůstat použitelné delší dobu bez ohledu na konkrétní použitá technická a designová řešení.

Tato knížka si nehraje na nějaké obecné pravdy a není to ani vědomý kompilát jiných zdrojů k tématu. Je především souhrnem mých vlastních, osobních zkušeností z více než dvacetileté praxe v médiích, reklamě, na vývoji softwaru a především v navrhování a tvorbě webů a aplikací. Předkládá závěry, které jsem si z nich během času sám vyvodil a které se mi mnohokrát osvědčily. Naznačuje možné riziko problémů, se kterými jsem se mnohokrát setkal. Popisuje časté chyby, kterých jsem se sám dopouštěl a postupně se učím jich vyvarovat. Protože od kolegů a přátel z oboru vím, že se potýkají s týmiž chybami, řeší tytéž problémy a mnozí došli k podobným řešením a postupům jako já, dospěl jsem k závěru, že seznámení s nimi může být užitečné i leckomu dalšímu. I kdyby jen k tomu, aby se o danou problematiku víc zajímal a přišel s lepším a efektivnějším řešením. Pak kniha splnila svůj účel.

Je možné — občas dokonce pravděpodobné — že některá řešení, pravidla a postupy zmíněné v knize mají svůj zdroj někde jinde. Budu k vám ale upřímný: pokud si v daném případě uvědomím a vzpomenu, že (a kde) jsem se s dotyčným názorem či návodem setkal, kde jsem ho poprvé slyšel nebo četl, rád na tento zdroj odkážu. Ale popravdě to většinou už ani nevím. Za ta dlouhá léta praxe v designu a okolních oborech jsem nasál velké množství informací ze všech stran jako houba a dnes už jen těžko dokážu posoudit, co konkrétně je aplikovaná myšlenka někoho jiného, a co třeba jen můj názor nebo vlastní, ale praxí ověřený postup. A co je kombinací všeho. Netroufnu si proto v žádném případě tvrdit, že jsem výhradním autorem všech zde sdělovaných myšlenek — jste-li přesvědčeni, že cokoli z uvedeného už jindy a jinde tvrdil někdo jiný, máte nejspíš pravdu. Mým skromným přínosem k tomuto tématu nemá být víc než shrnutí těchto nashromážděných podnětů a zkušeností do jednoho celku a jejich prezentování coby uceleného pracovního modelu, který se mi v praxi nejvíce osvědčil.

Nic víc se tato kniha nesnaží nabízet — ale popravdě a pro změnu zcela bez skromnosti: nenabízí ani o nic méně. Ucelený pracovní rámec použitelný pro všechny, kdo se zabývají tvorbou webů a jiných interaktivních aplikací. A dost možná nejen pro ně.

Petr Staníček, 3. prosince 2015

Designér, klient a uživatelé

Úvod

Není ve světě podnikání většího a zásadnějšího rozporu než mezi prodávajícím a kupujícím. Mezi zájmy majitele podniku a zájmy jeho zákazníků. Každý jejich střet v prodejně či provozovně je epickým střetem dvou protikladných světů. Rozdíl perspektiv na obou stranách nemůže být větší.

První z nich je doma. Prodávající je na své vlastní půdě, uprostřed svého vesmíru, obklopen svým majetkem, sebejistý, sebestředný, s detailní znalostí každého šroubku vůkol, s podrobným přehledem o stavu skladových zásob i hotovosti v kase do posledního haléře. Všechno tohle kolem vybudoval těmahle vlastníma rukama a zkrápěl vlastním potem. Třeba támhleta malá rýha na pultu, to jak jsme se tuhle strašně mordovali s těma novýma regálama, to vám byla fuška! Ale pěkný to tu máme… Ten krám je jeho svět a ten svět se točí kolem vydělání peněz. Nakoupit, prodat, otáčet zboží, jeden zákazník, druhý, čtyřistapadesátosum, děkuji pěkně, další prosím, žádný velký mazlení, hrňte je sem po tuctech, ať máme do večera vyděláno.

Ten druhý je tu cizincem v cizí zemi. Odskočil si z ulice, možná jen pro rohlík ke svačině, nebo přišel obhlídnout ledničky, až budou doma napřesrok rekonstruovat tu kuchyň, aby věděl, jak je teď dělají velký a co to tak asi bude stát. Nebo s telefonem u ucha a myšlenkami soustředěnými na ligový zápas hledá po kapsách lísteček od manželky. Chleba, sýr (ale ne ten s tou myškou, po tom malej blinká), pár rajčat, prášek na praní, dvoje plíny. Cože? Jaká akce? Jaký ponožky? Já nechci žádný třetí zdarma — ale nic, Franto, tady mi cpou nějaký ponožky nebo co. Tak platil ten gól nebo jak — hergot, jakou kartičku zase? Nemám, nechci!

Cílem obchodníka je prodat a prodávat. Co nejdráž, co nejvíc, vydělat na to holé živobytí — anebo třeba na novýho bavora v turbu a dovču na Seychelech, kdo ví. Ale chce hlavně prodávat. Chce spokojené zákazníky, co budou nakupovat dál a víc, protože se budou vracet a posílat sem i manželky a tatínky a sousedy a bude se prodávat a prodávat a zase prodávat. To je cíl dnešního dne, týdne, měsíce, pětiletky.

Cílem návštěvníka naproti tomu — a zde jako správný kontrapunkt určitě očekáváte „je levně nakupovat“. Jenže houby. S voctem. Hlavním cílem dnešního dne pro velectěného pana návštěvníka vůbec není nakupovat. Ani trochu. Ani levně. Ani výhodně. Se slevou. Kvalitně. V akci. Jeho aktuálním cílem je vzpomenout si, jestli doma vypnul ten plyn. Přijet včas na schůzku. Nezapomenout zase vyzvednout dítě ze školky, protože manželka má školení. No jo vlastně, večeři uvařit. Tak snad nějaký instatní nudle, ne? A hlavně: aby ti umělci v těch Počernicích dali aspoň toho jednoho ušmudlanýho góla, chci snad tak moc?

Ano, ocitl se přitom v obchodě. Drobná nepodstatná epizodka v běhu dne. Asi chce něco koupit. Nebo možná ne. Třeba ani neví. Chodí mezi regály a kdoví nač myslí. Impozantní krásu těch nových regálů — na které je pan majitel tak hrdý — vůbec nevnímá, bloumá mezi nimi a přemýšlí, jestli teda nakonec ty instantní nudle, nebo raději mraženou pizzu. A kde sakra jsou ty pitomý rajčata. Kvůli překážející paletě nezajel do uličky (kde by ho býval možná zaujal ten pětihvězdičkový koňak v akci). A nakonec na něj vřeští nevrlá pokladní, protože si ta rajčata měl přece nejdřív zvážit. To přece ví každej, milej pane. To je stokrát denně, tohleto, jak to můžete nevědět? A do toho prej bude penalta, sakra. Hergot, a jakou kartičku zase?!

Právě takové je i kolbiště oborů designu, kterým se věnuje tato kniha. Není moc zásadní rozdíl, jestli se budeme bavit o denních střetech majitele smíšeného zboží v Poťáplech s Frantou traktoristou, anebo o významné disproporci zájmů provozovatele mamutího online rezervačního systému letenek na internetu a jeho Franty uživatele. Podstata je stále táž.

Úkolem nás jako designérů je řešit věčný rozpor mezi záměry provozovatelů aplikací a potřebami jejich uživatelů. Hledat styčný bod mezi zájmy a cíli obou stran a vybudovat k němu pro oba příjemnou a pohodlnou cestu.

Designér

Než se dostaneme k upřesnění pojmu designér v širším pojetí, o kterém tato kniha pojednává, zastavme se nejdřív u pojmu jiného, s naším tématem velmi úzce souvisejícího: UX design.

UX je zkratkou již zavedeného anglického pojmu User eXperience. Česky, ne zcela věrně, se překládá jako uživatelský prožitek. Ten původní pojem experience zde má ovšem mnohem širší a košatější význam. Zahrnuje v sobě i zkušenosti, zážitky, emoce, postoje, přístup, styl používání, proces učení, vzorce chování a jejich změny a vývoj. Tedy vše, co jako uživatelé nějakého produktu děláme, co při tom (ale i předtím a potom) prožíváme, jaké to v nás budí nálady a jaké generuje souvislosti, co si z toho odnášíme, jak to ovlivňuje náš život a co to v nás zanechává. Je to celý složitý komplex, který doslovný překlad uživatelský prožitek nevystihuje zcela přesně. Proto je vhodnější zůstat u pojmu UX, nesnažit se jej překládat a brát ho jako zavedený technický termín se specifickým významem.

Potažmo UX design — neboli návrh UX, navrhování a vytváření těchto „uživatelských prožitků“ — se zabývá právě tím, aby ono používání bylo příjemné, užitečné, aby budilo pozitivní emoce, abychom si z něj odnášeli příjemný zážitek a pozitivní zkušenost, aby v nás zanechalo příjemnou stopu. Možná vás teď napadá, že tohle přece nijak úzce nesouvisí jen s nějakou tvorbou webových stránek nebo počítačových a mobilních aplikací, že takový UX design musí být mnohem širší obor, pokrývající téměř všechny druhy lidské činnosti.

A skutečně to tak je. Každý průmyslový design, návrh židle, auta nebo talíře je současně i designem UX. Záměr a provedení výstavy, koncertu nebo konference, koncepce zábavního parku, styl a atmosféra restaurace, provedení naučné stezky v přírodním parku — všechno jsou to praktické aplikace UX designu.

Tato kniha však nemá za cíl se zabývat UX designem jako takovým a jeho záběr pro své potřeby zužuje jen na jeden malý podobor. Tím je UX design interaktivních aplikací. Co přesně tím máme na mysli, si povíme vzápětí.

Jenže my současně s tím předmět našeho zájmu také budeme rozšiřovat. Pokusíme se udělat krok zpět a nahlédnout na samotný design z trochu širší perspektivy. Jedním z hlavních konceptů, které se následující kapitoly snaží zachytit a popsat, je totiž mnohem obecnější pojetí designu, a to v rozsahu, který odpovídá skutečnému záběru činnosti typických interakčních designérů v běžné praxi. A tak kromě samotného navrhování výsledného produktu musíme nezbytně přibrat i další činnosti: komunikaci s klientem, analytickou práci a koordinování činnosti mnoha dalších zúčastněných profesí.

Interaktivní aplikace

Slovo aplikace poprvé zaznělo už v úvodní kapitole. Rád bych se u něj zastavil, protože pro někoho možná mohlo být zpočátku trochu matoucí.

Pojem aplikace už se ustálil ve významu software (softwarová aplikace, počítačový program) natolik, že je zbytečné se snažit to nějak radikálně měnit. Nicméně jeho původní význam je přece jen širší a vlastně znamená obecně použití, nasazení, přenesení něčeho do praxe. Což se nám hodí, protože můžeme tento pojem — pro zjednodušení — dál používat, aniž bychom měli na mysli výhradně jen aplikace coby jednotlivé programy, počítačové aplikace. Můžeme pod něj směle zahrnout i ostatní příbuzné produkty, jimž se v souvislosti s UX designem tato kniha především věnuje. Označíme je souhrnným pojmem interaktivní aplikace, a budeme si pod nimi představovat především:

webové stránky — tj. pomocí odkazů vzájemně provázané dokumenty poskytující návštěvníkům informace na webu, od jednoduchých prezentací přes osobní a zpravodajské weby a blogy po rozsáhlé katalogy a portály

online nástroje — aplikace ve formě dynamických webových stránek poskytující nějaké interaktivní služby: e-shopy, komunikační nástroje, sociální sítě, účelové aplikace, online hry apod.

počítačové aplikace — programy s nějakým interaktivním rozhraním spustitelné v operačním systému i samotné grafické rozhraní (GUI) operačních systémů; všechny ty editory, informační systémy, pomůcky, hry a další

mobilní aplikace — rozhraní systémů „chytrých“ mobilních telefonů, tabletů a dalších přenosných zařízení a programy v nich spouštěné

nepočítačové aplikace — rozhraní systémů a programů v přístrojích, které za počítače přímo nepovažujeme (počítač je v nich přítomen, ale skrytý v druhém plánu) — „chytré“ televize, digitální rádia, přehrávače všeho druhu atd.

rozhraní přístrojů a automatů — způsob a styl, jakým se ovládají a jak s uživatelem komunikují interaktivní přístroje — bankomaty, automaty na kávu, parkovací automaty, platební terminály, přístrojové desky a všemožné ovládací panely, spotřební elektronika či domácí spotřebiče: sporák, lednička, rádio, domácí meteostanice atd.

a další podobná interaktivní uživatelská rozhraní, tzn. jakýkoli přístroj či nástroj, který s námi nějakým způsobem komunikuje: k našim akcím a příkazům poskytuje nějakou odezvu a očekává naši reakci.

Oblast interaktivních aplikací je velmi široká, jak je vidět. Pro potřeby této knihy se pro zjednodušení omezíme na aplikace, které všichni známe asi nejvíce: webové stránky a online nástroje, ale občas se zatouláme i mezi počítačové, mobilní a další aplikace.

Tato kniha se zaměřuje především na design webových stránek a webových a mobilních aplikací. Postupy a zásady jsou ale často použitelné i jinde.

Interaktivní a interakční

To slovo interaktivní je zde podstatné a klíčové. Klasický „pasivní“ design ve standardním pojetí je v podstatě jednostranná a jednosměrná činnost. Z pohledu komunikace je to monolog: designér navrhne způsob, jakým příslušné médium předá diváku, čtenáři či posluchači požadovanou informaci. Tento způsob je zrealizován, informace jednosměrně sdělena, hotovo. Viděli jste obraz, poslechli si reklamu v rádiu, přečetli si časopis, zahlédli plakát.

Interaktivní médium oproti tomu vede s uživateli dialog. Ti zde pouze pasivně nekonzumují sdělovanou informaci, ale poskytují odezvu, zpětnou vazbu a svou činností, chováním a rozhodováním ovlivňují a mění chování aplikace. Zde přichází na řadu interakční design.

Interakční designér pak nenavrhuje jen styl a podobu jednosměrně sdělované informace, ale už vzájemnou, dvoustrannou komunikaci. Definuje dorozumívací jazyk pro rozhovor, který máme vést s parkovacím automatem, rozhraním mobilního telefonu, kalkulačkou v počítači, s webovou stránkou, e-shopem, online aplikací. A také styl, kterým se tento dialog bude vést, pravidla chování, navrhuje snadno srozumitelné symboly a co nejméně matoucí příkazy, značkuje nám nejschůdnější cesty k nejčastějším cílům.

Jednotlivé kroky, slova a věty tohoto dialogu odpovídají běžnému zadání klasického designu — je třeba navrhnout, jak bude vypadat konkrétní datová tabulka, jak se zobrazí chybové hlášení, jak bude na první dojem působit prezentace firmy na homepagi webu, jaký bude design vstupů a tlačítek objednávkového formuláře. Ale všechny tyto dílčí prvky zastřešuje a spojuje právě interakční design do jednoho sourodého celku. Celku, jehož hlavními imperativy jsou konzistence, logika, intuitivnost, srozumitelnost, přímočaré trasy k cílům.

Interakční design se snaží sjednotit design všech dílčích částí interaktivní aplikace do jediného sourodého, logického a intuitivního systému.

Víc než interakční, víc než UX

Vyjasnili jsme si, oč se obecně snaží UX designéři, upřesnili specifika interakčního designu. Nyní je namístě oba tyto světy spojit do jednoho velmi specifického oboru, který je hlavním tématem této knihy.

Zbývá ovšem ještě jeden velmi podstatný faktor, který dosud zůstal opomenut stranou. Stále se bavíme jen o aplikacích a o lidech, kteří je používají. Je tu ale ještě třetí, pro nás velmi podstatná složka, kterou musíme do naší směsi zahrnout. A tou je ten, kvůli kterému všechno tohle existuje: zadavatel, provozovatel dotyčné aplikace. Ten, který to celé chce vybudovat, spustit a zaplatit: náš klient.

Bohužel, na tuto zcela zásadní položku celého ekosystému se často zapomíná. V knihách a článcích o UX designu budeme číst dokola o uživatelích, jejich zájmech a potřebách, uživatel je středobodem celého oboru, který jej má ostatně přímo ve svém názvu. Jenže jak si ukážeme dále v této knize, je pro nás coby designéra velmi důležité do našich teorií zahrnout i tento další prvek — protože je to zadavatel, náš klient, který tvoří pomyslnou třetí stranu trojúhelníku definujícího obor, ve kterém se chceme pohybovat. Až příliš často se můžeme setkat s UX designem pro UX design. S aplikacemi vytvořenými pro maximální zážitek a požitek uživatelů, v nichž se ale zcela ztrácí zájem a cíl provozovatele. Přitom UX design má být primárně nástrojem, jak co nejzajímavějším a co nejpoutavějším způsobem dovést uživatele právě k cílům, které si stanovil zadavatel. Zaujmout, přilákat, pobavit, nadchnout, ale hlavně při tom uživatele přivést tam, kde jej zadavatel potřebuje mít.

Je to právě zadavatel, tedy náš klient, kdo měl ten správný nápad a hodlá provozovat tu skvělou a úžasnou interaktivní aplikaci, kterou pro něj máme navrhnout. Je to on, díky němuž vůbec nějaká aplikace vzniká. Jsou to jeho zájmy a jeho cíle, kvůli nimž má přijít na svět. Jsou to jeho rozhodnutí, která mají ve finále konečné slovo a právo veta. A je to jeho peněženka, která celou tu taškařici bude platit a potažmo přispívat i na naši vlastní skývu chleba vezdejšího.

Je to primárně klient a jeho zájmy, jimž se výsledek musí podřizovat. Pozitivní zážitek uživatele je pouze ověřený nástroj k dosažení tohoto cíle, nikoli cíl sám.

Klient vs. uživatel

Vidíte ten rozpor? Podřizovat se klientovi a jeho zájmům? Najednou jsou tu zájmy klienta, zatímco dosud jsme se bavili v souvislosti s UX designem výhradně o potřebách a zájmech koncových uživatelů! Ano, a právě o to tady jde. Tento rozpor — a skutečně jde o rozpor, neboť zájmy klienta a zájmy uživatelů jeho aplikace jsou obvykle dosti protichůdné — pro nás bude často klíčový.

Jistě, z určitého pohledu to spousta lidí zjednoduší na názor, že zájmem každého klienta je ve výsledku přece spokojený uživatel, takže stačí navrhnout aplikaci ideální pro uživatele, a spokojeni pak budou všichni. Jenže je to velké zjednodušení, pro nás nepoužitelné, protože takto to působí pouze zvenčí. V okamžiku, kdy se coby designéři dostaneme pod povrch a začneme detailně odhalovat dílčí zájmy a potřeby obou stran, začnou se objevovat právě tyto rozpory a protichůdné zájmy. Ano, klient chce mít spokojeného uživatele a spokojený uživatel je i naším cílem. Jenže současně také tento náš uživatel nechce být rušen reklamami, a náš klient je potřebuje k živobytí. Uživatel chce v e-shopu rychle nakoupit konkrétní výrobek a co nejdřív odejít, prodejce má zájem zdržet ho u sebe co nejdéle a nabídnout mu co nejvíc dalších produktů. Provozovatel chce nabídnout uživatelům výběr z co nejvíce možností, uživatel si nechce moc vybírat, jen zmáčknout jedno tlačítko a hotovo. Klient chce aplikaci vyvedenou ve firemních barvách, ale pro uživatele jsou v rozhraní vhodnější a návodnější úplně jiné barevné kombinace… Čím jemnější dělení použijeme, čím hlouběji do útrob budoucí aplikace se dostáváme, tím více rozporů a protichůdných tlaků najdeme. A je naším úkolem je vyřešit, nikoli přehlédnout či zamést pod koberec.

Dlouholetá praxe ukazuje, že právě hledání a nalezení funkčních spojnic mezi zájmy klienta a potřebami uživatelů je nejlepší ze způsobů, jak vytvářet prosperující a životaschopné interaktivní aplikace.

Zůstávají přitom v platnosti všechna pravidla a požadavky na kvalitní interakční design — je ale nutné je dále zpřísnit a zpřesnit. Na jednu stranu vah přidat UX design a aplikovat jej tak, aby uživatel byl maximálně spokojen, odnesl si z používání aplikace co nejlepší prožitek a přínos. Na stranu druhou pak vstupuje náš klient a je naší starostí, aby byly v maximální míře uspokojeny i jeho zájmy a cíle.

„Koordesignéři“

Popisujeme zde tedy poměrně specifický, široce rozkročený obor, který má hned tři mety, jichž je nezbytné dosáhnout současně:

navrhnout funkční a konzistentní interaktivní aplikaci (interakční design),

současně se snažíme o maximalizaci „uživatelského prožitku“, aby uživatelé danou aplikaci používali rádi a přinášela jim co největší přínos (UX design),

současně se s maximální loajalitou ke klientovi musíme postarat o to, aby byly splněny jeho záměry, dosaženo jeho cílů, aby aplikace byla efektivní a rentabilní.

Jde tudíž o kombinovaný obor projektového řízení a interakčního designu orientovaný současně na uživatelský prožitek i na prospěch klienta. Jak si dále ukážeme, podstatnou součástí této práce je schopnost koordinování mnoha nesourodých vstupů a výstupů mnoha dílčích profesí ke smysluplnému výsledku, kdy vedle designérských jsou zde užitečné i jisté manažerské dovednosti.

Pohříchu tento obor, jakkoli se jím ve skutečnosti zabývá poměrně hodně lidí, nemá dosud jasně definované pole působnosti, a dokonce ani jednoznačný název. Mohli bychom si pro něj vymyslet třeba nějakou sofistikovanou zkratku — ale přiznejme si, že vzájemně si podobných zkratek jsou nesmírné spousty a nějaká další už by byla jen matoucí. Užitečnější bude si uvědomit, že v podstatě hovoříme o spojení profesí designérských a manažerských. Celkem výstižný termín by byl možná designgement (design + management), což je sice docela trefné, ale přece jen dost krkolomné. Stejně dobře bychom mohli spojit pojmy koordinátora a designéra a pro zjednodušení používat termín koordesignér. Takový novotvar by pak mohl pokrývat profesi zabývající se komplexně tvorbou a koordinací projektů interakčního designu, orientovanou současně na prožitek uživatele (UX) i na zájmy zadavatele.

Bohužel se žádný takový ani podobný termín u nás dosud neuchytil a od stolu jej jen těžko budeme zavádět. Hlavní ale je, že jsme si jej vyjasnili a vymezili alespoň pro potřeby této knihy, a nebude-li upřesněno jinak, budeme v dalším textu pod profesí „designéra“ myslet právě onu výše definovanou, šířeji rozkročenou a komplexnější „koordesignérskou“ profesi.

„(Koor)design“ je obor tvorby interaktivních aplikací coby spojnice mezi cíli klienta a potřebami uživatele.

Interdisciplinárka

Nevymýšlíme si tu přitom žádný úplně nový, umělý obor. Jenom jsme si vymezili, přesněji ohraničili a nově pojmenovali soubor činností, které se provádějí už dlouho. „Koordesignéři“ jsou tady desetiletí a pracují jich po světě spousty. Říkají si ovšem různě: UI/UX designéři, aplikační architekti, webdesignéři, grafičtí designéři (ačkoli dělají víc než jen to), senior designéři, produktoví manažeři, vývojáři. Jejich práce se tu více, tu méně kryje s oborem, který jsme si právě vymezili. Ale vymezili jsme si jej právě proto, abychom mohli lépe zkoumat jeho problematiku, popsat jeho pracovní postupy a upozornit na mnohé chyby a opomenutí, kterých se návrháři často dopouštějí. Povětšinou právě proto, že vlastně mají jen mlhavou představu o oboru, jemuž se nevědomky věnují. Tato kniha by jim mohla pomoci v něm najít kotvy, záchytné body, hranice a limity. A také si uvědomit, co je pro tuto práci zásadní, méně podstatné a co je nedůležité. Nezřídka se setkáváme v praxi s tím, že tento žebříček priorit bývá úplně obrácený, ztrácíme čas s nedůležitými detaily a zcela zapomínáme na to podstatné.

Design v našem pojetí („koordesign“) je ukázkový interdisciplinární obor. Přesahuje do mnoha oblastí a oborů a společně je používá k dosažení svých cílů. Používá přitom holistický, celostní přístup — čímž je zjednodušeně vyjádřen fakt, že výsledek není jen pouhým souhrnem jednotlivých úkonů. Podobně jako je živý organismus víc než halda buněk, které jej tvoří, podobně jako precizní hodinový stroj není jen shluk koleček a součástek uvnitř. Platí zde víc než kde jinde známá slova Aristotelova: „Celek je víc než souhrn jeho částí“. Jednotlivé oblasti používané při návrhu i součásti výsledné aplikace se navzájem ovlivňují a jsou naopak i samy zpětně ovlivňovány výsledným celkem.

Těmi nejpodstatnějšími obory, ve kterých by se designér měl co nejlépe orientovat, jsou:

vizuální komunikace a komunikační design

aplikovaná psychologie a sociologie

marketing

informační architektura

IT technologie

projektové řízení

Není nutné — a obvykle ani možné — aby byl jeden člověk expertem ve všech těchto oborech současně. Těžko hledat zkušeného grafika, psychologa, knihovníka a programátora v jedné osobě, nadto s dobrým vkusem, zkušeným okem a se znalostí online marketingu i přehledem v nejnovějších technologiích současně. Každou z těchto činností může na daném projektu ve výsledku zajistit příslušný specialista a designér musí mít v každé oblasti jen dostatečně dobrý přehled, aby navrhoval věci, které fungují, které lze zrealizovat, které budou dohromady ideálně spolupracovat, a vše aby podporovalo stanovené cíle a funkce navrhované aplikace.

Designér může být v rámci projektu sám projektovým manažerem, ale není to příliš obvyklé. Praxe ukazuje, že manažerské a kreativní schopnosti se až příliš často navzájem vylučují, a tak najít kreativního designéra, který je současně dobrý manažerem (a naopak) je velmi výjimečný úkaz. Vhodnější a v různých variantách i běžné je spíše řešení, kdy designér je projektovému manažerovi k ruce coby klíčový konzultant. Měli by pak řídit projekt společně — projektový manažer by se měl zcela spolehnout na designéra v odborných otázkách, designér by pro změnu měl nechat na projekťákovi otázky ekonomické a organizační. Co by rozhodně měli dělat společně, je plánování a koordinace běhu projektu.

Je určitě výhodou, pokud sám dostatečně dobře ovládá některý (či některé) ze zmíněných oborů a alespoň část z celého procesu realizuje sám. Často se dobří „koordesignéři“ rekrutují z řad grafických designérů, ale i vývojářů. Není ovšem zcela od věci, pokud všechny uvedené profese zajišťují oboroví specialisté a designér se věnuje pouze samotnému „čistému“ interakčnímu designu a projektové integraci. To je vhodné — a dokonce žádoucí — řešení především u rozsáhlejších projektů. Jak si ukážeme v dalších částech, je tato „neviditelná“ meziooborová práce poměrně obsáhlá a troufnu si tvrdit, že pro úspěch a kvalitu výsledného produktu jednoznačně nejdůležitější.

Jak jsme předeslali, jedná o obor holistický. Takový designér je pro každý projekt interaktivní aplikace nenahraditelný, neboť je to právě on a jeho práce, která vytváří tu často chybějící přidanou hodnotu nad prostým souhrnem práce grafického designéra, copywritera a programátorů a případných dalších profesí. Musí být integrátorem a znát důležité faktory ze všech souvisejících oborů a ty zohledňovat ve svém návrhu. A pokud jej nerealizuje sám, musí následně také umět správně zadat příslušnému specialistovi práci a dohlédnout na její správné provedení a zasazení do kontextu.

Designér zajišťuje korektní zadání aplikace, garantuje její funkční výsledek a mezi tím integruje a konzultuje všechny složky vývoje.

Styčný důstojník

Všechny dílčí profese či oddělení, které se na vývoji aplikace podílejí, můžeme z pohledu designéra chápat jako pouhé nástroje, které jsou mu k dispozici. Ale je to především on, kdo aplikaci tvoří, kdo rozhoduje o její podobě, definuje její chování a specifikuje její parametry. Pouze designér musí mít pravomoc rozhodovat a diktovat všechny aspekty výsledné aplikace — a potažmo i nést plnou zodpovědnost za jejich realizaci. Jak si řekneme v pozdějších kapitolách, demokracie je nepřítel designu a designér musí mít v projektu vždy despotické právo veta. Bez něj je jako šéfkuchař špičkové restaurace, kterému do jím sestaveného a vyladěného menu může kecat každý kuchtík. To nikdy nefunguje.

Z toho mimo jiné plyne i to, že designér je hlavním styčným důstojníkem na dvou frontách současně:

Coby autor aplikace je prostředníkem mezi klientem a koncovým uživatelem, navrhuje aplikaci tak, aby maximalizoval její přínos pro obě strany.

Coby hlavní integrátor projektu je prostředníkem mezi klientem a realizátorem projektu, zajišťuje komunikaci mezi oběma stranami týkající se samotného návrhu aplikace.

Druhý bod má význam především v případě, že je designér jedním z mnoha článků realizačního procesu. Tedy typicky zaměstnancem (nebo najatým externistou) nějaké firmy, která projekt realizuje. Další články se starají o všechny otázky mimo obor samotného návrhu aplikace: manažeři dojednávají obchodní podmínky, účetní spolu řeší faktury a platby, své komunikační linky mají marketéři, systémoví integrátoři, oddělení zajišťující hardware, logistika, právníci a další. Čím větší projekt, tím více linek mezi realizační firmou a klientem je souběžně otevřeno.

Designér musí být v každém případě tím, kdo jedná přímo se zadavatelem (resp. jeho zástupci) o samotné aplikaci. Jeho úkolem — a jak si v další kapitole ukážeme, úkolem z nejhlavnějších — je zjistit co nejpřesnější parametry projektu, vytáhnout z klienta chybějící informace, sestavit s ním co nejdetailnější zadání a shodnout se na všech hlavních aspektech podoby budoucí aplikace. V průběhu realizace pak průběžně konzultovat a upřesňovat podrobnosti a nejasnosti, které se vždy během realizace každého projektu objeví.

A na druhou stranu pak musí komunikovat se svými kolegy a nadřízenými, správně formulovat požadavky na požadované zdroje a spolupracovat na plánování i koordinaci projektu.

Pro klienta zastupuje „koordesignér“ dodavatele, jako by za něj celý projekt realizoval on sám. Z pohledu realizační firmy je zase tou podstatnou osobou, která tlumočí požadavky klienta.

Je obvyklé, že jednání se podle potřeby účastní i zástupci dalších profesí. Jedná--li se o technických otázkách, je namístě přítomnost vývojáře, při jednání o vzhledu aplikace se bude hodit přítomnost grafického designéra, jindy je vhodný tu právník, tu odborník na databáze, téměř vždy by měl být u jednání projektový manažer. Záleží hlavně na složitosti a velikosti projektu — čím rozsáhlejší a náročnější aplikace, tím více specializovaných problémů bývá k řešení.

Ale je to primárně sám designér, kdo s klientem musí vést dialog nad požadovanou podobou výsledné aplikace. Často vídané případy, kdy zadání s klientem domlouvá manažer nebo vývojář a designér se ho dozvídá zprostředkovaně, málokdy fungují.

Pozn.: V případě, že je designér (v našem rozšířeném pojetí) sám sobě pánem — ať už je sám vedoucím týmu, nebo dokonce majitelem dodavatelské firmy, nebo se jedná jen o jednomužný projekt a designér jej realizuje celý sám — má situaci v mnoha ohledech jednodušší, a v mnoha současně složitější. Často musí v duchu sám se sebou polemizovat a hledat vhodné kompromisy: mezi vzdušnými zámky návrháře a časovými a finančními limity podnikatele, mezi svými záměry a vlastními znalostmi a schopnostmi, mezi plány na mnoho skvělých funkcí a dosud otevřeným jednáním o ceně zakázky… Od určité velikosti projektu proto může být vhodné najmout si na některé dílčí profese někoho jiného, byť by designér zvládnul celý projekt realizovat úplně sám. Ušetří mu to ale právě mnohá dilemata a spoustu psychických sil. Jakkoli se to zdá zvláštní, velmi užitečné může být najmout si „dočasného šéfa“, externího projektového manažera, složit řízení projektu, plánování a ostatní manažerské složky projektu na cizí bedra a sám se věnovat pouze samotnému návrhu aplikace. Je ale pravdou, že takový projektový manažer se hledá poměrně těžko. To už se ovšem dostáváme do oblasti otázek projektového řízení, time managementu a podobných témat, potažmo mimo téma této knihy.

Jakkoli je komunikace dovnitř dodavatelské firmy důležitá, nebudeme se jí zde příliš zabývat. To nejzásadnější z hlediska designu se odehrává na té opačné straně.

Nejzásadnějším úkolem designéra je komunikace s klientem, zjištění jeho skutečných cílů a stanovení cílových bodů a priorit aplikace.

Klient

Řekli jsme si, že z hlediska samotného návrhu aplikace má designér u klienta vystupovat a jednat s ním jako hlavní a jediný realizátor, zastřešující všechny případné další profese, které se na tvorbě podílejí. A také jsme naznačili, že jeho klíčovým úkolem v tomto jednání je zjišťování informací, především určení klientových zájmů a cílů.

Co to? Proč by měl designér definovat cíle svého klienta? To přece do navrhování aplikace nebo designu budoucího webu nepatří! A co se má vůbec designér co šťourat v požadavcích zákazníka? Ten přece sám nejlíp ví, co chce a potřebuje, určitě nám to sdělil hned ve své poptávce, tak nezbývá než sklapnout podpatky a jít to zadání přivést na svět. Kde vůbec bereme tu drzost do toho šťourat a předložené zadání zpochybňovat? A vůbec: náš zákazník, náš pán!

Jenže tady je právě jeden ze základních kamenů úrazu, na kterém ztroskotává spousta dobře míněných zakázek a kde kolabuje mnoho původně nadějných projektů. Designéři zde fatálně selhávají pouze kvůli prosté neznalosti jednoho ze základních zákonů designu, které platí univerzálně v každém čase a po celém světě. Jedním z hlavních úkolů této knihy je se s těmito zákony seznámit a především si ukázat, jak je využít v praxi k vytváření těch nejlepších aplikací, které přinesou co největší efekt našemu klientovi a co největší užitek uživatelům.

Začněme prvním z nich, jedním z nejdůležitějších poznatků, ke kterému každý designér dojde jednou sám, ale mnohdy až po dlouhé cestě a za cenu velkých — a přitom zbytečných — obětí.

První zákon designu

Může se to zdát nadnesené a přehnané, ale podle mě je to zkrátka holá pravda. Následující zákon má podle mých zkušeností téměř univerzální platnost a bez jeho znalosti nelze být dobrým a úspěšným designérem.

1. zákon designu: Klient neví, co chce.

… a nedá pokoj, dokud to nedostane, chtělo by se hned doplnit. Ani v nejmenším nepřeháním.

Za svou více než dvacetiletou praxi jsem se setkal s opakem jen v několika málo případech — a vždy se ukázalo, že za poučeným klientem, který skutečně přesně věděl, co vlastně chce, kam a proč míří, stála jen slušná zkušenost a praktická znalost u někoho v jeho týmu. Potažmo jeho znalost tohoto zákona a vynaložení nemalého úsilí na jeho popření vlastními silami. V naprosté většině případů ale platil téměř beze zbytku.

Samozřejmě, každý klient poptává více či méně konkrétní zakázku a popisuje mnohé parametry, které by měl výsledek splňovat. Někdy dokonce zachází až do absurdních detailů. Proč si tedy troufám tvrdit, že přesto neví, co chce?

Vše je totiž otázkou priorit. A vše je důsledkem toho, že priority každé takové interaktivní aplikace jsou ve skutečnosti úplně jiné, než se na první pohled lidem jeví. Na to, jaké jsou skutečné priority aplikací a co za ně považují naši klienti, se podíváme podrobněji.

V otázce cílů a priorit se různé typy interaktivních aplikací ale poměrně dost liší. U takového ovládacího panelu ledničky si chybně nastavených priorit a cílů, potažmo špatně vyřešeného rozhraní nikdo nijak zvlášť nevšimne. Nanejvýš se v nějaké recenzi objeví malá nedůležitá poznámka, že „lednička má poněkud nešťastně vyřešené ovládání“. Ale pro nikoho to nebude až tak důležité a rozhodující faktor pro její koupi.

Nejmarkantnější je tento problém na aplikacích, které jsou produktem samy o sobě, pro které splňovat nějaké záměry a plány klienta je naprosto klíčové. A jak jsme už předeslali v úvodu, budeme se věnovat primárně těm, s nimiž dnes máme asi nejbohatší zkušenosti: tvorbě webových stránek a online aplikací.

Projektová mezera

Na tomto místě si musíme položit otázku, jak je vůbec možné, že klient neví, co přesně chce. Jak může mít chybnou přestavu o svém záměru, jak může sám neznat své vlastní cíle? Všechny tyhle otázky jsou přece součástí přípravy projektu, které má každý absolvent základního kurzu projektového řízení v malíčku. Připravit strategii projektu — obchodní plán, monetizační kanály, marketingový plán, KPI (Key Performance Indicators, klíčové metriky výkonnosti) a způsoby jejich měření, hlavní záměry a cíle, dlouhodobé vize projektu — to přece musí být klientova hlavní starost. Je to jeho podnikání, jeho svět, kdo jiný už by v tom měl mít jasno než on sám?

Velmi častou příčinou takové chybějící strategie je ovšem jev, kterého si většinou nebývá vědoma ani jedna ze zúčastněných stran. Já ho nazývám projektová mezera (project gap). Tedy určitý, zcela zřetelně chybějící článek mezi odborností zadavatele a odborností jeho dodavatele, kterému zadává zakázku zcela mimo svůj obor činnosti. Ani jedna ze stran nerozumí byznysu strany druhé, neorientuje se v jejích specifikách, nezná její terminologii, nemá zkušenosti se standardními procesy a už vůbec netuší nic o skrytých rizikách a jemných nuancích jejího podnikání. Je přitom celkem jedno, jestli se bavíme o situaci, kdy špičková klinika zadává značkovému krejčovství ušití pracovních oděvů pro chirurgy, kdy potravinářská laboratoř poptává instalaci vytápění nebo kdy ocelářská firma hledá dodavatele svého nového webu. Chirurgové nevědí nic o krejčovství, krejčí neznají specifika chirurgické práce, laboranti nemají potuchy o topení a topenáři o tamním biochemickém provozu, oceláři nevědí nic o tvorbě webů — a my zase nevíme nic o výrobě oceli…

Projektová mezera je chybějící propojení znalostních bází naší a našeho klienta.

Představme si následující modelovou situaci. Fiktivní prosperující firma Globuli, žádný nezkušený zelenáč na trhu, dlouhodobě obchodující s kuličkovými ložisky. Je to solidní firma a pochopitelně má vypracovaný obchodní plán, dlouhodobý i mnohé krátkodobé. Má zpracované marketingové strategie, metriky KPI a SWOT analýzy mrskají denně, vize a cíle nepostrádají, plánují, projekty řídí mistrně a kuličková ložiska se jim točí ostošest. Projektové řízení by mohli ostatní školit, o posledním veleúspěšném projektu prodeje obřích ložisek do Indonésie přednášel dokonce projektový ředitel na mezinárodní kuličkářské konferenci.

Vědí, co dělají. A dělají to dobře. Mají své strategie, jasné vize a cíle, mají podrobné výrobní, obchodní a marketigové plány. A v jednom z nich se nachází — někde mezi přípravou výstavby meziskladu vazelíny a hledáním nového dodavatele těsnění — stručná a poměrně nenápadná položka „nové webové stránky“.

Co taková firma udělá? Pochopitelně to nejlogičtější: najde si někoho, kdo se takovou věcí zabývá. Třeba vypíše výběrové řízení, nebo dá na něčí doporučení a vybere si jako dodavatele nás. A zadá nám poptávku na webové stránky podniku Globuli, kuličková ložiska. Myslí si někdo, že mezi svými specialisty na ložiska a vazelíny najde projektového manažera, který sestaví kvalitní projekt webu? Oni přece rozumí kuličkám a mezinárodnímu obchodu, to nemůže nikdo čekat. A hlavně taky proč? Oni si na to přece najali odborníky: naši firmu.

Z našeho pohledu coby dodavatelské firmy je situace také celkem jasná. My vyrábíme skvělé webové stránky a online aplikace. Děláme je rádi, děláme je dobře. Máme skvělý tým: grafiky, vývojáře, správce serverů, marketingové specialisty, vynikajícího artdirektora — a taky máme skvělé a výkonné projektové manažery. Bezvadně řídí každou zakázku, plánují na hodiny přesně, zajišťují zdroje, koordinují spolupráci mezi našimi odděleními i třetími dodavateli, jsou dobří. Ale co oni vědí o nějakých kuličkových ložiscích? Co vědí o jakémsi Globuli? A jaký web že to ti ložiskáři chtějí, co od něho čekají, jak má fungovat? Jaktože to nevědí?

A kdo to má u všech kuliček namazanejch teda vědět?!

Odpověď je nasnadě: neví to zatím nikdo, vyvstala zde projektová mezera. A je právě prvořadým cílem designéra, který má budoucí web firmy Globuli navrhnout, tuto mezeru překlenout, vyplnit a znalostní báze obou zúčastněných stran propojit.

Nikdo nic neví

To je to. V této chvíli to vědomě neví většinou vůbec nikdo. Dodavatel o klientovi a jeho podnikání neví nic z principu, klient zase neví, co má vlastně vědět. Klient má obvykle jakousi nejasnou představu o několika nedůležitých dílčích aspektech výsledné podoby, které možná někde viděl nebo by se líbily panu řediteli (Víte co, Kulkomat má na homepagi takové obrovské blýskavé ložisko, co se otáčí, tak my tam chceme dvě. Musí to být žluto-modrý jako naše logo. Jo, a nesmí tam být ty klikací e-maily, aby nám nechodily tyhlety spamy…) — ale co skutečně chce a co potřebuje, to obvykle v tuto chvíli neví.

Objevuje se tady nevyplněný, nejasný a neurčitý prázdný prostor mezi dvěma projekty, již zmíněná projektová mezera. Tím pravým, kdo ji má vyznačit a postavit přes ni most a oba projekty propojit do funkčního celku, je právě designér.

Jedním z hlavních úkolů designéra je částečně suplovat klientova chybějícího projektového manažera.

Designérovým prvotním a klíčovým úkolem je získat od klienta všechny chybějící informace a sestavit je do zadání, které bude z jeho hlediska dávat smysl a s nímž současně bude klient souhlasit.

Jádrem pudla je tady totiž fakt, že klient ve skutečnosti všechno podstatné ví — jenom neví, že to ví. Anebo to dokonce ví, jenom nemluví jazykem našeho kmene. Naši klienti mají ve svých plánech a záměrech obvykle poměrně jasno a mají celkem přesnou představu, co od svého podnikání očekávají a kam je chtějí směrovat. Jenom nevědí, jak tyto věci mají promítnout do zadání zakázky na webové stránky nebo online aplikaci — protože jednoduše tvorba aplikací není jejich obor. Nerozumí tomu, nevidí jim pod kapotu, znají z nich pouze ten vnější vizuální obal. Designér pod něj ale vidí a ví, jaké informace je potřeba znát. Jeho úkolem proto není v této chvíli žádný intenzivní průzkum trhu a připravování obchodních strategií za klienta. Ten je sám zná moc dobře. Designér musí udělat jediné: povídat si s ním, vyzpovídat ho a tyto informace z něj vytáhnout. Vydolovat, vytěžit, zpracovat. A následně je přeložit do jazyka designu. Do termínů, vztahů a parametrů, které při své práci používá sám a kterým bude rozumět případný vývojářský tým, který zakázku bude realizovat.

Designér musí fungovat jako tlumočník z jazyka klienta do jazyka návrhářů a vývojářů (a zpět).

Tento proces získávání informací by se dal přirovnat ke snaze propojit dvě složitá zařízení se spoustou zdířek. Každá z nich je popsaná na každé krabici úplně jinak, každá jinou terminologií, jsou uspořádané do rozdílných útvarů, mají úplně jiné uspořádání a jiný vzhled. A designér stojí mezi nimi s hromadou kabelů a snaží se je správně zapojit, najít ty správné spojnice a vzájemně si odpovídající zásuvky a vše prodrátovat tak, aby si obě strany vzájemně rozuměly. Pokaždé, když se projekt zadrhne na tom, že si programátor špatně vyložil požadavek klienta, že nové produkty si na ten server už budeme přidávat sami, nebo naopak když konsternovaný klient netuší, jak má naložit se sdělením serverového vývojáře, že hosting nepíruje a přes páteř to bude lagovat, měl by si to vždy přičítat jako své vlastní selhání právě designér — špatně sepsané zadání, chybný překlad do jazyka kmene programátorů i nedostatečné odstínění nebohého klienta od útočných výpadů věčně nerudných příslušníků této podivné sorty lidí.

Pozn.: Platí to úplně stejně, at už jsme coby „senior UX designér“ především koordinátorem velkého vývojářského týmu a prakticky všechny činnosti jen zadáváme příslušným expertům, nebo — coby opačný extrém — jako webdesignér na volné noze realizujeme celou zakázku úplně sami. Ta nejzásadnější pravidla týmové práce platí i pro každý (dámy prominou, ale říká se to tak) jednomužný tým. Tady je trocha zdravého rozpolcení osobnosti namístě a onen projektový manažer a UX designér v nás musí dobře komunikovat s naším vnitřním vývojářem a kodérem a správně si musíme v hlavě překládat informace z jednoho světa do druhého a zpět. Uvědomění si, že tyto vesmíry nejsou z principu zrovna dvakrát kompatibilní, je zcela zásadní. A pokud třeba dojdu k závěru, že jsem programátor tělem i duší a moc dobře to od sebe oddělit zkrátka nedokážu, měl bych se velmi vážně zamyslet, jestli pro můj byznys a vlastně pro všechny nebude lepší spolupracovat s nějakým skutečným designérem a všechny tyto starosti nechat na něm. Zcela upřímně: za celou svou profesní kariéru si bohužel nepamatuju případ, kdy by s klientem domlouval zakázku čistokrevný programátor a současně to dopadlo dobře. Nepochybuji, že existují světlé výjimky, a vám k nim rád pogratuluji — ale obecně to opravdu funguje velmi špatně.

Tma pod svícny

Ne vždy ale selhává projektová příprava a nedostatečné zadání ze strany klienta na prosté absenci projektového manažera. Se stejným problémem se setkáme často i u klientů, kteří jsou v podstatě z oboru — IT firmy, mediální agentury… A nejen to, není ani úplnou výjimkou narazit na fatální selhání zadání i celého designového procesu v případech, kdy jsou dodavatelé sami sobě klienty — tedy v situacích, kdy realizační firma vyvíjí své vlastní webové projekty a aplikace.

V těchto případech nezbývá než si otevřeně přiznat, že zde je nejspíš hlavní příčinou jednoduše nedostatečná znalost nebo rezignace na zásady projektového řízení. Osobně jsem se v praxi nejednou setkal s profesionální firmou zabývající se tvorbou webů nebo vývojem počítačových aplikací, kde všichni všechny standardní postupy ignorovali (nebo je možná ani neznali). Na projektech se pak začíná pracovat živelně, náhodně od konce nebo zprostředka, bez pořádných analýz a bez jasné znalosti cíle, jehož se má dosáhnout. A proces vývoje a potažmo výsledky tomu také odpovídají.

Popravdě si troufám tvrdit, že není až takový problém na takové firmy natrefit. A designér, který na podobný tým ve své kariéře aspoň párkrát nenarazil, by se měl považovat za pouhého začínajícího zelenáče, který má to podstatné teprve před sebou…

Nicméně i tady účinkuje stále táž medicína. Ocitneme-li se coby zodpovědný „koordesignér“ v takovémto týmu, nejlepší, co můžeme udělat, je považovat chybějící části projektové přípravy za projektovou mezeru a své vlastní kolegy a nadřízené za klienta — klienta, který neví, co chce. A dále postupovat podle toho.

Nejfatálnější projektové mezery jsou ty skryté. Najdeme je často v projektech, kde strana klienta a strana dodavatele není jasně daná a je nutné je vymezit uměle.

Záleží pochopitelně hodně na typu firmy a atmosféře v ní. Mohou náš přístup považovat za velký přínos (kterým bezesporu je!) a vyjít mu vstříc. Na nový a jim dosud neznámý proces vývoje přistoupit a všechny chybějící body s vámi postupně doplňovat. Anebo se mu (mnohem častěji) budou urputně bránit — a pak je to tuhý a dlouhý boj, jehož výsledek závisí jen na odhodlání designéra a jeho schopnosti důležitost a možný přínos výsledku vysvětlovat a přesvědčovat ostatní o jeho smysluplnosti. Nastoupí-li takový odhodlaný designér nově do podobné firmy, musí se připravit spíš na tu druhou možnost. Obrnit se trpělivostí a bojovat srdnatě a ze všech sil. A také být připraven si přiznat, že tady je boj marný, a bez váhání odejít někam, kde jeho práce nebude zbytečná a jeho schopnosti nepřijdou vniveč. Zůstávat v takové firmě dál se pak rovná naprosté rezignaci na vlastní odbornou kariéru a profesní růst a smíření se s vlastní petrifikací v pozici rutinního kresliče, kterého smyslupnost jeho práce dvakrát netrápí.

Nepopírám, že takových lidí bez větších ambicí, s ideálem teplého místečka s definitivou až do důchodu se najde dost — ovšem pokud se v tom náhodou poznáváte i vy, milí čtenáři, pak jste tuto knihu nejspíš začali číst nějakým nešťastným omylem. A se vší upřímností vám doporučuji ji hned teď odložit, protože následující kapitoly vám mohou způsobit mnoho duševních zmatků a dilemat.

Vymezení zájmů a cílů

Pokud si ovšem ujasníme, kde má kdo v rozbíhajícím se projektu své místo, pokud vymezíme hřiště a dokážeme definovat, kdo stojí v dané chvíli na které straně, máme napůl vyhráno. Dokážeme určit, za jaký tým kdo hraje, dokážeme rozpoznat, kde se strany rozcházejí v chápání problému. Můžeme odlišit, co jsou skutečné cíle a zájmy klienta a co jsou jen výhody či komplikace pro stranu dodavatele, dokážeme rozpoznat a vymezit případnou projektovou mezeru. To je základ, od kterého se už můžeme odrazit. Pokud to rozlišit nedokážeme, je třeba se zastavit, případně o pár kroků vrátit, a ujistit se, že skutečně víme, kdo v jaké chvíli tahá za kterou stranu provazu.

Zájmy klienta a zájmy jeho dodavatele jsou obvykle zcela rozdílné, ne-li protichůdné.

Když si ujasníme, kudy vede ona hranice rozdílných zájmů zadavatele a dodavatele (a ta tu existuje vždy!), můžeme se na ni lépe soustředit a začít se zajímat o ty skutečné a podstatné problémy, které je potřeba v rámci našeho projektu řešit. Protože pouze tato hranice určuje podstatný rozdíl mezi oběma stranami: zájmy klienta jsou klíčové, určují úspěch celého projektu a je zcela nezbytné jim vycházet vstříc. Zájmy dodavatele jsou až sekundární a limitují pouze naše pohodlí a snadnost realizace.

Jistě: určují náš profit a smysluplnost našeho počínání — ale zde je pouze otázkou, zda se nám realizace projektu za smluvených podmínek vyplatí. Pokud ne, je namístě jednání o ceně a rentabilitě projektu. To je ale jediný stupeň volnosti, který na straně dodavatele máme: zájmy a cíle klienta musí být prvořadé a lze z nich slevovat pouze v rámci jednání o ceně a parametrech zakázky. V obecné rovině jsou zájmy klienta nedotknutelné a pouze jim je nutno vše podřizovat. Pokud totiž z jakéhokoli důvodu, ať už kvůli vlastnímu profitu, nebo třeba i v dobré víře projekt přiohneme, pozměníme parametry a výsledek se s klientovými cíli mine, jako dodavatel jsme selhali tím nejfatálnějším způsobem. Vyrobili jsme zmetek. Produkt, který může být klidně úchvatný, až se z něj všichni posadí na zadek, ale přesto zmetek, který neplní svůj účel: nenaplňuje cíle zadavatele.

Náš vztah coby designéra ke klientovi je tedy poměrně jasný a ve své podstatě jednoduchý. Máme pouze dva hlavní úkoly:

zjistit a co nejpřesněji definovat skutečné zájmy a cíle klienta,

vytvořit produkt, který je bude co nejlépe plnit.

O nic víc tady vlastně nejde. Ovšem to, jak to provést a co všechno nás při tom čeká, je už na delší povídání a věnuje se tomu téměř celý zbytek této knihy.

Uživatelé

Ještě než se podrobně začneme věnovat samotné práci designéra s klientem, musíme přece jen zmínit i tu opačnou, dosud tolik přeceňovanou stranu naší základní rovnice, tedy uživatele.

Uživatele a vztah designéra k nim podrobně a ze všech stran rozebírají stohy knih věnujících se UX designu. Zjištění potřeb a zájmů uživatele a snaha je co nejlépe a nejefektněji naplnit, to je podstatou tohoto oboru. Mohli bychom zde začít citovat a kompilovat desítky a stovky zdrojů a nafouknout tuto knihu snadno o dalších pár set stránek. Ale já bych se přece jen raději věnoval spíše těm stránkám designérské praxe, které se tam příliš nezmiňují a v některých ohledech směřují i opačným směrem.

Omezím se zde tedy pouze na pár základních informací, které designér o uživatelích potřebuje vědět, a pro podrobnosti vás odkážu do libovolného knihkupectví, kde najdete knih o UX designu plné regály. Tato kniha se snaží být pouze jejich praktickým doplňkem. V podstatě si se vší drzostí troufnu všechny ty letité zkušenosti a výzkumy uživatelského chování zjednodušit na samu dřeň a shrnout do stručného seznamu:

5 hlavních vlastností běžného uživatele

neví, co chce

nerozumí designu a nemá vkus

nechce přemýšlet a rozhodovat se

bojí se

je pohodlný a egoistický

Podívejme se na jednotlivé body trochu podrobněji.

Druhý zákon designu

První ze seznamu vlastností typického uživatele připomíná ono první pravidlo designu, které jsme uvedli o pár stránek dříve: Klient neví, co chce. Ano, tvrdím tady právě téměř doslova totéž, co předtím u zadavatele, provozovatele aplikace. Opravdu chci říct, že obě strany, pro které máme pracovat, jsou natolik stejné, a máte věřit, že prostě nikdo kolem nás vůbec nic neví?

Ne, kdepak, nejsou obě strany stejné. Naopak, liší se téměř ve všem podstatném. A to, že ani jeden, ani druhý z nich neví, co chce, v obou případech znamená něco úplně jiného. U klienta to bylo myšleno spíš obrazně, ukázali jsme si, že nejde ani tak o to, že by klient skutečně nevěděl nic. Pouze neví, jak nám to sdělit, jak své znalosti, zkušenosti a požadavky přeložit do našeho designérského a vývojářského jazyka. A že je naším úkolem z něj ty informace dostat a správně si je vyložit a přeložit. My jako designér většinu těch vstupních dat ani znát nemůžeme, klient je pro nás obvykle jediným zdrojem informací, jinak než od něj se je ani dozvědět nemůžeme.

Ale v případě uživatelů už to opravdu myslím doslova. Považuji to za natolik elementární fakt, že jej rovnou přidám do pořadí jako druhý základní zákon:

2. zákon designu: Uživatel neví, co chce.

Uživatel nad tím totiž podle mě obvykle vůbec nepřemýšlí. Možná si vzpomenete na úvodní kapitolu této knihy a na zákazníka, co si mezi desítkou vlastních problémů, které musí právě řešit, odskočí do obchodu, jednoho z mnoha na hlavní třídě, a žádné technické detaily, speciální nabídky a podrobnosti fungování prodejny, na které je její majitel tak hrdý a věnuje jim veškerý svůj čas, ho ani trochu nezajímají. On chce účelově mezi kvartální uzávěrkou v práci, finálem extraligy a třídními schůzkami svých dětí koupit rychle něco k večeři. A buďto bude s nákupem spokojen, nebo nebude. On neví a nemá sebemenší chuť vymýšlet, jak by měla ta prodejna fungovat lépe. Když spokojen nebude, půjde jednoduše příště jinam.

Typický uživatel si spustí náš web, naši aplikaci a začne ji používat. A buďto se mu líbí, vyhovuje mu, uspokojí nějakou jeho potřebu, je s ní spokojen — anebo jej něčím zklame, otráví a znechutí, zavře ji a odejde. Smaže, zapomene, zkusí jinou.

Ovšem teď jsme to za stranu uživatele my, kdo musí všechny ty požadované informace znát, a uživatelé nám je přímo sdělovat nemůžou. Vědět, co je pro typického příslušníka cílové skupiny dobré, vhodné, co mu bude vyhovovat a jak mu naši aplikaci nabídnout, aby se mu líbila a chtěl ji používat, patří mezi základní znalosti a je vlastně podstatou studia všech oborů užitého a průmyslového designu. Jedinou odezvou a zpětnou vazbou, kterou má designér od uživatelů, je informace typu spokojen, vyhovuje / nespokojen, nechci. A může ji nanejvýš využít nepřímo při návrhu formou uživatelského testování, A/B testů (předvedení dvou alternativ téhož a výběr varianty, která testované skupině vyhovovala víc).

Můžeme se uživatelů ptát, zda se jim něco líbí, nebo nelíbí. Ale nechtějme po nich vědět, jak by to mělo být správně.

Cokoli nám běžní uživatelé k aplikaci, jejím funkcím nebo vzhledu řeknou a navrhnou, berme pokaždé s velkou rezervou. Jistě, v odezvách uživatelů se může sem tam objevit zajímavá myšlenka či idea, která stojí za zvážení — ale ve většině případů jsou všechny individuální návrhy a připomínky laiků hodné spíše ignorování a profesionální designér by jim měl přikládat jen minimální váhu.

Spousta požadavků ze strany uživatelů je především ryze sobecká, nezohledňuje potřeby většiny, nerespektuje profesionální zásady designu, kontinuitu a konzistenci celkového návrhu, postrádá vkus atd. Podstatná je pro nás pouze informace, že možná určité části uživatelů některá funkce či prvek z nějakého důvodu nesedí, nerozumí mu, používá se jim špatně. Jestli je to třeba změnit a jak to případně udělat, musí ovšem zvážit a vyřešit designér, ne uživatelé.

Uživatel nerozumí designu a nemá vkus

Jak by se dívali v restauraci na hosta, který by přišel do kuchyně a začal vysvětlovat šéfkuchaři, že do boloňské omáčky by měl rozhodně dávat kečup, protože jeho maminka to tak vždycky dělá a jemu to moc chutná? Kdyby na stavbu hotelu přišel zájezd budoucích hostů a začali radit stavitelům s betonovou směsí a dekoratérům s barvami stěn pokojů? Proč je tak běžné tolerovat podobné věci zrovna ve webdesignu?

„Tady nám píše nějaký člověk, že ta růžová v záhlaví je odporná a dělá se mu z ní zle, a že kdybychom to předělali do zelené, bylo by to mnohem lepší,“ praví na pondělní poradě ředitel. „A komusi se nelíbilo to písmo v titulcích, prý to vypadá jako na náhrobku jeho dědy. Tak s tím něco udělejte.“

V prvé řadě je nutné si uvědomit, kolik lidí používá naši aplikaci, kolik navštěvuje náš web. Sto tisíc, a z nich se ozval jeden, dva? Když se jich ozvou stovky, stojí asi za zvážení se na problém podívat a například pomocí A/B testování ověřit, jestli by náhodou jiné řešení většině lidí nevyhovovalo více. Ale několik nespokojených uživatelů se najde vždycky, s tím je třeba počítat a ojedinělé připomínky k designu ignorovat. Nemluvíme pochopitelně o nahlášených chybách, ty je nutné opravovat — jenom o nespokojenosti se vzhledem, funkčností, ovládáním a o radách uživatelů ohledně jejich vylepšení.

Úkolem designéra není zajistit, aby se produkt co nejvíce líbil všem, ale pouze minimalizovat počet těch, kterým na něm něco zásadním způsobem vadí.

Nic na světě se nelíbí všem. To je axiom, který každý designér musí znát. To nejhorší, co může udělat, je poslouchat ojedinělé rady laiků nebo nedejbože nechat o designu někoho hlasovat. Ať už kolegy, účetní a uklízečky ve vlastní firmě, kolegium na straně klienta, či dokonce — ó, hrůzo! — samotné uživatele. Je statistickým faktem a je mnohokrát ověřeno, že vkus davu je podprůměrný a čím větší neodbornou veřejnost si nechá designér mluvit do své práce, tím nekvalitnější výsledek z ní vzejde.

„Design davem“ nefunguje.

Stejně jako je za menu v dobré restauraci zodpovědný jen a pouze šéfkuchař a ani hosté, ani nejvyšší ředitel nemají právo mu mluvit do receptů a postupů, tak je i design každého webu či jiné aplikace zodpovědností a dílem odborné práce designéra a nikomu jinému nepřísluší do ní zasahovat. Když se design nelíbí, nevyhovuje, nefunguje, je namístě rozhodnout, že se musí přepracovat — ale jak, to už musí být vždy výhradně v pravomoci designéra.

Uživatel nechce přemýšlet a rozhodovat se

Na tomto místě bezpochyby musím udělat jednu z výjimek v této knize a zmínit konkrétní zdroj. Přesněji řečeno dvě výjimky a dva zdroje, se kterými by se měl každý designér povinně seznámit v rámci základního odborného vzdělání. Jednak již legendární knihu Steva Kruga Nenuťte uživatele přemýšlet (Steve Krug: Don't Make Me Think), jednak slavné video psychologa Barryho Schwartze Paradox volby (Barry Schwartz: The Paradox of Choice), které je volně dostupné na internetu a snadno jej najdete. A pochopitelně bezpočet dalších knih, článků, studií a učebnic, pojednávajících ze všech možných pohledů stále o témže tématu:

Možnost volby je dobrý sluha, ale špatný pán.

Čím více možností na výběr designér uživatelům dává, tím více rozšiřuje nabídku a potenciálně zvětšuje zásah aplikace na stále větší cílovou skupinu — ale tím větší část uživatelů také současně frustruje, demotivuje a odrazuje. Vyvážit možnosti volby je těžký designérský úkol. Na jedné straně je tu určitá hrozba konkurenční nevýhody, způsobené omezenou, či dokonce žádnou možností výběru, na straně druhé je zase riziko paralýzy uživatele z přemíry voleb a nemožnosti se rozhodnout. Praxe přitom překvapivě ukazuje, že to druhé riziko je větší a nebezpečnější. Historie ostatně zná mnoho příkladů veleúspěšných podniků, které možnosti volbu svým zákazníkům výrazně omezily či dokonce zcela zredukovaly — od pověstného Modelu T Henryho Forda („Každý zákazník si může vybrat jakoukoli barvu vozu, pokud to bude černá“) třeba po produkty společnosti Apple v dobách její největší designérské slávy, u nichž absence variant a limitované možnosti uživatelského nastavení byly přímo součástí (úspěšného!) obchodního modelu. A naopak budeme v dějinách nesnadno hledat úspěšné vzorce podnikání, které by byly založeny na poskytnutí co nejširší palety voleb a nepřeberných možností nastavení. Nejspíš najdeme víc takových, u kterých právě takové snahy byly jedním z významných hřebíků do jejich rakve.

Ostatně i ten legendární Buridanův osel nepošel hlady pro nedostatek potravy, ale kvůli paralýze z neschopnosti vybrat si ze dvou naprosto stejných kupek sena. Pro osobní zkušenost ale nemusím chodit až ke středověkým filosofům, někdo třeba bude mít podobný zážitek jako já s jevem, kterému říkám paradox kabelové televize.

Kdysi v dobách před nástupem digitální televize, kdy jsme se starou anténou naladili v televizi jen několik málo televizních kanálů, jsme doma pravidelně kupovali televizní magazín a každý týden si jeden večer společně sedli, dychtivě listovali novým vydáním programu na příští týden a hledali mezi těmi několika dostupnými stanicemi nějaký pořad a film, který bychom chtěli vidět. Pár se jich během týdne našlo, pečlivě jsme si je zakroužkovali a těšili se na ně. A závistivě koukali na ty další desítky stanic, které jsme chytit nemohli, a spousty úžasných show a filmů, které na nich byly každý den k vidění. Až jednoho dne nám do domu přivedli optický kabel a ve schránce přistála nabídka kabelové televize. Neváhali jsme ani chvilku a za pár dní nám technik připojil k televizi krabičku, zapojil kabel a odstartoval ten zázrak. Neuvěřitelné. Desítky nových stanic, každý večer na výběr z několika koukatelných až skvělých filmů, zábavných pořadů, reality show, dokumentů, seriálů… Na co se dívat dřív? Co vybrat? Po několika týdnech jsme se přistihli, že úkol si pokaždé vybírat z té nepřeberné nabídky je pro nás natolik náročný, že jsme jej čím dál častěji podvědomě vzdávali a nedívali se nakonec vůbec na nic. Po roce jsme skončili s tím, že jsme se na televizi téměř přestali dívat.

Nemožnost volby může být špatná, ale příliš mnoho voleb bývá ještě horší.

Je ovšem důležité rozlišovat nabídku produktů a služeb, které chce prezentovat náš klient, a vzhled a chování webu či aplikace, které navrhujeme my. Obchodní politika a šíře sortimentu je čistě věcí našeho klienta a my mu můžeme nanejvýš poradit a pomoci jeho nabídku prezentovat tak, aby byla pro uživatele maximálně přehledná, volby byly snadné a výběr co nejméně vysilující a frustrující. Ovšem co se týče samotného rozhraní a architektury aplikace, tam je to už zcela na nás a měli bychom si zde rady z výše uvedených knih a videí skutečně brát k srdci — a jakékoli volby, možnosti a rozhodování, která chceme uživateli předkládat, raději několikrát zvážit a důkladně zauvažovat, zda jsou skutečně nezbytné a co můžeme udělat pro to, aby se bez nich naše rozhraní mohlo obejít. Uživatelé nám budou za každý chybějící rozhodovací krok nesmírně vděčni (i když o tom vlastně nebudou ani vědět).

Stovky páček, čudlíků a hejblat

Nepřeberná nabídka variant, možností a nastavení je pouze snem technicistních geeků. Kdekterý systémový programátor nejspíš bude bublat blahem nad každou další rozbalovací nabídkou možností a paletou podrobných nastavení, pomocí nichž si může přestavět a vyladit aplikaci dokonale k svému obrazu. Ale při vší úctě tato cílová skupina je velmi svébytná a v populaci poměrně malá. Většinový a typický uživatel má zájmy a tendence přesně opačné: voleb a možností nastavení touží mít co nejméně a každá další úroveň voleb, která se před ním vynoří, mu působí jen vrásky a zvyšuje paniku. Pohříchu ale velmi často právě první skupina vyrábí aplikace pro skupinu druhou, aniž by chápala onen zásadní rozdíl v chápání světa mezi nimi a těmi druhými.

Typický uživatel bude nadšený z rozhraní tvořeného jedním jediným tlačítkem, z nastavení tvořeného jedním jediným přepínačem.

Ovšem někdy je prostě nezbytné do naší aplikace dostat více nastavení, která mohou být pro určitou cílovou skupinu klíčová, poskytnout více voleb, bez nichž se — třeba malá, ale důležitá — část uživatelů prostě neobejde. Přitom ale stále hrozí, že zbytku (většině!) uživatelů komplikovanější nastavení zkazí uživatelský prožitek a zkomplikuje život. Jak se s tím vypořádat?

Zatím nejlepší strategií se ukazuje použít dvojí metr a nabídnout každému něco jiného. Tedy poskytnout paralelně dvojí možnost voleb a dvojího nastavení současně: jedno co možná jednoduché pro většinového, typického uživatele, který po složitém nastavování netouží, složitost je pro něj komplikací a chce mít rozhraní co nejjednodušší — a druhé podrobné, rozsáhlé, komplexní, pro tu menší skupinu odborníků, která je naopak vyhledává. Celé kouzlo spočívá ve skrytí celé té „překomplikované“ části za nenápadné dveře, které otevírá magické tlačítko Pokročilé nastavení či Pro experty. Toto řešení je výhodné pro všechny zúčastněné: většinový uživatel dostane své triviální, přehledné a snadno srozumitelné rozhraní třeba s jediným přepínačem (aniž by jej nenápadné tlačítko Ovládací panel pro certifikované jaderné inženýry nějak znepokojovalo), uživatel-odborník dostane svá detailní nastavení a my coby designér máme skvělý manévrovací prostor pro vyvážení nabídky pro obě skupiny.

Přepínač „Pro pokročilé“ je jeden z nejlepších vynálezů UX designu.

Nejde pochopitelně pouze o nastavení v předvolbách webových nebo počítačových aplikací, ale stejný přístup můžeme použít všude tam, kde se vyžaduje jakákoli interakce s uživatelem — ve webových formulářích, v řešení objednávek, publikačních systémech atd. Vždy bychom se měli snažit udělat průchod takovým formulářem nebo sekvencí stránek maximálně jednoduchý, srozumitelný a tak snadný, jak jen to je možné. A pouze pokud dojdeme k závěru, že přece jen některé složitější parametry je nezbytné pro nějakou minoritní část uživatelů zpřístupnit, měli bychom je uzavřít do příslušné sekce „pro experty“ a nenápadně odstínit od zraku většinových uživatelů, případně pro daný úkol vytvořit dvě celé souběžné sekvence, jednu hlavní pro typické uživatele, druhou komplikovanější a detailnější pro případné zájemce z řad odborníků či obecně pro minoritu uživatelů se specifickými potřebami.

Uživatel se bojí

Uživatelé mají mnoho strachů. Strach z neznámého. Strach o své soukromí a svá data. Strach, že se ztratí, že zabloudí, že znovu nenajdou, co už jednou nalezli. To je běžná aplikovaná psychologie, kterou musíme při své práci zohledňovat, vycházet uživatelům všemožně vstříc a předcházet zbytečným střetům s jejich obavami, strachy i fobiemi. Ale jeden druh strachu zde zmíníme podrobněji, protože je trochu specifický a pro práci designéra je povědomí o něm poměrně důležité a musí s ním vědomě pracovat v každé fázi svého návrhu. Mnoho uživatelů se bojí, že něco rozbijí, pokazí, nezvratně zničí, smažou, přepíšou, spletou a nebude cesty zpátky, aby to napravili. Stejně jako většina jiných strachů je to podvědomý a iracionální pocit a ani sebelepší výčet pojistek a bezpečnostních prvků s ním obvykle nic moc neudělá.

Typický uživatel je rád, když se mu dostane nějakého ujištění, že výrobek (aplikaci, stránku) nemůže rozbít.

Když jsem svým rodičům kdysi před mnoha lety pořizoval první počítač a vysvětloval základy jeho používání, nešlo to vůbec hladce. Pořád jsem u nich cítil nějaký silný blok a velký respekt k neznámému zařízení a po několika měsících snažení jen obtížně zvládali i ty nejzákladnější činnosti. Nakonec pomohla jedna prostinká rada, která všechno od základu změnila: stačilo vysvětlit a názorně předvést, že ať udělají cokoli, nemůžou nic pokazit. Většinu akcí lze vrátit zpět, smazané soubory vytáhnout z koše, skutečně kritické operace se nikdy nestanou bez varování a výslovného potvrzení, a kdyby bylo opravdu nejhůř, všechno se dá vrátit a obnovit ze zálohy. A to byl naprosto zásadní zlom. Když jsem zase přijel po nějaké době, moje maminka mi hrdě předváděla svou novou vlastnoručně vytvořenou prezentaci a vytištěné pozvánky na jakousi obecní trachtaci, kterou pořádala; a když mi ukazovala fotky, které si do počítače sama nahrála a uspořádala, sebejistě se přitom pohybovala adresářovou strukturou a pracovala s prohlížečem a editorem obrázků, úplně mi spadla čelist. Stačilo skutečně tak málo: jenom to ujištění, že nic nemůže nechtěně rozbít, jí rázem dovolilo experimentovat, zkoušet nové věci a učit se stovky nových dovedností. Ten původní respekt před strojem, strach, že může něco zničit, pokazit, nevratně smazat, byl ochromující — a jeho odstranění pak bylo jako zboření přehrady, jako spuštění laviny.

Styl pokus-omyl poskytuje velmi efektivní křivku učení. Ale jen pokud jsme si jisti, že dělat omyly je bezpečné a vratné.

Někdy ale ani výslovné a zřetelné verbální ujištění, že je zde bezpečno, uživateli nepomůže. Pokud i přese všechna vysvětlení a návody nakonec výsledná stránka nebo nějaký proces na uživatele působí nepřehledně, komplikovaně až překomplikovaně a získá-li zde primárně pocit no potěškoště, v tomhle se nevyznám ani zázrakem, neuděláme s tím nic. I kdybychom mu poslali manuál, nabídli zdarma školení, stejně bude pořád koukat, kde je nějaká konkurence, co místo toho zmatku má jedno tlačítko, a při první příležitosti k ní uteče. A my jako designéři máme další selhání do sbírky.

Velmi pěknou demonstrací je třeba známý publikační systém wiki, který umožňuje každému návštěvníkovi přepnout se do editačního režimu a na dotyčném webu změnit, přepsat, smazat naprosto cokoli. Programátoři wiki milují, jsou tam neustále dostupné všechny ovládací prvky u všech součástí obsahu, naprosto všechno lze jedním kliknutím změnit, obsah celé stránky je pod jejich plnou kontrolou a mohou s ní provádět doslova cokoli. A běžné uživatele přesně z téhož důvodu wiki děsí.

Jednou jsem ukazoval svému známému, jak snadno je možné změnit obsah hesla na Wikipedii (která je asi nejznámější implementací wiki systému na světě). Přepnul jsem stránku do režimu úprav a mohl na ní změnit, cokoli mě napadlo, obsah, formátování, styl, všechno. Tak upřímné zděšení, jaké se objevilo ve tváři toho dobrého člověka, jsem dlouho neviděl. „Prosím tě, hlavně to po mně nikdy nechtěj a už vůbec se mi nesnaž vysvětlovat, jak se to používá.“ Kdyby udělal i nějaké magické gesto pro odhánění zlých duchů, ani bych se v tu chvíli nedivil. A to byl vysokoškolák a učitel, který Wikipedii denně prakticky používá. Jenže právě znalost jejího gigantického rozsahu a povědomí o detailní provázanosti hesel a současně představa, že by se v něčem tak obrovském a složitém měl vrtat a že na všechno může kliknout a všechno nějak změnit a přenastavit a něco pokazit a rozbít, ho naplňovala nesmírnou panikou a nepomohlo ani vysvětlování, že každou změnu je možné dodatečně vrátit zpátky a každou chybu opravit. Už jen vědomí, že ty změny — včetně všech případných chyb, kopanců a přehmatů, kterých se lze při editování dopustit — se okamžitě projeví na skutečném webu, a dokud někdo nezasáhne, uvidí je všichni návštěvníci z celého světa, pro něj bylo naprosto paralyzující.

Ostatně není ani divu, že ačkoli Wikipedii používají stamiliony lidí a kdokoli může do jejího obsahu kdykoli zasahovat, skuteční editoři se počítají na velmi malá procenta nebo spíš promile z celkového objemu všech uživatelů. Počítačový geek, nadšeně se šťourající v podrobném nastavení libovolné aplikace, to jen těžko dokáže pochopit. Ale nějaká ta pomyslná paní Nováková, coby ukázkový příklad takového „běžného uživatele“, by mu to nejspíš velmi rychle a velmi názorně vysvětlila.

Složitost běžné uživatele děsí za všech okolností.

Ovšem pochopitelně nejlepší cestou, jak se se strachem uživatelů z fatálního selhání vypořádat, je nedávat k němu vůbec příčinu. To je pro designéra poučka v tomto ohledu asi nejzásadnější. Bez osobního a důvěrného vztahu stejně můžeme uživatele jen těžko ujišťovat a přesvědčovat, že nic nepokazí, že nemá čeho se bát, že nám může věřit a že na to tlačítko Odeslat objednávku může bez obav kliknout, protože následně se ještě zobrazí přehled objednávky a teprve poté ji bude moci závazně potvrdit… Na to nemáme v aplikaci nebo na webu ani prostor, ani dostatečné možnosti. Daleko účinnější bude ono tlačítko jednoduše nazvat výstižněji Zobrazit přehled objednávky a celý předchozí problém rázem zmizí.

Problém, který neexistuje, není třeba řešit.

Jinými slovy, nejspolehlivějším způsobem, jak vyřešit problém, je odstranit jeho příčinu. Tušíme-li, že naši budoucí uživatelé budou mít s komplikovanými formuláři, přemírou voleb a složitými a nepřehlednými stránkami problémy, budou je děsit a odrazovat, vytvořme rovnou jednoduché formuláře, poskytněme minimum voleb a stránky navrhněme srozumitelné a přehledné.

Ano, takhle prosté to je.

Uživatel je pohodlný a egoistický

Kdo se byť jen trochu zajímá o filosofii, ví, že egoismus — tedy soustředění se na vlastní zájmy a sledování vlastního prospěchu — je důležitým tématem mnoha předních myslitelů, od Aristotela a Seneky přes Kanta, Huma a Schopenhauera po Nietzscheho nebo třeba Darwina a Dawkinse. Pro některé má pojem egoismus spíše pejorativní nádech, ale pokud se od něj dokážeme oprostit a uvažovat více na racionální úrovni, možná dokážeme připustit, že jde o zcela zásadní a klíčový atribut vlastní všem živým tvorům, člověka nevyjímaje.

Lenost a egoismus jsou hlavními motory lidstva.

Osobně jsem přesvědčen, že egoistický pohled na svět je nejdůležitější a určující pro všechny lidi. Ba dokonce do té míry, že i jeho zdánlivý opak, tedy altruismus, vůbec není jeho protikladem, ale pouhým projevem. Tedy že altruismu, upřednostňování zájmů ostatních před zájmy svými, se člověk mnohdy dopouští vlastně z egoistických pohnutek — od uspokojení vlastního svědomí, naplnění svého morálního modelu po víru v nějakou formu karmy, tedy že dobré skutky se nakonec vrátí v dobrém nám samým. Jako všude, jsou i zde výjimky a nepochybuji, že se dají najít ryzí altruisté, kteří jsou schopni a ochotni obětovat se pro druhé i za cenu vlastního neprospěchu, zatracení a navzdory svému protestujícímu svědomí. Ale věřím, že pro drtivou většinu lidí je prvotní motivací jejich vlastní prospěch i v případech zdánlivě altruistických (vyplatí se mi to, jednou se mi to vrátí, přijdu za to do nebe, dělám to pro svůj dobrý pocit atd.).

Nechci se tu ale pouštět do hlubokých úvah a obecných rozborů, přece jen toto není filosofická esej, ale prostá kniha o navrhování webových stránek. Pokud zde pro naše vlastní potřeby prohlásíme, že většina lidí se v prvé řadě zajímá o vlastní prospěch, zisk, o své zájmy a cíle a vše ostatní je pro ně až druhořadé, a budeme to pro zjednodušení nazývat egoismem, nemůžeme tím myslím nic pokazit. Protože tak svět podle mě zkrátka funguje. Dojde-li na lámání chleba, každý primárně jedná za sebe a ve prospěch sebe či svých blízkých, vše ostatní jde až v druhém plánu.

Nebojme se egoismu, je dobrý a zcela přirozený.

Každopádně, ať už s tímto světonázorem souhlasíme, nebo nikoli, je užitečné jej přijmout aspoň pracovně coby profesní platformu designéra. Praxe ukazuje, že právě na egoistické motivace a chování uživatelů se lze spolehnout vždycky — a naopak sázky na altruismus a víra v dobrosrdečnost a jakékoli sebeobětování v praxi obvykle selhávají.

Co to znamená v reálném světě designu? Především to, že se nelze spolehnout, že by návštěvníci našeho webu dělali dobrovolně něco, co jim nepřináší žádný efekt. Že pojmy jako věrnost a loajalita jsou častěji mýtus než realita. Loajalita není samozřejmá, pramení rovněž z egoismu — uživatelé málokdy udělají něco zásadního jen proto, že by nám chtěli jen tak nezištně pomoci. Ale pokud si nás z nějakého důvodu oblíbí, zvyknou si na naše služby, bude jim vyhovovat způsob, jakým jim právě náš web poskytuje informace, loajalita může spontánně vyrůst do neuvěřitelných výšin a uživatelé se mohou rázem proměnit i v nadšené mecenáše, kteří budou ochotni podpořit a zachránit náš — svůj! — neprosperující projekt. Neboť změnit své rituály, znovu si zvykat na cosi jiného a učit se něco nového je pro mnoho lidí spíše nepříjemnou zkušeností. A právě v takových případech pozorujeme ony vzedmuté vlny solidarity loajálních zákazníků, masovou podporu, ochotu vzdát se dočasně určitých výhod atd. Samé vznosné činy, ale ve skutečnosti motivované velmi egoistickými pohnutkami. Pokud je náš produkt snadno nahraditelný, transparentně zaměnitelný, řada uživatelů bez mrknutí oka změní jeho dodavatele a po nás ani nevzdechne. C’est la vie…

Ostatně na znalosti a vědomí tohoto vzorce chování je založeno nemálo marketingových strategií: kolik jen projektů stojí a padá s tím, že jejich uživatelé jsou nějakým způsobem zaháčkovaní a daleko více než skutečnost, že by snad neexistoval lepší a výhodnější konkurenční produkt, je drží na místě vědomí, že změna by byla nepříjemná a komplikovaná. Ale víc než kdy jindy je zde důležité s touto skutečností pracovat zcela vědomě a cíleně. Vědět, co opravdu naše klienty drží zrovna u nás (notabene když dobře víme, že kdesi vedle běží hned několik životaschopných konkurenčních projektů, se kterými se už pomalu nemůžeme ani rovnat), a tyto parametry se snažit co nejlépe držet při životě a podporovat. Stávající uživatele v takové situaci nechceme v žádném případě ohromovat a překvapovat revolučními změnami. Podstatné je tady jediné: nezklamat jejich důvěru, dávat jim to a v takové podobě, jak jsou zvyklí, a případné potřebné změny provádět spíše nenápadně, evoluční cestou.

Pohodlnost a nechuť ke změně bývá u uživatelů silnější než mnoho jiných motivací.

Kolik jen projektů změnilo svůj směr ke krachu a zániku právě v takovéto situaci, kdy provozovatelé nepochopili skutečné motivace svých dlouholetých zákazníků, které je u nich celou dobu držely, a místo nenápadných evolučních změn se (obvykle ve snaze přitáhnout nové a čerstvé uživatele) dopustili zlomové revoluce, jejíž dopady byly silnější než ona zdánlivá loajalita (ve skutečnosti jen lenost a nechuť k radikální změně), a vyloženě sami donutili své vlastní klíčové zákazníky odejít. Protože v okamžiku, kdy už je uživatel proti své vůli přinucen přece jen své zvyky a zavedené postupy změnit, boří se mosty, lámou vztahy a všechno se začíná znova. Jakákoli domnělá loajalita jde stranou, a když už byl uživatel k nějaké radikální změně jednou donucen, obvykle se vrací na startovní čáru a bez ohledu na předchozí historii si jednoduše vybere nejvýhodnější nabídku na trhu. Je proto nezbytné si být v takové situaci zatraceně jistý, že ta nejlepší nabídka na trhu pro ně bude stále ta naše. Všechny ty případy, kdy se nad podobným zavedeným projektem mnohý progresivní mladý designér nechápavě diví, jak nějaké „takové prehistorické monstrum“ vůbec může v dnešní době ještě existovat, jsou vlastně jen příklady projektů, kde provozovatelé tyto zákonitosti chápou a do nějakých zásadních revolučních změn se pouštět nehodlají — anebo je možná ani vědomě nechápou a pouze vycházejí z osvědčeného pravidla, že není dobré přepřahat koně za běhu.

Zkušený designér se v takové situaci přizpůsobí historické zkušenosti a situaci na trhu svého klienta a bude pracovat spíše s pomalými a opatrnými evolučními změnami — a pouze v situaci, kdy si bude zatraceně jistý výsledkem a všemi následky, se může snažit prosazovat nějaké radikálnější a skokové změny. Ale i když klienta v takové situaci přesvědčíme, svou kůži zde na trh neseme my sami. Mít v portfoliu uvedeno „zasloužil se o krach významné firmy XYZ“ nechce asi nikdo.

Klient, uživatelé a my

Podrobně jsme si popsali všechny tři své partnery, se kterými coby designér, koordinátor a styčný důstojník v jednom máme na každém projektu co do činění: provozovatele webu či jiné aplikace, jeho potenciální uživatele a pochopitelně také realizační tým, který aplikaci bude vytvářet (pakliže ji neplánujeme zvládnout kompletně celou jen vlastními silami). A také jaký je náš vztah ke každému z nich.

Na jedné straně máme tedy provozovatele, zadavatele projektu coby svého klienta. Ten nejspíš ví jen velmi málo o technologiích a zákonitostech návrhu a výroby interaktivní aplikace, kterou hodlá provozovat. A obvykle ví i docela málo (nebo má hodně zkreslené představy) o samotném fungování webu, o zákonitostech online marketingu, získávání a udržování návštěvníků, o prioritách a o tom, co je vlastně důležité a co je hodné ignorování. Má scestné představy a očekávání, záleží mu na nedůležitých věcech a je schopen opomíjet ty skutečně podstatné. Jemu v prvé řadě sloužíme jako nezbytný propojovací prvek mezi nesourodými světy jeho vlastního oboru a světem naším, jakož i minivesmíry našich návrhářů, vývojářů a marketérů.

Proti němu na opačné straně stojí budoucí uživatelé, které musíme především co nejlépe poznat, abychom jim mohli kýženou aplikaci navrhnout na míru, aby je co nejvíce zaujala, rádi ji používali a hlavně aby co nejlépe plnila jejich potřeby a rezonovala s jejich vlastními zájmy. Základní informace nám o nich poskytl klient, ale není vyloučeno — a naopak je poměrně běžné — že tyto informace jsou nepřesné, zaujaté, ne-li dokonce zavádějící. Tady je naším odborným posláním vlastní výzkum a průzkum trhu, sondování konkurence a podrobný výslech klienta a pečlivé korekce a analýzy. Naše vlastní specifikace uživatelů a definice cílových skupin musí být přesnější a detailnější než původní klientovy představy. A na základě těchto definic pak musíme vytvořit několik realistických, živoucích a komplexních postav představujících zástupce všech cílových skupin typických budoucích návštěvníků.

A konečně za našimi zády se pak nachází vývojářský tým, který ve své inženýrské bublině příliš nechápe ani požadavky a potřeby zadavatele, ani reálné zájmy a priority uživatelů a nadto se většinou vyjadřuje jakousi podivnou klingonštinou, které rozumíme pouze my, a musíme zde hlavně fungovat jako prostředník, obousměrný tlumočník a šumový filtr při komunikaci mezi nimi a klientem. Do tohoto týmu musíme přitom počítat jak programátory a kodéry, grafiky a animátory, správce serverů a dodavatele hardwaru, tak i marketéry, webové analytiky a vůbec všechny ty desítky odborných profesí, které při vývoji webu můžeme potřebovat. Je zcela namístě předpokládat, že našemu klientovi jsou pojmy a zkratky jako jQuery, MVC nebo PHP stejnou španělskou vesnicí jako bounce rate, SEO či CPC. Tady je klíčová naše alespoň rámcová znalost všech těchto pojmů a schopnost plynně a hladce překládat z laického jazyka do geekovštiny a zpět.

A my jako centrální spojovací prvek stojíme uprostřed toho všeho a naším primárním cílem je zprostředkovávat komunikaci mezi všemi těmito zcela nekompatibilními světy.

Propojení

To je ovšem situace během procesu návrhu a realizace dotyčného webu či aplikace. Co ale až naše práce skončí, produkt je hotový a nasazený v ostrém provozu? Až se svého řídicího pultu uprostřed sestoupíme, odpojíme komunikační kanály a zmizíme ze scény? Až zde zbude jen samotný provozovatel a jeho uživatelé? Jaký pak vlastně bude jejich vztah? Jak bude fungovat komunikace mezi nimi, když ten dosavadní most mezi nimi najednou zmizí?

Pravdou je, že obě tyto strany se často navzájem míjejí a míjet a nechápat se budou i nadále. Pravdou už ale není, že spojovací most mezi nimi zmizí. Naopak, ten zde po nás má zůstat vybudovaný, plně funkční, stabilní a pevný. Bude jej totiž tvořit onen web nebo aplikace, kterou navrhujeme. To ona musí být nadále tou trvalou spojkou mezi oběma světy a je naším cílem a úkolem ji postavit právě tak, aby co nejlépe plnila funkci spolehlivé komunikace mezi provozovatelem a uživateli. Aby ideálně propojovala ty natolik různé a nesourodé potřeby, zájmy a cíle na obou stranách.

Všechno stojí a padá právě s tím, co tady po sobě zanecháme. Jak kvalitně navrhneme onen web, aplikaci či rozhraní a jak dobře bude plnit svou hlavní funkci: co nejpřirozeněji propojovat zájmy a cíle provozovatele s potřebami a prioritami uživatelů. Jsem si plně vědom, že se s tím opakuji už poněkolikáté, ale považuju to za natolik zásadní sdělení, vlastně za prvořadé poslání této knihy a jsem přesvědčen, že je nezbytné tuto skutečnost, kterou považuji za esenci, nejhlubší podstatu designérské profese, opakovat stále znova dokola:

Hlavním cílem práce designéra je vytvořit funkční propojení mezi zájmy zadavatele a potřebami uživatelů.

Jinými slovy, při svém návrhu musíme neustále myslet na tento princip a podřizovat se mu. U každého kroku, u každého detailu se musíme ptát, proč tam je, proč je právě zde a vypadá právě takto. Kvůli čemu a pro koho ho vytváříme. Co má přinést našemu klientovi, jak mu to bude k užitku. Zda a jak se k této části a funkci ti správní uživatelé dostanou. A proč vůbec budou chtít dělat požadované činnosti a provádět úkony, které po nich chceme? Jaký z toho budou mít prospěch, jaký budou mít zájem cokoli z toho podstupovat, případně se dokonce chtít vracet?

Už jsme naznačili, že pohledy na tyto body a odpovědi na stejné otázky jsou na obou stranách velmi odlišné a cíle a motivace rozdílné, ne-li vyloženě protichůdné. Uživatel je sobecký, pohodlný, nějaké naše požadavky a výzvy bude ignorovat a nakonec stejně všechno dělat po svém, tou nejsnazší a nejjednodušší cestou. A pokud neuspěje, tak se jednoduše otočí na podpatku a půjde pryč. Pokud od něj náš klient něco chce, musí jej hýčkat, zametat mu cestu, vytvářet pohodlné a dobře značené koridory vedoucí k požadovaným cílům, nekomplikovat mu život žádným složitým rozhodováním, případně jej dokonce i bavit, lichotit mu, vytvářet dojem příjemného koutku světa, kam se bude chtít sám rád vracet.

A pochopitelně to klient nebude dělat sám, ale právě prostřednictvím rozhraní, které mu pro tento účel navrhujeme. Rozhraní, které musí všechny výše uvedené funkce plnit samo o sobě — ale i svým stylem a principy podporovat žádoucí vzorce chování na obou stranách.

Perspektiva

Nesmíme zapomínat ještě na jeden důležitý faktor, který je zde ve hře. Ještě jednou se vraťme k úvodní kapitole a vzpomeňme si na onoho obchodníka, tolik hrdého na svou prodejnu, a na onoho pána, co jde jen tak kolem a s hlavou plnou vlastních starostí si chce jednoduše nakoupit pár drobností. Střetávají se zde dva naprosto odlišné světy — nejenže se liší ve svých zájmech a cílech, ale liší se velmi zásadně také v úhlu pohledu na místo, kde se setkávají, i v chápání samotné podstaty svého vzájemného střetnutí.

Pro jednoho je ono místo středobodem jeho vlastního vesmíru, je herním plánem, kde se odehrává vše podstatné v jeho podnikání; příchozí návštěvník je jeden z mnoha, jedna tečka v mase tisíců dalších zákazníků. A pro toho druhého je to přesně naopak: středobodem svého vesmíru je on sám a jeho soukromý život a dotyčné místo setkání je jen jedním z mnoha. Pouze nedůležitá a nepatrná epizodka v mase tisíců podobných míst, která během dne, během života navštíví. Rozdílnější perspektivy, odlišnější náhled na samotnou podstatu věci už obě strany snad ani mít nemohou.

Tento paradox — já mu říkám paradox perspektivy — je jedním z nejdůležitějších parametrů, který ovlivňuje veškeré interakce mezi oběma zúčastněnými stranami. Ať už se jedná o obchodníky a zákazníky v reálném životě, nebo o provozovatele webů či počítačových aplikací a jejich uživatele ve světě virtuálním. Paradox perspektivy a jeho důsledky jsou jedním z velmi častých jevů, a dokonce častější, než bychom mohli čekat.

Já osobně narážím na jeho přímé projevy na webech po celém světě prakticky každý den. Už od těch nejmenších — třeba že provozovatel lokální pizzerie, kavárny či restaurace jaksi opomene uvést, v jakém městě se to jejich úžasný podnik vlastně nachází. Najdete nás na Hlavní ulici (naproti supermarketu). Pokud pojedete ze severu, hned za benzínkou odbočte doprava a po třech blocích doleva. Sídlíme v šedivé budově po pravé straně. Což je popis, podle kterého nejspíš najdeme správný dům v Benešově, Chihuahue i Kjótu. Neboť pro provozovatele je přece samozřejmé, kde sídlí, svět za hranicemi jejich města je pod jejich rozlišovací schopností a ani je nenapadlo pomyslet na to, že na jejich web se snadno dostanou návštěvníci z celé země, ba z celého světa.

Při publikování čehokoli na internetu se snadno zapomíná, že potenciálním návštěvníkem může být kdokoli mimo naši známou cílovou skupinu.

Kdysi jsme domů vybírali výrobce kuchyňských linek na míru. Ve vyhledávači jsem si našel celkem dlouhý seznam dodavatelů. Po dlouhém vybírání jsme skončili u výborné nabídky — přesně vyhovoval styl a variabilita vyráběných kuchyní, ceny byly velmi přijatelné. Ostatní výsledky jsem zavřel a začal se věnovat jen této konkrétní nabídce, která se nám nadmíru zamlouvala. Jak jsem tak koukal na obrázky a probíral se sortimentem, vůbec mi nedošlo, že zde úplně chybí sídlo firmy. Nepřemýšlel jsem nad tím: při vyhledávání jsem totiž zadával i jméno našeho města a u většiny předchozích výrobců jsem zaregistroval, že jsou z blízkého okolí. Teprve po delší době a až z odpovědi na naši poptávku jsme se dozvěděli, že firma sídlí asi 400 km daleko…

Některé firmy dokáží pojmout toto sebestředné zahledění do sebe ještě velkolepěji a dokonce zapomenou seznámit návštěvníky s tím, kdo jsou a co vlastně dělají. A na jejich stránkách si pak přečteme třeba: Globuli, to správné rozhodnutí! Progresivní aplikací moderních technologií do zpracovatelských procesů a proaktivním využíváním systémových rezerv zvyšujeme zákaznický prožitek až o 38 %! Zodpovědnou environmentální politikou děláme ze světa lepší místo pro život. Kolik jen podobných prezentací už jsem potkal, od webů místních firmiček po známé globální startupy. Nepochybuji o tom, že všechny určitě dělají ze světa lepší místo k žití, ale přece jen bych rád především věděl, jestli dotyčná firma, na jejíž webové stránky jsem právě zabloudil a kterou jednoduše neznám, prodává papírové krabice, vyrábí válcované potrubí, vyvíjí software, nebo půjčuje peníze za úžasně výhodné vysoké úroky…

Je ale namístě si přiznat, že i problém s paradoxem perspektivy je vlastně součástí oné dříve zmíněné projektové mezery. Že totiž ta znalost a povědomí o tom, že klientův pohled a priority se s perspektivou a prioritami jeho budoucích návštěvníků mohou celkem podstatně míjet, je ve své podstatě znalostí vysoce odbornou a vychází z naší — nikoli klientovy — odbornosti. A ve výsledku je tedy naší povinností coby designéra umět nahlížet web z uživatelovy perspektivy, překládat klientův pohled a požadavky do řeči uživatelů (a naopak) a na možné konflikty upozornit, případně je rovnou bez řečí vyřešit.

Konflikty plynoucí z paradoxu perspektivy jsou chybou designéra, nikoli zadavatele.

Tedy aspoň jejich opomenutí. Pokud na ně klienta upozorníme a vysvětlíme, jaké chyby se dopouští a jaké může mít následky, a on se přesto rozhodne to ignorovat, už s tím pochopitelně nic moc nenaděláme. Ale stejně: nepodařilo-li se nám o tak podstatných věcech svého klienta přesvědčit, budeme to stejně nakonec považovat za své profesní selhání.

Postup

Abychom mohli ten komunikační most mezi naším klientem a jeho budoucími uživateli co nejlépe navrhnout a následně i postavit, potřebujeme nejprve shromáždit velké množství informací. O klientovi samotném, o jeho podnikání, nabídce produktů či služeb, o situaci na trhu a existující i možné budoucí konkurenci; o jeho obchodní politice a záměrech, krátkodobých i dlouhodobých plánech, marketingové strategii, o jeho značce (brandu) a strategii jejího budování. O potenciálních uživatelích neboli cílové skupině, o její struktuře, vzorcích chování, preferencích, nárocích a zvycích; o historii jejich dosavadního chování na stávajícím trhu a u konkurence. O technických možnostech a omezeních, legislativních požadavcích na budoucí projekt, o rozpočtu a časovém plánu; o mnoha budoucích provozních detailech, organizaci, správě a technické podpoře a o desítkách dalších bodů.

Všechny tyto informace musíme následně analyzovat, setřídit, nalézt v nich nějaký systém a struktury a vybrat z nich to, co je pro daný projekt skutečně podstatné. Musíme přitom vědět, že údaje poskytnuté samotným klientem mohou být zavádějící a zkreslené, a nesrovnalosti v nich nalézt a odstranit a sami si zjistit chybějící data. Z dostupných údajů pak musíme vytvořit podrobné zadání, specifikaci projektu. Správně pojmenovat skutečné cíle projektu, nadefinovat reálné cílové skupiny a vytvořit věrohodné postavy (persony) reprezentujcí skutečné budoucí uživatele. Navrhnout logické, datové i navigační struktury celého projektu, rozdělit je do logických celků a sekcí, vhodně stanovit navigační vzorce a strategii navigace; navrhnout globální i dílčí procesy a úkoly, které mají uživatelé plnit, správně k nim nadefinovat a vyznačit cestu a specifikovat požadované cíle každého dílčího kroku (prvky call to action).

Posléze musíme navrhnout chování jednotlivých částí, typických stránek webu či modulů aplikace, výpisů a dialogů rozhraní, nakreslit jejich schematické modely, případně vytvořit i funkční prototypy. Otestovat jejich funkčnost a smysluplnost. S vývojářským týmem navrhnout a popsat technologie a vybavení, které bude k vytvoření potřeba, zajistit všechny potřebné zdroje a spustit implementaci. Nakonec navrhnout i grafický vzhled a naimplementovat jej do již hotových funkčních šablon. A ve finále testovat, opravovat, publikovat, případně i sledovat a vyhodnocovat běh webu či aplikace v testovacím i ostrém provozu.

Takový je ve stručnosti základní proces návrhu jakékoli interaktivní aplikace. Každý projekt má svá specifika, u každého musíme dát důraz na jiné aspekty, některým krokům se věnovat podrobně a jiným jen povrchněji, stejný krok může být u různých projektů jednou pouze rychlý a formální, jindy velmi obsáhlý a tvořící významnou část návrhu. Ale všechny tyto kroky bychom měli v té či oné úrovni detailů provést u každého projektu — od návrhu triviálního rozhraní nějakého přístroje po rozsáhlý web.

Všem jednotlivým bodům, tomu, jak získat potřebné informace, jak je zpracovat i jak poté probíhá krok po kroku celý proces návrhu, se na příkladu designu webu detailně věnuje celý následující oddíl této knihy.

Postup návrhu a realizace webového projektu

Vymezení pojmů

Aniž bych se chtěl sebeméně dotknout inteligence a odborné způsobilosti svých čtenářů, jsem přesvědčen, že na tomto místě je nezbytné ujasnit si přinejmenším dvě věci. Za prvé, co vlastně takový jeden konkrétní projekt interakčního designu vlastně je, co jeho zpracování obnáší (a co nikoli) pro zúčastněné strany a co je jeho podstatou a cílem. A za druhé, jak se toho cíle má dosáhnout, čím začíná a čím končí.

Z vlastní praxe i z praxe mnoha kolegů v oboru totiž vím, že ani v jedné z těchto otázek nemají zúčastněné strany vždy zcela jasno. Tápou v tom, co vlastně je jejich úkolem (a co je práce pro někoho jiného), co klientovi nabízejí, a často ani netuší, co vlastně je onou hlavní přidanou hodnotou, kterou coby designér zadavateli poskytují. A o samotném postupu, o věčném začínání designových zakázek odprostředka či rovnou od konce, o vynechávání nejpodstatnějších kroků, o postupování ve zcela nesmyslném pořadí by se dalo napsat hned několik samostatných knih.

Máte-li v odpovědích na tyto otázky jasno a připadají-li vám zbytečné, věřte mi, že mám opravdu radost a se vším nadšením vám doporučím následující kapitoly jen prolétnout a blahosklonně kývat nad samozřejmostí mého objevování stále nových a nových Amerik. Anebo se naopak zamračit a nesouhlasně vrtět hlavou, neboť vám se mnohokrát osvědčily postupy zcela jiné či léta profitujete z projektového workflow ve zcela jiném pořadí.

To je naprosto v pořádku — žádný praktický problém nemá jen jediné správné řešení. Tato kniha představuje osvědčená řešení moje nebo některých mých kolegů z oboru. Postupy a zásady, které považuji za nejvíce přínosné projektům, se kterými jsem se ve své praxi setkal a které se snažím používat u všech projektů nových. A to jak v pozitivním smyslu — tedy že se v praxi nejlépe osvědčily — tak i s negativním vymezením, kdy se dodatečně ukázaly důsledky našich vlastních i cizích chyb a projevily dopady vynechaných kroků či nevhodně zvolených postupů. Ani zdaleka nebyly tyto projekty vždy ideální procházkou růžovou zahradou a neklapaly jak perfektně promazaný precizní stroj. Ano, pár krásných učebnicových příkladů se pochopitelně najde — ale určitě se mi v hlavě vynořují především ty stovky problematických míst, zádrhelů a skřípění, kdy jsem (já či někdo jiný) udělal chybu, která se projektu v konečném důsledku vymstila a způsobila jeho zdržení, dodatečné vícepráce, či dokonce kompromisní a ne zcela stoprocentní výsledek, který jsme si původně představovali. I všechny tyto chyby, jimiž jsme si prošli, jsou zde zohledněny: mnohé rady, tipy a postupy v této knize jsou z velké části právě jejich výsledkem a praktickou radou pro mé minulé já, jak bych sám tehdy měl postupovat, abych se jim vyhnul.

Chyby jsou dobré. Nic tak člověka neposílí a neposune dál jako jeho vlastní chyba, ze které se poučil. Fatální chyby se dějí vždy a všude a nikdo se jim nevyhne. Pouze jedna věc je však důležitá: aby se nám žádná fatální chyba nestala podruhé.

Kdo se ve své profesi dopustí téže závažné chyby dvakrát, měl by se na chvíli zastavit a vážně zamyslet. Něco je špatně.

Připomeňme si tedy nejprve, co je vlastně podstatou našeho snažení a jeho cílem, a pak se začněme podrobně věnovat krokům, jak ho co nejlépe dosáhnout.

Web jako příklad interaktivní aplikace

Co přesně jsou interaktivní aplikace, jsme si upřesnili v úvodu. Protože tento obor je velmi široký a bylo by velmi náročné se v jedné knize podrobně věnovat specifikám návrhů rozhraní počítačových programů, parkovacích automatů, kávovarů nebo herních ovladačů, zaměříme se raději pečlivě na jeden vybraný podobor, a to na ten v současnosti nejrozšířenější: návrh webů (a v některých ohledech i webových a mobilních aplikací). Pro jednoduchost se ale povětšinou omezíme na samotný základ: návrh webu coby soustavy hypertextově propojených HTML stránek.

Nadále se budeme podrobněji věnovat především postupům webdesignu — nicméně uvedené postupy jsou většinou platné pro tvorbu jakýchkoli jiných interaktivních aplikací.

Otázka, v čem spočívá návrh webu a co je na něm podstatné, nemá v žádném případě jednoznačnou ani jednoduchou odpověď. Především záleží na tom, kdo se na ni ptá. Už jsme zmínili v předchozím textu, že zcela jiný pohled na ni má zadavatel (tedy náš klient), jiný koncový uživatel a jiný je i pohled náš coby designéra.

Pro zadavatele je požadovaná webová aplikace především nástrojem ke splnění jeho cílů. Chce ji vyrobit či vylepšit z nějakého důvodu — obvykle za účelem vlastního zisku, pro zlepšení vlastní prezentace, jako podporu pro jiné své aktivity. Bohužel celkem často se setkáme s tím, že tento klientův cíl není zcela jasný. Může nám připadat, že mu to prostě jen připadlo „jako dobrý nápad“ a vyšší smysl to nemá. Ale v naprosté většině případů je to jen klam a skutečný cíl a smysl zde je, zcela jasný a zřejmý, pouze ho dosud nikdo nedokázal zřetelně a jednoznačně zformulovat a pojmenovat. Už jsme naznačili, že jeho určení a jasné vymezení je jeden z hlavních úkolů nás coby designéra, a v následujících kapitolách si také ukážeme, jak toho dosáhnout.

Pro koncového uživatele může být budoucí web lecčíms. Zajímavým nástrojem, užitečnou pomůckou, důležitým zdrojem informací, zábavnou hříčkou i pozornostinehodným šumem v mracích všech možných zdrojů kolem. Z tohoto hlediska je nejpodstatnějším úkolem zajistit, aby pro dostatečný počet uživatelů (hlavně pro požadovanou cílovou skupinu) byla aplikace nástrojem, který potřebují. Který z nějakého důvodu považují za užitečný, který chtějí vyhledávat a používat. Což má typicky jediný důvod: naše aplikace pomáhá uživateli vyřešit nějaký problém. Zde je hlavním úkolem designéra tento problém identifikovat a zajistit, aby jej aplikace skutečně pomáhala efektivně řešit.

Pro nás, interakčního designéra, není výsledná aplikace ničím jiným, než funkčním nástrojem k propojení obou výše zmíněných zájmů: cílů klienta a potřeb uživatelů. Tam, kde se tyto vektory protnou, vznikají aplikace potřebné, chtěné a žádané. Tam, kde se minou, vznikají aplikace zbytečné a nechtěné, třebas i líbivé a na chvilku zábavné, ale v důsledku neužitečné a nikým nepoptávané. A je designérovým primárním cílem najít onen most mezi oběma břehy a cíle klienta na jedné straně a potřeby uživatele na straně druhé správně spojit do funkčního celku maximálně vyhovujícímu oběma stranám.

Je namístě zde podotknout jednu důležitou a často opomíjenou poučku: to, jestli výsledek bude líbivý, cool, zábavný, unikátně převratný a všude citovaný, nebo na pohled fádní a vcelku konzervativní, jsou všechno poměrně nepodstatné, sekundární parametry. Je-li splněn hlavní cíl — tedy že se maximálně funkčně potkává zájem klienta se zájmem uživatele — je skutečnost, že výsledek se třeba klientovi nelíbí, že média jej kritizují za malou invenci, nebo dokonce že se malá část uživatelů zlobí a není schopna překousnout změny, poměrně irelevantní.

Užitý design má být především funkcionalistický: podstatné je splnění účelu, vzhled a forma jsou druhořadé.

Podstatné pro designéra, aby tento svůj primární cíl mohl splnit, je důkladně poznat obě strany. Musí co nejlépe poznat svého klienta a musí se také dobře seznámit s jeho cílovou skupinou, s budoucími uživateli.

Co je to vlastně design webu

Ještě před tím, než se pustíme s naším novým klientem do rozboru jeho poptávky, ujasněme si mezi sebou, co vlastně takový design webu (nebo jakékoli jiné interaktivní aplikace) obnáší a co má naše práce vlastně klientovi přinést. Do detailu se jednotlivým složkám designu věnuje celý následující oddíl knihy, ale pro jistotu si v tom udělejme jasno hned na začátku. Protože nejen naši nepoučení klienti, ale i mnoho těch, kdo se tvorbou webů zabývají, mnohdy nemá vůbec jasno v tom, co vlastně tento obor všechno zahrnuje a jaké problémy se snaží řešit.

Laikům každý designérský obor splývá s vizuální podobou výsledného díla, za dílo designéra považují jen vnější znaky výsledného produktu. Což je pochopitelně zkreslená a zcela mylná představa. Architektonický návrh domu ani zdaleka nestojí pouze na tom, jak vypadá v pohledu z ulice či jak jsou působivé vizualizace jednotlivých místností. Hlavním přínosem architekta je předeším dobře vymyšlený životní prostor, praktičnost a celkový životní styl, jaký dům přináší jeho obyvatelům. Design židle nespočívá pouze v úchvatné vnější podobě, ale převším v její použitelnosti, v řešení, jak pohodlně se na židli sedí, jak se dá skladovat a stohovat, jak dobře půjde vyrobit, v její ergonomii. Za návrhem je skryto množství teorie, uživatelských testů, ověřování různých variant, zkoušek prototypů, únosnosti, trvanlivosti a odolnosti materiálů. Vnější podoba je pouze výslednicí všech těchto vstupů a pečlivě navržených parametrů.

Design je komplexní obor a výsledný vzhled jen vyplývá z návrhu mnoha méně viditelných parametrů.

Totéž co pro návrh domu či židle platí i pro design interaktivních aplikací, potažmo webových stránek. Jejich vizuální podoba je pouhým důsledkem mnoha jiných, často málo nápadných atributů, jejichž návrh je prvořadým úkolem designéra. Jak jsme si již řekli, hlavním úkolem webu je plnit požadavky a cíle zadavatele, a současně co nejlépe zaujmout uživatele a co nejvhodněji vyhovovat jeho potřebám. I mírně zkušenému designérovi je jasné, že výsledná vizuální podoba, barevnost a grafické prvky mají na tyto cíle jen nepatrný vliv. Rozhodující jsou úplně jiné faktory.

V prvé řadě, bez diskuse zcela nejpodstatnější pro nás bude jasné zadání. Bez toho, abychom věděli, proč, s jakým cílem a pro koho web vytváříme, můžeme k ideálnímu cíli dojít leda neuvěřitelnou souhrou náhod. Jak si dále ukážeme, nalézt a podrobně specifikovat toto zadání je poměrně těžkým úkolem, o jehož řešení má na začátku jen málokdo aspoň mlhavou představu, a často i výchozí zadání klienta bývá spíše zavádějící. Designér má za úkol vypátrat všechny požadavky a definovat skutečné parametry, které má výsledné dílo respektovat, aby plnilo svůj hlavní úkol.

Následně je nutné podrobně navrhnout všechny součásti, které webovou aplikaci — coby poměrně složitý informační komplex — spoluutvářejí a kompletují. Cílové body webu, typické uživatele a vzorové scénáře, jak těchto cílových bodů mají dosáhnout. Marketingovou a komunikační strategii. Komunikační styl a vztah k uživatelům. Informační architekturu a hierarchii. Navigační strategii, logickou a datovou architekturu. Technologie a zdroje, způsob technické implementace. Jazykový a vizuální komunikační styl. Sociální interakce. Uživatelský prožitek. Přístupnost a použitelnost. Grafickou úpravu.

Grafika je až poslední a ten nejméně podstatný krok návrhu webu.

Povšimněme si, že grafický návrh je až to poslední, co nás při návrhu bude zajímat. Popravdě je to také až to úplně poslední, čemu bychom se měli věnovat. Jistě, pro klienta je vizuální podoba výsledku naopak to první, oč se bude zajímat. Ale on je laik a neví, co je pro jeho web podstatné. My jsme profesionálové a vědět to musíme my. Grafika tím hlavním určitě není. Dnes se dá každý web změnit vizuálně k nepoznání prostou změnou jednoho stylového souboru — ale jeho celkové chování, datové struktury, architektura, hierarchie a navigace a mnoho dalších zásadních parametrů se už tak snadno měnit nedají.

To podstatné, co si musíme uvědomit, jsou tyto dva komplementární fakty:

kterýkoli z ostatních kroků a součástí návrhu webu musí být funkční a konzistentní bez ohledu na budoucí grafickou úpravu webu

grafická úprava musí zohledňovat a respektovat všechny ostatní složky návrhu webu

Z toho logicky plyne jednoznačný závěr: grafický vzhled se musí navrhovat až úplně na závěr, jako vyústění a výsledek širšího zadání, které tvoří všechny dílčí parametry webu — vycházející jak ze zadání klienta, tak z jednotlivých specifikací, vzniklých během návrhu všech ostatních součástí webu.

Jak web vzniká?

Abychom se rovnou vyhnuli trapným nedorozuměním, chápejme otázku z titulku pouze jako řečnickou. Správně položena by totiž měla znít „Jak by měl web vznikat v ideálním případě?“ Odpovědi na dotaz, jak weby opravdu vznikají v každodenní webdesignérské praxi, by totiž až příliš často mohly znít příliš pochmurně, zoufale, rozpačitě, i stydlivě, či dokonce vulgárně. Nepříjemně často se nové projekty rodí bez rozmyslu, chaoticky, od konce, začíná se kreslením homepage a končí vymýšlením, co na ni dát; programátoři se vrhají do programování databáze, aniž by někdo aspoň tušil, čím přesně bude naplněna a jaké bude datové rozhraní s webem; kreslí se logo a vybírají barvy, aniž by byla ujasněná cílová skupina a rozsah projektu… Kdo tvrdí, že na takovém webu nikdy nepracoval, určitě to dělá dodnes.

Tato kniha se nesnaží být nějakým předpisem a normou toho, jak se v každém případě musí postupovat. Pouze se snaží sepsat do jednoho uceleného seznamu všechny hlavní aspekty a klíčové problémy, které s tvorbou webu (resp. jakékoli jiné interaktivní aplikace) souvisejí a které může být nutné při jeho návrhu zohlednit. Samozřejmě se jen málokdy stane, že pro náš projekt budou relevantní úplně všechny body tohoto seznamu a má smysl se plně věnovat každému z nich. Ale máme zde aspoň pohromadě seznam, v němž si lze odškrtávat: Zadání máme — škrt. Uživatelské scénáře máme — škrt. Marketing a monetizace tady nejsou podstatné, neřešíme — škrt. Mohly by se začít kreslit prototypy, ale chybí nám specifikace komunikační strategie a sociálních sítí — stop, dořešit! Serverové části se to ale netýká, datový model přibližně máme, může se začít navrhovat API… atd.

Vědomé a poučené vynechání nějakého bodu nebo úmyslná a plánovaná změna pořadí kroků návrhu jsou pochopitelně v pořádku a zcela namístě. Ale jen pokud jsou opravdu vědomé, poučené, úmyslné a plánované, a nikoli jen důsledkem nějakého opomenutí, ignorance či chaotického projektového řízení.

Postupy v této knize jsou jen orientační bodový scénář. V konkrétním projektu může být kterýkoli krok vyřazen jako nepodstatný, může se změnit jejich pořadí, mohou přibýt další kroky. Rozhodně ale s rozmyslem a s vědomím možných důsledků.

Pro postup vzniku nového webu či online aplikace jsou ale vždy klíčové vstupní informace. Je naprosto zásadní seznámit se co nejlépe s klientem — poznat obor jeho činnosti, trh, na kterém se pohybuje, konkurenční prostředí, možné přínosy a rizika, obchodní a marketingové modely — i potenciální cílovou skupinu, její sociodemografické složení, její zájmy, potřeby a zvyky. Což nám současně definuje druhou stranu naší rovnice a seznamuje nás to s budoucími uživateli a jejich potřebami. Bez těchto vstupních informací je každé snažení jen náhodným plácáním do vody a na pohled sebelepší výsledek může být naprostým fiaskem — nemusí plnit cíle zadavatele a nemusí řešit potřeby jeho cílové skupiny. Vznikne jen bezúčelná, možná líbivá bublina, předem určená k zániku.

Pro úspěch a funkčnost webu je naprosto zásadní poznat dobře jak našeho klienta, tak i budoucí uživatele.

Pokud bych měl celou tuto část knihy zredukovat na naprosté minimum, škrtnout vše, co je variabilní, a vypíchnout jen to skutečně esenciální, na čem návrh webu stojí a s čím padá, pak celý seznam bude vypadat asi takto:

maximálně přesné zadání: jaké jsou zájmy a cíle klienta a jaké jsou zájmy a potřeby jeho cílové skupiny

všechno ostatní (co se nehodí, škrtněte, upravte, přeházejte)

vizuální design (grafický návrh)

Jsem hluboce přesvědčen, že žádný jiný krok nemůže být první a kterýkoli jiný krok lze potenciálně vyhodit. Bez přesného zadání, jasně specifikovaných cílů a co nejlepší představě o budoucích typických uživatelích prostě nelze začít. Cokoli do té doby uděláme, je pouhým vařením z vody, tápáním ve tmě, sázením naslepo. A jak jsme si už ukázali, grafický návrh je pak až to poslední, čemu se máme věnovat. Jádrem dobrého designu webu jsou především všechny ty kroky uprostřed.

Prvotní zadání projektu

Každý projekt vždy začíná poptávkou. Nějaký zadavatel si nás vybral (ať už přímo, nebo za sebou máme vítězné výběrové řízení) a chce od nás vytvoření webu, online služby, mobilní či počítačové aplikace či jiného interaktivního rozhraní. Už jsme předeslali, že pro jednoduchost se budeme věnovat pouze příkladu zpracování projektu návrhu webu. Připomeňme si, že zde můžeme být i sami sobě klientem, zadavatelem může být naše vlastní firma, můžeme pracovat na in-house projektu. Ale i v tomto případě je dobré si aspoň pomyslně role rozdělit a pracovně rozlišovat, kdo a kdy právě jedná jakoby za zadavatele a kdo za realizátora. Mnoho věcí nám to do budoucna může usnadnit.

Máme zakázku, ocitáme se na startu nového projektu. Máme před sebou jakousi — ještě trochu neurčitou — poptávku na vytvoření webu. Úplně prvním krokem v této fázi bude stát se, aspoň pro začátek, velkým pesimistou a přepnout se do určitého negativistického a silně kritického módu. Zadání zakázky budeme považovat jen za orientační, zcela nezávaznou a ve výsledku možná i irelevantní představu klienta, co přibližně od nás očekává. V dalších krocích bude naším úkolem skutečné zadání vypátrat a sestavit podrobné parametry projektu. Každý designér časem zjistí, že postupné zpřesňování a vymezování zadání se postupně prolíná do samotného návrhu. Není zde přesná hranice: čím přesněji si definujeme a specifikujeme potřeby a požadavky na výsledný produkt, tím více z něj už máme vytvořeno. Dá se říci, že s dobře a podrobně definovaným zadáním máme design z půlky hotový. Právě proto je tato úvodní investigativní a analytická část tolik důležitá.

Přesné zadání projektu není úkolem zadavatele, ale hlavním, nejtěžším a nejdůležitějším úkolem designéra.

Musíme ale vždy vycházet z toho, že ani to nejpodrobnější zadání od zadavatele není relevantní. Budeme je zatím brát s velkou rezervou. Pouze rychle nasajeme základní informace o klientově oboru, zhruba projdeme jeho web (pokud už nějaký má) a letmo prolétneme weby těch, které intuitivně považujeme za možnou konkurenci. V tuto chvíli není moc vhodné snažit se získat příliš mnoho informací — obvykle o daném oboru prakticky nic nebudeme vědět a nějakým hádáním a tápáním ve tmě jen zbytečně ztratíme čas a prostředky na poměrně nejistém poli. Na detailnější průzkum budeme mít ještě prostor. Nyní potřebujeme pouze elementární informace. Zjistíme si opravdu jen to nejzákladnější, abychom se jednak ujistili, že budeme schopni a ochotni na zakázce pracovat (zvládneme zabezpečený informační systém pro armádu? chceme spolupracovat na službě, kterou považujeme za neetickou?), jednak abychom si udělali rámcový přehled o daném oboru — a pokud si myslíme, že by to šlo, domluvíme si s klientem úvodní schůzku.

První schůzka: oťukání

Ať už na nás klientova poptávka a úvodní zadání projektu působí jakkoli, vždy se vší úctou a pokorně předpokládejme, že náš klient vůbec není žádný neschopný truhlík. Nejspíš to je velmi schopná a úspěšná firma, která velmi dobře ví, co dělá, a dělá to profesionálně, s rozmyslem a pečlivě. Mají propracovaný byznys plán a marketingovou strategii, rozpracované klíčové ukazatele výkonnosti a umějí je dobře sledovat a měřit, mají dobře definované své cíle a záměry, mají jasnou vizi svých projektů. Jenom je to všechno obvykle nahlíženo pouze z jejich pohledu, z perspektivy jejich byznysu, kterému oni rozumějí. Chybí zde odborný vhled z perspektivy interakčního designu, což je naše parketa a naše budoucí odpovědnost. Většinou zde narazíme na onu dříve zmíněnou projektovou mezeru.

Nemůžeme předpokládat (a nemůžeme to po klientovi ani chtít), aby rozuměl našemu online byznysu, tvorbě webových stránek, internetovému marketingu, zákonitostem fungování online prezentací a služeb. Naopak, právě to on očekává od nás. Jenže jsme na samém začátku a všichni mají dost zkreslené představy — my si myslíme, že snad tak nějak tušíme, jak funguje jejich byznys s kuličkovými ložisky, on si myslí, že tak nějak tuší, jak funguje a potažmo má vypadat jeho budoucí web. Prvořadým krokem je tohle si jasně uvědomit a s tímto vědomím k zakázce a následnému jednání s klientem přistupovat.

Ať už poptávka našeho klienta vypadá velmi smysluplně a propracovaně, nebo je už na první pohled úplně mimo a je zřejmé, že klient nemá ponětí, co vlastně chce a co potřebuje, je vhodné s ní stejně nakládat pokaždé s předsudkem jako se špatným a neúplným zadáním. Ať už je zde očividná, nebo nikterak patrná dříve zmíněná projektová mezera, nic nezkazíme tím, když ji zde budeme automaticky předpokládat. A věřte tomu, že přinejmenším nějaká skulinka se vždycky objeví.

Ke každému novému zadání je užitečné apriori přistupovat pesimisticky, jako ke špatnému a nepřesnému, a podrobit jej přísnému ověřovacímu procesu.

Neboť i na pohled pečlivé a podrobné zadání může obsahovat nějaké skryté vady a nedostatky. A některé skryté chyby mohou být zcela fatální. Nezřídka se ukazuje, že mylně stanovený cíl, chybně seřazené priority nebo drobná chyba v posloupnosti kroků vedou k sérii zavlečených chyb, které ve výsledku narostly do zcela zavádějícího závěru. Za který — bez ohledu na to, kdo a jak původní zadání zpracoval — bude stejně zodpovědný designér.

Bez ohledu na to, co ve svém zadání klient poptává, musí dobrý webový designér (či přesněji dříve zmíněný „koordesignér“) pokaždé podstoupit víceméně stejný ověřovací a analytický postup a zadání když ne zcela změnit, tak alespoň ověřit jeho korektnost a doplnit chybějící a opravit nepřesné detaily. V případě drobných zakázek a zkušeného, praxí protřelého designéra to zvládne letmý pohled, krátká úvaha z hlavy a několik upřesňujících dotazů. Ale většinou je vhodné použít přesnější a podrobnější nástroje, které v tom designérovi pomáhají:

dotazník

kontrolní seznamy

vlastní rešerše

osobní pohovory s klientem

O všech těchto nástrojích budeme pojednávat dále a ukážeme si konkrétní příklady, jak takové dotazníky pro klienty i naše vlastní kontrolní seznamy mohou vypadat.

Pozn.: Výjimečně se stává, že klient na svém vlastním detailním zadání-řešení nekompromisně trvá a nehodlá o něm jakkoli diskutovat. Pak je správné jej upozornit, že podstatná část designu je jeho vlastním dílem a my za ni nemůžeme nést odpovědnost. V krajním případě můžeme takovou zakázku i odmítnout — podepsat se pod velmi špatný návrh klienta, na jehož realizaci trvá, přináší jen spoustu pozdějších problémů a k tomu i budoucí špatné reference. Mé osobní zkušenosti velí od takové zakázky raději rychle utéct a doporučuji to i vám.

Klient, který má hotové jednoznačné zadání a odmítá v něm dělat jakékoli změny, nepotřebuje naši odbornou designérskou práci. Nejspíš jen hledá studenta, který mu jím navržený web levně nakóduje. Nebraňte mu v tom a rychle vycouvejte.

U každé zakázky musíme — jako každý jiný podnikatel — posuzovat možné zisky a možná rizika. Klient, který přijde s jasnou a detailní představou o výsledku, na níž nás nenechá prakticky nic změnit, není klient pro nás. Nejlepší, co pro něj můžeme udělat, je mu na rovinu vysvětlit, že ve svém případě vlastně vůbec nepotřebuje práci fundovaného designéra (ostatně nám za ni nejspíš ani nebude ochoten platit), ale hledá pouze implementátora. Máme-li ve firmě k dispozici vlastní realizační tým, můžeme se rovnou domluvit a přesměrovat jeho zakázku přímo na něj: na grafiky, kteří jeho navržený web už jen nakreslí, a kodéry, kteří jej převedou do podoby webových stránek, případně jej odkázat na kohokoli jiného, kdo se čistou realizací webů zabývá.

Ve své praxi jsem se s takovým klientem setkal asi třikrát a po této zkušenosti bych se vší upřímností každému doporučil jej raději poslat k libovolné konkurenci. Tyto zakázky se ve výsledku pokaždé ukázaly jako extrémně rizikové a nanejvýš problematické. Tito zákazníci se (mylně) cítili být odborníky v našem oboru, včetně oblasti kódování stránek i programování skriptů a databází, a měli dokonce tendenci upravovat kodérům konstrukce v HTML a diktovat programátorům verze javascriptových knihoven, které a jak mají použít. Nemluvě o tom, že jeden z těchto tří klientů nakonec za provedené práce ani nezaplatil.

Nechci příliš zobecňovat a netroufnu si tvrdit, že to tak nutně dopadne vždy, ale z mé zkušenosti je skutečnost, že klient odmítá naslouchat odborným expertizám a trvá si na svých laických hotových řešeních, poměrně jednozačnou indicií pro to, abych na takové zakázce pokud možno vůbec nespolupracoval.

Pojďte, pane, budeme si lhát

Nicméně předpokládejme, že náš klient je vstřícný, že naši práci skutečně potřebuje a je ochoten nám věřit, že mu dokážeme navrhnout to nejlepší a nejvhodnější pro jeho byznys. Že cítíme, že tato zakázka má smysl a naše práce na ní nepřijde vniveč. Přesto už v úvodu, při prvním seznamování se zakázkou pro nás bude velice užitečné podstoupit jistý myšlenkový experiment a zahrát si sami pro sebe určitou mentální hru na lháře. V první fázi projektu budeme zkrátka předpokládat, že všechny informace, které nám klient sděluje, jsou mylné. My dosud nevíme vůbec nic a všechny podklady, které jsme dostali, nechť jsou pro nás odteď lživé a zavádějící. Zadání zakázky budeme považovat apriori za špatné a také první informativní schůzka, kterou máme před sebou, bude plná chybných a matoucích informací. Ale ony pro nás budou cenné z jiných důvodů.

Pro začátek si tedy představíme, že ten cár papíru s nadpisem „Poptávka“, který máme před sebou — ať už byl jeho zdrojem stručný e-mail či krátký telefonát, anebo naopak obdržené obsáhlé, třísetstránkové PDF s podrobnými daty, tabulkami, grafy, přehledy hospodářských výsledků za poslední pětiletku, odbornými expertizami univerzitních profesorů, soudních znalců, vyjádřením úřadu vlády a stanoviskem ředitele Hollywoodu — není nic víc než jenom bezcenný cár papíru.

Samozřejmě: přečteme si všechno, co tam je uvedeno, vědoucně se zasmějeme „cha-cha-chá“ a pak si na to v duchu nalepíme lísteček „pavědecké, na zátop“. A vyrážíme na svou první schůzku s klientem.

Za chvíli si ukážeme, co a jak se od něj následně budeme snažit zjistit. Ale první schůzka nemá mít za cíl získat konkrétní data a podklady pro zakázku — relevantní informace získáme až v dalších krocích — ale hlavně zjistit informace o klientovi samém, o jeho postojích, představách a názorech. Přesto je získáme otázkami právě na samotnou zakázku: především co, proč, jak a pro koho chce vlastně vytvořit. To nejzásadnější se skrývá za jediným prostým, ale všeříkajícím slovem:

Proč?

Jak je to slůvko krátké, nenápadné a nevinné, tím je zákeřnější. Skrývá se za ním tolik podstatného, že bychom ho měli vyvážit zlatem. Patentovat, vystavit na něj certifikát a vydávat jej pouze designérům-absolventům po splnění náročných a vysilujících cechovních zkoušek. Vytištěné na maličké kartičce ze strašně drahého ručního papíru koncentrovaným atramentem z potu a krve všech těch tisíců designérů před námi, kteří se na to prosté „proč?“ nezeptali a nepídili se po skutečných odpovědích. Není záludnější otázky než právě proč. V nezkušených rukou je to nebezpečná třaskavina, schopná tragicky zasáhnout i toho, kdo ji odpaluje.

Zeptáme-li se takto svého klienta na první schůzce, získáme obvykle fantomovou odpověď, která je často k nalezení už v samotném zadání. Odpověď, které se zkušený designér už rovnou zasmál „cha-cha-chá“ a odložil ji k ledu jako nerelevantní. Standardních fantomových odpovědí na otázku, proč vlastně po nás chce klient vyrobit požadované webové stránky, aplikaci, prezentaci, je celkem málo, ale ty nejčastější se opakují stále dokola:

všichni to mají, nesmíme zaostávat

má to konkurence, potřebujeme to taky, a lepší

abychom měli kam odkazovat v reklamách

abychom víc prodávali naše zboží

aby o nás zákazníci víc věděli

prostě chceme web

Pozor! Zde je velmi důležité si uvědomit, že například zvýšení statusu firmy, přímý konkurenční boj, online marketing, nové obchodní kanály nebo podpora značky jsou zcela relevantní a reálně možné důvody, se kterými se dá pracovat a stavět na nich. Opravdu to mohou být jedny ze skutečných cílů a záměrů klienta. Potíž tkví v tom, že velmi často to nejsou ty skutečné důvody a záměry, kvůli kterým klient náš design poptává.

Designérovým hlavním úmyslem je rozpoznat a eliminovat v požadavcích klienta falešné cíle a odhalit cíle skutečné.

Snažme se nechat hodně mluvit klienta. Nic mu nevysvětlujme, neopravujme ho, přikyvujme a pečlivě si zaznamenávejme všechny jeho představy a plány. I když si nakrásně budeme myslet, že říká očividné nesmysly a jeho představy jsou naprosto zkreslené, nechme ho mluvit. Úplně na konci ho třeba můžeme upozornit, že podle našich zkušeností možná některé věci fungují trošku jinak, ale to si všechno ujasníte v následujících krocích. Teď hlavně sledujeme klientovu vlastní prezentaci a všechno, co říká, má pro nás hodnotu velmi důležitých indicií pro další práci.

My na první schůzce ani nechceme ještě znát ty pravé cíle a skutečné potřeby klienta. Hrajeme si svou malou soukromou hru na lháře, naoko klademe otázky o projektu, ale ve skutečnosti nás zajímají právě ty falešné, fantomové odpovědi, dávající nám informace o klientu samotném. I ty jsou pro nás velice užitečné. Klienta se nesnažíme opravovat a něco mu vysvětlovat, nechme jej vypovědět vlastními slovy jeho názory a představy o projektu. Pro tuto chvíli se chceme především dozvědět, jaký k němu má klient vztah, co si pod ním vlastně představuje, jaké vnější atributy jsou pro něj důležité a nač se bude soustředit. Pokud má klient rád zelenou barvu a v zadání zelenou požaduje, připravme se na to, že ji bude ve výsledku taky hledat — jakkoli zde může být barva nepodstatná nebo třeba zrovna zelená nežádoucí. Ale je určitě dobré to vědět, počítat s tím a přinejmenším si připravit nadstandardně bytelnou obhajobu, pokud se nakonec rozhodneme pro fialovo-černé barevné zpracování.

A krom toho si také z odpovědí a představ klienta na první schůzce uděláme obrázek, nakolik jsou jeho informace relevantní a jak složitě a jakým způsobem budeme následně získávat ty skutečné podklady. Ale to až později. Nyní necháváme nejvíce prostoru klíčové otázce „proč“ a pak přejdeme k dalším doplňujícím otázkám.

Fantomové otázky

Kromě úvodního „proč“ jsou důležitou pomůckou i odpovědi na další pomocné otázky. U nich se ještě více ukáže, do jaké míry je náš klient informovaný a jeho vstupy jsou relevantní, nebo zda — jako to bývá častěji — neví a tápe a pouze střílí od boku.

Pro koho web děláte?

Co očekáváte od výsledku?

Máte už představu, jak se to má udělat?

Nejběžnější chybnou odpovědí na otázku Pro koho? bývá Pro všechny přece! My jako zkušení praktici dobře víme, že nic takového jako cílová skupina „všichni“ reálně neexistuje a zmínka o ní je pro nás spolehlivým ukazatelem nedostatečné informovanosti klienta a nutnosti podrobnějšího zjišťování základních informací.

Také otázka na očekávání klienta a jeho představu o výsledku je poměrně záludná. Dlouholeté zkušenosti ukazují, že typickou odpovědí často bude něco týkající se výsledné podoby aplikace: Bude to hezké. Bude to cool. Moderní. Responzivní (á, pozor, zvídavý a snad informovaný klient!). Netradiční. Zelené. Jednoduché. Mohutné. Ohromující. Barevné. Bude to vydělávat (hle, někdo aspoň tuší, o čem je řeč). Budeme mít kvalitní web. Budeme mít konečně web. Neočekáváme nic. Nevíme…

Další zákeřnou otázkou, kterou by designér měl svému klientovi na první schůzce položit, je Jak? Jak má budoucí web vypadat, co přesně na něm má být, jak má fungovat? Nejsprávnější odpověď by pochopitelně měla být: Nevím, to je přece vaše práce. Bohužel je až s podivem, jak málo se s ní v praxi setkáme. Daleko častější jsou velmi konkrétní požadavky na implementaci, někdy absurdní, občas smysluplné, většinou ale v tuto chvíli zcela irelevantní — má to být v XHTML verze X.Y, použije se framework BFLM 1.23, navigace bude dvouúrovňová, úvodní animace bude ve Flashi. Aniž by předem někdo jen tušil, mezi čím se vlastně bude navigovat a jestli nějaká úvodní animace vůbec bude dávat smysl.

Čím méně znalý klient, tím častěji se snaží popsat řešení místo toho, aby popsal svůj problém.

Věřme své profesionalitě a svým odborným kvalitám. Mysleme na to, že náš klient rozumí skvěle problematice svých kuličkových ložisek, ale ohledně designu nemá ani zdaleka naše znalosti a zkušenosti. Pořád jsme na úvodní schůzce a ještě chvíli musíme hrát svou hru na lháře a dál podceňovat jeho schopnost poskytovat nám relevantní informace. Pochopitelně jen v duchu! Toto je pouhá mentální pracovní metoda, která nesmí mít žádný vliv na náš respekt ke klientovi a běžná pravidla obchodních vztahů. Je to pouhý myšlenkový experiment, který nám pomáhá rozptýlit mlhu, kterou nad zadáním své zakázky klient nevědomky rozprostřel, rozkrýt její podstatu a dostat se k jejímu jádru.

Jen velmi výjimečně nám klient rovnou řekne něco takového, že potřebuje produktový web cílený na lépe situované mladé rodiny 25–35 let z větších měst s kladným vztahem k ekologii a že od něj očekává výrazné zlepšení povědomí o své značce v cílové skupině a zvýšení prodejů ve svých kamenných prodejnách o 20 % během příštího roku, přičemž primárním konkurentem je značka A a právě probíhající kampaň B. Před takovým klientem srazte podpatky, utlumte nedůvěřivý mód (pro jistotu nevypínat úplně!) a přelaďte se do režimu extratřídy, protože jednáte s profesionály, kteří dost možná opravdu vědí, co chtějí. Ovšem jisté to není, pořád mohou jenom klamat tělem! Není vyloučeno, že jsme třeba už několikátým zkoušeným dodavatelem v pořadí a zde nám pouze recitují naučené poučky z katalogové nabídky našeho (méně schopného) konkurenta.

Podstatné je, že naše hraní si na lháře nám na první schůzce dalo velmi důležitá vodítka a informace o tom, co klient zdánlivě považuje za podstatné a nakolik se v oboru orientuje. Hlavním cílem těchto informací nebylo ještě zjistit, jaký web a jak máme vytvořit, ale pouze si ujasnit, na co a jakým způsobem se musíme ptát dál, abychom se dozvěděli ty skutečně podstatné informace, které budou tvořit zadání našeho projektu. Všechno důležité se dozvíme až v dalších krocích.

I. R. A.

Nyní máme v rukou první indicie, ze kterých se můžeme odpíchnout k co nejpřesnějšímu definování zadání nového projektu. Máme v rukou poptávku klienta, kterou jsme si pracovně označili za zavádějící a krajně nepřesnou. A máme fantomové odpovědi na naši úvodní sadu otázek — především proč, pro koho a jak se má nový web podle nich dělat a co od něj v tuto chvíli očekávají — které stejně tak zatím pomyslně držíme ve škatulce „nedůvěryhodné“. Rozhodně není vyloučeno, že tyto informace se za chvíli ukáží jako relevantní a věrohodné a do našeho zadání je nakonec zařadíme. Ale s určitou pravděpodobností se možná ukáží jako zcela liché a zavádějící a v zadání se vůbec neobjeví. Pro tuto chvíli to stále nevíme, nedokážeme — nebo spíš si netroufáme a vědomě nechceme — jejich platnost posoudit. Nyní je použijeme pouze jako výchozí body k našemu dalšímu postupu: vyšetřování, průzkumu a analýze.

Zcela zásadní částí designu je právě „IRA“: Investigation (vyšetřování), Research (průzkum), Analysis (analýza).

Vždy bychom, přinejmenším formálně, měli podniknout všechny tyto tři kroky. A pokud možno paralelně, souběžně, neboť jejich výstupy se neustále navzájem ovlivňují. Vyšetřování znamená především získávání dalších, teď už co možná maximálně relevantních informací přímo od klienta. Na základě informací, které už máme, které už můžeme považovat za věrohodné, které jsme si nějak ověřili, budeme klást další rozšiřující a zpřesňující otázky.

Současně s tím musíme vést i svůj soukromý průzkum a výzkum — podívat se na cílový trh, prohlédnout si konkurenci, snažit se získat alespoň jakousi orientaci v klientově oboru. U velkých a složitých zakázek se to neobejde bez odborné spolupráce: můžeme si vyžádat odbornou expertizu, zadat účelové analýzy, najmout ke spolupráci znalce. A vždy nejisté a sporné otázky konzultujeme s klientem. Zde opravdu není namístě hrát si na borce a brouka Pytlíka, co všechno ví, všude byl, a u konkurence dvakrát.

A konečně je zde analýza — přesněji řečeno analyticko-syntetická část — kde všechny získané vědomosti zpracováváme, těžíme z nich podstatné informace a ty následně spojujeme a vyvozujeme z nich závěry. Zatímco všechno ostatní předtím i potom může udělat prakticky kdokoli a kteroukoli součást zde zmíněného postupu tvorby webu lze někde poměrně snadno outsourcovat, tvoří právě analýza samotné jádro designérské práce. Právě zde vznikají všechny podstatné a klíčové nápady.Při kladení otázek se designér skoro mimoděk dozví, že klient v rámci svého e-shopu během několika let vybudoval poměrně unikátní znalostní databázi a loajální uživatelskou komunitu. Při výzkumu trhu a situace v daném oboru se dozví, že trh je poměrně saturovaný, konkurenční výhody pouze nepatrné a největší zájem v cílové skupině je především o prověřené výrobky, osobní zkušenosti a doporučení. Analýza je to místo, kde se obě informace spojí, a designér klientovi třeba navrhne postavit znalostní bázi a komunitní komunikaci do popředí a původní klasický online obchod přetvořit do kombinace encyklopedie a sociální sítě, kde bude e-shop zdánlivě jen v pozadí, zatímco fasádu podnikání bude tvořit unikátní a vyhledávaný znalostní oborový web — který jen tak „mimochodem“ nabízí zmiňované produkty ke koupi. Jednoduše a bez hledání.

Design = IRA + invence

V následných postupných krocích se dál vyšetřuje, zkoumá a analyzuje a syntetizují se další součásti a detaily projektu. To, do čeho závěry analýzy nakonec vykrystalizují, je pak už samotný osobní vklad designéra, přínos jeho ducha a invence. Bylo by ale chybné chápat práci designéra jako samotné generování nápadů. I gejzír geniálních nápadů vložený do špatného základu je k ničemu, obvykle se ukazuje jen pouhou samoúčelnou uměleckou samohanou. Naopak nápad i jen průměrný, třeba i zcela zřejmý a očividný, který vyplynul z relevantních informací, dobře provedeného průzkumu a rozumné analýzy, bývá často cennější a pro všechny přínosnější. V oné výše uvedené rovnici je tedy vlastní invence designérova sice důležitou a někdy i rozhodující složkou, ale jen málokdy složkou nejdůležitější. IRA je základem a podstavou pro designérovo dílo. I malé, nenápadné dílko na bytelném základě a solidním betonovém podstavci bude nakonec životaschopnější a trvalejší než povlávající libokrásná kreace, okouzlující mandala, kterou odfoukne první vánek.

Design interaktivních aplikací není a nemá být součástí výtvarného umění. Je to méně než užité umění. Více než cokoli je to „jen“ funkční průmyslový design. Jen zcela výjimečně, v jednom z milionu pokusů se protnou všechny vektory ve správném místě a vznikne dílo hodné kategorie „umění“. Nesnažme se o to ale nikdy primárně. Dobrý designér by měl být především funkcionalistou a stále mít na paměti primární účel své práce, který jsme zde zmínili už mnohokrát: spojovat cíle zadavatele a potřeby uživatele do funkčního celku.

Definování projektu

Shromáždili jsme si tedy vstupní informace od klienta a čeká nás ta hlavní investigativně-výzkumná a analyticko-syntetická část naší práce. Máme za úkol vytvořit skutečné zadání, podrobnou specifikaci projektu. Definovat všechno, co je třeba navrhnout, s jakými parametry a v jakých mantinelech.

Je zde podstatné si uvědomit jeden základní předpoklad: tvorba zadání není jediný uzavřený krok. Plynule přechází a prolíná do samotného návrhu — některé specifikace v zadání jsou samy o sobě už i řešením, naopak některé podstatné otázky se mohou objevit až v poměrně pozdních fázích procesu návrhu a tvorby webu.

Proces navrhování během projektu nikdy nekončí.

Jenom na začátku je navrhování nejvíc a s probíhající implementací ho výrazně ubývá. Smiřme se ale s tím, že nikdy nebudeme mít úplně všechny informace, že nebudeme moci udělat tlustou čáru a říci, že teď se vstupy uzavírají, nyní web do detailu navrhneme a už na něm nikdy nikdo nic nesmí změnit. To se nestává, takhle webdesign obvykle nefunguje.

Je ale čistě na našem rozhodnutí během navrhování udělat implementační řez — tj. prohlásit, že už máme dostatek informací a závěrů, kdy lze naši specifikaci prezentovat v nějaké ucelené formě a případně začít se samotnou tvorbou webu. Musíme ale počítat s tím, že nějaké otázky se budou neustále vynořovat vždy a náš IRA návrhářský proces bude průběžně pokračovat a neustále budeme zadání projektu a jeho detailů upravovat a zpřesňovat. Mělo by ale být naším cílem, aby tyto další úpravy, doplňky a změny byly vždy už jen minoritní a nijak podstatně neovlivňovaly celkovou koncepci a hlavní parametry našeho návrhu.

Pozdní zásadní změny v zadání projektu jsou obvykle jen chybou designéra.

Pokud se někdy v pozdní fázi návrhu, či dokonce implementace objeví neujasněný parametr, který pak vyústí do poměrně zásadní změny zadání projektu, jedná se obvykle o selhání designéra. Tedy selhání naše. Pochopitelně nemluvíme o případech, kdy klient náhle sám přijde s nějakým novým požadavkem, který je v podstatném rozporu s dosud ukotvenými parametry projektu. To se sice stává, ale i zde je úkolem designéra tomu pokud možno preventivně bránit. Naše designérská zkušenost postupem času objeví místa, kde se takové změny často stávají, a předem si je s klientem ujasníme — celkovou koncepci si od klienta postupně necháváme schvalovat, odsouhlasíme si s ním, že budou dvě tři varianty grafického designu, připravíme se na několik alternativních barevných schémat, vyhradíme si do smlouvy, že změna X poté, co bylo vytvořeno Y, bude účtována jako vícepráce apod.

Zatím ale stále nemáme prakticky nic, naším prvním krokem by mělo být zahájit vyšetřování a důkladný výslech našeho klienta.

Vyšetřování

Zatímco na úvodní schůzce s klientem jsme od něj chtěli slyšet především fantomové odpovědi na naše úmyslně záludné otázky, abychom poznali jeho postoje a znalosti, od této chvíle už nás naopak budou zajímat jen skutečně relevantní a podstatné informace.

Možností, jak nyní postupovat, je mnoho. Každopádně bychom měli s informacemi z naší první schůzky s klientem nejprve absolvovat svůj základní výzkum a průzkum. Jistě, nějaký letmý přehled jsme si už udělali před první schůzkou, abychom na ni nešli úplně nepoučeni, ale teprve teď máme určený jakýsi azimut, máme už konkrétnější představu, kam a jak se dívat, co sledovat a čeho si nevšímat. Nyní se musíme aspoň obecně seznámit s klientovým oborem, projít si důkladně jeho stávající web (pokud nějaký má), prohlédnout weby konkurence, v případě exotičtějších oborů si o dané problematice něco základního přečíst. Není ale třeba zacházet příliš do hloubky, jde nám jen o letmé seznámení, podchycení obecných informací a nasátí atmosféry. Ještě ani moc nevíme, co přesně nás má zajímat. Potřebujeme jen vědět, že kuličkových ložisek, kterými obchoduje náš klient, jsou neuvěřitelné spousty druhů, že obchodování je především typu B2B (mezifiremní velkoobchod) a úvahy v kategoriích maloobchodního e-shopu jsou zcela mimo realitu, že na trhu je podobných firem nepřehledné množství (ale každá nabízí trochu jiný segment a jedná se o něco, co asi budeme chtít od klienta trochu lépe osvětlit), že obchod s ložisky pro jízdní kola v tisícových objemech je úplně jiný vesmír než obchod s tunovými ložisky pro válcovny v objemech jednotkových atd. Nejde o více než řekněme hodinový průzkum na webu. Nořit se příliš do hloubky a studovat obor více než nanejvýš pár hodin by bylo spíš zbytečné.

Prvotní průzkum musí jít po povrchu a poskytnout nám spíše širší přehled než hluboké znalosti.

Nasajeme úvodní informace a lehce poučeni můžeme zahájit své první vyšetřování. Neřkuli výslech. Není podstatné, zda si domluvíme s klientem druhou schůzku, nebo mu zašleme k vyplnění dotazník e-mailem, nebo mu jen zavoláme a doladíme pár chybějících informací.

Občas se dokonce stane, že k tomuto zlomu — tedy k přechodu mezi nedůvěryhodným sběrem fantomových odpovědí a získáváním skutečně relevantních informací — dojde hned na první schůzce. Základním přepokladem pro to je hlavně přeskočení výše zmíněného průzkumného mezikroku. V případě, že zrovna shodou okolností narazíme u klienta na obor, v němž se už slušně orientujeme, můžeme úvodní průzkum s klidem vynechat a rovnou během první schůzky — se znalostí oboru a určitou jistotou v kramflecích — plynule přejít k získávání skutečných informací a relevantních podkladů. Nicméně v ostatních případech (jichž je naprostá většina) se nám toto přerušení bude náramně hodit. Dá nám prostor pro náš průzkumný mezikrok a vlastně bez něj nemůžeme se vší profesionální zodpovědností pokračovat.

Tak jako tak teď máme jak úvodní informace od klienta o jeho záměrech a (možná zavádějících) představách, tak také aspoň hrubý obraz o oboru a trhu, na němž se pohybuje. V tuto chvíli je ta správná příležitost začít z klienta tahat všechno podstatné, co ví a co pro svou práci skutečně potřebujeme. Ideálním nástrojem je k tomu nějaký připravený dotazník s nejdůležitějšími body, na které potřebujeme znát odpovědi.

Dotazníky

Neexistuje žádný univerzální dotazník webdesignéra, platný vždy a všude pro každý typ zakázky. Každý projekt je něčím výjimečný, každý obor má svá specifika, která musíme zohlednit. Otázka klíčová pro specifikaci jednoho webu nemusí u jiného projektu vůbec dávat smysl. Ale aspoň nějaké obecné jádro, jakéhosi společného jmenovatele většiny komerčních webů, jsem se pokusil sestavit a uvádím v následujícím vzorovém dotazníku.

V tomto soupisu se snažím shrnout všechny podstatné informace, které bychom o novém webovém projektu měli vědět. Pokud už předem víme, že některý z bodů v daném případě nedává smysl, s klidem ho vynechejme; pokud naopak nějakou zásadní informaci postrádáme, ihned ji do dotazníku doplňme. Takto připravený dotazník můžeme použít jako vlastní podklad pro druhou schůzku s klientem, případně jej po předchozí dohodě (a vysvětlení pravidel) můžeme i klientovi poslat k vyplnění. Veledůležité jsou v každém případě dvě věci, na kterých si musíme opravdu dát záležet:

Potřebujeme naprosto upřímné a pravdivé informace. Náležitě vysvětlíme klientovi jejich důležitost a fakt, že každé přehánění, mlžení, vychloubání nebo zastírání nepříjemných faktů se mu ve výsledku může velmi nevyplatit. Pokud jsme to už neudělali dříve, je zde namístě i z vlastní iniciativy nabídnout klientovi dohodu o mlčenlivosti (tzv. NDA, Non-Disclosure Agreement), protože jsme si vědomi toho, že mnoho z informací, které po něm chceme, může považovat za citlivé a v konkurenčním prostředí pro něj potenciálně nebezpečné. Klient si musí být plně vědom, že každou informaci, kterou nám nyní poskytne, budeme považovat za výchozí fakt a budeme jí přizpůsobovat svůj návrh a bude ji reflektovat výsledné řešení, které od nás dostane.

Klientovi musíme s hledáním odpovědí pomáhat, radit a vysvětlovat — ale rozhodně se musíme vyvarovat toho, abychom mu je napovídali, nesmíme odpovědi nijak předjímat a podsouvat. I když si třeba myslíme, že např. jako claim pro jeho web se vyloženě nabízí skvělý slogan, který nás napadl už včera, je pro nás klientovo „nevím“ nebo „ještě nemáme nic definitivního“ v tuto chvíli velmi cennou informací. Není třeba se bát ani se snažit něco uspěchat, svůj návrh mu budeme mít možnost představit a nabídnout později — vhodněji a efektivněji.

Co ale můžeme a je naopak velmi vhodné, je nabídnout odpověď tam, kde klientův postoj už věrohodně známe, máme potvrzený, kde je informace (aspoň podle nás) zřejmá a bylo by i zbytečné, aby ji klient rozváděl znova. Klientům každý takový (byť jen částečný) náznak odpovědi velmi pomůže, dává mu na vědomí, že si s ním rozumíme, že chápeme jeho zadání a také že tam, kde po něm chceme odpověď, to má skutečně smysl a neopakuje zbytečně něco, co si myslí, že už nám několikrát sdělil. V takovém případě příslušnou otázku hned můžeme doplnit předpokládanou odpovědí, kterou si ale vždy necháme potvrdit. Tedy např. pro otázku na už zmíněný claim:

Špatně. Myslíme si, že vhodný nový claim pro vaši službu by mohl být „Prostě válíme“. Nový slogan můžeme nabídnout později, teď potřebujeme znát klientovu představu a jeho postoj k případným změnám.

Správně. Nyní používáte slogan „Kuličková ložiska do celého světa“. Je to tak? Je nezbytné jej zachovat, nebo je možné uvažovat i o jeho změně? Ponechejme prostor a otevřené dveře klientovi i sobě. Třeba se dozvíme, že klient je se sloganem vlastně nespokojený a naše nabídka změny jej vlastně potěší, i když s ní původně ani nepočítal.

Osobně používám tento postup i tehdy, když posílám klientovi dotazník k vyplnění třeba mailem. Předpokládané a podle mě známé odpovědi k otázce uvedu a vždy doplním otázku vybízející k potvrzení či opravě mého předpokladu. Je to tak správně? Ano? Souhlasí?

Vlastní návrhy a nápady se snažím sem vůbec nepsat. Mnohý zkušenější designér mi tady potvrdí, že to vyžaduje trochu přemáhání a polknutí kusu profesionální hrdosti, ale určitě se to vyplatí. A má to i obchodní rozměr: často se v této chvíli pohybujeme pouze v úvodní fázi projektu, který pro nás může skončit pouze skicovným, menší platbou jen za úvodní analýzu — a není v našem zájmu klientovi dávat své nápady předčasně a v podstatě zdarma. Jakkoli to může být pro kreativního člověka sršícího nápady těžké, neukazujme a nesdělujme je nikdy klientovi předčasně. Pár nápadů už máme možná připravených a v tomto bodě už máme třeba i nějakou představu celkem dobrého řešení, měli bychom se v této fázi na tomto místě zabrzdit a své ješitné ego, které si právě trhá košili a s odhalenou hrudí se hlásí o slovo, vší silou své profesní zodpovědnosti nakopnout do zadnice a zalepit mu pusu lepicí páskou.

Každý nápad si schovejme k vhodné prezentaci až na tu správnou chvíli.

Zcela upřímně: někdy je to opravdu boj. Kdybych měl spočítat všechny své nápady, které jsem jen tak plácnul na úvodní schůzce k projektu, ze kterého potom sešlo, a pak je viděl použité coby vlastní řešení klienta, nebo dokonce použité v návrhu konkurence, byla by možná v mých začátečnických designérských dobách desetinná čárka na mém bankovním účtu veselejší o pár míst doprava… Inu, i chybami se člověk učí.

Všechny nápady si pečlivě poznamenávejme, skicujme a schovávejme pro svou budoucí skvělou prezentaci. Pro tuto chvíli nás zajímají informace, názory a postoje našeho klienta. Vezměme si svůj připravený dotazník, doplňme do něj pouze odpovědi, které podle nás plynou ze známých faktů, a nikoli z našich nových nápadů, a začněme s křížovým výslechem.

Vzorový dotazník

Jak jsme předeslali, žádný univerzální dotazník neexistuje. Následující body jsou pouze v praxi ověřeným seznamem nejčastějších a nejdůležitějších bodů, které pro návrh většiny webů potřebujeme znát. Pro větší přehlednost je vhodné otázky rozdělit do několika samostatných logických celků. Uvedené otázky i s jejich popisy uvádím ve finální podobě tak, jak je obvykle prezentuji klientům. Texty psané kurzivou jsou ale poznámky určené pouze pro vás, které do dotazníku pro klienta už nepatří.

Základní informace

Typ webu. Jedná se o prezentaci (firmy/produktů), nebo online službu? Jedná se o nový web, či přepracování již existujícího? Typická otázka, kde odpověď nejspíš už známe ze zadání. Proto ji zde rovnou naznačíme, ale stejně si vyžádáme klientovo potvrzení. Např.: Podle zadání předpokládáme, že požadavkem je redesign stávajícího webu, jehož hlavním účelem má být prezentace firmy Globuli, seznámení s výrobním programem, katalog produktů a poskytnutí kontaktů pro širokou veřejnost. Doplňkovou součástí má být služba vyhledávání parametrů kuličkových ložisek na základě zadání výrobce a čísla výrobní série, která má být dostupná pouze pro registrované B2B partnery. Je to tak správně?

E-commerce. Bude součástí webu prodej zboží či služeb? Pokud ano, budou následovat dodatečné otázky na objem obchodu, platební kanály, distribuční cesty atd. — viz další kapitoly.

Název. Jméno vaší prezentace či služby. Pokud ještě název není pevně dán, uveďte, jak by se v ideálním případě měla jmenovat (bez ohledu na to, zda je jméno skutečně použitelné, zda už existuje jinde apod.).

Claim. Jednovětný slogan popisující vizi, smysl, cíl vaší firmy či služby.

Popis. Několika větami definujte svou firmu / produkty / budoucí službu. Nehodící se škrtněme.

Klíčová slova. Kdybyste měli svůj byznys najít ve vyhledávači a neznali jeho název, jaká slova/frázi byste použili? Seřaďte použitá slova podle důležitosti. Jeden ze základních vstupů pro budoucí SEO a online marketing.

Účel a cíle webu

Aktuální stav. Jak nyní využíváte internet a sociální sítě, co na tom chcete změnit? Proč chcete nový web / redesign stávajícího webu? Nehodící se škrtněme.

Cíl. Co má být primárním cílem webu? Čeho jeho provozováním chcete dosáhnout? Na tuto odpověď se dobře soustřeďme, ne každý klient má vůbec představu, proč vůbec web dělá a co od něj čeká. Snažme se z něj nějakou odpověď dostat za každou cenu.

Cílová skupina. Je web určen koncovým uživatelům, nebo B2B? Pokud jde o běžné uživatele, popište co nejlépe tři typické/ideální návštěvníky vašeho webu — jejich profese, zájmy, příjmová skupina, věk, pohlaví, limity a omezení; znáte-li, i typické technické vybavení, jako kvalita připojení, typ zařízení a prohlížeč atd. V případě B2B popište typického partnera na druhé straně spojení.

Účel. Jaký problém může váš web pomoci jeho návštěvníkům vyřešit? Proč na něj budou chtít přijít?

Nadstavba. Jaké jsou další, sekundární cíle webu?

Ideální scénář. Co má návštěvník na webu udělat od příchodu do opuštění webu v optimálním případě? Jaký je podle vás ideální postup? Pozor! Toto je poměrně kritické místo, kde hodně zadavatelů uvádí velmi zkreslené a idealizované představy o chování návštěvníků. Tuto odpověď musíme brát s velkou rezervou a téměř vždy ji budeme korigovat a klientovi vysvětlovat, že návštěvníci webů se typicky chovají úplně jinak, než on si představuje. Ale i zkreslená klientova představa pro nás bude velmi cenný vstupní údaj.

Trh a marketing

Stávající obchodní model. Jak nyní získáváte pro své podnikání zákazníky, jaké používáte obchodní kanály? Jaký je váš marketingový model, jak používáte reklamu?

Konkurence. Jaké jsou vaše hlavní konkurenční firmy a jaká je jejich hlavní marketingová strategie? Existují online projekty, které považujete za přímou konkurenci svého budoucího webu? Udělali jste si představu, co z nich byste chtěli mít na svém webu také, a co naopak rozhodně ne?

Konkurenční výhoda. Máte jasno, v čem se lišíte od svých konkurentů, co je vaše specialita? Proč budou chtít návštěvníci dávat přednost vám před konkurencí?

Nika. Vidíte ve svém oboru nějakou tržní niku, část trhu, které se nikdo pořádně nevěnuje a váš web by jí mohl využít? Zde je obvykle velký prostor pro nás a může se velmi vyplatit náš vlastní výzkum, na jehož základě můžeme klientovi nabídnout tržní niky online byznysu, o kterých možná neměl ze své perspektivy ani tušení.

Monetizace. Má váš nový web generovat zisk? Pokud ano, jak? Důležité místo k ujasnění si požadavku, zda mají být na webu vůbec nějaké reklamní plochy, případně ke změně priorit celé koncepce webu.

Strategie. Máte představu, jak se na web návštěvníci dostanou kromě příchodu z vyhledávačů?

Opakovatelnost. Proč se budou chtít návštěvníci na váš web vracet? Máte představu, jak je k tomu pobízet?

Očekávání. Co se pro vás změní, až bude nový web v provozu? Za jak dlouho po dokončení vám podle vás web začne přinášet nějaký podstatný efekt?

Koncepce webu

Vizuální styl. Máte pro web připravené logo, je definovaný grafický styl či rovnou korporátní identita? Jsou dána nějaká vizuální pravidla a mají/smějí se případně měnit?

Negativní vymezení. Máte nějaké neoblíbené barvy, vizuální styly, způsoby prezentace? Vídáte na internetu nějaké často používané prvky, kterým se rozhodně chcete vyhnout?

Vaše inspirace. Sepište seznam pěti webů, které se vám líbí, a uveďte, co na nich považujete za atraktivní a inspirativní.

Tabu. Je něco, co rozhodně na webu nechcete publikovat? Tedy něco, co jinde vídáte jako běžné součásti webu, ale ve svém případě o to rozhodně nestojíte — např. informace z dění uvnitř firmy, fotografie zaměstnanců, reference třetích stran, kontakty na zaměstnance/management atp.

Celkový styl. Má web působit spíše konzervativně, nebo moderně, netradičně, konceptuálně, či dokonce provokativně nebo kontroverzně? Jaké je vaše vnímání zákazníků a váš vztah k nim — profesionálně seriózní, přátelský či rodinný, úslužný a ochotný, rovnocenně partnerský atd. Chcete se prezentovat s profesionálním odstupem, nebo naopak navazovat důvěrnější vztah? Toto je poměrně zásadní informace, která v případě ne zcela jasného zadání vyžaduje další konzultaci a upřesnění. Málokterý klient v tom má předem jasno, ale my v tom jasno mít musíme.

Technické otázky

Stávající web. Existuje? Pokud ano, do jaké míry je nutné zachovat jeho strukturu? Jeho styl? Vzhled? Obsah? Další typický příklad otázky, kdy odpověď možná známe, naznačíme ji a pouze si vyžádáme klientovo potvrzení.

Technické prostředky. Existuje doména, hosting? Bude se měnit (či naopak nesmí se měnit) platforma a jiné součásti stávajícího technického řešení? Pokud jsou změny možné, do jaké míry? Lze uvažovat pouze o drobných úpravách, nebo je v případě skutečně dobrého účelu možné zvažovat i zásadnější změny?

Rozpočet. Jaký máte řádově celkový rozpočet na vytvoření nového webu?

Deadline. Kdy nejpozději musí být web dokončen, případně jeho jednotlivé fáze?

Rozhodování. Kdo se bude na vaší straně o projekt starat a kdo bude dělat zásadní rozhodnutí? Jak dlouho taková rozhodnutí budou řádově trvat — hodiny, či týdny? Velmi důležitý bod pro nás, zde se jednoznačně určuje náš partner pro další proces vývoje a termíny, které máme na druhé straně očekávat. A stejně tak je to velmi důležité pro našeho klienta, aby si uvědomil samu existenci takového požadavku. Není výjimkou, kdy právě tento dotaz způsobí to, že klient takového člověka pro nás vyhradí a bez něj by všechna klíčová rozhodování během procesu návrhu webu stagnovala a zadrhávala se.

Obsah. Kde se vezme obsah webu, kdo ho zajistí? Do jaké míry lze převzít stávající obsah, pokud existuje? Pozor: mnoho našich klientů bude automaticky považovat obsah za součást naší dodávky, vůbec o něm nepřemýšlí a teprve tato otázka je přiměje se nad způsobem tvorby obsahu alespoň zamyslet.

Jazykové verze. Jaký bude primární jazyk webu? Bude nabízet více jazykových verzí? Má být pro všechny jazyky totožný obsah, nebo se má lišit?

Foto. Pokud budou pro web potřeba prezentační/produktové fotografie, máte k dispozici digitální fotky v profesionální kvalitě? Chybějící fotografie se nafotí, nebo se koupí ilustrační fotky z fotobanky? Opět časté kritické místo, nad kterým někteří klienti vůbec neuvažují. Obrazová složka webu jim připadá jako jaksi „automatická“, aniž by přemýšleli o tom, že z jejich stávajících nekvalitních fotek se krásný e-shop postavit nedá nebo že ani ilustrační fotky nejsou zadarmo (což si pohříchu mnozí stále myslí). Obdobně pro videa či jiná multimédia, pokud pro daný web dávají smysl.

Aktualizace. Máte představu, jak často a v jakém objemu se bude obsah webu měnit? Kdo a jak to bude zajišťovat, je na to vyhrazený dostatek prostředků a času?

Správa. Kdo bude web spravovat a kolik na to bude mít k dispozici času? To přece budete dělat vy, ne? Máme to ve smlouvě? Aha…

Limity. Víte o nějakých omezeních, předpisech a normách, které váš web bude muset dodržovat? Např. s ohledem na platné zákony a vyhlášky, pravidla přístupnosti, technické limity, firemní politiku atd.

Ostatní…

Na závěr je důležité dát prostor klientovi zmínit a upřesnit cokoli dalšího, co považuje za podstatné a v našem rozhovoru (či dotazníku) se na to nedostalo. Pokud posílám dotazník klientovi k vyplnění, vždy na závěr přidávám položku „Jiné“ či „Další“ apod. s dostatečným prostorem pro jeho vyjádření. Nikoli výjimečně zde můžeme narazit na body, které nás při úvodní analýze třeba ani nenapadly a pro našeho klienta budou skutečně důležité. Stejně přínosná může být následná diskuse při osobním jednání.

Tak nebo tak bychom v této chvíli měli mít od klienta pohromadě všechny základní informace, které potřebujeme jako vstupy pro svou další práci. Tou nyní bude další průzkum, výzkum a analýzy a na základě jejich výsledků již samotné sestavování specifikace projektu.

Specifikace: průzkum, analýza a syntéza

Nyní již získáváme podstatné a pro náš projekt maximálně relevantní informace. Důležité je si zde uvědomit, že velmi často právě v této chvíli u mnoha projektů může méně zkušený designér začít zažívat intenzivní pocit, že se ocitl na tenkém ledě, že vůbec nic nechápe, že se boří do bažiny složitých termínů a zákoutí jemu neznámého oboru. Odkrývá se před námi obrovský prostor specializace, o které nejspíš nemáme ani potuchy, můžeme se cítit zahlceni nám neznámými pojmy, normami a procesy, v nichž je expertem náš klient — a my na ně ale budeme zírat nechápavě, a čím více si budeme o daném oboru číst, tím více budeme mít pocit, že už nerozumíme ani slovo a celá problematika klientova oboru se nám rozplývá pod prsty a stává se neuchopitelnější tím víc, čím víc se ji snažíme pochopit a proniknout do jejích hlubin.

To je samozřejmě velká chyba. My jako designéři se nemůžeme stát experty v oboru každého svého klienta. Nemůžeme se během týdne, ba ani během několika týdnů stát odborníkem v plastické chirurgii, aplikované geochemii, profesionálním sociologem či hluboce porozumět problematice obchodu masem nebo našimi obligátními kuličkovými ložisky. Časem ale zjistíme, že to ani nepotřebujeme. Není vůbec zapotřebí znát detaily a každé temné zákoutí klientova byznysu. My musíme pouze pochopit základní zákonitosti a principy fungování a přiřadit je nějakým obecným vzorům. Výloha firmy pro širokou či odbornou veřejnost, e-shop pro koncové zákazníky, web veřejné instituce, B2B obchodní nástroj, mediální servis, umělecká prezentace atd. Množství základních kategorií je poměrně omezené a zkušený designér ji dokáže celkem rychle identifikovat a daný projekt přiřadit příslušným ověřeným návrhovým vzorům.

Když se přistihneme, že začínáme pronikat do klientova oboru příliš hluboko a přestáváme jej chápat, děláme něco špatně. Důležité je vnímat jej obecně, z odstupu a nacházet vhodné paralely.

Náležitý nadhled a odstup, pochopení, které informace jsou pro vytvoření funkčního webu podstatné a které může ignorovat, jsou klíčovou dovedností profesionálního designéra. V okamžiku, kdy při studiu klientova oboru a trhu zabředneme příliš hluboko a začneme tápat v terminologii, pracovních postupech a obchodních vztazích, je nejvyší čas to vzdát a posunout se dál. Naším cílem je přehled a znalosti široké, nikoli příliš hluboké. A pokud občas budeme mít pocit, že daná podoblast či konkrétní problém, kde se nedokážeme orientovat, může být pro naši práci nějak podstatná a může ovlivňovat její výsledek, vyžádejme si odbornou expertizu a nechejme si příslušnou otázku polopaticky vysvětlit odborníkem — ať už někým z klientovy firmy, nebo najatým expertem. Zkušenosti ale ukazují, že takových situací je ve skutečnosti poměrně málo a většinou se bez nich obejdeme. Designérův náležitý odstup a nadhled často dokáží zcela smýt rozdíly mezi problematikou prodeje kontaktních čoček a rohlíků, mezi prezentací chovu slepic a strojního zámečnictví, mezi specifiky obchodu vlněnou přízí nebo ocelovými ložisky. Toho, co mají zástupci podobné kategorie společné, je typicky mnohem více než rozdílů, které mezi nimi dokážeme najít.

Pro to, abychom navrhli dobře fungující web s přehlednou navigací, co nejlépe podporující zamýšlené uživatelské scénáře a optimálně plnící klientovy obchodní cíle, obvykle nepotřebujeme podrobně znát technické detaily cílového oboru. Skutečnost, že specifikace produktu A musíme pro koncové uživatele prezentovat podstatně jinak než pro B2B partnery, že formulář PT1660 musí třeba pojistitel vyplňovat úplně jiným postupem než formulář W-91, že těžkotonážní ložiska KL3001 se prodávají v úplně jiném režimu než drobná ložiska KL030x atd., jsou ve výsledku jen technické detaily, které s klientem můžeme doladit postupně a později a na celkový návrh mají jen nepatrný vliv (a je-li zásadnější, obvykle se po první konzultaci s klientem celkem snadno vyřeší). Pokud při výzkumu narazíme na nějakou méně srozumitelnou či složitější podoblast, nahraďme si ji nějakým pro nás srozumitelným zástupným zástupcem — zde právníci nadefinují přesný postup podpisu kontraktu; zde po dohodě s experty vytvoříme „wizard“ pro výběr parametrů ložiska; tady budou „odborný doktorský pindy“. Smiřme se předem s tím, že se kvůli jedné zakázce nestaneme — a ani se nechceme stát! — odborníky v něčem, co jiní léta studují a čím se zabývají celý svůj profesní život. To je nesmysl.

Naší výhodou a přidanou hodnotou je právě schopnost najít si správný odstup a širokou perspektivu, nahlédnout klientův specifický obor z jiného úhlu, nacházet v něm obecné zákonitosti a aplikovat univerzálně platná pravidla. Musíme nyní hledat a shromažďovat informace nikoli specifické a unikátní, ale ty obecné a všeobecně platné. Bez ohledu na konkrétní obor musíme co nejpřesněji určit cílovou skupinu, její potřeby a priority, rozpoznat, co unikátního dělá a v čem se od počínání klienta liší jeho konkurence, udělat si obecný obrázek o situaci na trhu… A z těchto informací si sestavit pracovní profil klienta, jeho konkurence a cílové skupiny a podle nich správně nadefinovat cíle, které má web plnit, vhodně implementovat obchodní model a ve výsledku navrhnout web, který bude tyto cíle optimálně plnit a současně nějakým přitažlivým způsobem reflektovat potřeby klientovy cílové skupiny.

Poznat klienta

Prvním krokem v našem výzkumu musí být logicky snaha co nejlépe poznat našeho klienta. Od něj se všechno odvíjí a k němu také všechno směřuje. Zatím ho známe jen z první schůzky a případně z prostudování jeho webu a dalších dostupných podkladů. Měli bychom se o něm ale — v rámci možností — snažit dozvědět co nejvíc. Jaká je historie firmy, jaké byly motivace a priority zakladatelů, jaká je současná perspektiva a směřování firmy, dlouhodobé plány a trendy atd.

Je naším klientem dlouholetá tradiční firma, nebo spíš moderní startup? Firma, spolek, organizace, či instituce? Společnost malá, střední, velká? Stojí na klasickém modelu, nebo jsou její činnost a organizace v něčem netradiční? Je to původně garážová firma, která za roky vyrostla do ambiciozní společnosti? Je to garážová firma, která dosud nevyrostla? Srdeční záležitost majitelů, rodinný podnik, nebo spíš odosobněná akciová společnost? Je to lokální firma bez velkých ambicí mimo svůj region, jedná se o dceru nadnárodní korporace? Prezentuje se zbytečně skromně, nebo naopak nepřiměřeně ambiciózně? Je extenzivní, či intenzivní — orientovaná na rychlý růst a maximální expanzi, nebo spíš buduje stabilní pevné základy a stálou věrnou klientelu? Chce se držet svých zásad a tradic, nebo naopak hodlá změnit styl a zvyky? Jen trochu a v něčem, nebo je ochotná podstoupit i zásadní změny?

„Policista, který chce úspěšně vypátrat vraha, musí nejprve důkladně poznat osobnost jeho oběti.“ — Komisař Maigret

Oblastí a otázek, na které může chtít hledat odpovědi, můžeme vymyslet bezpočet. Všechny by měly mít ale jednoho společného jmenovatele, kterým je ten jeden hlavní a určující parametr, který potřebujeme pro svou práci znát co nejpřesněji a který je pro funkčnost výsledku klíčový: klientovy cíle, zájmy a záměry. Už jsme zde zopakovali několikrát, že naším cílem je vytvořit optimální spojnici mezi nimi a potřebami uživatelů, a právě ony jsou tedy jednou stranou rovnice, kterou se chystáme vyřešit. A její co nejpřesnější zadání je vitálně důležité: přesné a precizní řešení špatně zadané rovnice dává přesný a precizní — ale naprosto chybný výsledek.

Tento první bod naší specifikace se proto snažme definovat a sepsat co nejpřesněji. A nechme si jej otevřený po celou dobu zakázky, průběžně jej doplňujme nově zjištěnými skutečnostmi, a pokud již není zcela pozdě, upravujme a doplňujme podle nich náš návrh až do konce. I zdánlivě drobný detail, který zjistíme třeba až během implementace a je v našich silách jej do výsledku promítnout, může mít nakonec efektní odezvu. S dlouholetou praxí se pochopitelně každý designér postupně naučí rozlišovat důležitost jednotlivých vstupních informací a bude se zodpovědně rozhodovat, zda a nakolik je do svého návrhu zahrnout — ale do začátku je vhodné si vystačit s prostou radou, že žádný detail bychom zde neměli podcenit a ignorovat.

V minimální variantě bychom ale vždy měli průzkum a definování cílů a zájmů klienta absolvovat nejméně dvakrát. Poprvé na úplném začátku pro vlastní zadání našeho návrhu, podruhé po jeho vytvoření pro kontrolu a ověření jeho správnosti. Stejně jako v matematice vyžaduje každé řešení rovnice zkoušku platnosti výsledků, je důležité i v designu po každém návrhu znovu ověřit, zda náš návrh „neuhnul“ z vytyčeného zadání a zda vše, co jsme postupně vymysleli, skutečně stále koreluje s předpokládanými cíli a zájmy klienta. Podrobněji se této ověřovací „zkoušce rovnice“ věnuje jedna z následujících kapitol.

Bodem č. 1 každého návrhu vždy musí být: Co má výsledek přinášet zadavateli?

Pokud získáme dojem, že klienta známe dostatečně a natolik, že si můžeme troufnout definovat jeho primární i sekundární zájmy a cíle, sepišme si je do seznamu a pokusme se je pracovně setřídit podle důležitosti. Posuzujme, co z uvedeného je pro klienta skutečně klíčové a co je podružné. Seznam ale nepotřebujeme mít definitivní, ještě s ním budeme dále pracovat. Pracovní verzi na chvíli odložíme a zaměříme se na druhou stranu své rovnice.

Poznat uživatele

Stejně důležité, jako bylo poznat našeho klienta, je pro nás nyní poznat budoucího uživatele. Návštěvníka webu, zákazníka, uživatele webové aplikace. Tedy všechny ty, pro něž náš klient tuto zakázku podstupuje a pro něž svůj web chce vytvořit.

Úmyslně jsme zde nejprve věnovali poměrně velký prostor zjišťování informací o našem klientovi, protože té druhé straně, uživatelům, se do detailu věnují všechny ty desítky knih a učebnic věnovaných webdesignu a UX designu. A ty bohužel někdy kladou na uživatele, jejich potřeby, zájmy a spokojenost — nebo dokonce jen jejich oslnění či ohromení — až příliš velký důraz a zájmy klienta poněkud opomíjejí. My jsme je ale nepominuli, dali jsme jim náležitou váhu, a nyní se můžeme věnovat i jeho protistraně: návštěvníkům jeho webu. Zde nastupuje klasický UX design a všechny miliony stran informací, které o tomto oboru můžeme nalézt.

Prvním a zásadním krokem vždy bude poznat a definovat, kdo oním uživatelem bude, kdo jím má být a kdo nemá. Musíme co nejpřesněji vybrat a specifikovat cílovou skupinu a následně zjistit, co tito lidé chtějí, po čem touží a co jim můžeme nabídnout, jak jejich touhy a potřeby pomoci uspokojit.

Možná poněkud překvapivě zjistíme, že náš úvodní krok — tedy co nejpřesnější určení zájmů a cílů klienta — nám tady poměrně výrazně usnadňuje práci a pomůže nám vhodnou cílovou skupinu vymezit daleko přesněji a konkrétněji. Obvyklé zadání takového webu a jeho předpokládaná cílová skupina totiž standardně bývají dost široké a vágní. Jestliže ovšem zapojíme i omezení a předpoklady dané prvním krokem, který už máme za sebou, a budeme na potenciální budoucí uživatele pohlížet prizmatem tohoto zadání, můžeme skupinu budoucích uživatelů velmi zpřesnit a detailněji vymezit.

Zájmy a cíle klienta předjímají a vymezují cílovou skupinu.

Je-li primárním cílem našeho klienta prodávat luxusní hodinky, snadno cílovou skupinu omezíme na movitější klientelu a nemusíme se snažit web dělat pro širkou veřejnost, která se o takové hodinky třeba zajímá z jiných důvodů. Chce-li klient poskytovat placené informace ve velkém objemu, pomůže nám to vymezit cílovou skupinu na mediální agentury a velkonákladová média. Je-li cílem klienta proniknout na zavedený trh těžkotonážních kuličkových ložisek, můžeme se snadno v cílové skupině zaměřit na B2B segment strojního průmyslu atd.

Nenechejme se zmást předpokládanou cílovou skupinou, kterou ve svém zadání avizoval sám uživatel. Nezřídka se stává, že jeho představy o cílové skupině a jeho skutečné zájmy si poněkud protiřečí. Je jedním z našich úkolů takový případný rozpor odhalit a vyřešit. Platí zde přitom vždy pravidlo, že cíle jsou přednější představ. To, čeho chce klient dosáhnout, má vždy větší váhu než to, jak si myslí, že by toho dosáhnout možná mohl.

Poznat trh a konkurenci

Abychom mohli optimální cílovou skupinu na daném trhu správně vybrat a podchytit, musíme se s tímto trhem nejprve seznámit. Už trochu známe svého klienta, neznáme ale všechny ostatní, s nimiž se utkává na svém hřišti. Zákazníky: stávající i potenciální, zajímavé i neperspektivní — a konkurenci: přímou i nepřímou, vážnou i zanedbatelnou, minulou i možnou budoucí.

Tady nám obvykle hodně pomůže náš klient. Ať už začneme s vlastním letmým a orientačním průzkumem trhu, nebo si necháme vypracovat průzkum důkladný a podrobný, stejně skončíme zpátky u klienta se spoustou dotazů a požadavků na upřesnění. Nejsme a nemusíme být experty na marketing (a ani tato kniha nechce suplovat učebnici marketingu) — ale aspoň základní orientace na cílovém trhu, poznání a porovnání konkurenčních firem a produktů a typologie různých cílových skupin jsou zde nezbytné.

Pokud jsme však postupovali správně a všechno šlo tak, jak má, hlavní informace už jsme získali od klienta při úvodním vyšetřování. Když se vrátíme o pár stran zpět ke vzorovému dotazníku, jehož pomocí jsme svého klienta vyzpovídali, určitě nepřehlédneme, že oblasti trhu a marketingu je věnována celá sekce a ještě se jich přímo či nepřímo týkají i mnohé další otázky. Takže už máme spoustu základních informací od samotného zadavatele: koho on sám považuje za konkurenci, co se mu na konkurenčních produktech líbí a nelíbí, zda a kde vidí možné tržní niky, jaké obchodní strategie chce používat, jak vnímá svou potenciální cílovou skupinu, jaké se cítí mít konkurenční výhody atd.

Mohlo by se zdát, že tyto informace by měly být dostačující — ostatně pocházejí přímo od klienta, který svému oboru rozumí nejlíp, proč bychom mu měli nedůvěřovat a jak bychom mohli s jeho zkušenostmi a znalostmi soupeřit? Ne, soupeřit s klientem opravdu nechceme, ale doplnit jeho pohled a informace, co nám předal, a rozšířit perspektivu zadání musíme a budeme toho schopni téměř vždy.

Nespoléhejme zcela na informace od klienta a vždy si udělejme vlastní, aspoň orientační průzkum trhu. Přinejmenším pro potvrzení podkladů získaných od klienta.

I náš rychlý, orientační průzkum na internetu často hned odhalí pár bílých míst na mapě, případně narazí i na nějaká potlačená tabu. Především co se týká klientovy konkurence. Popravdě řečeno, za celou mou profesionální praxi (na desítkách, ne-li stovkách komerčních zakázek) se mi snad ani jednou nestalo, že by klient byl v této oblasti zcela upřímný a otevřený, a snad vždy se dříve či později objevila nikoli nepodstatná konkurenční firma či produkt, o kterých se klient dosud ani nezmínil. Může a nemusí se jednat o záměr, nejčastěji se ale tato opomenutí dělí do několika málo základních kategorií — klient významného konkurenta:

nezná, nesetkal se s ním

zná, ale nepřikládá mu žádnou důležitou váhu nebo na něj zapomněl

Je klidně možné, dokonce pravděpodobné, že neznámý nebo pro klienta nevýznamný konkurent je pro něj skutečně nepodstatný a může jej s klidem ignorovat. Ale my bychom jej ignorovat neměli a přinejmenším bychom jej měli vést v patrnosti. Není vůbec vyloučeno, že během svého návrhu narazíme na nějakou možnou inovaci, budeme chtít použít řešení či postup, které právě některý z „opomenutých“ konkurentů již sám používá, a tato informace může pak být pro nás i našeho klienta klíčová — ať už coby pozitivní, nebo i negativní. Můžeme zjistit, že s naším „převratným“ řešením už jistá malá firmička válcuje nenápadně svou vlastní tržní niku a nezadržitelně se řítí i na část trhu, kde zatím dominuje náš klient. Nebo naopak zjistíme, že podobné řešení u méně známé konkurenční firmy už dávno selhalo a je možná namístě jej okamžitě přehodnotit. V každém případě bychom v této situaci měli situaci s klientem probrat, nové skutečnosti vysvětlit a příslušný detail vyhodnotit ve světle nových informací.

Chybí zde ovšem ještě třetí, velmi častá možnost — alespoň já jsem se s ní ve své praxi setkal asi nejvíckrát:

klient významného konkurenta zná, ale z nějakého důvodu o něm nemluví

Obvykle to má jednu ze dvou příčin. Buďto je dotyčná firma pro něj tak významná, známá a samozřejmá, že nepovažoval za nutné nám ji vůbec zmínit, případně ji vnímá jako tak velkého hráče, že se s ním na trhu nehodlá vůbec poměřovat. Anebo jde o rivala, kterého prostě nemá z nějakého důvodu rád, je to tabu, o kterém se v jejich firmě nahlas nemluví, ale všichni možná neustále sledují všechny jeho kroky a vědomě či nevědomky se je snaží kopírovat. A může jít i o kombinaci obojího.

My musíme mít na paměti, že i velký, zdánlivě nesrovnatelný a nedotknutelný konkurent může být pro náš výsledek dost podstatným faktorem. Přinejmenším je to etalon, měřítko, s nímž mohou klientův projekt všichni srovnávat, případně může určovat nevyhnutelné trendy a nastavovat standardy. Pokud náš klient vytváří proprietární kancelářské aplikace, musíme na první místo konkurence postavit nejpoužívanější kancelářské balíky (tedy především Microsoft a jeho Office a rovněž i novější přístupy firem Google a Apple). Pokud prodává jakékoli zboží, musíme jeho konkurenci předřadit největší národní a nadnárodní e-shopy, jejichž sortiment se s klientovým aspoň minimálně protíná (např. Amazon aj.). Poskytuje-li informace a publikuje články, musíme jej automaticky srovnávat s největšími světovými a národními mediálními domy a hlavními zpravodajskými weby atd.

Vždy musíme mezi konkurenci zahrnout v prvé řadě největší hráče na daném trhu.

Na zdánlivě samozřejmé konkurenty a jejich část trhu si vlastně musíme dát největší pozor. Není výjimkou, že se náš klient dlouhá léta se svými hlavními konkurenty přetahuje o malý zlomek trhu, a přitom by mohl se vší vážností útočit na mnohem větší cílovou skupinu, představující určitý vhodný zlomek trhu obsazeného velkým hráčem, kterému ho nikdy ani nenapadlo konkurovat. Upřímně řečeno: malé firmy se často takové možnosti, pokud jim ji předložíme, rychle zaleknou a v obavě o „své jisté“ ji odmítnou. Ale je naší povinností je na takovou možnost alespoň upozornit a předložit funkční řešení, které by podobný průlom umožňovalo. Smiřme se předem s tím, že ve většině případů klientův strach a malé ambice odsoudí takové řešení k neúspěchu — ale ta malá část, kdy se takový významný průlom může podařit, za všechnu tu snahu stojí.

Pracoval jsem celý rok jako najatý externí konzultant na projektu malé účelové sociální sítě, která zpočátku nedávala moc velký smysl a zcela upřímně s původním zadáním neměla nijak valnou perspektivu. Postupem času ale parametry zadání vykrystalizovaly do trochu jiné formy sociální sítě cílené primárně na rodiny, příbuzenské vazby a uzavřenou komunikaci v rámci úzké a širší rodiny, která by po dokončení měla nesmírně velký potenciál a mohla přinejmenším na národní úrovni směle konkurovat i tak velkým hráčům, jako jsou dnes Facebook či Skype. Dodnes mám celý ten projekt do detailu v hlavě a hluboce lituji, že klient neměl dostatek ambicí jej dovést do konce. Z jeho pohledu jeho malý (a podle mě dost bezútěšný) projekt selhal — z mého pohledu je věčná škoda, že to nejperspektivnější, co se z něj vyklubalo, bylo ukončeno v zárodku a nasměrováno do zapomnění. Zadavatel se cítil na tak velkou konkurenci příliš malý a netroufl si.

Nicméně pokud při svém průzkumu trhu narazíme na konkurenci, kterou sami považujeme za významnou, ale náš klient ji z jakéhokoli důvodu opomenul zmínit, zahrňme ji do svých podkladů a zvažujme ji aspoň v zadním plánu při své práci. Promluvme si o ní s klientem a pokusme se zjistit, proč o ní dosud nemluvil. Ale ať jsou jeho důvody jakékoli, ať už ji klient za svou skutečnou konkurenci nepovažuje, nebo se o ní prostě nechce bavit, my s ní vždy počítejme a ve svém návrhu na ni — alespoň okrajově — mysleme a výsledek poměřujme také z její perspektivy.

A máme-li aspoň přibližnou představu o klientově trhu, jeho konkurenci a zákaznících, kteří se zde vyskytují, můžeme konečně přistoupit i ke specifikaci druhé strany naší základní rovnice a pokusit se definovat optimální cílovou skupinu našeho projektu.

Specifikace cílové skupiny

Klientův trh a tržní prostředí jakž takž známe, nyní si do něj ještě musíme dosadit spotřebitele, kteří se na něm pohybují v roli koncových zákazníků. Klientovu cílovou skupinu. Může ji tvořit kdokoli — ať už část zákazníků stávajícího trhu (a pak by měl mít klient jasnou strategii, jak je získat pro sebe a přetáhnout od konkurence), nebo skupiny zcela nové (a pak jsou potřebné zase strategie pro jejich přilákání na nový trh). Jak už bylo řečeno, nechceme se zde snažit suplovat učebnice marketingu, to je samostatný a široký obor a my jako designéři si vystačíme jen s obecnými a základními znalostmi. Naštěstí marketing není tak docela naše starost: je to klientův byznys, my mu jen pomáháme realizovat jeho obchodní strategie na internetu a nanejvýš mu můžeme zkusit poradit, získáme-li pocit, že má o tomto médiu zkreslené představy, má mylná očekávání, dělá si falešné naděje a jeho plány mohou být zavádějící a nereálné. Pro nás je důležité klientovu cílovou skupinu správně pojmenovat, specifikovat. Přetransformovat klientovy představy o obchodní strategii do jazyka webdesignu a vytvořit ze strohých ekonomických a sociodemografických ukazatelů hlavní role do svých budoucích uživatelských scénářů.

Tvorba popisu cílové skupiny pro potřeby designu je podobná práci spisovatele či scenáristy.

Designér nemůže moc pohodlně pracovat s nějakými fiktivními a obecnými kategoriemi cílových skupin. Potřebujeme se při návrhu vžít do nějakých konkrétních osob s konkrétními potřebami a požadavky, musíme si je umět představit, musíme umět simulovat jejich zvyky, vzorce chování, priority… Jako návrháři nepotřebujeme statistické údaje a demografické tabulky, musíme si vytvořit postavy (lidé v oboru jim obvykle říkají persony, angl. personas). Co nejpřesněji odpovídající zadaným datům — ale reálné, barvité, představitelné. Stejně jako scenárista tvoří soupisku hlavních rolí svého filmu, popis postav, jejich charakteristiky a historii, personifikuje si designér abstraktní cílové skupiny do fiktivních vzorových uživatelů, vymýšlí si archetypy předpokládaných návštěvníků, definuje typické zástupce cílových skupin.

Naším cílem je tedy přetavit získané údaje do konkrétnějších osob, které nám nadále budou v projektu reprezentovat všechny hlavní charakteristiky cílové skupiny a s nimiž budeme později pracovat v uživatelských scénářích. Ze vstupních údajů si musíme poskládat živoucí osobu — ať už zcela smyšlenou, nebo použijeme nám známého skutečně žijícího člověka, nebo třeba i postavu z filmu či románu. Uživatelská role může být popsána jako vysokoškolský student technického zaměření se zájmem o občasný přivýdělek stejně dobře jako můj děda nebo třeba Richard Gere ve filmu Pretty Woman. Hlavní je mít co nejpřesnější a co nejkonkrétnější specifikaci osoby, již si dokážeme kdykoli představit, obsadit do příslušné scény našeho uživatelského scénáře a co nejpřesněji následně odhadnout její chování za daných okolností.

Téměř nikdy si nevystačíme s jedinou postavou, ale nechceme jich mít ani příliš mnoho: více než pět sedm postav už se obvykle ukazuje jako kontraproduktivní. Nejběžnější a nejpraktičtější počet person bývá tři. Tři typičtí uživatelé, svými charakteristikami maximálně pokrývající požadované cílové skupiny. Požadavek na právě tři vzorové uživatele se v praxi ukazuje dobrým návrhovým vzorem z mnoha důvodů — mimo jiné aktivně brání oběma častým extrémům, se kterými se můžeme na straně klienta setkat:

příliš obecná cílová skupina (děláme to pro všechny), se kterou se nedá prakticky vůbec nijak pracovat

příliš úzká cílová skupina (cílíme jen na hispánské svobodné matky do 30 let s vlastním domem bez garáže žijící za polárním kruhem), která vše příliš omezuje a ubírá mnoho potenciálních stupňů volnosti

Požadavek na specifikaci tří konkrétních vzorových uživatelů najdeme ostatně i v úvodním dotazníku pro klienta, už zde jej na tuto formu návrhového vzoru připravujeme a pomáháme mu se nad cílovou skupinou lépe zamyslet, ujasnit si ji a upřesnit pro naše potřeby a z našeho pohledu.

Pracujme při návrhu vždycky s několika konkrétními, pojmenovanými, vizualizovanými postavami. Pouhé obecně popsané kategorie nám neumožní se do uživatele tak dobře vžít.

Aby nedošlo k mýlce, persony přitom nejsou vůbec totéž co cílové skupiny. Tyto postavy dohromady mají pokrývat známé charakteristiky cílových skupin, ale mohou se přitom mezi nimi různě křížit a kombinovat. Jedna postava může být zástupcem několika sociodemografických cílových skupin, stejný aspekt jedné cílové skupiny může mít více postav současně. Pokud vytvářený e-shop cílí na cyklisty, inline bruslaře a lyžaře, nepotřebujeme hned tři postavy, ale můžeme si klidně vytvořit jednoho mladíka, který jezdí současně na kole i na bruslích a k tomu v zimě lyžuje. Ale podstatné bude to, že vedle něj asi budeme chtít mít taky třeba mladou maminku z venkova, co možná ani nebruslí, ale ráda jezdí na kole, co možná obrací každou korunu, ale stejně bude kola postupně pořizovat i svým dvěma dětem. A slušně situovaného seriózního pana profesora, kterého kola ani brusle nezajímají, ale v zimě se velmi rád projede na běžkách, pokud možno těch nejkvalitnějších…

Postavy nemusí a ani nemají kopírovat cílové skupiny.

Charakteristiky cílových skupin, které máme k dispozici, jsou rozdělené do mnoha kategorií: různé demografické skupiny (věk, pohlaví, bydliště, vzdělání, příjmová skupina, rodinný stav atd.), různé zájmy a cíle, různé hodnotové žebříčky, různá omezení atd. Naším cílem je vlastně vytvořit co nejméně postav, které dokáží pokrýt všechny tyto (často i nesourodé) zadané parametry, a přitom budou stále ještě uvěřitelné a realistické. Ideální by byla postava jediná, ale to obvykle není možné — parametry cílových skupin bývají nesourodé a protichůdné a obvykle z nich musíme vytvořit postavy aspoň dvě, spíš tři. Nicméně ve výsledku je pak jen na nás, jak si postavy „namícháme“. Např. zahrnují-li cílové skupiny našeho klienta studenty a mladé matky, obyvatele venkova a malých měst a osoby, které chodí na výlety nebo jezdí na kole, tak příliš nesejde na tom, jestli našimi postavami budou student-turista z vesnice a maminka-cyklistka z maloměsta, anebo naopak student biker z městečka a venkovská maminka výletnice… Pouze ve speciálních případech, kdy má web pro různé cílové skupiny poskytovat různý obsah a různé služby (obvykle v podobě oddělených sekcí pro laiky a pro profesionály, pro koncové zákazníky a B2B apod.), tyto kategorie mezi postavami volně smíchat nemůžeme a musíme vytvořit samostatné postavy pro každou takovou sekci. To jsou ovšem jen ojedinělé případy, typický web žádné větvení podle cílové skupiny nemívá a postavy si tak můžeme uvařit podle vlastní libosti: trošku téhle suroviny, špetku odsud a ždibec tohoto. Hlavní je, abychom spotřebovali všechny předložené ingredience a nezbyl nám nějaký podstatný atribut cílové skupiny, který se nepromítl do žádné z postav.

Ať už si své tři hlavní postavy/persony vytvoříme jakékoli, musíme je důkladně popsat. I když jsme došli k závěru, že pro daný projekt je archetyp můj děda naprosto ideálním vzorovým uživatelem, potřebujeme tuto svou velmi jasnou a konkrétní představu také předávat dále. Musí s ní souhlasit klient a budeme ji případně dál představovat vývojářskému týmu, testerům a dalším, kteří našeho dědu pravděpodobně vůbec neznají. Snažme se definovanou postavu popisovat co nejbarvitěji a nejživěji, aby si ji každý dokázal představit a v případě potřeby se s ní mohl sžít a použít ji v příslušných místech uživatelského scénáře. Příklad:

Pan Josef. Někdo jako můj děda: muž něco přes šedesát, aktivní, činorodý, čerstvý důchodce. Žije celý život na vesnici, pracoval jako strojní zámečník ve fabrice, stará se o zahrádku, zajímá se o společenské dění. Žije ze skromného důchodu, ale má slušné úspory, a i když zbytečně neutrácí a nevyhýbá se různým slevám, dává spíše přednost kvalitě a dobrým referencím před samotnou cenou. Nad věcmi přemýšlí, zjišťuje si předem dostupné informace, rád si nechá odborně poradit a dobře si rozmyslí, než za něco utratí své peníze. Žije sám v rodinném domě se zahrádkou, chová králíky a slepice, je nadšený kutil. Celá rodina ho často navštěvuje a on jim rád kupuje dárky, hlavně svým osmi vnoučatům. (…)

Čím větší a zásadnější projekt, tím podrobnější bychom měli mít popis svých postav. V ideálním případě aspoň na jednu stránku: všechny hlavní charakteristiky, pomyslné zkušenosti, vzorce chování, přání, cíle, postoje, znalosti a schopnosti, limity a handicapy — zkrátka všechno, co o příslušné cílové skupině víme. A k tomu pár smyšlených osobních detailů, abychom postavě vdechli život a udělali si ji co nejreálnější. Rozhodně si postavy konkrétně pojmenujme, není vůbec od věci si k nim i připojit nějakou ilustrační fotografii. Ať už reálné osoby, nebo si najděme na internetu vhodnou ilustrační fotku odpovídající co nejlépe naší představě. Můžeme sepsat, jak vypadá jeho/její běžný den, můžeme postavám sepsat stručné životopisy nebo třeba každé vymyslet slogan či stručný citát, který ji dobře vystihuje. Snažme se tyto různé „oživující“ detaily vytvořeným postavám vymýšlet především s ohledem na zaměření vytvářeného webu — u e-shopu s hudebními nástroji asi není podstatné, že naše postava aktivně pečuje o své zdraví, a naopak u webu o životním stylu a zdraví bude zbytečné zmiňovat, že hraje na trumpetu a sbírá nahrávky Elvise. A následně ještě popisy korigujme a doupravujme, aby všechny dohromady svými charakteristikami maximálně pokrývaly vstupní požadavky na cílové skupiny.

Každé postavě dejme jméno, vzhled a unikátní vlastnosti tak, abychom si ji dokázali kdykoli co nejlépe představit a odhadnout její chování.

Pozn.: V některých výjimečných případech nemusí být vzorový uživatel jen jedna osoba. Někdy má smysl použít i uživatele skupinového (mladá aktivní předměstská rodina, vesnický fotbalový klub, zájmový spolek). Je to ale spíše výjimečné řešení, vhodné jen pro některé konkrétní situace. Častěji se budeme snažit najít konkrétnější osobu. Podstatným vodítkem je hlavně to, zda existuje někdo konkrétní, jehož zájmy má web sledovat a kdo o věcech primárně rozhoduje.

Nikdy nezapomeňme na to, že pokud náš projekt pracuje s nějakými uživatelskými účty či profily, musíme v pravou chvíli během vývoje vytvořit každé vzorové postavě příslušný účet a profil a naplnit je vhodnými, co nejreálněji působícími daty. Tyto vzorové účty si uložíme jako šablony, jejich data zafixujeme a použijeme je k vytváření nových testovacích účtů a pro všechny typy testování vůbec. Zajistíme tím jednak to, že všichni — jak vývojáři, tak testeři — pracují se stále stejnými, opakovatelně použitelnými daty a současně že to jsou data smysluplná, co nejlépe odpovídající budoucím typickým uživatelům.

Je ovšem důležité rozlišit u takových uživatelských účtů pevná, statická data, která mají zůstat pokud možno konstantní, a data provozní, průběžně přibývající a v čase se měnící. Pokud si to představíme třeba na příkladu projektu sociální sítě, budou profil, osobní data a předvolby vzorového uživatele zafixované a vždy shodné pro všechny vývojáře a testery. Zatímco jeho příspěvky, komentáře a záznamy aktivity můžeme buďto rovněž jednorázově připravit a udržovat je v konstantní podobě, nebo mohou soustavně přibývat a neustále se měnit (průběžně doplňované testery nebo třeba nějakým automatickým generátorem). První varianta má výhodu v tom, že vstupní data budou pokaždé stejná a testy budou přesně opakovatelné — nicméně ne vždy je použitelná, hlavně když aplikace pracuje s reálným časem a zafixovaná provozní data postupně zmizí v propadlišti času (třeba jedná-li se o záznamy v kalendáři, naplánované úkoly apod.). Druhá varianta zhoršuje opakovatelnost testů, ale také poskytuje mnohem reálnější simulaci chování uživatele i celé aplikace.

Specifikace cílů a potřeb

Známe trh, známe uživatele, známe svého klienta. Můžeme se konečně přesunout k tomu nejpodstatnějšímu, čeho se od samého začátku snažíme dosáhnout a co je vlastně samotnou podstatou naší práce: konečně co nejpřesněji popsat smysluplné a měřitelné cíle a záměry, které má budoucí web klientovi pomáhat plnit. A současně také všechny ty prchavé (a povětšinou zcela neměřitelné) emoce uživatelů, které má generovat, jejich zájmy a potřeby, které má pomáhat uspokojovat. Teprve nyní máme možnost — a teprve nyní i právo! — vytvořit onu rovnici, kterou máme vyřešit, zapsat přesně obě její strany. Detailně zmapovat ty dva břehy řeky, které máme svým designem ve výsledku co nejlépe propojit.

Středobodem každého návrhu tak vždy musí být dvojice odpovědí na onu dvojjedinou otázku:

Co má výsledek přinášet zadavateli?

Čím má výsledek přitáhnout uživatele?

Naší snahou je přitom formulovat tyto odpovědi ze všech možných stran, ze všech úhlů, z nichž se nám zatím celou problematiku podařilo nahlédnout. O co skutečně stojí náš klient? Co je pro něj podstatné a co nepodstatné? V jakém cílovém stavu bude nejspokojenější? Jaké zdánlivé úspěchy mu ve skutečnosti nepřinesou žádný měřitelný efekt? Oč na webu skutečně jde? Kterými cestami a na jaká místa můžou přijít uživatelé a s jakým záměrem? Co budou očekávat a jak se jejich očekávání střetnou s tím, co dostanou? Proč vůbec budou chtít přijít? Budou se chtít vrátit, proč a za jakých okolností? Pokud projdou — dobrovolně, či nuceně — celou cestu k cíli požadovanému naším klientem, bude současně dobře uspokojena i jejich potřeba a zůstane v nich z toho pozitivní emoce? Jaké pocity v nich první návštěva webu zanechá? A jaké ta příští? Budou stát o trvalé udržení kontaktu s naším klientem? A pokud ano, jakou formou a s jakou frekvencí? Budou chtít své pozitivní zkušenosti sdílet s dalšími lidmi? A pakliže ano, můžeme jim v tom nějak pomoci? …

Dobrý designér musí mít velkou schopnost empatie a neustále v hlavě přepínat oba tyto různé a mnohdy protichůdné pohledy. Jak danou stránku, prezentaci, postup vnímají jednotliví typičtí uživatelé — a jak stejný proces vnímá náš klient a jak se to potkává s jeho zájmy. A nikdy (jakkoli to někdy může být těžké) tyto pohledy nezaměňovat. Musí být schopen prosadit i takový návrh, který se nemusí líbit klientovi, pokud ví, že s ním budou spokojeni uživatelé; a naopak i tvrdě prosazovat postupy, které jsou pro klienta vitální, a uživatelé o ně příliš nestojí. Obě strany musí být neustále v rovnováze.

Web, který nezajímá uživatele, je stejně nefunkční jako ten, který je baví, ale nepřináší správný efekt provozovateli.

Pohled do historie nám dává bezpočet příkladů selhání projektů zdánlivě životaschopných a velmi zajímavých, které zašly na úbytě právě kvůli disproporci na obou stranách této designérské rovnice. Každým okamžikem vznikají a zase zanikají stovky projektů, do nichž nadšení provozovatelé promítli svoje záměry a svůj pohled na svět, ale které „šly proti srsti“ možným typickým návštěvníkům. Každým okamžikem umírají stovky projektů, které uživatelé milují, ale provozovatelé z nich nemají žádný profit a nechtějí je dále zbytečně dotovat a utápět v nich statisíce.

Příčiny přitom ležívají rovnoměrně na obou stranách, ale máslo má na hlavě nakonec vždy jen designér. Ten, který slepě poslechl nereálné a ve skutečnosti chybné zadání klienta, jež se míjelo s požadavky možných uživatelů — i ten, který šel vstříc zájmům uživatelů, aniž by zohledňoval plány provozovatele. Pokud náš klient miluje hiphop a nenávidí dechovku, ovšem jako ideální cílová skupina se ukáží postarší milovníci dechovky, a on jim přesto chce vnucovat prezentace ve svém hiphopovém životním stylu, musíme to být my jako designéři uprostřed, kdo téhle smrtící kolizi zabrání. Pokud k ní nakonec dojde, je neúspěch obvykle nevyhnutelný. A je jen naše vina, pokud jsme se dostatečně nesnažili v tom klientovi zabránit a neprosazovali řešení, které šlo třeba proti jeho vlastnímu vkusu, ale konvenovalo by vkusu uživatelů a klientovi nakonec mohlo přinášet požadovaný profit. A naopak — pokud má část cílové skupiny v oblibě například videoprezentace produktů, jejichž výroba našeho klienta finančně zruinuje, ačkoli prezentace jen pomocí textu a obrázků by přinesla dostatečně slušný profit i bez oněch nadšených referencí malé skupiny geeků a technofilů, je opět naší chybou v pozici designéra, když jsme tuto disproporci nezohlednili a klienta jen v zájmu nějaké velice cool, leč extrémně drahé prezentace nakonec dovedli ke krachu.

Nejúspěšnější projekty v historii byly většinou ty nejvíce funkcionalistické.

Mějme na paměti jednu důležitou poučku. Jakékoli úžasné vizuální experimenty a wow efekty, na které si vzpomeneme, byly vždy jen přidanou hodnotou již úspěšných projektů (které se prosadily zcela jinými cestami a ze zcela jiných důvodů), případně to byly často jen krátkodobé a krátkodeché excesy — projekty, které rychle zazářily a stejně rychle zase pohasly. Zkuste si v hlavě vyjmenovat několik nejúspěšnějších webových projektů, které vás jako první napadnou. Kolik z nich se prosadilo proto, že úžasně vypadaly? Kolik z nich přetrvalo proto, že se uživatelé posadili na zadek ohromeni z jejich vzhledu? Troufnu si tvrdit, že minimum, ne-li žádný. Projekty jsou dlouhodobě úspěšné kvůli své funkčnosti, díky tomu, že uspokojují potřeby svých uživatelů za současného generování profitu či jiného způsobu plnění záměrů svých provozovatelů. Ohromující show a wow efekt jsou velmi vhodné jen na jednorázové prezentace — představení nové technologie, objevu, služby, produktu. Ale pro jakýkoli dlouhodobější projekt je už nějaké ohromení nepodstatné, hlavní roli zde hraje funkčnost, funkcionalismus, dlouhodobá profitabilita pro obě zúčastněné strany.

Soustřeďme se tedy v popisu cílů klienta a potřeb uživatelů na to skutečně podstatné a snažme se eliminovat nápady, které tento náš hlavní plán přímo nepodporují, nebo dokonce jdou proti němu — tedy vyhovují pouze jedné ze zúčastněných stran a druhé přímo či nepřímo škodí. Dejme dohromady seznam a co nejpodrobnější popis toho, co je opravdu podstatné a rozhodující, pokud možno včetně určení priorit. Nemilosrdně odstraňujme vše, co nám nebo klientovi možná připadalo jako dobrý nápad, ale ve světle vstupních informací získaných v předchozích krocích se mohlo ukázat jako kontraproduktivní. Není dokonce od věci si průběžně vést i seznam takových škodlivin, spolu s připomenutím důvodů a důsledků, které jejich užití může mít. Buďte si jisti, že dříve nebo později na ně přijde řeč a někoho napadne, že ten dříve zmíněný (a z dobrých důvodů zavržený) hiphop nebo videoprezentace by se tam vlastně měly zakomponovat. A potom takový negativní seznam spolu se soupisem všech negativ a možných rizik, přiložený k úvodnímu zadání projektu, může být k nezaplacení.

Kromě samotných hlavních obecných cílů a potřeb obou zúčastněných stran nám z dříve získaných informací vyplyne i množství vedlejších parametrů, které rovným dílem budou ovlivňovat výsledný návrh. I ty musíme zkompletovat a sepsat v zadání — ať už se jedná o obchodní model a možné způsoby monetizace chodu webu, o to, jak se mají parametry stanovené v zadání kvantifikovat a měřit, nebo o všemožné technické parametry, limity a omezení, které výsledek musí dodržovat a podřizovat se jim. Bez těchto parametrů žádné zadání nebude kompletní.

Obchodní model

Cíle a záměry našeho klienta u komerčních webů obvykle reprezentuje nějaký obchodní model. Tedy způsob, jakým má provozování výsledného webu přinášet jeho provozovateli nějaký zisk. Ten může být přímý (prodejem produktů a služeb) i nepřímý (podpora značky, prezentace výrobků, servis atd.), případně se může jednat i o web zcela nekomerční, od nějž se zisk neočekává a žádný obchodní model se na něm použít nemá. Je každopádně nezbytné tyto parametry včas a jednoznačně definovat. Už v této chvíli, na samém začátku, musíme mít společně s klientem zcela jasno v tom, zda vytváříme komerční web, nebo ne — a pokud ano, mít i jasnou představu o příslušném obchodním modelu, na kterém má výsledný web fungovat. Je nezbytné znát v tuto chvíli co nejpřesnější odpovědi na základní otázky:

Jde o komerční, nebo nekomerční web?

Má web přímo generovat nějaký zisk, nebo je jeho účel jiný? Jaký?

Pokud má web generovat zisk, jaký je hlavní obchodní kanál? Jaké jsou sekundární obchodní kanály? Kde a jak se používání webu monetizuje?

Jaké obchodní nástroje sem patří a co sem nepatří? Co zde rozhodně nechceme?

Zde bude podstatná především odpověď na otázku: patří sem reklamy? Je podstatné si uvědomit, že online reklamy — a pro zjednodušení zahrňme pod tento pojem všechny příbuzné marketingové nástroje, od placených odkazů přes P. R. články po affiliate marketing — jsou legitimním zdrojem zisků a vedle online prodeje (tedy e-shopů) na nich stojí spousta obchodních modelů ziskových webů. Ale mají i svá negativa a vždy je dobré si dobře rozmyslet, jak a zda vůbec online reklamu na webu používat. Obecně bychom měli dodržovat pravidlo neslučitelnosti tří základních kategorií webů:

komerční web generující zisk prodejem (e-shop)

komerční web generující zisk z reklamy

neziskový web

Až na výjimky by se oba základní obchodní modely komerčních webů neměly příliš míchat: na webu, který nemá všechny náležitosti a obvyklé standardy současných e-shopů, bychom se neměli snažit nabízet přímý prodej; a stejně tak do našeho e-shopu nepatří cizí reklamy. A ani jedna z těchto věcí nepatří na neziskový web — ať už se jedná o web neziskový z podstaty (weby institucí, organizací, škol apod.), nebo o web, od nějž očekáváme jiné přínosy než přímé generování zisku (firemní weby, prezentace produktů, online podpora atd.).

Nemíchejme základní obchodní modely. Nesnažme se prodávat cokoli bez plnohodnotného e-shopu, nevkládejme do e-shopů cizí reklamy, nesnažme se generovat zisk na neziskových webech.

Naším cílem je dělat dobře a správně tu jednu požadovanou věc a co nejlépe podporovat zvolený obchodní model. Pokud chceme něco prodávat, vytvořme plnohodnotný e-shop. Standardní webový obchod, který jednak bude vyhovovat všem legislativním požadavkům, jednak všem standardům online obchodování, na které jsou dnešní uživatelé zvyklí. Pionýrské doby, kdy jsme si mohli dovolit na web přidat malou odbočku ve stylu pošlete nám e-mail se svou poštovní adresou, my vám pošleme náš kosmetický balíček na dobírku, jsou už dávno pryč. Uživatelé jsou zvyklí na plný komfort a vysoký standard e-shopů s širokou nabídkou platebních metod a způsobů doručení, na všemožné prodejní a poprodejní služby — a naopak pro nás existuje nepřeberná nabídka hotových e-shopů, které můžeme pro náš prodejní obchodní model snadno nasadit a použít. Nestandardní a neúplné prodejní kanály působí nevěrohodně a cílům klienta pouze ubližují.

Zdaleka nejčastějším prohřeškem je ovšem nasazování online reklam na neziskových webech, nebo dokonce v e-shopech. Na webech zcela nekomerčních (ať už se jedná o web státního úřadu, nebo třeba základní školy či skautského oddílu) nemají reklamy co dělat už z principu. Méně zřejmé to ale bývá mnoha provozovatelům webů komerčních. Mnozí s klidem umístí na svůj firemní či produktový web, nebo dokonce do svého vlastního e-shopu reklamní pozice, kde se pak zobrazují reklamy konkurenčních firem a odvádějí návštěvníky z webu pryč. Pokud si nejsme zcela jisti, co se v takové reklamní pozici uživatelům zobrazí, a nemůžeme-li zaručit, že veškerý takový obsah bude podporovat pouze obchodní strategii našeho klienta, měli bychom se umístění jakýchkoli online reklam vyvarovat.

Postavili byste si do vlastní prodejny poutač na nejbližší hypermarket?

Jakékoli reklamní pozice, bannery a všechny druhy online reklamy by se měly objevovat pouze na webech, kde je zisk z online reklamy plánovanou součástí obchodního modelu. A to součástí smysluplnou a integrální — snaha doplnit vlastní sebevědomý firemní web příštipkařením na „halířových“ ziscích ze zobrazování cizích reklam je velmi nezodpovědný nápad, který působí nanejvýš směšně a v každém případě výrazně snižuje důvěryhodnost celé prezentace. Pokud má klient pocit, že umístění pár reklamních bannerů je jen neškodný detail a každá koruna bude dobrá, je naším úkolem mu takový nesmysl rozhodně co nejrychleji vymluvit. Na firemní nebo produktový web cizí reklamy prostě nepatří.

V případě nekomerčních webů je to pak zcela mimo diskusi. Už jen vyřešení otázky, kam a komu má připadnout výnos z reklamy a jak jej bude dotyčná instituce či úřad zaúčtovávat, bude netriviální problém — kterému se nejsnáze vyhneme tak, že jakékoli snahy o umístění jakýchkoli reklamních ploch na takový web zarazíme v samém zárodku. Nejspíš nebudeme považovat za přípustné, aby místní radnice rozdávala občanům katalogy kosmetiky a základní škola přes žáky inzerovala výprodej koberců, ale určitě dokážeme po celém světě nalézt spousty příkladů webů institucí, úřadů a škol, které na svých stránkách ve vší své naivitě zobrazují reklamní pozice nabízející leccos, od koberců po kuličková ložiska. Pokud je web definován jako nekomerční, pak tam nepatří absolutně žádné komerční nástroje.

Reklamní pozice a formáty

Nicméně předpokládejme, že obchodní model našeho klienta stojí na online reklamě, používá ji zcela korektně a správně. V takovém případě je nejdůležitější v tomto kroku co nejpřesněji definovat, jaké reklamní formáty, kde a jakým způsobem budou použity. Pro nás jako designéry je zde podstatné myslet stále na to, že naším primárním úkolem je plnit záměry klienta — a pokud jimi má být tvorba zisku prostřednictvím nasazení online reklamy, je naším úkolem tento obchodní model považovat za stěžejní kostru celého webu.

Vůbec nejčastější designérskou chybou, se kterou se můžeme setkat téměř denně na každém kroku, jsou krásné, úžasné, vystylované a obsahově dokonalé weby, které ale mají obchodně stát na online reklamě — která je ovšem do obsahu naroubovaná neuměle, nevhodně, násilně a ve výsledku nefunkčně. Je to pohříchu důsledek toho, že designér myslel především na uživatele, na jeho zážitek a prožitek (UX) a celý obsah podřídil hlavně tomuto výslednému efektu. Ale na zájmy provozovatele, na naplnění jeho obchodního modelu už se jaksi pozapomnělo a potřebné reklamní pozice se do designu montovaly dodatečně, nekonzistentně a mnohdy nejspíš k velké nelibosti samotného designéra. Ale je to jenom jeho chyba: dobrý designér, který se nesoustředí pouze na uživatele, ale myslí na obě zúčastněné strany, takovou chybu neudělá. Pokud má web stát na obchodním modelu sestávajícím z efektivního fungování online reklamy, musí se obsah podřídit předem stanoveným reklamním pozicím a uživatelský prožitek musí být postaven až kolem nich.

Proto je v případech takových webů zcela zásadní jasně nadefinovat formáty, rozměry, formu a objem veškeré online reklamy, která bude na stránkách použita, a počítat s nimi v návrhu webu od samého začátku. Nebrat je jen jako nějaké nutné zlo, ale naopak jako to nejpodstatnější, co web prezentuje, a samotný obsah jako obal, který uživatele co nejpříjemněji a co nejochotněji dovede k tomu, aby nakonec příslušné reklamní sdělení konzumoval.

Stojí-li obchodní model webu na online reklamě, tvoří reklamní pozice kostru stránek a samotný obsah je výplní mezi nimi, co nejlépe podporující jejich účinnost.

Pro laika takové tvrzení možná může znít příliš cynicky, ale mediální svět tímto způsobem zkrátka funguje. Média, která žijí primárně příjmy z reklam, musí považovat veškerý publikovaný obsah, kvůli němuž daný titul konzumují uživatelé, v podstatě za výplň a dekoraci mezi reklamními plochami, které generují provozovateli zisk. Úkolem designéra je navrhnout výslednou podobu tak, aby oba světy fungovaly v ideální symbióze — tedy aby uživatelé dostali obsah, který je zajímá, baví, který chtějí opakovaně navštěvovat, a současně aby se při tom potkávali s reklamními sděleními, z nichž je aspoň některá zaujmou a věnují jim náležitou pozornost. Pouze v takové symbióze mohou obě strany koexistovat, webové projekty mohou dlouhodobě fungovat a prosperovat za dostatečného zájmu návštěvníků. Pokud se zájmy obou stran vhodným způsobem nepotkají, web nebude dlouhodobě prosperovat. Zajímavý, oblíbený a hojně navštěvovaný web, který negeneruje provozovateli dostatečný zisk, zajde nakonec na úbytě stejně jako ten, který by třeba obchodně fungoval, ale nechodí na něj (opakovaně) dostatek návštěvníků.

Pro nás jako designéry je zkrátka nezbytné už na samém začátku dobře nadefinovat požadované reklamní formáty, optimálně zvolit jejich pozice a vyvážit jejich množství. Tedy najít ideální sweet spot mezi maximální efektivitou pro provozovatele a neúnosným obtěžováním uživatelů — zohlednit všechny technické požadavky a omezení jednotlivých formátů i použitých reklamních systémů a vhodně jim podřídit veškerý ostatní obsah webu. Bude-li reklamy příliš, bude-li obtěžující a pro uživatele neúnosná, nebudou chtít web navštěvovat (nebo je donutíme používat nástroje, které tuto reklamu začnou blokovat). A naopak, bude-li reklamy málo, bude příliš nenápadná a s uživateli se bude míjet, nebude generovat klientovi dostatečný zisk. Oba tyto extrémy vedou nakonec k nefunkčnímu webu. Dlouhodobě úspěšné budou pouze projekty, kde budou obě strany v rovnováze. Kde reklama je funkční a současně neobtěžující.

Měření výsledků a metriky

Sebelépe vymyšlené cíle a sebepřesněji popsané záměry jsou nakonec jen prchavou bublinou bez dalšího užitku, pokud současně nedokážeme také dobře zhodnotit, zda a jak se daří je uskutečňovat a plnit. V rámci zadání je potřebné stanovit a dohodnout nějaké metriky, způsoby měření a měřitelné limity, kterých je třeba dosáhnout. Zvýšení obratu za určité období, růst návštěvnosti, fanoušků na sociálních sítích či popularity v průzkumu veřejného mínění atd.

Kdysi snad provozovateli webu mohlo stačit vložit na stránku nějaké obrázkové počítadlo návštěvnosti a hypnotizovat rychlost jeho poskakování, případně se občas podívat do logů webového serveru a snažit se z nich vyvěštit nějaké relevantní informace. Dnes už si s podobně primitivními nástroji nevystačí ani průměrná food blogerka a nároky na analytické informace jsou vysoké. A nikoli bezdůvodně.

Web a vše, co se na něm děje, je ve skutečnosti neviditelné, neslyšné a nehmatné. Webová analytika nám poskytuje smysly, kterými můžeme web vnímat a sledovat, bez ní jsme slepí a chromí.

Webová analytika postupně vyrostla do samostatného, složitého a obsáhlého oboru. Mně osobně webový analytik v mnohém připomíná jaderného fyzika: oba studují stejně neviditelný a neuchopitelný svět. Pozorují, popisují, a dokonce ovlivňují děje, které nelze přímo vidět, odkázáni pouze na propracovanou teorii a jejím prostřednictvím interpretované údaje z měřicích přístrojů. Takový elektron nebo kvark nemůžeme vidět. Máme k dispozici jen sadu teorií a z nich vypracované závěry, z nichž plyne, že pokud se v oblasti X objeví částice Y, přístroj Z na to zareaguje a ručička na ukazateli udělá tydlitydli. A musíme věřit, že to znamená, že jsme právě „viděli elektron“ — prostě proto, že jinou možnost ani nemáme.

Takový web je na tom podobně. Jsou to jen data, nuly a jedničky, změny signálů v drátech omotaných kolem celé zeměkoule. Nikdo přímo nevidí jeho návštěvníky a nemůže pozorovat jejich chování, můžeme se jej pouze snažit odvozovat z naměřených dat a uložených útržků informací, které po sobě návštěvníci na serveru zanechají. Nikdo neví, zda si právě odeslanou stránku z našeho e-shopu vyžádal děda Josef, který má dobrý přehled v konkurenční nabídce, a vyhodnotil námi nabízený produkt jako v něčem nevýhodný. Nebo to byla blondýna Božena a stránku bez čtení zavřela, protože zrovna volala Jarča a musely probrat jejího nového kluka. Anebo zda to byla paní Magda, kterou nabídka velmi zaujala, uložila si ji do záložek a vrátí se k nákupu za týden, hned po výplatě. Dokážeme zjistit jen to, že jakýsi návštěvník stránku načetl a po 37 sekundách web opustil, aniž provedl nějakou požadovanou akci.

Nikdo neví přesně, co, jak a proč dotyčný na webu dělal. Umíme zjistit jen to, že tam někdo byl, provedl cosi a že nějaká ručička udělala tydlitydli. Moderní webová analytika ale umí stopy po chování návštěvníků měřit všemi dostupnými prostředky a taky se je učí čím dál lépe interpretovat. S pomocí statistiky, sociologických průzkumů a porovnávání trendů a zkušeností mezi mnoha relevantními zdroji po celém světě, ale i díky správnému propojování zdánlivě nesouvisejících dat a různých vstupů dokáže dobrý analytik říci nejen to, že v 9:06:22.376Zulu došlo k tydlitydli v sektoru alfa delta kappa, ale také částečně popsat návštěvníka a rekonstruovat jeho chování. Že je nejspíš z Londýna, ale hodně cestuje, má nejnovější značkový notebook a čerstvou verzi prohlížeče, že přišel z toho a toho vyhledávače s použitím takové a takové hledané fráze, že na webu prošel sekvencí čtyř stránek (přičemž na třetí v pořadí se na delší dobu zdržel), že používá Facebook a hodně nakupuje; v nejsofistikovanějších případech dokonce i to, kudy po které stránce pohyboval kurzorem, kde se zarazil, kam kliknul váhavě a kam s jistotou…

Webová analytika není jen nejdůležitějším zdrojem informací o fungování webu. Je to zdroj jediný.

Nepodceňujme analytiku a pravidla pro její budoucí použití nastavme už v samém začátku. A to i když klient o žádná data návštěvnosti zdánlivě nestojí a jedinou metrikou úspěšnosti mu má být zvýšení obratu e-shopu. Dříve nebo později se určitě začne zajímat o to, jak růst víc a lépe, a to bez co nejpřesnějších informací o návštěvnících a jejich chování nejde.

Pozn.: Myšlenku, že bychom v dnešní době spustili web nebo jen jedinou stránku bez jakéhokoli měřicího kódu s tím, že o nějaké analýzy zde nikdo nestojí a vážně nebudou potřeba, určitě pusťme z hlavy. Není-li měření potřeba dnes, bude potřeba třeba za rok, za pět let. Třeba pro zjištění, proč a jak projekt zašel na úbytě, nebo až web převezme do správy někdo, kdo o podobné analýzy naopak velmi stojí. A co největší objem historických dat, nejlépe několik let zpětně, je pro webovou analýzu nedocenitelný.

Jasně do zadání projektu napišme, jaké měřicí nástroje mají být na webu nasazeny, v jaké formě a v jaké míře budou použity, kdo a jak bude výsledky měření analyzovat a zpracovávat. Bude výkon webu sledovat klient sám, nebo si plánuje najmout profesionální analytické služby? A především, jaké údaje jsou klíčové, co se bude sledovat nejbedlivěji a jaká hodnota se má primárně změnit: za jak dlouho a jak minimálně? To budou hlavní ukazatele funkčnosti webu, podle nich funkčnost webu budeme navrhovat a na ně se také budeme v budoucnu odvolávat.

Setkal jsem se se situací, kdy zadavatel trval na tom, že pro něj je klíčové zvýšení návštěvnosti minimálně o 200 % během tří měsíců, ber kde ber, kvalita a složení návštěvníků ho vůbec nezajímá. Trval na tom, nic o cílových skupinách a relevantních návštěvnících nechtěl slyšet — a když pak marketingové nástroje dokázaly návštěvnost skutečně několikanásobně (dokonce poměrně levně) zvýšit a ukázalo se, že pro klientovy potřeby je složení návštěvníků skutečně dost nevhodné a nedokáže z jejich návštěv vytvořit ani minimální konverzi, byl velmi rozčarován. Věřil, že dokáže jakéhokoli návštěvníka zužitkovat a nalákat na své služby, ale nebylo to tak. Návštěvníci zkrátka nebyli jeho cílovou skupinou, jejich potřeby se s jeho webem vůbec nepotkávaly a chodili na něj ve skutečnosti kvůli něčemu úplně jinému. Jedinou požadovanou metrikou ve smlouvě ale byl absolutní nárůst unikátních návštěvníků o 200 % oproti stávajícímu stavu, nic jiného si klient nepřál a realizační firma byla z obliga.

I v případě, že je klient maximálně spokojený s tím, že nový web prostě bude jenom hezčí a bude se líbit sekretářce Marušce a to všem postačí k maximální spokojenosti, upřímně doporučuji do zadání výslovně napsat, že účinnost webu nebude hodnocena v žádném parametru a zadavatel neočekává žádnou měřitelnou změnu fungování webu (a na webu stejně potichu zapnout aspoň nějaký základní měřicí nástroj).

Žádné zadání webu by se tedy v tomto kroku nemělo obejít bez jasné a srozumitelné specifikace parametrů, co se od webu — z hlediska měřitelných údajů — očekává, jak se to změří a v jakých časových horizontech se změny mají udát. Včetně toho, že se neočekává nic a žádná měřitelná změna není vyžadována. Doporučuji dát si záležet a mít to v zadání opravdu zřetelně napsáno a klientem podepsáno (viz dále). Na jedné straně tím rozhodně nic nezkazíte a na straně druhé to může zachránit nejeden designérský krk.

Technické specifikace

Důležitou součástí našeho rozšířeného zadání webového projektu musí být také technické specifikace. Sepíšeme sem všechny technické parametry, které jsou do této chvíle již známy nebo které si aspoň myslíme, že pro web mají být právě takto nastaveny. Máme stále dostatečný prostor o všech technických otázkách diskutovat jak s klientem, tak se svými specialisty (příp. se zástupci třetích stran, které se mají na projektu spolupodílet), náš klient bude mít možnost všechny tyto specifikace připomínkovat, doplňovat a měnit. Ale poté, co se s ním na znění podrobného zadání dohodneme a bude podepsáno, máme v ruce závazný soupis parametrů, na které se lze v případě nesrovnalostí odvolat.

Až vám bude volat rozlícený Pan Ředitel, že chtěl předvést jejich nový úžasný web své tchýni a děsně se ztrapnil, protože v jejím stařičkém Exploreru 5 web vypadá úplně jinak a místo vymazlené grafiky a plynulých animací se zobrazil jen holý text — pak zadání s výslovnou specifikací plně podporovaných prohlížečů jako když najdete.

Technické specifikace a limity jsou na webovém projektu v podstatě trojí, vyplývající z požadavků tří zúčastněných stran:

požadavky a technická omezení cílové skupiny

limity a omezení na straně dodavatele vyplývající z dohodnutého technického řešení

potřeby a omezení klienta plynoucí z provozování webu, tržní situace a legislativy

Nejširší záběr parametrů s největší variabilitou určuje cílová skupina, budoucí uživatelé. Zde je prakticky jen na rozhodutí našem a našeho klienta, jak se příslušné atributy nastaví, co uživatelům dopřejeme a co nikoli. Pole působnosti je zde velké a vnější omezení zde nemáme skoro žádná (až na ta, která se týkají zbývajících dvou skupin). O to víc je ale pro funkčnost a úspěch výsledného webu důležité tyto volitelné parametry nastavit pokud možno optimálně. U každého z nich musíme dobře balancovat mezi přínosem a komfortem pro klienta a mezi cenou a technickou náročností realizace a provozními náklady.

„Zlatá střední cesta“ je prastaré, ale dobré pravidlo, kterým zde nic nezkazíme.

Každopádně, máme-li určenu cílovou skupinu (a tu bychom v této chvíli již měli mít perfektně ujasněnou a popsanou), měli bychom se snažit v maximální míře respektovat všechny její technické požadavky a omezení. O to více ale můžeme zredukovat a ořezat vše, co naší cílové skupině neslouží. Mnoho webů obsahuje spoustu líbivých a vesměs neužitečných věcí, které často potěší oko a srdce všech, kteří webu nepřinášejí prakticky žádný profit — zatímco těm podstatným, o které jde klientovi především, je jejich existence v podstatě ukradená a bez nich by web fungoval stejně dobře (a třeba snáze a levněji). Někdy to vyžaduje dost odvahy a zdravého cynismu, ale rozdíl v náročnosti a úspoře nákladů může být značný.

Pozn.: Existuje zde jedna důležitá výjimka, která může (ale také nemusí) hrát podstatnou roli. A tou jsou tzv. opinion makeři, tedy budoucí uživatelé, kteří sice nejsou součástí žádné cílové skupiny, ale jejich názor může mít dostatečnou sílu ovlivnit mínění veřejnosti a potažmo i uživatelů z cílových skupin. Média, kritici, oboroví blogeři, celebrity atd. Otázka, zda tuto skupinu v návrhu webu nějak zohledňovat, stojí vždy za poctivé a upřímné zvážení. Nakonec je to vždy pouze na rozhodnutí našeho klienta, ale je naší povinností jej na to upozornit a zmínit případná pro a proti. Možné negativní recenze a kritiky dokáží někdy významně ublížit i jinak velmi vitálnímu projektu — ale stejně tak vůči nim může být naprosto imunní a dobře prosperovat bez ohledu na to, jak mocnou síru opovržení na něj zdálky dští kavárenští intelektuálové. Záleží jen na sebevědomí klienta a jeho víře v navržený obchodní model. Jisté riziko zde ale bude vždy a je chybou jej přehlížet a ignorovat.

Rozhodněme se včas a narovinu, zda se budeme snažit podlézat kritikům a médiím, nebo půjdeme s návrhem čistě po funkčnosti a efektu.

Jednoznačně nejpodstatnější je v této části rozhodnutí o množině podporovaných zařízení, která budou naši budoucí uživatelé s naším webem používat. Zde velmi záleží právě na cílové skupině a cílovém trhu a odpověď nelze nijak generalizovat. Můžeme narazit na velmi specifické trhy, kde je extrémně netypická skladba popularity prohlížečů — existují regiony a cílové skupiny, kde je stále zdaleka nejpoužívanějším prohlížečem Opera, jsou oblasti (hlavně v korporátní sféře), kde je stále silné zastoupení starých verzí prohlížečů, které se obecně považují za vyhynulé a skoro nikdo je už běžně nepodporuje. Jsou cílové skupiny, kde stojí majorita návštěvnosti na mobilních zařízeních, jsou projekty, kde lze očekávat velkou návštěvnost z chytrých televizí a herních konzolí, jsou weby určené výhradně pro korporátní stolní počítače a mobilní zařízení je skoro zbytečné nějak podporovat atd.

U konkrétních webů se můžou oblíbené verze prohlížečů, typy zařízení, platformy i oblíbenost operačních systémů zásadně lišit. Tyto vstupy musíme dobře zvážit a správně nastavit, které z nich a do jaké míry budeme podporovat a jakou zvolíme strategii pro ty ostatní. Podrobněji se tomu budeme věnovat v některé z následujících kapitol. Každopádně stejně jako máme vymezené typické postavy cílových uživatelů a budeme si pro ně vytvářet uživatelské scénáře, je velmi vhodné vytvořit si paralelně i obdobné „technické cílové skupiny“ a samostatné scénáře i pro ně. Tyto technické skupiny vůbec nemusejí kopírovat skutečné cílové skupiny, mohou se s nimi různě prolínat a překrývat — je ostatně celkem logické, že typičtí uživatelé děda Josef a blondýna Božena se mohou oba shodně překrývat jak s cílovou skupinou stolní počítač na rychlém připojení, tak i se skupinou smartphone s pomalým připojením a omezeným objemem dat. Ostatně pro oba typy cílových skupin ve finále budeme na webu testovat úplně jiné věci a je nanejvýš vhodné s nimi pracovat samostatně.

Stejně jako máme tři postavy typických uživatelů, nadefinujme si i tři typická zařízení a prostředky, které budou uživatelé nejspíše používat.

Kromě soupisu podporovaných (a nepodporovaných) prohlížečů, platforem, operačních systémů a typů zařízení (a definování strategií, jak zacházet s těmi ostatními), si zkusme vzpomenout na všechny další technické detaily, které se našeho webu mohou týkat a má smysl jejich možným hodnotám nějak určit míru podpory. Patří sem obvyklá rychlost připojení a s tím související objem dat a multimédií, velikosti obrázků, nastavení cachování, načítání knihoven z veřejných serverů (CDN); použití různých pluginů a použití jejich alternativ (Flash, Java, 3D grafika atd.).

Pohled dodavatele a soupis jeho technických požadavků a omezení je trochu jiný. Zde musíme zohlednit především složitost realizace a technickou náročnost, tedy balancovat poměr cena/výkon. Obecně lze říci, že vytvořit lze prakticky cokoli, co si my nebo klient vymyslíme — ale jsou funkce levné a taky takové, co budou ve výsledku stát miliony. Správně a v ideálním případě by nám naši specialisté neměli nikdy říkat to nejde, to nepůjde, ale pouze to bude stát tolik a pokud to chcete tímhle způsobem, bude to stát desetkrát víc a bude to trvat o tři měsíce déle. A stejně bychom měli tyto parametry prezentovat k výběru a schválení klientovi: vkládání videí z YouTube je v ceně, vlastní řešení pro streamování videa vás bude stát 300 tisíc navíc.

Do této části patří také rozhodnutí o všech podstatných softwarových a hardwarových řešeních, která chceme použít a která nějak významně ovlivní ať už fungování, nebo cenu webu. Měli bychom už v této chvíli zhruba vědět, jaké publikační systémy nebo frameworky se ke stavbě webu použijí (alepoň na úrovni standardní/bezplatné nebo speciální/zakázkové řešení), zda a kolik bude potřeba zaplatit za speciální doplňky a moduly, zda a jaké databáze bude potřeba používat, kde a u koho budou provozovány servery, nakolik má být řešení škálovatelné, jaká cizí API a služby třetích stran budou používány a v jakém režimu atd.

Nesmíme zapomenout ani na otázku poskytování vlastních dat třetím stranám. Bude web nabízet obsah v nějakých veřejných publikačních formátech (např. RSS), bude poskytovat data prostřednictvím vlastního datového rozhraní (API) a za jakých podmínek? Debaty o API mohou být poněkud kontroverzní — počítejme s tím, že méně znalí klienti se představě poskytování svých dat obvykle úzkostlivě brání, i když mnohdy z toho mohou ve výsledku profitovat a neposkytnutí veřejného API může být i významnou konkurenční nevýhodou. Pokud máme pocit, že je to smysluplné, je naší povinností klientovi tuto možnost navrhnout a vysvětlit její možné přínosy a rizika.

Vždy zvažme možnost poskytování obsahu a služeb webu i v jiných formátech.

A konečně musíme do soupisu technických specifikací zahrnout i všechny individuální požadavky klienta. Občas se setkáme se zvláštními potřebami a zvyklostmi jeho trhu (nestandardní formáty pro výměnu dat, neobvyklé místní či historické zvyklosti apod.), které musíme respektovat. Mnohdy se bude jednat o různá legislativní a oborová omezení: přizpůsobení výstupu či chování webu různým vyhláškám a zákonům, autorským a patentovým předpisům, smluvním vztahům a závazkům klienta, oborovým normám a průmyslovým standardům (normy ISO, státní normy), musíme zohlednit případné zvýšené nároky na přístupnost a použitelnost (standardy WCAG nebo Blindfriendly Web hlavně u webů úřadů a institucí apod.). Tyto požadavky jsou obvykle jednoznačně dané a musíme se jim bezpodmínečně podřídit. O to pečlivěji musíme všechny tyto požadavky výslovně a podrobně do technických specifikací v zadání sepsat.

Malá praktická vsuvka o komerci a karmě

Nyní nás čeká do zadání připravit i typické uživatelské scénáře, kterým se má výsledný web podřizovat a plnit je. Ty jsou sice součástí zadání projektu, nicméně tohle je už skutečný, opravdový design, skutečně už zde cosi konkrétního navrhujeme a vymýšlíme — a navíc je to jedna z nejpodstatnějších částí celého návrhu. Někdo proto podobné relativně důležité položky do zadání ani nesepisuje, neboť je (zcela správně) považuje za součást řešení. Může to mít své rozumné důvody: jednak nemusí jednoduše chtít dávat klientovi tolik informací příliš brzo, jednak může za určitých okolností hrozit, že méně korektní klient s dostatkem fundovaných podkladů z projektu vycouvá bez zaplacení finální částky za návrh a dobře připravené zadání si nechá zpracovat jinde. Což se samozřejmě u našich solidních klientů nikdy nestává — a samozřejmě se to v praxi stalo skoro každému…

Jak si ale řekneme za chvíli, já jsem si zvykl (právě z podobných důvodů) podrobné zadání projektu považovat za součást řešení a klientovi je poskytuji k jednání a schválení až po podpisu smlouvy nebo alespoň po sjednání náležité částky za úvodní zpracování projektu (skicovné), pokrývající skutečné náklady a odvedenou práci. Projděte si předchozí kapitoly a spočtěte si, kolik hodin už jste přípravou tohoto projektu strávili a kolik vlastní invence už do něj vkládáte. Žádný slušný podnikatel nebude očekávat, že pro něj budete dělat něco zadarmo. A pokud ano, časem nejspíš zjistíte, že té muziky za málo peněz má být čím dál víc, máte „v ceně“ udělat navíc tamto a ono a nakonec si budete přát do takového projektu bývat vůbec nikdy nenastoupit. Byl jsem v téhle situaci několikrát a už jsem se trochu naučil podobné varovné příznaky odhalovat v co nejranějších fázích a raději zavčasu z takové zakázky vycouvat.

Nikdy žádnou část komerční zakázky nedělám zadarmo, obvykle se to nevyplatí.

Mluvím ovšem o komerčních zakázkách, o působení v rámci standardní nabídky a poptávky na trhu, o projektech, do nichž vstupujeme s cílem si na nich něco vydělat, odvést kvalitní práci za poctivé peníze. Ale vůbec tím nechci říct, že nikdo nemá dělat nikdy nic zadarmo. Naopak!

Osobně jsem během svých profesních zkušeností začal celkem věřit na karmu — udělal jsem během té spousty let spoustu věcí zadarmo a poskytl své služby a znalosti z dobré vůle tam, kde jsem věřil v dobrý cíl, a nemyslel si, že by mě těch pár těžce vypocených korun nějak zachránilo. A víte co? Ono se to vždycky neuvěřitelnou oklikou vrátí. Třeba za měsíc, třeba za pár let. Charita, dobrá vůle, pomoc bližnímu, to vše má své místo a nemyslím si, že je dobré se těmto věcem nějak programově vyhýbat. Ale rozhodně charita nepatří do byznysu. Klidně udělám web zadarmo pro školu, kde se učí mé děti, nebo dám k volnému užití knihovnu, kterou jsem naprogramoval. Ale v rámci komerční zakázky si poctivě naúčtuji každou hodinu své práce, kterou pro klientův prospěch investuji. Na nekomerčních projektech, kterých se chci účastnit, dělám zcela zdarma — na projektech komerčních nedělám z principu zdarma nikdy a nic. Dva světy, dvoje pravidla. Jejich dodržování se mi vyplatilo v obou případech.

A nyní zpět k přípravě detailního zadání našeho projektu.

Typické uživatelské scénáře

Uživatelské scénáře popisují cestu budoucího typického uživatele — neboli zástupné postavy z cílové skupiny, kterou jsme si pro usnadnění vytvořili už dříve — od vstupu na web po jeho opuštění, v místě a způsobem, které jsou pro klienta nejvíce žádoucí. Není naším úkolem navrhnout pouze tuto cestu od bodu A do bodu B, mnohem důležitějším (a často podceňovaným) krokem je také správné a reálné stanovení oněch dvou bodů. Protože on ani ten start, ani cíl nejsou vždy tak úplně jasné, jak by se mohlo zdát.

Cíl je obvykle ta snazší část. Každý klient má celkem jasno, kam potřebuje své návštěvníky dovést, co mají na jeho webu udělat: nakoupit výrobek, objednat službu, kliknout na dobře zacílenou reklamu, zapamatovat si značku atp. Ale začátek? Kde se přesně nachází? Laik — a mezi ně stále patří i mnoho zadavatelů — automaticky předpokládá, že začátkem je logicky úvodní, domovská stránka webu. To je vrchol logické struktury jeho webu a kde jinde by měl takový návštěvník začít…

Jenže už dávno není rok 1998, web není v plenkách a naši budoucí návštěvníci neopisují do prohlížeče adresu webu z vizitky. Ach ano, jistě jsou stále takoví a papírové vizitky se stále tisknou, o tom nikdo nepochybuje. Ale už to určitě není většina, ta rozhodující skupina, kterou náš klient na svůj web přiláká. Stále menší a menší procento návštěvníků zadává adresu webu do svého prohlížeče ručně — a stále více a více lidí se na weby dostává úplně jinými cestami. Už v roce 2003 to popsal Jeff Lash ve svém legendárním článku How did you get here? takto:

Lidé tvořící web většinou předpokládají, že návštěvníci vstoupí hlavními dveřmi (přes homepage) a obvyklým způsobem projdou přes halu, jídelnu a další chodbu do obývacího pokoje — zatímco ve skutečnosti většina z nich rozbije nějaké okno a vplíží se tam ze dvora a prorazí přitom díru do záchodové zdi.

Mezi profesionály v oboru se od té doby vžil obligátní příměr o vstupování na web „záchodovým okénkem“. To přirovnání je přitom docela přesné: má-li být web připodobněn k domu, není žádná jeho místnost, žádný kout, ani ten nejzastrčenější a nejzaprášenější, skryt očím veřejnosti a kdokoli do něj může vstoupit (nebo se rovnou probořit) v kterémkoli myslitelném i nemyslitelném místě. Příměr s domem se proto ukazuje poněkud nepřesným. Vhodnější je vnímat web spíše jako otevřenou krajinu — třeba přírodní park — který má možná sice v jednom konkrétním místě hlavní vstup s parkovištěm a informačním střediskem, na která se odkazuje v turistických průvodcích, ale do kterého také vede množství turistických tras ze všech možných směrů a kde se návštěvníci potulují po libosti, jak je právě osud přivál. A jenom někteří přijedou zrovna k hlavní bráně a vyzvednou si na informacích připravenou brožuru a orientační plánek.

Vždy přepodkládejme, že návštěvníci se octnou na webu kdekoli, nejen na homepage.

Opustíme-li příměry, znamená to v praxi, že kterýkoli návštěvník se může ocitnout na jakékoli stránce našeho webu, aniž v životě viděl jeho úvodní stranu. Přišel přes odkaz z vyhledávače, v reklamě, na sociálních sítích, na doporučení od přítele nebo náhodou a ocitl se na stránce nějakého článku, detailu konkrétního produktu, na páté straně seznamu položek kategorie třetí úrovně, na kontaktním formuláři technické podpory, v uživatelském fóru, kdekoli. Všechna místa musí designér považovat za možné startovní body a navrhnout web tak, aby odkudkoli vedla pohodlná a přehledně označená cesta k požadovanému cíli. A to jak k cíli finálnímu, tak k dílčím cílům na každé stránce, kterou po cestě navštíví.

Tyto dílčí cíle se obvykle skrývají pod magickou zkratkou CTA (Call to Action, neboli Výzva k akci), kterou se každý druhý marketingový specialista ohání jako zaklínadlem. A je to tak správně, dovést uživatele k tomuto bodu, přinutit jej k požadované akci, je vlastně cílem a podstatou i celého našeho snažení. Když to celé hodně zjednodušíme, o nic jiného nám — a klientovi především — ani nejde.

Čistě pragmaticky každou stránku komerčního webu tvoří CTA a zbytek je jen omáčka.

Tento — pro někoho možná příliš cynický — pohled je pro nás coby designéry ale velice užitečný, protože nám velmi přesně a pro naši práci nesmírně přínosně vymezuje ony dva rozdílné světy, o nichž jsme se v této knize už tolikrát zmínili. Z pohledu klienta je taková stránka webu jen nástrojem pro naplnění jeho záměrů, které zde reprezentují právě CTA. A vše ostatní kolem je pro něj víceméně nepodstatná výplň, jejímž jediným účelem je k nim uživatele směrovat a přimět je příslušnou akci provést. V podstatě mu nemusí až tak moc záležet na tom, jaká ta výplň bude a jak bude vypadat, hlavní je, jestli bude fungovat a uživatele k CTA správně nasměruje. Z pohledu návštěvníků je to pak právě naopak: ti jsou zde primárně kvůli tomu obsahu, nějaké záměry provozovatele webu jsou jim upřímně ukradené a jakékoli přímé výzvy k akci budou ignorovat — ovšem jen dokud se nepotkají s jejich vlastními potřebami a záměry. Což je právě tou nejhlubší podstatou celé designérské práce: namíchat obsah, jeho formu a vzhled takovým způsobem, aby se na každé stránce potřeba uživatele z cílové skupiny a záměr klienta protly v jednom bodě — kterým je právě CTA.

Je to ten poslední a podstatný bod, kam chceme uživatele dovést a přimět jej, aby dotyčnou akci provedl. Ať už jí má být nákup produktu, konzumace poskytnuté reklamy nebo třeba sdílení informací o klientovi na sociálních sítích. Navrhujeme zde několik věcí současně:

jak má postup návštěvníka v ideálním případě vypadat

ověřujeme, zda je to v případě našich vzorových uživatelů reálné a očekávatelné

ověřujeme, zda bude reálné a v silách webu to zajistit

a následně pak teprve budeme navrhovat, jak toho konkrétně dosáhnout

První bod popisují právě zmíněné uživatelské scénáře, které povětšinou pracují s webem jako celkem. Zvažují nejtypičtější případy, kde a proč se uživatel na webu objeví, a definují jeho ideální cestu — přes jednotlivé CTA na jednotlivých stránkách — k finálnímu cíli. Další dva body pak souvisejí více s definováním zásad, principů a pravidel na jednotlivých stránkách, aby na nich čas a vzdálenost mezi vstupem a dosažením příslušné CTA byly minimální a efektivní. Nicméně i zde může být vhodné připravit dílčí uživatelské scénáře, hlavně pro vybrané hlavní a zásadní stránky nebo dílčí sekvence (např. samostatný scénář jen pro homepage, pro typický článek na webu, pro objednávkový proces v e-shopu atd.). Poslednímu bodu se naopak zatím snažíme vědomě a úmyslně vyhýbat. Praxe ukazuje, že předjímat v této fázi nějaká konkrétní řešení a pracovat s nápady na finální realizaci těch pravidel, která teprve tvoříme, bývá spíš zbytečnou brzdou a přílišným omezením. Měli bychom se držet v co nejobecnější rovině a návrh konkrétních řešení si nechat až na později. Všechny takové nápady si poznamenávejme stranou, později se nám budou hodit. Teď se nám ale hodí naopak co nejvíce stupňů volnosti, nechat si všechny dveře otevřené.

Scénáře jsou základním měřítkem pro budoucí obsah i formu stránek. Jakmile jsou dané, schválené a odsouhlasené, vše ostatní se jim musí podřizovat a budovat pro jejich účel a v jejich intencích. Co jim slouží, bude potřeba podporovat a posilovat. Co jim přímo neslouží, ale není na překážku, musíme upozadit a tlumit. A vše, co je s uživatelskými scénáři dokonce v rozporu, musí nemilosrdně pryč. I kdyby všichni kolem měli pocit, že to je ten úplně nejvíc nejlepší nápad.

Kolik jen nadějných projektů zabilo přidání „úžasných“ prvků a funkcí, které ve skutečnosti byly v přímém rozporu s jejich cíli…

Uživatelský scénář musí nabízet každé postavě co nejkratší a nejschůdnější cestu webem. Co nejpřímočařejší postup od příchodu na stránku po klientem kýženou CTA. Musí se sama nabízet, uživatel si ji musí sám chtít vybrat, musí být z jeho pohledu optimální. Ty základní scénáře by měly začínat už mimo náš web. Musíme vycházet z toho, co, proč a jak právě přišedší návštěvník udělal — nejen jak se na web dostal technicky, daleko víc nás zajímá jeho motivace a záměr.

Příklad uživatelského scénáře. Naše postava blondýna Božena si chce večer zajít s kamarádkou někam posedět a popovídat, zadá do vyhledávače kavárna Městečko. Zaujme ji odkaz, který ji přivede na homepage webu klientova podniku. Zde se musí nejprve zorientovat a ověřit si, že je zde správně: musí rychle najít informaci, že podnik se skutečně nachází v Městečku a že jde opravdu o kavárnu. Tato informace má být viditelně a hned na úvodní straně: Café Zrnko, Městečko (Boženě už se párkrát stalo, že si podobně našla restauraci nebo obchod a až dodatečně zjistila, že se nachází na opačném konci země, a byla z toho mrzutá). V dalším kroku se rozhoduje, jestli podnik vyhovuje její představě. Bude se chtít podívat, kdy má otevřeno, co nabízí, jak se tam dostane, jestli se jí tam bude líbit. Bude hledat především jasné a návodné odkazy (Menu, Otvírací doba, Jak se k nám dostanete), bude si chtít prohlédnout fotky interiéru i samotné budovy (aby ji zvenčí snadno poznala). Protože kavárna bývá večer plná, měla by si udělat rezervaci: web ji na to musí upozornit a náležitě důrazně jí nabídnout telefon, e-mail, příp. online formulář, kde si může stůl snadno zamluvit. (Rezervace je v případě restauračního zařízení nejběžnější CTA a všechno na webu k ní musí směřovat.) Jako podpůrné nástroje by pak web měl poskytovat informace o své unikátní nabídce (např. zákusky vlastní výroby od věhlasného cukráře), podporovat dojem vysoké profesionality (stránka o čerstvě pražené kávě a její pečlivé přípravě) a podporovat pocit příjemného a přátelského prostředí (fotografie majitelů a personálu, vyprávění o tradici rodinného podniku). Tato část webu má pomáhat plnit dlouhodobější cíl vytvoření stálé klientely, která se má do kavárny ráda a často vracet.

Varianta 1a. Vyhlášené zákusky z cukrářské dílny jsou na samostatných stránkách indexovaných vyhledávačem a jejich fotky se sdílejí na sociálních sítích. Uživatel se tak často ocitne na jejich produktové stránce, aniž by předtím navštívil homepage. Proto produktové stránky musí obsahovat základní informace o podniku, přehlednou navigaci na všechny ostatní části webu, aby se i z těchto návštěvníků mohli generovat budoucí hosté (nejlépe s rezervací). Ale protože cukrárna nabízí i zásilkovou službu, bude speciálně na stránkách produktů primární CTA na online objednávku. Ta bude pro uživatele, který přišel přímým odkazem právě sem, to nejpodstatnější. Je důležité zde náležitě upozornit na snadné objednání, zaručenou čerstvost, kvalitní (i dárkové) balení a rychlé doručení.

Je zřejmé, že uživatelské scénáře můžeme tvořit individuálně pro jednotlivé postavy naší cílové skupiny, může být jiný pro dědu Josefa, pro blondýnu Boženu a jiný pro paní Magdu — ale stejně tak mohou být scénáře společné pro všechny uživatele a bude naším úkolem pouze zajistit jejich funkčnost pro jednotlivé představitele cílových skupin, případně pro každou z nich doplnit jiné podpůrné pomůcky a marketingové nástroje. Záleží hlavně na tom, jak jsou na začátku naše cílové skupiny nadefinovány a jestli se liší v základních parametrech, které jsou pro daný scénář podstatné.

Typické technické scénáře

Vedle cílových skupin představujících konkrétní osoby bychom měli mít vždy připraveny také cílové skupiny představující různá technická řešení a omezení na straně uživatele. A také pro ně bychom si měli připravit samostatné technické scénáře, které nám budou důležitým vodítkem při návrhu webu. Jejich funkce se ale od uživatelských scénářů, o nichž jsme mluvili v předchozí kapitole, poněkud liší. Zatímco ty první zohledňují hlavně modely chování uživatelů, jejich potřeby a preference a podřizujeme jim obsah, vzhled a logiku webu, technické scénáře mají spíše funkci kontrolní a definují, zda a jak uživatel web bude vůbec schopen používat. Cílem zde není konkrétní CTA, ale celková přístupnost a použitelnost, zajištění funkčnosti webu za různých podmínek.

Z technických scénářů budeme potřebovat některé základní parametry pro samotný návrh rozhraní webu: obvyklé, minimální i maximální rozměry displeje a vlastnosti zobrazovacího média (velké okno na obrazovce počítače, malý displej mobilního zařízení, LCD displej, projektor či TV obrazovka apod.), způsob ovládání, jemuž se musí podřídit styl ovládacích prvků (myš, klávesnice, dotykové ovládání, ovladače chytré televize či herní konzole atp.) i parametry pro samotný obsah (možnost použití datově a výkonnostně náročné grafiky a multimédií, použitelnost netypických písem atd.). Ale kromě toho parametry technických scénářů (narozdíl od těch uživatelských) potřebují hlavně naši vývojáři, kteří budou web implementovat a technicky připravovat. Pro ně je to jeden z nejdůležitějších vstupů a zásadní informace, kterým se podřizuje volba všech technologií, frameworků i technických řešení, s jejichž pomocí bude web vytvořen.

V technických scénářích nepracujeme s fyzickými osobami a nevytváříme vzorové postavy. Bereme v úvahu primárně technické parametry a definujeme si typická zařízení a technické prostředky, které uživatelé pro návštěvu webu použijí. Zajímá nás, zda uživatel použije stolní či přenosný počítač, tablet, mobil nebo jiné zařízení. Zda bude relativně moderní, nebo spíše zastaralé. Zda bude web ovládat myší, klávesnicí, prstem na dotykové obrazovce nebo jinak. Jak velkou může mít obrazovku a jak kvalitní zobrazení bude poskytovat — což je důležité zejména později pro práci s barvami a kontrasty v grafickém návrhu (projektory nebo nekvalitní LCD displeje mají malý kontrast a příliš světlý obsah na nich téměř zmizí; naopak staré „vypálené“ monitory mohou mít kontrast příliš velký a tmavší plochy se slijí do jednolitého tmavého fleku). Zohledňujeme rychlost a kvalitu připojení, příp. i možné omezení objemu stahovaných dat a zvažujeme použití multimédií a nabízení jejich alternativ pro různé typy zařízení a různou kvalitu připojení. Zvažujeme dostupnost všemožných moderních a módních technologií a míru jejich nasazení — nejnovější, nebo starší, ale kompatibilnější verze frameworků, pokročilé vlastnosti CSS či HTML, animace, vložené fonty, vektorová grafika — i možnost použití různých pluginů (Flash, Java, 3D objekty atd.).

Zapátrejme v paměti a vzpomeňme si na nejotřesnější počítač či starý mobil, na kterém jsme v posledních letech viděli někoho používat internet. Může ho mít někdo z naší cílové skupiny?

Nezbytnou — a v krajním případě aspoň tou jedinou — položkou technických scénářů musí být také negativní vymezení. Tedy specifikace zařízení a technických limitů, které už prostě nebudeme podporovat. Je důležité ho zde mít vždy, nikdo už nedokáže podporovat všechna historická a obskurní zařízení a prohlížeče, které se od vzniku webu objevily, takže nějakou hranici musíme stanovit pokaždé. Jako samozřejmou součást tohoto vymezení pak musíme určit dva zásadní technologické řezy, tedy specifikovat zařízení, verze prohlížečů a další technické parametry, které:

nebudeme podporovat vůbec — tj. uživateli se zobrazí infomace o tom, že jeho zařízení není podporováno, nebo mu prostě web nebude fungovat

budeme podporovat jen částečně, s určitými omezeními — uživatel bude mít např. méně komfortní rozhraní, zjednodušenou grafiku apod., ale ke sdělovaným informacím se dostane

V ideálním případě by měl být první řez téměř prázdný (resp. bude obsahovat jen naprosté extrémy) a většinu nepodporovaných skupin proměníme ve skupinu druhou — která dostane třeba jen holé HTML, ale zůstane jí alespoň minimalistický přístup k obsahu a příslušná CTA bude dosažitelná. Postupům, které se k tomu využívají, především technikám nazývaným graceful degradation a progressive enhancement, se dále věnujeme v jedné z dalších kapitol.

Rozhodnutí typu „IE7 a starší podporovat nebudeme“ je zde naprosto klíčové.

Pozn. Pochopitelně, jak se každý zkušený kodér určitě hned chystá namítat, už se nesnažíme testovat a rozlišovat prohlížeče podle typu, názvu a čísla verze, ale spíše podle míry podpory funkcí, které web k svému chodu vyžaduje. Po poměrně krátkém období koncem první dekády 21. století, kdy se výrobci hlavních prohlížečů konečně jakž takž shodli na určitých standardech a vypadalo to, že skončila někdejší nepřehledná skrumáž stovek různých prohlížečů a jejich verzí s různými libůstkami a známými chybami — o kterých se psaly samostatné knihy, pro něž existovaly specializované weby a kdy se každý kodér pyšnil vlastní sadou vychytaných triků a obezliček, aby je obešel a zajistil fungování webu v maximální množině zařízení — se rázem a neočekávaně vyrojila úplně nová, ještě nepřehlednější skupina prohlížečů a zařízení na dříve neexistujících platformách: mobilních zařízeních, herních konzolích, chytrých televizích apod. Zdálo by se, že jsme zase tam, kde jsme byli. Jenže ačkoli celkové množství zařízení a verzí prohlížečů na trhu je mnohem větší než kdykoli předtím, je situace ve výsledku mnohem lepší — a to hlavně v tom, že všechna ta zařízení jsou ve skutečnosti všechna postavena jen na dvou třech základních vykreslovacích strojích, které zpracovávají obsah stránek v podstatě stejně (halelujá!). Liší se tak jen v detailech a hlavně v míře podporovaných funkcí, způsobem zobrazení a ovládání. Dnes již tedy nepotřebujeme rozlišovat, zda web běží na počítači s prohlížečem IE5 nebo Netscape 2.x a řešit, jak který z nich zpracuje kterou HTML konstrukci použitou ve stránce, a nemusíme pro každý z nich větvit kód a podsouvat mu jeho speciální verzi. Můžeme se poměrně dobře spolehnout na to, že stejnou věc zpracují všechny prohlížeče víceméně stejně a budou se lišit pouze v tom, jak ji budou prezentovat s ohledem na dostupné technické prostředky — velikost displeje, podporu Flashe nebo dotykové ovládání. To je pro kodéry obrovská úleva a především příležitost pro stále intenzivnější používání hotových řešení, předpřipravených knihoven a univerzálních frameworků.

Soupis technologických scénářů by měl mít tedy nejméně tři položky — raději ale aspoň čtyři, když rozdělíme typické uživatele na ty, kteří používají počítač, a na ty s nějakým mobilním zařízením. Uveďme si takový běžný příklad:

Typický uživatel s počítačem — bude plně podporováno. Používá relativně moderní prohlížeč (IE10+ nebo běžný Chrome, Safari, Firefox či Operu), zobrazitelná velikost stránky je nejméně X×Y pixelů, ovládání myší nebo trackpadem. Má rychlé připojení bez výrazných omezení na datový tok a objem, umí zobrazit Flash a video. Podporuje webová písma a vektorovou grafiku i nejpoužívanější multimediální technologie. Všechny funkce webu jsou dostupné a zobrazené v navrženém grafickém designu. Pozn.: Nutná je plná podpora prohlížeče IE10, který má stále silné zastoupení v cílové skupině.

Typický uživatel s chytrým telefonem/tabletem — bude plně podporováno. Používá poměrně moderní zařízení, podporuje moderní technologie HTML, CSS a Javascriptu včetně animací a webových fontů. Multimédia mohou být pro něj datově náročná, proto se odesílají pouze na vyžádání. Nepodporuje Flash ani Javu. Ovládání je dotykové a displej menší, typicky vertikálně orientovaný. Všechny funkce webu jsou dostupné, design může být zjednodušený a přizpůsobený menší obrazovce. Pro šířku stránky menší než X pixelů se používá responzivní řešení a třísloupcový obsah stránky se přeskládá do dvousloupcového (až do Y pixelů) a pro stránky menší než Z pixelů do jednosloupcového uspořádání.

Uživatelé s prohlížeči minulé generace, IE 7 až 9 nebo starší verze jiných běžných prohlížečů a prohlížeče bez podpory Javascriptu — bude částečně podporováno. Tato skupina bude schopna zobrazit veškerý podstatný obsah webu alepoň v alternativní podobě a uživatel musí dosáhnout na všechny klíčové CTA.

Uživatelé s prohlížeči staršími než IE7 a jinými méně běžnými prohlížeči — nebudeme podporovat. Po načtení stránky musí proběhnout test na podporu boxmodelu, fixního pozicování a vytvoření canvasu, a pokud prohlížeč nevyhovuje, zobrazí se uživateli zpráva, že web pro jeho zařízení není podporován.

Nějak takto podobně — pochopitelně v mnoha rozličných variantách — by měly být definovány naše technické scénáře. Jejich cílem je jednak poskytnout vstupní informace pro samotný design webu i pro jeho implementaci, jednak budou sloužit jako kontrolní seznam pro budoucí testování a ověřování funkčnosti. Tak, jak si zde technické scénáře nadefinujeme, musí ve výsledku web pro jednotlivá typická zařízení fungovat a během vývoje se musí neustále testovat a ověřovat proti tomuto zadání.

Zkouška rovnice

Před dokončením zadání a jeho předložením zadavateli ke konzultaci, či dokonce schválení musíme nejprve provést jeho kontrolu. Ověření. Zkoušku, zda předložené řešení už v hrubých obrysech vyhovuje původní požadované rovnici. Matematicky řečeno, jde vlastně o soustavu dvou rovnic, neboť jsme postupně dospěli k tomu, že s tou základní, uživatelsko-zadavatelskou si vlastně nevystačíme. Přinejmenším musí jak výsledné řešení, tak již samotné zadání vyhovovat dvěma vztahům současně:

zájmy klienta se potkávají s potřebami cílové skupiny

funkce webu odpovídají technickým parametrům zařízení na straně uživatelů

Jinými slovy, dosadíme-li do uživatelského scénáře personu představující typickou postavu z cílové skupiny a současně dosadíme-li do technického scénáře typické zařízení, bude to fungovat? Tedy uspokojí uživatel svoje potřeby a zároveň naplní klientovy cíle? A dokáže přitom uživatel zobrazit a používat web takovým způsobem, jak si on i klient představují?

Tyto parametry musíme během tvorby webu neustále prověřovat a musíme je také ověřit už na samém začátku, na úrovni samotného zadání. Velká spousta chyb vzniká totiž právě zde. U mnoha nefunkčních webů po důkladné analýze můžeme zjistit, že nejspíš už samotné zadání bylo špatně definováno. Že ač byl web možná zpracován velmi precizně, kreativně a půvabně, přesně podle zadání, tak přesto nefunguje — a to právě proto, že mohl existovat určitý zásadní rozpor už na úrovni vstupních informací a nikdo si jej nevšiml. V zadání se mohly objevily požadavky, které:

šly na ruku zájmům klienta, ale byly v rozporu s potřebami uživatelů

perfektně vyhovovaly uživatelům, ale šly proti konečným záměrům zadavatele

významné množství uživatelů nedokázalo využít potenciál webu dostupný jen vybrané skupině

Projděme si proto v této fázi všechny informace, které máme o klientovi a jeho cílech (zaměření firmy, tržní prostředí, konkurence, záměry, dlouhodobé plány) a o potenciálních klientech (cílové skupiny, typické postavy, tržní niky) a pečlivě je porovnejme s tím, co jsme zatím o budoucím webu sepsali. Porovnejme své představy o budoucím řešení a jeho předpokládanou technickou náročnost s předpokládanými typickými zařízeními a jejich možnostmi. Budou si uživatelé schopni prohlížet produktová videa? A budou si je vůbec chtít a moci pouštět? Budou pro ně zamýšlené reklamní formáty únosné? Neodradí je do té míry, že půjdou raději jinam, nebo si dokonce nainstalují blokovač reklam? Budou pro ně platební kanály snadno použitelné, platební modely akceptovatelné? Nebude typický uživatel používat mobilní zařízení a zobrazené stránky pro něj budou příliš velké a budou se neúnosně dlouho načítat? Pokud se nasadí ona děsně cool moderní technologie, o které právě všichni mluví, neprodělá na tom klient i kalhoty?

Ověřme si, že zadání odpovídá očekáváním z perspektivy zadavatele i možných uživatelů.

V tomto momentě přichází také chvíle pro naše první velké funkcionalistické řezání — kterých bude (nebo by aspoň mělo být) během vývoje ještě spousta. Je naší úlohou, a dokonce naší povinností v této fázi návrhu poctivě a bez zbytečných emocí (a proto nemilosrdně) ořezat z návrhu všechny zbytečnosti. Veškerý budoucí design, líbivé funkce a zbytečné ozdoby nesmí jít proti podstatě a funkčnosti webu. Cokoli, co nepodporuje snadné používání webu, co ztěžuje průchod typickými scénáři, musí nekompromisně pryč.

Někdy je velmi těžké se loučit se všemi těmi skvělými nápady, které se zpočátku zdály být skvělé a měly možná být i zlatým hřebem celého webu. Ale pokud je naše zkouška správnosti označí za chybné, nebo dokonce kontraproduktivní, musíme najít sílu je odstranit nebo aspoň nahradit něčím vhodnějším. Funkčnost a správnost zkoušky je podstatnější než jakékoli osobní dojmy a pocity, než vkus náš a našeho klienta. Musíme se podřídit funkci.

Rozhodování líbí/nelíbí je v designu irelevantní.

Každá věc se vždy někomu líbí a někomu nelíbí. A v designu především se nějakou líbivostí nesmíme nechat zmást. Velmi často se vkus našeho klienta (dokonce i náš) může se vkusem cílové skupiny rozcházet, a to i velmi zásadně. Jenže vkus budoucích uživatelů je pro výsledek naprosto rozhodující a skutečnost, že se něco líbí či nelíbí nám nebo zadavateli, nesmí hrát žádnou roli — pokud je to v rozporu s tím, co se líbí/nelíbí potenciální cílové skupině.

Je nezbytné oprostit se zde od emocí. Jde-li nám o efektivitu a profit, vždy a zásadně v designu musíme pracovat jenom se vkusem, zájmy a požadavky cílové skupiny — a nikoli se vkusem svým či našeho klienta. Ostatně jednou z nejtěžších úloh každého designéra je vysvětlovat klientovi, že chápeme, že ti růžoví poníci se jemu (a nám už teprve) vůbec nelíbí a jsou nám vlastně i docela odporní, ale že jsme si přitom jisti, že cílová skupina Blondýna Božena na ně klikne a uskuteční nákup o 400 % víc, než kdyby tam byly ty sofistikované mondrianovské vzory, ze kterých jsme oba naprosto unešeni…

Odstraňování nevhodných „dobrých nápadů“ ze zadání je velmi těžký úkol.

Pokud jsme si jisti, že naše podrobné zadání již dobře popisuje skutečné záměry klienta (a eliminovalo ty domnělé), definuje dobře cílovou skupinu a její potřeby, pečlivě specifikuje technické prostředky očekávaných uživatelů a pro klienta únosné možnosti budoucího webu — a žádné z těchto parametrů nejsou navzájem v rozporu — můžeme zadání předložit klientovi ke schválení. V opačném případě, nebo máme-li o některé součásti jen vážné pochybnosti, projděme si načrtnuté specifikace znovu a znovu a zkusme najít položky, které můžeme změnit či odstranit a zadání správně vybalancovat. Nebojme se jít na samu dřeň a podstatu někdejšího domnělého zadání: nejsou výjimkou případy, kdy klient původně poptává vytvoření složitého e-shopu, a přitom ideálním řešením jeho problému se ukáže jen cílené rozesílání čtvrtletního newsletteru. Nebo naopak…

Nebojme se uživateli nabídnout i řešení, které podle našeho nejlepšího přesvědčení řeší jeho skutečné potřeby i úplně jinak, než byly jeho původní požadavky. Vraťme se o pár kapitol zpět a vzpomeňme si na projektovou mezeru a na to, jak málo sice třeba víme o klientově byznysu, ale jak málo zase on možná vidí do problematiky online obchodování. Nebojme se přijít s něčím úplně jiným, než klient — možná ve své neznalosti oboru — původně požadoval, pokud jsme přesvědčeni, že naše řešení může mnohem lépe vyhovovat zadání oněch počátečních rovnic. Pokud bude trvat na svém, pokud i přes naše odborné a fundované argumenty bude požadovat realizaci své původní představy, samozřejmě mu vyhovíme. Ale je naší povinností nabídnout mu i jiné možnosti, než si vůbec dokázal na začátku představit, pakliže je sami objevíme a věříme v jejich větší životaschopnost. Nebojme se původní klientovy představy dokonce zcela ignorovat a nabídnout mu i úplně odlišné řešení, když najdeme takové, které vyhoví jeho skutečným (a třeba nevyřčeným) záměrům lépe než ona laická představa, s níž za námi původně přišel. Pokud náš návrh vyhoví všem požadovaným rovnicím nejlépe, je naší povinností jej klientovi nejen nabídnout, ale i vysvětlit a pokusit se ho přesvědčit o jeho výhodách a přínosech.

Schválení zadání klientem

Máme-li konečně pohromadě všechny specifikace projektu a sami u nich vnitřně cítíme soulad ve všech parametrech a shodu mezi tím, co považujeme za skutečné požadavky zadavatele a potřeby jeho cílových skupin, shodu mezi tím, co uživatelé budou chtít a schopni používat a co jim dokážeme poskytnout — pak je můžeme s klidným svědomím sepsat do podrobného zadání a předložit klientovi k odsouhlasení.

Tento dokument bude zásadním mixem dvou typů informací:

ověření a zafixování vstupů — tj. položky typu Hlavní specializací firmy je výroba kuličkových ložisek. Souhlasí?

náznaky řešení — tj. položky jako Web poběží na platformě WordPress nebo srovnatelné nebo Prohlížeče IE6 a starší nebudou podporovány

Ve vlastním zájmu zde chceme mít sepsáno a následně klientem potvrzeno vše, co zatím o projektu víme, případně si myslíme, že víme.

Snad u každého projektu jsme až někdy v pozdních fázích návrhu narazili na nějaké nedorozumění se zadavatelem. A já si vždycky nepřál nic jiného, než aby si toho býval někdo všimnul už v začátku a napsal to do zadání.

Myslím si, že úplně vyhnout se tomu asi nedá. Jen s postupem času a přibývajícími zkušenostmi se snažím, aby se už jednalo vždycky jen o nějaké méně důležité detaily a vše opravdu podstatné jsme měli v podrobném zadání dopředu sepsané a schválené. Je zde velmi podstatný rozdíl i z obchodního hlediska: cokoli je sepsáno a klientem odsouhlaseno, je svaté. A jestliže se klient rozhodne něco z toho změnit, je to prokazatelná vícepráce a náklady jdou za klientem. Pokud to ale v zadání nemáme, klient se velmi snadno ubrání, že dotyčnou věc považoval za samozřejmou, a náklady na všechny změny ve většině případů připadnou nám.

Pokud to je možné, připravujme zadání postupně, procházejme s klientem i dílčí kroky — prodiskutujme a nechme si průběžně schvalovat samostatně seznam jeho cílů a priorit, definice cílových skupin, seznam jejich zájmů a potřeb, typické postavy, technické specifikace atd. Především položky, na kterých závisejí další kroky, je dobré mít zafixovány co nejdříve, protože případné změny v nich mohou mít dalekosáhlé následky v mnoha následných krocích, které z jejich předpokladů vycházely. Tzv. zavlečené chyby neznají jen programátoři, existují i v designu a projektovém řízení. A stejně obtížně se hledají a odstraňují.

Záleží hlavně na nás samých a na obchodním modelu, který si pro svou práci zvolíme, nakolik podrobné toto rozšířené zadání bude. Je potřeba to pečlivě vyvážit. Jak už jsme jednou předeslali, podrobná specifikace zadání plynule přechází v samotný návrh a popis řešení. Obecnější specifikaci budeme mít hotovou dřív, ale bude v ní tím víc věcí chybět (ovšem budeme mít zase největší volnost pro vlastní tvorbu) — mnohem podrobnější specifikace zabere víc času a práce, ovšem o to méně nejistot nám zůstane a o to méně práce zabere (a tím méně prostoru také dostane) následné konkrétní navrhování. Musíme se včas zarazit na nějaké rozumné hranici a sami určit: potud s klientem sepisujeme zadání, a odtud už se bude jednat o náš vlastní návrh.

Ani to nejpodrobnější zadání nebude nikdy zcela kompletní: nejkompletnějším zadáním je až sám hotový výsledek.

Jak z uvedeného plyne, do této části projektu, kterou z mnoha dobrých důvodů stále nazýváme zadáním, můžeme investovat již poměrně dost práce, času a invence. Nikdo svéprávný ji proto nemůže dělat zadarmo. Zpracování rozšířeného zadání (či podrobné specifikace) webového projektu je již součástí zpracování zakázky a věnujeme se mu až po jejím definitivním uzavření, podpisu smlouvy, objednávky či jiném, pro všechny strany závazném úkonu. Ale vždy si v určitém místě najděme ten správný řez, po nějž budeme svou práci stále ještě považovat za analýzu, výzkum a upřesňování zadání (a od něj dál již za vlastní realizaci), a v daném místě všechny své poznatky, domněnky a předpoklady sepišme, prodiskutujme a nechme si závazně schválit klientem. Forma už záleží jen na nás a na rozsahu a povaze zakázky. Někdy stačí jen ústní dohoda, často odsouhlasení v e-mailu, někdy je potřeba formální podpis závazného dokumentu. Podstatné je mít v případě sporných otázek v budoucnosti dostatečně pádný a něčím podložený argument, že jsme vycházeli z konkrétních faktů a zadání odsouhlaseného klientem.

Obsah podrobného zadání projektu

Definování projektu jsme věnovali poměrně hodně kapitol této knihy. A nikoli zbytečně: upřímně jsem přesvědčen, že tato část práce na webovém projektu je tou nejzásadnější a pohříchu také tou z nejvíce podceňovaných. Pokud bychom měli neomezený čas a neomezené prostředky, měli bychom na ní správně strávit vůbec nejvíc času. Korektně a co nejpodrobněji definované vstupní informace v podstatě určují řešení, a je-li zadání skutečně detailní, důkladné a přesné, samotný návrh — a obvykle i implementace — se pak vyloupnou samy a celkem snadno. Jenže náš čas ani prostředky nikdy neomezené nejsou, proto opět musíme dobře balancovat a správně je rozdělit úměrně předpokládanému celkovému objemu práce. Obecně bychom všem těmto úvodním analýzám, průzkumům a zjišťování informací neměli věnovat víc než cca třetinu (a ani v krajních případech určitě nikdy víc než polovinu) času celkem stráveného na zakázce; ale nemělo by to být ani moc málo. Když se probírám pamětí na poslední realizované projekty, kde jsme se úvodním analýzám a podrobným specifikacím věnovali, vychází mi tento čas v průměru na 20–25 % celkového objemu zakázky.

Ten celkový objem zakázky mějme vždy na paměti. Protože všechny ty dříve zmíněné kroky a obsah té spousty přechozích kapitol mu musíme přizpůsobit. Jakkoli to může vypadat jako velké množství práce a informací, které musíme dát dohromady, nesmíme to zase „přeťápnout“ a strávit na projektové přípravě většinu svého času. U malých, drobnějších zakázek (řekněme standardní menší firemní prezentační web) to celé bývá otázkou nejvýše pár hodin. U velkých projektů se ale může klidně jednat o týdny, s množstvím dílčích jednání a vyjednávání s klientem a dohadování se o spoustě detailů. Tento důkladný soupis podrobného zadání projektu ani nepřeceňujme, ale ani nepodceňujme. Má svou důležitost, a když ho zanedbáme, může se nám to ošklivě vymstít na vícepracích a mnohonásobném zbytečném předělávání detailů (kdo z nás tam nikdy nebyl?) — ale stejně tak pohoříme, když tento krok přestřelíme a investujeme do něj až příliš času a prostředků. Ty nám pak budou chybět pro následný návrh a samotnou implementaci.

V žádném případě nikdy nezačínejme pracovat na samotné realizaci webu bez specifikace projektu schválené klientem.

Jak tedy vlastně to podrobné zadání, ona tolikrát zmiňovaná specifikace má vlastně vypadat? Naprostým základem a tou úplně minimální verzí specifikace je prostě vlastními slovy zopakovat obsah původního zadání od klienta s dovětkem „Je to tak?“. To je naprosté minimum, co musíme udělat vždy, i když se jedná o mikrozakázku, kterou možná vyřešíme během chvilky. Každý člověk ovšem uvažuje jinak a stejná slova často znamenají pro každého něco jiného. Naším veledůležitým úkolem je tedy ujistit se, že jsme ona klientova slova pochopili správně, že oba mluvíme stejným jazykem a o tomtéž. Příklad průběhu specifikace takové mikrozakázky:

Klient: Máme nové logo, potřebuju ho na webu vyměnit. Soubor přikládám.

Designér (klienta a jeho stávající web už zná, oťukávací a průzkumnou fázi přeskakuje; a protože je zkušený, všechny potřebné kroky definování projektu provede v hlavě během pár sekund): Rozumím. Požadujete po nás zpracování přiloženého wordového dokumentu do grafického formátu použitelného pro logo na webu; vytvoření velkého loga na úvodní stranu, menší verze do záhlaví všech ostatních šablon na celém webu, černobílé verze použité v patičkách; vytvoření sady ikon webu (stávající favicons vycházejí z původního loga a musí se změnit) a jejich nahrazení ve všech šablonách, otestování a následné nasazení na ostrý web. Je to tak?

Pozn.: Protože staré logo používáte také v newsletterech, jejichž šablony jsme vám kdysi připravili, na všech účtech sociálních sítí a na firemním blogu, soudím, že bude potřeba jej vyměnit také tam. Pokud to budete chtít také od nás, doporučuji to vyčlenit jako následující samostatný krok, na jehož detailech se ještě domluvíme. Souhlasíte--li, požádal bych vás, abyste se mezitím pokusil vzpomenout si a sepsat všechna další místa, o kterých víte, kde staré logo používáte, abychom na něco nezapomněli.

Povšimněte si, jak taková rozmyšlená specifikace ze zdánlivě triviálního úkonu udělá smysluplnou zakázku nejspíš na několik hodin. Spousta méně zkušených designérů na původní požadavek obvykle zareaguje ve stylu Jo, jasně, žádný problém — nicméně pak všechny výše uvedené úkony stejně absolvuje a jenom skrze zuby proklíná klienta, kvůli jaké blbosti strávili bůhvíkolik hodin prací zadarmo nebo „za hubičku“. Skutečnou prací na skutečné zakázce. Ta ovšem jejich vlastní vinou formálně neexistuje. A klient má přitom (ze svého laického pohledu oprávněný) pocit, že se jednalo o marginální drobnost, která nás stála tři minuty práce a nestojí ani za řeč…

Bystřejší čtenáři jistě postřehli, že jsme zde narazili na ukázkovou projektovou mezírku — malou, ale poměrně typickou: klient nerozumí našemu oboru a nemá ani mlhavou představu, co všechno jeho požadavek obnáší. A bylo zde naším úkolem mu pomoci tu mezeru přemostit a skutečný rozsah a složitost jeho zadání vysvětlit. Zde poměrně snadno prostřednictvím oné minimální specifikace, kdy jsme neudělali nic jiného, než že jsme si rozmysleli, co z našeho pohledu jeho požadavek znamená, a vlastními slovy jsme jej klientovi přetlumočili. A on jej buďto odsouhlasí (a poučen nebude mít problém nám těch několik hodin naší odborné práce zaplatit), nebo si uvědomí, že za tolik práce to vlastně nestojí, a realizaci si rozmyslí.

Zpřesňováním zadání se bráníme dělat cokoli zadarmo a zbytečně.

Je vidět, jaké důsledky má, když na podrobnou specifikaci rezignujeme i v případě takové miniaturní zakázky. Co teprve všechno může nastat a jaké důsledky to bude mít u zakázek větších, neřkuli u těch opravdu velkých… Ostatně pro příklady můžeme zajít do kteréhokoli webdesignérského studia nebo se zeptat svého známého webdesignéra — určitě jich vysype z rukávu nepočítaně. Sám bych jich měl na dlouhé zimní večery… Ale chybami se člověk učí a dnes už raději nedělám ani tu nejmenší zakázku bez příslušné sepsané, dohodnuté, klientem odsouhlasené a co nejpodrobnější specifikace.

Většina projektů je ale přece jen mnohem větších. Zde už si s prostým komentovaným opakováním klientova zadání nevystačíme. Obsah podrobné specifikace pak musíme dále zjemňovat, členit a rozšiřovat úměrně velikosti a náročnosti zakázky.

Dalším logickým stupněm je zapracování výstupů z úvodního rozhovoru, dotazníku či kontrolního seznamu, pokud jsme je v přípravné fázi projektu použili. Pakliže jsme klientovi předložili k vyplnění dotazník (nebo jsme jej společně vyplnili během úvodních jednání nad projektem), je nezbytnou součástí podrobné specifikace projektu také ten — opět přetlumočený našimi slovy, tak, jak informace v něm sdělené chápeme my. Základní informace o projektu, cílových skupinách, popis uživatelských postav a vzorových technických řešení, které jsme podle nich nadefinovali, naše interpretace popisu tržního prostředí a konkurence; popis toho, jak my chápeme všechna uvedená technická a obchodní omezení a požadavky.

Dotazník zmiňovaný v předchozích kapitolách je ideálním vodítkem pro obsah výsledné podrobné specifikace. Jenom zde — na rozdíl od původního postupu, kdy jsme nechávali vyjádřit se klienta a bez komentářů shromažďovali jen jeho názory a laické představy — tentokrát sepisujeme již námi interpretované informace, názory ze svého odborného pohledu, všechny nalezené souvislosti, možná rizika a výhody, závěry všech svých dosavadních analýz a výzkumů. A snažíme se, aby se náš pohled na celek i jednotlivé detaily co nejlépe potkával s představami klienta všude tam, kde to je možné a dává to smysl — a aby případně srozumitelně vysvětloval i vyvracel původní představy, které byly zkreslené, idealizované a nereálné.

Připravme se na to, že takové vytvoření podrobné specifikace projektu nebude skoro nikdy hladké a snadné a nevznikne na první dobrou. Počítejme s určitou fází zpřesňování, vysvětlování a vyjednávání. Ať už půjde jen o to, najít společný jazyk a ujasnit si, že možná vlastně mluvíme o tomtéž (což je asi nejčastější ohnisko možných nedorozumění), nebo o vysvětlování a přesvědčování klienta, v čem jsou jeho původní představy těžko realizovatelné, rizikové nebo problematické. Jen opravdu výjimečně se stane, že po všech úvodních fázích sepíšeme podrobné zadání projektu ze svého pohledu, předložíme je klientovi, on řekne „Oukej.“ a specifikaci podepíše. Daleko častější bude několik kol jednání, vysvětlování a hledání správných styčných bodů.

Zde leží jedna z dalších stěžejních profesních schopností každého dobrého designéra. Ten skutečně kvalitní a odborně způsobilý dokáže správně rozlišit body, kde je namístě potlačit vlastní ego a přizpůsobit se klientovým požadavkům, a místa, kde je nezbytné klientovi je vymluvit a snažit se přesvědčit jej o platnosti svého odborného názoru. Nicméně říkat, že nemáme nikdy realizovat z našeho pohledu nesmyslné věci, na kterých klient trvá, by bylo příliš zpupné a namyšlené — přece jen jako designér pouze poskytujeme službu klientovi a nejsme než nástroj k realizaci jeho záměrů. Ale je určitě správné a nezbytné takové věci podstupovat až poté, co jsme klienta jasně a zřetelně seznámili s tím, že podle našeho odborného názoru a podle našeho nejlepšího vědomí a svědomí je jeho požadavek pochybený, špatný či nereálný a jaká nese možná rizika. Teprve poté, co klient na svých požadavcích poučeně trvá, je můžeme/musíme (chtíce-nechtíce) zahrnout do zadání projektu a vycházet z nich. Nicméně všechny případné důsledky pak nese na svých bedrech už klient, my jsme udělali, co jsme museli a co bylo v našich silách. A máme-li náležitě dokumentováno, že příslušný požadavek byl výslovným přáním klienta, které bylo v rozporu s naším doporučením, jsme v případě problému nejen z obliga. Dokonce si u klienta možná významně zvýšíme odbornou prestiž a napříště snad už na naše doporučení dá.

Je neprofesionání a elitářské odmítnout zpracovat nesmysl, na kterém klient trvá. Správné je vysvětlit mu, co a proč je špatně — a když klient trvá na svém, pokusit se jeho požadavek vyřešit nejlépe, jak dokážeme.

Je namístě podotknout, že vytvoření a odsouhlasení podrobného zadání nemusí být nutně jednorázovou záležitostí. V některých případech, a to především u rozsáhlejších projektů, může být rozloženo do několika částí, specifikace projektu může být vícekroková i vícestupňová. Tedy rozložená jak do šířky, kdy budeme postupně definovat jednotlivé dílčí části projektu a jiné, které nejsou zrovna aktuální, necháme na později — tak i do hloubky, kdy po vzájemné dohodě s klientem budeme postupně definovat jednotlivé parametry nejprve obecněji a s postupem času si dohodneme specifikace stále detailnější. V některých případech má takový postup své opodstatnění — hlavně právě u těch velmi rozsáhlých projektů, kdy může být neefektivní čekat na rozhodnutí o některých marginálních detailech, zatímco na jiných částech projektu se mezitím již může alespoň v hrubých obrysech pracovat. Je ovšem nezbytné si v těchto případech v rámci zadání s klientem dohodnout a odsouhlasit všechna příslušná omezení a úroveň detailů, kterým se nelze zatím věnovat, i následný postup doplňování a zpřesňování zadání. Uvádím to zde jen jako upřesnění pro případy oněch opravdu rozsáhlých projektů, kde takové postupné doplňování zadání může dávat smysl (i přes všechna rizika, která to s sebou nese) — u naprosté většiny menších a středně velkých zakázek ale budeme chtít mít ucelené zadání dohodnuté a schválené najednou a na jednom místě. Pokud povaha projektu nějaké postupné, dílčí specifikace vyloženě nevyžaduje, takovému postupu se vyhýbejme a snažme se vždy vytvořit a s klientem odsouhlasit zadání projektu najednou, v jednom uceleném dokumentu.

Začíná vlastní návrh

Konečně máme v ruce to hlavní: do detailu známe skutečné zadání projektu. Víme proč a pro koho web děláme, co jím chceme sdělit, kam na něm máme uživatele dovést a proč by o to měli sami stát, máme navržené vzorové scénáře jejich chování, měli bychom znát snad všechny podstatné parametry a omezení, vkus budoucích návštěvníků i požadavky zadavatele, známe trh i konkurenci, tušíme všechna proč, pro a proti.

Teď potřebujeme už jen tu poslední drobnost: vymyslet jak. Web skutečně navrhnout do všech detailů.

Malá vsuvka o metodě designérské práce

Obvyklý postup práce designéra spočívá v generování řady pokusů a omylů, je neustále opakovanou sekvencí vytváření mnoha nápadů a jejich variant, z nichž vykrystalizuje jeden či několik použitelných a ostatní se zahodí. Vytváření nepovedených pokusů a nápadů určených k zmuchlání a zahození do koše je nedílnou součástí navrhování a nesnažme se jim vyhýbat. To nejlepší jen málokdy vzniklo z prvního nápadu. A i když máme náhodou právě pocit, že nás hned napadlo to nejgeniálnější řešení, a jsme si jisti, že nic lepšího už vymyslet nemůžeme, stejně si aspoň pro pořádek pár těch návrhů do koše poctivě udělejme. Nejlépe s nějakým odstupem, aspoň se na to vyspěme. Ráno moudřejší večera není hloupé přísloví. A pokud opravdu další naše nápady budou už jen horší a zahodíme je, výborně nám posloužily k potvrzení naší původní domněnky. Bez tohoto důkazu bychom si nemohli být nikdy jisti. A dost možná aspoň nějaký zajímavý detail, drobnost či jiný postup nakonec ve výsledku použijeme.

Velký odpad a hromada nepoužitých návrhů jsou v designu dobré a důležité.

I když známe přibližně vkus a představy našeho klienta, při samotném návrhu bychom na ně neměli až tolik brát ohled. Vlastně jediné, co by nás mělo trochu zajímat, jsou případná negativní vymezení, pokud nám je klient sdělil: musí se to lišit od konkurenta X, nesnášíme růžovou, nechceme tam žádné komentáře uživatelů atd. — ale i ta berme spíše s rezervou a jen jako nepovinné omezení. Ukáže-li se, že nějaké báječné řešení, které nás napadne, řeší klientovo zadání skvěle i navzdory těmto požadavkům, měli bychom se je snažit prosadit a klientovi pokusit vysvětlit.

Nebojme se nechat svou fantazii rozletět bez omezení.

Nápady vždycky můžeme proškrtat a redukovat dodatečně, není dobré aktivovat nějaké brzdy už v samém začátku. Až příliš často se ukazuje, že spousta možných omezení byly třeba jen předsudky, které zbytečně bránily použití návrhu, který by býval mohl fungovat mnohem lépe a efektivněji. A mnoho nápadů, které z nějakého důvodu nakonec přece jen nelze použít, se dá přetransformovat do něčeho podobného, funkčního, případně nás může inspirovat tam, kde by nás podobné detaily třeba ani nenapadly. Buďme v designu raději odvážní a nechávejme fantazii co možná neomezený rozlet — a teprve pak své rozevláté nápady podle potřeby redukujme, ořezávejme a přitesávejme do příslušných mezí. Přinese to obvykle mnohem lepší výsledky, než se zpočátku držet při zemi a nápady pak podle potřeby dodatečně nafukovat a doplácávat.

Nejmarkantnější a nejpoužívanější je tato metoda především v samotném vizuálním designu, při navrhování vzhledu, grafiky, multimédií. Ale není nikdy od věci ji — alespoň v přiměřené míře — používat ve všech fázích projektu, od základního návrhu obecných principů přes návrhy technických řešení až po závěrečný vizuální design.

Definování principů

S návrhem musíme začít od samotných základů. Ze všeho nejdřív na té úplně nejobecnější rovině — vymezením mantinelů, stanovením rámcových zásad, obecných pravidel a principů. Potřebujeme se rozhodnout, jaké bude celkové pojetí a styl webu, jak budeme komunikovat s uživatelem, jakou formou budeme prezentovat informace atd. Musíme vykolíkovat hranice území, ve kterém se budeme pohybovat: jak my při návrhu a implementaci, tak i později klient při správě a aktualizování webu.

Musíme stanovit priority, aby se příslušná cílová skupina dostala co nejdříve k jádru sdělení, aby uživatel nemusel dlouho hledat to, co je pro něj podstatné, a přitom nebyl zbytečně zahlcován informacemi, které jsou pro něj zcela neužitečné. Až nepříjemně často můžeme narazit na weby, které na nejvýznamnějším místě sdělují informace oslovující třeba jen několika málo uživatelů a miliony dalších se snaží marně pochopit, jestli se jich to nějak týká, a pak o to déle hledají to, co je skutečně zajímá…

Tento krok je taková trochu opomíjená Popelka. Není pro výsledek zcela klíčový, obvykle zde nemůžeme pokazit něco naprosto zásadního (jako třeba chybně nastaveným zadáním). Pokud jej opomineme nebo uděláme špatně, může pořád vzniknout web v mnoha ohledech dobrý a funkční. Nicméně to, co zde riskujeme, je nekonzistentnost a chaotičnost. Může vzniknout web, jehož jednotlivé části působí nesourodě, každá s uživatelem komunikuje jiným jazykem, uživatel je nepříjemně překvapován, zatímco očekávané nenastává a na jednom místě naučené vzory jinde přicházejí vniveč. Konzistence je důležitá pro celkový dojem, pro pocit uživatele, že se na webu vyzná, že je pro něj snadné se v něm pohybovat, ovládat jej, rozumět mu. Konzistentní a dobře navržené (a dodržené!) principy významně zvyšují uživatelský prožitek. Měli bychom jim proto věnovat náležitou pozornost.

Celkový styl

V této fázi návrhu si musíme ujasnit a zafixovat několik výchozích parametrů webu. Tím prvním a základním je celkový styl webu a typ prezentace. I když můžeme někdy mít pocit, že mnohé z těchto věcí jsou na našem projektu zcela jasné a jiné alternativy ani nepřicházejí v úvahu, vždy si je stejně na úvod všechny zřetelně a srozumitelně sepišme. Jednak svým dojmům a pocitům, které se v čase mohou měnit, dáme jasnou formu a později si je snáze připomeneme; jednak tím sjednotíme platformu pro všechny zúčastněné. Vývojáři, marketéři i sám klient budou mít později v těchto detailech jasno a budou moci jednoznačně nastavená a vymezená pravidla dodržovat.

Upřesněme v prvé řadě, o jaký typ prezentace se jedná: je hlavním předmětem sdělení firma, produkty či informace? Poskytuje web uživatelům primárně informace o klientovi a jeho podnikání, nebo především chce nabízet produkty a služby? Nebo má za cíl hlavně sdělovat novinky či poskytovat encyklopedické informace, nabízet zpravodajství, názory a analýzy? Anebo bavit? Pochopitelně to přímo souvisí s cíli klienta, s CTA jednotlivých stránek, s obchodním modelem — parametry, v nichž bychom měli mít jasno už ze zadání. Je ale s podivem, kolik webů v tom nemá příliš jasno a ve stylu prezentace docela tápe: na firemním webu publikují sbírku vtipů, z e-shopu odvádějí návštěvníky na blog vývojářů, zpravodajství se ztrácí mezi komentáři a naopak, seriózní informace se nesourodě míchají s ryze zábavními prvky atd.

Ovšem pozor, to nemusí být nutně špatně. Firemní web může být v nejklasičtější podobě (standardní sada stránek O nás — Naše služby — Reference — Kontakty), ale stejně tak dobře může být postaven třeba nad zajímavým blogem. Nebo kolem prezentace klíčového produktu. Prodej výrobků může být standardním katalogovým e-shopem, ale také efektivně veden pod zástěrkou populárního magazínu, znalostní databáze nebo poradny; informace jakéhokoli druhu mohou být prezentovány formou průběžně publikovaných článků, měsíčně vydávaného bulletinu, zveřejňované uceleně nebo s průběžnými aktualizacemi a dodatky, organizované a kategorizované s knihovnickou precizností, nebo i záměrně a řízeně chaoticky. Možností je nepřeberně. Špatně to je jen v případě, že je zvolený přístup neúmyslný, nezáměrný a ve výsledku pro uživatele i provozovatele nekonzistentní a matoucí.

Jasně a jednoznačně si do svých propozic poznamenejme, s jakým typem, stylem a formou webu budeme dále pracovat, a snažme se toho následně držet.

Pozn.: Toto je stále část, kde se popis specifikace a vlastní návrh projektu ještě výrazně prolínají, a tyto principy mohou klidně být i součástí zadání, jak jsme je kompletovali v předchozích kapitolách. Pro účely této knihy bylo nutné udělat nějaký „řez“ a rozhodnout se, co ještě zařadíme do zadání a co už bude součástí následných kroků návrhu. Takový řez je ale čistě individuální, je jen na nás (a případně i na individuálních požadavcích klienta), jestli základní obecné principy webu zafixujeme už předem v zadání, nebo je vyčleníme až do samotného procesu navrhování.

Forma komunikace

Vedle celkového stylu musíme specifikovat i formu, jakou chceme informace prezentovat. Má to být seriózně, či zábavnou formou? Smrtelně vážně, odlehčeně, nebo dokonce vtipně? A má jít o lehký nevtíravý humor, nebo rovnou o třeskuté kontroverzní fóry? Chceme svá klíčová sdělení prezentovat přímo, či oklikou? V navazujících krocích od náznaků po detaily budit postupný zájem, postupovat od obecného ke konkrétnímu — nebo naopak napřímo od hlavního po stále jemnější detaily jen pro vážné zájemce?

Jaká forma jazyka a styl sdělování budou použity — odborný, populární či familiární styl, vědecky strohý, neutrální nebo přátelský? Jaká odborná úroveň čtenáře se předpokládá, jak se bude balancovat mezi expertním (neurážet odbornou veřejnost přílišnými polopatismy a vysvětlováním základních pojmů) a laickým přístupem (neodrazovat laické zájemce příliš odborným a nesrozumitelným obsahem)?

Bude web komunikovat primárně textově, nebo spíše prostřednictvím obrázků či infografiky, nebo především pomocí multimédií, často publikovat video, zvuk, animace, bude nabízet interaktivní aplikace? Budou informace spíše v souvislých celcích, nebo fragmentované? Budeme mít na webu dlouhé články v jednom kuse, nebo spíš obsah rozdělený do více menších částí, budeme dávat přednost kompatnímu obsahu, nebo raději kratším blokům informací s množstvím křížových odkazů? Budou informace doplňovány a publikovány jednorázově, nebo neustále průběžně během dne? Jaká bude průměrná frekvence a objem aktualizací? Budou jednou vydané články vždy ponechány v původní podobě, nebo se bude jejich obsah průběžně editovat a doplňovat?

Zde je vidět, že už se jedná o poměrně závažnější a pro další postup návrhu dost podstatné informace. To, jaký styl a forma obsahu se tady nastaví, přímo ovlivňuje i budoucí podobu webu. Tyto parametry později musíme zohlednit při návrhu navigačního stylu, strukturování obsahu i v grafickém návrhu. Vysoce odborný a seriózní obsah nepochybně vyžaduje o dost jinou vizuální prezentaci než web zábavně-populární, nebo dokonce třeba recesistický.

Etika, etiketa, krizová komunikace

Musíme neustále myslet na stanovenou cílovou skupinu, na vzorové uživatele, které jsme si vytvořili. A nejen na jejich zájmy, potřeby a priority — ale také na jejich případné předsudky, tabu, citlivá témata. Není-li cílem webu kontroverze a otevřená konfrontace (může to být programový záměr, ale obvykle tomu tak není), musíme se takových sporných bodů zcela vyvarovat a možným konfrontacím předcházet. Každý, dokonce i ten největší internetový cynik a drsňák má svou Achillovu patu a i zdánlivě neškodná narážka jej může k smrti urazit.

Snažme se proto nejtypičtější citlivá místa svých cílových skupin otevřeně pojmenovat a následně se jim důsledně vyhýbat. Už na úrovni obecných principů webu musíme stanovit pravidla, aby se v budoucnu nestalo, že se web určený fanouškům fotbalu vysmívá nějakému konkrétnímu sportovnímu klubu, že nábožensky založenou cílovou skupinu urazí narážka na jejich náboženské tabu, že si puritánské uživatele znepřátelíme zobrazením zbytečné nahoty atd. Uživatelé jsou ti, kdo webu, který tvoříme, budou dávat smysl a budou jej živit, musíme jim proto vycházet vstříc, vyhýbat se možným konfliktům už předem a v rámci možností vycházet vstříc uživatelovým zájmům a jeho vkusu.

Ze zde sepsaných principů by měly v budoucnu vycházet i klientovy vlastní zásady pro přímou komunikaci s uživateli — samozřejmě pokud je zodpovědný a na taková doporučení bude brát nějaký zřetel. Téma internetové etikety, komunikace v elektronických médiích a krizové komunikace je přece jen už dost mimo rámec této knihy a případní zájemci si k této tematice jistě snadno najdou mnoho specializovaných publikací. Pro naše potřeby si vystačíme s tím nejzákladnějším poznatkem, k němuž lidstvo dosud v této oblasti došlo: zákazník má vždy pravdu, hádat se je špatné.

V tomto místě opět udělám výjimku a doporučím čtenářům zase jednu konkrétní knihu, protože jde o takovou malou „bibli“ mezilidské komunikace, kterou by podle mě měl znát úplně každý: Dale Carnegie: Jak získávat přátele a působit na lidi. Kdyby byla povinnou četbou na každé základní škole na světě, byl by svět nejen mnohem lepším místem k životu, ale i několik kapitol v této knize i celé spousty jiných knih o chování, vztazích a komunikaci by vůbec nemusely existovat. Opravdu by si ji měl přečíst každý.

Každá hádka je předem prohraná. — Dale Carnegie

A pokud ani náš klient, ani naši spolupracovníci jakoukoli příslušnou literaturu věnovanou mezilidské komunikaci neznají a ani nemají zájem k tomuto tématu nic dalšího studovat, dejme jim alespoň jednu jedinou jednoduchou radu, s níž si celý život pohodlně vystačí — pokud se jí budou bezpodmínečně řídit: nikdy se s žádným uživatelem/zákazníkem o ničem nepřít, i kdyby si byli nastokrát jisti, že mají pravdu. A už vůbec před jinými lidmi! Nikdy. Nedejbože se s kýmkoli hádat veřejně v médiích nebo na sociálních sítích! Jedinou správnou reakcí na kritiku a v krizové komunikaci je jakákoli variace na prosté: Děkujeme vám za podnět. Omlouváme se. Podnikáme kroky, aby se problém neopakoval. Nic víc.

Sociální sítě coby moderní fenomén jsou snad nejcitlivějším a pohříchu také nejpodceňovanějším místem komunikace, hlavně té krizové. Vyhnout se přímé komunikaci se svými návštěvníky a uživateli na sociálních sítích je stále obtížnější a každý aspoň trochu větší projekt se jí vyhýbat nemůže. Ale tím těžší je ji také zvládnout — dokonce i ti, kteří mají zkušenosti z klasických médií, na sociálních médiích často selhávají. Tato nová média mají některá specifika, jejichž znalost a respektování je při jejich používání klíčové. Shrnout se však dají do jedné hlavní poučky:

Komunikace na sociálních sítích se více podobá osobnímu kontaktu než mediální prezentaci.

Uživatelé očekávají reakci a očekávají ji rychle. Žádné připravujeme tiskové prohlášení nebo více informací v zítřejším vydání zde nemá místo. Na sociálních sítích je nejen možné, ale přímo zvykem reagovat v řádu minut a i hodinové prostoje jsou zde vnímány jako nereagování a odmítání komunikace. Nemluvě o tom, že každou další minutou zde vznikají neustále další nové komentáře a roste i množství nežádoucích spekulací. Pokud se na „naší“ sociální síti začne propírat nějaký problém či téma, které se nás přímo týká, reagujme co nejrychleji a co nejvstřícněji. Stručná informace typu o tomto problému již víme a právě teď v této záležitosti děláme to a to obvykle vyřeší většinu krizí už v samém zárodku.

Ani zdánlivě nejbanálnější problém nezlehčujme. Vždy se v davu najde někdo, pro koho je ona z našeho hlediska pominutelná maličkost zásadním problémem, bude ji brát velmi vážně, a pokud ji budeme bagatelizovat, může to vyvolat vlnu nepřátelských a osobních útoků.

Rozhodně neútočme, nenapadejme, nevyhrožujme. To pro nás nikdy nedopadne dobře, i kdybychom měli svatosvatou pravdu a byli zcela v právu. Praxe ukazuje, že každý náš výpad se ve výsledku často obrátí mnohonásobnou silou proti nám. Reagujme věcně, útoky a vulgarity ignorujme. Ty nejbrutálnější výlevy lze velmi snadno slušně pokárat a obrátit pozornost na podstatu problému. Není to snadné a vyžaduje to mnohdy skutečně hroší kůži a spoustu sebeovládání. Ale kdokoli komunikuje jménem firmy na sociálních sítích, musí reagovat vždy klidně a fungovat jako nekonečně odolný štít, který každý výpad, útok a urážku dokáže ignorovat, nalézt v nich případné jádro sdělení a převést je ihned do věcné roviny. Prosím, není třeba reagovat takto silně. Z vašich slov jsme pochopili, že…

Nikdy nemažme ani neskrývejme komentáře. Lze to snadno zjistit a téměř vždy to také někdo zjistí — a vždy se to pak obrátí proti nám. Výjimkou jsou pouze skutečné extrémy: příspěvky obsahující výhrůžky násilím, pornografii nebo jiné nepublikovatelné informace, případně příspěvky snažící se svou formou poškodit či zničit formát a funkčnost diskusního fóra (extrémně dlouhé, mnohonásobně opakované, zcela nesmyslné, obsahující obří obrázky, škodlivý kód atd.). Překračují--li podle nás příspěvky hranice zákonnosti, předáme je policii, ale nikdy se k nim nevyjadřujeme. Ovšem „běžné“ vulgarity a výpady jednoduše v mysli odfiltrujme a snažme se soustředit jen na samotnou informaci, kterou se nám dotyčný komentátor snaží pod vším nánosem emocí skutečně sdělit. Je tam téměř vždy, někdy viditelnější, někdy hodně dobře skrytá.

Vyhýbejme se raději přirovnáním a příkladům. Každého přirovnání se dříve či později někdo nevhodně chytí a bude se snažit podstatu problému převést úplně jinam. Zkušený účastník internetových diskusí zná dobře tzv. Godwinův zákon, tedy že pravděpodobnost, že se v online diskusi objeví porovnání s Hitlerem či nacisty, se s růstem délky diskuse blíží jedné. Dovolím si jej dokonce zobecnit, že jistotě se s rostoucí délkou diskuse blíží pravděpodobnost, že se zde objeví jakékoli pro nás nežádoucí téma, přirovnání a nevhodná paralela. Je proto žádoucí snažit se každou diskusi (nejlépe vstřícným přístupem, příslibem nápravy a náležitým pokáním) včas ukončit. Vše má své meze a s nikým nemůžeme diskutovat donekonečna.

Za připomínky a rady poděkujme bez ohledu na jejich formu. I reakce naštvaného uživatele pro nás může být cenná a nesmíme ji zahodit jen proto, že nám ji třeba předává hrubou, či dokonce vulgární formou. Zkušený správce sociálních sítí vnímá komentáře Promiňte, v nadpisu máte překlep a Jen kreténi jako vy dokážou napsat výtejte s tvrdým y jste fakt úplně vylízaní debilové, to by neudělal ani Hitler, hovada jako svým sdělením totožné. Předá vývojářům chybu v textu k opravě, za upozornění slušně poděkuje a přislíbí co nejrychlejší nápravu.

Rozhodně nepodceňujme dopad diskusí. Sociální sítě jsou nesmírně zrádné v tom, že jen těžko můžeme odhadovat, kolik lidí příslušnou diskusi vlastně sleduje, ke kolika se nakonec dostane. Jedno je jisté: vždy ji vidí mnohem více lidí, než kolik se jí přímo účastní. Někdy to může být stonásobek, někdy stotisícinásobek. Nic nezkazíme, když budeme každou diskusi považovat za fórum, které vidí a sledují úplně všichni naši uživatelé a návštěvníci. Pokud podle toho budeme jednat, pokud budeme vždy vystupovat tak, jako by to bylo na pódiu před všemi našimi nejváženějšími zákazníky, nemůžeme nic zkazit.

Vztah k uživateli

Dalším důležitým — a pohříchu často opomíjeným — bodem je určení vztahu webu k uživateli. Bude web uživateli tykat, nebo vykat? Nebo bude obsah prezentován v ich-formě, tedy jako projekce uživatelova druhého já? Budou zdroje dostupné uživatelům na webu jejich, nebo naše? Bude web oslovovat návštěvníka Vážený uživateli, nebo Tě péro Bédo? Nebo ho oslovovat nebude a nabídne mu jeho vlastní prostor z jeho pohledu: Tohle je moje stránka a tady vystupuju já?

Bohužel prakticky každý den narazíme na web (včetně těch známých a prestižních), který tento bod nemá moc ujasněn a vztahy nesourodě míchá. Úvodní stránka návštěvníkovi uctivě vyká (Vítejte, vážený uživateli), registrace mu tyká (Hej, sem musíš vyplnit svůj e-mail!) a po přihlášení se ocitne na webu ztotožněném se svou osobou (Můj profil, Moje soubory, Chci technickou podporu). A některé weby to míchají úplně náhodně, asi bez přemýšlení: Tvůj profil > Moje fotka > Nahrajte prosím Vaši fotografii… Například v aplikaci Apple iTunes se po spuštění nové streamovací služby objevily přímo vedle sebe položky Moje hudba a Pro vás. Kdo je v té aplikaci „já“ a kdo „vy“?

Pro dobrý pocit budoucích návštěvníků a příjemný uživatelský prožitek je konzistence v těchto bodech docela důležitá. Pohybujeme se zde více na podvědomé úrovni; jen málokdo tyhle rozdíly vědomě vnímá a dokáže zpětně popsat, kde se s nimi setkal — ale pokud je to prostředí a komunikace mezi webem jednotné a konzistentní, je výsledný pocit uživatelů lepší, komfortnější, cítí se na webu pohodlněji. Uživatel na nevědomé úrovni vnímá naznačený sociální kontext a podvědomě ho akceptuje. Web se s ním baví jako uctivý služebník (Vítejte, Přihlaste se, Zde jsou vaše soubory), bodrý kamarád (Ahoj, Zaregistruj se, Sem klikni), nebo vlastně s nikým nekomunikuje a on spravuje své vlastní prostředky a používá své nástroje (Vstup, Registrace, Moje soubory). Jestliže se tyto odlišné přístupy najednou začnou míchat a prolínat, vzniká podvědomý zmatek, diskomfort, uživatel začne malinko tápat a hůře řešit i původně jednoduché úkoly. Nejzřetelněji se to projeví na výzvách call to action. Je-li požadovaná akce v témže stylu, na který si už zvyknul, daleko spíše jí uživatel využije. Je-li celý web v ich-formě, návštěvník je zvyklý se přihlašovat na „svůj“ účet, používat Mé nastavení a Mé objednávky, spíše pak využije Mé slevy než nějaké cizí Slevy pro vás. Přepnutí mezi já–ty může být relativně náročné s velkou psychickou režií.

Metastránky a další podpůrné nástroje

V rámci obecných principů bychom také měli předem ujasnit, jaké další podpůrné nástroje, vedlejší stránky, doplňkové aplikace apod. budeme chtít k hlavnímu obsahu webu poskytovat. Celkem často se stává, že se designér soustředí na samotný hlavní obsah webu, na tyto sekundární informace úplně zapomene a pak je dodatečně složitě a nesourodě roubuje do již hotové struktury a navigace.

Co si pod takovými sekundárními informacemi představit? Jedná se především o různé metastránky, které stojí tak trochu mimo hlavní strukturu webu: obchodní a smluvní podmínky, licence, přihlašování a odhlašování zasílání novinek atd. U některých webů sem dokonce spadají stránky, které jsou na jiných webech integrální součástí hlavního obsahu: technická podpora, kontaktní formulář a chat, komunikační kanály, sociální sítě, připojený blog, novinky a aktuality, hlášení problémů/chyb, kontakt na callcentrum, landing stránky reklamních kampaní, odkaz na připravovanou mobilní aplikaci atd.

Pokusme se sepsat maximum takových stránek a informací, které zde mají být nebo se mohou objevit. V tomto případě to bude pomůcka především pro nás samé, abychom věděli, s jakými typy a jakým objemem přidružených stránek musíme na webu počítat, a měli připravena příslušná místa, kam je ve struktuře a navigační logice zařadit. Poměrně často můžeme narazit na weby, kde ze způsobu zařazení tohoto typu informací čiší především bezradnost designérova, informace jsou naroubovány na web očividně dodatečně a bez jakékoli logiky. Tomu se jako designéři musíme vyhnout a mít strukturu připravenou tak, aby do ní bylo možné podobný typ stránek hladce integrovat. A u každé nově přidané stránky se pak umět snadno rozhodnout, zda bude patřit někam do logické struktury webu a jeho hlavní navigace, nebo bude stát mimo ni (a kde a jak na ni pak budeme odkazovat).

Specifikace marketingové strategie

Stejně jako obecné principy zmíněné v předchozí kapitole, i následující body týkající se aplikace klientovy marketingové strategie pro budoucí web mohou být stále ještě za určitých okolností součástí úvodního zadání. Nicméně do této části vnášíme již mnohem větší díl vlastní invence a stále více zde něco tvoříme a vymýšlíme. Takže za předpokladu, že níže uvedené body nebyly předem jasně dány a je na nás je nějak stanovit nebo upřesnit, rozhodně už dávám přednost tomu, aby tato sekce byla už součástí řešení, nikoli ještě zadání.

Je nutno podotknout, že jedná-li se o větší zakázku, pokud se sami necítíme být zvlášť velkými marketingovými experty, budeme nejspíš tuto kapitolu designu řešit nebo alespoň konzultovat s marketingovými specialisty — se svými kolegy, s klientovým marketingovým oddělením, případně ji budeme outsourcovat, tedy spolupracovat s nějakým najatým odborníkem. U menších zakázek typu běžného firemního webu či nějakého malého projektu to obvykle nějak uspokojivě vyřešíme sami po dohodě s klientem. U větších a významnějších projektů bychom to ale už neměli ponechat na náhodě, neboť čím větší projekt, tím významnější roli tyto parametry budou hrát.

Název a doména

Název webu, resp. název projektu a jemu odpovídající doména jsou poměrně důležité parametry každého webu. I když z určitého pohledu možná už ne tolik, jak si mnozí myslí. Především důležitost domény s dobou poměrně klesá. V počátcích webu byla správná doména naprosto klíčová, podnikatel ji měl napsanou na vizitce a jeho partneři si ji z ní ručně opisovali do prohlížeče. Později začal být běžnou praxí postup, na který všichni spoléhali: tedy že typický uživatel napíše naslepo adresu ve tvaru <jméno_firmy>.com, případně <jméno_firmy>.<národní_doména>, a to musí fungovat. Kdo nesehnal správnou doménu, raději přejmenoval firmu (opravdu!). Doménoví spekulanti skupovali domény pro všechny možné varianty názvů známých, či dokonce jen potenciálních projektů a mnozí jim raději příslušné výpalné zaplatili, jen aby tu svou ideální doménu získali pro sebe.

Dnes už doména naštěstí není tak klíčovým problémem — především díky zapracování jisté inteligence do prohlížečů a jejich navázání na vyhledávací služby už stále méně uživatelů píše do prohlížeče přímo doménu nebo dokonce adresu konkrétní stránky, ale spokojí se s odesláním jim známého (nebo dokonce jen přibližného) názvu firmy/projektu, nebo dokonce nějakého povědomého řetězce do vyhledávače a pak si vybírá z toho, co jim nabídne. Více než zábor ideální domény je tak dnes důležitá správná spolupráce s vyhledávači, případně použití online reklamy, aby pro klíčová slova nejvíce používaná naší cílovou skupinou vyhledávače nabídly náš web tak, aby jej uživatelé co možná přesně a snadno identifikovali, a to ideálně na jednom z předních míst ve výsledcích vyhledávání.

U firemních webů je situace obvykle poměrně snadná a zřejmá: název webu (a potažmo domény) co nejlépe kopíruje jméno firmy. U projektů s unikátním názvem zrovna tak — nemluvě o tom, že spousta nových online projektů a startupů volí jméno primárně tak, aby rovnou unikátní bylo (a současně byla pro něj volná jak .com doména, tak pokud možno i účty na nejpoužívanějších sociálních sítích). Vzniká tak spousta projektů s názvy generovanými náhodně, dadaisticky až nesmyslně — čistě kvůli této unikátnosti. U ryze online projektů je to celkem pochopitelné, ale u již zavedených firem si s unikátností dělat až takovou hlavu nemusíme. Pokud není volná .com (či příslušná národní) doména, můžeme si vybrat z množství tematických domén nejvyšší úrovně (TLD, top-level domain). Jestliže tedy pro klientovu firmu Globuli — kuličková ložiska bude doména globuli.com i třeba globuli.fr (jedná-li se o původem francouzskou firmu) již obsazená, příliš se tím netrapme a klidně použijme třeba volnou globuli.biz nebo třeba globuli.info. To podstatné bude práce s dalšími parametry webu tak, aby případní zájemci náš web s pomocí svých prohlížečů a vyhledávačů co nejsnáze našli.

Slogan, claim

Slogan či vysvětlující claim webu s ohledem na výše uvedené naopak hraje stále důležitější úlohu. Tím, jak je jmenný prostor v oblasti domén stále zahuštěnější, začíná být podstatné i jejich upřesňování a umisťování do správného kontextu. A zde výstižný či přímo obecně známý slogan či přesně cílený podtitul, který se zobrazí ve výsledcích vyhledávání jako druhá nejhlavnější informace, hraje nezanedbatelnou roli. Pokud například zjistíme, že nejpoužívanější TLD domény našemu klientu obsadily třeba firmy Globuli, cestovní kancelář a Globuli Piluli: pilulky na tloustnutí, může to být právě správně použitý slogan či podtitul, který významně pomůže klientův web usadit do správného kontextu a uživatele ve vyhledávačích správně nasměrovat na tu jedinou vhodnou položku ve výsledcích vyhledávání. Je pak už na našich specialistech na SEO (viz dále), aby název a slogan/claim klientova webu zapracovali do stránek takovým způsobem, aby ve výsledcích vyhledávání fungoval nejlepším možným způsobem.

Měli bychom si dát záležet na tom, aby náš web použil takový slogan/claim/podtitul, který ve spojení s názvem webu už vytvoří skutečně unikátní pojmenování a ukotví web v kontextovém prostoru, kde jej budoucí uživatelé snadno naleznou a identifikují. Pokud příslušný vhodně vytvořený slogan správně použijeme v popisu (meta datech) stránek, může ve spojení s názvem webu vytvořit unikátní a ve výsledcích vyhledávání snadno identifikovatelnou kombinaci, která návštěvníky na náš web přivede.

Strategie akvizice návštěvníků

Nicméně to, jak se vlastně většina návštěvníků na web bude dostávat, jak jej najdou a jak je přiláká, je už ryze marketingová otázka. Ale už od samého začátku bychom v ní měli mít jasno. Protože i samotný web musí být nějaké základní strategii přizpůsoben. Jinak musí vypadat web, kde přivádí klasická reklama v tisku a médiích návštěvníky na jeho úvodní stranu. Jinak web, kam se většina lidí dostane přes online reklamu a optimalizované výsledky vyhledávání pro vybraná klíčová slova. A ještě jinak web, kam návštěvníci chodí třeba za konkrétními produkty a informačně bohatým obsahem díky dobrému pokrytí tzv. dlouhého chvostu (long tail) v příslušném segmentu trhu.

V prvním případě musíme počítat s tím, že většina návštěvníků přijde poměrně masově přes úvodní (či jinou dedikovanou vstupní) stranu, která pak musí ideálně fungovat jako hlavní rozcestník a spolehlivě navádět všechny možné typy návštěvníků k příslušným CTA. Ve druhém případě budou většinu návštěv generovat konkrétní podstránky, případně speciálně připravené vstupní strany pro konkrétní marketingové akce a vybrané propagované produkty (landing stránky). A konečně v případě longtailové strategie bude většina uživatelů vstupovat na web ponejvíce až přes jednotlivé koncové stránky všemožných produktů nebo konkrétních dílčích informací, článků a segmentů, které příslušný web nabízí (aniž by kdy navštívili úvodní stranu), a ohnisko práce se zaujetím a směrováním návštěvníků musíme směřovat hlavně na tento typ stránek.

Všechny strategie mají na trhu své opodstatnění a všechny mohou skvěle fungovat. Je ale nezbytné si zamýšlenou marketingovou strategii předem ujasnit a celý návrh webu jí přizpůsobit. V opačném případě můžeme snadno skončit s webem s propracovanými koncovými produktovými stránkami, na které se návštěvníci málokdy dostanou — anebo naopak s geniálně zpracovanou homepagí, kterou většina uživatelů nikdy ani nespatří. Tak jako tak webem v důsledku špatně navrženým a málo funkčním.

SEO a online marketing

Je jasné, že s ohledem na výše uvedené je celkem důležité mít už před samotným navrhováním detailů webu jasno i v zamýšlené budoucí marketingové strategii. Asi jen výjimečně bude tato oblast také naší prací, daleko častěji zde budeme spolupracovat s nějakým online marketérem či expertem na SEO (Search Engine Optimization, optimalizace pro vyhledávače), PPC (Pay-Per-Click, platba za kliknutí, nejběžnější typ internetové reklamy) nebo obecně na online marketing.

Rozhodně bychom se měli už v samotném začátku s dotyčným odborníkem sejít a příslušné strategie si společně ujasnit. Ještě před tím, než začneme skicovat první stránku webu, chceme mít jasno přinejmenším v tom, jestli má být web orientován na centrální vstup přes homepage, nebo naopak na longtail, jestli máme počítat s intenzivnějším nasazením nějakých landing stránek, jestli budou návštěvníci přicházet za produktem, nebo za značkou atd.

Strategie motivace návštěvníků k návratu

Bod, na který až příliš mnoho webů trochu zapomíná. Jak se budu starat o to, aby se již jednou „zužitkovaný“ návštěvník na moje stránky zase vrátil? Jen minimum projektů je schopno pracovat s unikátním návštěvníkem, „vytěžit“ každého hned napoprvé a jako nepotřebný, vyždímaný obal jej odhodit. Naprostá většina webů potřebuje, aby se lidé vraceli opakovaně: aby znovu nakoupili, aby opět kliknuli na reklamu, aby pozitivní uživatelský zážitek sdíleli a šířili ve své sociální bublině a lákali další návštěvníky.

Také v této oblasti existuje mnoho různých strategií — výhody pro registrované návštěvníky, prostá loajalita spokojeného návštěvníka, množstevní slevy, zákaznické karty a bonusy atd. Má-li ovšem náš klient nebo příslušní marketingoví experti v této oblasti už nějaké představy, je určitě dobré je znát co nejdříve a pracovat s nimi už od začátku navrhování webu. Přinejmenším s tím, zda je opakovaná návštěva žádoucí, nebo se s ní naopak přiliš nepočítá a je žádoucí dostat z každého jednou zachyceného návštěvníka maximum už napoprvé, protože s nějakým opakovaným zájmem stejně nikdo příliš nekalkuluje. I takové obchodní modely dávají někdy smysl, ale tím spíš je nezbytné si je předem otevřeně ujasnit a pracovat s nimi pak úmyslně.

Obvykle ale klient o opakované návštěvy a vracející se uživatele stojí. A v tom případě je pro designéra poměrně zásadní vědět, na jakých principech má být jejich loajalita budována, aby je při návrhu mohl nejen respektovat, ale dokonce podporovat. Jinak asi bude vypadat web, kde je podstatou obvyklá celková spokojenost návštěvníka např. s poskytnutými službami, nákupním procesem a poprodejním servisem — a jinak třeba ten, který se soustředí primárně na minimální cenu a omezuje všechny související služby. Stejně jako se v reálu liší prodejna se standardní úrovní služeb od levného diskontu zaměřeného primárně na co nejnižší cenu a rezignující na vše ostatní, včetně obvyklé kultury prodeje a příjemného prostředí.

Lecjaký podivný obchodní model může našemu klientovi dávat smysl, ale tím spíše je potřeba mít ujasněny všechny jeho parametry a zákonitosti ještě před tím, než je začneme promítat do konkrétního návrhu.

Návrh informační architektury

Pod obecný pojem informační architektura se někdy zahrnuje zeširoka vlastně celý proces webdesignu, tedy většina kapitol této knihy, vše od zpracování zadání po kompletní dokončení návrhu. My jej zde raději omezíme na užší a konkrétnější význam, pouze na první, potažmo hlavní technickou fázi samotného návrhu webu. Webu, který se zatím vznáší jen kdesi v neurčitu v podobě nepřehledné hromady informací, údajů, produktů, textů, multimédií, požadavků, přání a nesourodých mlhavých představ. A tuto haldu musíme v prvé řadě přebrat, roztřídit, uspořádat a označit její položky a dát jim nějaký řád a strukturu, abychom je následně dokázali co nejlépe prezentovat budoucím uživatelům tak, aby se v onom kdysi nepřehledném chaotickém chuchvalci informací bez problémů vyznali a intuitivně se mezi nimi orientovali — a současně aby s nimi bylo možno optimálně pracovat také z technologického hlediska. To je podstata návrhu informační architektury.

Povšimněte si, že se zde opět setkáváme s variací onoho klíčového principu, který jsme už mnohokrát zmínili: nyní je ale naší prací vhodně vymyslet a nadefinovat vyvážené a funkční propojení nejen mezi budoucími uživateli a stranou našeho klienta — ale navíc ještě také s požadavky a limity na straně realizátora (což můžeme a nemusíme být my sami či naše firma). Nejedná se tedy jen o vztah provozovatel–uživatel, ale také dodavatel–odběratel. Především právě zde budeme narážet na ony projektové mezery — tedy zásadní rozdíly v chápání pojmů a možností způsobené odlišnou odbornou a znalostní bází a profesionální zkušeností zadavatele a realizátora. Zase je to na nás, my stojíme uprostřed a budujeme mezi nimi most.

Stejně jako mnoho dalších kroků a pojmů, které v této knize jen letmo zmiňujeme, načrtáváme v hrubých obrysech a pouze v rychlosti nahlížíme pod pokličku, je i informační architektura samostatným a dost rozsáhlým oborem. Vycházejí knihy věnované pouze jí, nebo dokonce pouze některým jejím částem; obor a jeho různé varianty lze studovat na univerzitách, lze k němu nalézt spoustu článků, prezentací, přednášek, školení. Zde si musíme vystačit jen se stručným a povrchním přehledem.

Návrh informační architektury je srovnatelný s úkolem rozmotat několik klubek příze, o která se pral houf koček, a následně z nich uplést praktickou šálu.

Záměrně stále nemluvíme o tom, že by ta šála měla být hezká. Je poměrně jasné, že v této chvíli, na samotném začátku není vůbec případné se zabývat tím, jaké barvy a vzor bude výsledná šála mít, nebo dokonce jestli bychom třeba nezvládli uháčkovat nějaký rafinovaný vzorek… Máme před sebou teprve nepřehlednou kupu informací a jejich útržků a naším prvořadým cílem je se v nich vyznat a najít v nich nějaký systém. Vytvořit z nich hlavně použitelný a praktický produkt — a řešení otázky, jestli bude taky pohledný, okouzlující, nebo přímo uměleckým dílem, si nechejme na později, až se ve všech těch informacích dokonale vyznáme.

Struktura dat

Organizační struktura dat (datová architektura, struktura informací) je návrhem a definicí toho, jak mají být informace na webu seskupeny, uspořádány a propojeny. Standardně se používají tři běžné typy informačních struktur:

hierarchická — člení informace do nadřazených a podřízených kategorií, informace jsou uspořádány ve stromové struktuře. Uživatel se dostává od informací obecných ke stále konkrétnějším. Typickým příkladem je třeba vědecký systém biologické taxonomie: např. živočichové → strunatci → obratlovci → savci → podivíni → nonsensidae → ptakopysk atd.

databázová — všechny informace jsou si víceméně rovnocenné, každá si s sebou nese nějaké atributy a příznaky a jsou vybírány podle shody v zadaných parametrech. Sem patří např. seznamy produktů, články nebo třeba fotky označené soustavou štítků a klíčových slov a vyhledávané podle jejich zadané kombinace.

hypertextová — informace jsou opět v podstatě rovnocené, ale nemají k sobě přiřazenu soustavu atributů a parametrů. Jednotlivé položky jsou provázány soustavou hypertextových odkazů, uživatel volně přechází podle zájmu z jedné položky na další. Typickou ukázkou je např. Wikipedie.

Pochopitelně tyto základní struktury lze různě kombinovat — např. na základní úrovni e-shopu je obyklá stromová/hierarchická struktura dat, produkty jsou uspořádány do základních kategorií a následně se už upřednostní struktura databázová a uživatel si z produktů v dané sekci vybírá pomocí jejích typických prostředků — třídění a filtrování.

U každé organizační struktury musíme mít definovány startovní či záchytné body. U struktury hierarchické je to zřejmé, startovním bodem je kořen, resp. nejvyšší uzly stromové struktury, které budou vždy někde vypsané, snadno dostupné na nějaké úvodní nebo obsahové stránce a uživatel na nich může procházení dat vždy znovu začít. U informací postavených na databázové struktuře je pak základem nějaký filtr či formulář pro zadání příslušných parametrů a výstupem je seznam položek, které zadání vyhovují. Výchozí nastavení by mělo být co nejobecnější — je lepší, když uživatelé musí zpřesňováním parametrů redukovat původně obsáhlý seznam, než když se naopak snaží tipováním vhodných atributů naslepo rozšiřovat seznam na počátku prázdný.

V třetím případě, u struktury hypertextové, jsou pak vstupní a záchytné body zcela nezbytné, protože v tomto nijak neuspořádaném shluku rovnocenných stránek žádný implicitní startovní bod není. Je tedy nutné nabídnout nějaký výběr několika vhodných vstupních bodů (tematicky, podle aktuálnosti, uživateli na míru apod. — viz informační schémata v další kapitole), na nichž mohou uživatelé procházení stránek zahájit. Mnohem více než u ostatních dvou je zde nezbytnou součástí kvalitní (hypertextové i parametrické) vyhledávání, které bývá pro významnou část uživatelů jak hlavním navigačním prvkem, tak i primární vstupní branou do tohoto komplexu vzájemně provázaných stránek. Ostatně web s hypertextovou organizační strukturou je nejtypičtějším příkladem webu, na který se většina uživatelů dostává „záchodovým okénkem“ (viz dříve), tj. přichází přes odkazy z vyhledávačů nebo jiných webů na konkrétní stránku uvnitř struktury, aniž kdy navštívili úvodní stranu.

Spousta uživatelů Wikipedie prakticky nezná její úvodní stranu.

V prvé řadě si tedy musíme ujasnit a rozhodnout, jak to hlavní, co chce web nabízet (produkty, články, příspěvky), má být uspořádáno a jakou strukturu dat pro daný web použijeme. Pochopitelně, pokud už na začátku máme jasno, že daný firemní web bude mít asi tak pět stránek, provázaných odkazy ve společném menu, není moc co řešit a za deset sekund máme informační architekturu hotovou. Ale jedná-li se o web rozsáhlejší, který má návštěvníkům nabízet tisíce, statisíce stránek, položek, témat či produktů, bude rozhodnutí o struktuře dat naprosto klíčové.

Pozn.: Celkem často narazíme na zásadní rozhodnutí, zda se informace mají třídit do kategorií typu 1:M (každá položka je umístěna právě v jedné kategorii) a zda tyto kategorie mají být lineární, nebo hierarchicky vnořené — anebo zda použít systém štítků typu M:N (každá položka může mít přiřazen libovolný počet štítků, každý štítek může být přiřazen k libovolnému množství položek). Toto rozhodnutí doporučuji předem opravdu dobře zvážit, nezřídka na něm závisí následná volba publikačního systému nebo návrh databází a serverových datových struktur a často bývá náročné to dodatečně měnit. Většinou platí, že štítky jsou obecnější, variabilnější a praktičtější, a dokonce i jednoúrovňová struktura kategorií se jimi dá snadno nasimulovat. Ale někdy je systém vnořených kategorií zkrátka vhodnější a pro funkční výsledek přínosnější — a ty se už pomocí štítků simulují o něco složitěji (ne že by to nešlo, ale přináší to víc komplikací než užitku).

Informační schémata

Užitečnou pomůckou při návrhu webu je následně i definování vnějších logických struktur a informačních schémat. Zatímco v předchozím kroku jsme se snažili vnést řád a systém do vnitřního uspořádání samotných dat, zde nám jde spíš o nalezení logických struktur a celků v jejich výsledné prezentaci. Zde už nehledáme kompromisy mezi požadavky dodavatele a možnostmi odběratele, teď máme zase na mysli primárně blaho budoucích uživatelů.

Snažíme se najít a nastavit takovou logiku, jakou bude náš typický uživatel na webu hledat. Chceme mu ušít prezentaci na míru, aby její vnitřní organizaci okamžitě pochopil a po webu se snadno navigoval. Máme přitom stále na mysli současně efektivní uspokojování zájmů a potřeb uživatelů i jejich co nejpřímější směrování ke klientem požadovaným CTA (Call To Action). Měli bychom se co nejlépe vžít do již navržených typických postav budoucích uživatelů a snažit se vnímat z jejich pohledu všechny hlavní parametry:

proč, jak a kde na webu se ocitnou,

co zde budou očekávat,

podle čeho se budou nejspíše snažit orientovat;

a současně s tím i hlavní zájem provozovatele webu:

jak přitom tyto uživatele nejsnáze a nejpohodlněji dovedeme k požadovanému cíli?

Z tohoto pohledu pak zvolíme ideální schémata, kterým budou návštěvníci nejlépe rozumět, budou jim vyhovovat, budou je chtít používat a současně budou plnit příslušný účel. Možností je mnoho a vlastně poprvé se zde naplno otvírá velký prostor pro naši kreativitu. Uveďme si několik příkladů běžně používaných schémat:

kategorizace, tematické členění — web, často v souladu s použitou hierarchickou strukturou dat, člení informace podle nějakých hlavních kategorií, témat, oblastí. Nacházíme jej hlavně u katalogů výrobků, zpravodajských webů, encyklopedií atd.

schéma zaměřené na úkoly (task-oriented) — obsah webu je rozdělen na nejběžnější základní úkoly či činnosti, které zde uživatel může provádět, a pro každý z nich je nabízena samostatná větev webu. U e-shopů pak často nacházíme hlavní úkoly typu: Přihlásit, Registrovat, Hledat, Nakoupit, Objednat, Spravovat účet; u prezentací služeb pak třeba Seznámit se, Vyzkoušet, Vybrat předplatné apod.

schéma zaměřené na cíle (goal-oriented) — web nabízí optimalizovanou cestu přímo k řešení vybraných úloh. Častou pomůckou jsou zde různé strukturované scénáře a průvodci (wizards) nedovolující uživateli dočasně opustit zvolený rámec činností před dosažením cíle. Typickými představiteli jsou průvodci typu 5 jednoduchých kroků k registraci, objednávková sekvence v mnoha e-shopech, Asistent pro vyplnění formuláře WBGX159a atd. Tato schémata jsou pochopitelně často úzce vázána na požadované CTA daného webu.

sociodemografické členění — web nabízí vybrané oblasti informací pro různé vybrané skupiny uživatelů: podle pohlaví, věku, bydliště, profese. Častým příkladem je hlavní větvení některých webů na sekce pro veřejnost, pro odborníky, pro partnery apod.

žebříčky popularity — schéma často používané jako doplněk, někdy ale může být funkční i jako primární informační struktura webu. Využívá se zde dostupných statistických údajů k prezentaci dat uspořádaných podle různých kritérií, která mohou být pro uživatele zajímavá: Ostatní si nejčastěji kupují toto; Vaše přátele zaujalo také tohle; Ten, kdo si koupil X, koupil si k tomu často také toto; Dnes lidé nejčastěji četli tyto články apod. — Pozn.: Některé e-shopy tento poměrně funkční a účinný nástroj zbytečně opomíjejí, ačkoli může být zajímavým generátorem obratu. Je přitom založen na lidské přirozenosti sdružovat se a jít s davem a současně i z faktu, že když už někdo v e-shopu nakoupí a platí jednou poštovné, daleko snáze a raději do košíku přihodí lecjaké další drobnosti.

stavové schéma — příp. lze označit i jako lineární/žádné/nulové schéma. To za určitých okolností může být funkčnější než nejsofistikovanější struktury a členění: všechny informace jsou na webu nabídnuty bez velkých cirátů na jedné hromadě v nějakém velkém seznamu, seřazeném podle nějakého základního kritéria (články podle času, výrobky podle abecedy), jsou nad nimi k dispozici nějaké praktické vyhledávací, třídicí a filtrovací nástroje, které pouze podle zadaných parametrů mění stav seznamu položek (tedy zda konkrétní položky jsou/nejsou zobrazeny a která z nich je zobrazena dříve než jiné), a je na uživatelích, aby se jím probírali dle libosti. (Namístě je připomenout, že k tomuto schématu coby ideálu dospěly po letech pokusů a experimentů ty vůbec nejpoužívanější weby, tj. vyhledávače.)

jiná schémata, hybridní (mix výše uvedených), uživatelsky přizpůsobitelná (použití oblíbených/preferovaných položek zvolených uživatelem), behaviouristická (založená na sledování chování a preferencí uživatele) a další.

Základním pravidlem je informační strukturu webu příliš nepřekombinovat, aby zůstala pro uživatele vždy přehledná a srozumitelná. Mícháme-li různé přístupy a navzájem různá schémata, mělo by se tak dít raději na různých úrovních — např.: hlavní členění je tematické, dále lineární/stavové, pouze s vyhledávacím aparátem. Anebo: celý web je členěn podle úkolů, z nichž nákupní proces používá další kombinovaná schémata a ostatní úkoly (registrace, objednávka atd.) jsou orientované na konkrétní cíle a prezentované formou uzavřených průvodců.

Weby a podweby

Dříve nebo později ovšem narazíme na případ webu, kde se nám výše uvedené struktury, členění a schémata poněkud promíchají a není snadné, nebo dokonce ani možné určit nějaké hlavní a dominantní parametry. Obvykle to nastane v situaci, kdy se snažíme tvořit web složený ve své podstatě ze dvou či více různých a spíše nesourodých dílčích webů. Např. e-shop spojený s firemním webem či online magazínem, veřejná prezentace firmy a její intranet v jednom nebo třeba kombinace produktových stránek a zákaznického fóra.

Z hlediska informační architektury je nezbytné takové nesourodé dílčí weby správně identifikovat a následně zřetelně oddělit a zpracovávat samostatně, jako individuální weby. Takový e-shop, firemní či produktová prezentace, online magazín nebo diskusní fórum mají každý své vlastní zákonitosti, různá pravidla a rozdílné požadavky a musíme je navrhovat, definovat jejich zdroje a způsob zpracování zcela samostatně.

To ovšem platí pro vnitřní architekturu a specifikaci projektu pro vývojáře a všechny ostatní, kdo se na realizaci webu budou podílet. Zde je nanejvýš vhodné co nejvíce takové dílčí projekty oddělit a z technického pohledu vyvíjet jako samostatné dílčí weby. Ovšem z pohledu uživatele je situace zcela odlišná, pro něj má vzniknout co možná konzistentní produkt, jeden ucelený web s několika poměrně odlišnými funkcemi, ale s jednotným vzhledem, ideou, stylem. Zde máme jako designéři poměrně zásadní úkol rozhodnout, jak a nakolik mají být některé součásti integrálně spojeny, a jak a nakolik mají být jiné zase zřetelně odděleny.

Jinými slovy, pro každý z takových dílčích podwebů musíme předem a jasně zvolit jednu z možných variant:

bude vystupovat jako zcela integrální součást hlavního webu

bude vystupovat jako jakási samostatná sekce hlavního webu a bude s ním nějak vizuálně propojen

bude vystupovat jako samostatný web

Ve všech případech se ale jedná pouze o míru a kvalitu použitých ryze designérských prostředků, které budou k případnému propojení použity. Takové zákaznické fórum či e-shop připojené k firemnímu webu jsou z principu odlišné projekty a technologicky musí být vyvíjeny samostatně tak jako tak. Tím, co je na našem rozhodnutí a zvážení, je jen způsob a míra integrace do mateřského webu. A jedinými nástroji, které k tomu můžeme použít, jsou shodné navigační vzory a shodná či podobná vizuální prezentace, příp. podobná informační schémata (viz výše). Jakákoli snaha o sjednocování datových struktur, nebo dokonce implementačních technologií u takto nesourodých dílčích projektů málokdy vede k něčemu dobrému.

Zjednodušeně řečeno, možná je teoreticky možné vytvořit firemní prezentaci a zákaznické fórum nad jedním publikačním systémem, možná lze zrealizovat tematickou encyklopedii i dobrý e-shop touž technologií. Ale obvykle jedna nebo druhá část naroubováním na nevhodný nástroj utrpí na kvalitě a povede to i ke složitosti pozdější správy. Daleko vhodnější je pro každou z nich použít nástroj a technologii co možná nejvhodnější a výsledné dílčí weby pak propojit jen vhodně korespondující grafikou a sdíleným navigačním systémem.

Rozhodovat bychom se měli pak jen o oné míře propojení. Zatímco někde je vhodné, a dokonce i implementačně snadné takové dva technologicky odlišné dílčí weby vyrobit vizuálně podobné či téměř shodné, takže pro uživatele nemusí být šev mezi nimi ani patrný, někdy bude taková snaha složitá a ve výsledku drahá. Anebo může být dokonce nežádoucí. Je pak na rozhodnutí designéra (po konzultaci s klientem, případně marketéry), zda třeba zákaznické fórum má skutečně vizuálně působit jako integrální součást jeho firemního webu, zda e-shop s vlastními produkty musí být opravdu pouhou položkou v rámci prezentace společnosti, nebo zda není z mnoha ohledů lepší jej umístit na vlastní doménu a z firemního webu na něj pouze odkazovat. A jestli a nakolik je vůbec žádoucí, aby takové dílčí weby byly vůbec vizuálně nějak sjednocené. Často se ukazuje, že vizuální identita e-shopu a jeho provozovatele vůbec nemusí souviset a každá si jde svou vlastní cestou.

Ať už se ale rozhodneme jakkoli, s takto definovaným dílčím webem následně v rámci návrhu vlastního webu můžeme pracovat jako s jakoukoli vlastní kategorií, rubrikou či podstránkou (zahrnout jej jako položku do hlavní navigace, do menu atd.) — anebo podle potřeby naopak jako s odkazem na cizí web a nakládat s ním podle toho.

Typ a objem informací

To, co ale musíme vědět ze všeho nejdříve, a pokud možno co nejpřesněji, je druh a množství informací, s nimiž budeme pracovat. Co bude tou hlavní a zásadní položkou prezentovanou na webu: článek, produkt, video, fotka, komentář, obecný soubor ke stažení? Má být primární formou sdělení text, fotka, grafika, multimédia, nějaká struktura, či něco jiného? Kombinace více typů informací? Jakých nejčastěji a v jaké podobě (např. články + vložené fotky uložené na serveru + externí videa)?

Jak velký web bude, tedy kolik článků, příspěvků, položek, výrobků, stránek na něm bude k nalezení? A jaký bude vývoj jeho velikosti v čase: během vývoje, při testování, ihned po spuštění, za měsíc, za rok, za tři roky? S jakou frekvencí a v jakém objemu budou data přibývat? Nakolik půjde informace při přidávání organizovat (označovat štítky, klíčovými slovy, zařazovat do kategorií), nakolik tato metadata budou spolehlivá?

Jak velké a jak informačně mohutné budou jednotlivé položky — jedná se o krátké příspěvky, mnohastránkové vědecké články s mnoha ilustracemi a přílohami, nebo spíše strukturovaná data, jako např. databáze produktů? Jaké budou mít jednotlivé položky přiřazeny atributy — příznaky, štítky, klíčová slova apod.? Kolik takových atributů řádově bude: jeden dva? Desítky, stovky?

Většinu těchto informací můžeme, ale nemusíme znát už ze samotného zadání. Některé mohou pocházet přímo z požadavků a přání klienta, jiné ale naopak až z naší interpretace jeho záměru a z navrhovaného řešení. Zde je klíčové místo na to, si tyto údaje ujasnit a zafixovat, na nastavení jejich hodnot bude stát většina následujících kroků — od návrhu struktury dat po technologické řešení a potřebné hardwarové vybavení.

Máme-li představu, s jakým objemem a druhem informací budeme nadále pracovat, můžeme se pustit do jejich organizování a uspořádávání. Nestačí přitom jen najít řád a strukturu pro samotná data, která má web sdělovat, ale musíme také zvolit správnou formu pro jejich prezentaci. Jinými slovy, vytváříme a definujeme současně datovou strukturu a informační schémata.

Mapa webu

Když máme ujasněnou představu o informacích, které web má prezentovat, o struktuře dat i schématech jejich prezentace, je nanejvýš vhodné všechny tyto údaje formálně zpracovat do formy mapy webu (site map). To je grafické organizační schéma, do kterého zakreslíme vytvořené informační struktury, kategorie, sekce, skupiny stránek, podweby a weby přidružené, všechny připojené metastránky nebo jiné podpůrné nástroje. Struktura mapy webu by měla kopírovat především navržená informační schémata: tam, kde používáme nějaké kategorie či hierarchické členění, bude mít mapa stromovou strukturu; tam, kde je schéma stavové a kde se má nacházet halda databázově strukturovaných informací s nějakým třídicím a vyhledávacím aparátem, bude zobrazen neuspořádaný shluk položek; tam, kde má být použit průvodce nebo třeba interaktivní dotazník, bude mít příslušná sekvence v mapě webu nejspíše podobu nějakého vývojového grafu atd.

Forma, jakou mapě webu máme dát, není nijak standardizovaná ani obecně zavedená. Někdo dává přednost standardním šablonám organizačních diagramů, někdo používá nástroje na myšlenkové mapy (mind maps), jiný mapu zpracuje kreativně v grafickém programu, někdo nedá dopustit na papír, tužku a gumu nebo na barevné samolepicí lístečky. Na postupu a formě nezáleží, hlavní je zde přehledná a hlavně kompletní mapa.

Vztahy mezi stránkami a sekcemi mají znázorňovat vnitřní uspořádání, architekturu a logiku celého webu, mají zde být seskupeny logické celky tak, jak jsme je navrhli, má být patrné, co s čím úzce souvisí a které části webu jsou spíš nezávislé; co jsou klíčové informace a co jen přidružené podpůrné nástroje. Hlavní je, aby mapa webu byla úplná. Musíme sem dostat naprosto všechno, o čem víme, že se má webu objevit, vše zařadit na správné místo do správné struktury a v případě potřeby některá schémata či datové struktury ještě přehodnotit a upravit — aby celek dával co nejlepší smysl.

Co není na mapě webu, to nemá na skutečném webu co dělat.

Mapa webu má mnoho užitečných účelů. Především nám samotným obratem hodně pomůže při návrhu optimální navigace. Je to také důležité vodítko pro všechny, kteří se na realizaci podílejí. V ideálním případě by každý vývojář, grafik, marketér a vůbec všichni zúčastnění měli mít nad pracovním stolem neustále před očima velký barevný obrázek mapy webu, aby si udržovali trvalý kontakt s tím, na čem vlastně pracují.

A konečně je to také důležitý dokument pro našeho klienta, který zde poprvé uvidí všechnu tu někdejší přehršel nesourodých a neuspořádaných údajů, které se nám dosud snažil předat, přetavenou do konkrétních logických struktur. Není výjimkou, že taková mapa webu vede k dalším diskusím a upřesňování a měnění parametrů zadání, protože teprve v takto uspořádané a přehledné formě začnou být patrné věci, které do té doby zůstávaly nenápadně nepovšimnuty v pozadí a teď se dožadují zvýšené pozornosti.

Návrh navigační logiky

Mapa webu je nezbytným podkladem pro návrh navigace. Nelze definovat nějakou navigační logiku, dokud před sebou nevidíme kompletní strukturu webu a nemáme ucelený obrázek toho, v rámci čeho chceme uživatelům vlastně usnadňovat orientaci.

Navigační logika a styl navigace po webu je jedním z klíčových prvků návrhu. A to hned ze dvou důvodů. Za prvé je dobrá navigace asi nejpodstatnějším faktorem použitelnosti a dobrého uživatelského prožitku. To, jak jsou informace na webu rozčleněny, uspořádány a jaká forma výběru a přesunu mezi nimi je poskytnuta, je jednou z nejdůležitějších věcí, které na webu vnímáme a které tvoří hranici mezi webem skvělým a děsivým.

Špatná, nepřehledná a nelogická navigace dokáže spolehlivě zabít sebelepší web.

Vzpomenete si na nějaký web, kam nechodíte rádi? Jsou dokonce takové, které vyloženě nenávidíte? Snad každý takové má. A je to kvůli ošklivé grafice, neobratnému stylu textů nebo třeba nezajímavé doméně? Troufám si tvrdit, že velká spousta webů, které nenávidíme, selhává hlavně v navigaci. Na webu se nevyznáme, těžko nacházíme hledané, nevíme, kde jsme a jak se dostat na kýženou stránku, nebo dokonce jak právě zobrazenou stránku opustit. Absolutně nejhorší jsou pak weby a online aplikace, které nabízejí návod k použití, bez nějž neuděláme ani nejzákladnější úkony.

Web, který potřebuje manuál, je principiálně špatný.

Druhým zásadním faktorem, proč považujeme návrh navigace za klíčový, je skutečnost, kterou si málokdo uvědomuje: navigační logika určuje formu prezentace a potažmo strukturu stránek, nikoli naopak. Přesněji řečeno jsou to použité navigační vzory, kterým — většinou nevědomky a automaticky — podřizujeme celou stavbu obsahu webu. Často aniž bychom si byli vědomi toho, že prostou změnou navigační logiky můžeme velmi zásadně změnit věci, které se jinak zdají jako dané a nezměnitelné.

Důležitost tzv. navigačních vzorů (navigation patterns) přitom významně roste i s čím dál rozšířenějším používáním předpřipravených stavebnic (frameworků) pro tvorbu webu. Navigační vzory mají rozhodující úlohu hlavně u mobilních aplikací a mobilních webů a právě hotové stavebnice, které usnadňují a sjednocují vývoj responzivních webů pro počítačové i mobilní platformy, jejich význam posilují a přenášejí na většinu běžných webů. Jako už mnohokrát v této knize musíme zmínit, že téma navigačních vzorů je poměrně rozsáhlým předmětem ke studiu, dalece překračuje rámec možností této publikace a musíme si vystačit pouze se stručnou a povrchní zmínkou.

Co přesně těmito navigačními vzory rozumíme a proč tak zásadně ovlivňují celý obsah webu? Navigační vzor je kombinace zvolené formy rozcestníku (vodorovné/svislé menu, kontextová nabídka, sada záložek, toolbar, rozbalovací víceúrovňové menu, shluk štítků, odkazy v patičce stránek atd.), typu akce, kterou jeho použití způsobí, a také vlivu, který to má na samotný rozcestník. Po akci se může načíst celá nová stránka ve stejném navigačním vzoru, jenom v menu bude zvýrazněná jiná položka. Může se také načíst úplně jiná sekce s úplně jiným navigačním vzorem a stávající navigace se stane nedostupnou. Nebo stránka zůstane a změní se jen její část. Může se otevřít nějaká modální sekvence, tedy nějaké „okno“, a dokud se nezavře, veškerá další interakce probíhá pouze uvnitř něj a vše kolem bude nedostupné atd.

Je zřejmé, že právě použitý navigační vzor je určující pro samotný obsah zobrazené stránky. Odlišně se bude pracovat např. s dokumentem, který se po kliknutí otevře v modálním okně, kdy všechno kolem bude nedostupné, dokud uživatel dokument zase nezavře. Jinak s týmž dokumentem, který se bude otevírat na nové stránce s plnohodnotnou navigací. A ještě jinak, pokud se stejný dokument zobrazí ve stránce v sekci Dokumenty s vlastní navigační strukturou… Třikrát stejné kliknutí na stejný odkaz, ale tři různé navigační vzory, tři velmi odlišné výsledky a tři rozdílné způsoby, jak aplikaci dále používat, případně vrátit do předchozího stavu.

Uspořádání každé stránky je podmíněno použitým navigačním vzorem.

Nemalou roli hraje i kombinace s doplňkovými navigačními nástroji (drobečková navigace, výsledek kliknutí na tlačítko Zpět v prohlížeči atd.), nemluvě o možných logických lapsech a kolizích při zobrazení téhož dokumentu/stránky v různých kontextech s různými navigačními vzory — např. pokud se stránka postavená na globálním navigačním vzoru založeném na hlavním menu webu zobrazí někde v x-té navigační úrovni pod jednou ze záložek; nebo když se náhle ocitneme na formuláři s osobními údaji, který byl zamýšlen být jen dílčím krokem v nějaké modální sekvenci objednávkového procesu. Musíme dobře promyslet všechny možné kombinace i méně typické situace, které by za určitých okolností mohly nastat, a zabránit tomu, aby vůbec nastaly, aby se nekompatibilní navigační vzory nemohly vzájemně promíchat. Pokud k takové situaci dojde, znamená to téměř pokaždé pro uživatele nepříjemnou zkušenost, kvůli které může na náš web navždy zanevřít.

Navigační logika by měla obvykle hladce kopírovat použitá informační schémata. V části webu, kde je nadefinováno hierarchické členění, by měla být použita hierarchická navigace. U stavových schémat založených na použití filtrů, třídění a vyhledávání, by navigace měla umět pracovat hlavně s přechodem na Předchozí/Výchozí/Oblíbené apod. U modálních průvodců by mělo být hlavním navigačním vzorem schéma Vpřed/Zpět/Přeskočit, lze zvážit kreativní práci s historií prohlížeče atd. Je přitom důležité dobře oddělit hlavní obsah webu a různé metastránky a pomocné nástroje — ty by neměly být zahrnovány do hlavních navigačních vzorů a vždy by měly být odkazovány odděleně (v záhlaví/patičce stránek, v samostatném menu apod.). Někdy je ke zvážení i jejich otevírání do nového okna prohlížeče, aby nenarušovaly aktuální navigační schéma.

Základem dobré navigace je ale vždy její srozumitelnost a intuitivnost. Pro ně je pak vždy klíčovým faktorem především konzistence — ať už je navigace v rámci celého webu jakákoli, je důležité, aby stejné věci byly v navigaci pojmenovány a odkazovány stejně. Je-li stránka Správa účtu na na jednom místě odkazována jako Nastavení, v jiné časti webu jako Upravit… a v hlavním menu ji najdeme pod odkazem Můj účet, je to hotová cesta do pekel, vydlážděná skalpy našich nebohých zmatených uživatelů.

Na stejné stránky odkazujme vždy a všude stejně.

Důležitým parametrem je také zvolený komunikační styl navigace. Bude slovní, nebo obrázková, a budou pak použité ikony, symboly a obrázky všem srozumitelné? Má být co nejvíc standardní, nebo nějakým způsobem atypická, či přímo extravagantní? Má jít uživateli „po srsti“, nebo naopak provokovat, a dokonce záměrně trochu mást? Odpovědi často přímo plynou především z definice zadání webu a specifikace cílových skupin. Ach ano, v těch několika málo, malinko zcela výjimečných odůvodněných a desítkami zatraceně dobrých argumentů podpořených případech si designér na nějaké experimenty a zvláštnosti může troufnout a popustit otěže své kreativitě. Ve všech ostatních případech jsou ale konvence, důvěrně známé vzory chování a zavedené standardy svatým grálem, jehož se zkušený designér chce za každou cenu držet.

Jistěže, navrhovat kontroverzní a v mnoha ohledech naprosto nestandardní web pro cílovou skupinu mladých, neklidných a prudce inteligentních avantgardních umělců je možná snem leckterého designéra — ale to potká jen několik vyvolených možná jednou za život. V naprosté většině případů se designér snaží o pravý opak: nevybočovat, nešokovat, používat všeobecně známé a co možná standardní vzory, navrhnout navigaci tak, aby ji budoucí uživatel vnímal jako známou, naprosto přirozenou, logickou a intuitivní a nemusel nad ní vůbec přemýšlet. Jako by ani nebyla žádná jiná možná.

A konečně musíme při návrhu navigace stále myslet na její duální roli, neboť kromě toho, že slouží uživateli jako nástroj k přecházení mezi stránkami, současně nese důležitou informaci. Navigace totiž musí uživateli jasně a srozumitelně sdělovat, kde na webu se nachází — v jaké části, jaké hloubce, v jakém kontextu. Každý navigační prvek by měl v sobě obsahovat onen pomyslný červený puntík Zde se nacházíte, který známe z orientačních schémat úřadů a plánů měst.

Navržené navigační vzory pro jednotlivé části webu bychom měli následně vhodně doplnit do mapy webu. Je dobré zde nějak označit a zvýraznit části, které používají stejné navigační schéma a sdílejí týž navigační vzor, a označit místa, kde se navigační logika nějakým zásadním způsobem mění. Např. odděleně zobrazit metastránky, které stojí mimo všechna navigační schémata (a třeba se otevírají do nového okna); zarámovat sekce, které sdílejí stejnou navigaci, a označit tak hranice, kde se navigační vzor mění a uživatel přechází z jedné navigační logiky do jiné; zarámovat a odlišit všechny modální sekvence, které stojí zcela mimo jakoukoli stávající navigaci atd.

Specifikace navigační logiky a soupis použitých navigačních vzorů bude později sloužit i pro vizuální design a grafický návrh. Grafický designér (obzvlášť pokud to nejsme my sami) musí velmi dobře chápat, jak se během pohybu po webu přechází mezi různými navigační vzory i jaká je jeho dynamika, pokud navigační vzor zůstává stejný — tzn. jaké jsou všechny možné stavy jednotlivých položek navigace, co se kde a jak při průchodu webem mění, co je třeba kdy schovat či zobrazit, zakázat či povolit, jak se mají měnit grafické symboly a styl různých položek navigace za různých okolností atd.

Strategie personalizace

Pokud má web alespoň v nějaké míře podporovat personalizaci, tedy rozpoznávání a rozlišování konkrétních uživatelů, a má různým návštěvníkům poskytovat odlišné informace či služby podle jejich identifikace, je důležité už v prvních fázích zvolit strategii pro způsob rozpoznávání, registraci a přihlašování uživatelů. A následně musíme nadefinovat různé role a příslušné úrovně přístupových práv, např. neznámý uživatel, rozpoznaný opakovaný návštěvník, nepřihlášený/přihlášený registrovaný uživatel, redaktor, správce, administrátor atd.

V první fázi se web obvykle snaží rozpoznat uživatele sám, obvykle podle dat uložených při jeho předchozích návštěvách (v cookies či místním úložišti v prohlížeči). Součástí personalizační strategie proto musí být pravidla, jaká data a kam se budou během používání webu ukládat a jak budou využita k identifikaci uživatele. Pochopitelně pouhé rozpoznání nepřihlášeného návštěvníka je méně náročné na přesnost a bezpečnost a lze použít i metody na hranici tipování (Vypadá to, že jste na tomto webu už byl. Vy asi budete Václav, že? Pokud ne, omlouváme se za omyl, klikněte sem), zatímco identifikace přihlášeného uživatele mezi jednotlivými návštěvami musí být přesná a zcela spolehlivá.

Ve hře je hlavně bezpečnost a ochrana soukromí. Přihlašovací i registrační formuláře obsahují citlivá data a pocit bezpečnosti a zajištění soukromí je pro každého uživatele velmi cenný. Pokud jej jakkoli narušíme, může to web stát spousty uživatelů a pokaženou reputaci, která se jen těžko napravuje. Skrytá manipulace s heslem ve formulářích je samozřejmým základem, ale důležité je i následné zpracování. Ani sám provozovatel webu by uživatelovo heslo neměl znát. Měl by je mít uloženo v zašifrované podobě a umět pouze porovnat, zda se zadávané heslo s tím uloženým shoduje. Na to jsou standardní nástroje a není v tom žádný technický problém. Pokud ovšem uživatel po registraci obdrží e-mail, v němž je jeho heslo zapsáno v otevřené podobě, je to nejen bezpečnostní díra pro celý web (třeba proto, že tyto potvrzovací e-maily může kdekdo relativně snadno zachytávat a hesla shromažďovat), ale také jasná informace pro uživatele, že s bezpečností a soukromím si provozovatel webu hlavu příliš neláme.

S uživatelovým heslem zacházejme jako s jeho intimní fotografií. Nesmíme narušit jeho důvěru v to, že je bezpečně uloženo a nikdo cizí si jej neprohlíží.

Velmi důležitou stránkou jsou pak zvolené způsoby přihlašování, doba trvání (perzistence) přihlášení, pravidla a frekvence automatického odhlašování. Samozřejmostí musí být možnost manuálního odhlášení: pokud má web možnost přihlášení, je zcela nepřípustné, aby zde pak také nebylo k dispozici nějaké tlačítko Odhlásit (Logout). Přihlášení a následná identifikace uživatele může probíhat na vlastním serveru provozovatele nebo prostřednictvím služeb třetích stran (např. přihlášení pomocí sociálních sítí), případně kombinací obojího. Přihlášení by mělo mít dostatečně dlouhou trvanlivost a doba by měla odpovídat alespoň střední době opakované návštěvy, aby se uživatelé nemuseli opakovaně přihlašovat při každé návštěvě. Příliš krátká perzistence a časté odhlašování vede jen k naštvání uživatelů a popírá smysl nástrojů pro trvalé přihlášení. Pouze v případě webů s vysokým stupněm zabezpečení (např. u bankovní aplikace) je brzké automatické odhlašování — i třeba po kratší době nečinnosti — obvykle žádoucí.

Naše strategie musí obsahovat popis, co a v jaké míře bude web poskytovat uživatelům v jednotlivých rolích. Jaké informace a jaké dodatečné nástroje se zobrazí uživateli po jeho rozpoznání nebo po přihlášení. Už v této fázi musíme rozhodnout, zda registrace a přihlašování budou k dispozici na všech stránkách, nebo pouze na úvodní straně, nebo budou dokonce umístěny na samostatné stránce či speciálním podwebu. U provozovatelů s větším portfoliem služeb je potřeba zvážit jednotnou registraci a společné přihlášení pro více služeb. Musíme při tom ale pamatovat na různé komplikace při sdílení dat mezi různými doménami (platnost cookies, dostupnost místního úložiště, funkčnost správců hesel při přihlašování na jiné doméně atd.).

Nedílnou součástí personalizační strategie je popis celého procesu registrace, tedy postup vytvoření nového uživatelského účtu. Od zadání požadovaných údajů přes postup potvrzování a případné verifikace (tj. ověření platnosti e-mailové adresy, zadaného telefonního čísla, platební karty, věku apod.), typy a aspoň přibližný obsah všech potvrzovacích a informačních e-mailů až po strategie řešení různých nestandardních situací (ztráta hesla, změna klíčových identifikačních údajů, zneužití osobních údajů a kompromitace uživatelského účtu, postup zrušení účtu atd.).

O čím větší a zabezpečenější web se jedná, tím podrobnější popis strategie personalizace musí být. U webů a aplikací, kde je vyšší stupeň bezpečnosti důležitý, musí být celý tento proces navržen skutečně důkladně a vyžaduje si obvykle samostatnou specifikaci nad rámec běžného designu webu, která bude podrobně popisovat postup ve všech možných stavech a řešení všech typických i nestandardních situací. Běžné weby ovšem často pouze převezmou nějakou zavedenou strategii, která bývá nedílnou součástí publikačního systému či hotového řešení pro e-komerci, které se pro web mají použít. Pokud ovšem chceme personalizaci/registraci na webu aplikovat, a přitom neplánujeme použít žádné hotové řešení a hodláme si vše tvořit sami od základu, je důležité tuto strategii nepodcenit, co nejlépe si ji rozmyslet a připravit do všech detailů, na které si dokážeme vzpomenout. V oblasti zabezpečení není nejlepší nápad vytvářet věci ad hoc za pochodu a učit se chybami.

Další základní technické parametry

Zbývá nadefinovat další základní parametry, které může ještě diktovat designér v rámci celkové koncepce webu. Některé z nich budou přímo vyplývat ze zadání, z použité informační architektury a navigačních vzorů, další s nimi budou úzce souviset a jejich podrobná specifikace bude na našem rozhodnutí:

Které stránky a jejich části mají být statické (generované na serveru a odesílané jako celek do prohlížeče), které mají mít rozšířenou funkčnost doplněnou až po načtení a které mají být kompletně generované až na straně klienta (tj. nějakým skriptem v prohlížeči).

Které stránky ponesou hlavní sdělení pouze v HTML a na kterých prostřednictvím jiných vložených technologií (Flash, Java, jiné zásuvné moduly, audio/video, 3D a vektorová grafika atd.), pokud možno rovnou s popisem a požadavky na použitou technologii na straně klienta a především se záložním řešením, jak postupovat, pokud u klienta daná technologie nebude dostupná.

Jaký bude jmenný prostor webu? Tj. zda vše poběží pod stejnou doménou, nebo zda některé části budou provozovány na vlastních dedikovaných doménách; zda budeme nějak řešit (a jak?) případné kolize při přechodu mezi doménami; jaká budou pravidla pro vytváření odkazů, zda/jak budeme chtít pracovat s „hezkými“ adresami stránek a jaká budou pravidla pro překladač URL (nastavení mod_rewrite na serveru); jaká budou pravidla pro vytváření a publikování adres určených pro veřejné sdílení po internetu atd.

Jak budou jednotlivé části webu provázány — jsou zde (a které) nějaké části, které mají fungovat v jiném stylu, v jiném režimu, na jiné doméně apod.? Jsou zde (a které) části, které musí pracovat v modálním režimu? Které části nebo které odkazy se mají otevírat v novém okně prohlížeče? Atd.

Bude web nabízen ve více verzích, např. v různých jazycích? Budou všechny verze rovnocenné, nebo budou některé zjednodušené? Jaká verze bude primární, jak bude vznikat alternativní obsah? Jak se mezi verzemi budou uživatelé přepínat?

Má web nějak spolupracovat či interagovat s jinými weby nebo online službami? Budou se do stránek načítat prvky z jiných webů — např. audio/video, mapy, grafy, sociální komentáře, příspěvky ze sociálních sítí; budou integrovány nějaké služby sociálních sítí atd.? Na kterých stránkách, jaké a v jakém rozsahu?

Má web nějakým specifickým způsobem (jak?) pracovat s dostupným rozhraním a službami prohlížeče? Tzn. s historií prohlížeče, se sessions, cookies, s místním úložištěm v prohlížeči (local storage)…

Atd., cokoli dalšího si myslíme, že do základního architektonického návrhu webu patří a o čem by měli všichni zainteresovaní vědět včas.

Tím budeme mít web v hrubých obrysech navržený. Na mapě webu máme zakresleny všechny jeho budoucí stránky, logické celky, do nichž je obsah webu rozdělen, a organizační vztahy mezi nimi. Máme nadefinovanou strukturu dat i navigační vzory pro všechny části webu, máme sepsány všechny základní technické parametry. Můžeme se začít bavit o tom, jak se to celé bude konkrétně realizovat.

Extra kapitola: e-shopy

Jednu odbočku ovšem ještě musíme udělat. Popravdě by to měla být spíš vsuvka o rozsahu několika skript a publikací pro pár semestrů studia Specifika návrhu a provozování online prodejen — jak je ale v této knize už zvykem, musíme si vystačit jen s touto stručnou kapitolkou. Ano, tématem, které jsme zatím trochu opomíjeli, jsou e-shopy a především návrh nákupního procesu, kterému musí webdesignér věnovat vždy nadstandardní pozornost. Pokud web, který navrhujeme, má být právě e-shop, bude spousta věcí v návrhu mnohem složitější a detailnější a musíme se připravit řešit věci, se kterými se u jiných webů nesetkáme.

Je zde ovšem na místě nejprve předeslat, že právě u online obchodů platí více než kde jinde, že tím nejpodstatnějším a nejzásadnějším není web samotný, ale všechno ostatní za ním. Každý prosperující e-shop stojí a padá se spolehlivou evidencí zboží, kvalitně zpracovanými a udržovanými databázemi, dobrým informačním systémem, s perfektně fungující logistikou (zásobování, sklad, expedice, spedice), dobře implementovanými platebními metodami, před- i poprodejními službami, marketingem atd. Web samotný je „jen“ jejich obálkou. Nikoli nedůležitou — i ona může výrazně pomoci i významně uškodit — ale také ani nejzásadnější. Sebelepší webové stránky zkrátka bez funkčního a spolehlivého zázemí a perfektně šlapajícího obchodně-logistického jádra nikomu funkční a úspěšný e-shop nezajistí.

To je ovšem podstatná informace především pro provozovatele e-shopů, pro naše klienty. Pro nás coby designéry je důležitá jen proto, abychom brali ohledy na to, že pro našeho klienta nemusí být samotný web e-shopu tím nejdůležitějším a nejhlavnějším. Nicméně v ohnisku zájmu naší práce je právě ten web a výše řečené neznamená, že jej máme jakkoli podceňovat a zlehčovat. Pokud stránky a především nákupní proces na něm navrhneme špatně, může to klienta stát nemalé peníze a spousta jeho práce na zbytku e-shopu může přijít vniveč. A naopak, navrhneme-li je skutečně dobře, může to výrazně zefektivnit výkon a úspěšnost obchodu.

Dobře navržený nákupní proces v e-shopu vyžaduje mnohem důkladnější přípravu už v úvodním zadání. Více než na jakýchkoli jiných webech zde potřebujeme co nejpřesnější a nejpodrobnější marketingové vstupní údaje:

specifikace trhu a konkurence (především srovnatelné a konkurenční e-shopy)

strategie získávání návštěvnosti a typická místa vstupu návštěvníků na web

daleko přesněji, podrobněji a barvitěji definované persony, typické uživatelské postavy

mnohem detailnější a důkladněji připravené uživatelské scénáře

Především tato poslední položka, tedy uživatelské scénáře, jsou pro dobře navržený, zpracovaný a otestovaný nákupní proces stěžejní. Ve své podstatě jsou vlastně výslednicí předchozích bodů a klidně bychom všechny vstupní požadavky mohli zredukovat pouze na ně — pro funkční uživatelský scénář jsou marketingové informace a dobře navržené postavy cílové skupiny nezbytností.

Ale musíme jít ještě mnohem dále. U každého scénáře pro každý typický úkol nákupního procesu (jimiž jsou obvykle přinejmenším vyhledání zboží, objednávkový proces a případně systém přihlášení a registrace) musíme řešit množství dodatečných detailů. Měli bychom se podrobně věnovat všem možným větvením v každém místě, kde uživatel může dělat nějaké rozhodnutí, měli bychom zabránit možným slepým uličkám, které jej svedou od přímé cesty k požadované CTA; měli bychom na mnoha místech zvažovat dílčí scénáře a alternativy typu „když tady uživatel udělá tohle, potom…“

Měli bychom se snažit podchytit všechny možné nestandardní postupy, kterých se návštěvníci mohou dopustit. Myslet na situace, kdy uživatel přeskočí nějaký předpokládaný krok, nebo naopak když se v sekvenci nákupního či objednávkového procesu bude vracet a z navrženého postupu odskakovat jinam. Musíme daleko důkladněji promyslet i situace nad rámec běžného průchodu webem — dobrý e-shop by měl mít dobře vyřešenu třeba persistenci rozběhnutých procesů při opuštění a pozdějším návratu uživatele, pokud možno transparentně a v ideálním případě třeba i mezi různými zařízeními. Pro nás to znamená vyřešit dílčí scénáře pro situace, kdy si např. uživatel vybere nějaké zboží a vrátí se dokončit objednávku až po několika dnech; nebo třeba na tabletu cestou z práce vybere výrobky do košíku a později večer chce dokončit objednávku u domácího počítače.

Musíme si hodně dobře rozmyslet a do detailu důkladně navrhnout systém přihlašování a registrace zákazníků. Dobrý e-shop by měl umožnit nákup i bez povinné registrace, ale současně by měl umět takový nákup zužitkovat a nabídnout zákazníkovi nějakou automatickou registraci, lákající a usnadňující příští návštěvy. Strategií a schémat pro sledování a správu uživatelů existuje bezpočet, žádné ale není univerzální a na každém e-shopu může být vhodnější jiné. Povinná registrace (nedejbože dokonce vyžadovaná ještě před zahájením nákupu) by měla být ale pečlivě zváženým nástrojem jenom ve skutečně speciálních obchodech, kde to má neoddiskutovatelný smysl (například to vyžaduje nějaký zákon).

Líbilo by se vám, kdyby po vás pokladní v supermarketu vyžadovala telefonní číslo a velikost bot?

Zkušení webdesignéři dávno vědí, že e-shopy mají velké množství specifik, zádrhelů a skrytých pastí a přinášejí spousty překvapení a neočekávaných problémů k řešení. Osobně považuji design online obchodů a celý návrh nákupního a objednávkového procesu za mistrovskou disciplínu webdesignu. Žádný designér by se neměl pouštět do návrhu e-shopu bez dostatečných zkušeností a bez nastudování alespoň základní literatury, která se specifikám e-shopů věnuje. Knih a článků na toto téma bylo ostatně vydáno bezpočet, materiálu ke studiu je opravdu nepřeberně. Pokud se mladý horkokrevný designér s vervou pustí do návrhu extravagantního módního webu nebo online magazínu, může s trochou štěstí a při dostatku talentu uspět a vytvořit pozoruhodné a přitom funkční dílo. Pokud se ale nepoučen pustí se stejným nadšením do návrhu e-shopu, téměř jistě selže, vytvoří obchod špatně fungující a jeho klient na tom ve své důvěře může prodělat kalhoty.

Návrh technologií

Web máme v hrubých obrysech navržený a je nejvyšší čas mluvit o jeho technické realizaci. Dnes už jen výjimečně bude webdesignér současně i tím, kdo navržený web také od základu kompletně nakóduje, naprogramuje i uvede do provozu — přece jen 90. léta 20. století už jsou dávno minulostí. V současnosti se setkáváme v podstatě se dvěma základními variantami, jak web vzniká:

u menších projektů se obvykle najde nějaké hotové řešení (nebo kombinace několika takových), pomocí nichž je možné navrhovaný web snadno technicky zrealizovat víceméně svépomocí

u větších projektů se sejdou zástupci technických profesí, které budou web technologicky připravovat; podle rozsahu webu od kodéra a serverového specialisty po rozsáhlý tým odborníků na databáze, hosting, sdílené služby, různé programovací jazyky, grafiku, animace, multimédia, streamování atd.

Vždy by mělo být v zájmu všech orientovat návrh i jeho implementaci na použití zavedených a standardních hotových řešení. Doba, kdy vývojáři vytvářeli weby od píky pokaždé znova, je snad už minulostí. Dnes existují nepřeberná množství zdrojů a hotových řešení snad pro všechny myslitelné oblasti a obory tvorby webů, a efektivní návrh technologií tak spočívá daleko více ve znalosti nabídky a dostupných možností a správně zvolené kombinaci hotových produktů třetích stran než ve vlastní tvorbě a vytváření nějakých proprietárních řešení na míru.

Jedině ve chvíli, kdy se všichni shodnou na tom, že žádná známá dostupná řešení nebudou pro potřeby našeho projektu dostatečná, kdy je třeba projekt natolik jiný a inovativní, že se vyplatí pro něj některé části vytvořit úplně nově a jinak, má smysl zvažovat plány na vlastní technický vývoj — a i zde bychom měli raději upřednostňovat vývoj na základě úpravy, rozšíření a doplnění něčeho již hotového. Začínat vyvíjet kompletně nové řešení úplně od nuly je pokaždé nesmírně drahé a časově náročné.

Vychytávky versus rozpočet

Tato fáze návrhu webu je podstatná hlavně z ekonomického hlediska. Právě tady se rozhoduje, jestli realizace webu bude stát pár desítek tisíc a bude trvat měsíc, nebo to bude mnoho měsíců a několik milionů. Jde o vyjednávání o technologiích, ale současně i o ekonomice projektu — poměrně zásadně do něj zde bude vstupovat klient a prostým zavrtěním hlavou bořit vzdušné zámky v hlavách vývojářů a vyrábět na nich nové šediny. Umění vyjednávání o nákladech a rozpočtu je na samostatnou publikaci, jakých nejspíše najdete spoustu na ekonomických školách, nám momentálně stačí vědět, že se musíme připravit na přesvědčování a vysvětlování, ale i ustupování, kompromisy a slevování ze svých představ a požadavků, pokud se ukáží implementačně náročné a mimo možnosti našeho klienta.

Zdánlivě sebelepší nápad je ve výsledku špatný, když kvůli jeho náročnosti klient zavrhne celý projekt.

U každého nápadu je třeba myslet na náročnost jeho implementace a celkové náklady a mít vždy připravený záložní plán pro případ, že jej klient z jakéhokoli důvodu odmítne. Ale většinou se nakonec na nějakém technologickém rámci všichni shodnou a dojde k sepsání technologických specifikací, definování zdrojů a po jejich odsouhlasení se může odstartovat první (přípravná) fáze implementace.

Pozn.: Většina potřebných zdrojů a technologií je známa už teď, ale vždy bychom měli raději počítat s tím, že další se objeví dodatečně ještě po dalších fázích designu, během testování, při zpracování grafického návrhu, během plnění webu obsahem atd. Nikdy bychom neměli technologické specifikace považovat za konečné a zcela uzavřené. Vždycky něco bude chybět, vždycky se najde něco dalšího.

Technologické specifikace

Po ujasnění technologického rámce bychom si měli sepsat konkrétní specifikace u všech technologií, na něž si vzpomeneme, že během implementace vstoupí do hry. Zkušenosti ukazují, že není dobré cokoli opomíjet a považovat za „samozřejmé“, protože dříve nebo později zde zákonitě dojde ke kolizi, neboť vývojář X považuje za „samozřejmé“ něco úplně jiného než vývojář Y. To je realita, před kterou není jiného úniku než mít i ty nejsamozřejmější detaily pečlivě sepsané ve specifikaci, na kterou toho či onoho vývojáře můžeme kdykoli odkázat.

Technologické specifikace našeho projektu by tak měly — podle jeho rozsahu, technické náročnosti i s ohledem na parametry a limity dané úvodním zadáním — obsahovat především následující položky:

úložiště — předpokládaný objem dat uložených na serveru, očekávaný vývoj v čase a tomu odpovídající serverová úložiště včetně strategie jejich rozšiřování podle potřeby (od prostého diskového úložiště na hostitelském serveru po sofistikovaná distribuovaná úložiště a clustery); včetně strategie zabezpečení, zrcadlení, zálohování a případné obnovy dat

provoz — předpokládaná návštěvnost a datový provoz na serverech, tomu odpovídající parametry připojení serveru a strategie škálování v případě podstatných změn v růstu návštěvnosti

servery — serverové technologie a použitá serverová programová prostředí, použité knihovny, frameworky; typ komunikačních, databázových a výpočetních strojů; je-li podstatné použití konkrétních verzí, pak jejich zdůvodnění a případné varování před možnými problémy při změně verzí v budoucnu

výkon — způsoby propojení a komunikace na straně serveru; těmto technologiím i předpokládanému provozu a požadovanému výkonu odpovídající specifikace hardwaru (opět včetně strategie škálování podle růstu náročnosti); strategie cachování dat

klientské technologie — použité verze standardních technologií v prohlížečích (HTML, CSS, Javascript), včetně specifikace podporovaných a nepodporovaných prohlížečů (viz zadání projektu); použití rozšiřujících technologií (Flash, Java, zásuvné moduly atd.)

API — Application Programming Interface neboli rozhraní pro výměnu dat, a to hned trojí: a) naše interní API pro komunikaci mezi serverem a prohlížečem, b) cizí API, která budeme v našem projektu používat, c) vlastní API poskytované pro použití třetími stranami

implementační technologie — použité typy a verze vývojářských nástrojů, tj. různé javascriptové a CSS frameworky a knihovny, použité komplexní MVC frameworky (model-view-controller), či dokonce sofistikovaná serverově-klientská vývojová prostředí; strategie vývoje — publikační fáze a úrovně (vývojářská, testovací, beta, veřejná stage atd.), způsob a postup publikování, kompilování a optimalizace kódu, použití verzovacích, publikačních a distribučních nástrojů atd.

zdroje — neboli ujasnění, kdo kterou část implementace projektu bude mít na starosti; které součásti, do jaké míry a jak rychle jsme schopni zajistit vlastními prostředky a které je třeba zadat ke zpracování někam jinam (outsourcing) či pro jejich realizaci najmout specialisty

ostatní — jakékoli specifické technické detaily plynoucí z návrhu webu, na které si vzpomenete. Vše může být později důležité — od způsobu práce s lokalizací obsahu a přepínání jazykových verzí webu po nutnost přizpůsobení jmenného prostoru našeho databázového rozhraní stávajícímu rozhraní našeho partnera, od nějž budeme přebírat důležitá data.

Všech těch možných a nezobecnitelných parametrů je nepřeberně a musíme je důkladně a detailně rozebrat, prodiskutovat, rozhodnout a sepsat u každého projektu individuálně. Každý web má své zvláštnosti a neexistuje žádný univerzální návod, co všechno má být v takových technologických specifikacích uvedeno a na co všechno nesmíme zapomenout.

Vyjednávání a křížová kontrola

Z předchozích kroků bychom měli mít jasno ve všech podstatných otázkách implementace a měli bychom mít následně technologické specifikace — včetně jejich časové a finanční náročnosti — také projednané a odsouhlasené s klientem. Jak již bylo řečeno, tato fáze je fází vyjednávání a jen výjimečně se podaří vše navrhnout a nechat si klientem odsouhlasit napoprvé. Obvykle se k výsledku dobereme až po několika iteracích, škrtáních a změnách.

Nikoli výjimečně se stane, že změna v technologické specifikaci (třeba protože původně navržené řešení bylo pro klienta příliš drahé, trvalo by nepřijatelně dlouho nebo nesouhlasil s možnými důsledky, které by s sebou neslo) vyústí do změny v základním návrhu webu, nebo dokonce v samotném zadání. Ne vždy je tato změna patrná na první pohled a někdy i nepatrná úprava a odchylka od původních vstupů může nakonec vyústit ve složitý a neřešitelný problém někdy později při realizaci. Je proto nesmírně důležité s každou změnou podstoupit kontrolní a ověřovací proces: pečlivě si sepsat provedenou změnu i všechny její důsledky, které nás napadnou, a znovu krok po kroku od začátku projít naše detailní zadání projektu i celý dosavadní návrh a prověřit, zda provedená změna některé parametry nějak podstatně neovlivňuje.

Všechny detaily, které stačí nějakou zanedbatelnou úpravou nově nastaveným technickým požadavkům přizpůsobit, jednoduše pozměníme. Ovšem zjistíme-li, že některé z nich tato změna ovlivnila zásadním způsobem, který může klient vnímat jako citelnou změnu, není zbytí a musíme podstoupit další kolečka vyjednávání, schvalování a úprav specifikací se všemi zainteresovanými, dokud nedojdeme k řešení, které vyhovuje všem stranám.

Měli bychom také umět počítat s tím, že některé otázky zůstanou otevřené k vyřešení později. Jsme-li přesvědčeni, že příslušný detail je možné rozhodnout kdykoli později, zatímco většinu ostatního je možné beze změny začít implementovat, měli bychom se s klientem na rovinu o této skutečnosti dohodnout — na tom a tom se může začít pracovat, zatímco detail X dohodneme později, aniž by to již dokončené věci později ovlivnilo. Každý klient takový vstřícný návrh uvítá daleko spíše, než když jej budeme tlačit do rozhodnutí o podrobnostech, na které se bude s celou produkcí zbytečně čekat.

Definování a zajištění zdrojů

V určitou chvíli konečně dospějeme do situace, kdy máme všechny hlavní body technické specifikace zafixovány a schváleny. Máme závazný soupis veškerých prací, které je třeba nyní udělat: víme, kolik práce v jakém oboru bude potřeba, kolik a jakých zdrojů bude potřeba zajistit. Jaké konkrétní úkoly a v jakém objemu mají před sebou vývojáři (na straně serveru, na databázích, na straně prohlížeče), kodéři, co čeká specialisty na online marketing a SEO, nač se musí připravit správci serverů, jaké se mají zajistit domény, jaký hosting, správa dat a zálohování bude potřeba, jaké publikační systémy, jaké nástroje a knihovny se mají nainstalovat a zprovoznit, tušíme, jaký je plán budoucího vývoje a rozvoje atd.

Je čas odstartovat celý mechanismus implementace, zapojit do akce veškerý arzenál vývojářských prostředků, které má realizační firma k dispozici. Je načase začít vyčleňovat prostředky, zajišťovat zdroje a plánovat. To už ale obvykle není prací nás coby webdesignéra — štafetu zde předáme jiným a pokorně se zařadíme do realizačního procesu jako jedno z koleček velkého stroje. Dosud jsme celý projekt v podstatě směrovali sami, nyní se vše podstatně mění a práce webdesignéra se nadále výrazně zužuje a zaostřuje hlavně na vizuální design.

Až do této chvíle byl návrh a vývoj webu prakticky lineární: jeden krok závisel na předchozích, posouvali jsme se postupně (nanejvýš trochu napřeskáčku) od obecnějších specifikací ke konkrétnějším návrhům. Ale od chvíle, kdy máme navrženu architekturu webu a všechny potřebné technologie a shodneme se na postupu realizace, může začít vývoj paralelně na více frontách. My jako designéři se pustíme do návrhu jednotlivých stránek, schémat a šablon, zatímco jiní mohou začít zajišťovat hardware, připravovat databáze, instalovat frameworky a začít implementovat v tuto chvíli již známé části zadání. Ne vždy je v tuto chvíli ještě možné něco zásadního podnikat, ale je část projektů, kde už tato přípravná fáze může být poměrně náročná, a čím dříve se začne, tím lépe. Otěže do rukou každopádně přebírá projektové řízení — jen výjimečně si projekt budeme dirigovat sami a spíše se svěříme do rukou projektového manažera. Od této chvíle je na straně realizátora podstatná hlavně organizace práce, plánování, synchronizace a správné načasování a provázání jednotlivých kroků, tedy obecně projektové řízení, což jsou poněkud jiné dovednosti než ty, kterými vládneme my coby návrháři.

My se můžeme začít věnovat konkrétnímu obsahu jednotlivých stránek webu.

Design a prototypování

Teprve v této chvíli začíná to, co mnozí mylně považují za „skutečný návrh webu“, tedy navržení rozhraní a obsahu jednotlivých stránek. I když jsme si ukázali, kolik dalších zásadních a skutečně důležitých kroků by měl designér do této chvíle podniknout — a profesionál tím není nijak překvapen, neboť tuto sekvenci podstupuje pravidelně zas a znova na každé zakázce — v představách méně zkušených webových designérů ona „skutečná“ designérská práce začíná až v tomto místě. Kompletně přeskočí celý ten tak zásadní a klíčový proces návrhu, kterému jsme věnovali mnoho předchozích kapitol, skočí po převzetí zakázky rovnou sem, a aniž by měli jasno, co přesně, proč a za jakým účelem a pro koho vlastně mají navrhnout, začnou rovnou kreslit stránky. A to ještě v tom lepším případě: není těžké narazit na — s odpuštěním — neumětely, co přeskočí přímo do finální kapitoly a začnou kreslit grafickou podobu úvodní strany, hrát si s logem a barevnými paletami, vybírat ikony a vytvářet databáze.

Přijde tichý, nesmělý pán do krejčovství, a než se nadechne, aby řekl, co potřebuje, krejčí už zuřivě střihá jakési látky a strká mu před nos na výběr: Dáme oranžovou s fialovým kapesníčkem, nebo zelenou se žlutou mašlí? A už posílá příručího nakoupit červené hedvábné nitě a krabičku kostěných knoflíků… Chudák zákazník stojí jak opařený, a než vůbec mohl vysvětlit, že chtěl opravit staré montérky, vybrat látku na šaty pro dceru na ples nebo ušít záclony, už na něm krejčí špendlí jakýsi oranžový hacafrak…

Tak nějak působí ten tak nechvalně známý amatérský přístup některých „takydesignérů“ k tvorbě webu. „My bychom chtěli udělat web.“ — „Jasně, homepage uděláme na tři sloupce, nebo radši responzivní na jeden, to je teď moderní. A mám tu zrovna takovou pěknou fialovo-šedou paletu, ta se vám bude hodit. A pojede to na WordPressu, to budete mít levný…“

Pochopitelně, není nic úplně černobílé a až natolik neschopných matlalů zase tak moc nepotkáte. Jsem si jist, že drtivá většina webdesignérů se snaží, více či méně, aspoň část z toho výše uvedeného postupu přece jen absolvovat. Ten rozdíl je ale v míře. Nakolik kdo považuje tu úvodní fázi za stěžejní a určující, a kdo za téměř zbytečnou formalitu, která nemá na výsledek vlastně moc velký vliv. Zda se designér zajímá víc o výzkum podstaty projektu a hledání nástrojů, jak optimálně naplnit klientovy záměry a cíle — anebo mu jde jen o co nejrychlejší odbytí zakázky a inkasování peněz, nebo třeba jen o výron vlastní kreativity, šokování uživatelů a uměleckou exhibici.

Je pravda, že v některých větších vývojářských firmách jsou pravomoci rozděleny jinak a všechny ty předchozí a pro dobrý výsledek naprosto nezbytné kroky formálně zajišťují jiní lidé (projektový či produktový manažer, marketingové oddělení aj.) a pracovní náplní designéra je pak třeba už jen samotný návrh uživatelského rozhraní a vzhledu webových stránek. Praktické zkušenosti ovšem říkají, že není nejlepší strategií se na takové rozdělení pravomocí zcela spoléhat. A i v tom nešťastném případě, že designér sám se dle interních firemních pravidel úvodních jednání s klientem či vývojářským týmem vůbec neúčastní a má se spolehnout na vstupy získané z jiných zdrojů, nebude ani zdaleka zaručeno, že tyto vstupy budou dostatečné, profesionálně zpracované a zcela spolehlivé. Zodpovědný designér by měl i v takové situaci celý dříve zmíněný úvodní proces zopakovat alespoň zrychleně sám pro sebe a ověřit si, že jím zjištěná a dostupná fakta korespondují s dodanými podklady a předloženým zadáním. A v případě jakýchkoli pochyb, nebo dokonce nalezených nesrovnalostí nebo neúplných údajů si vyžádat jejich opravu či doplnění. Neboť v důsledku stejně každé selhání pramenící z chybného, špatně pochopeného či nedostatečného zadání půjde na vrub designéra, a nikoli těch, kteří pro něj ony vadné vstupní podklady připravovali.

Chybné řešení jde vždy nakonec na účet designéra, i když vychází z chybného zadání.

Ať už si tedy celou přípravnou fázi a zajištění podkladů pro design dirigujeme sami, nebo nám je zčásti či všechny dodává někdo jiný, je naší zodpovědností coby designéra přinejmenším formální prověření, že tyto podklady jsou platné, odpovídají skutečnosti a jsou úplné. A v případě, že máme dojem, že v nich něco skřípe, nesouhlasí nebo chybí, je naší povinností se pokusit to uvést do pořádku. Chybějící infomace doplnit, nesrovnalosti prodiskutovat, nejasnosti srozumitelně oznámit a pokusit se je vyřešit.

Nadále ovšem předpokládejme, že máme pohromadě skutečně relevantní podklady, že všechna vstupní data jsou kompletní a zadání projektu bezchybné. Neboli že máme navrženo a ve specifikacích ukotveno vše, co má web umět, jak bude fungovat a co všechno bude obsahovat. Nyní tedy začneme navrhovat, jak konkrétně bude vypadat každá stránka tohoto webu, co bude obsahovat, jak bude její obsah rozvržen, jaká bude její funkcionalita, jak se bude chovat.

Modely stránek

Je nezbytné si uvědomit, že v tuto chvíli pořád ještě neřešíme konkrétní vzhled jednotlivých stránek. Stále se musíme maximálně snažit oprostit od jakýchkoli konkrétnějších představ o budoucím vzhledu a pracovat na co možná nejobecnější úrovni. Vzhled stránek nyní navrhujeme pouze ve formě schematického, tzv. drátěného modelu (wireframe), kde je podstatná funkce jednotlivých prvků stránky, jejich vzájemné uspořádání a vztahy, vizuální priorita (tj. které prvky obsahu jsou dominantní a které podružné) a případné dynamické změny.

Úmyslně se snažíme ignorovat a pokud možno vůbec nemyslet na to, jak které části stránky budou konkrétně vypadat, jak budou nakonec vyřešeny graficky, barevně či typograficky. Naším cílem je posuzovat jednotlivé součásti každé stránky co nejvíce abstraktně a posuzovat je výhradně v obecné rovině: zde bude text, tady obrázek, zde výrazné tlačítko a tady jen malá klikací ikona, tohle bude velký nadpis a toto aktivní formulářový prvek. Tento prvek musí být dominantní, tahle část obsahu upozaděná. A když uživatel udělá tohle, stane se toto. A pokud uživatel neudělá, co očekáváme a potřebujeme, jaký bude náš záložní plán, abychom jej dostali, kam potřebujeme?

Při návrhu drátěných modelů nás zajímá primárně funkčnost a vztahy mezi jednotlivými částmi obsahu. A to jak na lokální úrovni (mezi sousedními prvky, mezi různými úrovněmi nadpisů, mezi bloky na stránce), tak i na úrovni globální (vztahy mezi stránkami a sekcemi webu, navigační logika, scénářové sekvence). Pokud nás při návrhu budou napadat představy o finální vizuální prezentaci konkrétních prvků, poznamenávejme si je stranou a použijme je až později při grafickém návrhu (případně je s vysvětlujícím komentářem předejme jako možnou inspiraci v zadání designérům, kteří budou grafickou podobu navrhovat). A následně na ně zase zapomeňme a snažme se jimi nenechat ovlivnit. Pokud se designér předčasně upne na jedno konkrétní řešení, zavírá si vrátka pro spoustu dalších nápadů na jiných místech.

Praxe přitom ukázala jako nesmírně důležitý jeden základní fakt:

Nikdy, ale opravdu nikdy nekresleme modely stránek tak, aby to mohlo být považováno za návrh grafického vzhledu.

Sám jsem ve své praxi už tolikrát narazil na problém, že klient zaměnil podobu obecného drátěného modelu za grafický návrh webu a soustředil se na nějaký podružný detail místo posuzování celkové dispozice a chování stránky. Dnes si už dávám raději dobře záležet, aby moje wireframy vždy co nejméně nějaký grafický návrh připomínaly. Snažím se používat ručně kreslené skicy (nebo využívám aplikace, které je napodobují), snažím se vyhýbat barvám i reálně vypadajícím ikonám, nepoužívám skutečně vypadající texty a jakékoli náhledy obrázků.

Nejlepší wireframy jsou kreslené (jakoby) od ruky, obsahují křivé čáry, hrubé čmáranice místo přesného šrafování, ručně psané texty místo vyhlazených fontů. Jsou jen černobílé, ideálně na čtverečkovaném pozadí; kde je to potřeba, používají odstíny šedi místo barev (barvy jsou vyhrazeny pro různé poznámky, zvýraznění, šipky a odkazy stojící očividně mimo samotný design), místo obrázků jsou přeškrtnuté obdélníky nebo šedivé plochy, ikony jsou co možná generické a nekonkrétní, texty zcela nesmyslné. Ideální jsou úseky klasického Lorem ipsum, tj. zcela bezvýznamového pseudolatinského výplňového textu, jehož generátory jsou k nalezení na internetu.

Kdykoli se totiž v modelu stránky objeví cokoli, co jen vzdáleně připomíná skutečný web (přesně rovná čára, barevná plocha, fotografie, reálně vyhlížející text), vždy hrozí, že kdokoli ze zúčastněných na realizaci webu (tedy nikoli jen klient, ale často i naši kolegové vývojáři) pochopí vzhled daného prvku jako jeho předpokládanou finální podobu a zcela neomylně se na ni zaměří. V lepším případě o ní začne diskutovat, v tom horším ji pojme jako daný fakt a začne z ní odvozovat vzhled souvisejících prvků. Což je ale naprosto nežádoucí, v této chvíli se všichni musí soustředit na všechno ostatní krom grafické podoby jednotlivých prvků.

Čím kostrbatější a „ošklivější“ je nákres modelu stránek, tím lépe.

Po mnoha zkušenostech kreslím drátěné modely stránek podle těchto pravidel vždy a všude — i v případech, že se jedná třeba jen o drobnou změnu existujícího webu a wireframy jsou určeny pouze pro interní vývojářský tým, který na projektu dělá už dlouhou dobu a finální vzhled stránek všichni podrobně znají tam a zpátky. Kdykoli jsem si práci usnadnil a nějakou obecnou změnu zakreslil do stávajícího designu, takřka vždy se našel někdo, kdo ji považoval za redefinici designu. Ty komplikace nestojí za to. Wireframy musí být vždy „ošklivé“ a musí co nejméně připomínat reálný design stránky.

Nevhodný, příliš konkrétní drátěný model (vlevo) a lepší obecnější a „ošklivější“ (vpravo)

Statické nákresy dynamického obsahu

Nesmíme zapomínat na to, že webové stránky nejsou jen ten statický, neměnný obrázek, který zrovna kreslíme, ale v čase se neustále mění. A to jak dlouhodobě, tak krátkodobě:

během provozu webu se ve stránce mění obsah, roste počet příspěvků, mění se poměry krátkých a dlouhých nadpisů, malých/nevýrazných a velkých/do očí bijících fotek, přibývají a zase mizí různé typy informací, rámečků, aktualit, akčních nabídek atd.

během práce uživatele s webem se dynamicky mění obsah stránek, přibývají a mizí některé prvky, aktualizuje se jejich obsah, mění se kontext a vztahy mezi prvky atd.

během interakce uživatele se stránkou se dynamicky mění vzhled a obsah jednotlivých prvků, zvýrazňují se odkazy pod kurzorem myši, objevují se rámečky s doplňujícími informacemi, ovládací prvky mění své stavy po kliknutí či volbě určité možnosti atd.

Se všemi těmito dynamickými stavy musí designér počítat a pracovat už na úrovni drátěného modelu. Přinejmenším je nutné vyznačit a předepsat grafikům všechny možné stavy odkazů, tlačítek a přepínačů, které bude potřeba nakreslit. Nesmíme zde zapomínat i na méně typické situace, např. kdy má být tlačítko nedostupné, přepínač zablokovaný, rozbalovací nabídka prázdná, nějaká hodnota nulová atd.

Nejsložitější částí návrhu dynamického chování bývá sestavit a správně nadefinovat všechny možné kombinace stavů jednotlivých prvků stránky a jejich vzájemných vztahů. Především u formulářů, dialogů a různých průvodců, kde narážíme na mnoho variant různých stavů a chyb, které mohou nastat — nevyplněné povinné údaje, chybně zadané hodnoty, chyba komunikace se serverem, serverem odmítnuté hodnoty, které musí uživatel opravit, nekompatibilní obsah dvou či více prvků, varování a žádost o potvrzení potenciálně nebezpečné operace atd. Návrh musí vyřešit nejen zpracování jednotlivých dílčích chyb (zvýraznění chybné položky, zobrazení bubliny s chybovou zprávou, zobrazení varovné zprávy od serveru, zobrazení informace o chybě při zpracování), ale také jejich vzájemnou kombinaci, aby stránka byla funkční, srozumitelná a stále použitelná i v případě, že se nahromadí několik takových chyb, varovných hlášení a chybně zadaných položek současně.

Grafici rádi kreslí vzorové stránky s ideálním obsahem. Návrh s extrémními daty a pro různé dynamické stavy si musíme výslovně vyžádat v zadání.

U každé stránky a každého jejího prvku je navíc vhodné snažit si představit (a do poznámek sepsat) i všechny extrémní varianty, které mohou nastat — tedy že text bude velmi krátký nebo velmi dlouhý, obrázek bude hodně malý nebo hodně velký (nebo bude chybět), bude to schéma v jednoduchých obrysech nebo výrazná autorská fotografie, která se nesmí oříznout, nadpis bude pouze jednoslovný nebo dlouhý na tři řádky, tabulka bude o rozměrech 2×2, nebo naopak 100×100, e-mail uživatele v záhlaví bude ve tvaru pekwachnamaykoskwaskwaypinwanik@cannadianlakes.example.com atd. — a snažit se ve stránce jednotlivé prvky skloubit tak, aby byla plně funkční ve všech relativně běžných situacích a s kombinací několika extrémů nezkolabovala.

Umění včas zabrzdit

Pozor ovšem na celkem vážnou chybu zcela opačného ranku, která je typická hlavně pro programátory, inženýry, geeky a vůbec technicistně založené návrháře: překomplikovanost. Tedy snaha nalézt a zahrnout do řešení všechny možné stavy a veškeré teoreticky myslitelné extrémní situace. V naprosté většině případů každé zesložiťování a podchycení všech vzácných situací strašně ubližuje řešení pro typického většinového uživatele — které by třeba mohlo být elegantní, jednoduché a přehledné, ale se všemi těmi ošetřenými výjimkami a extrémy se z něj stává nepřehledný, těžkopádný a nesrozumitelný moloch. Hlavně mnohé weby a aplikace státní správy a různých úřadů zde bývají ukázkovým protipříkladem.

My jako dobří designéři se vždy musíme snažit vytvořit především co nejlepší a nejpříjemnější řešení pro většinu, pro typického uživatele, pro již vytvořené persony, které ty běžné návštěvníky budoucího webu reprezentují. Všemožné extrémní situace a stavy je samozřejmě nutné mít ošetřeny, ale musíme vždy dobře uvážit, zda jsou natolik časté a podíl „postižených“ uživatelů je ještě dostatečně významný, aby se nějaké speciální varianty pro ně musely zahrnovat mezi volby, kterými se musí probírat drtivá většina ostatních. Anebo jestli už nenastala chvíle pro „plán B“. Což je právě věc, kterou umí málokterý inženýr, který se na vlastní pěst pustí do návrhu nějakého rozhraní: rozhodnout se, že daný extrém je už natolik minoritní, že jím nebudeme zatěžovat všechny a odsuneme jej stranou, do nějaké vedlejší větve. Nebo se dokonce rozhodneme mu vůbec nevěnovat pozornost. Strategií, jak takové extrémní situace řešit, je mnoho — vyberme pár typických příkladů:

rozbalovací nabídka omezená na výběr nejběžnějších možností, se zvláštní položkou Jiné… s možností ručně dopsat příslušnou atypickou variantu

skrytí méně typických voleb pod samostatnou (ve výchozí podobě skrytou) sekci Pokročilé nastavení, Více voleb, Pro odborníky apod.

odkaz na zvláštní větev webu s nabídkou řešení některých extrémnějších situací

odklonění minoritního uživatele se speciálními požadavky na infolinku, nabídku osobního jednání apod.

ignorování a oželení několika uživatelů s extrémními požadavky

Všechny tyto varianty (a především poslední dvě uvedené možnosti) jsou nástroje, které dokáží mnoho původně velmi složitých procesů neuvěřitelně zjednodušit. To podstatné, co je potřeba si uvědomit, je vždy míra a předpokládaný poměr zastoupení takových případů. Očekáváme-li na webu řádově desítky tisíc návštěvníků denně, z nichž například 20 % bude přistupovat z mobilního zařízení, je určitě namístě zvážit podporu či speciální řešení pro taková zařízení (typicky dotyková, s menším displejem a určitými omezeními). Protože pětina z celkového počtu budou stále řádově desetitisíce potenciálních uživatelů, které nejspíš náš klient nebude chtít ztratit. Na druhé straně pokud zjistíme, že méně než 1 % uživatelů bude na web přistupovat z nějakého starého, obskurního a problematického prohlížeče, je zdaleka nejsnazší metodou o tyto uživatele přijít a web jim znepřístupnit — protože 99 % návštěvníků je prakticky totéž co 100 %, zatímco úpravy webu pro tuto minoritu by nejspíš byly významně nákladnější než přínos z onoho chybějícího procenta. Nemluvě o tom, že možná omezení kvůli podpoře této maličké skupiny by mohl zbytek uživatelů pocítit na sníženém uživatelském prožitku.

Nedávno jsem narazil na web, který nabízel vytváření a odesílání přání k narozeninám a výročím. Ve vstupním formuláři se mimo jiné zadávalo, pro koho a k čemu to přání je, a podle toho se pak nabízela i vhodná témata. Jenže místo toho, aby zde byly nabídnuty jen ty nejběžnější varianty, které použije přes 90 % uživatelů — řekněme k narozeninám, k výročí, k narození dítěte, k promoci a případná varianta „jiné“ — se autoři rozhodli pokrýt výčtem všechny možnosti, které je napadly, a seznam se rozrostl o přání pro maminky, tatínky, babičky, dědečky, strýčky, tety, švagry, synovce a neteře, švagrové, o blahopřání k povýšení, bar micve, odchodu do důchodu, sportovnímu úspěchu a neuvěřitelné množství dalších možností. Pohříchu šlo o web mezinárodní a autoři si dali záležet i na lokalizaci do mnoha jazyků. A tam nastaly teprve ty pravé orgie: některé jazyky striktně rozlišují matku matky a matku otce, bratra manželky a manžela sestry, pro některé lokality bylo třeba přidat jejich typické události a národní svátky, někde bylo třeba určité položky naopak zakázat. Už zvenčí, z pohledu uživatele to byl obludně složitý komplex voleb a variant, raději jsem si ani nepředstavoval, co to celé znamená pro programátory. Nejspíš měli celé oddělení jen na správu těchto nabídek a jejich správnou lokalizaci. A kdyby bývali zůstali u těch několika málo generických možností, které využije naprostá většina uživatelů, a přidali prostou položku „jiné“, kam si každý může doplnit, co chce, celý systém by se řádově zjednodušil — a to jak pro vývojáře, tak i pro samotné uživatele.

Rozhodování o nepodpoře či strategii omezené podpory minoritních skupin uživatelů je vždy důležitou součástí jednání se zadavatelem projektu. U skutečně extrémních případů obvykle stačí prosté oznámení, které každý soudný klient snadno pochopí (Kdyby náhodou na váš web vstoupil někdo s 30 let starým textovým terminálem, tak mu stránky nebudou fungovat), ovšem u některých mezních stavů může být jednání náročnější. Pak je namístě prostá nabídka poměru cena : výkon — „Ano, podporu pro Internet Explorer 6 můžeme zajistit, ale určitě nemohou mít tyto dynamické grafy a bude to stát X tisíc navíc.“ Na nás je patřičné vysvětlení nákladů a rizik a rozhodnutí je na klientovi: pakliže bude trvat na tom, aby web fungoval z jakéhokoli důvodu i v takovém prohlížeči, a je ochoten přijmout nezbytná omezení a zaplatit příslušnou cenu, pak tu podporu pro IE6 do webu zahrneme.

Prototypy a ideové testování

Při návrhu a výrobě každé interaktivní aplikace, a tedy i webového projektu je nesmírně důležitým nástrojem testování. To je přitom dvojího druhu, každé se používá v jiné fázi, každé slouží k jinému účelu a každé používá jinou sadu prostředků (i když některé z nich mohou být shodné pro oba typy):

Ideové testování je součást procesu návrhu, jde o ověření našich konceptů a hypotéz, o zjištění použitelnosti navržených řešení a plnění požadovaných cílů.

Testování implementace je součást procesu výroby, zde se ověřuje reálná funkčnost již realizovaného produktu.

Neměli bychom tyto dva druhy testů zaměňovat. Klasickému testování implementace se budeme věnovat později, nyní je pro nás důležité testování ideové. V něm nám vůbec nejde o prověření toho, jestli bylo něco zrealizováno, nakódováno a naprogramováno správně a vše funguje tak, jak má. Jsme teprve ve fázi základního návrhu koncepce a hrubého skicování hlavních sekcí a stránek webu — a tím, co si potřebujeme ověřovat, je především životaschopnost našich nápadů, konzistence myšlenek, logika a intuitivnost i soulad řešení se zadáním projektu. A zatímco testování implementace bývá obvykle starostí někoho jiného (vývojářů, betatesterů, QA oddělení realizační firmy, najaté specializované firmy atd.), je ideové testování hlavně na nás samotných. Probíhá na několika úrovních, které obvykle přibývají úměrně s velikostí projektu:

Ověřování v hlavě a myšlenkové experimenty. Nejméně nápadná, a přitom nejdůležitější úroveň procesu návrhu. Třeba jen podvědomě ji podstupuje každý designér i na tom nejmenším projektu, když si po sobě prochází své návrhy, specifikace a modely stránek a zkoumá, zda to celé dává smysl, má to hlavu a patu, zda jednotlivá dílčí řešení jsou konzistentní, navigace a struktura je přehledná, zda někde nechtěně neodbočil a výsledek stále odpovídá dříve sepsanému zadání. Pokud narazíme na nesrovnalost, hledáme alternativy, dosazujeme jiná řešení a ihned zkoušíme jejich životaschopnost. Tato část testování je neoddělitelnou součástí procesu navrhování, v podstatě každý návrh vzniká jenom cyklickým opakováním posloupnosti nápad-ověření-korekce (dokud nejsme s výsledkem spokojeni a dalších korekcí již není třeba).

Simulované uživatelské testování. Dalším krokem je vžití se do persony uživatele a simulace procházení nějakého uživatelského scénáře. A to již nikoli pouze v hlavě, ale na nějakém reálnějším modelu: ať už ve formě papírového prototypu, interaktivních drátěných modelů v počítači, či dokonce částečně funkčním prototypu stránek přímo v prohlížeči nebo testovací aplikaci. Tady (a nejen tady!) má velkou výhodu empatický designér, který se snadno dokáže do role příslušné postavy uživatele vžít, oprostit se od svých znalostí návrháře a přistupovat k projektu co nejvíce tak, jak ho bude vnímat skutečný uživatel — třeba i jako by jej viděl poprvé v životě. Bez ohledu na to, zda později budeme provádět skutečné uživatelské testování, vždy musíme svým designem a předepsanými scénáři provést své postavy nejprve v duchu a snažit se prověřit, zda námi navržená řešení budou vyhovovat alespoň v našich představách.

Konzultace a diskuse v týmu. Pokud web realizujeme v týmu, je samozřejmou součástí procesu návrhu a testování idejí průběžná diskuse nad dílčími návrhy, zvažovanými variantami a postupem tvorby. Velmi důležité je zde to slovo průběžná. To nejhorší, co realizační tým může potkat, je nějaký sebestředný designér-umělec, který se se svým postupem a dílčími kroky nehodlá svěřovat a chce předložit až kompletní „dílo“. Samozřejmě, neříkáme zde, že je nutné chtít, aby designérovi pořád kdekdo koukal přes rameno, to má asi rád málokdo, kdo něco tvoří. Ale průběžné diskuse, testování a připomínkování ucelených částí designu — podle dohody a stylu práce hlavních milníků, týdenních či denních prací — jsou velmi důležité. Jakkoli budeme později mluvit o tom, že demokracie do designu nepatří a profesionální designér si nesmí do své odborné práce nechat mluvit od laiků a musí si stát za svými názory, platí zde přece jen do určité míry, že víc hlav víc ví a hlavně více očí více vidí. Jednak se ostatní členové týmu neustále seznamují s tím, kam projekt směřuje a co je bude čekat při implementaci, jednak mohou včas odhalit různé chyby v použitelnosti, logice a konzistenci či nesrovnalosti se zadáním, které designér může sám snadno přehlédnout.

Konzultace s klientem. Ať už pracujeme v týmu, nebo sami, jsou konzultace s naším klientem a diskuse nad našimi návrhy zcela nezbytné. Ještě se jim budeme věnovat v následující kapitole.

Uživatelské testování. Čím větší projekt, tím méně si vystačíme se simulovaným testováním (viz výše) a musíme do akce zapojit skutečné uživatelské testování, se skutečnými lidmi odpovídajícími předpokládaným cílovým skupinám. Ať už sami vlastními prostředky (například formou veřejného betatestování či provozováním A/B testů pro různá dílčí řešení), nebo najmutím expertů, kteří se uživatelskému testování v kontrolovaném prostředí profesionálně věnují. U velkých projektů by kvalitní a odborně provedené uživatelské testování mělo být samozřejmostí. Ještě se mu budeme věnovat na jiném místě této knihy.

Podle zvolené úrovně testování a ověřování myšlenek a navržených řešení musíme příslušně volit i formu a prostředky, které k tomuto testování použijeme. Na začátku si vystačíme s vlastními představami a nápady v hlavě, pro další kroky je už musíme nějak vizuálně prezentovat. Základní formou jsou drátěné modely, tedy hrubé skicy jednotlivých stránek. Ovšem jak jsme předeslali dříve, tyto modely jsou statické, zatímco výsledné stránky se dynamicky mění hned na několika úrovních. A tyto změny musíme do prezentace našeho návrhu také nějak zahrnout.

Možností je mnoho. Existuje mnoho aplikací, od velmi jednoduchých po velmi sofistikované, v nichž můžeme nejen nakreslit drátěné modely stránek, ale rovnou je obohatit o základní i některé pokročilejší dynamické funkce (navigaci mezi prvky i stránkami, skrývání a zobrazování určitých prvků, jednoduché animace atd.). Takto vytvořené pokročilé drátěné modely — tedy už vlastně prototypy — stránek můžeme zobrazit v nějaké prezentační aplikaci nebo i zpřístupnit ostatním ve formě HTML dokumentů, které si mohou sami otevřít v prohlížeči.

Ne vždy je ale sofistikované softwarové řešení možné, nutné, ba dokonce žádoucí. Jako prototyp mohou velmi dobře sloužit i papírové modely, které zjednodušeně simulují fungování stránek — navigace se provede přechodem na jiný list papíru, dynamické změny pomocí nalepovacích lístečků atd. I když by se to mohlo zdát jako pofiderní, neprofesionální a ve všech ohledech horší řešení, opak je pravdou. Papírové prototypy jsou vynikajícím řešením především při prezentacích pro klienta: ručně kreslený model působí lidštěji, významnou roli hraje i fyzický kontakt s maketou stránek a také snadnost provádění okamžitých změn. Diskuse u stolu nad barevnými papíry bývá příjemnější a osobnější než debata nad náhledy na obrazovce či promítanými na stěnu. Část výhod papíru má i prezentace na dotykovém zařízení (tabletu). Nicméně papírové, nejlépe skutečně rukou kreslené modely a prototypy působí ze všech variant nejméně jako skutečné webové stránky a téměř neumožňují zaměřovat se na nepatřičné věci a zaměňovat koncepční návrh s návrhem grafickým.

Papírový prototyp vůbec nepřipomíná skutečnou webovou stránku, což je jeho největší výhoda.

Osobně dávám pro osobní prezentace u klienta přednost právě papírovým modelům (i když ne vždy nutně ručně kresleným), právě pro všechny ty výše uvedené výhody. Je ale nutné si předem ověřit, že prezentace bude komorní, pro jednu dvě osoby. Raději se na to předem klienta zeptám, a pokud se dozvím, že prezentace bude pro větší tým lidí, volím raději softwarový prototyp, počítač a projektor.

Vyjednávání a schvalování

Průběžné konzultace našich návrhů s klientem nám poskytují velmi důležitou zpětnou vazbu, kterou při své práci nezbytně potřebujeme. Je velkou chybou snažit se jim nějak vyhýbat a nechávat raději vše až na chvíli, kdy bude vše hotovo. Naopak, měli bychom se snažit scházet se pravidelně a konzultovat s klientem každé dílčí řešení. I u toho nejmenšího projektu bychom si měli sjednat aspoň jednu schůzku přibližně v polovině návrhu a své nápady a rozpracovaná řešení s klientem prodiskutovat. Je to v našem vlastním zájmu: přece jen on je tím, kdo celou tu legraci platí a má ve finále naprosté právo veta. Pokud se budeme několik týdnů navrhovat s řešením, které pak klient z jakéhokoli důvodu odmítne, ztratili jsme zbytečně týdny práce, ačkoli jsme to mohli snadno zjistit mnohem dříve.

Pozn.: Záleží na povaze a velikosti projektu, zda jedná přímo designér přímo s osobou klienta, nebo zda jsou jednání zprostředkovaná přes různé zástupce a týmy mající na starosti různé aspekty zakázky — stránku obchodní, právní, finanční, technickou, odbornou atd. V takových případech my jako designér účinkujeme spíš jako zprostředkovatel mezi všemi zde zmiňovanými odbornými oblastmi designu a těmi, kteří ta vlastní jednání za stranu dodavatele vedou, a některé dále doporučované kroky a postupy jsou už na zodpovědnosti příslušných obchodníků, projektových manažerů či právníků. Pro zjednodušení ale nadále předpokládejme, že hovoříme o zakázce takového druhu, kdy s klientem či jeho zástupci jednáme coby designér přímo my sami.

Musíme přesto myslet na to, že reakce klienta jsou zpětnou vazbou pouze poloviční. Protože od něj se dozvíme, pouze jak dobře náš návrh bude plnit jeho cíle, přesněji řečeno, nakolik jsme jej o tom dokázali přesvědčit. Ale jak dobře bude web použitelný, oblíbený a účinný, nám neřekne klient, ale až skuteční návštěvníci. Jestli se naše návrhy a nápady osobně líbí, nebo nelíbí klientovi, je tady poměrně irelevantní. Je důležitou součástí naší profese jej přesvědčovat o správnosti našeho řešení a vysvětlovat, že není cílem, aby se web líbil jemu osobně, protože musí fungovat primárně pro jeho budoucí uživatele. Nesmíme se bát na konkrétních detailech vysvětlovat rozdíly mezi charakteristikami uživatelů z plánované cílové skupiny a klientovým či naším vlastním vkusem a osobními preferencemi.

„Nelíbí“ není argument.

Snažme se klientovi objasnit rozdílné pozice jeho samého a jeho budoucích „zákazníků“. Přesvědčujme ho o tom, že úkolem na jeho straně je hlavně dobře posoudit obchodně provozní aspekty návrhu — zda navržené řešení bude správně plnit skutečné cíle jeho projektu, zda pro něj nebude příliš drahé, zda bude v jeho silách jej v budoucnu spravovat a udržovat v chodu atd. A to, jaký bude uživatelský pohled na výsledek, jak se web bude lidem líbit a zamlouvat návštěvníkům, bude na nich samotných — přičemž v této chvíli v roli jejich zástupce a advokáta vystupujeme my a dáváme všanc všechnu svou odbornost a reputaci, abychom jejich zájmy hájili co nejlépe a jejich vkusu a požadavkům vycházeli maximálně vstříc.

V těch výjimečných situacích, kdy si klient některé věci nenechá vymluvit a trvá na svém, vysvětleme srozumitelně všechna rizika toho, že upřednostníme požadavek klienta na úkor (námi předpokládaných) požadavků cílové skupiny, a takové vyžádané změny si nechme jmenovitě a písemně potvrdit. Je to v našem vlastním zájmu, osobně se mi to mnohokrát vyplatilo. Nicméně z praxe si troufnu tvrdit, že tyto případy nakonec nejsou až tak časté, pokud svou práci děláme správně, klienta skutečně přesvědčíme a dobře mu vysvětlíme, že my tady hájíme zájmy budoucích uživatelů jeho webu a jeho osobní vkus a představy s nimi nemusí být nutně v souladu. Spousta zadavatelů se o tom nechá přesvědčit a dá na naše zkušenosti a odborný názor.

Smiřme se ale každopádně s tím, že nikdy žádný návrh neprojde úplně hladce a napoprvé. O všem je třeba diskutovat, každý detail je nutné vysvětlit a zdůvodnit (pochopitelně musíme mít sami zatraceně dobře ujasněno, proč jsme použili právě to které řešení a jaká jsou negativa a možné důsledky použití řešení jiných). Do hry zde postupně vstupuje i cena, jak s navrženými konkrétními řešeními získává přesnější obrysy i náročnost jejich implementace a náklady na budoucí provoz.

Nikdy to nejde „na první dobrou“.

Pouze v nejsladších růžových snech designéra probíhá zakázka tak, že něco navrhne, klient to bez řečí schválí a vývojáři bezchybně naimplementují. V realitě se takové věci nestávají (mně se nestala nikdy). Každý návrh, každá jeho etapa podléhá důkladné diskusi a schválení či zamítnutí ze strany klienta. Někdy to bývá lítý boj. Průběžná jednání s klientem nad návrhy se stávají kolbištěm s ostrými zbraněmi a nemilosrdnými argumenty. Protože se jedná o peníze i o budoucí osud klientova projektu, možná naprosto zásadního pro veškeré jeho podnikání. Berme na to ohledy a počítejme s tím, že klient si nechá máloco líbit a o každou kótu svého řešení můžeme svádět líté boje.

Je přitom velmi důležité při těchto jednáních správně vybalancovat vlastní odbornou hrdost a profesionální reputaci s úctou a respektem ke klientovi. Ani jeden z extrémů od urputného trvání na vlastních nápadech a názorech, přes které prostě nejede vlak, po naprostou devótnost ke klientovi a odkývání kdejaké blbosti, kterou si vymyslí, není dobře. Musíme umět jak ustupovat a hledat kompromisní řešení, tak také rozpoznat míru, za níž jsou klientovy požadavky už skutečně kontraproduktivní, a pro výsledný návrh dokonce škodlivé — a snažit se mu je rozmluvit.

Mělo by být profesionální ctí dobrého designéra vypořádat se se všemi podobnými situacemi, kdy klient trvá na očividných nesmyslech a vyžaduje realizaci nápadů, které z odborného pohledu třeba porušují základní pravidla designu, nebo ho dokonce mohou v budoucnu poškodit. Ale ne vždy to je jednoduché. Za svou praxi jsem jednou takovou situaci nezvládl a byl jsem v té chvíli přesvědčen, že nemůžu být podepsán pod dílem, které kvůli nesmyslům, na nichž můj velmi svérázný — a svéhlavý — klient rezolutně trval, hrozilo přerůst v ostudný paskvil, za který bych se opravdu musel stydět. A zakázku jsem v polovině vzdal, odřekl bez náhrady a v podstatě utekl z bojiště. A bez mučení přiznám, že když po mnoha letech na tento projekt vzpomínám, nemám jasno, jestli to bylo dobře, nebo ne. Jestli jsem třeba opravdu nemohl udělat něco víc, abych klienta přesvědčil o tom, že si trváním na svých špatných nápadech kope vlastní hrob a tvrdošíjným odmítáním mých dobře míněných doporučení si zavírá mnohé dveře k funkčnímu a prosperujícímu projektu. Opravdu to stále nevím. Jsem si ale jist, že dnes bych se přinejmenším mnohem více a mnohem déle snažil. (Pro zajímavost, ten projekt později dokončil někdo jiný a byl spuštěn v podobě víceméně odpovídající původní představě klienta. Pokud vím, přes velká očekávání se setkal s téměř nulovým zájmem a nyní, po pár letech od spuštění, už ani neexistuje.)

Dříve nebo později se ale obvykle nakonec k nějakému výsledku dobereme. Návrh je odsouhlasen, byly nalezeny kompromisy, zaneseny změny, klient příslušnou verzi návrhu schválil. Z každého takového jednání vytvořme zápis popisující hlavní prezentované položky, případné změny a dohodnuté závěry a vyžádejme si od klienta potvrzení. Obvykle stačí jakékoli i méně formální, třeba odpověď v e-mailu, z níž je patrné, že klient vzal předložený stav na vědomí a nemá k němu další výhrady. Neshromažďujeme tady předměty doličné pro budoucí soudní spor, jen chceme mít argumenty pro případ možných budoucích nejasností mezi námi a klientem. Chceme moci kdykoli směle říct: Tuto změnu jste si sám před dvěma měsíci vyžádal, tady máme zápis.

Dlužno podotknout, že tyto průběžné konzultace, úpravy a zapracovávání změn trvají po celou dobu zakázky. Nejprve připravujeme specifikaci (jejíž znění si necháme závazně potvrdit klientem), pak připravujeme modely stránek (které nejméně jednou průběžně s klientem konzultujeme), v jedné chvíli prohlásíme návrh za „finální“ — tedy takový, že je možné na jeho základě začít s vlastní realizací — a opět si jej necháme závazně potvrdit. Ale i po zahájení implementace, programování a dalších prací obvykle neustále doplňujeme chybějící detaily, korigujeme návrh podle komplikací, které nám hlásí vývojáři, zanášíme změny, na které si dodatečně vzpomene klient — a stále opakujeme stejný postup: aktualizujeme návrh, odprezentujeme všechny změny klientovi, shodneme se na řešení, necháme si návrh a změny v něm schválit.

Každopádně jeden z těchto kroků je klíčový, předělový a potažmo nejdůležitější. A to je místo, kdy jsme tak daleko a máme už takovou podobu návrhu či jeho části, že na jejím základě můžeme zahájit nějaké následné práce — spustit vývoj na serveru, dát zelenou nákupu a instalaci hardwaru, začít s navrhováním vizuální podoby atd.

Nikdy se nepouštějme do implementace nebo jiných následných kroků, aniž bychom měli drátěné modely a specifikace oficiálně schválené klientem.

Klidně si můžeme s klientem dohodnout spoustu bodů návrhu, na kterých budeme ještě dále pracovat a vylepšovat a doplňovat je, ale pokud cokoli budeme chtít použít jako východisko pro následnou implementaci nebo jiné související kroky, které je těžké později nějak zásadně měnit, musíme příslušnou část návrhu (nebo alespoň příslušné určující parametry) zafixovat a srozumitelně klientovi vysvětlit, že tyto atributy už se později měnit nesmějí (případně jaké následky bude taková změna v budoucnu mít a kolik jej to bude stát). A nechat si tuto skutečnost výslovně potvrdit. Pochopitelně, že mnohé v této souvislosti ovlivňují smlouvy či dohody, které s klientem máme, a u velkých zakázek spousta dalších faktorů, obchodních a právních jednání, která obvykle jdou zcela mimo nás. Ale my ručíme za odbornou stránku a i tady překlenujeme naši starou známou projektovou mezeru. Je naší povinností alespoň upozorňovat a označovat takováto klíčová místa projektu a uzlové body bez návratu. Mysleme na to, že mnohé parametry, které jsou z technického pohledu zásadní a nám je jasné, nakolik jejich nastavení a zafixování ovlivňuje další postup implementace, může jak klient, tak i naši manažeři, právníci a obchodníci ze svého laického pohledu považovat za banality, které lze snadno později změnit. Je naší profesionální povinností na ně poukázat a označit ty klíčové prvky, které se nadále musí v návrhu považovat za dané a neměnné. Přinejmenším proto, aby s touto informací mohli dále pracovat všichni, kteří nevidí pod kapotu projektu a do technických detailů tak podrobně jako my. Ať už je to samotný klient, nebo týmy našich spolupracovníků či zástupců třetích stran, které se na zakázce podílejí.

Technologická implementace

Správně bychom měli jakékoli práce na samotné realizaci začít dělat až v této chvíli, kdy máme vše podstatné dohodnuto, schváleno a podepsáno klientem. Dokud není specifikace projektu klientem schválena, může být implementace čehokoli předčasná a potažmo i velmi drahá. Rozhodně bychom se neměli ještě dávno před dokončením návrhu, před sepsáním podrobných specifikací a jejich odsouhlasením klientem bezhlavě pouštět do jakýchkoli drahých a náročných kroků, programovat vlastní knihovny, nakupovat hardware apod. Nicméně spousta méně náročných a relativně „levných“ věcí se dá připravovat průběžně. Když si s klientem už na počátku dohodneme doménu, může už být v této chvíli zaregistrována, mohou být vytvořeny účty na sociálních sítích, vývojáři mohou přemýšlet o budoucím projektu (a zpětná vazba od nich často může být přínosná, mohou objevit problémy, které dosud nikoho nenapadly).

Podle aktuální potřeby, typu projektu a typu klienta se zahájení různých fází implementace (včetně dohody a schválení klientem) mohou různě předsouvat a míchat jejich pořadí. Pokud nám naše zkušenost říká, že např. příprava databází bude náročná a bylo by kontraproduktivní s ní čekat na hotové a schválené wireframy, je patrně vhodné ji předsunout a začít s ní dřív. Jestliže si jsme už jisti, že zakázka bude vyžadovat vytvoření určitých složitých algoritmů na zpracování grafických dat, můžeme svým expertům zadat jejich výzkum a vývoj alespoň na obecné úrovni už v rané fázi projektu. Víme-li už od podpisu zakázky, že bude potřeba vyjednat a zakoupit licence na nějaký software, v okamžiku finálního schválení projektu a spuštění implementace mohou být přinejmenším předjednané a připravené k použití. A tak dále — vždy jde o vyvážení zisků a rizik, stejně jako v každém jiném byznysu.

Na trhu můžeme selhat, budeme-li příliš zbrklí, ale i budeme-li příliš opatrní.

Tohle jsou ovšem už všechno otázky nad rámec designu, jde o obchodní politiku, podnikatelská rizika a organizaci práce. Obvykle je toto všechno náplní práce především projektového manažera na straně dodavatele. Tím můžeme být my sami, ale nemusíme — každopádně v oboru působnosti naší práce coby designéra je hlavně zajistit podklady, důkladně připravit specifikace a modely stránek a pomoci zbytku týmu ujasnit, co všechno se má vlastně udělat. Problematika projektového řízení a organizace práce pak je už docela jiná písnička vysoko nad rámec této knihy.

Jakkoli nás už z ryze designérského hlediska samotná technická stránka implementace nemusí zajímat, je namístě připomenout určité klíčové body, kde se přece jen s vývojáři a výsledky jejich práce musíme dál potkávat. A pohříchu se na tuto poměrně důležitou interakci občas dost zapomíná. Jde totiž o průběžné testování a prezentaci průběžných výsledků implementace.

Už dříve jsme mluvili o rizicích práce se sebestředným bohémským designérem, který se odmítá dělit o průběžné mezivýsledky své práce a touží výhradně po velkolepém odhalení finálního mistrovského díla, nejlépe formou slavnostní vernisáže s autogramiádou. Moje zkušenosti ukazují, že zdaleka nejvíce takových egocentrických typů se ovšem nachází mezi vývojáři a programátory. Donutit některé z nich, aby nám předvedli nedokončenou funkci nebo postoupili k testování nějaký polofunkční polotovar, může být poměrně těžký úkol.

Spolupracujeme-li dlouhodobě s nějakým týmem, už asi víme, co od koho můžeme očekávat, a stejně tak ostatní vědí, co se očekává od nich. U týmu méně známého je docela důležité si tyto parametry ujasnit a pravidla nastavit předem, aby nás později nějaký programátorský bohém nečekaně nezabrzdil. Vždy se snažím si s vývojáři před začátkem implementace dohodnout dvě věci:

Testovací prostředí. Tedy kde a jak bude k dispozici aktuální verze vyvíjeného softwaru, kam mohou snadno přidávat nově nakódované a upravené detaily. U větších zavedených vývojářských firem je samozřejmostí zavedený systém několika publikačních úrovní (stage) i strategie publikování kódu (deploy), ale méně zkušení vývojáři a vlci samotáři, kteří nejsou moc zvyklí na týmovou spolupráci, mohou mít navyklé jiné, pro náš projekt méně vhodné postupy. Je proto důležité mít tyto věci ujasněné už na samém začátku — a vědět, že (a kde) je k nalezení verze, kde lze okamžitě otestovat právě dokončený kód, a případně jiná, kterou můžeme nabídnout k otestování třeba klientovi.

„Good-enough“ strategie. Ať už vývojářský tým používá sám nějaké agilní strategie vývoje, nebo ne, vždy se snažím si osobně s vývojáři dohodnout takové postupy, kdy co nejrychleji ostatním dají k dispozici sice ne perfektní, ale jakž-takž použitelné (good-enough) řešení — které je možné v hrubých obrysech testovat, posoudit jeho interakci se zbytkem aplikace, odprezentovat na něm základní funkčnost atd. — a teprve potom jej vylepšují a zdokonalují. Tento postup dokáže ušetřit neuvěřitelné množství času na vývoji a pro vývoj v týmu se mi zatím osvědčil jednoznačně nejlépe.

Přehnaný perfekcionismus je jed efektivní práce.

Nesmíme také zapomínat na specifickou situaci, kdy se kombinují serverové a klientské aplikace, především dynamické webové stránky používající serverové API (Application Programming Interface). Tedy rozhraní, v němž server nevrací celé hotové webové stránky, ale na základě předaných parametrů poskytuje pouze data, která prohlížeč sám následně zpracovává a vytváří z nich nový obsah stávajících stránek. Zde je nesmírně důležité dohodnout si s vývojáři nějaké obecné rozhraní, kde bude možné testovat samotnou komunikaci mezi prohlížečem a serverem.

Mně se nejlépe osvědčilo vždy vytvořit dvě obecné miniaplikace: jednak API tester v prohlížeči, poměrně jednoduchou stránku, sloužící jako „volač“ serverového API z prohlížeče. Tedy stránku, na niž se zapíše požadavek, který má náš web během skutečných operací volat, a ona následně pouze zobrazí data, která jí server přes API vrátil. A k tomu se co nejdříve snažíme vyrobit tzv. hloupou (dummy) API metodu, tedy serverovou funkci, která nám jednoduše vrátí data, která mu ze strany prohlížeče pošleme. Pomocí ní si kdokoli může snadno nasimulovat jakoukoli interakci mezi klientem a serverem, uměle vyvolávat chyby a extrémní situace. Což, jak je asi zřejmé, je pro další práci a testování nesmírně užitečná a potřebná funkce.

A ještě jednu věc se snažím prosadit, i když ta už je mnohem výrazněji mimo rámec pozice designéra a spadá hlavně do kompetence řízení projektu a samotných vývojářů. Jde o dva zdánlivě protichůdné, ale ve skutečnosti komplementárně spojené požadavky:

Maximálně používat hotová řešení. Doba pokročila, a kde ještě v první dekádě 21. století bylo běžné vyvíjet vlastní knihovny a frameworky (protože jen málokteré hotové řešení se dalo vhodně přiohnout a použít pro konkrétní, něčím specifický projekt), tam dnes již existuje téměř pro každý myslitelný detail celá řada hotových a poměrně pečlivě vyladěných hotových řešení, knihoven a nástrojů. A je obrovským plýtváním a ztrátou času (a ne nutně na samotné naprogramování, ale především na testování a ladění, na což programátoři rádi zapomínají) znovu vyvíjet to, co už je jinde stokrát hotovo a lze — byť třeba s malými úpravami — rovnou použít.

Nespoléhat jen na hotová řešení. Neboť doba kráčí dál a část vývojářů začíná na ona hotová řešení, frameworky a knihovny spoléhat až příliš a považuje je za univerzální a všespásná. Jenže tomu tak vždy není a čas od času se objeví případy, kdy je nakonec přece jen nejefektivnější napsat si malou vlastní knihovnu, která snadno vyřeší daný problém, než přizpůsobovat, omezovat a přiohýbat spousty parametrů pro limitující vstupní požadavky nějaké předpřipravené knihovny. Oba přístupy je potřeba neustále vyvažovat, a jakkoli je obvykle nejvýhodnější a nejlevnější dát přednost vyzkoušeným a praxí ověřeným hotovým polotovarům, může se stát osudnou chybou, že přehlédneme možnost poměrně snadno, levně a efektivně vyrobit řešení vlastní.

V tuto chvíli máme hotový základní design aplikace (na úrovni drátěných modelů), prodiskutovaný s klientem, odsouhlasený a proti podpisu schválený. Spustili jsme vývoj a implementaci všeho, s čím je možné v tuto chvíli začít. Zbývá prakticky poslední krok: zahájit návrh vizuální podoby rozhraní webu neboli odstartovat grafický design.

Grafický design

Návrh webových projektů je komplexní odborná práce, zastřešující mnoho dílčích oborů. Dobře navržený web musí splňovat spoustu parametrů, ale v prvé řadě musí respektovat ony dva nejhlavnější: plnit cíle zadavatele a vyhovovat potřebám uživatelů. Kvalitní návrh webu vůbec nestojí na návrhu jeho grafické podoby. Ta je sice také jeho součástí, ale ani zdaleka z těch nejpodstatnějších. Profesionální webový design spočívá především v důkladných analýzách, co nejpřesnějším vymezení cílové skupiny, návrhu obchodního modelu, marketingových strategií, komunikačního stylu, informační architektury, datových struktur, navigační logiky, volbě vhodných technologií a mnoha dalších, na pohled skrytých funkcí webu, které jsou však pro jeho funkčnost a úspěšnost zcela zásadní a určující.

Povšimněme si, jak neuvěřitelně daleko jsme už pokročili v procesu návrhu webu, a teprve teď se začínáme poprvé věnovat nějaké grafice a vizuální podobě stránek. Zcela úmyslně a cíleně, a to z jednoho zásadního důvodu: všechny dosavadní kroky jsou pro grafického designéra důležitými a současně i nezbytnými vstupy. Zodpovědný profesionální grafik bez nich nemůže pořádně začít a navrhnout skutečně dobrý a funkční výsledek. Jen naprostý amatér začne vymýšlet vzhled webu, o kterém vůbec nic neví. Nezná jeho základní parametry. Neví, pro koho je určen. Netuší, co má být jeho cílem. Může hádat z hvězd, jaká bude struktura obsahu, jaká budou technologická omezení. Neví vůbec nic. A přesto toho je spousta lidí stále schopna: návrh webu začínají grafickým návrhem. Obvykle návrhem úvodní strany.

Ačkoli je grafika a celkový vzhled to první, co na webu každý vnímá a co nás může upoutat, ve skutečnosti je to jedna z jeho nejméně podstatných součástí. Dobře navržený web, kde se správně potkávají potřeby uživatelů s poskytovaným obsahem a službami, bude dobře fungovat i třeba jen v textové podobě nebo s nekvalitní a nikterak poutavou grafikou. A naopak krásný a vizuálně úchvatný web může být možná chvilkovou atrakcí, spíše coby emoční zážitek či umělecké dílo než funkční produkt. Spousty lidí se na něj můžou přijít podívat a pokochat se — ale hned jakmile vyprchá počáteční wow efekt, je konec. Pokud web neplní dobře své základní funkce a cíle, je to nanejvýš krásně nalíčená mrtvola.

Grafická úprava webu je jenom bonus.

Příkladů z obou stran lze najít bezpočet. Skutečně si při nejlepší vůli nedokážu vzpomenout na nějaký úspěšný projekt, který se prosadil kvůli svému úžasnému vzhledu — ale veleúspěšné weby, které zazářily navzdory tomu, jak otřesně až odporně vypadaly, mě napadají jeden za druhým. Původní Amazon, eBay, Yahoo!, Facebook, jmenujte desítky dalších, jeden za druhým… Nastartujte The Wayback Machine na web.archive.org a podívejte se, jak vypadaly ty nejúspěšnější weby a online služby v dobách, kdy teprve nastupovaly na cestu slávy. Zrovna Amazon a eBay byly pro mě vždycky naprostým etalonem nepřehlednosti a amatérského grafického nevkusu. A nikomu to nevadilo, protože především fungovaly a dělaly zatraceně dobře to, co dělat měly. Vylepšování grafiky přišlo na řadu až po mnoha letech.

Jistěže, špatná grafika a fatální chyby ve vizuálním designu dokáží leccos pokazit, o tom není sporu. Ale mezi dostatečně slušnou funkční grafikou a excelentním vizuálním dílem už ve výsledku není tak velký rozdíl, jak bychom si mohli myslet a snad i přát. A i ten nejkrásnější grafický design jen výjimečně dokáže zachránit jinak nedostatečně či chybně navržený a špatně fungující web.

Nepřikládejme vizuálnímu stylu webu příliš velkou váhu. A snažme se to především vysvětlit svým klientům, kteří mu mylně přisuzují důležitost ještě mnohem, mnohem větší. Ovšem upřímně řečeno, my jim to nemůžeme mít tak úplně za zlé. Oni jsou v oboru designu naprostými laiky a grafická podoba (a úvodní strana především) je pro ně to první a nejvýraznější, co na webu vidí. Vzhled stránek pak můžou snadno považovat za to podstatné, co web určuje. Toto je ostatně také klasický příklad projektové mezery — my prostě nemůžeme očekávat, ba ani chtít, aby naši klienti rozuměli zákonitostem designu a aby uvažovali a postupovali jako profesionální designér. Je to věčný boj a také věčná povinnost designérů toto klientům neustále vysvětlovat a přesvědčovat je, že rozhodování na základě tak falešného a zavádějícího podkladu je špatné pro všechny strany a ve výsledku jim jen uškodí.

Velevážení zadavatelé!

Posuzovat design webu podle návrhu grafické úpravy jedné strany je podobné jako hodnotit architektonický návrh domu podle skicy jedné stěny jednoho pokoje. Jistě, možná právě k zbláznění toužíte po žlutě pruhovaném obýváku s velkým modrým obrazem uprostřed čelní stěny — ale taková stěna a takový obraz se dají kdykoli celkem snadno vytvořit v jakémkoli domě, v luxusní vile i ve stodole. A vy přece nepotřebujete jen tu stěnu, vy chcete především navrhnout celý skvělý dům. Dobře navržený dům závisí na stovkách úplně jiných věcí. Musí být praktický, příjemný k životu. Musí mít dobře navržené komunikační a klidové zóny, správně spočítané základy a statiku, kvalitní instalace a sítě, musí stát na dobrém místě, v příjemném sousedství a mít pohodlnou příjezdovou cestu. Musí být kvalitně postavený a detaily řemeslně perfektně zpracované. Topení nemá chladit, kohoutky studené vody nemají pouštět teplou a kohoutky teplé vody nemají pouštět plyn. Dům musí dobře fungovat jako celek i ve všech detailech. Natřít libovolnou stěnu žlutými pruhy a pověsit na ni velký modrý obraz je nepodstatný detail, který se snadno upraví kdykoli po dokončení. A když vás přestane bavit, stejně snadno se stěna přetře na bílo a obraz se nahradí třeba policí se sbírkou fotografií nebo akváriem.

Úplně stejné je to s webem. Jeho vzhled je z technického hlediska podružný detail, který lze dnes snadno změnit prostou úpravou jednoho souboru s popisem stylu. Ale jeho architektura, návrh všeho podstatného, co dělá web funkčním a úspěšným, spočívá v desítkách úplně jiných věcí, než je finální grafická úprava. Stejně jednoduše, jako se dá na libovolnou barvu vymalovat pokoj v luxusní vile i stěna v polorozpadlé stodole, se dá vytvořit požadovaný vzhled a styl na každé existující webové stránce. Ovšem její fungování, to, jak dobře plní svou funkci, jak užitečná je pro vás a praktická pro uživatele, závisí na spoustě úplně jiných faktorů, které už se tak snadno měnit nedají.

Prosím, nevybírejte si dodavatele svého webu na základě nějakého obrázku. Rozhodujte podle toho, na jak důležité otázky se vás bude ptát. Pro koho web bude, co od něj očekáváte, jaký zisk vám má přinést. To je to podstatné. Na žluto vám jej přemaluje za odpoledne každý průměrně zběhlý kodér.

…

Ano, třeba takto a podobně můžeme apelovat na své klienty a ostatní zadavatele webových projektů, kteří pro prvotní posouzení požadují hlavně grafický návrh nějaké — obvykle úvodní — stránky webu. Abych byl upřímný, původně jsem zvažoval na toto místo v knize vložit speciální stránku s nějakým podobným vzkazem pro naše potenciální klienty, kterou by si kdokoli mohl ofotit či vytisknout a všem těm neinformovaným nešťastníkům ji rozdávat. Pak mi ale došlo, že by to vlastně moc smyslu nemělo. Ta osvěta je nakonec stejně jen na nás samotných a na poctivé a upřímné snaze to každému klientovi osobně a zodpovědně vysvětlit. Nicméně, pokud by se to někomu přece jen náhodou hodilo, tak klidně předchozí text kopírujte a užívejte dle libosti. Třeba to někdy něčemu užitečnému prospěje.

Na tuto kapitolu se nevztahuje licence a další ustanovení autorského zákona o kopírování a nešíření platná pro zbytek této knihy. Tato kapitola i její části jsou volně šiřitelné podle licence Creative Commons BY-SA (Uveďte autora, Zachovejte licenci),viz [1] (odkazy na konci knihy).

Držím nám všem palce.

Homepage

Pohříchu mnozí stále považují vzhled úvodní stránky webu (homepage) za jakousi posvátnou esenci celého webdesignu. Seberozsáhlejší webový projekt může stát a padat se správně navrženou datovou strukturou, navigační logikou, inteligentním vyhledáváním v záplavě informací, se souvisejícími logistickými službami nebo tisícem dalších zásadních parametrů — ale stejně se dnes a denně budeme setkávat s výběrovými řízeními, kde je hlavním (a někdy dokonce jediným!) určujícím faktorem právě grafický návrh homepage…

On ten institut úvodní strany webu přitom dnes postupně pozbývá smyslu. Stále více návštěvníků přichází na konkrétní stránky z jiných zdrojů, z vyhledávačů, odkazů na sociálních sítích, blozích a článcích v odborných i populárních médiích. Úvodní stranu tak přitom mnohdy vůbec nenavštíví — a navštíví-li ji, stejně má pro funkci a účinnost celého webu jen minimální význam. Jakási zbytková důležitost homepage pak záleží hlavně na organizační struktuře webu. U hierarchické (kde úvodní strana může současně být hlavním rozcestníkem a kořenem stromové struktury) může být důležitější, u hypertextové struktury (kde jsou si všechny stránky víceméně rovnocenné a nic jako hlavní rozcestník zde neexistuje) nemusí mít význam skoro žádný. A to, jak je tato úvodní strana nakonec graficky zpracovaná, je pak už úplně podružný faktor.

To nejméně podstatné na webu je grafická podoba jeho úvodní strany.

Ovšem to, že prostřednictvím vzhledu homepage vnímají webový design naši klienti coby laici, je celkem pochopitelné. Už méně k chápání je to u lidí z oboru — ať už manažerů či obchodníků webdesignérských studií, nebo dokonce i některých designérů a vývojářů. Úvodní stránka webu je přitom něco jako přístrojová deska v autě. Ano, všechno vede právě sem, tady se scházejí všechny podstatné informace, je to hlavní řídicí rozhraní. Ale kdo si vybírá auto podle přístrojovky? Jaký designér od ní začne návrh automobilu?

Homepage je výslednicí celého webu, nikoli jeho základním kamenem.

I když bude web takového druhu, že návštěvníci obvykle začnou jeho procházení na úvodní straně a ta opravdu bude fungovat jako jeho hlavní rozcestník, z hlediska návrhu webu je vše přesně naopak a designér stejně musí postupovat od konce. Nejprve je třeba navrhnout (aspoň přibližně a orientačně) koncové stránky, pak rozcestníky sekcí, kde se sbíhají související skupiny podobných stránek, pak vyšší navigační úrovně — a až úplně nakonec místo, kde se všechny větve setkávají. Stejně jako autor nejprve napíše knihu a až pak k ní dotvoří rejstřík, obsah a obálku, měl by obdobně vznikat i web. Nejprve samotný obsah, pak úvodní stránky sekcí a nakonec homepage coby logické vyústění, souhrnný přehled a obal již hotového obsahu.

Úvodní stranu webu navrhujme až jako jednu z posledních.

Přinejmenším na úrovni drátěného modelu je tento „obrácený“ postup logický a zásadní — ale má smysl se jej držet i při grafickém návrhu. Když budeme znát všechny detaily, požadavky a nároky všech dalších stránek webu, když budeme mít jasno, jak potřebujeme odlišovat sekce a typy informací, jaké sady ikon a jaké grafické prvky bude potřeba kde používat, bude se nám úvodní strana coby výslednice všeho, co už máme hotové, navrhovat mnohem snáze. Výsledek bude lepší, než když nejprve nakreslíme homepage a pak teprve budeme vymýšlet, jak mají vypadat stránky, na které z ní odkazujeme. Nebo se je dokonce budeme snažit ze vzhledu úvodní strany odvozovat. Pochopitelně, některé detaily tak není na škodu dělat — třeba si v hrubých obrysech připravit styl záhlaví, patičky a případně hlavní navigace, které budou na homepagi třeba v plné velikosti a na ostatních stránkách pak použijeme jejich odvozenou, zmenšenou či zjednodušenou verzi. To může být užitečné. Ale samotný obsah úvodní strany, vizuální třídění informací, přiřazení významu barev a symbolů, grafické akcenty, vizuální priority a všemožné detaily by měly korespondovat s týmiž grafickými prvky a informacemi použitými na všech stránkách. A je přitom mnohem snazší i praktičtější tyto stavební prvky nejprve jednotlivě navrhout, použít na příslušných stránkách webu a na homepage pak jen zpracovat jejich souhrn a vhodně jej uspořádat — než je naopak nejprve navrhnout hromadně na úvodní straně a na podstránky je pak přidělovat a zápolit s postupně odhalovanými nedostatky, opomenutými detaily a různými kolizemi.

Grafik coby součást projektu

Vybraným oblastem vizuálního designu a specifikám navrhování grafické podoby webových stránek a aplikací se podrobněji věnuje třetí část této knihy. Zde zmíníme jen pár obecnějších témat, která s grafickým návrhem v procesu realizace webu souvisejí spíše z organizačního a praktického pohledu.

Jedním z častých problémů vizuálního designu ve webových projektech je nastavení a udržení jednotného stylu. To, že občas vídáme na některých webech prvky jakoby z různých světů, zcela nesourodé grafické rukopisy v těsném sousedství, různá pojetí a chápání barev a symbolů v rámci téhož webu, mívá dvě časté příčiny:

Necitlivé přebírání grafických prvků z jiných zdrojů a kombinování nesourodých vizuálních stylů. Nemám přitom na mysli ani tak nějaké to amatérské vykrádání cizích webů a kopírování cizích nápadů ve stylu od každého kousek (i když i na tento problém každý z nás v praxi určitě někdy narazil). Jde mi spíš o zcela legální a legitimní využívání všemožných zdrojů a knihoven grafických prvků, předloh, šablon a nápadů, kterých je dnes k dispozici obrovské množství a jejichž nabídka stále roste. Ovšem o jejich používání a kombinování ve stylu „každý pes jiná ves“, páté přes deváté, bez ladu a skladu… Knihovny ikon a symbolů, clipartů, písem, fotobanky, barevné palety, dlaždice na pozadí, vzory, ornamenty atd. jsou dostupné na každém rohu ve stovkách exemplářů, tisících stylů a všemožných úrovních kvality. A vybrat z té záplavy dobře, aby spolu vše ladilo a vytvářelo dojem jednotného stylu, nemusí být zrovna jednoduché. Ale aspoň pár základních pravidel může vždy významně pomoci: používat všechny ikony a symboly na celém webu z téže sady v jednotném stylu, ilustrační obrázky z fotobanky vzít všechny z jedné série téhož autora, mít dobře nadefinovanou paletu s určeným významem barev pro celý web, omezit počet písem a jednotlivým typům informací přiřadit shodný styl textu. A především: mít grafika s dobrým okem a obstojným vkusem.

Spolupráce více grafiků s výrazně odlišnými rukopisy a grafickými styly. S tímto problémem se setkáváme hlavně na rozsáhlejších projektech, kde z principu veškerou grafickou práci nemůže zastat jediný grafik a podílí se ní větší tým, příp. rovnou grafické oddělení v realizační firmě. To je samozřejmě zcela korektní postup, ale má jeden zásadní předpoklad úspěchu: jakýkoli tým grafiků, byť tvořený jen dvěma designéry, za sebou musí mít odpovědného šéfgrafika, který má neoddiskutovatelné právo veta. Hlavním úkolem takového člověka v týmu je především filtrování vší té záplavy nápadů, návrhů a náčrtů od jednotlivých grafiků, které by jinak plynuly z grafického oddělení nepřehledným proudem ke zbytku realizačního týmu i ke klientovi — kteří si z nich jinak zcela neomylně vybírají ty nejnevkusnější a navzájem nejméně ladící dílčí návrhy a plní jimi stránky nového webu. Odpovědný šéfgrafik je tady naprosto klíčový, aby tým designérů usměrňoval, udržoval jednotný styl a navenek k posouzení pouštěl pouze ty vybrané (a případně i několikrát přepracované) návrhy, za něž může nést odpovědnost a vlastní kůži na trh.

Je také velmi důležité, aby byli grafici co nejdříve seznámeni s technologiemi, které jsou pro vytvoření webu plánovány. Klíčové jsou především různé UI frameworky a jiné knihovny na straně prohlížeče, které často určují i výrazně limitují uspořádání a vzhled výsledných stránek. Grafici se musejí seznámit s možnostmi použitých řešení a maximálně se jim přizpůsobit — tj. zda a nakolik je možné daný technologický rámec přizpůsobovat, stylovat a nakolik je nutné design skládat jako stavebnici výhradně z předepsaných komponent. Stejně tak musí grafický návrh respektovat i zákonitosti cílového média a předpokládaných zařízení, na kterých bude web používán. Často bývají weboví grafici současně i kodéry a tyto věci mají zažité a používají je téměř automaticky. Pokud ale grafiku našeho webu navrhuje někdo jiný, třeba externí designér bez zkušeností s použitými technologiemi a platformami, je důležité mu tyto parametry předem dobře vysvětlit, dodat dokumentaci a také mnohem důkladněji zkontrolovat a otestovat všechny jeho návrhy, aby byly za daných podmínek vůbec realizovatelné.

Grafický návrh by měl efektivně zužitkovávat dostupná hotová řešení, knihovny komponent, sady symbolů, osvědčené prvky z našich předchozích projektů atd.

Už před zahájením prací na grafických návrzích je nezbytné mít také ujasněn a domluven pracovní postup mezi grafiky a kodéry (pokud se nejedná o tytéž osoby). Především způsob předávání podkladů a jejich přípravu pro potřeby webu bývá důležité opravdu dobře dohodnout, protože různí grafici i různí kodéři mohou být zvyklí na trochu jiné „standardy“. Zatímco pro jednoho grafika končí práce dodáním dokumentu pro Photoshop, jiný je zvyklý dodávat náhled stránky i s jednotlivými optimalizovanými PNG a JPG obrázky pro okamžité vložení do stránek. Zatímco jeden kodér s Photoshopem ani neumí a potřebuje „rozřezanou“ grafiku, jiný potřebuje pro styl své práce právě onen dokument ve Photoshopu, s nímž může dál pracovat a obrázek ještě technicky přizpůsobovat svým potřebám. Zatímco jedni myslí na to, že každý prvek se může různě natahovat a posouvat ve stránce, a pracují spíš „s vrstvami“ stránky a vzhledem jednotlivých elementů, jiní stále pouze „rozřezávají“ nákres stránky na dlaždice, které v kódu stránky „sesadí“ k sobě (jak bylo zvykem před nástupem pokročilého stylování). Včasná dohoda a nastavení pravidel jsou tady nezbytné.

Kódoval jsem vizuálně poměrně náročný web, k němuž grafický návrh dodával externí grafik, dokonce z úplně jiné země. Bylo to už poměrně dávno, v době, kdy teprve první odvážlivci pomalu a nesměle začínali používat pokročilé stylování, a zatímco většina kodérů se především potýkala s odlišnostmi a nedokonalostmi různých verzí nejpoužívanějších prohlížečů a obcházením chyb Internet Exploreru, do nějakých velkých experimentů se málokdo odvažoval pouštět. Mně se naštěstí s klientem povedlo dohodnout na použití strategie „progressive enhancement“, tedy na způsobu kódování stránek, kdy méně pokročilé prohlížeče dostanou verzi stránky sice plnohodnotnou, jenom bez některých méně podstatných, ale na nakódování velmi náročných grafických detailů — jako jsou barevné přechody, zaoblené rohy či vržené stíny. V praxi to znamenalo, že minoritní skupina uživatelů Internet Exploreru 6 viděla některé prvky na stránce s hranatými rámečky bez stínů, zatímco stále rostoucí skupině uživatelů modernějších prohlížečů se tyto prvky zobrazily navíc se zaoblenými rohy a se stínem. Bohužel dotyčný španělský výtvarník se s takovými postupy nejspíš ještě nesetkal a byl zvyklý pouze na „klasický“ postup, kdy si jeho návrhy ve Photoshopu kodéři „rozřezali“ na menší obrázky, které pak vysázeli do stránky jako pexeso coby obrázky na pozadí obdélníkových bloků. Naneštěstí byl jeho photoshopový dokument tak komplikovaný, že umožňoval pouze tento způsob zpracování a žádný jiný — návrh obsahoval velké množství ručně kreslených detailů a komplikovaných barevných efektů přes několik vrstev, takže nebylo možné zobrazit vzhled pouze vybraného prvku stránky a třeba jej pak posunout ve stránce jinam nebo změnit jeho rozměr podle velikosti okna prohlížeče (což byl také jeden z požadavků zadání klienta). Museli jsme si vyžádat rozdělení designu stránek na jednotlivé prvky od samotného grafika. Úplně zbytečný týden zpoždění celého projektu.

S grafikem, který předpokládá, že jeho návrh stránky se rozřezáním na dlaždice převede do prohlížeče 1:1 jako někdy v roce 2001, už dnes asi nebudeme chtít spolupracovat.

A ještě si znovu připomeňme jeden z hlavních motivů této knihy: funkcionalismus. Neboť ani grafický design nemá být samoúčelný, musí být podřízen a v každém detailu sloužit danému cíli. Design každé stránky je zmenšenou verzí celého projektu a cíl každé stránky je současně nějakým jeho dílčím cílem. Všechny stránky mají určen nějaký konkrétní záměr, nějakou akci, k níž je třeba uživatele dovést (Call To Action, CTA), a cílem grafického návrhu stránky je tuto cestu jasně vytyčit, zvýraznit a uživateli co nejvíce zpříjemnit a zjednodušit. Vše ostatní na stránce tomuto úkolu musí sloužit a podporovat jej. Jinak se jedná o neužitečný a zbytný balast.

Grafický návrh webu se nám vůbec nemusí líbit, nemusí se líbit klientovi ani designérovi. Ba dokonce se nemusí líbit ani návštěvníkům! Jediné kritérium je rozhodující: stránka musí fungovat a návštěvníci ji musí chtít používat, musí se chtít vracet a svou činností na webu naplňovat klientovy záměry. To je hlavní smysl designu — líbivost a efekt jsou pak jen nepovinnou přidanou hodnotou. Pokud se nám nebo klientovi v designu stránky něco nelíbí, zajímejme se proto nejprve, proč to tam je a proč to vypadá právě takto. A pakliže pro to existuje funkční zdůvodnění a je zřejmé, že nějaké líbivější řešení by nakonec dávalo horší výsledek, nefungovalo by tak dobře, je ve vlastním zájmu klienta to akceptovat.

Kódování

V tuto chvíli je implementace webu v plném proudu a postupně se objevují použitelné součásti, z nichž už je možné začít kompletovat reálné a funkční stránky. Od vývojářů backendu (tj. programátorů a správců na straně serveru) máme k dispozici funkční publikační platformu, potřebné serverové skripty a komunikační rozhraní. Od grafiků máme grafické návrhy aspoň některých stránek — pochopitelně již řádně prodiskutované a schválené v rámci týmu i s naším klientem — a můžeme vše postoupit vývojářům frontendu, tedy kodérům a programátorům skriptů na straně prohlížeče, k vytvoření reálných šablon stránek. A výsledek pak předat k dalšímu zpracování, integraci šablon do serverových technologií, testování, plnění obsahem atd.

Jak při tvorbě grafických návrhů, tak i při samotném kódování stránek bychom se opět měli snažit (je-li to v našich silách, možnostech a kompetenci) podporovat agilní postupy práce a požadovat co nejdřívější good-enough výstupy k testování, posouzení a prezentacím realizačnímu týmu i zadavateli. Všemi způsoby podporujme vytváření co nejranějších alfa- a betaverzí, které si můžeme prohlédnout, otestovat (konečně poprvé naživo přímo v prohlížeči) a včas odhalit jejich nedostatky nebo zapracovat zapomenuté prvky a funkce.

Vždy a pro všechny je lepší mít o týden dřív neúplnou betaverzi s prázdným rámečkem „tady bude XY“ než stránku perfektní a kompletní, ale o týden později.

Práce kodéra je na rozdíl od ostatních dosud zúčastněných profesí specifická v jedné zásadní věci. Vývojáři na serveru mají dané síťové standardy a konkrétní programové a systémové prostředí, v němž serverové aplikace vyvíjejí. Grafici vytvářejí vizuální prezentaci pro lidský zrak a způsob vnímání, které máme až na výjimky všichni téměř stejné. Ale kodéři stránek jsou v dost odlišném postavení. Vytvářejí totiž kód pro celkem nestandardní a velmi nejisté prostředí. Kód, který vytvoří, bude interpretovat neuvěřitelně pestrá škála prohlížečů a zařízení, jejichž chování a reakce mohou být jakékoli, i zcela nepředvídané. Stránku může načíst nejmodernější prohlížeč ve zbrusu novém výkonném počítači, ale i zastaralá aplikace v ještě starším mobilním telefonu. Může skončit v rozhraní inteligentní televize i polointeligentní lednice, může se načíst do čtečky pro nevidomé, může jej zpracovávat indexovací robot internetového vyhledávače. Může se načíst řádně a celý, může se načíst pouze jeho část, některé připojené soubory mohou chybět, a stejně bude nějak fungovat. Cílové zařízení i způsob použití kódu webové stránky jsou málo předvídatelné a téměř libovolné.

Naštěstí však již pominula doba, kdy neexistovalo nic jako „většinový prohlížeč“. Bylo tu několik rádoby-standardů prohlížečů nejpoužívanějších a několik navzájem se vylučujících způsobů interpretace téhož kódu, s nimiž se kodéři museli naučit pracovat. U běžných stránek se dnes už dá předpokládat existence jakéhosi „standardního prohlížeče“ se standardním chováním i zpracováním kódu. To je pro kodéry velké ulehčení a tento vývoj sejmul z jejich beder opravdu těžké břímě ladění pro několik navzájem významně nekompatibilních, ale masově používaných typů prohlížečů. A umožnilo to také obrovský nárůst automatizace a používání hotových univerzálních knihoven, frameworků a všemožných stavebnicových řešení pro snadnou tvorbu webů.

Na druhé straně přibyly zase komplikace zcela nového druhu: místo nekompatibilních prohlížečů se vyrojilo obrovské množství navzájem nekompatibilních výstupních a zobrazovacích zařízení. Takže zatímco kdysi kodér netušil, zda jeho stránku se bude pokoušet zpracovat Internet Explorer verze 4 či 6, Opera nebo Netscape, dnes zase předem neví, zda se stránka objeví na malém laptopu, na velké 4K obrazovce, na drobném displeji staršího mobilního telefonu, či dokonce zda si ji nechává právě někdo předčítat do ucha svým wearable zařízením při ranním proběhnutí v parku.

Přibylo všeobecně podporovaných standardů a dá se více spolehnout na jejich dodržování, ale tím více je zase rozličných platforem a typů výstupních zařízení.

Naštěstí rozumné způsoby, jak se s tou změtí vypořádat, jsou v podstatě stále stejné a lze je shrnout pod jeden termín: škálování. To má mnoho různých podob, z nichž hlavní a nejpoužívanější jsou:

Responzivní design. Stránky jsou navrženy a nakódovány tak, že podporují širokou škálu výstupních zařízení a způsobů ovládání a samy se přizpůsobují aktuálním parametrům prohlížeče. Na velké obrazovce je obsah třeba zobrazený na šířku v několika sloupcích, u středních velikostí displeje se zredukuje na dva sloupce a pro zařízení nejmenší se vzhled změní do dlouhé, jednosloupcové „nudle“, ideální pro posouvání na malých dotykových obrazovkách. Stránka může umět automaticky podporovat ovládání myší, klávesnicí, dotykem i hlasem, může měnit své chování podle dostupného datového toku (např. video na pozadí pro počítač s rychlým připojením, statický obrázek pro pomalejší připojení a jednobarevná plocha pro pomalé mobilní připojení), může přizpůsobovat vzhled kvalitě zobrazovacího zařízení (barevný displej vs. černobílý elektronický papír) atd.

Graceful degradation a progressive enhancement. Stránka nabízí základní funkcionalitu všem typům zařízení, ale v rozdílné kvalitě a komfortu podle jejich možností. Každá z uvedených strategií na to ale jde z opačného konce. Graceful degradation (česky řekněme elegantní zhoršování) vychází z plné funkčnosti v předpokládaném ideálním zařízení, a pokud cílové zařízení v nějakém ohledu nesplňuje předpokládané požadavky, je mu nabídnuto řešení náhradní, třeba méně pohodlné. Typickým příkladem může být akce provedená pomoci Javascriptu (např. zobrazení videa přímo ve stránce) a náhradní obsah (např. odkaz na dotyčné video ke stažení) zobrazený pomocí značky <noscript>, který se použije v případě, že Javascript není aktivní či dostupný. Oproti tomu strategie progressive enhancement (postupné vylepšování) naopak vychází z univerzální, na samu dřeň zjednodušené prezentace, dostupné úplně všem — a pokud zařízení splňuje nějaké dodatečné požadavky, je mu nabídnuto řešení lepší, komfortnější a elegantnější. Příkladem může být třeba ono dříve zmíněné pozadí stránky: v základu je pozadí ploché, jednobarevné. Pokud kód zjistí, že to kvalita displeje a rychlost připojení dovoluje, je místo toho nabídnutý na pozadí velký obrázek. A pokud se ověří, že připojení je dostatečně rychlé, rozlišení obrazovky dostatečné velké a prohlížeč zvládá potřebnou technologii, je na pozadí zobrazeno video. Speciálním případem progressive enhancement je strategie mobile first, neboli návrh stránek primárně ve zjednodušené jednosloupcové verzi pro malé dotykové displeje mobilních zařízení s postupným zesložiťováním uspořádání a rozvržení stránky a přidáváním dodatečných informací v případě větších a kvalitnějších výstupních zařízení.

Technologický řez. Každý webový projekt má stanovenu hranici verze a kvality pohlížeče a parametrů zařízení, za kterou už je jejich plná podpora příliš drahá a náročná a kterou už vývojáři nehodlají podstupovat. Nastavení tohoto řezu úzce souvisí s použitím výše uvedených strategií, ale vždy jej někudy musíme vést — obvykle přitom stanovujeme technologické řezy dva: zařízení a prohlížeče, které nebudeme podporovat vůbec, a ty, kde web bude fungovat v nějaké omezené podobě (viz technické scénáře v zadání projektu, zmíněné v předchozích kapitolách). V ideálním případě budou stránky vytvořeny třeba tak, že jejich základní obsah zobrazí i nejstarší prehistorický Netscape a veškerá nadstavba bude přidaná pomocí progressive enhancement. To je ale možné jen ve výjimečných případech, daleko častěji si budeme muset stanovit hranici explicitně: např. se rozhodneme nepodporovat prohlížeče (a potažmo v nich neručíme za funkčnost) Internet Explorer starší než verze X, prohlížeče bez Javascriptu, bez Flashe, bez obrázků, bez podpory canvasu, bez podpory knihovny Y verze Z apod. Místo řezu musíme stanovit citlivě, s ohledem na cílovou skupinu i požadavky klienta — a vždy po dohodě s ním. Je opravdu důležité mít hodnotu technologického řezu jasně danou už v zadání projektu a včas schválenou klientem. Dodatečné změny v tomto parametru mohou být velmi, velmi náročné a drahé.

Malá odbočka o mytickém povolání kodérském

Ono to kódování webových stránek, které spousta lidí mylně vnímá jako celkem zřejmou a jasně vymezenou profesi, je (včetně frontendového programování) ve skutečnosti oborem velmi širokým a obsáhlým — vlastně dnes už obrovskou skupinou mnoha oborů, v souhrnu svým záběrem dalece přesahujících i rámec a možnosti stránek této knihy. Už dávno totiž nejde jen o onu klasickou trojkombinaci — vytváření HTML dokumentů, definování vzhledu stránek pomocí kaskádových stylů (CSS) a programování nějakých jednoduchých skriptů v prohlížeči, umožňujících různé dynamické efekty ve stránkách — která v dřevních dobách internetu byla typickým dovednostním triatlonem typického webového kodéra. Už dávno kodér sám nedokáže obsáhnout všechno, co se za tímto neustále bobtnajícím oborem skrývá dnes. A neustále vzniká spousta nových samostatných, specializovaných kodérských podoborů.

Specializace na používání různých sofistikovaných nástrojů, knihoven, frameworků, preprocesorů a jejich kombinací. Znalost tvorby a úpravy šablon různých publikačních nástrojů — je běžné potkat kodéry-specialisty pouze na šablony WordPressu, Drupalu nebo Joomly či dalších více či méně známých publikačních systémů. Programování celých klientských aplikací v Javascriptu — a i to už je příliš obecné pojetí, sami javascriptoví vývojáři tvoří různé profesní podskupiny podle způsobu, jakým s Javascriptem pracují, na jaké nástroje, frameworky a knihovny se specializují. Mnohé z nich jsou ostatně natolik složité a mohutné, že samotné jejich zvládnutí a mistrovství v jejich používání vyžaduje i roky studia a praxe. Ale to stále není vše. Jsou zde kodéři zaměření jen na flashové aplikace, na tvorbu animací v HTML5+, na zpracování vektorové a 3D grafiky, vývojáři aplikací v Javě a jiných platformách integrovatelných do prohlížečů. Jsou kodéři zaměření na tvorbu mobilních rozhraní, na specifická nepočítačová rozhraní a mnoho dalších specializovaných dílčích profesí.

Profese „webový kodér“ již prakticky neexistuje. Nahradily ji desítky specializovaných oborů.

I proto je tak důležité mít ještě před zahájením implementace dobře ujasněnou specifikaci a navržené technologie, které se budou používat. Neboť i zdánlivě drobná změna těchto technologií může mít za následek poměrně zásadní změny ve vývojářském týmu, způsobu práce i radikální změny v postupu a organizaci práce celého projektu. Pakliže jsme to všechno připravili a zakotvili správně, v tuto chvíli díky tomu máme od těch správných specialistů požadované výstupy nakódované ve správném formátu a nad správnými technologiemi a můžeme s nimi náš projekt pomalu finalizovat.

Simpančelko, já jsem zaspal

Ach ano, ti opozdilci… Vždy se nějaký objeví. Pokaždé se na něco zapomnělo, někdo si vymyslel novou funkci na poslední chvíli, vždycky je časem potřeba něco přidat, změnit, doplnit. Ve své praxi jsem nezažil ani jediný projekt, ani ten nejmenší, který by hladce proputoval po ideální trase od vytvoření specifikace přes jeho implementaci až k předání a bezvýhradnému odsouhlasení. Vždy je nutné zanášet do projektu nějaké dodatky, změny a doplňky. Tomu se nedá zabránit, je to přirozená součást procesu designu.

Jen úplně nezkušený designér se diví dodatečným změnám a doplňkům zadání.

Osobně už jsem se po mnoha zkušenostech naučil očekávat změny a dodatky v přímé úměře s termínem dokončení projektu: čím je projekt blíže dokončení, tím spíš se nějaké objeví a tím zásadnější bývají. Popravdě řečeno, s postupujícím vývojem webu a blížícím se zdánlivým dokončením bývám víc a víc nervózní, když náhodou stále žádné nové požadavky nepřicházejí. V pozdějších fázích implementace už je raději z klienta výslovně mámím a sugestivními a návodnými dotazy při prezentacích se snažím přijít na to, co se kde opomnělo a jaké „jobovky“ se ještě mají objevit. Protože ony ty změny zákonitě přijdou, a čím dříve je odhalíme a do projektu zapracujeme, tím lépe pro nás a tím více času a práce nakonec ušetříme.

Naštěstí pro nás jsou takové implementace typu „ticho před bouří“ (s nějakou tou tikající bombou v závěru) spíše výjimečné. Obvykle se nové požadavky, dodatky zadání a změny specifikací objevují průběžně, a to od samého začátku až do konce — jak ze strany klienta, tak i od našeho vlastního realizačního týmu. Počítejme s nimi a můžeme být leda příjemně překvapeni.

V armádě i v designu se osvědčuje staré pravidlo: doufej v nejlepší, buď připraven na nejhorší.

Každý podstatnější dodatek a dodatečná úprava ovšem pro designéra přináší tutéž kritickou situaci: je to jednoduše změna zadání. Projdeme-li si (aspoň v duchu) znovu celý předchozí proces, který jsme dosud s vývojem webu podstoupili, a uvědomíme-li si, jak pečlivě jsme vyvažovali všechny vstupní požadavky a výsledné řešení webu, je nám jasné, že každá sebenepatrnější změna teoreticky může poměrně zásadně zahýbat s celou dosavadní realizací našeho projektu. Jistěže: může, ale nemusí — a v mnoha případech třeba ani žádné fatální důsledky mít nebude. Ale vždycky je tu to nezanedbatelné procento případů, kdy její vliv a všemožné zavlečené důsledky mohou mít až katastrofální efekt, pokud je přehlédneme a zanedbáme.

Jako designéři však máme poměrně účinný nástroj, jak takovým nebezpečným situacím bránit. Nástroj zdánlivě tak složitý, že se mu v obavách spousta designérů vyhýbá — ale ve skutečnosti poměrně snadný a tak účinný, že se jednoduše vyplatí jej pokaždé bez přemýšlení použít. S jakoukoli změnou stačí (aspoň symbolicky, ale přece) projít celý dosavadní proces úplně od začátku. Tedy doplnit požadovanou změnu do podrobného zadání projektu na samotném začátku a následně si poctivě projít všechny další kroky a odvozená zadání, která z nich plynou. Musíme ověřit, zda upravené zadání stále vyhovuje všem následně zvoleným řešením, postupům a nastaveným parametrům. Zda nadále vše „sedí“ do navržených návrhových a navigačních vzorů, zda se s touto změnou nějak zásadně nemění datová architektura a logická struktura, nevznikají nějaké kolize a zda negeneruje nové požadavky na implementaci.

Každá, i nepatrná změna či dodatek mají právo i povinnost projít si celým procesem návrhu, stejně jako to udělaly všechny dosavadní součásti zadání projektu.

Takto popsáno to nejspíš opravdu vypadá velmi složitě a náročně a je to právě ten hlavní důvod, proč se tento krok tak často podceňuje a designéři jej raději obcházejí s tím, že dotyčná změna „nějak“ do stávajícího řešení zapadne, ztratí se v něm a „rozpustí“, než by se s každým novým požadavkem pouštěli do nějakých zdánlivě složitých analýz možných následků a rizik. Jenže ono se ve skutečnosti jedná o poměrně jednoduchý proces, který provedený skutečně poctivě může zabrat jen několik minut (u jednodušších projektů i jen sekund) designérovy práce — a přitom dokáže v těch několika kritických případech zabránit velkým škodám a fatálním následkům. Pokud totiž použijeme postup popsaný v předchozích kapitolách této knihy jako svého průvodce, jako jakýsi kontrolní seznam, kterým dotyčnou změnu „proženeme“, zjistíme celkem snadno a rychle, co příslušná změna zadání způsobuje a jaký má vliv na všechny dosavadní specifikace a již zrealizované části projektu.

Pochopitelně není vůbec potřeba používat celý podrobný postup uvedený v předchozích kapitolách. Bohatě stačí, když si během návrhu budeme vést vlastní bodový seznam všech úkonů a rozhodnutí, které jsme skutečně učinili — a každou nově zanesenou změnu jím projdeme od začátku až do konce. Zda a jak ovlivňuje cíle projektu, zda nějak mění cílovou skupinu, obchodní model, CTA některých stránek, zda se nějak projeví v technických specifikacích, jestli je ji potřeba promítnout do uživatelských a technických scénářů, zda ovlivní styl prezentace a navigační vzory, nakolik a jak zásadně změní již hotové modely a prototypy, případně grafické návrhy stránek, naprogramovaný kód na straně serveru i klienta, jaké budou všechny případné důsledky… Čím pečlivěji s touto změnou projdeme celý seznam, tím snazší a přesnější to posouzení bude. A naopak: čím vágněji to uděláme, čím méně precizně zohledníme všechny dosud provedené kroky, tím více nad tím budeme muset dumat a tím spíše také něco přehlédneme. Prostá důslednost a strojová přesnost postupu jsou tady nejefektivnější.

A troufám si zde tvrdit, že opravdu poctivě provedená kontrola skrz dobře vedené podklady a pečlivou evidenci všech dosavadních kroků je u každé nové změny otázkou nejvýše několika minut. Přitom jde o postup, který dokáže ušetřit obrovské časové i finační náklady, což se rozhodně vyplatí. Zažil jsem mnoho projektů, kde tuto proceduru nikdo neabsolvoval a každá nová změna či doplněk nakonec vyústily do sáhodlouhých debat, porad a mnoha hodin planého tlachání o možných vlivech a důsledcích změn, vymýšlení ad hoc záplat a všelijakých provizorních řešení. Aniž by kdokoli ze zúčastněných měl aspoň přibližnou představu o tom, co všechno daná změna skutečně způsobuje a co všechno a jak ovlivňuje.

Jsem přesvědčen, že většina největších chyb webových projektů je způsobena právě nedostatečným zprocesováním dodatečných změn zadání a všemožných pozdějších přílepků.

Vůbec nejhorší pak je, když důsledky změn či dodatků skutečně nějak podstatně ovlivní již hotové věci, ale nechají se být, jak jsou. Ať už to nikdo nepostřehne, nikdo to neřeší, anebo si toho i třeba všimne, ale už se nikomu nic měnit nechce… Často se to projevuje ve všemožných logických strukturách, jednou již nadefinovaných a uzavřených celcích: systémech použitých ikon a symbolů, barevných schémat a barvám přiřazených významů, nebo třeba v již hotových programech, knihovnách a skriptech. Taková struktura byla jednou nějak vymyšlena, nějak vybalancována, aby jakž takž dávala smysl — a najednou se objeví nový prvek, který do tohoto systému příliš nepasuje. Co s tím?

Nejsnazší a mnohdy používané „řešení“ je pohříchu pštrosí přístup: strčit hlavu do písku a tvářit se, že se nic nestalo. Třeba si toho nikdo nevšimne… A popravdě, velmi často tomu tak je. Změny bývají ponejvíce drobné a nenápadné a pokaždé se nějak ošulí a zakamuflují a nějak se to tam ztratí. Největší nebezpečí je tady skryto v kumulování takových drobných kamufláží a švindlů. Generování velkých průšvihů nenápadnou salámovou metodou. Projednou si toho nikdo nevšimne, ani napodruhé a ani napotřetí — a po několika postupných změnách máme najednou logický guláš, který možná ani sami už nevnímáme. Strukturu malých dílčích záplat, na které si celý realizační tým postupně a pomalu zvykal a každou další změnu každý přijal s mnohem větší tolerancí, než kdyby byla navržena už na samém začátku. Jenže potom spatří výsledek nezaujaté oko koncového uživatele a uvidí jenom nelogický zmatek. Hromadu navzájem nesourodých symbolů, které mu v celku nedávají valný smysl, podobné prvky a stejné barvy s naprosto odlišnými významy v různých kontextech, za roh zahnuté a nepochopitelné postupy, překomplikované a zmatené průvodce, položky a akce zdánlivě bez významu, jejichž skutečný smysl se pod vrstvou záplat a záplat na záplatách už dávno ztratil a tuší jej pouze sami autoři, kteří za nimi ještě dokáží cítit jejich prapůvodní, ale dávno pozbytý význam.

Nejtěžší je zde pro designéra boj s vlastním týmem.

I když totiž odhalíme potenciální nelogičnosti a rizika v takových drobných změnách a zdánlivě nevinných úpravách, obvykle narazíme na silný odpor jak u samotných grafiků a vývojářů (Přece nebudeme překreslovat všechny ikony kvůli jedné nové kategorii, zbláznil ses?), tak i u projektových manažerů a obchodníků (Změnit API a přeprogramovat půlku databáze, jen protože klient se rozhodl, že registrace bude nepovinná, by stálo 120 člověkohodin práce navíc! A tady Franta Programátor říká, že se to dá obejít jedním dodatečným políčkem v databázi, tak to tak uděláme)…

Vysvětlit a prokázat potenciální dalekosáhlé důsledky takových polovičatých řešení je dalším těžkým údělem designéra. Samozřejmě tady musíme být i sami trochu zodpovědnými obchodníky a manažery a dobře vyvážit, zda potřebné náklady a vynaložené zdroje na důkladnější změny stojí opravdu za to. Jsme-li přesvědčeni, že ano, že je to skutečně důležité, musíme se o jejich prosazení snažit všemi silami a prostředky. A v opačném případě, pokud by nároky a náklady na radikálnější změny možný přínos ani zdaleka nevyvážil, je naší povinností hledat a najít alternativy, kompromisy a únikové cesty.

Následné práce

Máme hotový podrobný návrh webu, připravené serverové technologie, navržené i graficky zpracované všechny stránky, nakódované všechny potřebné šablony, naprogramované všechny skripty. Vše vypadá funkční, mohlo by se zdát, že už máme v podstatě hotovo a nic nechybí… Jenže k tomu, aby se web mohl spustit a předložit uživatelům k používání, toho pořád chybí ještě spousta.

V prvé řadě máme web funkční opravdu jen zdánlivě. K potvrzení skutečné funkčnosti je potřeba jej řádně otestovat. A následně vychytat všechny nalezené mouchy, odstranit chyby a vyladit skřípající místa. Vyzkoušet nejen funkčnost, ale podle potřeby také použitelnost, efektivitu, ergonomii, případně i přístupnost pro uživatele se speciálními potřebami. Také přichází na řadu obsahová implementace: dosud prázdné šablony stránek je potřeba naplnit daty. Někdo musí napsat texty, dodat reálné obrázky a multimédia. Musí být k dispozici nástroje na vkládání a úpravy obsahu, nastavená pravidla administrace a definované postupy pro správu dat. Marketingoví specialisté musí začít web propagovat i zajistit reklamy, které se zde mají zobrazovat. Analytici musí připravit nástroje pro sledování chodu webu. Vývojáři musí do stránek naimplementovat reálné reklamní kódy a všemožné sledovací a analytické skripty. Web je potřeba zařadit do vyhledávačů a vyladit jeho parametry tak, aby jej cílová skupina co nejsnáze našla. Je nutné mít definované postupy pro následné zanášení změn a oprav v kódu, postup publikování a dodatečného testování. Navrženou a zajištěnou budoucí správu serverů a technickou podporu, zálohování, krizové scénáře atd.

Dlužno podotknout, že na všechny tyto věci obvykle při realizaci sotva někdo úplně zapomene. Ovšem nepříjemně často se na ně zapomíná na samotném začátku při dojednávání zakázky a její ceny. Tedy, abych byl přesný: zapomínají na ně hlavně méně zkušení webdesignéři a menší vývojářské firmy. Velké a zavedené firmy na těchto položkách naopak velmi často stavějí jádro celé zakázky a někdy právě tyto části dodávek tvoří největší zisky celé firmy — a po právu, jde o části dost zásadní a mnohdy mnohem důležitější než samotný design webu. Na druhé straně jde o činnosti již poněkud za hranicí práce designéra, a proto jim v této knize nemůžeme věnovat takový prostor, jaký by si jinak zasloužily. Spoustu potřebných informací najdete v literatuře a dalších zdrojích věnovaných příslušným oborům: online analytice, marketingu, SEO, projektovému řízení, správě IT systémů a dalších.

Testování implementace

Testování jsme se v této knize už věnovali v jedné z předchozích kapitol. Tam ovšem šlo především o ideové testování coby součást návrhového procesu — nyní nás zajímá hlavně testování implementace, tedy skutečné posouzení již reálného produktu v praxi. Také toto testování má několik různých úrovní, variant i typů, odlišených především podle toho, co testy mají odhalit, kdy se provádějí a nač se zaměřují.

Vývojářské testy (developer testing). Programátorské testy na nejnižší úrovni. Ty jsou obvykle zcela mimo naši starost a slouží jako integrální součást procesu vývoje softwaru a programátoři a kodéři je provádějí obvykle sami ještě předtím, než výsledný produkt odevzdají jako hotový. Jedná se především o různé jednotkové (unit) testy, které mohou být i nedílnou součástí vývoje (jednou z programátorských metod je tzv. test-driven neboli testy řízené programování, kdy se nejprve vytvoří sada testů a předepsaných výsledků, které musí výsledný kód splnit, a jim na míru se kód teprve naprogramuje), ale i veškeré další testování prováděné samotným vývojářem, kdy si průběžně ověřuje funkčnost všech naprogramovaných funkcí a metod.

Testování funkčnosti (feature testing), včetně integračního a systémového testování. Tedy ověřování skutečné funkčnosti a korektního chování všech dostupných součástí a akcí na webu, ale i toho, jak dobře spolu jednotlivé stránky, prvky, dílčí programy, metody, knihovny a sdílené funkce spolupracují, že nedochází ke kolizím, že některé součásti nejsou ve vzájemném rozporu, nebo dokonce jedna druhé nenarušuje její funkčnost. Toto už bývá starostí pověřených testerů — buďto přímo specializovaných pracovníků z QA (Quality Assurance) oddělení realizační firmy, odborníků z externí testerské firmy, nebo třeba uzavřené skupiny alfa- a beta-testerů z řad odborné, či dokonce laické veřejnosti. Testeři zde obvykle ověřují předepsané sady úkonů a procházejí základní uživatelské scénáře a snaží se prověřit, že všechny stránky jsou plně funkční za všech možných okolností, kombinací různých vstupních podmínek, za standardních i extrémních situací. Všechny nalezené problémy pak hlásí zpět vývojářskému týmu a příslušný projektový manažer pak obvykle rozhoduje, nakolik je která chyba kritická či méně důležitá, a řídí harmonogram jejich oprav — od okamžitých zásahů přes odsunutí jejich řešení do některé z pozdějších verzí až po jejich ignorování coby pominutelných, či dokonce chybně nahlášených.

Akceptační testování (acceptance testing). Typicky probíhá souběžně s funkčním testováním a jeho cílem je prověřit, že web či aplikace splňuje všechny požadavky zadání, má všechny požadované funkce a vyhovuje požadavkům klienta. Mělo by proběhnout dvoufázově — nejprve si tyto požadavky prověříme sami, a teprve když jsme sami přesvědčeni, že by klient měl být spokojen, postoupíme testovací verzi webu k otestování jemu samotnému. Náležité otestování a (typicky písemné) schválení klientem pak bývá nezbytnou a zcela zásadní součástí předání zakázky.

Pilotní ověřování a veřejné betatesty. Po dostatečném odladění a odstranění základních nedostatků nalezených v předchozích fázích testování je možné web spustit také v reálném provozu pro omezenou skupinu uživatelů z řad veřejnosti, nebo dokonce pro širokou veřejnost (ale obvykle ještě spíše nenápadně, bez větší publicity). V této fázi testování musíme klást velký důraz na dobrou dostupnost technické podpory a především nástrojů, pomocí nichž nám uživatelé mohou co nejsnáze a co nejpřesněji hlásit všechny chyby a problémy, s nimiž se při zkušebním používání setkají.

Testování použitelnosti (usability testing). Asi nejčastější aplikace uživatelského testování. Lze jej použít v různých fázích vývoje webu — od těch nejranějších, pouze nad hrubými prototypy navrhovaného webu, až po velmi pozdní, dlouho po spuštění v ostrém provozu, pro ověření či vylepšení jeho efektivity. Obvykle se provádí ve formě řízených testů s pečlivě vybranou skupinou osob co nejlépe kopírujících vybranou cílovou skupinu webu a plnících úkoly odpovídající předepsanému uživatelskému scénáři. Do určité míry lze uživatelské testování provádět i amatérsky či poloamatérsky i ve víceméně polních podmínkách — kdy třeba k testovanému webu posadíme nějakého nezaujatého laika, který by podle nás mohl odpovídat představiteli cílové skupiny (kolegu z práce, přítele, maminku, náhodně osloveného neznámého člověka atd.), požádáme jej o provedení nějakého úkolu podle předepsaného uživatelského scénáře v zadání našeho projektu a beze snahy o jakékoli ovlivňování sledujeme, jak postupuje. Jeho činnost co nejpodrobněji dokumentujeme (detailními poznámkami ze svého pozorování nebo rovnou video- nebo alespoň audionahrávkou) a následně se ji pokusíme analyzovat a vyvodit z ní, kde může mít náš design jaké vady a jak dotyčná místa případně vylepšit. Takto vlastními silami ovšem můžeme získat jen spíše nepřesný orientační obrázek o možných problémech a hodí se to jen pro základní ověření, většinou v případě, že máme na nějaké takové zádrhely sami podezření. Má-li ovšem uživatelské testování přinést skutečně užitečné výsledky, je vhodné je svěřit odborníkům — máme-li certifikované experty přímo ve své firmě, případně se poohlédneme po specialistech, kteří taková testování provádějí na zakázku. Ti mají jednak vybavení, které nám obvykle bude chybět (např. snímače, kamery a software sloužící ke sledování svalových reakcí či pohybů očí během testování a jejich vizualici, tzv. heat map apod.). A především mají nesrovnatelně hlubší znalosti, zkušenosti a ověřené scénáře, jak při testování postupovat — nač se ptát, kam a jak uživatele navádět, aniž by to zkreslilo výsledky, jak řešit nečekané situace a především jak získané informace následně interpretovat. Tady se amatérské pokusy ve snaze ušetřit opravdu nevyplácejí. Než špatně a neodborně provedené uživatelské testování, to raději žádné.

Testování přístupnosti (accesibility testing). Neboli ověření použitelnosti webu za určitých extrémních podmínek, vymezených obvykle nějakými speciálními požadavky uživatelů — může jít o zdravotní omezení a různé poruchy vnímání, jako jsou poruchy vidění, barvoslepost, částečná či úplná slepota, snížená mobilita, specifické potřeby dané třeba vrozenou hluchotou, mentálními dispozicemi, jazykovými bariérami; ale i o omezení technického rázu jako nestandardní či zastaralé komunikační zařízení, nedostupnost určitých technologií, extrémně nízký datový tok a mnoho dalších. Tady narážíme u testování na požadavek skutečně vysoké odbornosti. Nejenže zde potřebujeme znát a dodržet velmi přesné metodiky pro testování, ale vyžaduje to současně i dokonalou znalost požadavků a norem, jimž musí web za daných okolností vyhovovat. Jedná-li se třeba o web institucí státní a veřejné správy, web určený pro úzce vymezenou komunitu uživatelů, web vyžadující dodržení konkrétních standardů, norem a vyhlášek, dodržení požadavků pro certifikaci WCAG, Section 508 atd., plyne z takového zadání vždy poměrně přesná specifikace požadavků, často i vymezených zákonem, jimž musí každá stránka a každý postup při jejich používání vyhovovat. Zde se už na vlastní síly obvykle spoléhat nemůžeme, a pokud ve svém týmu nemáme certifikovaného odborníka na tuto oblast, měli bychom se raději obrátit na odbornou firmu pro posouzení (a certifikaci, kterou v takovém případě asi budeme potřebovat). Pokusy o nějaké amatérské řešení tady mohou mít velmi fatální následky — jak pro našeho klienta, tak následně pro nás. Pokud se z vlastní vůle rozhodneme, že web chceme vytvořit přístupnější pro některou skupinu uživatelů se specifickými potřebami, můžeme se pokusit web v tomto směru vylepšit vlastními silami. Ale objeví-li se v zadání nějaký jmenovitý požadavek na dodržení standardu, normy, či dokonce zákona týkajících se přístupnosti, rozhodně bychom měli chtít do realizace webu zapojit také příslušného odborného poradce či specializovanou firmu.

A/B testy. Speciální případ testování, který neslouží přímo k ověřování funkčnosti či konkrétních parametrů webu, ale spíše k vylepšování jeho účinnosti a úspěšnosti. A/B test je velmi efektivní metoda, jak ověřit, které ze dvou (či více) možných řešení lépe funguje, více vyhovuje uživatelům, má vyšší účinnost, lepší mediální dopad apod. Zjednodušeně řečeno, dvě alternativní řešení téhož postupu či designu nějakého prvku nasadíme do ostrého (či testovacího) provozu současně a programovými prostředky zajistíme požadovanou distribuci těchto variant v čase a prostoru mezi uživatele. Běžně se používá prosté rozdělení dvou variantních řešení náhodně a rovnoměrně mezi uživatele za co možná totožných podmínek — a to, které po určeném období vykazuje lepší výsledky (podle nějaké předem stanovené metriky), se pak považuje za lepší a použije se pro všechny. A/B testy jsou velmi účinným a bohužel poněkud podceňovaným nástrojem. Především u webů, kde lze metriky zvolit poměrně exaktně (objem prodeje v e-shopu, účinnost reklamy, konverze konkrétního odkazu atd.), bychom měli A/B testy používat poměrně často a snažit se je uplatnit na každý nápad, který může mít potenciál na zvýšení efektivity webu. Přesnost a správnost metriky je ale důležitá, protože A/B testy jsou docela náchylné k ovlivnění náhodnými jevy a snadno můžeme zcela náhodný výkyv nějaké měřené hodnoty zaměnit za potvrzení lepší účinnosti testované varianty. Ovšem pokud umíme A/B testy používat dobře a zodpovědně, budou pro nás jistě velmi užitečné. Tam, kde je možnost v budoucnu tento nástroj uplatnit (tedy hlavně u e-shopů, webů profitujících z reklamy apod.), se snažme nástroje umožňující snadné nasazení A/B testů naimplementovat již od samého začátku, jako integrální součást kódu. Pozdější dodatečné snahy mohou být pak už dost komplikované — a budeme-li mít nějaký praktický nástroj k A/B testování k dispozici standardně a bude-li jej snadné použít kdykoli, budeme jej také sami chtít častěji využívat a může nám přinášet významný efekt.

Vždy důsledně odlišujme různé typy testování. Nesnažme se vzít jedním vrzem základní ověřování funkčnosti a správnosti kódu s testováním použitelnosti, či dokonce přístupnosti webu. Ačkoli vše se nazývá týmž slovem „testování“, jedná se o činnosti ve své podstatě dost odlišné a nelze je směšovat či zaměňovat. Největší rozdíl je totiž v samotných testujících a potažmo i v tom, co od nich zrovna očekáváme — častou a velmi vážnou chybou je třeba považovat za relevantní zpětnou vazbu ohledně přístupnosti a použitelnosti od vlastních QA testerů. Obvykle se jedná o IT specialisty, kteří jen výjimečně budou patřit do cílové skupiny uživatelů webu. Pokud se designér nechá zmást připomínkami k použitelnosti od někoho, kdo není cílovou skupinou, může se dočkat i velmi nemilých překvapení. Rozdíly ve vnímání a chápání konkrétních věcí mohou být mezi různými sociodemografickými skupinami velmi odlišné — a pokud se spleteme a vyslyšíme připomínky od IT odborníků třeba na webu určeném pro svobodné matky v domácnosti, můžeme se dočkat i dost nemilých následků.

Copywriting

Profese copywritera byla dříve známá spíše coby reklamní textař. Tedy odborník dovedně používající všechny možnosti jazyka tak, aby na ploše nějaké reklamní plochy či celé kampaně co nejúčinněji sdělil čtenáři, posluchači či divákovi potřebné komerční sdělení. Musí správně odhadnout cílovou skupinu, trefit se do jejího jazyka, terminologie, způsobu vyjadřování i myšlení a vybrat slova tak, aby s konzumentem reklamy co nejúčinněji zarezonovala, a přitom mu sdělit všechny podstatné informace, které se má dozvědět.

S nástupem webu coby účinného marketingového nástroje se tato profese rozšířila na kompletní tvorbu obsahu celých webů a vznikla i samostatná specializace čistě webových copywriterů. Dobrý webový copywriter v sobě spojuje znalosti hned několika oborů a v ideálním případě je jím vytvořený obsah vyladěný z více hledisek současně:

Použitelnost (usability). Texty jsou především dobře pochopitelné, nekomplikované, obsah je přehledný, sdělení je podáno lidskou a srozumitelnou formou. Uživatel nemusí luštit komplikovaná souvětí a orientovat se v neznámé odborné terminologii. Obsah je členěn do kratších vět a vhodně dlouhých odstavců a kapitol, vše důležité je na začátku, dále se v textu pouze upřesňují detaily, obsah je vhodně strukturován, nadpisy a texty odkazů jsou výstižné, obsah a struktura navigace přehledná a návodná atd.

Přístupnost (accesibility). Podle potřeby a specifických požadavků speciálních cílových skupin je obsah přehledný a srozumitelný i při použití např. hlasového výstupu, slepeckého braillského řádku či pro uživatele od narození neslyšící, jejichž vnímání jazyka bývá velmi odlišné. V případě technických omezení dokáže dobrý specialista správně vybrat co nejstručnější, výstižné, a přitom unikátní názvy odkazů a kategorií, aby např. navigace byla i na tom nejmenším displeji zobrazena jako jednořádkové položky. Zaměření copywriterů na oblast přístupnosti je poměrně vzácné, a v případě potřeby a pokud nám na přístupnosti webu skutečně záleží, bývá potřeba obracet se na externí specialisty.

Korektnost a estetika. Texty jsou psané kvalitním jazykem, pečlivě redigované a samozřejmostí je formální a gramatická správnost. Všechny texty po celém webu jsou v jednotném a přiměřeném stylu, odpovídajícím celkovému stylu webové prezentace. Kde je potřeba, je použit zcela spisovný jazyk a třeba akademický styl — na jiném webu bude zase namístě jazyk hovorový používající módní termíny či slang a styl volnější, přátelský, žoviální, familiární či přímo intimní. Autor musí příslušný styl velmi dobře ovládat, neboť s každým posunem jazyka k extrémnějším polohám hrozí odhalení a výsměch ze strany cílové skupiny, což může velmi snadno citelně ublížit celému webu.

Marketing. Zde zůstává prapůvodní základ reklamního textařství. Texty jsou voleny tak, aby co nejefektivněji působily na cílovou skupinu, poutavě sdělovaly potřebné informace a co nejúčinněji vedly návštěvníka každé stránky k zamýšlenému cíli, tedy obvykle k požadavané CTA (call to action) stránky. Čistý marketingový copywriting je důležitý hlavně u ryze komerčních webů — firemních prezentací a e-shopů. Ale i u těch ostatních jsou důležité některé jeho aspekty: budování důvěryhodnosti, dojmu spolehlivosti, vytváření pozitivních emocí, pocitu unikátnosti, čtivost a pocit vysokého přínosu webu pro návštěvníka. To jsou prvky podstatné pro každý web, i když se za ryze komerční ani nepovažuje.

SEO (Search Engine Optimization, optimalizace pro vyhledávače). Zde se potkávají techniky SEO a copywritingu. Podstatné je zde správné použití vhodných klíčových slov, jejich frekvence a kontext, optimální strukturování obsahu, obsah nadpisů a odkazů, a to při zachování maximální přirozenosti textu, zajímavosti a čtivosti pro čtenáře. Jedná se opět o velmi specifickou disciplínu, kterou jen tak každý copywriter stoprocentně neovládá. Je zde možné mnoho získat, ale také mnoho ztratit, a pokud si nejsme jisti tím, že nemáme na copywriting skutečného experta (který opravdu dobře ví, co a proč dělá), raději se do nějakého cíleného „vylepšování“ obsahu pouze pro vyhledávače nepouštějme a soustřeďme se na maximálně přirozený obsah optimalizovaný primárně pro naše návštěvníky. Takový web potom i ve vyhledávačích obvykle funguje lépe než web amatérsky „optimalizovaný“ nadbytkem klíčových slov a křížových odkazů.

Je zřejmé, že i copywriting coby jedna z mnoha dílčích profesí zabývajících se tvorbou webů je dnes už poměrně širokým oborem a asi jen výjimečně najdeme copywritera, který by dokonale ovládal všechny jeho aspekty a roviny. Ostatně nejde jen o jeho schopnosti — zdaleka ne každý web umožňuje ideálně vyvážit a vyladit obsah ze všech hledisek současně. Některé se mohou u konkrétního projektu dokonce vzájemně vylučovat — především otázka přístupnosti může být významným faktorem, který může některé původní a odvážnější představy o podobě webu narušit. Nicméně obecně lze říci, že dobře strukturovaný obsah, psaný gramaticky správně a v jednotném stylu, srozumitelným a jednoduchým jazykem, dělený do krátkých vět a nepříliš obsáhlých celků, s návodnými odkazy a srozumitelnou navigací bude automaticky a přirozeně vyhovovat většině požadavků a bude dobře fungovat jak pro návštěvníky, tak i pro algoritmy vyhledávačů.

Z obecného pohledu se dají požadavky na webový copywriting shrnout do termínů srozumitelnost a stručnost. Text by měl být formulován a strukturován podle nejslabší části cílové skupiny. Podceněním inteligence a odbornosti návštěvníků obvykle nic nezkazíme — naopak, uživatel pak může mít pozitivní pocit určité nadřazenosti — ale jejím přeceněním se toho dá zkazit opravdu hodně. Je lepší psát tak, aby textu rozuměli ti nejméně odborně erudovaní, chápaví a vnímaví z celé předpokládané cílové skupiny. Ty vzdělanější, chápavější a vnímavější to nijak zvlášť neurazí, ostatní to velmi ocení.

Stručnost pak bývá jedním z hlavních požadavků na dnešní web. Uživatelé neplýtvají časem, obsah rychle přelétnou, pokud je nezaujme první slovo, první věta, pokud vidí, že text je rozvláčný, že než by se dostali k podstatě věci, museli by se prokousat sáhodlouhým nezáživným textem, přeskočí na další odstavec, na konec, na další článek či rovnou odejdou pryč. U kus dále v této knize najdete kapitolku nazvanou Eliminace. Vše, co se tam doporučuje grafikům pro jejich práci, je vlastně i typickou činností dobrého copywritera: cokoli napíše, se následně snaží proškrtat, zjednodušit a zkrátit, vyházet vše zbytečné, odstranit vatu a balast a napsaný text zredukovat na polovinu. Pak jej nechat chvilku uležet, provětrat si hlavu a udělat to ještě jednou. Každé zbytečné slovo je na webu dvakrát zbytečné. Co lze říci dvěma větami, nemá být rozvedeno ve dvou odstavcích. Aneb jak pravil jeden moudrý kolega:

V copywritingu platí víc než kde jinde, že napsané slovo není vytvořená hodnota, ale spotřebovaný prostředek.

Multimédia

Textový obsah je od počátků na webu tím nejdůležitějším, nicméně ostatní média postupně získávají na významu. Lidé jsou méně ochotni číst, texty jen skenují: zběžně je prolétnou a pouze vyhledávají klíčové fráze. Stále častěji uživatelé získají základní informace a první dojmy spíš z obrázků, videí a jiných multimédií. Než číst textový popis produktu, stále více návštěvníků si raději pustí prezentační video; místo procházení manuálu si často vyberou screencast s ukázkou postupů a typických řešení; místo pečlivého studování tvrdých dat dají přednost přehledové infografice. Moderní web se bez kvalitních multimédií už často neobejde.

Uživatelé jsou navíc „zhýčkaní“ kvalitou, kterou potkávají na jiných webech, k tomu mají stále větší přehled a je čím dál obtížnější se je snažit obalamutit nějakými polofunkčními náhražkami. Ze stovek jiných webů už spousta našich návštěvníků bude znát „nejprofláknutější“ katalogové fotky a ilustrační obrázky a snadno za nimi odhalí neupřímnost a lacinou stylizaci. Pokud s webem míříme na trochu vyšší úroveň, je nezbytné pracovat s multimédii na mnohem profesionálnější úrovni.

Fotografie prezentovaných výrobků nebo produktů v e-shopu by měly být nafoceny kvalitním produktovým fotografem na jednotném pozadí, dobře vyretušovány a připraveny pro web. Obrázky interiérů či exteriérů klientova podniku, které nafotila sekretářka o polední přestávce nekvalitním mobilem, raději odmítněme a pokusme se klientovi vysvětlit, že právě z těchto fotek si budoucí návštěvníci udělají hlavní obrázek o jeho firmě a investovat zlomek nákladů na nový web do profesionálního fotografa se jim bohatě vyplatí. Týmové fotografie pracovníků a zaměstnanců by měly být rovněž kvalitní, pokud možno v jednotném stylu. Vyhněme se různým „veselým“ momentkám a „selfie“ fotkám (ledaže by to bylo součástí nějakého promyšlenějšího jednotného stylu prezentace firmy).

Žádná fotka bývá lepší než špatná fotka.

Kreslená grafika na webu a infografika jsou samostatnou kapitolou. Častou chybou je skládání grafických prvků na webu z několika zdrojů, používání nesourodých stylů několika grafiků, roztříštěný vizuální styl prvků, které by přitom měly působit uniformně. Opět zde platí, že čím větší a ambicióznější web, tím spíše by si měl dát na jednotném stylu a rukopisu záležet a investovat do jednoho grafika, který nejenže navrhne veškeré obrázky použité v šablonách webu, ale bude dále spolupracovat na grafice pro web průběžně vytvářené — vizualizacích, grafech, infografice. Anebo alespoň vytvoří nějaký závazný manuál a jakousi stavebnici, z níž bude moci nové grafické prvky vytvářet i kdokoli jiný při zachování stále jednotného vizuálního stylu.

Je samozřejmostí, že na všechny publikované fotky, ilustrace či ikony (stejně jako na veškerý obsah webu) musí mít klient potřebnou licenci k užití autorských práv. Platí přitom, že za legálnost obsahu, který klientovi dodáme v rámci návrhu webu, ručíme my — za obsah, který si na web později přidá klient sám, pak už on. Nicméně je vhodné (při předávání zakázky, při prezentaci publikačního systému, při vysvětlování budoucího fungování webu apod.) klienta poučit o pravidlech publikování, licencích a základních pravidlech autorského práva. Musíme zde vycházet z předpokladu, že náš klient těmto věcem nemusí rozumět a u některých poměrně běžně používaných, leč ve skutečnosti nelegálních postupů třeba nemá o možném překračování zákonů ani potuchy. Pokud jsou na webu použity fotky třetích stran (ať již třeba produktové fotografie od dodavatelů v případě e-shopu, nebo třeba reportážní snímky na zpravodajském webu), je nezbytné si ohlídat, aby všechny jednak byly publikovány pod vhodnou licencí, která jejich šíření prostřednictvím klientova webu dovoluje, a aby byl v případě potřeby korektně uveden jejich zdroj a autor, jednak aby neobsahovaly údaje, které jsou na webu nežádoucí. Ať už se jedná o nevhodné texty vklíčované do fotografií, jména, či dokonce loga konkurenčních firem, nebo nedejbože vodoznaky třetích stran chránící fotografie před nežádoucím šířením. Použít fotky s vodoznakem fotobanky jsou jedním z největších faux pas, kterých se autor webu může dopustit.

Legálně získaný obrázek nemá mít cizí vodoznak. Ten je jasným příznakem nelegálního obrázku.

Zatímco vložit obrázek do stránky je triviální úkon a jakoukoli fotku přinejhorším zvládne vyrobit kdokoli na počkání i nejlevnějším mobilem, u ostatních multimédií je situace výrazně komplikovanější. Vytvořit ilustrační video může být díky pokročilým technologiím a bohatým databankám s ilustračními videosekvencemi relativně jednoduché, stejně jako vytvořit nějaký screencast (tj. záznam obrazovky počítače během používání cílové aplikace). A to včetně hudebního podkresu, neboť archivů hudebních smyček a hudebních doprovodů je k dispozici také nepřeberné množství. Ovšem místem, kde se amatérské pokusy od těch profesionálních velmi zásadně liší, bývá hlasový komentář. Na jeho kvalitu jsou uživatelé obzvlášť citliví a komentář namluvený slyšitelně amatérským mluvčím, případně dokonce v amatérských nestudiových podmínkách dokáže zničit a shodit i to sebelepší video. Na zvukové stopě ilustračních a prezentačních videí je nutné si dát záležet snad nejvíc a investice do profesionálního herce či moderátora, kteří komentář do finální verze videa namluví, se rozhodně vyplatí.

Jedinou výjimkou, kdy je hlasově neprofesionální hlasová stopa ospravedlnitelná, jsou zmíněné screencasty a podobná ukázková videa. U nich je upřímně přiznaný fakt, že k uživateli promlouvá přímo vývojář či jiný expert zběhlý v používání dotyčné aplikace, pochopitelný a v některých případech může být i vhodnější a pro uživatele věrohodnější než komentář nějakého najatého herce. Ale i v tomto případě je nezbytné dohlédnout na alespoň elementární hlasovou a zvukovou kvalitu. Nepůsobí nikterak dobře, pokud dotyčný mluvčí hovoří nesrozumitelně, zadrhává, má nepřirozenou intonaci, silný a nesrozumitelný cizí přízvuk, pokud je nahrávka nekvalitní, šumí, syčí, na pozadí jsou slyšet nežádoucí zvuky atd.

I když je klient přesvědčen, že jejich Evička mluví celkem pěkně, na komentář k videu by měli raději najmout profesionálního herce či spíkra.

U každého videa, audia a multimediální prezentace vůbec je přitom nesmírně důležité zabezpečit, aby fungovaly na většině zařízení, která budoucí návštěvníci použijí. To znamená především zajistit přístupnost z mobilních zařízení, která obvykle nemají k dispozici všechny technologie, které může někdo považovat za stále ještě běžné na stolních počítačích (např. Flash). Weby, které poskytují multimediální prezentace funkční pouze na stolních počítačích, které budou pro stále rostoucí skupinu mobilních uživatelů zcela nedostupné, si nesmírně ubližují a poškozují svou reputaci i obchodní výkon svého webu.

Všechna výše uvedená pravidla platí i u všech ostatních multimédií, která můžeme na webu potkat — audio nahrávky a streamy, animace, 3D vizualizace, interaktivní hry atd. Čím náročnější, tím profesionálněji zpracovaná by taková prezentace měla být. Uživatelé jsou na každá amatérská škobrtnutí a zaváhání nesmírně citliví a velmi rychle je odhalí. A pohříchu si je interpretují poměrně jednoznačně: neprofesionalita, šetření na nesprávném místě, neochota investovat do profesionálního výsledku. Tedy budí vesměs takové emoce, o které klient příliš nestojí. Velmi často se pak ve výsledku ukazuje absence příslušných multimédií jako vhodnější řešení. Jinými slovy: než prezentovat multimédia špatná a na první dojem neprofesionální, může být mnohem lepší nemít tam raději žádná.

Marketing, SEO, analytika

Online marketing, optimalizace pro vyhledávače (SEO), správa klíčových slov, webová analytika — samé vysoce odborné činnosti, dnes již považované za zcela vyhrazené znalcům a specializovaným expertům. Úkony, do kterých by se úplný laik snad ani neměl pouštět, aby webu nenadělal víc škody než užitku… Takové rady uslyší méně zkušený webdesignér často ze všech stran. Sice pohříchu právě od oněch odborníků, kteří rozhodně nechtějí přijít o svou dobře placenou práci — leč mají velký díl pravdy. Online marketing, SEO a ostatní příbuzné obory jsou už nesmírně složitým komplexem a ani poučený laik nemá šanci perfektně zvládnout všechny jejich netušené možnosti, úskalí a nuance.

Nicméně je to jen půlka pravdy. Protože existují hranice, kdy všechny tyto složité technologie a jejich aplikace ještě dokáží být poměrně jednoduché a srozumitelné a právě mírně poučený laik jejich základní úroveň použití dokáže hravě zvládnout. Zcela klíčové je zde ale pouštět se do toho pouze s plným vědomím vlastní neodbornosti a omezit se skutečně jen na onu základní úroveň. Pokud jako nezkušení poloamatéři získáme klamný pocit, že když jsme pochopili základy, tak ani pokročilejší postupy nemůžou být zase takový problém, a začneme podle kdesi vyčtených a ničím nepodložených rad provádět nějakou „černou magii“ s klíčovými slovy, živelně budovat farmy umělých křížových odkazů a divoce nakupovat reklamní kampaně, můžeme webu spáchat vážné, někdy jen těžko a dlouze odstranitelné škody. Nemluvě o tom, že ve svých experimentech dokážeme utopit neuvěřitelné objemy klientových peněz. Je třeba být k sobě upřímní, a pokud si skutečně nejsme zcela jistí tím, co děláme, nemáme jasný marketingový plán a připravené přesné metriky a způsoby vyhodnocování výsledků, opravdu se do ničeho nepouštějme, jakékoli větší marketingové operace ponechejme na odbornících a zůstaňme jen u těch naprostých základů, které zvládnout můžeme.

Co je tedy tou základní úrovní? Jedná se hlavně o tři klíčové oblasti, do kterých se může pustit každý aspoň trochu zodpovědný tvůrce webu (či dokonce sám klient). My sami během přípravy a realizace projektu zjistíme hodně o klientově byznysu a konkurenčním prostředí a dokážeme tyto kroky obvykle velmi dobře zajistit sami.

Přirozené SEO. Podle mého hlubokého přesvědčení je poctivě vytvořený, kvalitně zpracovaný a upřímně napsaný web nakonec tím vůbec nejlepším a nejdůležitějším základem dobrých výsledků ve vyhledávačích. Pěkně zpracovaný, dobře napsaný obsah s přirozeně užitými klíčovými slovy, vhodně rozvržený a správně strukturovaný, který se dobře čte a používá uživatelům, mají ve stejné oblibě také roboty vyhledávačů. Samozřejmě, na silně obsazeném tržním segmentu, v záplavě tvrdé konkurence, si pouze s takovou přirozenou optimalizací nemusíme vystačit a bude pak namístě použít služeb nějakého skutečného „SEO mága“ — jaký se v zástupech šarlatánů pohybujících se na tomto trhu ale docela těžko hledá a rozpoznává — který ovšem dokáže s výkonností webu někdy udělat skutečné divy. Ale u mnoha „běžných“ webů, nebalancujících na ostrých hranách konkurenčního segmentu, u webů, kde není fatálně důležitá každá drobná změna pozic ve vyhledávačích, se bez nějaké „tvrdé“ profesionální optimalizace obvykle obejdeme a vystačíme si s tou přirozenou. Pokud je ovšem udělaná opravdu přirozeně, poctivě a bez nějakých klamných kalkulů a snah o umělé vylepšení. Algoritmy vyhledávačů jsou stále inteligentnější a všechny neupřímnosti a snahy je nějak převézt a oblafnout stále úspěšněji odhalují i penalizují. Ve výsledku pak každá chybná snaha o nepřirozené vylepšení „přirozenosti“ obsahu může webu nakonec uškodit. Nejlepší je na nějaké vyhledávače úplně zapomenout, udělat web zkrátka dobře použitelný a přístupný pro uživatele a úspěšnost ve vyhledávačích se často dostaví sama jako vedlejší efekt.

Jednoduché reklamní kampaně. U spousty webů chceme umístit reklamy jako pouhý doplněk, jenom jako vedlejší zdroj příjmů, s jehož výkonností nestojí a nepadá existence celého webu. A je pak docela snadné vybrat si nějakou reklamní síť a vložit do připravených pozic ve stránkách jednoduchý reklamní kód, který se automaticky postará o vše — od zobrazení reklam (v ideálním případě co nejpřesněji cílených na konkrétního návštěvníka) až po jejich vyhodnocení a poskytnutí základních analytických přehledů. Opět zde platí, že s rostoucí důležitostí účinnosti reklam (a dalších marketingových prostředků) si s tímto jednoduchým postupem nevystačíme a zase bude nezbytné povolat nějaké marketingové specialisty, kteří celou reklamní strategii, cílení i nákup inzerce mohou významně vylepšit a posunout výkon webu na zcela jinou úroveň.

Základní analytika. Stejně jako u reklamních sítí jsou i všemožné analytické služby připraveny k okamžitému použití pouhým vložením připraveného krátkého kódu do stránek. Založit účet, nechat si vygenerovat měřicí kód a zkopírovat ho do šablon stránek je skutečně snadné. A u spousty webů, u nichž není podrobná analýza chování návštěvníků klíčová, je to také dostatečné. Navíc v tomto případě máme i jednu velkou výhodu: snadno, rychle a sami můžeme sledování provozu webu zapnout a dál se o nic nestarat. Data se budou průběžně ukládat a automaticky zpracovávat, ať už někdo bude mít zájem si je prohlížet, nebo ne. Ovšem až dojde na skutečnou potřebu analýzy výkonu webu a chování jeho návštěvníků, až bude nutné povolat experty, kteří z těchto dat dokáží vyčíst neuvěřitelné údaje a souvislosti, budou mít rovnou k dispozici naměřená data za celou historii od spuštění webu. A ta jsou k nezaplacení. Instalovat analytiku dodatečně a začínat měřit až ve chvíli, kdy se objeví nějaký problém, je už strašně pozdě. Vždy si dejme záležet, abychom do každého webu a do každé jeho stránky nainstalovali funkční měřicí kódy a nechali je tam potichu pracovat a shromažďovat data, i když třeba víme, že v nejbližších několika letech je zaručeně nikdo nebude chtít vidět a nebude je k ničemu potřebovat. Ale dřív nebo později k tomu dojde, a čím delší historie uložených dat je potom k dispozici, tím více z nich analytici dokáží vydedukovat a tím lépe je využít.

A tím to asi končí. Jakékoli další marketingové nástroje mě napadají, vždy za nimi vidím už jen spoustu rizik a nebezpečí, na která bych si sám (coby pouhý poučený laik) netroufal. Nabídky na výměnu odkazů, zdánlivě úžasně výkonné neznámé reklamní sítě, individuální prodej reklamních pozic, nabídky služeb neznámých „SEO expertů“ atd. Všechny tyto služby kvalitně a zodpovědně provedené mohou být pro web velkým přínosem — ale také významnou hrozbou i s trvalými následky v případě opačném. Přepečlivě zde musíme zvažovat a prověřovat, komu svěřit do rukou možné zisky, ztráty i pověst celého webu.

Uzavření projektu

Nyní je web zřejmě opravdu dokončený. Záleží už jen na charakteru zakázky a na dohodě s klientem, zda naše spolupráce definitivně skončí oficiálním „předáním klíčů“, spuštěním webu na ostrém serveru a finálním vyúčtováním — anebo zda jsme se dohodli ještě na nějakých dalších postprodukčních pracích: správě a údržbě, technické podpoře, aktualizacích, testování, optimalizaci atd. Je ovšem nezbytné se na těchto věcech zcela jasně dohodnout a nenechat nikoho cokoli „automaticky předpokládat“.

Všechny následné práce po předání zakázky mějme jasně specifikované a smluvně podložené.

A to i negativně. V případě, že klient nemá o nějaké následné služby zájem, vždy se snažím i takové negativní vymezení výslovně zakotvit do smlouvy či dohody o zakázce — např. Součástí dodávky nejsou žádné další služby, jmenovitě správa, údržba, aktualizace softwaru, technická podpora apod. Oboru plně neznalí klienti (jakých jsem měl vždy většinu) mnohé ze zmíněných služeb mohou pokládat za „samozřejmou“ součást dodávky, i když se může jednat o služby velmi nad rámec obvyklých zvyklostí a pro nás ve výsledku nákladné vícepráce. Je pochopitelné, že do určité míry nějaká následná technická podpora, řekněme „záruční“ opravy a úpravy nalezených chyb a problémů, jsou samozřejmou součástí dodávky. Ale pouze do určité míry — ať už vymezené zákony, nebo obecnými zvyklostmi a dobrými mravy. Ovšem cokoli nad jejich rámec pak může být také nad rámec našich možností. Znám dost kolegů a firem, kterým takové nedostatečně smluvně ošetřené zakázky dříve nebo později přerostly přes hlavu a z neustálých technických zásahů a bezplatné zákaznické podpory byli přinejmenším nešťastní, přetížení a v některých případech to vedlo až k vážným finančním problémům celé firmy, protože významná část lidských zdrojů a času se musela věnovat právě takovým nadstandardním službám poskytovaným v podstatě zdarma.

Zavedené a zkušenější firmy tento problém dávno prokoukly, a dokonce na něm staví svoje podnikání: vlastní realizační služby nabízejí velmi levně, za provozní náklady, pod cenou nebo rovnou zdarma a velmi dobře profitují právě z oněch postprodukčních služeb — z technické podpory, poskytování hotline 24/7 (tedy okamžité odborné podpory poskytované nonstop), prodeje v podstatě nezbytných aktualizací, paušálních poplatků za provoz, správu, údržbu, zálohování atd. A pro poměrně významnou část klientů je takový model i zajímavý, protože správa a údržba ve vlastní režii pro ně může být příliš drahá, je pro ně důležité zabezpečení a okamžitý servis, záruky atd., navíc se poplatky za ně obvykle výhodněji rozprostřou do delšího období a jiných účetních kategorií a není nutné vynakládat jednorázovou vyšší investici. Je ovšem na každém, jaký obchodní model zvolí a jak se s klientem dohodne. Nicméně je nezbytné se vždy nějak dohodnout a mít zřetelně a jmenovitě určeno, zda a jaké následné služby po předání realizované zakázky se mají dále zajistit a za jakou cenu. Pochopitelně na tento faktor musíme myslet už na počátku při sestavování nabídky a dát klientovi jasně na srozuměnou, že určité věci se nestanou samy od sebe, nejsou zdarma a pokud o ně bude stát, bude za ně muset také zaplatit.

Zde si dovolím jednu osobní radu. Není dobré si tady hrát na schovávanou, náš klient má mít od samého začátku důkladný přehled, co taková komplexní zakázka obnáší, vědět, na čem je, co ho který detail bude stát. Ovšemže, vhodně tato fakta zaobalit a dobře odprezentovat je záležitostí našeho vlastního marketingu, případně úkolem obchodního oddělení naší firmy. Ale náš klient tyto informace pro správné rozhodování mít musí. Předložit mu až na konci, zcela neočekávaně, že web ho má kvůli následným službám stát třeba dvojnásobek, je hodně nefér a může hodně poškodit vzájemné vztahy i naši image. Pokud takový postup vyloženě neplánujeme, nepohybujeme se v branži na hraně jako „black hat“ firma a chceme být dodavatelem slušným, korektním a s dobrou pověstí, o nic takového nestojíme. Upřímnost se tady kupodivu cení, a vyplácí se dokonce oboustranně. Což je i podstata mé zmíněné rady: jednejme v těchto otázkách s klientem na rovinu a jeho reakce nám pak budou dobrým vodítkem pro další postup a jednání s ním. Rozumná firma totiž velmi dobře ví, že nic na světě (a v byznysu obzvlášť) není zadarmo, a nic takového ani od nás nebude očekávat. Jsou-li na štíru s rozpočtem, mohou zvažovat, zda nějaké služby seškrtají či omezí (a je pak na nás, zda se jim coby dobrému zákazníku něco uvolíme poskytnout levněji či výhodněji).

Ovšem pak jsou tu firmy řekněme problematické a ty se zde ihned „odkopají“ a beze studu přiznají svou pravou barvu: nebude se jim chtít platit skicovné za úvodní studii, očekávají doživotní servis zdarma, budou překvapeni z jakéhokoli poplatku za pravidelnou údržbu, diví se, že za ilustrační fotky se musí platit autorům nebo fotobankám, chtějí mít spoustu muziky za málo peněz. U mě se v takové chvíli okamžitě rozsvítí v hlavě varovná kontrolka „problémový klient“ (a bohužel dosud ani jednou neselhala). Neboť tento přístup avizuje pokaždé jenom sérii nepřetržitých potíží a komplikací pramenící z faktu, že dotyčný klient by nejraději dostal nejkomfortnější servis za nejdiskontnější cenu. Nakonec si už jen přeju, aby se taková zakázka nikdy nestala, a její dokončení bývá vysvobozením z malého pekla.

Sejde-li ze zakázky s „problémovým klientem“ hned na samém začátku, je to nakonec úleva a ušetřená hromada pozdějších problémů.

Ovšem přepokládáme, že od začátku spolupracujeme s klientem soudným a slušným, a dohodli jsme se s ním konkrétně na všech krocích a službách, které jsou předmětem zakázky. V každém případě sem patří předání kompletně zpracovaného webu včetně všech nástrojů pro jeho provoz, správu i redakci. Je-li součástí dodávky nějaký publikační systém, musíme být ujištěni, že ho klient bude schopen dále provozovat a spravovat vlastními silami, případně zajistíme proškolení příslušných pracovníků v jeho používání. Jsme si také sami jisti, že web je zcela v pořádku a funkční jak z našeho pohledu (díky důkladnému otestování funkčnosti), tak také z pohledu klienta (naše i klientovo vlastní akceptační testování a podepsané příslušné protokoly). Máme jasnou představu, jaké následné úkony a služby máme s klientem dohodnuty a jaký je jejich harmonogram. Je-li součástí postprodukčních služeb nějaké uživatelské testování nebo měření výkonu, máme naplánované potřebné kroky k jejich provedení. Jsou-li součástí dohody pravidelné aktualizace, správa, údržba, technická podpora atd., máme pro ně zajištěné všechny potřebné zdroje a jsme připraveni je provozovat ihned od okamžiku spuštění webu do ostrého provozu.

S takovou můžeme přistoupit k uzavření zakázky a podpisu předávacího protokolu. V něm je podrobně uvedeno, co vše jsme pro klienta vytvořili, co dostává a v jakém stavu, případné zápisy o provedených testech, potvrzení o shodách s požadovanými normami a jiné certifikáty — prostě vše, co jsme v rámci zakázky vytvořili. Jeho obsah by se měl v základních bodech držet obsahu podrobného zadání projektu, jehož kopii také lze pro tento účel přímo použít: klient pak jednoduše stvrdí, že všechny položky zadání byly zrealizovány, shledány funkčními a bez závad a předány. Podpisem předávacího protokolu a skutečným předáním všeho, co má klient dostat, pro nás zakázka končí. Zbývá jen finální vyúčtování, odeslání faktury a přesun k další zakázce.

Rekapitulace

V předchozích kapitolách této sekce knihy jsme postupně prošli všechny dílčí fáze přípravy, návrhu, tvorby a dokončení webu. Každý projekt je však jiný a snad na žádném se nepotkáme současně s úplně všemi kroky a postupy, které jsme zde zmínili. Ale na některé přitom můžeme snadno zapomenout — hlavně během přípravných fází projektu — a procházet vždy nějakou příručku (jako je třeba tato kniha) nebude úplně praktické. Je proto užitečné zjednodušit si všechny tyto postupy do stručných bodů a z nich si sestavit vlastní kontrolní seznam. S ním pak mnohem snadněji ověříme jednak to, jestli jsme něco podstatného nezapomněli zahrnout do návrhu a svých plánů, jednak podle něj můžeme následně i kontrolovat postup realizace a udržovat si lepší představu, jak daleko se v projektu právě nacházíme a co vše nás ještě čeká.

Je prakticky nemožné vytvořit nějaký univerzální a úplný seznam pro všechny. Pokaždé můžeme něco vynechat, protože to pro daný projekt není relevantní, a vždy pochybí něco specifického, co je zrovna na konkrétním projektu nutné vyřešit a nikdo s takovou věcí ve svých obecných zásadách vůbec nepočítal. Často si designér do svých postupů a plánů bude chtít doplnit nějaké vlastní osvědčené kroky. Jednotlivé projekty se budou lišit tím, jaké mají všechny zúčastněné strany priority, osvědčené pořadí a návaznost kroků realizace. Zkrátka každý projekt je jiný a všeobecně platný univerzální kontrolní seznam neexistuje a nikdy existovat nemůže. Já se zde o něj ani nebudu pokoušet. Mohl bych zde možná nabídnout několik příkladů takových seznamů, ale podle mých zkušeností jsou parametry každého nového webového projektu natolik unikátní a jiné, že jakýkoli konkrétní seznam pro jeden konkrétní web bude na jiné zakázce spíš matoucí a zavádějící. Nezbývá než si s každým novým projektem vždy znovu projít všechny standardní kroky, vybrat ty, které jsou pro daný web relevantní, a vytvořit si pokaždé nový vlastní kontrolní seznam, upravený danému webu na míru.

Jediné, co mohu nabídnout, je jen stručný přehled základních fází tvorby webu a seznam nejdůležitějších bodů (s nimiž jsme se seznámili v předchozích kapitolách), který snad může pomoci takový kontrolní seznam konkrétního webu snáze sestavit.

Stručná rekapitulace postupu tvorby a realizace webu

Předpokládejme, že jsme obdrželi poptávku od klienta, sjednali zakázku, případně dostali zadání v rámci vlastní firmy a máme před sebou jakési předběžné zadání projektu — ať už stručné a vágní, zmatečné a nepřesné, nebo precizní a podrobné — a je naším úkol jej přetavit ve skutečně existující a plně funkční web.

Úvodní fáze

Předtím než začneme cokoli vymýšlet, navrhovat a vyrábět, musíme shromáždit maximum relevantních informací a co nejpřesněji sepsat zadání projektu. Postupujeme od obecných požadavků a představ klienta ke skutečnému a smysluplnému zadání funkčního webu, a to metodou postupného zpřesňování. Poptávka → předběžné zadání. Úvodní rozhovor → laické představy klienta. Dotazník → podrobnější podklady. Vlastní výzkum a analýzy → detailní zadání. Zkouška a ověření → korektní zadání. Schválení klientem → platné a závazné zadání. Co všechno nakonec potřebujeme znát:

typ webu: komerční/nekomerční, ziskový/neziskový, prezentace firmy, produktový web, e-shop, služba, aplikace, nástroj, informační či zábavní médium atd.; jedná se o zcela nový web, redesign stávajícího, či pouhý facelift, změna revoluční či evoluční, tj. radikální proměna, postupný přerod, nebo spíše nenápadné úpravy?

záměry klienta, primární a sekundární cíle webu, trh a konkurence, konkurenční výhody a tržní niky, obchodní model a monetizace, marketingové strategie, získávání a recyklace návštěvnosti; reklamní formáty, metriky a způsob měření a vyhodnocování výsledků, způsob měření výkonnosti a chování návštěvníků

zájmy a potřeby uživatelů, cílové skupiny a vzorové postavy uživatelů (persony), ideální scénáře použití webu, typické uživatelské a technické scénáře

základní informace o webu: název, slogan, doména, popis, logo, komunikační styl, grafický manuál a korporátní identita; preferované i zakázané prvky komunikace, barvy, styly, formy; celkový styl prezentace; technické informace: existence domény a účtů na sociálních sítích, existující hosting a serverové vybavení; rozpočet, termíny, odpovědné osoby a pravidla komunikace mezi klientem a dodavatelem

zvláštní požadavky na technické zpracování, integrovaná či oddělená podpora výstupních zařízení (např. responzivní web či samostatná mobilní verze), jazykové verze; normy, zákony a jiné limity a speciální požadavky na obsah a funkčnost webu

způsob a postup publikování obsahu, frekvence aktualizací, dodavatelé textového i multimediálního obsahu, personální zajištění

technická správa a podpora, požadavky na údržbu, servis, zálohování dat atd.

Návrhová fáze

Dílčí návrhy diskutujeme a necháváme si průběžně schvalovat od klienta i od realizačního týmu.

celkový a komunikační styl, vztah webu a uživatele, etika a etiketa

název a použitá doména, slogan, logo, komunikační a vizuální identita webu; marketingové strategie, požadavky pro SEO, použití sociálních sítí

struktura a mapa webu, sekce, podweby, meta- a landing stránky; informační schémata, struktura dat, navigační logika

návrh softwarových (a podle nich pak i hardwarových) technologií, použité jazyky, frameworky, knihovny, databáze a další technologie; návrh použití hotových řešení a specifikace proprietárních řešení, která je třeba vytvořit; specifikace vlastního API i použití cizích API a jiných komunikačních rozhraní; definování a zajištění zdrojů

skicy a předběžné návrhy stránek, drátěné modely (wireframy), prototypy a testování nápadů a navržených řešení

Implementační fáze

Jednotlivé kroky se časově nezávisle prolínají a ty, které je lze zahájit dříve, se rozbíhají třeba už během návrhové fáze.

technologická implementace, zajištění serverů, instalace požadovaného softwaru, tvorba databází; programování serverových programů a tvorba vlastního API

grafický design, návrhy vizuálního designu, stylových a barevných variant, jejich prezentace, vyjednávání a výběr finálních verzí; tvorba grafických podkladů pro kodéry

kódování, tvorba šablon webových stránek, programování skriptů a aplikací běžících v prohlížeči

průběžné testování — vývojářské testy a testování funkčnosti, integrační a systémové testování

Dokončovací fáze

Neboli co vše je třeba ještě udělat, když se zdá, že máme hotovo.

naplnění webu reálným obsahem, copywriting, zajištění fotografií a případných multimédií; zprovoznění publikačních nástrojů a vytváření skutečného obsahu stránek, příp. import obsahu z jiných zdrojů

akceptační testování, betatesty a pilotní ověřování, podle potřeby testování použitelnosti a přístupnosti

marketing, optimalizace obsahu, klíčová slova, metainformace ve stránkách, registrace do vyhledávačů, nastavení a start kampaní; implementace kódů pro zobrazení reklam; nastavení analytických nástrojů a implementace měřicích kódů

finální testy, prověření a předání webu klientovi, podpis předávacího protokolu, vyúčtování a uzavření projektu

Postprodukční fáze

Ne pokaždé předáním hotové zakázky všechno končí. Následně nás ještě může čekat:

zajištění zdrojů a zabezpečení sjednaného provozování hardwaru a služeb, údržby a technické podpory

plánování a zajištění sjednaných pravidelných úprav a aktualizací

periodické oslovování klienta a nabízení dalších služeb, aktualizací atd.

Je důležité nepodceňovat žádnou z těchto fází ani žádný z bodů (samozřejmě má-li pro daný web právě smysl) a jim odpovídající kroky realizace. Myslet na ně aspoň okrajově už od počátku návrhu, mít je někde poznamenané a skutečně si z nich sestavit vlastní kontrolní seznam aktuálního projektu, proti němuž budeme následně ověřovat jak postup návrhu a implementace, tak i kontrolovat všechny nové nápady, změny a úpravy projektu. Naprostá většina problémů, zdržení, víceprací a jiných komplikací na projektech, na kterých jsem kdy spolupracoval, pocházela právě z takových opomenutí a nedostatečného prověření nově vnášených změn. Někdy už v přípravných fázích (při tvorbě rozpočtu a odhadu časové náročnosti a objemu potřebných prostředků), ale mnohem častěji někdy později během realizace — kdy se v zadání či navržených postupech něco v dobré víře změnilo a všichni přitom přehlédli nějakou méně nápadnou součást či aspekt projektu, které tato změna poměrně zásadně ovlivnila. A pak původně nevinná a minoritní změna přerostla v komplikovaný a komplexní úkol. Pohříchu pak není výjimkou, kdy rychlé ad hoc řešení takového složitého zavlečeného úkolu způsobí další a další následné komplikace a taková řetězová reakce pak dokáže významně zbrzdit, nebo dokonce zničit celý projekt. Kontrolní seznamy a neustálé pečlivé ověřování každé (i nepatrné a zcela nevinně vyhlížející změny) proti každé jejich položce takovým zavlečeným chybám dokáží poměrně účinně bránit.

Metod a různých postupů tvorby webů — a potažmo jakýchkoli interaktivních počítačových aplikací — je spousta. Každý renomovaný webový designér, každé úspěšné studio si během své praxe vytvořilo nějaké své osvědčené a zaběhnuté postupy, které zde prezentovaná schémata mohou dodržovat a potvrzovat, ale také se od nich mohou více či méně lišit. A je to v pořádku. Pokud nějaká metoda dobře funguje, je správná a není důvod ji měnit. Ovšem cesty k jejímu nalezení bývají kostrbaté a mnohdy bolestné. A mnoho jich pak také končí fatálním nezdarem.

Cílem této knihy je pomoci těm, kdo vlastní cestu teprve hledají, vyhnout se častým nástrahám, přeskočit mnohé slepé cesty a usnadnit nacházení vlastních funkčních postupů. Upřímně věřím, že nápady, doporučení a postupy uvedené v předchozích kapitolách mohou významně pomoci všem, kdo v oboru navrhování a realizace webových projektů začínají nebo ještě trochu rozpačitě tápou, nastavit správné hranice a označit mnohá kritická místa, jimž je radno se vyhnout, a mnohem lépe a efektivněji dosáhnout nastavení vlastních funkčních a úspěšných pracovních postupů vedoucích k vytvoření skvělých a úspěšných webů pro spokojené a prosperující klienty.

Vizuální design

Designér a jeho okolí

V této, závěrečné části knihy se budeme věnovat některým specifikům i konkrétním praktickým detailům vizuální složky designérské práce, tedy oblasti grafického a interakčního designu. Dovolím si zde trochu více smíchat role designéra v onom širším pojetí (jak jsme jeho práci představili v předchozí části knihy) i čistě vizuálního designéra, grafika. Mnohé z níže řečeného platí pro designéry obecně, něco se vztahuje víc na „ryzí“ grafiky, kteří tvoří pouze vizuální složku díla a o to ostatní se moc nestarají. Ovšem ty informace platí obecně a ponechám na laskavé úvaze čtenáře rozhodnout, zda je má ve svém konkrétním případě vztahovat na práci designéra, grafika, najatého výtvarníka, animátora či webdesignéra-sólistu. To teď není až tak důležité. Nás teď bude zajímat především otázka, zda je povolání takového designéra, grafika něčím zvláštní, výjimečné a zda se liší nějak podstatně od ostatních profesí. A předešlu rovnou, že v některých ohledech se skutečně liší velmi zásadně.

Webový designér, grafik, návrhář rozhraní interakčních aplikací — a jakýkoli jiný průmyslový designér obecně — bývá často součástí většího realizačního týmu. A pro takový pracovní kolektiv je zcela klíčová týmová práce, jak jistě potvrdí každý manažer a majitel firmy. Pro plynulý chod firmy je nezbytná hladká spolupráce jak mezi kolegy v rámci jednotlivých dílčích týmů, tak i mezi jednotlivými složkami, které se projektů účastní. Řešení vznikají kolektivní prací, od skupinového tvoření formou brainstormingů po všemožné agilní a jiné systémy projektového řízení využívající dělení úkolů na malé a ještě menší mikroúkoly přidělované libovolným, právě dostupným členům týmu. Každý pracovník má své místo, ale současně by měl být snadno zastupitelný, aby jeho (byť dočasná) nedostupnost nebo nepřítomnost nenarušila harmonogram prací a celkový chod firmy.

Práce grafického designéra (a designéra obecně) všechna tato pravidla svým způsobem popírá a často vyžaduje pravý opak. U rutinní práce, instantních, bezduchých a zaměnitelných produktů se porušení těchto specifik celkem snadno ztratí, ale o to více je pak vidět v okamžiku, kdy má výstupem být dílo osobité, výrazné a něčím jedinečné. Nesmíme totiž zapomínat na základní premisu, podstatný fakt, na který manažeři a vedoucí projektů zapomínají celkem často a rádi: návrhář, designér není profese jen technická, ale také umělecká. Někdy víc, někdy míň, ale vždy podstatným dílem.

Webový, interakční a obecně každý průmyslový design je především umělecké řemeslo.

Není to tedy jen profese, kterou se lze jednoduše naučit, ale kombinace řemesla a umění, k němuž je třeba i určitých talentů. Bez nich se činnost takového „designéra“ redukuje na úroveň prostého kresliče a kombinátora již mnohokrát použitých nápadů jiných, skutečných návrhářů. Kdo o takového nenápaditého kopistu příliš nestojí a chce mít v týmu skutečného kreativního návrháře, musí se smířit s tím, že tím pádem bude muset pracovat s umělcem, možná trochu bohémem, se všemi pozitivními i negativními důsledky, které z toho plynou.

Je pochopitelně nezbytné si do týmu vybrat takového designéra, jehož styl a výrazové prostředky nám budou vyhovovat a zapadnou do naší koncepce. Neočekávejme, že styl svého grafika nějak podstatně na požádání změníme — nemůžete si najmout van Gogha a chtít po něm, aby maloval obrazy jako Rubens, a naopak. Kvalitní profesionální grafik má ovšem poměrně velké stylové rozpětí a dokáže vytvořit návrhy v širokém žánrovém rozsahu. Ale nikdy nepokryje celou oblast možností a všechny myslitelné styly, protiúkoly mající jít zcela proti vkusu a stylu vašeho grafika sice mohou být zajímavou profesní výzvou, ale nejspíš nepřinesou dobré výsledky. Máme-li designéra s vyhraněným rukopisem a vlastním stylem, važme si toho a maximálně jej využívejme k tvorbě unikátních a osobitých návrhů — a je-li nezbytné vytvořit něco, co jeho stylu a možnostem odporuje, raději si najměme účelově návrháře jiného.

Platí jednoduchá úměra: čím kvalitnější a osobitější grafik, tím méně je univerzální. A naopak.

Zájemce si musí vždy vybrat: chce designéra univerzálního, schopného vytvořit dílo v jakémkoli stylu a žánru? Může ho najít. Bude od něj však povětšinou dostávat návrhy sterilní, průměrné, možná vkusné, ale vlastně pořád stejné. Anebo chce osobitého, výrazného a kreativního? Také takového může najít. Od něj bude dostávat návrhy neotřelé, unikátní, stylově výrazné. Případně i odvážné a převratné. Obojí má významná pro a proti, ale je nezbytné si vybrat — obojí současně v jedné osobě lze mít jen těžko.

Týmová práce

Z důležitosti jasného autorského rukopisu a jednotného stylu pak plynou i mnohé další důsledky. A to hlavně s ohledem na výše popsané aspekty týmové práce. Neboť jednotný rukopis, výrazný autorský styl a obvyklá týmová práce se v mnoha ohledech vylučují. Velmi zjednodušeně řečeno:

Dva malíři společně na jednom plátně dobrý obraz nenamalují.

Právě z tohoto důvodu jsem zmiňoval ony umělecké aspekty designérského řemesla. Každý člověk má jiný vkus, jiné cítění a jiné vnímání. U grafiků, jejichž hlavním oborem je právě osobitá forma vizuálního sdělování informací, to platí tím více. Na většině projektů můžeme s klidem a zcela samozřejmě použít tým navzájem zaměnitelných obchodníků, právníků, programátorů, kodérů, testerů… Dvě smlouvy napsané různým stylem a jazykem nikdo ani nepostřehne. Dvě rutiny naprogramované velmi odlišně dvěma výrazně odlišnými programátory budou pro všechny nerozeznatelné, pokud budou plnit předepsanou funkci a na požadovaný vstup vracet požadované výsledky. Elegantnější algoritmus či použití zcela odlišné vnitřní logiky možná pozná jiný programátor při studiu kódu, ale výsledné aplikaci budou takové detaily skryté.

Ne tak vizuální design, který naopak do posledního pixelu určuje úplně vše, co je na výsledném produktu vidět. Pokud každou část stránky nakreslí jiný grafik, pokud polovinu ikon navhrne jeden designér a druhou polovinu druhý, bude to vždy vidět. Někdy to bude do očí bijící, někdy možná spíš nenápadné a laik možná tu stylovou disonanci přímo nedokáže pojmenovat, ale z výsledku stejně bude cítit určitý nesoulad, nějak to nebude ono. Pohříchu se tyto stylové rozpory s přibývajícím množstvím a postupnými úpravami a dílčími změnami násobí a podporují — a snadno se stane, že až do určité fáze projektu si nikdo ničeho ani nevšimne, a najednou prásk, a z ničeho nic všichni koukají na podivně splatlaný web, kde nic nesouvisí s ničím, nic nemá hlavu ani patu a bylo by snad nejlepší to celé zahodit a překreslit úplně znova…

Pro dodržení jednotného vizuálního stylu je proto naprosto zásadní vybrat si jednu ze dvou možností:

vše v rámci jednoho projektu bude navrhovat jediný grafický designér

více designérů bude podléhat jedinému šéfgrafikovi, který za jednotný styl bude odpovídat a práci jednotlivých návrhářů filtrovat, korigovat a posouvat požadovaným směrem

V praxi jsem se ještě nesetkal s tím, že by fungovala nějaká třetí cesta. Je známým faktem, že jacíkoli dva grafici se neshodnou ani na podobě a umístění jednoho tlačítka, natož aby byli schopni hladce spolupracovat na celém rozhraní s jednotnou formou a stylem. Prvořadým úkolem šéfgrafika (či artdirektora), tedy vedoucího takové skupiny designérů, je odstínit existenci celého týmu od ostatních a vystupovat v rámci projektu jako jediný odpovědný grafik, s jasným názorem, vkusem a jednotným rukopisem. Musí pro okolí nemilosrdně filtrovat a korigovat práce svých podřízených a prezentovat ostatním pouze takové výstupy, které zapadají do celkové koncepce a stanoveného jednotného stylu. Musí sobě podřízené designéry jasně úkolovat a výsledky jejich práce upravovat a posouvat tak, aby zapadaly do jím požadovaného stylu a pojetí.

V rámci jedné zakázky musí figurovat vždy jen jeden designér, jeden grafik (jako dvě osoby pouze v případě, že mají jednoznačně vymezené pravomoci: tj. UX designér nevymýšlí grafické návrhy a grafik nešťourá do návrhu a logiky UI). Máloco dokáže projekt tak spolehlivě rozklížit, jako když se do jednání zapojují současně dva designéři nebo když více grafiků nezávisle posílá do pléna své skicy a návrhy. Nechci tím říct, že výtvarníci a návrháři obecně nejsou schopni týmové práce. Mohou velmi dobře spolupracovat, spolutvořit a navzájem se ovlivňovat a motivovat. Ale jen mezi sebou, uvnitř týmu. Směrem ven musí stát jediný člověk, který vymezí jasné mantinely, jejich výtvorům dokáže dát jednotnou formu, udržet koncepci a jasně rozpoznatelný styl.

Design a demokracie

Nesmírně podstatná je také forma komunikace a spolupráce s ostatními vně onoho případného uzavřeného designérského týmu — s kolegy-nedesignéry, nadřízenými, se zástupci třetích stran, s klientem. Tady najdeme asi ten největší a nejzásadnější rozdíl oproti ostatním profesím, v nichž jsou spolupráce a otevřenost všem názorům tak ceněné. Fakt, který se traduje spíš potichu a pokoutně a málokdo si to troufá říci nahlas, ale já to tady s radostí vypálím naplno a zcela nekompromisně:

Do designu nepatří demokracie.

Jsem opravdu přesvědčen, že demokratické postupy kvalitní design zabíjejí. Profesionální designér o svých návrzích rozhoduje autokraticky sám, nenechá si do nich jen tak někým mluvit a zasahovat. Musí být trochu despotou, který má k svému návrhu jasně vyhraněný a odbornými argumenty podložený postoj a subjektivní názory laického okolí ho nesmějí moc zajímat. Třeba je vyslechne, ale žádnou významnou váhu jim obvykle nepřikládá. Každý z těch lidí má nějaký osobitý vkus, vlastní zvláštní požadavky a soukromé priority, které jsou pro navrhovaný design vesměs nepodstatné. Designér netvoří návrh, aby se líbil kolegovi Frantovi, sekretářce Božence nebo panu řediteli. Dokonce ani aby se líbil klientovi. Tvoří jej pro cílovou skupinu svobodných matek z velkých měst. Pro teenagery zajímající se o basketbal. Pro solventní čínské důchodce plánující výlety do zahraničí. Pro jasně definované cílové skupiny o tisících, statisících, milionech lidí, do nichž tito komentátoři jen málokdy spadají. Designér má všechny dostupné podklady, důkladně si zanalyzoval vzájemné vztahy, výhody a rizika a do svého návrhu všechno zapracoval. Dobře ví, proč který prvek vypadá právě tak, jak vypadá, a jaké požadavky a vybojované kompromisy stojí za každým detailem návrhu. Dost často ani grafici z jeho týmu všechny tyto informace nemají kompletní a ani jejich připomínky a protinávrhy nemusejí pokaždé dávat smysl a zapadat do celkového obrazu — notabene pak názory někoho, kdo o designu ani o podrobnostech zadání a všech souvislostech vlastně nic neví. Jistě, někdy může i náhodný kolemjdoucí přijít s dobrým a použitelným nápadem: srdečné díky za něj! Ale obecně jsou všechny připomínky okolí spíše irelevantní, smysl dává pouze racionální, fakty podložená odborná debata o chybném či nevhodném zpracování požadavků zadání.

Jenom jedna věc, kterou může designér udělat, je horší než si nechat do svého designu kdejakým laikem mluvit: nechat o svých návrzích hlasovat. To je patrně jeden z nejhorších designérských hříchů. Peklo má zajisté jednu speciální úroveň se zostřeným režimem utrpení pro všechny designéry, kteří obesílají kolegy ve firmě sadou svých grafických návrhů a nechávají obchoďáky, sekretářky a programátory hlasovat, který návrh se má použít. Není od věci zopakovat pravidlo, které jsme si uvedli už na začátku v kapitole o uživatelích:

„Design davem“ nefunguje.

Chcete opravdu špatné grafické návrhy čehokoli — loga města, školy, grafické úpravy webu? Uspořádejte veřejnou soutěž, nejlépe zadarmo, aby se do ní zapojili jen úplní amatéři. Chcete z návrhů vybrat ty nejhorší? Nechejte laickou veřejnost hlasovat.

Platí totiž jedna pozoruhodná zákonitost: dav inklinuje k podprůměrnosti. Čím větší skupina lidí bude vybírat ze sady návrhů, tím horší a nevýraznější bude ten, na kterém se aspoň nějaká významná část hlasujících shodne. Lidé totiž nikdy nevybírají návrh, který podle nich bude nejlépe fungovat pro daný účel, ale primárně eliminují návrhy, na kterých jim osobně něco vadí, dráždí je, subjektivně se jim něco nelíbí. Nemají potřebné informace, nemají znalosti ani vkus, inklinují ke kýči. Nejkvalitnější a ve výsledku nejlépe funkční návrhy při takovém laickém výběru vypadávají jako první. Zůstane to, co všem vadí nejméně, nikoli to nejlepší. Tito lidé ty kvality, vazby a všechny důsledky a souvislosti nevidí a neznají. Designér ano. Proto musí být pouze jeho odpovědnost svůj návrh prosadit a obhájit. A také rozpoznat skutečně relevantní připomínky, odlišit je od těch ryze subjektivních a vhodně je do návrhu zapracovat.

Designér a uživatelé (podruhé)

Vše, co jsme před chvílí řekli o naslouchání připomínkám a nápadům kolegů k designu, platí i pro uživatele. A protože se jedná o skupinu mnohem, o několik řádů větší, platí to v ještě mnohem větší míře. Uživatelé dokáží vyprodukovat neuvěřitelné množství ztřeštěných nápadů a „vylepšení“, která vyhovují jenom jim samým — pokud jim k tomu dáme příležitost. Což tudíž nikdy udělat nesmíme. Stejně jako máme coby designéři zakázáno nechat si do designu mluvit laickými kolegy, nebo je dokonce nedejbože nechat vybírat z variant návrhů nějakým hlasováním, musíme si totéž ještě mnohonásobně přísněji zakázat od uživatelů.

Aby nedošlo k nedorozumění, je samozřejmě třeba rozlišovat mezi (irelevantními) názory a požadavky jednotlivců nebo zanedbatelných minorit a mezi (relevantními) názory a požadavky většiny či aspoň významné části uživatelů. Ty první je nejlepší ignorovat, ty druhé jsou naopak vítané a užitečné.

Jak je ale od sebe poznat? Ať už nám své nápady a návrhy posílají a vnucují sami jednotliví uživatelé, přicházejí s nimi za námi kolegové, pošle nám je klient či napadnou nás samotné, a pokud rovnou neusoudíme, že se jedná jen o naivní a zbytečný nápad, vždy je musíme následně velmi důkladně posoudit. Samozřejmě, čas od času se objeví nějaký nový nápad skutečně zajímavý a smyslupný, ale s tím pak nakládáme stejně jako dosud s každým nápadem vlastním: musíme jej nejprve prohnat nám již známou ověřovací procedurou, zda vyhovuje ve všech ohledech zadání a všem požadavkům, a navíc také náležitě posoudit, zda a nakolik je lepší než stávající řešení. A to nejčastěji jedním z následujících způsobů:

vlastním úsudkem, svými zkušenostmi a odbornou reputací

pomocí A/B testů, kde jasně porovnatelné výsledky ukáží lépe fungující (a potažmo uživatelům více vyhovující) řešení

analytickými nástroji — sledováním a analýzou chování návštěvníků na webu; prověřováním míst a situací, kde a proč web opouštějí, kam, jak a proč se vracejí či kdy se nevracejí apod.

sociologickými nástroji — průzkumy, online anketami, dotazníky atd.

Tak jako tak, finální rozhodnutí bude zase pouze na nás a na nikom jiném. Ať už nápad pochází odkudkoli, zvažujme jeho použití jen v případě, kdy dojdeme objektivně k závěru, že bude ku prospěchu věci a k užitku všech zúčastněných stran. V žádném případě se ale nedejme příliš ovlivňovat připomínkami jakýchkoli jednotlivců. Designér by se měl řídit hlavně jedním základním pravidlem:

Navrhuji pro uživatele, avšak ne podle nich.

Připomeňme si Druhý zákon designu z úvodu této knihy: Uživatel neví, co chce. On velmi dobře pozná, zda je s výsledkem spokojen, či nespokojen, ale navrhnout jej zodpovědně nedokáže, to je výhradně naše práce. Z pohledu designéra jsou zde uživatelé trochu jako děti a designér jejich chůva: děti jsou ještě nezkušené, nevzdělané a svým způsobem hloupoučké, lecjaká pitomina jim na první pohled může připadat jako nejlepší nápad na světě. Ovšem designér — hodný, ale nekompromisně přísný jako pohádková chůva Mary Poppins — jim nesmí všechno dovolit. Nápady relativně neškodné, pokud potěší a jsou nenáročné na realizaci, mohou být příjemným bonusem. Nápady potenciálně nebezpečné, s nežádoucími důsledky nebo neefektivní je třeba utnout v zárodku a nasměrovat pozornost jinam. A povinnosti, jakkoli nepříjemné, je třeba zodpovědně plnit. Stejně jako děti si vypracovat své domácí úkoly a vyčistit zuby v zájmu vyššího dobra prostě musejí, musejí také uživatelé na webu akceptovat reklamy nebo platit stanovenou cenu za zboží a služby. Jakkoli nám může ležet na srdci jejich blaho a spokojenost, musíme myslet také na blaho a spokojenost provozovatele webu a v důležitých otázkách nekompromisně zachovávat přísnost a důslednost.

Uživatel je vždy v centru pozornosti designéra a ten myslí na jeho blaho a spokojenost — ale nesmí se jím nechat příliš ovlivňovat. Jinými slovy, design musí být orientován na uživatele (user-centered), ale nikoli uživatelem řízen (user-driven).

Jejich pohled

To, že si nechceme jako designéři od uživatelů nechat mluvit do návrhů, vůbec neznamená, že by nám měli být oni i jejich zájmy ukradení. Od samého začátku v této knize přece tvrdíme pravý opak. Vše navrhujeme tak, aby měl z výsledku uživatel co největší užitek a kromě plnění jeho potřeb aby ho také bavil, rád jej používal a chtěl se za ním znova vracet. Uživatel a jeho svět jsou stále středobodem našich úvah. Jenom po něm nemůžeme chtít, ba mu ani nesmíme dovolit, aby o podobě a detailech návrhu nějak rozhodoval — víme totiž dobře, že to neumí a nedokáže to udělat dobře. Odborníkem jsme tu my, je to naše práce a je naším posláním to udělat za něj.

A základem všeho je koukat se na svět a na problémy, které se našeho projektu týkají, očima uživatele. Vše, co vytváříme, musíme posuzovat z jeho pohledu, z jeho perspektivy. K tomu nám výborně pomáhají persony (tedy ony vymyšlené postavy typických uživatelů), které jsme si vytvořili už na začátku v rámci zadání. Mít před sebou pojmenovanou postavu s fotkou, s popisem, životopisem významně pomáhá empatii a schopnosti pohlížet na vše očima této postavy. Co by tady tak ten náš děda Josef, sekretářka Boženka nebo manažer Čeněk udělali? Jak to bude každý z nich vnímat, co je při tom bude napadat?

Vždy navrhujme na míru pro konkrétní vzorové uživatele.

Nahlížejme z perspektivy svých person na všechny detaily a aspekty svého návrhu, které nás jen napadnou. Nejde jen o to, jak co vypadá, ale i jak to působí celkově, jak jsou prezentovány a podávány, v jakém kontextu, jak jsou navzájem provázány, jaké emoce budí, jak intuitivně se v nich dokážeme orientovat a používat je atd. Důsledné a empatické koukání na vše, co tvoříme, uživatelovýma očima, nám pomůže odhalit mnohé poměrně nenápadné, ale pro našeho uživatele možná zásadní problémy, které by s výsledným webem či aplikací mohl mít.

Jeden z takových nenápadných příkladů za všechny. Mnoho e-shopů prodává svítidla a pro zákazníky je to celkem využívaný a příjemný nákupní kanál. Je tu jeden podstatný háček: mnoho světel vypadá velmi podobně v mnoha velmi odlišných velikostech. Velké ploché čtvercové svítidlo 120×120 cm, vhodné třeba pod strop do haly, může být na fotce k nerozeznání od čtvercové nástěnné lampičky 10×10 cm, určené pro noční LED osvětlení. Vynechat u výrobků technické parametry (např. rozměry) a mít zde pouze krásné velké fotografie v dobré víře, že kvalitní obrázek řekne víc než sto technických údajů, se někdy může zdát jako dobrý nápad. Nebudeme uživatele zahlcovat technickými daty, beztak každý vybírá hlavně očima a podle obrázků se dá poznat vše a vybrat dobře. Co se z nich ale poznat bez náležité dopomoci nedá, je měřítko. Dívám se na věc velikosti stolu, nebo se mi to vejde do dlaně? Ovšem pokud si budeme chvilku takto připravený e-shop procházet coby skutečný typický uživatel, chvíli se jej snažit používat v jeho roli a s nějakým reálným scénářem (třeba s úkolem vybrat a koupit nové světlo do kuchyně), na tento problém nejspíš brzo sami přijdeme.

A pochopitelně to neplatí jen pro svítidla — příkladů, kde sebekrásnější fotografie nedokáže nahradit nějaký důležitý chybějící údaj, asi najdeme mnohem víc. Ale i naopak: budeme si myslet, že u daného produktu je vzhled nepodstatný a bude chtít zaujmout hlavně technickými parametry. A odradíme přitom možná cílovou skupinu, která vybírá hlavně očima…

Nedívejme se na své návrhy jako odborník, ale jako budoucí uživatel. Snažme se vžít do jeho kůže a zkoušejme si plnit úkoly, s nimiž takový návštěvník na web přijde. Zapomeňme přitom všechno, co víme, a snažme si naopak do hlavy pracovně umístit všechny predispozice, limity, předsudky, vkus, zájmy, potřeby a zkušenosti, které tam nejspíš bude mít náš vzorový uživatel.

Nejsme si jisti, je cílová skupina poněkud mimo naše zkušenosti a nedokážeme se do ní dostatečně vžít a zodpovědně rozeznat, co pro naše typické uživatele bude dobré, a co ne? Seznamme se s nimi! Najděme si reálné osoby, pro které design budeme tvořit, a popovídejme s nimi. Vytvořme si vzorovou personu podle skutečného člověka, kterého poznáme — a v případě potřeby se ho můžeme konkrétně zeptat.

Znát svou cílovou skupinu je zcela zásadní. Pokud ji neznám a tápu, musím se s ní nejprve seznámit.

Tvoříme web na správu firemní agendy? Najděme někde protřelou sekretářku nebo zkušeného účetního, pozvěme je na oběd a popovídejme si s nimi o tom, co je v takové agendě skutečně podstatné, co je zbytečné, co se dělá často a co jen sporadicky, jak ta práce v reálu probíhá, co by ji mohlo usnadnit, a co ji naopak komplikuje… Nebo si domluvme schůzku u nich v práci a dovolme se nějakou dobu sledovat jejich obvyklé pracovní postupy. Nechceme vědět, jak by ten web podle nich měl vypadat a co by tam dali a jak, to je pořád naše práce. Chceme se jen seznámit s profesí a potřebami naší cílové skupiny, snažíme se jen nasát co nejvíce informací a vjemů, abychom se co nejlépe mohli později vžít do jejich role.

Fachidiocie

Pokud vás někdy někdo označí za fachidiota, není rozhodně namístě se hned urazit, ale spíše zamyslet. Ona to prosím není žádná nadávka ani urážka, jak by se mohlo zdát někomu, kdo se s tímto pojmem ještě nesetkal, ale jde o prosté pojmenování častého problému, který s nutností pohlížet na design očima jeho budoucích uživatelů přímo souvisí. Přesněji řečeno je jeho přesným opakem.

Dnes stále častěji i v odborných kruzích používaný pojem fachidiot se definuje jako člověk s omezeným rozhledem jen na svůj obor, se sníženou sociální inteligencí. Slovo vzniklo spojením dvou slov: německého Fach = obor činnosti, odbornost a idiot = v medicínském významu člověk s IQ nižším než 20. Poprvé toto slovo nejspíše použil už Karel Marx, ovšem s jiným podtextem — fachidioty nazval vědce, kteří odmítali vnímat svou práci v širším společenském kontextu.

Fachidiocie = oborová zaslepenost

Každopádně druhá část slova je zde myšlena pouze v přeneseném významu, nízkou inteligencí je zde myšlena výhradně tzv. inteligence sociální. Fachidiot může být i člověk vysoce vzdělaný, nesmírně inteligentní a zkušený odborník, avšak pouze jednostranně zaměřený. Podstatnou vadou je právě úzké zaměření na vlastní obor, absence určitých sociálních komunikačních schopností a dovedností a snížená empatie. Může se jednat o inženýra, který postrádá základy humanitního vzdělání, stejně jako o filologa bez sebemenšího vzdělání technického, může jít o člověka s vzděláním všestranným — ale za všech okolností považujícího svůj vyvolený obor za středobod vesmíru, který podle něj stejně jako jeho zajímá i všechny ostatní.

U tvorby webů a v celém IT průmyslu se bohužel s tímto problémem potkáváme až nepříjemně často. Velké množství ukázkových fachidiotů — se vší úctou a respektem k jejich odborným kvalitám — je právě v řadách IT specialistů, programátorů především. Je to hlavní důvod, proč jsou weby a aplikace vytvořené programátory často tak moc, až legendárně špatné. Vůbec nejde o to, že by takový programátor neuměl kreslit nebo neměl vkus. To často vůbec nemusí být pravda. Ale právě ona oborová zaslepenost je příčinou, že takový autor aplikaci navrhuje ze svého pohledu, podle svých priorit, preferencí a pro své potřeby, a nikoli pro uživatele, který je má obvykle úplně odlišné. Mnohému IT specialistovi často vůbec nepřijde na mysl, že by někdo mohl nechtít mít celou aplikaci pod kontrolou a nechtěl si nastavit a přizpůsobit každičký detail. Nenapadne jej, že návštěvník webu nebude mít třeba technické vybavení, které on sám považuje za zcela samozřejmé a esenciální. Že uživateli třeba nic neříkají technické parametry a pojmy, které podle něj musí znát každý školák. Že ho nefascinují technické parametry, finesy a výpočetní výkony, ze kterých našeho ajťáka zalévají pocity blaha. Ba dokonce že by mohly většině uživatelů být úplně ukradené.

Právě toto je typická fachidiocie, její nejběžnější projevy v praxi. Ale nenarazíme na ni zdaleka jen u programátorů. Podobně postižený manažer bude prosazovat do mobilní aplikace na správu rodinných nákupních seznamů agregační tabulky a výkazy s přehlednými grafy, protože každou rodinu přece takové statistiky jejich nakupování musejí zajímat! Mladý vývojářský tým web naplní zábavními prvky a popkulturními odkazy, protože takové cool věci každého baví — určitě i cílovou skupinu knihovníků středního věku, pro kterou je jejich web určen. Grafik, který je nadšeným chovatelem psů, vyzdobí aplikaci psími motivy, protože „psí miláčky“ má přece každý rád (včetně oné významné cílové skupiny uživatelů z určitých zemí, kde se pes považuje buďto za jídlo, nebo za symbol nečistoty)… A pozor:

Fachidiotem může být i designér.

Což je docela paradox, protože jak se neustále snaží vysvětlovat i celá tato kniha, profese designéra je ze své podstaty jeho pravým opakem. Cílem skutečného designéra je neustále myslet na blaho uživatele, přemýšlet za něj, dívat se jeho očima a současně i očima zadavatele a stále mít na paměti skutečný smysl produktu, který navrhuje: tedy obvykle klientův profit. To je pravda, designéra, který uvažuje a pracuje tímto způsobem, za fachidiota lze obvykle označit jen těžko. Jsou ale i designéři, kteří mají jiné priority, vyznávají řekněme odlišné učení, podle nějž je funkcionalita přežitkem a nejpodstatnějším smyslem webu je například předávání emocí, zábava, umělecké sdělení. Nebo třeba překvapení a šokování. Nebo prostě vytvoření něčeho „krásného“.

Proč ne — ovšem podle mě by se nemělo jednat o primární cíl. Pokud se při tom zapomíná na podstatu, smysl a funkci webu, nebo jsou dokonce vědomě ignorovány, pokud jde o samoúčelný design pro design, považuju to za stejnou oborovou zaslepenost, fachidiocii dle definice. Designéři se pak mění v ryzí výtvarníky, kteří si pojem design zredukovali na samoúčelný styl a formu a místo vymýšlení, jak web či aplikace nejlépe poslouží uživateli a prospěje klientovi, se zaměřují na to, jaký se použije návrhový vzor, jaká barevná paleta, jaký moderní framework a módní vizuální styl.

Jsem přesvědčen, že takové výstřelky jsou ve výsledku jen nefunkční a určené k zániku. Design se po podobných experimentech musí nakonec vždy vrátit zpět ke svým kořenům užitého umění. Tedy sice možná umění, ale především užitného. Vždy a za všech okolností musí především vytvářet dobře funkční produkt, který bude sloužit oněm dvěma hlavním, zde již tolikrát opakovaným účelům: co nejlépe pomáhat plnit potřeby uživatelů a cíle provozovatelů. A všecek ten vzhled, styl či sdělování emocí je jen přidaná hodnota, která musí primárnímu účelu sloužit a nikdy s ním být v rozporu. Říkejme tomu klidně designérský funkcionalismus, já se tomu označení bránit nebudu.

Zametání cesty

Jedním z hlavních úkolů designéra je uživatelům maximálně usnadňovat kroky vedoucí k žádanému cíli — ať už globálnímu cíli celého webu (dokončení nákupu v e-shopu, opakovaná návštěva atd.), nebo lokálním cílům jednotlivých stránek (CTA): kliknutí na tlačítko, konzumace reklamy, přečtení hlavního sdělení, přihlášení k odebírání newsletteru, sdílení/sledování na sociálních sítích, vyplnění dotazníku atd.

Toto je opět téma, o kterém by bylo možné napsat celou samostatnou knihu. Konkrétních příkladů toho, jak návštěvníkům zpříjemňovat používání webu, jaké překážky a jak jim lze odstraňovat z cesty, jak jim postupy a běžné činnosti usnadňovat, se dají ukázat tisíce. Ostatně jich také tisíce najdeme v příručkách, učebnicích designu a ergonomie, na školeních online marketingu, na všemožných blozích a sociálních sítích. Každý, kdo opravdu stojí o funkčnost a výkonnost svého webu, se totiž právě o toto zametání cestiček a vyhlazování třecích ploch zajímá nejvíc. Pro online marketing je to dokonce téma přímo posvátné, koncentrované do téměř magického slova konverze. Tzv. konverzní poměr (tedy poměr návštěvníků, kteří došli ke sledovanému cíli, k celkovému počtu návštěv) je základní metrikou téměř veškerého marketingového snažení a pro jeho zvyšování o každou desetinku dokáží marketingoví specialisté dělat skutečná kouzla. Ta největší a zásadní se ovšem odehrávají hlavně na prostoru designu a my jako designéři pro konverze stránek můžeme udělat obvykle nejvíce.

Nebo možná spíš neudělat. Neboť největší počet praktických rad se zaměřuje právě na to, co by designéři dělat neměli, aby tu požadovanou cestičku pro uživatele ponechali přímou, hladkou a bez překážek. A většina tipů pak nepřichází s nějak převratnými nápady, ale spíš napravuje chyby, kterých se designér dopustil. Všechny následující kapitoly této části knihy můžete brát také jako jeden dlouhý výčet možností, kde také se v designu lze dopustit chyb. V podstatě všechny pak mají týž jednotný výsledek: znepříjemní, ztíží, či dokonce rovnou znemožní uživateli dosažení požadovaného cíle.

Chyba designu = snížení konverze

Tedy jen „pouhé“ napravení chyb mívá blahodárný efekt na výkon webu. Jen nebývá tak snadné je najít. Tato kniha k tomu hledání také může být určitou pomůckou; následující kapitoly se věnují jednotlivým aspektům designu a naznačují postupy a řešení, o kterých si myslím, že jsou funkční — přinejmenším proto, že se v praxi osvědčily mnohem lépe než jiné. A v případě, že na dotyčném webu je příslušná věc zpracovaná jinak či úplně chybí, může to být příznak potenciální chyby. Netvrdím, že to platí vždy, každý problém má obvykle vícero správných řešení a tato kniha se ani nesnaží představit všechna možná. Ale alespoň jako vodítko k označení míst, která stojí za to prověřit, to užitečné být může. Nepřecenili jsme některé limity typických uživatelů? Nejsou stránky příliš komplikované? Jsou dobře rozvržené, je z nich patrná hierarchie a logika? Pracujeme dobře s prostorem, vazbami, barvami a grafickými prvky, s textem? Pomáhá rozhraní uživateli, nebo jej brzdí? To je několik příkladů konkrétních částí designu, které v dalších kapitolách rozebereme podrobněji. V každé z nich můžeme udělat nějakou nečekanou a třeba i nenápadnou chybu, která webu snižuje konverzi.

Nejsou ovšem všechny chyby zcela patrné a snadno rozpoznatelné. A někdy jsou prakticky neodhalitelné, dokud se nám s nimi nesvěří sami uživatelé — a může se stát, že zdánlivě nepodstatná stížnost jednoho uživatele pomůže odhalit celý segment uživatelů, kteří web opouštějí předčasně a pro nás zdánlivě bezdůvodně.

Jeden příklad z mnoha. Určitá část nakupujících v e-shopech vybírá zboží a rozhoduje se k nákupu v několika fázích. Porovnává nabídky několika konkurenčních prodejců z mnoha ohledů, až vybere jednoho, u kterého nákup uskuteční. Podstatné je to, že tento výběr může probíhat formou simulovaného nákupu: návštěvník vybrané zboží vloží do košíku, projde si cvičně celý nákupní proces až k pokladně a pak nákup přeruší. A to nejhorší, co se může e-shopu stát, je situace, kdy jeho nabídka uživatelovo „výběrové řízení“ vyhraje, ten se na web vrátí, aby nákup dokončil — a nemá co dokončit, protože server po návštěvě (nebo po hodině či po 24 hodinách) předchozí akce vymaže, vyprázdní uživateli košík a nastaví výchozí hodnoty.

Kamarád nedávno vyprávěl příklad padnoucí sem jako ulitý: hodlal koupit nějaké hudební nástroje, aby mohli doma hrát s dětmi. Po týdnu velmi pečlivého vybírání ale nakonec nakoupil v obchodě, který mu za tu dobu — jako jediný! — nevysypal košík.

Dá se pochopit, že skutečný, kamenný supermarket potřebuje udržovat pořádek a průchozí koridory a nějaké odstavené košíky by zde překážely, takže je najatý pracovník pravidelně odklízí. Ale v e-shopu, který ve skutečnosti existuje jen ve formě několika tabulek počítačové databáze, takové plné a „odstavené“ košíky nikomu příliš nepřekážejí. Pro provozovatele to znamená nanejvýš pár kilobajtů uložených dat navíc a ostatní návštěvníci o nich vůbec nevědí. Jaký je důvod takový košík vysypávat příliš brzy? Jistě, když se k němu zákazník nehlásí pár měsíců, rok a je pravděpodobné, že už se nevrátí, tak proč neuklidit. Ale vysypat košík po pár hodinách? I po týdnu je to brzy. A především pro to neexistuje prakticky žádný důvod.

Ačkoli… Bavil jsem se o tomhle poměrně častém problému s jedním programátorem, který vyvíjí a spravuje celou rozsáhlou síť e-shopů. A on svůj důvod měl: má rád pořádek a nějaké neuzavřené košíky mu vadily a vytvářely mu „nepořádek“ v databázích. Takže si dal záležet a všechny „osiřelé“ nákupy se každý den pečlivě mazaly a odklízely. Programátor byl spokojený a měl v databázi vzorný pořádek. To, že tahle spokojenost stála provozovatele možná spoustu tisíc na neuzavřených obchodech několika naštvaných zákazníků, kterým připravený nákup do druhého dne zmizel, ho nijak netrápila — a vlastně o tom ani nikdo nevěděl až do doby, kdy právě marketéři v anketě spokojenosti mezi stávajícími zákazníky objevili shodu hned u několika z nich, kteří si na mizející nákupy mezi jednotlivými návštěvami stěžovali.

Překážky na konverzní cestě se mohou dít dokonce zcela mimo web samotný. Schválně, udělejme malý experiment: pokud aspoň občas nakupujete online, projděte si e-mail a podívejte se na zprávy, které vám poslaly e-shopy s potvrzením objednávky či odeslání zásilky. V kolika z nich najdete přímý odkaz do e-shopu? Já jsem si prošel nákupy za poslední rok a odkaz na web v e-mailu chyběl v přibližně polovině případů. A proč to tady zmiňuji?

Inu dobrá, nežiju úplně zdravě: kouřím dýmku a pravidelně piju kávu. A taky chováme kočky. V součtu to znamená, že na internetu čas od času nakupuju tabák, kávu a krmivo pro kočky. Všechno to jsou věci, které se kupují sice relativně pravidelně, ale typicky je objednávám až ve chvíli, kdy docházejí. Což je ve všech třech případech průměrně jednou za dva tři měsíce. A co udělám, když po těch pár měsících zjistím, že je potřeba objednat kávu, tabák nebo granule? Myslí si snad někdo, že si pamatuju přesné jméno, nebo dokonce adresu e-shopu, kde jsem kdysi před čtvrtrokem cosi nakupoval? Vůbec ne. Jdu pro mě nejsnazší cestou: otevřu si mail, najdu poslední zprávu z posledního nákupu, a pokud tam je odkaz na dotyčný e-shop, kliknu na něj a udělám objednávku. Pokud tam ten odkaz není, musí nastoupit plán B: musím použít nějaké vhodné klíčové slovo a vyhledávač a z nabídnutých výsledků si vybrat onen posledně použitý e-shop — anebo taky jiný, když mě nějaký zaujme. A zde přichází pointa: pražírny kávy ani prodejci dýmkových tabáků ve svých e-mailech adresu eshopu často neuvádějí, zatímco prodejce krmiv tam má odkazy na můj účet, na přehled předchozích objednávek i do e-shopu samotného. Zatímco prodejců kočičích granulí je na trhu víc než všech pražíren kávy a dýmkařů dohromady, za poslední dva roky jsem dodavatele kávy změnil dvakrát a prodejce tabáku třikrát, ale granule kupujeme pořád na stejném místě.

Člověk by řekl, takový nenápadný detail. Ale uvedením odkazu v e-mailu a možností vrátit se do obchodu prostým jedním kliknutím mi prodejce poměrně snadno zabránil vůbec se rozhlížet po trhu a koukat po konkurenci. Konverze zajištěná jen zametením cesty a nabídkou pohodlného přístupu k cíli. Dokonce prostřednictvím jiného kanálu, než je web samotný — ovšem vzhled a obsah informačních e-mailů je také podstatnou součástí webdesignu, kterou není radno příliš podceňovat.

Bezpečné hřiště

Už v jedné z prvních kapitol této knihy jsme zmiňovali, že uživatelé se často bojí neznámého prostředí a potřebují být ujištěni, že nemůžou nic rozbít. Popravdě řečeno jim nezáleží ani tak na poškození našeho webu, ten je jim obvykle celkem ukradený — to, oč se bojí, je ta část obsahu, která jim tam byla přidělena či kterou si zde už sami vytvořili. Bojí se, že jejich data nebudou uložena, že po návratu na předchozí stránku přijdou o vše, co dosud udělali, že rozepsaná zpráva zmizí po chybném kliknutí, že přijdou o data nastavení do příští návštěvy (třeba že jim někdo bez ptaní vysype košík). Bojí se, že si vyberou špatně z nabídky a už nebudou mít možnost to změnit atd. Mnohdy jsou jejich obavy zbytečné, někdy oprávněné.

Když firma Apple startovala svou online hudební službu, při prvním spuštění se mě dotazovali na mou oblíbenou hudbu a žánry. Neměl jsem na to zrovna náladu, tak jsem tam zaškrtal cosi napůl náhodně — kdyžtak to změním později, až na to budu mít čas a chuť, že… Bohužel, toto byl zrovna ten druhý případ, kdy jsem se zatraceně a oprávněně měl bát na něco kliknout. Cesta zpět totiž nebyla a Apple mi teď nutí hudbu úplně nesmyslnou a nabízí mi pouze žánry, které mě nijak neoslovují. Do dopsání této knihy jsem nenašel způsob, jak si personalizaci hudby v této službě nějak změnit.

Takovou zkušenost svým uživatelům designér nesmí nikdy dopřát. Vše, co jde, musí jít napravit a těch několik výjimečných nevratných kroků musí být doprovázeno náležitým varováním a vysvětlením, co se stane a jaké to bude mít následky. Protože největší hrozbou pro osobní bezpečí každého jsou především kroky do neznáma, neobvyklé akce, postupy nezapadající do známých schémat, cize působící prostředí.

Pocit bezpečí pramení z pochopení systému a srozumitelnosti prostředí.

Základem všeho je průzračná struktura webu a srozumitelná navigace. Na každé stránce, v každém kontextu musí uživatel vědět, kde se právě nachází, co zde může udělat, co je kolem, co má udělat ke splnění úkolu, s nímž sem přišel, jak se dostane k následující akci, kterou chce na webu dále provést. Nabídněme co nejpřehlednější zobrazení struktury webu a snadnou navigaci v ní. Na podstránkách používejme drobečkovou navigaci nebo podobný systém, který jasně sdělí, v jaké části a v jaké hloubce struktury se právě nachází. Poskytněme odkaz na přehlednou mapu webu.

Pracujme dobře a konzistentně s navigačními vzory, oddělujme a odlišujme zřetelně (a to i vizuálně) modální části a sekvence (tedy např. dialogy a různé průvodce, wizardy) od běžné volné navigace po webu. Pokud není žádoucí, aby uživatel opustil probíhající sekvenci bez řádného ukončení, tak to ani neumožněme. Přizpůsobme styl navigace stránky právě použitému navigačnímu vzoru. Pro nejčastější úkoly vytvořme „dálnice“ — výrazně vyznačené cesty s jasnými milníky, případně dokonce průvodce vedoucí návštěvníka za ruku přímo k cíli.

Smyslem toho všeho je, aby se uživatel na webu cítil jako doma, aby měl pocit, že jej důvěrně zná, že se v něm dobře orientuje a příjemně cítí. Pak se nebude bát jej používat, nebude se bát experimentovat a prozkoumávat všechny jeho možnosti a zákoutí.

Pochopitelně nejen navigace musí být srozumitelná. Na webu musí být zřejmý, zcela intuitivní (anebo jasně a srozumitelně vysvětlený) účel a následek každé akce. Texty tlačítek a odkazů ať jsou výstižné a popisné — vyhýbejme se obecným a zaměnitelným textům odkazů jako Klikni nebo Zde. Kde to je aspoň trochu možné, nahraďme obvyklé OK na tlačítku slovesem odpovídajícím skutečné akci: u odeslání zprávy Odeslat, u potvrzení třeba Souhlasím atd. Dejme si pozor na možné zmatení zavedených pojmů v nečekaném kontextu — známým protipříkladem je legendární potvrzení zrušení objednávky: Opravdu si přejete zrušit objednávku? OK / Zrušit. Velmi matoucí… Stačí přitom malá změna, výjimečně se zde vyhnout jinak standardnímu tlačítku Zrušit a použít jiné texty: Zrušit objednávku / Zpět, příp. dokonce Ne, nerušit. Dávejme si pozor na stejně vypadající tlačítka, která mají v různých kontextech náhle zcela odlišné významy; nepoužívejme různé názvy a různé texty odkazů pro stejné akce a cíle.

Primární a očekávané akce zobrazujme výrazně, ty méně běžné méně nápadně. Nebezpečné operace, které mohou něco nevratně smazat či zrušit, označujme nějakým symbolem výstrahy, třeba ikonou nebo vyhrazenou varovnou barvou (o barvách si povíme více v dalších kapitolách) a vyžádejme si potvrzení akce po upozornění na možné nebezpečné následky.

Příklady táhnou a jedna vhodná a dobře vybraná praktická ukázka vydá často za celý složitý a tlustý manuál. Buďme názorní, uvádějme příklady a vzorová řešení všude, kde to jde. U aplikací dejme k dispozici bezplatnou demoverzi k vyzkoušení, snadno a rychle dostupnou. Bez nějakého povýšeného poučování vysvětlujme vše, co nemusí být zcela jasné. Snažme se popisovat a vysvětlovat věci, které se na první pohled zdají zřejmé a očividné. Nebojme se být příliš názorní a vysvětlovat příliš polopaticky. Používejme více obrázků a multimédií a méně textu, používejme jednodušší slovník a vyhýbejme se příliš odborným formulacím a komplikovaným konstrukcím. Znalejší uživatel to bude tolerovat, méně znalému to může nesmírně pomoci.

Navrhujme web pro nejprostšího a nejhloupějšího očekávaného návštěvníka. Ti chytří se jednoduchému a snadno srozumitelnému rozhraní přizpůsobí snadno, opačně to možné není.

Nabídněme pomoc, nápovědu a podporu, kde to jen jde. Nové projekty představme ve výstižném videu, ukažme nejobvyklejší akce přímo na otiscích stránek nebo rovnou v popisných screencastech. Poskytněme řešení běžných problémů a standardních situací, snažme se, aby sekce FAQ (Často kladené dotazy) obsahovala reálné časté dotazy a běžné problémy uživatelů (a ne očividně podsunuté marketingové položky typu Jak můžu zaplatit víc? Váš web je úžasný, mohu vám přijít osobně poděkovat? apod.). Nakolik je s tím klient svolný, poskytněme uživatelům živou a rychlou technickou podporu — v chatu, na sociální síti, na telefonu, po e-mailu. Využijme sociální sítě, uživatelská fóra, mnoho problémů si dokáže vyřešit uživatelská komunita mezi sebou, aniž by se o to provozovatel musel starat (tedy více než moderováním diskuse a udržováním její formy a obsahu ve slušném a věcném tónu).

Zkrátka: všemi dostupnými prostředky dávejme návštěvníkům najevo, že se nacházejí v přátelském, příjemném a srozumitelném prostředí, kde nebudou bloudit, kde každý problém je napravitelný, a když si náhodou nebudou vědět s něčím rady, vždy tu pro ně bude nějaká nápověda, rada, technická podpora.

Specifika uživatelů a přístupnost

V designu pracujeme s několika základními úrovněmi přiblížení výsledného produktu uživateli, a to bez ohledu na to, zda navrhujeme webovou aplikaci nebo židli:

Základní úroveň: funkčnost a přístupnost. Designér musí zajistit, že výsledný produkt bude jednak dělat to, co má, jednak jej bude moci také vůbec někdo používat. Že jej uživatelé budou schopni získat, uvést do provozu, ovládat a bude jim poskytovat požadovaný efekt. Že židle bude stát pevně na zemi a bude na ní možné sedět; že se webová stránka načte do prohlížeče a zobrazí se na ní požadované informace.

Střední úroveň: použitelnost a ergonomie. Na této úrovni designér zajišťuje, že produkt bude uživatel moci nejen nějakým způsobem použít, ale bude ho moci používat smysluplně, únosně a bez jakékoli újmy. Nebude jej obírat o čas, nebude jej z něj bolet hlava, nebude kvůli němu muset studovat návod a učit se novou technologii, nezpůsobí mu nějaké zdravotní či jiné potíže. Ze židle nebudou uživatele bolet záda a může s ní pohodlně manipulovat. Na webu se intuitivně a snadno orientuje a z designu mu neslzí oči.

Nejvyšší úroveň: uživatelský prožitek (UX). Tedy emoce, zážitky, estetika. V podstatě už volitelná nadstavba použitelného produktu, zajišťující vše nad rámec elementární funkčnosti — nakolik se produkt uživateli líbí, zda si k němu vytvoří vztah, bude jej rád používat a vracet se k němu, sdílet zážitky a doporučovat jej ostatním atd. Židle bude měkoučká, komfortní a bude mít hezký potah. Web bude vtipný, zábavný a jeho grafika bude úchvatná.

Designér v žádném případě nesmí ve prospěch vyšší úrovně designu jakkoli omezovat úrovně nižší. Každý další stupeň je pouze nadstavbou, která možnosti produktu rozšiřuje a zlepšuje, nikoli omezuje. Pokud se na všechny tři úrovně podíváme pozorněji, určitě nám dojde, že každý nižší stupeň je nezbytnou součástí stupňů vyšších. Nefunkční produkt je automaticky nepoužitelný. O jeho ergonomii se nedá mluvit, když se k němu vůbec nedostaneme. A uživatelský prožitek z produktu obtížně použitelného, otravného, nesrozumitelného, nebo dokonce polofunkčního je bez diskuse mizerný, i kdyby byl zabalen v sebekrásnějším a sebezábavnějším obalu. Pokud v zájmu lepšího a úžasnějšího zážitku omezíme funkčnost nebo části uživatelů produkt znemožníme používat, dopouštíme se školácké designérské chyby. Každý design proto musí být budován zdola: nejprve musí být navržena základní funkčnost a přístupnost pro maximum potenciálních uživatelů. Následně takový návrh optimalizujeme, aby se používal dobře, efektivně a ergonomicky — aniž bychom omezili stávající funkčnost a přístupnost. A teprve nakonec je můžeme zkrášlovat, vylepšovat, opentlit zážitky a ověsit emocemi — které ale opět nesmí být na úkor použitelnosti a ergonomie, natož základní úrovně funkčnosti a přístupnosti.

Proto od samého začátku musíme současně s vymýšlením základních funkcí webu myslet také na budoucí uživatele a na to, jak a zda budou schopni používat všechno to, co si vymyslíme. Na většinové uživatele myslí designér obvykle automaticky — nikdo nebude vymýšlet věc, která by na první pohled byla pro většinu lidí nepoužitelná a k ničemu. Ale tím spíš je nezbytné mít v patrnosti ony uživatele menšinové. Dobrý designér musí myslet na lecjaké zvláštnosti, nestandardnosti, ba i podivnosti, se kterými uživatelé na web přijdou. Na jejich různá omezení, limity osobní, sociální či technické, všemožné dispozice a indispozice a musí se snažit jim vycházet vstříc, seč to jde. Anebo se alespoň snažit nevytvářet překážky, na něž tyto limity mohou narazit.

Je ovšem nezbytné nejprve odlišit dvě věci: neúmyslné a zbytečné ignorování limitů a specifik určitých skupin uživatelů z neznalosti — a ignorování úmyslné, vědomé a poučené. Tím druhým šetříme svůj čas a klientovy peníze, když se zcela úmyslně a zodpovědně rozhodneme nepodporovat některé minoritní specifické skupiny, když si stanovíme technologický řez (viz dříve) a nějaké malé skupině potenciálních návštěvníků, jejichž speciálním nárokům by bylo už velmi náročné a příliš neefektivní vyhovět, informace jednoduše neposkytneme vůbec nebo jen v nějaké zjednodušené podobě. Je-li takový technologický řez veden dobře a zůstane-li za ním zanedbatelná minorita neuspokojených návštěvníků, je to velmi žádoucí a v podstatě nezbytný krok.

Ovšem tím prvým — tedy ignorováním neúmyslným a nechtěným — naopak můžeme hodně ztratit, přicházet zbytečně o návštěvníky, potažmo klienta připravovat o peníze. Protože to činíme nevědomě a kvůli neznalosti, vlastně ani nevíme, jak velké skupině takovou chybou používání webu ztěžujeme, či dokonce znemožňujeme a jestli jde jen o zanedbatelný počet jednotlivců, nebo o ekonomicky či vlivově významnou skupinu. Také proto na samém začátku, při sestavování podrobného zadání projektu, musíme věnovat tolik pozornosti co nejpřesnějšímu a pečlivému popisu cílových skupin, všech jejich parametrů, zvláštností, limitů a požadavků. A potažmo co nejpřesnějšímu vytvoření person, tedy vzorových postav uživatelů, jimž na míru web navrhujeme. Ideálně stvořená persona nám všechny své limity a specifika prozradí rovnou a my je zapracujeme do designu někdy i automaticky a podvědomě.

Pokud design webu narazí na nečekané limity uživatelů, nejspíš jsme něco přehlédli a zanedbali při popisu cílových skupin a vytváření person.

Všemožných specifik, omezení a limitů je mezi cílovou skupinou nepočítaně. Od téměř zanedbatelných po skutečně vážné, které jim výrazně ztěžují, či dokonce zcela znemožňují výsledný web používat. Z těch hlavních je potřeba podrobně zmínit hlavně různá omezení sociodemografická a technická, zdravotní handicapy nebo okamžité dispozice uživatelů.

Sociodemografické a osobnostní limity

Toto je obrovská skupina parametrů cílových skupin, o kterých musíme mít co nejlepší informace především. Jak ovšem takové obecné sociodemografické hodnoty souvisejí s jednotlivými konkrétními detaily vizuálního designu? Když už máme dobře vytvořené jednotlivé persony, potřebujeme ještě i jistou dávku empatie a představivosti, abychom se vžili do skutečných pocitů a předpokládaných zkušeností takového budoucího uživatele v konkrétních situacích na našem webu a dokázali je posoudit ze všech možných ohledů. Zmiňme zde ve stručnosti aspoň ty nejběžnější příklady.

Pohlaví. Nenechejme se zmást bojovníky za rovnost pohlaví, ta do designu nepatří. Muži zkrátka jsou z Marsu a ženy z Venuše, o tom není pochyb. Zástupci obou pohlaví se celkem podstatně liší v mnohých ohledech, a to nejen v těch fyziologických. Nás zde zajímají především rozdíly v uvažování a vnímání. A ty jsou také často výrazné. Muži častěji upřednostňují holá fakta, ženy dávají přednost příběhům. Muže více oslovují technické parametry, ženy emoce. Muži snáze pracují s prostorovou představivostí, ženy s barvami. Muži jsou progresivnější, snáze přijímají inovace a zkoušejí novinky, tvoří většinu tzv. early adopters. Ženy jsou spíše konzervativní, méně často experimentují, jsou loajálnější, méně ochotně mění značky a osvědčené postupy atd.

Věk. Mezigenerační rozdíly jsou ze všech odlišností asi nejhlubší. Různé generace mají výrazně odlišné priority a žebříčky hodnot. Každá generace má odlišné historické zkušenosti (ještě více s přihlédnutím k národnosti a lokalitě), slyší na odlišné popkulturní odkazy. Různé věkové skupiny budou mít odlišnou i zkušenost technologickou — narazíme na to třeba při vytváření různých symbolů a paralel. Známý je třeba problém s použitím symbolu pro uložení souboru: pro starší uživatele může být zcela srozumitelným symbolem obrázek diskety, zatímco ti mladší nejspíš vůbec nepochopí, co má tento symbol zobrazovat. Pro ně bude třeba obvyklejší symbol obláčku, který znají jako abstrakci pro ukládání souborů na server, do cloudu — což zase bude nejspíš nesrozumitelné pro starší generaci uživatelů. Generace se liší vkusem i používaným jazykem, co zní starší cílové skupině jako příjemný neformální styl komunikace, může mladší generace vnímat jako jazyk archaický a zkostnatělý. A naopak mladý, moderní neformální komunikační styl mohou starší uživatelé vnímat jako vulgární a urážlivý. Starší uživatelé častěji vítají podrobnější informace a delší texty, mladší dávají přednost stručným přehledům a multimédiím. Pro starší návštěvníky jsou typické různé zdravotní limity, jednotlivé generace se často liší v technickém vybavení a používání různých technologií (viz dále). Je zřejmé, že rozdíly jsou skutečně významné a specifické požadavky mnohdy zcela neslučitelné. Má-li být navrhovaný web vícegenerační, je nezbytné vytvořit i generačně odlišné samostatné persony, jeden vzorový uživatel obvykle nemůže zastupovat příliš velké věkové rozpětí cílových skupin.

Inteligence, vzdělání. Předpokládaná inteligence a úroveň znalostí cílové skupiny se výrazně promítá především do jazyka a komunikačního stylu, což je primárně práce pro copywritera. Ale i pro vizuálního designéra hraje roli, především pro nakládání s úrovní abstrakce, zkratkami a paralelami, zástupnými symboly. U webu cíleného na návštěvníky z akademické sféry lze používat abstraktnější symboliku, složitější logické vazby, komplikovanější konstrukce. Je-li cílovkou spíše běžná populace, musí být symboly přímočařejší a konstrukce jednodušší. U vzdělanějšího a inteligentnějšího publika (studenti, lékaři, inženýři atd.) musí designér počítat s potřebou delších a podrobnějších textů, bohatšího odkazového aparátu, preciznější dokumentace; průměrnější uživatelé se spíše spokojí s informacemi povrchnějšími a se zjednodušujícími zkratkami. A platí to i opačně, i když s touto situací se setkáme asi jen velmi zřídka: pro cílovou skupinu se sníženými intelektuálními schopnostmi musíme obsah i formu navrhovat obzvlášť citlivě, v extrémních případech i ve spolupráci s odborníky. Nerad bych, aby to vyznívalo jakkoli pejorativně — designér i takové věci musí brát zcela věcně a profesionálně. Samozřejmě, ke každému uživateli chováme náležitý respekt, ale je chybou před takovými aspekty ostýchavě zavírat oči a vytvářet třeba informační stránky pro obyvatele vyloučených sociálních skupin, web chráněné dílny nebo portál pro děti ze speciálních škol stejně jako každý jiný web. Z vlastní zkušenosti ale musím potvrdit, že na čím náročnější zakázku v tomto ohledu narazíme, tím více se nám dostane užitečných rad a pomoci od skutečných odborníků, kteří v příslušných komunitách pracují a pohybují se a na dobrém výsledku jim skutečně záleží.

Společenská skupina, zázemí, zájmy. Podobně jako mezi generacemi (i když ne v takové míře) existují významné rozdíly mezi různými společenskými skupinami, které jsou navzájem odděleny odlišným životním stylem, životní úrovní, odlišnými zájmy, prioritami a preferencemi. Je zřejmé, že web cílený na mladé rodiny musí používat i odlišný vizuální komunikační styl než web cílený na mladé squattery, styl webu golfového klubu se musí v mnoha ohledech lišit od webu klubu fotbalového, sdružení příznivců konzervativní politické strany vyžaduje odlišný přístup než web sdružení příznivců chovu zakrslých králíků. Nalezení společného jazyka se svou cílovou skupinou a harmonické brnkání právě na ty struny, na které slyší potenciální uživatelé, je základní dovedností každého dobrého designéra.

Národnost, země, lokalita. Pomiňme zcela zřejmé rozdíly, jako jsou jazyky, kterými cílové skupiny mluví — vytváření příslušných jazykových verzí pro jednotlivé cílové země je naprostou samozřejmostí. Zaměřme se na specifika méně nápadná, která bychom měli aspoň v základní míře prostudovat, pokud se chystáme dělat web cílený na uživatele z více zemí či odlišných regionů. Významně se mohou lišit mnohé zdánlivě samozřejmé postupy a běžné uživatelské scénáře: v jedné zemi je zvykem platit v e-shopech kreditními kartami, v jiné to třeba bude praktika spíše ojedinělá a lidé zde budou zvyklí nakupovat spíš na dobírku či si vyzvedávat zásilky na pobočkách. Jednotlivé země se budou výrazně lišit v legislativě a zákonných normách a limitech, které se vztahují na obsah a formu webu — od všemožných nuancí autorských zákonů přes zákony na ochranu spotřebitele po míru cenzury a omezení používání internetu. Ale mohou nás překvapit i poměrně nečekané skutečnosti: například zjistíme, že web, který je plně funkční v jednom regionu, je jinde nepoužitelný prostě proto, že tam má významné zastoupení prohlížeč, který náš web už vůbec nepodporuje. Kupříkladu v některých postsovětských republikách a středoasijských zemích byla po dlouhá léta zdaleka nejpoužívanějším prohlížečem Opera, která měla jinde ve světě zastoupení hluboko pod hranicí 1 % a často se vývojářům nevyplatilo ji vůbec podporovat. Musíme si dát pozor i na různé jazykové záludnosti — může se stát, že v jednom jazyce zcela nevinný název služby či produktu bude mít v jiné zemi negativní konotace, nebo dokonce rovnou obscénní či vulgární význam.

Kulturní prostředí, tradice, náboženství. Pokud připravujeme web pro cílovou skupinu s odlišnou kulturní či náboženskou tradicí, musíme velmi dobře prostudovat všechny podstatné souvislosti. Různé kultury používají symboliku často výrazně odlišnou od naší: barvy mají jiné významy (někde je černá barvou smutku, jinde je to bílá; někde červená symbolizuje nebezpečí, jinde má naopak spíše pozitivní konotace), výrazně odlišné mohou být různé vizuální symboly a zkratky (to, co považujeme za relativně neškodný symbol, může mít v jiné kultuře vulgární či společensky nepřijatelný význam a naopak), různé kultury mají různá oblíbená a smůlu nosící čísla atd. Musíme si dát pozor na různá tabu — některá náboženství nepřipouštějí zobrazování lidí, některá mají tabuizovaná, či naopak posvátná různá zvířata, v různých kulturách jsou nepřijatelná různá témata, která jsou v naší kultuře zcela běžná, a vice versa. Pokud se nám stane, že máme vytvořit design pro cílovou skupinu s výrazně odlišným kulturním prostředím, které nám není zcela vlastní, věnujme náležitý čas přípravě a důkladně se seznamme alespoň s největšími rozdíly. Když už se nedokážeme s cílovou mentalitou a zvyklostmi zcela sžít, ať se alespoň nedopustíme nějakého trapného faux pas.

Povaha a osobnostní rysy. Stejně jako každý jiný typický vzorek populace jsou i uživatelé našeho webu extrovertní a introvertní, optimisté i pesimisté, hloubaví i povrchní, rozvážní i zbrklí, racionální i pověrčiví, realisté a snílci… Nemáme-li na základě úvodní analýzy cílovou skupinu profilovanou jako jasné extroverty, racionální realisty nebo třeba impulsivní snílky, vždy raději počítejme s rovnoměrným zastoupením obou povahových protipólů. S myšlenkou na ně se lépe vypořádáme s možnými negativními důsledky nápadů, které vycházejí vstříc jen jedné straně a tu druhou nejen opomíjejí, ale dokonce penalizují. Bude-li zpravodajský web s negativně naladěnou redakcí očekávat od čtenářů pesimistický pohled na svět, může tím časem zcela znechutit tu optimisticky naladěnou část návštěvníků. Když tým mladých extrovertních vývojářů vymyslí pro web gamifikační prvky, tvořené bláznivými soutěžemi spojenými s posíláním vlastních fotek a videí uživatelů, vyřadí a mnohdy i zcela odradí uživatele starší a introvertní, pro něž takové aktivity budou odpuzující a prakticky nemyslitelné. Musíme myslet i na typy uživatelů, kteří jsou protikladem našich vlastních povah, a návrh podřizovat i jim, jejich zájmům a potřebám. A pokud skutečně nemáme v zadání takový povahový rys jasně vymezen, musíme vždy počítat s rovnoměrným zastoupením jeho obou pólů a přizpůsobit své návrhy oběma — přinejmenším tak, že upřednostníme-li jeden z nich, uživatele z druhé strany to alespoň nijak zásadně neomezí.

Snažme se prokazovat uživateli vždy maximální úctu a porozumění: respektujme jeho kulturní odlišnosti, tabu a zvláštnosti, nepoučujme jej a nepovyšujme se nad něj, nesnažme se jej školit a převychovávat. Nemáme patent na rozum a univerzální pravdu — a i kdybychom si nakrásně byli jisti, že pravdu máme a že návštěvník je ten, kdo se mýlí a je úplně mimo, stejně si to necháme pro sebe. Budeme-li se s ním přít, kádrovat a poučovat, výsledkem bude stejně jen uražený a ponížený návštěvník. Naše vlastní přeleštěná ješitnost nám zisk nepřinese. Jako třeba u těch namyšlených baristů, co místo toho, aby bez mrknutí oka vyhověli zákazníkovi, co si objednal piccolo (tedy zavedený rozlišující název pro tu pravou malou kávu espresso), ho začnou povýšeně školit, že žádné piccolo neexistuje, že si vlastně přál espresso a žádné menší a větší espresso není a laskavě si to do příště zapamatujte! Jestli si myslí, že dotyčný jim padne k nohám a bude poníženě děkovat, jak úžasně byl poučen a jakého moudra se mu dostalo, tak leda houby. Dotyčný půjde jednoduše jinam, kde mu jiný, slušný a rozumný barista bez debat a ochotně prostě uvaří dobrou kávu a nebude z něj dělat blbce.

Nedělejme z uživatelů blbce. Nepřistupujme k nim jako k těm hloupějším, méněcenným, zaostalým, nespolečenským podivínům, nezodpovědným hračičkům, trapně mladým či politováníhodně starým, odpudivým cizákům, pomatencům s podivnou kulturou, buranům z venkova či městským floutkům… Úctu a respekt si zaslouží všichni a ten, kdo je mimo a zapomněl se přizpůsobit, jsme pokaždé jen my.

Designér se přizpůsobuje uživatelům a nikdy naopak.

Technické limity

I když si náležitě vytvoříme technické cílové skupiny a technické scénáře, stanovíme si technologický řez a budeme mít přesně specifikováno, jaké prohlížeče a v jakých verzích jsou podporovány plně, částečně nebo vůbec nepodporovány, stejně můžeme narazit na další technická omezení a specifika. Můžeme zjistit, že jsme počítali pouze s používáním webu na počítači, ale uživatelé jej ve velké míře navštěvují pomocí mobilních telefonů, tabletů, chytrých televizí, herních konzolí, či dokonce zařízení, o jejichž existenci jsme v době návrhu ani nevěděli. Může nás zaskočit zásadní změna technologického vývoje a náhlý pokles dostupnosti donedávna široce používaných technologií (např. Flash nebo Java), a naopak prudký nárůst všeobecné podpory technologií ještě včera spíše minoritních a v praxi nepříliš použitelných (např. vektorová grafika, animace).

U cílové skupiny můžeme narazit i na překážku ve formě nízké přenosové rychlosti či omezení objemu dat, s níž jsme nepočítali. Dá-li se to zachránit optimalizací dat, mohou to napravit vývojáři — v opačném případě se může stát, že musíme přehodnotit i celkovou koncepci a styl, protože jednostránkový web obsahující několik desítek obřích fotografií, videí a aktivních map, který tak skvěle vypadá a svižně funguje s naším gigabitovým připojením optickým kabelem, může i přes veškerou optimalizaci uživatelům v jejich méně výkonném laptopu leda tak úspěšně složit prohlížeč nebo během chvilky vyčerpat týdenní datový limit mobilního telefonu.

Můžeme nečekaně narazit na výkonnostní strop cílových zařízení, když zjistíme, že složitý výpočet či efektní animace, které na našich moderních strojích běží zcela hladce a nikoho ani nenapadlo o jejich funkci přemýšlet, se na starších strojích u významné části naší cílové skupiny staly noční můrou a nenáviděným strašákem, který po otevření webu zablokuje počítač na dlouhé minuty a odežene i věrné a loajální uživatele ke konkurenci. Tady přichází nejvíce ke slovu optimalizace, ale hlavně škálování a metody jako progressive enhancement (viz), tedy úprava klientské aplikace do takové podoby, kdy i nejméně výkonná zařízení dostanou dostatečně použitelný, i když nějak zjednodušený a ořezaný výsledek — a zařízení nejvýkonnější si mohou užít dodatečné efekty a nejvyšší kvalitu prezentace.

Dalším častým technickým limitem části uživatelů je kvalita zobrazovacího zařízení. Někteří mohou mít méně kvalitní LCD displej s nízkým kontrastem, na kterém se slévají podobné barvy — ty světlejší se zobrazují jako bílá a všechny tmavé jako jednolitá šedá. Jiní zase mohou mít ještě starý CRT monitor, kde je naopak typický příliš vysoký kontrast, ztmavující barvy a slévající vše do temných ploch. Mohou používat tablet na denním světle a z tmavého a málo kontrastního designu stránek vidět nejvíce vlastní odraz ve skle displeje. Mohou zobrazovat web na velkoplošném projektoru, který se k barvám a kontrastům chová podobně jako již zmíněný přesvětlený nekvalitní LCD displej. Případně si zrovna budou tisknout výstupy webu na černobílé tiskárně a zmizelá barevná informace znehodnotí výsledek k nepoužitelnosti atd.

Na testování webu je užitečné mít zastaralý, ošuntělý stroj s nekvalitním displejem, přeskakující myší a klávesnicí, kde pár kláves nefunguje, připojený k internetu tím nejpomalejším a nejnespolehlivějším spojením, jaké jsme schopni vytvořit.

Samostatnou kapitolou je současná dostupnost serveru s webovou stránkou i všech v ní používaných služeb. Hlavně v případech, kdy se uživatel nachází za proxy serverem, firemním firewallem, připojuje se z kavárny či hotelu s omezenou konektivitou, ze země s cenzurovaným internetem atd. Tehdy se často stává, že správcem sítě byly zakázané některé internetové služby, jsou znepřístupněné některé porty či protokoly, mohou být zakázaná určitá URL či celé velké části internetu. V takovém případě může dojít k tomu, že se k uživateli dostane jen část kódu stránky — v lepším případě „pouze“ nebude ve stránce fungovat nějaká vložená informace (obrázek, mapa, video apod.), v horším případě se nenačte nějaká důležitá knihovna, skript či styl a stránka se stane zcela nefunkční. Pokud zjistíme, že podobné problémy u nějaké důležité cílové skupiny mohou nastávat, vyhněme se raději kompletování stránky z různých zdrojů, načítání knihoven z externích zdrojů (CDN) a raději vše, co jde, umístěme na vlastní server, abychom zajistili, že se všechno bude načítat z téhož místa a uživatel tak dostane buď všechno, nebo nic.

S podobnými problémy se setkáme i v případě, kdy si uživatelé budou chtít webovou stránku uložit na svůj disk či lokální server a používat ji offline. Některé součásti se nemusí uložit a nadále se po otevření lokální kopie stránky budou načítat z externích zdrojů — takže nebudou v offline režimu (tj. bez připojení k internetu) vůbec dostupné, případně je nebude možné načíst kvůli dnes již běžnému zabezpečení prohlížečů znemožňujícímu určité typy komunikace mezi různými servery či prostřednictvím rozdílných protokolů (tzv. Same-Origin Policy).

Pomocníčci

Nesmíme zapomínat na ještě jeden velmi nenápadný technický zádrhel, na který můžeme u svých uživatelů narazit a nevhodným designem či jeho implementací jim znepříjemňovat používání webu. Jde o všemožné technologické pomůcky nad rámec funkcí běžného prohlížeče: nadstandardní rozšíření, inteligentní správce hesel, automatické vyplňování formulářů, doplňování textů (autocomplete) nebo třeba automatické opravování chyb a překlepů (autocorrect). Tady naráží na potíže hlavně klientské skripty, řídící dynamické chování prvků stránek v prohlížeči. Pokud na sebe takové dva na sobě nezávislé automaty narazí, mohou nastat nepředvídané potíže a můžeme pozorovat prapodivně se chovající stránky. Pokud například formulář ve stránce obsahuje kontrolu platnosti a správnosti zadaných údajů (validace) a současně je aktivní nějaká autokorekční funkce v uživatelově počítači, může se stát, že se spolu budou tyto procesy o obsah přetahovat — že se třeba k našemu validátoru dostane text zadaný ručně klientem ještě dřív, než jej opravil jeho autokorekční algoritmus, takže naše stránka pracuje s jinou hodnotou, než uživatel vidí, a je velmi těžké odhalit případné chyby a příčiny podivného chování.

Jednou jsem na vlastní oči viděl doslova souboj dvou takových automatů: po zadání částky do formuláře ji autokorektor v počítači ihned upravil do svého standardního formátu, který se ale nelíbil skriptu ve stránce a automaticky ji přeformátoval do tvaru, který měl definován jako za standardní zase on. Což ovšem autokorektor považoval za nově zadanou hodnotu a opět ji opravil podle svého. A tak stále dokola. V reálu to vypadalo tak, že když někdo do příslušného políčka napsal jakékoli číslo, spustila se nekonečná smyčka, v níž v políčku bleskurychle problikávaly ony dva různé formáty, a nebylo možné se stránkou cokoli dalšího udělat, než ji zavřít, a bylo nezbytné autokorektor v systému vypnout, aby se formulář dal vůbec vyplnit a odeslat.

Častým problémem bývají fomuláře obsahující adresu či telefonní čísla rozdělená do jednotlivých vstupních polí velmi detailně — místo adresy je zde zvlášť pole pro ulici a zvlášť pro číslo domu, je tu oddělené pole pro telefonní předvolbu a číslo samotné atd. To má často za následek znefunkčnění pomocníků umožňujících automatické vyplnění osobních údajů ve formulářích. Takový vyplňovač dokáže vložit do pole Adresa uživatelem přednastavený údaj Severní ul. 32a, ale samostatná pole Ulice a Číslo domu už vyplnit nedokáže. Podobně u telefonních čísel, málokterý správce osobních údajů vyplní korektně telefonní číslo, pokud jej formulář ve stránce požaduje zadat do dvou samostatných polí Předvolba a Místní číslo. Uživatel pak musí tyto údaje zadávat ručně. A pokud je na služby tohoto automatického vyplňování údajů zvyklý, může to považovat za velkou nepříjemnost a zdržování.

Každý formulář obsahující osobní data testujme i s použitím funkce automatického vyplňování v prohlížeči.

Ještě zákeřnější může být situace u správců hesel. Tyto nástroje jsou stále populárnější, je to téměř jediná v praxi použitelná možnost, jak si udržet dostatečně silná a bezpečná hesla u všech těch desítek až stovek webů a služeb, které používáme. První potíž může nastat, když náš web bude mít odlišně pojmenovaná pole s identifikačními údaji na stránce registrace nového uživatele (resp. na formuláři pro nastavení hesla) a jinak na přihlašovací (login) stránce. Automatický správce hesel obvykle pracuje tak, že rozpozná-li v datech odeslaných formulářem na nějaké stránce přihlašovací údaje, nabídne jejich uložení pro pozdější použití. Což přestane korektně fungovat, pokud registrační a přihlašovací stránka používají různá pole pro identifikaci uživatele (např. jedna email a druhá login). Správce hesel navíc tyto přihlašovací údaje dokáže správně párovat jen v rámci jedné domény — pokud se nám povede registraci, přihlášení i samotný obsah webu umístit na různé domény, funkci správce hesel prakticky zcela znemožníme a uživatelé nás asi budou nahlas proklínat.

Jeden velký národní internetový portál, který nabízí velké množství služeb a sdružuje pod svou hlavičkou dost webů, jednou sjednotil přihlašování uživatelů na všech webech a ve všech službách a všechno přihlašování přesměroval na jedno místo. Portál funguje na doméně ve tvaru portal.xx, jeho jednotlivé služby na doménách třetí úrovně typu sluzba.portal.xx. Přihlášení na mateřském webu tak bylo funkční pro všechny služby. Nové sjednocené přihlašování se však objevilo na úplně nové doméně loginportal.xx, což je z pohledu správce hesel úplně jiný web, který s portal.xx nemá vůbec nic společného. A tak se pro celý portál a všechny jeho služby manažery hesel staly přes noc nepoužitelnými. Což kromě nespokojenosti části uživatelů může vést k tomu, že uživatelé začnou častěji používat slabší a zapamatovatelnější hesla, která mohou snáze zadávat postaru ručně, a tím dojde i k poklesu bezpečnosti celého portálu.

Nezapomínejme ani na dynamické chování stránky — pokud navrhneme přihlašovací formulář, který se zobrazí pouze po najetí kurzorem, a když uživatel odjede myší pryč, zase zmizí, opět je to překážka v použití správce hesel. Pokud jej uživatel nemůže aktivovat klávesovou zkratkou nebo v kontextovém menu v místě kurzoru, musí pro tento úkon odjet kurzorem někam do menu, což způsobí zmizení přihlašovacího formuláře, který pak správce hesel nemůže vyplnit.

Vývoj a trendy

Musíme neustále sledovat vývoj technologií a všechny trendy a módní vlny, které naše cílové skupiny ovlivňují někdy i měrou velmi podstatnou. Pro některé uživatele je dodnes třeba e-mail stále novou technologií, s jejíž existencí se pořád ještě smiřují a stále ji nejsou schopni ani moc ochotni vhodně používat — a pro jiné je týž e-mail už technologií dávno mrtvou, vhodnou leda pro starší a pokročilé. Přibývá pak množství lidí, kteří mají účty i na několika sociálních sítích a intenzivně komunikují primárně na nich, přičemž e-mail moc nepoužívají. A pokud se na jednom projektu potkají takové protichůdné postoje (třeba na straně klienta a na straně typické cílové skupiny), je zaděláno na budoucí komunikační problém. Zatímco klient se horko těžko smiřuje s jakoukoli elektronickou komunikací a kolikrát si celé týdny ani nevzpomene, že by měl zkontrolovat došlé e-maily, natož je obratem vyřizovat (ano, i v roce 2015 pořád takové znám), cílová skupina jeho mladých zákazníků očekává komunikaci především na sociálních sítích, o jejichž existenci klient nemá ani potuchy, natož aby je v podnikání nějak aktivně používal. Je pak úkolem designu v případě potřeby doporučit i vhodné komunikační strategie a třeba i zřetelně definovat klientovi potřebu najmout si na komunikaci na sociálních sítích zkušeného specialistu.

Během vývoje webu se kdysi populární a módní nástroj může ztratit v propadlišti dějin a jeho místo zaujmout úplně jiný, s nímž jsme ani nepočítali. Při vstupu na nový trh zjistíme, že komunikace na jedné sociální síti, která se osvědčila v jedné zemi, nebude v jiném regionu vůbec fungovat, protože dotyčná síť je zde prakticky nepoužívaná — ale má zde naopak velkou popularitu síť či nástroj, který je v původní zemi takřka neznámý. Může se snadno stát, že technologie, kterou jsme na počátku pominuli jako velmi okrajovou, náhle zažije nečekaný boom a pak třeba kvůli spuštění nové generace mobilních sítí se během jediného roku významně přelije návštěvnost z dosud dominantních stolních počítačů do přístupů z mobilních zařízení.

Jakékoli obecné poučky mají v tomto ohledu jepičí život a vše, co platilo jeden rok, může být v roce následujícím postaveno na hlavu. S každou novou zakázkou a průběžně, přinejmenším s každým rokem, prověřujme a přehodnocujme své zavedené postupy a „osvědčené“ návrhové vzory, zda už náhodou nezastaraly a nezaslouží si aktualizaci. Zkontrolujme si, zda všechny někdejší předpoklady stále platí a zda některé ze základních pilířů, na kterých své projekty stavíme, už nejsou ztrouchnivělé či zda je písky času nenápadně nepoponesly směrem k oblasti historického zapomnění. Možná že pekař může péct stejný osvědčený chleba jako před dvaceti lety a být stále oblíbený a úspěšný; možná švec může šít pořád stejné boty jako před desetiletím a stále prosperovat. Ale málokdo může úspěšně dělat weby stejně, jako je dělal před deseti lety.

V době psaní této knihy například zažívá velký boom registrace a přihlašování pomocí velkých sociálních sítí. Místo toho, aby uživatel nové služby musel vyplňovat registrační formulář, zadávat svá osobní data a vymýšlet si přihlašovací jméno a další nové bezpečné heslo, může jen kliknout na tlačítko a přihlásit se prostřednictvím svého účtu na Facebooku, Twitteru či jiné síti. Je dost možné, že takový postup bude za pár let zase úplně zastaralý, ale v současnosti je velice efektivní a praktický. A pokud nyní někdo vytváří novou internetovou službu a uživatele nutí podstupovat klasickou registraci a možnost přihlášení přes sociální sítě jim ani nenabídne, je sám proti sobě a především proti velké skupině svých vlastních uživatelů.

Zdravotní dispozice

Zdravotní a fyzické dispozice a indispozice uživatelů a přizpůsobení se jim na webových stránkách jsou samy o sobě obrovské téma, jemuž se (vedle všech ostatních zmíněných limitů) věnuje primárně celý velký samostatný obor přístupnosti (accesibility). Není v možnostech ani cílem této knihy se mu věnovat hlouběji, natož podrobně a do jemných detailů. Pro zájemce je ale k dispozici obrovské množství zdrojů a informací. Zajištění základní přístupnosti webu i pro jakkoli handicapované uživatele by pochopitelně mělo být zájmem designéra i vývojářů v každém případě, protože nikdy předem nevíme, zda zrovna takový uživatel nebude pro provozovatele webu lukrativní.

Bohužel někdy jsou omezení a nároky kladené na maximálně přístupný web poněkud v rozporu s požadavky na moderní, dynamický a třeba i zábavní web. A kde zadavatel i většinový uživatel očekávají ohromující grafiku, animace, interaktivní prvky, je potřeba handicapovaným uživatelům poskytnout spíše prosté textové informace bez všech efektů a multimediálních nadstaveb. Je proto potřeba dobře zvažovat, nakolik jsme k tomu svolni a vyplatí se nám oželet jedno, či druhé. Naštěstí moderní webové technologie jdou těmto požadavkům vstříc, a je tak stále snazší vytvářet přístupné weby, které jsou přesto multimediálně bohaté a vizuálně zajímavé. Stačí k tomu jediná věc:

Vytvořme web nejprve jako zcela funkční „holé“ HTML bez všech nadstaveb.

Takový web pak může bez problémů použít většina — nevidomých, slabozrakých, imobilních, neslyšících — i jakkoli jinak handicapovaných uživatelů. A všechny ty nadstavby, vizuální efekty, interaktivitu, animace atd. pak dokáží stránkám dodat přídavné technologie jako CSS, Javascript ad. Je to především opět další forma aplikace metod progressive enhancement, příp. graceful degradation (viz). Ne vždy je to ale možné beze zbytku aplikovat a např. web celý postavený na AJAX technologii (komunikace stránky se serverem na pozadí prostřednictvím Javascriptu) by se někdy musel pro tento účel zcela a zásadně přepracovat a přeprogramovat. Je pak na rozhodnutí našem a hlavně klienta, nakolik je pro něj důležitější obecnější přístupnost pro handicapované minoritní skupiny uživatelů, a nakolik spíše lepší použitelnost pro uživatele většinového. V některých případech je možné to v rozumné míře vybalancovat, v jiných je nezbytné učinit zásadní rozhodnutí a vyloučit jednu, či druhou možnost.

A v některých případech je pak taková volba notně omezená, protože požadavek přístupnosti je nadiktován zvenčí, není možné o něm diskutovat a design i technologie se mu jednoduše musí přizpůsobit. Jde především o různé weby institucí, úřadů a organizací, jimž pravidla přístupnosti ukládá legislativa (místní, oborová, národní, mezinárodní), platné normy, vyhlášky a zákony. Tady designér a vývojáři nemají moc možností volby a web musejí těmto požadavkům přizpůsobit. Ze své praxe ale mohu říci, že to je rozhodně dobrá zkušenost a každý tvůrce webu by si aspoň jedním takovým projektem měl projít — přinejmenším proto, aby zjistil, že přístupnost není až tak velký strašák, jak se zdá, a proto, že jej takový projekt naučí dělat weby na pohled moderní, dynamické a interaktivní, a přitom přístupné s minimem námahy a omezení.

Jaké jsou nejčastější z těchto požadavků a omezení daných různými handicapy, s nimiž se setkáme? Protože web je především médium komunikující vizuálně, největší skupinou jsou uživatelé s vadami zraku: nevidomí, slabozrací, uživatelé s poruchami vidění a barvocitu. Problémům stránek souvisejícím s touto oblastí se všechny normy a pravidla přístupnosti věnují jednoznačně nejvíce.

Pro nevidomé musí být obsah stránek primárně použitelný s čtečkou, tedy hlasovým výstupem, případně i s braillským řádkem (mechanické zařízení převádějící text do dotykového písma). Stránky musejí být dobře strukturované, uživatel se musí snadno přesouvat mezi hlavními sekcemi obsahu, musí se jednoduše dostat k navigaci a na webu se pomocí ní dobře orientovat. Všechny podstatné informace musí být dostupné v textové podobě, multimédia nesoucí podstatnou informaci musejí mít textovou alternativu, navigace nesmí být zcela závislá třeba na pohybu kurzoru po obrazovce.

Pro slabozraké musí stránky používat dostatečně velké písmo, musí být zcela funkční při vnuceném zvětšení (zoom) písma či celé stránky, v žádném případě nesmí nijak zvětšení obsahu aktivně bránit. Sdělované informace musejí být dostatečně kontrastní vůči pozadí. Řádky textu ani po zvětšení nesmí být příliš dlouhé a prohlížení stránky musí být dobře použitelné se softwarovou lupou (po stránce se pohybující výřez zvětšený na velikost vhodnou pro uživatele).

Pro uživatele s poruchami vnímání barev musí mít obsah stránek dostatečný kontrast i při různém posunu barevného spektra či v monochromatickém zobrazení. Žádné sdělení nesmí být závislé pouze na barevné informaci, důležité prvky stránek musí být možné odlišit i bez ohledu na jejich barvu.

Pro uživatele neslyšící musí stránky používat hlavně jednoduchý a snadno srozumitelný jazyk a přehlednou a návodnou navigaci (vnímání jazyka u osob od narození neslyšících je velmi odlišné, nedokáží mnohdy rozumět jemným nuancím řeči, složitějším abstrakcím či nejasným náznakům).

Pro uživatele jinak handicapované je podstatná hlavně snadno dostupná navigace a pohyb ve stránce. Stránka nesmí vyžadovat okamžitou reakci, na každou akci musí být dostatečný časový limit. Ve stránce nesmí nic blikat nebo se rychle a často měnit — např. výrazné rychle periodické změny opakované několikrát za sekundu mohou u některých citlivých jedinců aktivovat epileptický záchvat apod.

Obecně je pro všechny důležitá dobrá správná struktura a sémantika obsahu stránek: titulky různé úrovně označené příslušnými značkami určenými pro odpovídající úroveň nadpisu, správně vyznačená navigace, odkazy dobře odlišitelné od ostatního textu a vhodně a jednoznačně pojmenované — matoucí mohou být jak stejně pojmenované odkazy vedoucí na různá místa (častý problém s odkazy pojmenovanými „zde“ nebo „klikni“ apod.), tak i různě pojmenované odkazy vedoucí na totéž místo (to hodně ztěžuje orientaci třeba při použití hlasového výstupu).

Pro podrobnější informace týkající se přístupnosti je nezbytné si podle potřeby nastudovat příslušné národní či oborové normy a vyhlášky, případně se seznámit s nejznámějšími zdroji, které se problematice přístupnosti věnují — především WCAG (Web Content Accessibility Guidelines), Blind Friendly Web, americkou Section 508 ad.

Okamžité dispozice

V případě indispozic a handicapů zdravotních jde vesměs o trvalé potíže. Ale daleko běžnější jsou všemožné indispozice uživatelů krátkodobé a okamžité, o nich však nikoho moc často mluvit neuslyšíme. Zatímco problematice uživatelů s trvalou poruchou zraku, sluchu či vnímání obecně jsou věnovány tisíce webů, knih, a dokonce samostatné zákony a vyhlášky, jen velmi obtížně najdete zmínku o uživatelích unavených, spěchajících, ospalých, nemocných, nesoustředěných, roztěkaných atd.

Jde přitom o mnohem zásadnější a řádově častější problém. Dovolím si zde připomenout úvodní kapitolu této knihy, která uvodila již zmiňovaný paradox perspektivy. V souvislosti s designem o takových věcech prakticky nikdo nemluví, já je ale považuji za docela zásadní a stěžejní problém, se kterým se designéři i jejich klienti setkávají nevědomky docela často. Připomeňme si tu situaci: na jedné straně je provozovatel webu, pro nějž je jeho byznys středobodem světa, hlavní náplní jeho podnikání, na něž myslí a soustředí se celý den — a na straně druhé uživatel, pro nějž je totéž místo jenom nepatrnou zastávkou v běhu dne, jedním zapomenutelným webem z mnoha tisíc, které cestou potkal. Střed jeho světa je úplně jinde a priority leží všude možně, jen ne tam, kde jsou priority provozovatele onoho jednoho konkrétního webu.

Pokud na tento rozpor zapomeneme, pokud se necháme stáhnout k perspektivě svého klienta a začneme si myslet, že většina návštěvníků webu je právě plně soustředěna na problematiku jeho kuličkových ložisek, že každý, kdo na web právě zabrousil, je plně přeladěn na dané téma a orientuje se v problematice stejně dobře a samozřejmě jako provozovatel webu, který jím žije celý a každý den, zaděláváme si na problém mnohem větší a závažnější, než kdybychom při designu stránek ignorovali všechny uživatele handicapované zdravotně a technicky dohromady. Neboť těch přece jen bude většinou stále výrazně menší procento než oněch uživatelů nehandicapovaných — ale nesoustředěných, roztěkaných a unavených.

Vždy si raději představujme, že náš web, zasvěcený třeba oněm zmíněným kuličkovým ložiskům, má náš uživatel otevřený kdesi mezi patnácti dalšími záložkami se stránkami věnovanými aktuálním zprávám a předpovědi počasí a e-shopem s hnojivem na jehličnany; že náš uživatel právě po telefonu řeší s manželkou nákup na večeři a současně plánuje, kam pojedou na dovolenou; že má otevřených pět dalších webů našich konkurentů, že vedle v Excelu vyplňuje několik objednávek pro své vlastní zákazníky a pod ním má rozepsaný e-mail šéfovi ohledně zvýšení platu.

Nejsme středobodem uživatelovy pozornosti.

Raději nikdy nepředpokládejme jeho plné soustředění, nikdy v obsahu nepředjímejme věci, které nám mohou připadat samozřejmé. Jasně a srozumitelně popišme, kde se uživatel ocitl, proč zde je a co zde může získat, jasně sdělme, kde přesně se nalézá naše firma, provozovna či jiné pole působnosti (protože nevíme, na kterém konci světa se on právě nachází) a jaké služby nabízíme. Nikdy neočekávejme, že uživatel ví všechno, co víme my, že sdílí naše zkušenosti, znalosti a zájmy. Nepředpokládejme, že si pamatuje něco z poslední návštěvy nebo z předchozí stránky, že vůbec viděl informace, o kterých jsme přesvědčeni, že je nemohl minout. Mohl a minul. Vlastně si není ani jistý, jestli my jsme my, nebo si nás už neplete s konkurencí ve vedlejší záložce. Buďme proto na webu srozumitelní, nekomplikovaní, sdělujme informace přímočaře a snažme se udržet návštěvníkovu pozornost. A co nejsnáze a co nejrychleji jej veďme k cíli. My se možná chceme chlubit svou úžasnou firmou, prodejnou a nabídkou a popisovat všem kolemjdoucím všechny báječné detaily a vychytávky — ale návštěvníci to chtějí mít především rychle za sebou a dostat se rychle k tomu, proč sem přišli.

Jeden z hlavních požadavků na web je tady zřejmý: nesmí uživatele zdržovat. On si sem nepřišel hrát a bavit se, chce náš web či aplikaci použít a nemá čas ani chuť na zbytečnosti. Zábava a hra může být volitelné zpestření až kdesi v druhém plánu, ale nesmí být na překážku hlavnímu cíli, k němuž se uživatel chce dostat — a kam se jej vší svou prací koneckonců snažíme dostat i my. A kde jej ve výsledku především potřebuje mít provozovatel, který celou tu taškařici provozuje a platí. Nikdo vlastně netouží po ničem jiném.

Odstraňme proto návštěvníkům z cesty všechny překážky a nevytvářejme další. Vše zbytečné musí pryč. Nikdo nestojí o dlouhé čekání na načtení čehokoli, o zdlouhavé úvodní animace, zbytečné úvodní obrazovky (splash screen), pomalé posouvání stránky, zbytečné mezikroky nebo vsouvání nevyžádaných informací do jeho akcí. Nepřekrývejme obsah stránek „úžasně výhodnými“ nabídkami na předplatné, instalaci mobilní aplikace nebo akční týdenní slevy, sotva se návštěvník na webu objeví. A rozhodně ne, pokud je to návštěvník zcela nový, který zde ještě nikdy nebyl.

Poslední dobou se mi stává velmi často, že se dostanu přes nějaký odkaz — třeba na zajímavý článek — na úplně cizí web, a ještě než se stačím rozkoukat, celou stránku překryje obří billboard s nabídkou, abych se zaregistroval k tomu či onomu, že to pro mě bude nesmírně výhodné. Já ani pořádně nevím, kde jsem se to vlastně ocitl, nikdy jsem zde ještě nebyl a dost možná už se zde v životě podruhé neocitnu. Jako když by turista putující po Mexiku zastavil u náhodného obchůdku kdesi u cesty a sotva otevře dveře, připlácnou mu na obličej reklamní plakát s nabídkou pytle obilí zdarma, když si čtyřikrát po sobě objedná zásilku čerstvých slepic…

Takové marketingové akce musíme správně cílit, vybírat si pečlivě místní a stálé zákazníky, a „turistům“ a ostatním náhodným kolemjdoucím je vůbec nenabízet.

Třetí zákon designu

Mnohokrát jsme tu teď zopakovali, jak musíme na uživatele brát neustále ohled, vycházet mu vstříc a podřizovat svůj návrh jeho potřebám. Ovšem platí to jen do určité míry, především pro onu technickou složku designu ovlivňující hlavně přístupnost a použitelnost. Už v daleko menší míře (pokud vůbec) to platí pro tu druhou, stejně důležitou část designu, pro složku kreativní. Zde se naopak názory, připomínkami a vkusem uživatelů nesmíme nechat už příliš ovlivňovat.

Udělejme malou odbočku a připomeňme si zde dva „zákony“ designu, které jsme zmínili v úvodních kapitolách knihy.

1. zákon designu: Klient neví, co chce. A také jsme strávili několik dlouhých a důležitých kapitol tím, jak tuto chybějící informaci zjistit, vypátrat a z hlubin podvědomí klienta vytěžit. Pokud jsme svou práci odvedli dobře, tak nyní jsme to my, kdo ví zdaleka nejlépe, co náš klient skutečně chce. Víme velmi přesně, co potřebuje, a máme nějaký plán, jak toho dosáhnout.

2. zákon designu: Uživatel neví, co chce. Ovšemže. Výzkumu trhu, definování cílových skupin, co nejpřesnějšímu popisu vzorových postav a scénářů jejich chování jsme věnovali přinejmenším stejně velkou pozornost. Budoucí uživatelé webu jsou individuální osobnosti, každý je jiný a unikátní a každý očekává něco trochu jiného. Ale jako celek, shromážděni do davu a rozděleni do cílových skupin, mají určité jednotící rysy, společné jmenovatele a zájmy, a dokonce existuje někdo, kdo je dokáže přesně pojmenovat a vytvořit si podle nich fiktivní osoby, které zná do nejmenšího detailu jako vlastní příbuzné a dokáže jim navrhnout produkt přímo na tělo. Jsme to opět my, designéři. My po svém pečlivém průzkumu, výzkumu a analýzách známe budoucí uživatele lépe než oni sami sebe. Zase jen my dokážeme formulovat přesně, co potřebují, a také v jejich případě máme představu, jak toho dosáhnout.

Po všem, co jsme si dosud na stránkách této knihy řekli, ujasnili a se všemi kroky, které jsme si uvedli, proto můžu se vší profesní odpovědností na tomto místě rovnou vyslovit i zákon třetí, který s předchozími dvěma přímo souvisí a doplňuje je do finálního celku:

3. zákon designu: Ze všech zúčastněných ví designér nejlíp, jaký produkt potřebuje klient i uživatelé.

Rozhodně to ví lépe než klient, lépe než uživatelé i lépe než vývojáři. Nebo by rozhodně měl. Abychom předešli případným nedorozuměním, upřesněme zde jeden zásadní předpoklad: mluvíme o dobrém, profesionálním designérovi. Jistě je spousta lidí, kteří jako designéři pracují, ale tato informace jim chybí nebo ji nemají kompletní — a potažmo bez této znalosti dokáží navrhnout dobrý a plně funkční web pouze velkou náhodou a shodou okolností. Nicméně pro návrh nenáhodný, který máme plně pod kontrolou, jsou tyto dvě informace naprosto zásadní. Možná bychom si mohli dovolit formulovat i opačný vztah: pokud přesně víme, co potřebuje klient i uživatelé, jsme automaticky dobrý designér. Protože s použitím těchto informací a s dodržením požadavků z nich plynoucích téměř nejde navrhnout špatný a nefunkční produkt.

A jelikož jsme to většinou pouze a právě my, kdo má k dispozici všechny nezbytné informace a současně i příslušné profesionální znalosti a zkušenosti, jsme to také pouze my, kdo může o všech detailech designu zodpovědně a kvalifikovaně rozhodovat. Pochopitelně, můžeme (a měli bychom!) stále naslouchat připomínkám a nápadům ze všech stran — od klienta, od uživatelů, od kolegů z realizačního týmu — ale musíme je brát pouze jako nápady ke zvážení. Nápady, které budeme pokládat za zajímavé a přínosné a zvážíme jejich použití, nebo nápady scestné a protichůdné celkové koncepci, které musíme buďto rovnou ignorovat, nebo je alespoň oponovat a vysvětlovat jejich autorům, proč nejsou vhodné a jaká negativa do projektu vnášejí.

Není to vždy jednoduchá práce (obzvlášť u připomínek ze strany klienta nebo našich nadřízených), ale je to nedílnou součástí práce každého designéra, který pracuje v nějakém týmu a nenavrhuje jenom akademické koncepty do šuplíku. Klient i nadřízení profesionální přístup designéra snad brzy pochopí a budou respektovat, že on dělá naprosto vše jen pro dobro výsledného projektu. A pokud nějakou myšlenku odmítá, není to v žádném případě kvůli jeho lenosti nebo uražené designérské ješitnosti, ale pouze a právě proto, že by její použití bylo v neprospěch celku, šlo by proti zájmům klienta nebo budoucích uživatelů. A jako dobří designéři pochopitelně tuto premisu musíme sami přísně dodržovat a nezavdat nikdy nikomu příčinu k pochybování o tom, zda naše motivace nejsou přece jen jiné.

Zrádnost změn, riziko redesignu

Pokud vymyslíme pro web nějaký styl, ustanovíme nějakou koncepci a nosné myšlenky, snažme se jich držet. Nenechejme si do skutečně podstatných věcí jen tak mluvit — ani uživateli, ani klientem, ani kolegy a nadřízenými. Pokud je to nezbytné, pečlivě a bez emocí vysvětleme všechny negativní důsledky a souvislosti, kvůli kterým přednesený nápad nepovažujeme za vhodný k použití. A naopak se nebraňme použití nápadů, které jsou buďto neškodné a ničemu podstatnému neublíží (ale někoho potěší), nebo jsou vyloženě ku prospěchu věci.

Zakažme si také kopírovat cokoli, co je jinde úspěšné, jen proto, že „jinde to funguje“. I kdyby taková věc mohla opravdu fungovat i u nás, mysleme stále také na náš vlastní unikátní styl, který náš produkt vymezuje na trhu a odlišuje od ostatních. Třeba jsou naši uživatelé u nás právě kvůli naší odlišnosti a proto, že řešení konkurence jim z nějakého důvodu nevyhovuje.

Pokud klient ovládl nějakou tržní niku, nikdy ho nenuťme ji opustit!

V roce 2014 se vývojáři prohlížeče Firefox rozhodli k razantnímu a diskutabilnímu kroku: změnili jeho rozhraní tak, že v mnoha ohledech kopírovalo nové rozhraní prohlížečů Chrome a Safari. To ovšem vyvolalo masivní bouři nevole mezi jeho skalními uživateli. Mnozí z nich totiž dávali přednost Firefoxu hlavně proto, že držel původní koncepci rozhraní, zatímco konkurenční prohlížeče přišly s koncepcí rozhraní zcela nového, minimalističtějšího, zjednodušeného, méně konfigurovatelného. Firefox předtím ztratil významnou pozici na trhu a stal se postupně prohlížečem minoritním — ovšem vývojáři možná mylně zaměnili časovou korelaci za příčinu a důsledek a usoudili, že jejich prohlížeč ztrácí právě kvůli odlišné a „zastaralé“ koncepci rozhraní, a rozhodli se jej připodobnit konkurenci. Ovšem jak poté řekli mnozí jejich uživatelé: „Pokud bych chtěl Chrome, nainstaluji si Chrome. Já ale pořád používám Firefox. Proč asi?“ V důsledku pak touto změnou Firefox přilákal výrazně méně nových uživatelů, než o kolik zhrzených příznivců se jí připravil, a jeho pozice na trhu ještě výrazněji poklesla.

Ještě nikdo neprorazil na trhu lepším a důslednějším kopírováním úspěšné konkurence. V podnikání vždy vyhrávají ti, kdo přicházejí s novými nápady, vlastními koncepcemi a nestandardními řešeními. Kopírování konkurence někomu možná pomůže držet se nějakou dobu ve vleku za úspěšným lídrem. Ale rozhodně se touto strategií sám lídrem nikdy stát nemůže. Jaké jsou ambice našeho klienta? Jenom se udržet pevně na chvostu konkurence?

Máme-li nějakou vlastní koncepci a styl, držme se jich. Nebo vymysleme styl jiný, pakliže usoudíme, že bude pro daný účel vhodnější a úspěšnější. Ale nikdy neměňme styl jen proto, že někomu připadá, že jiný styl je jinde úspěšnější. To je velmi vadný a mnohdy přímo vražedný argument. Příkladů firem a projektů, které skončily na smetišti dějin poté, co opustily vlastní osvědčený koncept a začaly se snažit kopírovat někoho jiného, lze najít bezpočet. A už vůbec neměňme styl jen proto, že „už je to moc dlouho stejné“. Je-li úspěšný, nesahejme do něj, jak jen to je možné. Styl webu je něco jako firemní identita, mnoho návštěvníků si jej pamatuje a pozná mezi jinými hlavně kvůli typickým barvám, grafickým prvkům, uspořádání. Vzít jim to a učit je poznávat mezi konkurencí zase něco úplně nového je vždy velké riziko. Navíc vytvořit něco skutečně dobře fungujícího a úspěšného je náročný úkol s tisícem faktorů, které se mohou pokazit na tisíce způsobů. Když už se jednou někomu povedlo celým martyriem zdárně projít a skončit s dobrým a fungujícím produktem, je holý nesmysl se jen tak pro nic za nic rozhodnout všechno zahodit a zkusit štěstí znova, jinak. Šance, že se to povede stejně dobře (nebo dokonce lépe) i opakovaně, klesá geometrickou řadou. Co tím může klient získat a opravdu to stojí za ten prakticky bezdůvodný risk?

Dobrý trenér nemění úspěšný tým, dobrý designér nezahazuje úspěšný design.

Nenechejme se příliš ovlivňovat ani reakcemi uživatelů, které se k nám dostanou. Vždy mějme na mysli relativní zastoupení takových stěžovatelů: píše nám jeden, dva, deset naštvaných uživatelů, jak moc jsou nespokojeni s naším designem? Dobrá, ale co ostatní? Sto tisíc dalších nový web denně používá a podle statistik se významná část vrací a návštěvnost průběžně stoupá? Pak jsou nespokojené reakce oné setiny procenta návštěvníků zcela irelevantní a s klidem je ignorujme. Píše nám ale deset nespokojených uživatelů o tomtéž a statistiky návštěvnosti spíše stagnují? To je možná známka problému, který je třeba řešit. Sype se na nás lavina rozhořčené kritiky, na internetu vznikají diskusní skupiny o objemu až jednotek procent počtu našich návštěvníků, organizují se dokonce masové petice? To jsme asi udělali něco opravdu moc špatně.

Podobné masové akce jsou ale opravdovou výjimkou. Daleko častěji se setkáme s individuálními stížnostmi několika jednotlivců, které jsou ale standardní součástí procesu tvorby a nelze se jim asi vyhnout. Jinými slovy, ať uděláme cokoli, vždy přijde pár nespokojených reakcí. Naučme se je ignorovat, dokud jich není nějaký významný počet k témuž tématu — pak stojí rozhodně za prověření a nějakou naši reakci. Vždy ale mysleme na to, že nespokojenost a rozhořčení vývojářům obvykle sděluje řádově větší procento nespokojených uživatelů, než kolik pochval píší uživatelé spokojení.

Jedna pochvala od uživatelů vyvažuje na tucty stížností a kritik.

Spokojený uživatel totiž náš web jednoduše používá a nemá potřebu nám to sdělovat. Nespokojený uživatel má tuto potřebu mnoho-mnohonásobně vyšší. Mysleme vždy na to, že majoritu našich uživatelů tvoří tzv. šedá masa (gray matter), mlčící většina uživatelů, a jejich spokojenost či nespokojenost poznáme nejlépe z výstupů analytických nástrojů a statistik návštěvnosti. Došlé reakce v e-mailu a na sociálních sítích nebývají příliš relevantní. A s pohledem na výše řečené musíme pro účely srovnání došlé pozitivní reakce násobit deseti a ty negativní deseti dělit, máme-li jim přikládat nějakou relevanci. Pokud ale i potom ty negativní nad pozitivními převažují, můžeme si začít myslet, že jsme udělali něco skutečně špatně.

Míň je víc

Nenapadá mě teď žádná jiná profese na světě, u které by tak jako u designu a potažmo tvorby webů (nebo jiných aplikací) byla tak významným problémem nadprodukce. Už vám někdy zkomplikovalo život, že vám obchodník přibalil navíc i pár věcí, které jste si neobjednali? Vadilo někomu, že stavitel za den postavil moc velký kus domu, že lékař ošetřil příliš mnoho pacientů? Asi těžko. Ale to, že designéři někomu vymysleli na web příliš mnoho věcí, že programátoři vytvořili dvakrát víc udělátek, než museli, že copywriter dal na stránky víc textu, než bylo nezbytně nutné, to jsou medvědí služby, které neustále milionům lidí život komplikují a ve výsledku zhoršují kvalitu mnoha webů a aplikací. A chudáci provozovatelé o tom bohužel nemají často ani potuchy.

Pokud vás napadá otázka, proč by to měl být výjimečný problém zrovna u designu, proč by mělo vadit, že zrovna na webu někdo dostal víc, než chtěl, tak vězte, že to je otázka skutečně klíčová a jedna z nejdůležitějších. Jak jsme si zde už mnohokrát připomněli, práce designéra spočívá především v propojování. Designér hledá cesty a komunikační nástroje, jak co nejlépe spojit světy poskytovatelů služeb a jejich zákazníků, jak ideálně propojit potřeby uživatelů a cíle provozovatelů. Asi si každý správně tipne, že ideální cesta bude nejspíš ta nejkratší, nejrovnější a bez jakýchkoli překážek — zřejmá, jednoznačná, vedoucí přímo k cíli bez spousty křižovatek a neustálého přemýšlení a rozhodování, kudy se dát. A tady jsme zase u jádra pudla. Nemluvíme sice o skutečných cestách, ale o spojeních ve světě informací, ovšem je jasné, že výše uvedeným požadavkům na ideální spojení budou nejlépe vyhovovat komunikační cesty krátké a přímé, stručné, srozumitelné, pregnantní, intuitivní, rychle a snadno pochopitelné, bez rušivých vlivů a zbytečných odboček.

Zde je právě ten hlavní rozdíl: nevyžádaná nadprodukce nějakého obchodníka či stavitele znamená ve výsledku jen nějaké hodnoty vzniklé navíc. Ale nadprodukce designérů a programátorů znamená obvykle jen více překážek, odboček a křižovatek, víc rozhodování, přemýšlení, zdržování uživatelů na cestě k požadovanému cíli. Nadprodukce v designu hodnotu produktu snižuje. Čím víc obsahu, informací, grafiky, funkcí, ovládacích prvků do stránek dáme, tím víc snižujeme jejich použitelnost a potažmo užitnou hodnotu.

Důležitým úkolem designéra je najít optimální užitnou cestu a vše ostatní odstranit.

Plyne z toho jeden celkem zřejmý, ale podstatný závěr — platný ostatně pro všechny kreativní profese, jejichž smyslem je prezentace informací a zajišťování komunikace mezi lidmi, od interakčních designérů až třeba po autory projevů pro politiky — že podstatnou součástí tvůrčí práce je škrtání a zjednodušování. Cokoli designér navrhne, cokoli grafik nakreslí a cokoli copywriter napíše, by nakonec mělo projít eliminační fází. Tedy kritickým procesem, kdy se pokud možno objektivně, nezaujatě snažíme nahlédnout navržený výsledek očima cílového uživatele a nalézt v něm vše, co zde být nemusí. A to pak odstranit. A také odhalit vše, co je prezentováno zbytečně složitě, a pokusit se to zjednodušit.

Proč je v našem designu ten či onen detail, prvek, funkce? Jak napomáhají uživateli na cestě k požadovanému cíli (v rámci stránky zhmotnělému ve formě požadované Call To Action)? Pomáhá skutečně a smysluplně, nebo je zde jen proto, že to umíme?

Nikdy nedělejme něco jenom proto, že to dokážeme udělat!

Toto byl velký problém stránek hlavně v prapočátcích webu — autor objevil nějakou knihovnu nebo hezké či neobvyklé řešení a v nadšení, že najednou dokáže vytvořit cosi pro něj téměř nadpřirozeného, to bez většího přemýšlení do stránek prostě vrazil. Weby na přelomu tisíciletí se jen hemžily tikajícími analogovými hodinami, zobrazením aktuálních svátků a výročí, samoúčelnými animacemi, hudbou hrající na pozadí, poletujícími sněhovými vločkami a panáčky bezúčelně běhajícími tam a zpět… Bohužel v té či oné podobě to přetrvává dodnes — jen těch sofistikovaných knihoven, hotových řešení i poměrně komplexních miniaplikací jsou k dispozici už nepřeberná množství a záleží jen na tom, co dotyčného vývojáře zrovna natolik zaujme, aby to jednoduše vrazil do stránek, které právě vyrábí.

I dnes může být člověk překvapen nečekaným závanem webové prehistorie. Web malé školy, kam chodí moje děti, se donedávna (v roce 2015!) pyšnil javovým appletem zobrazujícím tikající školní hodiny (jako by každý neměl přesný čas ve stavovém řádku hned vedle prohlížeče, na hodinkách, v mobilu a na desítce dalších míst), blikajícím přáním hezkého dne a animovaným odpočtem, kolik vteřin zbývá do konce školního roku… Co na tom, že fotogalerie ze školních akcí jsou nedostupné a učitelé dodnes nemají vlastní e-mailové adresy. Hlavní je, že se někdo může pochlubit, jak umí zpracovat aktuální čas a datum.(Pozn.: Po nedávné aktualizaci webu ten javový applet už zmizel. Nahradily ho podobné hodiny, tentokrát už vyrobené ve Flashi…)

Neumíme dát uživateli funkci, kterou potřebuje? Dáme jim tedy náruč funkcí úplně zbytečných, ze kterých jim musí být jasné, že ve skutečnosti umíme věci nevídané a magické. Snad si pak budou myslet, že když jsme takoví machři, tak tu jejich chybějící funkci bychom tam snadno doťukli levou zadní, ale nějaké celosvětové spiknutí iluminátů v tom brání, račte pochopit, jsou věci, které ani my nedokážeme…

Ne.

Takto návštěvníci webu opravdu neuvažují. Každému z nich je srdečně jedno, jak fantasticky technicky úchvatné je vaše řešení tikajících hodin a poletujících vloček, když nedokáže splnit takový elementární úkol, jako je poslat zprávu učiteli svého dítěte, nebo rychle najít, v kolik hodin končí úterní vyučování. Uživatelé si na novém webu udělají nějaký první dojem na první pohled (jehož vytvoření trvá řádově pouhé milisekundy) a pak už jen hledají, jak se dostat k tomu, proč sem vůbec vstoupili — najít a přečíst si nějaký článek či údaj, najít kontaktní informace a poslat zprávu, najít výrobek a koupit si ho atd. Vše kolem je omáčka, která uživatele od jeho cesty k cíli jenom zdržuje.

Nikdo neocení, kolik toho dokážeme navrhnout, ale jak dobře jsme udělali to podstatné.

Při návrhu se nesmíme ptát, zda by to či ono mohli uživatelé potřebovat. Správná otázka zní, nakolik jim bude skutečně vadit, když tam to či ono nebude. U každé funkce, u každého prvku se upřímně zamysleme, zda jsou tam, protože se bez nich uživatelé (nebo provozovatel) neobejdou, nebo jen proto, že nám to přišlo jako dobrý nápad. Upřímně, všechny tyhle „dobré nápady“ bez skutečného užitku jsou věčnou zhoubou webů i rozhraní aplikací a měli bychom se jich zbavovat, a ne přidávat stále další. Čím víc funkcí web má, tím víc mezi ně uživatel tříští svou pozornost a ztrácí soustředění na to podstatné. A nejen to. Trefně to pojmenoval Robert Hoekman ve své knize Designing the Obvious: víc funkcí rovná se víc frustrace. Dokonce frustrace, která roste exponenciálně, násobí se s každou další funkcí. Pro nás je to jedna přidaná drobnost v řadě. Pro uživatele to ale znamená víc věcí k naučení, pochopení, k nastavení, vyladění a přizpůsobení, víc věcí k nastudování v manuálu, víc věcí, které se mohou pokazit.

Bohužel smutná praxe je taková, že z počtu funkcí a prvků webu se už stala měrná jednotka, jíž si vývojáři poměřují své výtvory, a jejíž pomocí dokonce účtují klientovi za svou práci. Víc funkcí, vyšší faktura. Pohříchu na to ve své neznalosti snadno přistoupili i sami klienti, protože všude jinde to právě tak funguje. Že by někdo chtěl víc peněz za méně funkcí? Kde jste to viděli?!

A nakonec se tak všichni předhánějí v dokazování, pro kolik uživatelů je která přidaná funkce přínosná, kolik jich to či ono vítá, kolika z nich to překáží nebo je to obtěžuje, a mávají lejstry, že to vlastně nikomu moc nevadí, takže hurá! Dokázali si, že uživatelé ty jejich složité věci vlastně docela chtějí — protože jim neuměli dát věc jednoduchou, kterou by ale chtěli mnohem, mnohem víc.

Eliminace

Nebojme se po sobě škrtat a jednou navržené a přidané věci zase odstraňovat. Není to jednoduché a pro mnohé designéry takový úkon může být zpočátku bolestivý a traumatický. Můj návrh, moje nápady, moje děti! Zbavovat se jich? Nikdy! Ale možná, když se přemůžou a opravdu to odvážně zkusí, po několika takových pokusech zjistí, že to vlastně jejich práci svědčí. Že ten odstraněný balast pomohl prosvětlit a pročistit ten zbytek, jako když se z finální kresby vytažené tuší vygumuje původní skica načrtnutá tužkou. Je to dobrá a užitečná praxe.

Každý nový návrh doporučuji aspoň na chvíli odložit, nechat uležet a myslet po tu dobu na něco úplně jiného. Když to jde, tak do druhého dne. Pokud nás tlačí čas, tak aspoň na pár minut — zajděme si na kávu, projít se, protáhnout — a pak se na svůj návrh znovu podívejme čerstvějšíma očima. A pak z něj vyházejme vše, co tam není nezbytně nutné, ponechejme jen to opravdu podstatné.

A pak to ještě jednou zopakujme.

„Dokonalosti nedosáhneme tehdy, když už není co přidat, ale pokud už nemáme co odstranit.“ — Antoine de Saint-Exupéry

Balast ve stránkách je častou příčinou nízkých konverzí, ve výsledku vlastně tím nejhorším problémem vůbec. A je to celkem zřejmé: konverze znamená, že návštěvník se sto a jedním možným způsobem ocitne na stránce, zorientuje se v ní, pochopí její smysl a záměr, dojde mu, co má sám udělat, a najde a provede požadovanou cílovou akci. A to vše dřív, než ho to přestane bavit a odejde předčasně někam jinam. Všechno, co do stránek dáváme, musí podporovat právě tento účel, a pokud jej nepodporuje — nebo mu dokonce stojí v cestě! — pak je to balast, nežádoucí a škodlivý obsah a jako takový musí pryč. I kdyby to byla zrovna ta nejkrásnější věc, kterou jsme na celém webu vymysleli. Třeba se nám ten zázrak ještě podaří uplatnit jindy a jinde a bude tam užitečný. Tady ale užitečný není a webu škodí. Vlastně prodělává našemu chlebodárci peníze.

Jako první a bez většího váhání odstraňme ze svých návrhů všechny ty věci, které nám prostě přišly jako dobrý nápad, ale při nejlepší vůli nás nenapadá, jak by mohly pomáhat zvýšit konverze. Jestliže nepomáhají, škodí. Pryč s nimi. Buďme na sebe tvrdí, buďme zodpovědní. Ve druhém kroku se soustřeďme i na detaily všech věcí, které v návrhu zůstaly. Ty už podle nás užitečné jsou a konverzím pomáhají. Ale jsou takové i všechny jejich díly a součásti? Nejsou zde texty zbytečně „ukecané“ a nedaly by se významně zkrátit? Nejsou některé grafické prvky nadbytečné, konstrukce ve formulářích příliš komplikované, prezentační videa zbytečně dlouhá? Zkracujme, eliminujme, vyhazujme i na dílčí úrovni.

Eliminace není jen samoúčelný postup k tomu, aby toho bylo ve stránkách míň. Prokrácený a pročištěný obsah nám dává velký prostor doplnit podstatné věci, důležité a funkční prvky a informace, které se nám dřív do návrhu kvůli všemu tomu balastu nevešly a nyní je pro ně najednou spousta místa. A pokud se jedná o funkce, které na rozdíl od odstraněných zbytečností budou pro uživatele skutečně užitečné, pomohou mu a zvýší konverze, směle sem s nimi.

Nesmíme ovšem zapomenout na závěr celý eliminační postup zopakovat a alespoň si prověřit, jestli stále vše funguje, dává smysl a zapadá do sebe, nebo zda náhodou nevznikl nějaký nový balast, který musí pryč. Stává se totiž poměrně běžně, že tytéž věci fungují velmi odlišně v odlišných kontextech. A prvek, který fungoval báječně a byl velmi užitečný, se po přidání nějaké nové funkce a odstranění dvou jiných může najednou stát zcela nepotřebným a nepraktickým a zaslouží si být odstraněn také.

Chvála funkcionalismu

Když ale tolik věcí můžeme prohlásit za nadbytečné a tolik věcí se dá odstranit, proč tedy dělají všichni weby tak bohaté, složité, pestré a přeplácané? Pokud skutečně uživatel má jasný cíl a záměr a je jednoznačně daná cesta přímo k němu, proč to vůbec někdo komplikuje? Proč není na takovém webu třeba jen jedno slovo, jedno cílové tlačítko, jeden jasný Call To Action uprostřed stránky a nic dalšího kolem?

Inu, především proto, že obvykle nemáme jen jediného uživatele a jediný cíl. Uživatelů je spousta, a i když si je dokážeme zredukovat do několika typických person, pořád se ti reální v mnoha detailech liší, přicházejí na web různými cestami a především s různými záměry a cíli. Web je jeden, stejný pro všechny, ale každý na něm musí najít svou ideální cestu od svého startu ke svému cíli.

Ano, existují i jednoúčelové webové stránky a jednoúčelové aplikace, kde skutečně nemůžeme udělat nic lepšího než umístit doprostřed jedno velké tlačítko Stiskni mě, a cokoli kolem bude vlastně zbytečná a rušivá přítěž. Pohříchu do takových stránek a aplikací mají vývojáři tendenci cpát toho balastu nejvíc. Jedno jediné tlačítko? To je přece pod naši úroveň! Musíme světu ukázat, že toho dokážeme mnohem víc! Ale uživatel by byl z takové naprosto dokonalé aplikace nadšený. Při jejím použití před ním stojí jediná volba: provést akci, nebo ne? Stisknu tlačítko, nebo ho nestisknu. Jednodušší už to být nemůže, rozhodování a potažmo používání je tak prosté jako otočení vypínačem.

Uživatel je nejšťastnější, když rozhraní tvoří jediný ovládací prvek.

Weby a aplikace ale pochopitelně ve své naprosté většině jednoúčelové nejsou, musí plnit více funkcí nebo třeba i jen funkci jedinou, ale se spoustou možných parametrů: magazín se spoustou článků, encyklopedie se spoustou hesel, e-shop se spoustou výrobků… Proplétají se tady tisíce a miliony možných cest možných návštěvníků k jejich vlastním cílům. Ten komunikační prostor je velice složitý a dá dost práce jej navrhnout a udržet co nejlépe funkční a vůbec provozuschopný. Tady se každý zbytečný stupeň složitosti vymstí, všechny drobné komplikace se násobí a navzájem posilují, aby co nejvíce škodily. Abychom to ve finále celé ukormidlovali a to kýžené neustálé posouvání uživatelů k cíli se nám brzy nevymklo z rukou, musíme se zbytečnému a bezúčelnému zesložiťování bránit a udržovat vše tak průzračné a jednoduché, jak jen to je možné.

Neboť jednoduchost je ve skutečnosti svatým grálem užitého designu. Od webových stránek přes obráběcí stroje až třeba po jídelní náčiní. Jistě, pár sběratelů si koupí třeba i překomplikovaný, třikrát zahnutý, ornamenty a složitými řezbami zdobený příbor — a vystaví si jej ve vitríně. Jako umění. Ale jíst budou stejně nejraději ergonomickou, ve své jednoduchosti ideální lžící, která padne do ruky a polévka z ní nešplíchá při každém pohybu. Jednoduché, ale prakticky navržené věci se dobře používají a lidé se k nim rádi vracejí. S webdesignem je to právě tak. Pokud se nám někdy poštěstí a dostaneme možnost udělat si ryze kreativní web, od kterého nikdo neočekává žádný výkon, nemusí plnit žádný účel a cíle, můžeme na něm pustit fantazii ze řetězu a udělat si jej třeba taky překomplikovaný, třikrát zahnutý, ornamenty a složitými řezbami zdobený a vystavit si jej ve vitríně. A musíme si to taky náležitě užít, protože taková šance se nám možná naskytla naposledy v životě.

Většina webů je úplně jiná a volná tvorba na ně nepatří — ano, zopakujme si ten refrén zas a znova: musí v prvé řadě naplňovat cíle provozovatele a současně uspokojovat potřeby návštěvníků. Jestli se nám k tomu ještě kolem povede vytvořit něco estetiky, krásna a umění (které nebude ke škodě tomuto primárnímu účelu), jenom dobře. Vzhled je součást vizuální identity webu, která je důležitá pro pozici na trhu, odlišení od konkurence, zapamatovatelnost pro návštěvníky atd. Ale pro samotnou funkci stránek už má přínos menší a dokáže i škodit, a ne pouze přinášet užitek. Jakkoli se to nebude líbit grafikům, výtvarníkům a estétům, musíme se smířit s tím, že třeba škaredé, ale výstižné ikonky fungují ve výsledku mnohem lépe než ikonky krásné, ale nesrozumitelné. Hlavní je, že pomohou uživatelům na jejich cestě k cíli, jejich vzhled nikoho příliš zajímat nebude.

Webu a interaktivním aplikacím obecně svědčí funkcionalistický přístup.

Nemluvíme zde ale o funkcionalismu ve striktním, direktivním pojetí, tedy absolutním upřednostňování funkce a užitku před vzhledem a estetickými hodnotami. Grafická podoba a estetično na webu vůbec nemusí být nijak zvlášť omezováno a upozaďováno. Naopak, dobrá a výrazná vizuální prezentace může být účinnější a požadovanou funkci ještě podporovat. Grafický design nemusí funkčnosti ustupovat, měl by ji ale podtrhávat a posilovat. Může být odvážný a výrazný, stylově vyhraněný, osobitý — nežádoucí je pouze to, aby vizuální složka šla proti složce funkční, aby podružnosti přitahovaly pozornost a důležité prvky se ztrácely. Funkce je zde nadřízena vzhledu, ale vzhled nemusí být nutně odsunut do pozadí.

Na webu nám jde hlavně o jakýsi funkční funkcionalismus. To, co má prioritu, jsou funkce a prvky stránek, které podporují nalezení a dosažení uživatelova cíle — a to nikoli nutně na úkor vzhledu, ale především na úkor funkcí vedlejších, méně důležitých, nebo dokonce zbytných. Dobrý design zrychluje práci, snižuje riziko chyb a pomáhá uživateli co nejsnáze a nejrychleji dospět tam, kam se potřebuje dostat. Případně tam, kam jej potřebuje dostat provozovatel webu (což je v ideálním případě totéž místo).

Jednoduchost a čistota funkce pak jdou často ruku v ruce s intuitivností. Což je další posvátná meta každého designéra. Stránka, web, aplikace, jejíž smysl a způsob ovládání pochopí každý uživatel hned a bez přemýšlení. Není pro designéra slastnějšího pocitu než se účastnit uživatelského testování a sledovat, jak se výsledek jeho práce dokonale potkává s očekáváními a zvyky uživatelů, jak plní požadované úkoly snadno a na první dobrou, jak prvek či akce, po kterých automaticky sáhnou, že by nejspíš mohly nejlépe plnit očekávanou úlohu, jsou pokaždé ty správné, právě tak, jak jsme je zamýšleli…

Kde je potřeba návod k použití, je něco špatně.

Na intuitivní a dobře srozumitelné rozhraní má pochopitelně hodně vliv i grafický design, copywriting a všechny další složky — ale právě jednoduchost, důraz na důležité funkce a potlačení těch méně podstatných a eliminace zbytečností jsou tím hlavním základem, na němž vše stojí. Pokud je vážná chyba v něm, ani sebelepší grafický design a texty jej nezachrání.

Hierarchie a dynamický rozsah

Nic není zcela černobílé a zdaleka ne všechno v našem návrhu lze jednoznačně rozdělit na dobré, které zde ponecháme a použijeme, a na špatné a zbytečné, které vyhodíme. U prvků a funkcí, které nám zůstanou, dále rozlišujeme i míru užitečnosti. Některé jsou klíčové a dominantní (třeba hlavní nadpis stránky či hlavní CTA tlačítko, k jehož aktivaci se má uživatel dostat), jiné jsou podružné, mají funkci podpůrnou a pomocnou. Ty první nesmí uživatel přehlédnout a musí ho jako milníky vést od startu k cíli; ty druhé jsou užitečné a mohou se hodit, ale především nesmějí překážet. A pochopitelně ani toto rozdělení není ryze bipolární, ve stránkách budeme mít prvky všech možných mezistupňů důležitosti od nejzásadnějších přes středně důležité a méně podstatné až po ty nejméně důležité.

A design musí tyto priority a různé úrovně důležitosti respektovat a kopírovat nejen v rovině logické, ale i ve struktuře a designu stránky. Jinými slovy:

Hlavní prvky je nutné i prezentovat jako dominantní, ty nedůležité jako podružné.

Každá stránka potřebuje nejméně tři hlavní hlavní prvky, hlavní kotvy, které musí být patrné a srozumitelné každému návštěvníkovi pokud možno už na první pohled:

Kde jsem? Tady hraje hlavní roli konglomerát nadpisů, pojmenování stránky a navigace. První dominantní informace na stránce musí uživateli srozumitelně sdělovat, kde se ocitl. Tedy obvykle srozumitelným a výrazným hlavním nadpisem, případně dostatečně zvýrazněnou aktuální pozicí ve struktuře navigace. V zorném poli kolem této kotvy by pak měly ideálně být doplňující informace, upřesňující kontext a lokaci stránky v rámci sekce i celého webu atd. Proto se např. osvědčuje drobečková navigace umístěná hned v sousedství hlavního nadpisu stránky, a nikoli někde na opačné straně.

Co zde mohu udělat? Druhou kotvou a druhým důležitým prvkem stránky je její hlavní sdělení — obsah článku, název a základní informace o produktu, formulář k vyplnění atd. Často se stává, že mnoho informací a prvků ve stránkách je výraznějších a tuto pro uživatele nejpodstatnější informaci přebijí. To bychom nikdy neměli dopustit, druhá kotva je hlavní důvod, proč na této stránce uživatel je, představuje jeho zájmy a v ideálním případě plní jeho potřeby.

Čím skončím a kam mám pokračovat? Třetí kotva reprezentuje především zájmy provozovatele. Uživatel ví, kde je, a našel zde to, co je pro něj nezajímavější. Zbývá jej nasměrovat k cíli, kde jej potřebuje mít náš klient: Call To Action. Třetí dominatní prvek ve stránce proto má být příslušná CTA — nákupní tlačítko, odeslání formuláře, registrace služby, konzumace reklamy, akce typu Další, Pokračovat, Dokončit apod.

Je pak na pečlivém vyvážení, který ze těchto tří prvků má ještě převažovat nad ostatními, zda a nakolik má reklama dominovat nad hlavním sdělením článku, zda má být odesílací tlačítko výraznější než hlavní nadpis atd. V tuto chvíli je ale nejpodstatnější vymezení těchto tří hlavních prvků vůči ostatnímu obsahu stránky. Vždy bychom měli považovat za chybu, pokud jakýmkoli způsobem některou z těchto tří hlavních kotev přebije a upozadí něco jiného, co v základní kostře stránky takovou prioritu nemá — když se hlavní nadpis stránky ztratí mezi hlavní navigací, když reklama (která je na webu jen doplňková) přehluší obsah i CTA, když doplňkové funkce jako doprovodné obrázky, videa, mapy apod. získají hlavní pozornost uživatelů a odvedou je nežádoucím směrem atd.

Osobně tento princip rád označuji jako dynamický rozsah designu. Podobně jako u hudby nebo fotografie je to velmi důležitý faktor ovlivňující výslednou kvalitu — zvuková nahrávka má tišší a hlasitější místa a vše musí znít dobře v basech i výškách, v pianissimu i fortissimu. Dobrá fotografie má mít dostatečný kontrast a zobrazovat celý rozsah jasů od bílé po černou, musí detailně vykreslovat světla i stíny. A stejně tak i dobře navržená webová stránka sděluje důležité informace i ty méně podstatné: ty prvé výrazně prezentovanými prvky a ty nepodstatné formátuje méně nápadně. Snažme se vytvářet mezi těmito opačnými extrémy dostatečně velký kontrast. V opačném případě bude všechno nivelizováno, nahrávka je v tichých místech příliš hlasitá a v hlasitých tišší, než by mohla být; fotografie je šedivá, nemá dostatečný kontrast a je plochá. Stejně plochý pak může být i design, důležité věci od nepodstatných nejsou dostatečně odlišeny, vše je nivelizováno do víceméně stejného významu a priority. A to je v důsledku špatné.

Je důležité, aby stránka měla dostatečně velký dynamický rozsah.

S dobrým dynamickým rozsahem pak souvisí i správné seskupování informací. Když už na stránce vhodně zvýrazníme podstatné věci a upozadíme ty vedlejší, je také důležité správně nastavit úroveň všech součástí celé stránky (a webu), aby bylo zřejmé, jaké informace k sobě patří a jaké mají přibližně stejnou důležitost. Častou chybou na webech totiž bývá i chybná hierarchie. Nejlépe ji můžeme ilustrovat na příkladu:

Snadno se stane, že grafik (či až kodér) v hierarchické struktuře jednoduše použije pro zobrazení dané informace první volnou úroveň, bez ohledu na to, jakou váhu má a jakou důležitost tato úroveň na zbytku stránky (a celém webu) vyjadřuje.

Dbejme na to, aby prvky stejné váhy, stejné informační hodnoty měly v našem designu také přibližně stejnou váhu. Nebojme se přeskočit i několik úrovní logické struktury. Pro uživatele je podstatné mít informace s podobnou váhou a důležitostí prezentované podobným stylem. Pomáhá to navigaci a orientaci ve stránce a výrazná změna úrovně u stejně prioritních informací může být celkem matoucí.

Je také nezbytné podotknout, že vhodný dynamický rozsah i správné seskupování platí nejen pro každou jednotlivou stránku, ale i pro celý web, pro celou aplikaci. Stejně výrazné je potřebné mít hlavní a důležité stránky v rámci celého webu, stejně potlačené mají být stránky vedlejší a doplňkové. Obdobné principy, jež platí pro jednotlivé stránky a informace na nich, platí i pro celý web a stránky v něm obsažené.

Homepage podruhé

Úvodní straně webu (homepage) už jsme věnovali jednu kapitolu. Protože ale zrovna tuto část webu mnoho lidí pořád považuje za klíčovou a nejzásadnější (mylně), vraťme se k ní ještě jednou i v této části. Poprvé jsme si homepage vymezovali spíše negativně, jak ji nenavrhovat — teď si pro změnu řekněme pár tipů, jak homepage navrhovat, co na ní má být, na co nesmíme zapomenout.

Homepage je především jakýsi „obal“ webu a jeho hlavní rozcestník. Plní několik hlavních funkcí:

sděluje základní myšlenku, smysl a poslání webu

informuje o struktuře webu a poskytuje jeho základní navigaci

vytváří první dojem — aspoň těm, co se na web dostanou právě přes homepage

To je na jednu stránku úkolů až až. Snažme se vždy dobře splnit především tyhle tři a nepřetěžovat úvodní stranu zbytečně dalšími informacemi. Jen u malých webů tvořených pouze jedinou stránkou, nanejvýš doplněnou pár sekundárními stránkami, patří na homepage také samotné informace, které web sděluje. U webů jen o trošku větších už bychom měli veškerý nosný obsah směřovat spíše na jednotlivé podstránky.

Častým problémem totiž bývá, že se toho homepage snaží říct příliš mnoho najednou a výsledkem je nepřehledný guláš informací, v němž se návštěvník nevyzná a designér v něm nedokáže najít vhodnou hierarchii a nastavit správný dynamický rozsah (protože na homepagi je přece všechno důležité). A v nejhorších případech zde některá — nebo dokonce všechny! — hlavní funkce chybí a místo nich jsou návštěvníkovi předloženy v podstatě zbytečnosti. Jaké jsou tedy konkrétněji ty hlavní funkce a informace, které na homepagi nemají nikdy chybět?

Především tedy ona základní myšlenka, smysl a poslání webu. Sem patří především všechny prvky korporátní a vizuální identity: název, slogan, logo, barevné schéma a celkový vizuální styl. Návštěvník musí mít na první pohled jasno, kde se ocitl. Je ovšem chybou spoléhat pouze na vizuální identitu a sílu značky. Pokaždé se může najít větší či menší množství uživatelů, kteří klientovu značku neznají nebo ji neidentifikují, a pro ty je potřeba poskytnout nějaký základní popis, stručné seznámení, o co jde. Pokud zde chybí, můžeme zmást, nebo dokonce odradit nezanedbatelnou část návštěvníků.

Já pro tuhle chybu rád používám termín WCG syndrom (WCG = wo co gou, tedy žertovná poloanglická podoba oné otázky „o co jde“). U webů, které jím trpí, se dozvíme leccos, od aktualit ve firmě přes vyznání, jak jejich produkty dělají ze světa lepší místo k žití, až třeba po tělesné míry pana ředitele (nepřeháním, na jednom webu jsem to opravdu kdysi potkal). Ale jestli dotyčná firma prodává auta nebo peče chleba, to se z jejich homepage prostě při nejlepší snaze pochopit nedá.

WCG syndrom pramení často z paradoxu perspektivy, který jsme zmiňovali v první části knížky, někdy z prosté namyšlenosti a nabubřelosti firmy a pocitu, že je přece každý zná, někdy z kombinace obojího. Fajn, náš klient má právo soustředit se plně na svůj byznys a klidně si i myslet, že mu ostatní nesahají ani po kotníky. Je práce designéra tomuto problému zabránit, myslet na něj a na úvodní stranu nějakou tu základní WCG informaci dát — čím se zabývá firma, co nabízí a poskytuje web, k čemu stránky slouží. Někdy to vyřeší jen dobrý slogan (XYZ: zpravodajský portál; ABCD: výrobce zmrzliny; BFLM: prodej vajec a kladiv), někdy pomůže výmluvný obrázek, někdy je potřeba použít kratší text. Nic dlouhého, na homepagi chceme být struční.

Namyšlený web, který jasně neuvede, čím se zabývá a co nabízí, si právem zaslouží přijít o nějakou část návštěvníků.

Mezi základní informace patří také některé doplňkové údaje, které je rovněž nezbytné mít hned na úvodní straně. Jde hlavně o informace, které návštěvníkovi pomáhají ujistit se, že je na správném místě. U podniků a služeb s místní působností je důležité zdůraznění lokality — pizzerie v Ostravě, kominické služby pro Plzeň a okolí, rozvážíme preclíky po severní Evropě atd. Podobně je důležité vymezené cílové skupiny, pokud web není určen běžnému návštěvníkovi — šijeme textilie pro hotely, velkoobchodní prodej od 100 ks, B2B řešení apod. Je vždy lepší tyto informace uvést srozumitelně a zřetelně přímo na homepagi, než aby se pak chudák provozovatel musel potýkat s objednávkami pizzy nebo rezervacemi od 300 km vzdálených zákazníků, poptávkami na jeden ručník (když firma dodává jen v baleních od 100 kusů výše), nebo naopak na kamion levandulového mýdla (přičemž se jedná o domácí manufakturu s produkcí jednotek kusů).

Informace o struktuře a základní rozcestník celého webu je funkce úvodní strany, která je také často podceňována. Přitom může být hlavním uzlem veškeré navigace. Zatímco v souvislosti se sdělovanými informacemi s klidem můžeme počítat, že významná část uživatelů nikdy nemusí vidět homepage a přesto budou vesele náš web používat, z pohledu navigace musíme obvykle homepage, považovat za klíčovou křižovatku a výchozí bod pro všechny. Neboť co udělá uživatel, který se ztratí, který si na libovolné stránce webu není zcela jist, kudy pokračovat? Nejčastěji se bude snažit dostat na začátek, na hlavní rozcestník, klikne na logo, symbol domečku, odkaz Domů či Úvodní strana — to vše jsou zavedené zástupné symboly pro odkaz na úvodní stranu a především do kořene navigace. Tady uživatelé očekávají pomocnou ruku, nápovědu, přehled, rozcestník, který jim pomůže se zorientovat.

Nekoncipujme navigaci na úvodní straně pouze pro nové návštěvníky, ale i pro ty, kteří sem přijdou ztraceni odkudsi z hloubi webu.

A konečně ten první dojem. Vypreparovaná kůže z posvátné krávy přibitá na zdi za pracovním stolem snad všech zadavatelů velkých poptávek a výběrových řízení. Grafický návrh homepage. Ó-ó-ó! Pokaždé, když někdo vypíše výběrové řízení na web a požaduje v něm grafický návrh úvodní strany webu, bůh zabije koťátko. Jistě, první dojem a příslušný wow efekt vytvořené v prvních milisekundách po spatření webu mají svůj určitý marketingový potenciál, ale troufnu si to říct takto:

Pokud návštěvník rychle najde na načtené stránce informaci, kterou hledá, jsou mu rázem celý vzhled a grafické zpracování poměrně dost ukradené.

Opačně to platí samozřejmě taky: pokud uživatel nenajde rychle to, co hledá, je mu celé grafické zpracování taky k ničemu. Možná se určitá část návštěvníků bude ještě chvilku kochat krásným designem a bude se s ním mazlit o něco déle. Ale nakonec stejně odejdou nespokojeni a nejspíš už se nevrátí. Soustřeďme se hlavně na funkci, sdělení hlavních informací a přehlednou a srozumitelnou navigaci a grafický návrh berme jen jako přidanou hodnotu. Ano, nějakou funkci při působení na návštěvníka bezesporu má, ale je to funkce pouze doplňková. V okamžiku, kdy návštěvník zjistí, že se na webu nevyzná, že mu nerozumí, že netuší, jak s jeho pomocí uspokojit svou potřebu, je nám veškerá ohromující grafika na nic.

Zásady grafické práce

Jakkoli design webů a aplikací ani zdaleka nespočívá v jejich pouhém grafickém zpracování — jak se ostatně snaží ukázat celá tato kniha — má vizuální design a grafická úprava svou důležitost. A dokonce i v těch nejextrémnějších případech, kde ani sebelepší grafika nemůže výsledek nijak významně vylepšit, může mu ale grafika špatná kdykoli uškodit, a to i velice významně. Každý dobrý grafik proto musí především bravurně ovládat své řemeslo a jeho základní pravidla, aby se nedopouštěl žádných zásadních přehmatů a elementárních chyb. Teprve potom může popouštět uzdu své fantazii a kreativitě a jako nadstavbu vytvářet i nějaké umělecké hodnoty.

U webové grafiky, stejně jako u ostatních užitých umění, je prvořadé zachování a podpora funkčnosti.

Ovšem i když se omezíme jen na otázky estetiky a vkusu, je zde stále významný rozdíl mezi užitou grafikou (v podstatě odnoží průmyslového designu) a jakoukoli volnou uměleckou tvorbou. Umění a volná tvorba jsou odrazem umělcovy osobnosti, sdělením jeho emocí světu, přenesením části jeho nitra do obrazu, zvuku, slov. Umění je subjektivním dílem a v prvé řadě souzní s autorovou duší, jeho vkusem, jeho potřebami něco sdělit. Skuteční umělci se nepodbízejí a zásadně netvoří podle vkusu budoucích „konzumentů“ svého díla — v opačném případě se takové umění nazývá kýčem a dotyčný autor je terčem kritiky a pohrdání skutečných umělců a milovníků umění.

V průmyslovém designu a užitém umění je to ale přesně naopak. Autor sice do díla promítá své nápady, emoce, nápady a duši, ale výsledek musí především souznít s maximem budoucích uživatelů navrhovaného produktu. Zde se návrhář naopak musí zájmům a vkusu konzumentů podřizovat v maximální míře, tady je to, co je v umění kýčem (ve smyslu líbivosti pro nejširší masy), naopak záměrem a standardní pracovní metodou. V tomto oboru je grafikovo dílo více výrobkem než uměním a práce je víc poctivé řemeslo než umělecká tvorba. Na pranýři kritiky se ocitají naopak návrháři s příliš velkým uměleckým rozletem, kteří vkus a potřeby uživatelů příliš ignorují.

Dobrý webový grafik si je se vší pokorou vědom, že je více řemeslníkem než umělcem.

Malířské nadání a výtvarný talent jsou jistě výhodou, ale nikoli nezbytností. Poctivý a důsledný webový grafik i bez výrazného výtvarného nadání může vytvořit dobře použitelný a úspěšný web. Nejspíš se neobjeví v žádné ročence výtvarného umění, ale může velmi dobře fungovat a prosperovat. Naproti tomu výjimečný umělec oplývající talentem a překypující kreativitou bez znalosti řemesla, porušující či ignorující základní pravidla a zásady snadno vytvoří dílo na pohled okouzlující, jedinečné, úchvatné — a prakticky nepoužitelné.

Výrazný umělec na pozici grafického designéra může nabídnout mnoho z hlediska estetiky a celkového dojmu, který webu dokáže vtisknout a vytvořit skutečně výraznou a jedinečnou vizuální podobu, která bude vysoce předčit konkurenci. Ale současně představuje také velké riziko právě kvůli neznalosti, či dokonce vědomému porušování řemeslných pravidel, které často vede ke zhoršené použitelnosti až nefunkčnosti webu. Za svou praxi jsem se setkal snad jen se dvěma třemi grafickými designéry, kteří byli skutečně excelentními výtvarníky s úžasnými grafickými nápady a přitom perfektně ovládali i webdesignérské řemeslo. Pohříchu je to ale spíš výjimkou a daleko častěji jsem byl svědkem škod, které na funkčnosti webu spáchaly příliš rozlétlé kreace nezodpovědného umělce.

Realizační týmy i zadavatele webových projektů by u grafického designéra mělo zajímat především poctivé řemeslo.

Jako grafičtí designéři si musíme být vědomi toho, že navržený vzhled webu (či obecně jakékoli počítačové aplikace) se nám samotným vůbec nemusí líbit. Nemusí se líbit designérům, vývojářskému týmu, manažerům ani zadaveteli. A koneckonců se v krajním případě nemusí líbit ani samotným uživatelům! Hlavním požadavkem na design je totiž funkce. Estetické nároky a vkus kohokoli jsou vedlejší, design musí především fungovat. Historie nám může předložit bezpočet příkladů veleúspěšných projektů, které by neobstály ani v amatérské designérské soutěži (několik příkladů jsme v předchozích kapitolách už zmínili). A přesto se prosadily a svou konkurenci, často mnohem líbivější a na pohled elegantnější, nechaly za sebou v propadlišti dějin. Uživatelé si vybírají sami a rozhodují se sobecky podle vlastního prospěchu: web, který je zaujme vizuálně, třeba i rádi vyzkoušejí a budou si s ním rádi chvíli hrát — ale nakonec stejně zůstanou u toho, který je funkčnější, pohodlněji, příjemněji a efektivněji se používá a především lépe uspokojuje jejich potřeby.

Potřeby uživatelů jen málokdy mají něco společného s estetikou.

Nic z výše vyřčeného ale neznamená, že se každý může a musí spokojit s jakýmkoli grafickým návrhem, že každou námitku, že se někomu něco nelíbí, lze snadno odbýt a ignorovat. Když se komukoli něco nelíbí, vždy se nejprve zajímejme, proč dotyčný prvek v návrhu je a proč vypadá právě takto. A pouze pokud to má funkční zdůvodnění a grafik je přesvědčen, že jiné, „hezčí“ řešení by bylo újmou na funkčnosti, je nutné se s „ošklivější“ podobou smířit.

Samotné zadání projektu a k tomu vkus a potřeby uživatelů ale stále nejsou vše, čemu se grafický designér musí přizpůsobovat. Pokud se vrátíte o pár kapitol zpět, můžete si připomenout poměrně obsáhlý seznam požadavků a limitů, které musí i on u dané cílové skupiny respektovat — od sociodemografických faktorů po požadovaná pravidla přístupnosti a technická omezení. Grafik musí pracovat s barvami, obrazy, symboly či textem s ohledem na zvyklosti, standardy, tabu a limity platné pro jeho cílovou skupinu, nikoli vhodné pro něj samotného.

A konečně, aby to nebylo vůbec jednoduché, nejen zadání projektu a potřeby a limity uživatelů určují mantinely grafikovy práce. Ještě je zde jedna strana ve hře: realizační tým. A také jemu se do určité míry musí vzhled webu podřizovat. Grafik musí ve svých návrzích respektovat zákonitosti daného média, zavedených zvyklostí pro cílovou platformu, předepsaných technologií, požadované struktury šablon atd. Pokud je web navržen s použitím nějakého existujícího UI frameworku, musí pak být i grafický návrh sestavován z jeho součástí a skládán jako stavebnice z dostupných prefabrikovaných prvků. Grafik si musí být vědom možností stylování a přizpůsobování použitých konstrukčních sad a musí brát ohled na případnou náročnost jejich přiohýbání na míru nestandardní grafické úpravy. Vždy musí pečlivě vyvažovat výhody a nevýhody použití hotových prvků z nějaké existující knihovny, jejich přizpůsobování pro méně standardní použití, nebo dokonce tvorbu zcela nových vlastních, proprietárních řešení. Základním krokem grafikovy práce by proto mělo být vytvoření vlastní knihovny ovládacích a konstrukčních prvků, již přizpůsobených či doplněných a nastylovaných dle možností a potřeby, z níž pak do grafického návrhu jednotlivých stránek prvky vybírá a používá.

Plocha a prostor

Jednou z hlavních dovedností grafického designéra je umění dobře nakládat s prostorem, v tomto případě s plochou webové stránky. Musí mít cit pro proporce, vnímat optickou váhu jednotlivých prvků v malém měřítku i větších seskupení v rámci celku, pracovat s velkým dynamickým rozsahem, používat kontrasty a kontrapunkty, cíleně pracovat s vizuálními vazbami mezi jednotlivými prvky stránek.

Už dříve jsme řekli, že design každé stránky je zmenšenou verzí cíle projektu: každá stránka musí mít svůj vlastní cíl — nějaký Call To Action — a účelem designu je k němu uživatele dovést. Prací hlavního designéra či architekta projektu je vytvářet správnou strukturu webu a vazby mezi stránkami a navrhnout ideální navigaci k celkovým cílům webu. V rámci jedné stránky pak definuje pouze hrubé obrysy cest pro typické uživatelské scénáře vytvořením hrubé konstrukce a základního uspořádání a funkcí stránky. Grafický designér v této činnosti pokračuje a to, co dělá architekt pro celý web, on zajišťuje pro jednotlivé stránky. Pomocí vizuálních nástrojů (prací s prostorem, vahami a barvami jednotlivých součástí stránky) vytváří správnou strukturu stránky, vazby mezi jejími prvky a navigaci po cestě od vstupu uživatele na stránku až po její opuštění. Tyto cesty zvýrazňuje a pomáhá uživatele postrkovat po určené cestě až k žádanému cíli. Grafický návrh musí vypichovat hlavní kotvy stránky (viz dříve), vytvářet mezi nimi vizuální vazby, podtrhovat důležité věci a současně upozaďovat věci vedlejší, nepodstatné. A jak už víme, za nepodstatný balast považujeme vše, co ve stránce nepodporuje její hlavní cíl a nepomáhá vést uživatele k příslušnému CTA.

Proporce a priority

Správné proporce stránky jsou důležité jak pro celkový dojem, tak pro dobrou orientaci v jejím obsahu. Jednotlivé části a sekce by měly být pečlivě vyváženy, aby stránka jako celek působila tak, jak chceme. Pro lidský mozek jsou proporce dost podstatné a uživatelé podvědomě přisuzují informacím ve stránce důležitost odpovídající proporcím a prioritám jejich vizuální prezentace. To znamená například, že považujeme za důležitější:

větší a výraznější části stránky

informace umístěné výše ve stránce

informace umístěné blíže optickému středu stránky

prvky zobrazené kontrastně oproti okolí

prvky obklopené prázdným místem

Jednotlivé sekce a části stránek proto navrhujme tak, aby jejich váha a výraznost ve srovnání s ostatními viditelnými částmi stránky odpovídala jejich důležitosti. Častou chybou zde bývá příliš výrazné záhlaví, patička stránky nebo dokonce nějaký doplňkový rámeček, které upoutají pozornost, ačkoli jejich úloha je pouze sekundární a soustředění uživatele by mělo být zaměřeno úplně jinam, obvykle na hlavní sdělovaný obsah stránky a dále k jejímu CTA.

Při přibližně stejné váze a přiděleném významu jednotlivých sekcí dávají uživatelé přednost informacím umístěným výše. Hodně lidí má tendenci vnímat sdělované informace jako řazené podle priority: to hlavní nejdříve, pak hlavní upřesňující informace a nakonec ty podružnější detaily.

Pokud se rozhodneme obrátit pořadí priorit a obsah stránky směřovat od detailů k hlavnímu sdělení na konci, riskujeme ztrátu části návštěvníků, kterým dojde trpělivost.

Platí přitom pravidlo, že určitá část uživatelů ztratí zájem a pozornost ihned při prvním skenování stránky a další se přidávají s každou další úrovní. Ve výsledku počet těch, kdo vydrží, udrží zájem a pozornost a dostanou se až ke konci, klesá úměrně s délkou obsahu. Naším zájmem je přitom získat pozornost maxima návštěvníků, proto bychom se měli snažit prioritu sdělování informací neobracet a uvádět to hlavní co nejdříve, nejvýše a nejvýrazněji. Tento princip ostatně už od nepaměti používají i zkušení žurnalisté a byl vždy obvyklou praxí v novinách i jiných formách zpravodajství — kostru sdělení přináší hlavní titulek, doplňující informaci podtitul, hlavní doplňující informace pak jsou v prvním odstavci textu. A další text už jen upřesňuje podrobnosti a zjemňuje detaily zprávy. Je téměř nemyslitelné, že by novinová zpráva v seriózním médiu byla koncipovaná obráceně, že by nicneříkající hlavní nadpis jen lákal na přečtení textu článku, který by postupně budoval napětí až k finálnímu překvapivému sdělení v poslední větě posledního odstavce. Takto fungují možná romány a detektivky i některá bulvárnější média — ale tam, kde bojujeme o každou sekundu pozornosti každého jednotlivého návštěvníka, není tento postup příliš funkční.

V praxi se mi osvědčilo počítat zde s populárním poměrem 80 : 20. Tedy předpokládám, že s každou úrovní detailů, s každou rostoucí délkou obsahu ztrácíme 20 % návštěvníků. Řekněme, že hlavní nadpis si přečtou všichni návštěvníci, kteří na stránku zavítají, do úvodního odstavce (tzv. perexu) se pustí už jen 80 % z nich a o 20 % jsme definitivně přišli. Pak nás opustí dalších 20 % zbylých čtenářů a do těla článku se začte zase jen zbylých 80 %. A tak to klesá úměrně s délkou: ve třetím kroku už zbývá jen asi polovina původních návštěvníků, kteří mají šanci se prokousat až k cíli, polovina už je nevratně pryč. Abychom přivedli do cíle maximum uživatelů, musíme stavět především na oněch nejvyšších úrovních a na nich budovat postupné kroky k cíli. Musíme předpokládat, že typický uživatel bude vnímat jen několik nejvýraznějších prvků na stránce, a s nimi musíme pracovat a na nich postavit cestu k cíli stránky — ty ostatní podrobnosti už bude číst jen stále menší skupina návštěvníků, kteří se ale snadno vrátí na vyšší úroveň a budou také následovat požadovaný směr.

Na obrázku je ukázka použití tohoto principu. Stejný prostor, totožná textová informace. Vlevo je obsah uspořádán lineárně, nejvýraznější je hlavní nadpis a od něj vizuální priority klesají a stejně klesá pozornost a zájem čtenářů. V tomto případě se významná část návštěvníků nejenže ani nedostane k cíli, ale ani nezjistí, co tím cílem je — ztratí pozornost a zájem postupně už někde v polovině. Vpravo je vytvořena kaskáda z krátkých, stručných a srozumitelných informací se stejnou (a současně vysokou) vizuální prioritou, která téměř nutí návštěvníkův pohled následovat vytvořenou cestu: 1–2–3–cíl.

Vazby a sekvence

V předchozí ukázce kromě proporcí fungují také vizuální vazby a řetězení, které u čtenářů podporují vytváření logických souvislostí vzorců, které je pro ně snadné bez přemýšlení použít. Náš mozek má tendenci neustále spojovat a hledat vazby mezi vším, co vnímá. Proto automaticky přiřazuje podobně vypadajícím prvkům stejný význam či funkčnost, což je důležité jak pro konzistenci a intuitivnost ovládání, tak i pro vytváření vizuálních vazeb. Několik navzájem podobných prvků, pokud možno uspořádaných v nějakém pravidleném tvaru, např. v jedné linii, považuje uživatel na podvědomé úrovni za sekvenci, posloupnost, kterou snadno a rychle může projít od začátku ke konci. Takovým vizuálním řetězením shodných prvků můžeme vytvářet dobré navigační cesty vedoucí přímo k CTA dané stránky.

Uživatelé stránky více „skenují“, než je čtou. Využívejme tohoto skenování ve svůj prospěch.

Tzv. skenování obsahu neboli rychlé prolétnutí očima, zda nás něco nezaujme, pracuje právě s prioritami a řetězením. Nejprve se zrak soustředí na klíčová místa, nejvýraznější prvky stránky (viz dále) a pak se posouvá buďto po nějaké nalezené sekvenci (tj. přeskočí na další podobný prvek v dohledu), nebo do hloubky po hierarchii obsahu (pokud ji dokáže na první pohled rozpoznat) a tyto dvě činnosti se neustále střídají. Pokud jej zaujme obsah, zaměří se na něj důkladněji, začte se a sleduje jej tak dlouho, dokud drží jeho zájem a plnou pozornost — v opačném případě nastupuje zase řetězení: u dlouhého souvislého textu přeskočí na další a další odstavec a z každého přečte malý kousek; je-li text rozdělen mezititulky, skáče po mezititulcích; pokud je na stránce více kratších článků, přeskakuje po jejich nadpisech; pokud je zde více vizuálně výrazných sekcí či bloků, přeskakuje mezi nimi.

Také toto přeskakování má určitá pravidla. Oko (resp. lidský mozek) postupuje po nejpřirozenějších drahách, nejčastější směr skenování je po diagonále — tak, jak jsme zvyklí číst, od začátku vlevo nahoře po konec vpravo dole (aspoň v zemích píšících latinkou; národy zvyklé psát zprava doleva budou mít tu diagonálu patrně obrácenou). Pokud po cestě nenalezne žádanou informaci, pustí se do pečlivějšího hledání: nejčastěji v kruhu nebo spirále. Přičemž nejprve opět skáče po nejvýraznějších vizuálních dominantách, teprve v dalším kole se věnuje i informacím vizuálně podružnějším.

Příklad na obrázku v předchozí kapitole využívá těchto faktů k vytvoření rychlé cesty k CTA (zde tlačítko k vyzkoušení demoverze). Je zde vytvořena výrazná sekvence (tvořená hlavními nadpisy). Je krátká, pouhé tři kroky ani neumožní uživatele znudit a nechat ho uhnout jinam. A vede přímo k zřetelně vyznačené akci, kterou může návštěvník snadno vykonat. Tato stránka je vytvořena primárně za účelem ukázání cesty k cíli jasnými a zřetelnými milníky. Ten, kdo chce zjistit podrobnosti, může z těchto záchytných bodů odbočit, začíst se do hloubky a snadno se zase vrátit na původní úroveň.

Vždy se snažme jak kotvy a milníky ve stránce, tak i prvky v rámci navigace uspořádat v přímé linii (zleva doprava a/nebo shora dolů), kterou oko uživatele může snadno skenovat. Není-li vodorovná, svislá či diagonální linie právě vhodná, dejme přednost kruhovému či spirálovému uspořádání (s nejdůležitějšími informacemi blíže středu a méně důležitými ve vnějších, vzdálenějších oblastech). Nelze-li použít ani to, uspořádejme tyto dominantní navigační prvky alespoň do nějaké pravidelné sítě — ovšem zde musíme počítat s tím, že tu už mozek nedokáže vnímat najednou a bude ji opět skenovat, v liniích či kruhově.

Mysleme při tom také na tzv. Millerovu magickou sedmičku (podle slavného kognitivního psychologa G. A. Millera), tedy skutečnost, že krátkodobá paměť lidského mozku dokáže efektivně pracovat přibližně se sedmi prvky současně. Pokud naše posloupnost milníků či bodů navigace bude mít řekněme do pěti položek, bude ji návštěvník obvykle vnímat víceméně jako celek a dokáže ji snáze zpracovat. Bude-li mít třeba už deset položek, někde v druhé polovině už zapomene na několik prvních položek, bude se muset v sekvenci vracet a výběr a rozhodování bude mnohem složitější; uživatel bude takovou sekvenci považovat za komplikovanější a méně přehlednou a podvědomě nejprve rozdělovat na sekvence a části menší, které už zpracovat dokáže. Snažme se proto vytvářet tyto navigační sekvence co nejkratší.

Obsahuje-li navigace v jedné úrovni více než 7 položek, měli bychom zvážit její přeuspořádání.

Jako optimální pro každou navigační sekvenci se ukazuje počet 3 až 5 položek. Do tohoto rozsahu by se měli snažit členit obsah i designéři a informační architekti. Jedna položka netvoří sekvenci vůbec (a rozhodně bychom se měli snažit vyvarovat „kategorií“ obsahujích jen jedinou položku), u dvou ještě poměrně silně převažuje binární rozhodování buď–anebo. Teprve tři položky tvoří skutečnou sekvenci a nabídku k výběru. A více než sedm už může být problematické pro vnímání a snadnost orientace. Pochopitelně, pokud jsme si jisti, že do dané úrovně oněch osm položek patří, jiné uspořádání by nemělo logiku a myslíme si, že sem další položky v budoucnu přibývat zaručeně nebudou, ponecháme položek osm. Ale zase opačně: víme-li, že ke stávajícím šesti v budoucnu další dvě tři nejspíš přibudou, měli bychom předhodnotit strukturu aplikace rovnou.

Dominanty a kontrast

Vraťme se zpět k práci s prostorem stránky a jejím vizuálním prioritám. Řekli jsme si, že zrak na nově načtené stránce se nejprve soustředí na dominantní, klíčová místa. Není úplně snadné rozhodnout, které bude to první u každého jednotlivého uživatele, to je poměrně individuální. Ale obecně lze skupinu „hlavních podezřelých“ vymezit poměrně přesněji.

Na stránce bez jednoznačné vizuální dominanty (tzv. eye catcher) hrají hlavní roli tzv. optické osy a optický střed stránky. Tedy místo, kam se nejčastěji jako první zaměří lidský zrak. To je zcela jiné místo než střed geometrický a vychází z rozdělení stránky ve zlatém řezu, což je poměr přibližně 1 : 1,618, velmi častý v přírodě. Lidským mozkem bývá vnímán jako přirozený a příjemný. Považuje se za ideální proporci a dobrý grafik by jej měl znát a umět běžně používat. O zlatém řezu a jeho užití v umění a designu existuje mnoho knih a dalších zdrojů, které rozhodně doporučuji k nastudování. Je smutnou chybou, když grafik pracuje s přesnými geometrickými poměry, a nikoli s těmi optickými. Geometrický střed je použitelný jen u poměrně malých ploch uvnitř zorného pole, ale čím větší pracovní plocha je, tím větší význam má právě střed optický.

Optická osa se používá nejčastěji vodorovná, rozdělující plochu na menší horní a větší dolní část. Uplatnění ale nachází i svislá optická osa, která nám např. naznačuje optimální pozici pro nejdůležitější sloupec obsahu. V místě, kde se svislá a vodorovná optická osa protínají, je klíčové místo plochy, s níž grafik pracuje, tzv. optický střed stránky — místo, kam se soustředí pohled uživatelů nejdříve.

Na obrázku je zobrazený geometrický střed, optický střed v poměru zlatého řezu i zjednodušená konstrukce, která vychází z optického středu v jedné třetině výšky (resp. šířky) stránky, což je běžné praktické zjednodušení zlatého řezu, s nímž často pracují fotografové, výtvarníci i mnohé grafické počítačové programy. Pokud jste někdy při ořezávání fotky ve svém grafickém editoru viděli rozdělení plochy na síť 3×3 a nechápali důvod, je zde přesně kvůli tomuto účelu. Proporce obrazu či fotografie jsou ideální, pokud se nejdůležitější prvky obrazu (obličej, oči, postava, stavba atd.) nacházejí právě v těch klíčových bodech, kde se protínají optické osy, zatímco geometrický střed obrazu zůstane spíše prázdný či neutrální. S optickým středem stránky musíme pracovat jak na úrovni celé stránky, tak i v rámci jejích částí, rámečků, ilustrací atd.

Dalším prvkem, který primárně přitahuje pozornost, jsou vysoce kontrastní místa. Kontrastní prvek, tedy takový, který se výrazně odlišuje od svého okolí, nad svým okolím také patřičně ční a přitahuje pozornost. Možností, jak ovlivnit vizuální kontrast, je ale více. Nejvíce nasnadě je pochopitelně kontrast barevného jasu: tmavý prvek ve světlém okolí, či naopak zářivě světlý na tmavém pozadí jsou nejobvyklejší aplikací optického kontrastu. Podobně generují vyšší kontrast i různé atributy grafiky, které vytvářejí kontrastní plochy nepřímo: plocha s větším/tučnějším písmem, hustota vzorku na pozadí, větší koncentrace drobných prvků atd. Do jisté míry může vytvářet kontrast i výrazně odlišná dominující barva, i když zde už to není tak jednoznačné (barvám se podrobněji věnujeme dále). Chcete-li dobře posoudit celkový kontrast různých částí stránky, použijte klasickou fintu: oddálit se od obrazovky a přimhouřit oči tak, až se váš zrak rozmlží a obsah slije do neurčitých skrvn a ploch. Stejně kontrastně, jak vnímáme jednotlivé části stránky vůči jiným, je bude vnímat i návštěvník, který stránku uvidí poprvé.

Pohříchu mnoho grafiků zapomíná na to, jak důležitou roli v designu hraje také prázdné místo. Přitom právě prázdný prostor dokáže zajistit jakémukoli prvku velmi vysoký kontrast vůči okolnímu obsahu.

Platí, že čím informačně a vizuálně bohatší stránka je, tím výraznější kontrast v ní vytváří právě prázdné místo. Na obrázku je zobrazena přibližně tatáž informace s vysokým barevným kontrastem a kontrastem vytvořeným prázdným místem. Je zřejmé, že vizuální účinek je v principu odlišný, ale výsledný kontrast je v obou případech velmi vysoký. V mnoha situacích pak bude využití prázdného místa velmi účinným způsobem, jak určité části obsahu dát požadovaný kontrast a zaměřit na něj pozornost. Není výjimkou, kdy dostatečně velké okraje a výrazný odstup nějaké informace od okolí budou mocným nástrojem pro to, jak ji vypíchnout a zdůraznit. Mnohem účinnějším než snaha o vytvoření kontrastu jinými prostředky.

Jednoduše zobrazený prvek uprostřed prázdné plochy mívá silnější účinek než ten nejdůrazněji zvýrazněný uprostřed jiného obsahu.

Ještě jeden faktor ovlivňuje optickou sílu prvků ve stránce, a to je faktor psychologický. Tedy především emoce, které sledovaný obsah budí v uživateli. Je známým faktem, že lidské vnímání obvykle věnuje nejvýraznější pozornost jiným lidským bytostem, postavám, tvářím, případně zvířatům (roztomilým koťátkům a štěňátkům, ale i nebezpečným šelmám či odpor budícím živočichům apod.), výrazným objektům či scénám přitahujícím pozornost a nějakým způsobem působícím na city. Reklamní designéři už léta vědí, že např. fotografie očí dokáže přitáhnout pozornost více než ten nejsilnější barevný kontrast. Obecně to platí pro každý lidský obličej, postavu, dráždivé partie či křivky lidského těla, snímek interakce dvou a více osob — ale i pro výrazné a žádané předměty, symboly luxusu a jakékoli další objekty, o kterých víme, že v cílové skupině mohou budit nějaké silnější emoce. A neplatí to jen pro obrazové informace, silný může být i text, správně emočně nabité slovo může mít silnější účinek než stejně opticky výrazné slovo budící emoce spíš neutrální. Zde hraje roli hlavně znalost cílové skupiny a zkušenost tvůrců v tom, jak na ni co nejúčinněji působit.

Je jasné, že velký význam zde bude mít opět dostatečný dynamický rozsah, s nímž budeme pracovat. Pokud bude stránka jako celek vizuálně plochá, tzn. všechny prvky obsahu budou mít přibližně stejnou váhu a důraz, budou se v ní všechny výše uvedené techniky pro vytvoření dominantních milníků a výrazných prvků ztrácet a pozbývat smyslu. Abychom dosáhli požadovaného účinku, tedy aby dotyčný prvek byl výrazný, kontrastní a upoutal návštěvníkovu pozornost, musíme vždy pracovat s velkým dynamickým rozsahem. Nezdráhejme se proto pro ty skutečně důležité prvky ve stránce použít výrazně (i několikanásobně) větší a tučnější písmo, opravdu znatelně odlišnou barvu a odstín, do očí bijící prázdné místo, výrazně silně emočně nabité obrázky a fráze. A naopak — nedůležité poznámky a málo podstatné informace se nezdráhejme zobrazit malé, méně kontrastní, opravdu nevýrazné (ale pochopitelně stále dostatečně dobře čitelné). Práce s kontrastem a jeho využití pro zvýraznění priorit a vizuálních vazeb jsou naprosto klíčové pro každý úspěšný vizuální design.

Barvy

Barva je jedním z hlavních nástrojů grafického vyjádření. Pomocí barev a jejich kombinací designér velmi účinně řídí celkové vyznění díla, náladu a generované emoce, ale také významně ovlivňuje ergonomii, srozumitelnost, použitelnost i přístupnost webu. Zatímco to první je spíš otázkou cítění, „grafického oka“, vkusu a talentu, to druhé — pro funkčnost a z pohledu průmyslového designu podstatnější — se lze naučit, vyčíst z teorií barev, ba i spočítat a exaktně měřit. Pro webového grafika jsou proto klíčové především znalosti správné práce s barvami, základních barevných teorií, pouček, ověřených postupů a norem. Vkus a cit jsou pochopitelně také potřebné, alespoň v základní míře. A výrazný výtvarný talent je zajisté výhodou, ale také nezanedbatelným rizikem (jak jsme si už popsali dříve).

Co všechno a jak barvy na webu ovlivňují, jaké jsou hlavní parametry webových stránek určované barvami?

Převažující barevný tón. Jaká je primární barevná informace, kterou uživatel vnímá jako první, jako dominantní. Jaký dojem na nás „dýchne“ při prvním pohledu na stránky webu: je světlý, či tmavý, pestrý, pastelový, tlumený, šedivý, či dokonce černobílý, je teplý, či studený, je spíše do modra, do žluta či opravdu pestrobarevný bez jednoho výrazně převažujícího odstínu?

Barevné schéma. Jaká barva je hlavní, jaké jsou doplňující či kontrastní barvy; ladí použité barvy dohromady, harmonicky se doplňují, nebo naopak tvoří neustálé kontrasty? Jsou použity podobné, v paletě sousedící odstíny, nebo naopak navzájem protilehlé, doplňkové? Působí použité kombinace barev spíš uklidňujícím a oku lahodícím dojmem, nebo je naopak barevné schéma živé až nervní?

Vnímání barev a přístupnost. Dokáží barevnou informaci správně interpretovat i uživatelé s poruchami vidění a barvocitu? Není nějaká podstatná informace závislá pouze na barvě, takže osobám s poruchami barevného vidění (nebo třeba po vytištění na černobílé tiskárně) zůstane nedostupná? Nejsou použity kombinace barev, které za určitých okolností působí nepříjemně a zhoršují, či dokonce znemožňují vnímání obsahu? Je kontrast všude dostatečný?

Logický systém. Poznáme na první pohled, které barvy jsou hlavní, a které doplňkové? Chápeme, jaký význam která barva nese? Je zde jasně vymezený a srozumitelný systém a jednoznačně přiřazené významy?

Symbolika. Působí barvy správně na emoce a respektují záměry webu i kulturní zvyklosti cílového publika?

Volba celkového barevného tónu a schématu webu může být už součástí základního zadání projektu. Jak klient, tak designér (s ohledem na parametry cílové skupiny, na konkurenci a celkovou situaci na trhu atd.) mohou uvést ve specifikaci požadavek, že vizuální podoba webu má působit určitým konkrétním způsobem. Může zde být výslovně uvedeno, že web má být světlý, lehký, s teplými pastelovými barvami, či naopak tmavý, působící industriálním dojmem, že celá prezentace má být laděna v barevném tónu firemního loga, že barevné schéma má dodržovat korporátní identitu dle grafického manuálu firmy — či naopak že nesmí být laděný do fialova nebo třeba do zeleno--žluté kombinace, typické pro klíčového konkurenta atd. Bývá to ale spíše výjimkou, barevné schéma je často zcela na rozhodnutí grafika. Nicméně pokud již existuje nějaká vizuální identita klientovy firmy či produktu, pro který se web navrhuje (a není jasně vysloveným požadavkem ji měnit), měl by ji grafik bez většího přemýšlení dodržet. A to i když není explicitně definovaná, nedostaneme firemní grafický manuál, ale přesto bude zřejmá. Používá-li klient modro-bílé logo, podklady přinesl na modro-bílém hlavičkovém papíře v modro-bílých deskách, nemusíme příliš přemýšlet nad barevným schématem a automaticky budeme počítat se stejně modro-bílým vzhledem webu.

Barevný tón

Ne vždy je ale barevné schéma předem určeno či jakkoli omezeno. Buďto firma či produkt dosud nemá jasnou vizuální identitu, nebo se má vytvořit design, který nemá s firemním stylem nijak souviset, a cílem je vytvořit styl úplně nový a unikátní. Pak je zcela na grafikovi, jaké barvy zvolí. Prvotní rozhodování o barevném tónu by mělo probíhat hlavně na úrovni úvah o celkovém vyznění, požadovaných emocích, o hlavním tématu webu, příp. i o zavedených standardech, kulturních zvyklostech atd. Web pro děti by asi neměl být tmavý, stránky věnované trávníkům patrně budou často zelené, cestopis o polární výpravě laděný do bíla. Web zábavního parku asi bude sytě barevný a pestrý, zatímco stránky bytového designéra spíše uměřeně pastelové a prezentace uměleckých děl nebo fotografií bude vyloženě tlumená a bude šetřit barvami, aby rozhraní webu zbytečně nekolidovalo s výrazným obsahem. Web věnovaný nějaké konkrétní zemi nejspíš bude pracovat s jejich národními barvami, web lékařský s chirugickou bílou a tyrkysovou, u webu zavedené právnické firmy bychom měli přinejmenším zvážit klasickou konzervativní kombinaci tmavě modré a červené. Stránky věnované příjemným a milým tématům budou laděné spíše do teplých barev (v paletě od fialové přes růžovou, červenou, oranžovou po žlutou až žlutozelenou), stránky mající působit seriózně či industriálně pak spíše do studených barev (opačná část barevného kruhu, od zelených přes tyrkysové a azurové odstíny po modré, modrofialové až k temnějším purpurovým).

Při volbě barev nesmíme zapomínat na jejich různé konotace, kulturní a náboženskou symboliku, marketingové vazby nebo třeba popkulturní odkazy. Jak jednotlivé barvy, tak i určité barevné kombinace v různém kontextu, v různém prostředí a u různých skupin uživatelů mohou vzbuzovat všemožné představy a emoce. A je důležité vybrat barvy tak, aby to byly představy a emoce pozitivní, a vyhnout se těm nežádoucím a negativním. V euroamerickém křesťanském prostředí se například barva černá považuje za barvu smutku, barva bílá je naopak barvou slavnostní — zatímco v jiných kulturách, např. asijských, to může být přesně naopak. V kontextu politiky mají zase silný význam různé barevné kombinace: pro republikány nejspíš budou téměř urážkou rudo-žluté barevné kombinace typické pro komunistickou symboliku, někdo nebude nadšený z černo-červené palety evokující zase symboliku nacistickou, odstíny zelené nebudou příliš vítat strany vymezující se proti „zeleným“ politickým oponentům atd. V prostředí byznysu je zase důležité pracovat s firemními barvami a korporátními identitami, a to nejen zadavatele, ale i jeho konkurentů a s ohledem na celé tržní prostředí. Pokud náš klient spouští web svého nového produktu, přičemž web jeho hlavního konkurenta je známý svým výrazným žlutým designem, bude patrně velmi zásadní se žluté zcela vyhnout (anebo naopak použít co nejpodobnější barevné schéma, pokud klient chce soupeřit s konkurencí právě tímto způsobem). Pro seriózní a konzervativní weby budou asi jen málokdy vhodné veselé barvy a rozpustilé barevné kombinace (i když vytvořit např. prezentaci právní kanceláře v růžovo-oranžové kombinaci vyčnívající mezi konkurencí je zajisté velkou výzvou pro každého grafika), a naopak pro odlehčený a zábavní obsah nebudeme volit barvy temné a ponuré. Chtít navrhnout bulvární magazín či dětský web v tmavých a studených barvách už asi nelze považovat ani za výzvu…

Barevná schémata

Když máme stanovený celkový tón a vyznění, vytvoříme si barevné schéma a paletu webu. Ta by měla být vždy tvořena jednou barvou primární, která bude na stránkách dominující, a případně jednou či více barvami doplňkovými. Musíme zde ovšem rozlišovat základní barvy coby jednotlivé prvky spektra, místa na barevném kruhu (hue) — a jejich odstíny (shade), tj. všemožné varianty vytvořené různými stupni sytosti a světlosti téže základní barvy. Platí přitom, že zatímco různých odstínů téže barvy unese webová stránka (stejně jako jakékoli jiné výtvarné dílo) poměrně hodně bez větší estetické újmy, na více navzájem různých základních barev je oko podstatně citlivější a příliš mnoho (nebo nevhodně vybrané kombinace) vnímá jako rušivé až nepříjemné. Možností, jak doplňkové barvy k vybrané základní barvě vhodně vybrat, je spousta — nicméně klasické teorie barev, používané umělci již od antiky, doporučují několik základních barevných schémat, která se ukázala jako nejpříjemnější a lidskému oku nejvíce lahodící. A v grafické praxi také nejpraktičtější, protože vytvářejí skupiny barev, které spolu dobře fungují a dají se aplikovat v mnoha různých vzájemných kombinacích.

Bílá, černá a stupně šedi mohou fungovat jako doplňkové odstíny jakékoli barvy.

Základní schémata se dělí především podle počtu použitých barev.

1 barva neboli monochromatické schéma. Tedy schéma tvořené různými odstíny jediné barvy, podobně jako černobílá fotografie obarvená do jednoho barevného tónu, jako monochromatický displej starých počítačů. Protože černá, bílá a všechny stupně šedi mezi nimi jsou vlastně také odstíny vybrané barvy, není výsledná paleta až tak chudá, jak by se mohlo zdát, a monochromatický design může být svým způsobem vizuálně zajímavý a za určitých okolností dostatečně funkční. Jednobarevné schéma je ale vhodné spíše pro technicistní weby, případně tam, kde potřebujeme uživatelské rozhraní spíše nenápadné a tlumené (např. proto, aby vynikl pestrý obsah). Nejčastěji se používá tak, že se do palety webu vybere několik spíše lehkých, pastelových odstínů základní barvy, obvykle až na hranici šedi, a doplní se jedním či dvěma sytými a výraznými odstíny, které se použijí pro akcent a zvýraznění.

2 barvy: monochromatické schéma s akcentem. Stejně jako předchozí monochromatické schéma, jen místo výrazného odstínu základní barvy je pro akcenty a zvýraznění použita barva jiná, typicky doplňková, komplementární (viz dále). Druhá barva poskytuje schématu výrazné oživení a zpestření a dvoubarevné schéma je poměrně často používáno — především v rozhraní aplikací. Základní barva je použita pro většinu prvků, pozadí rámečků atd. a barva doplňková pro zvýraznění vybraných položek, hlavních tlačítek atd. Je zvykem i celkem logickým požadavkem, aby akcentová doplňková barva byla použita především v sytém, výraznějším odstínu a prvky zobrazené touto barvou byly umístěny na pozadí základní barvy v odstínu lehkém, pastelovém, málo sytém a poměrně světlém (či naopak hodně tmavém), aby akcentová barva náležitě vynikla. Časté kombinace opačných, doplňkových barev jsou světle béžová-modrá (a naopak lehká ocelově modrá s temnější oranžovou), žlutozelená s fialovou, cihlově oranžová s tyrkysovou či obligátní „sváteční“ červeno-zelená kombinace.

3–4 barvy: sousední (analogické) barvy. Základní barva se doplní dvěma barvami sousedícími s ní na barevném kruhu. Toto schéma vytváří příjemnou a libě působící kombinaci více či méně podobných barev. Blízkých a spřízněných, všechny ze stejné části barevného spektra. Schéma působí celistvě, harmonicky, všechny barvy jsou jednotně teplé, či naopak všechny studené. Chceme-li design milý, přátelský, nekonfliktní a elegantní, bez větších výstřelků a excesů, měli bychom sáhnout právě po takovém barevném schématu. Do schématu lze přidat ještě akcent, tedy obvykle doplňkovou barvu k barvě základní.

3–4 barvy: dělený kontrast. Je podobné schématu s jedním akcentem, pouze místo jedné doplňkové barvy jsou použity barvy dvě, na barevném kruhu umístěné rovnoměrně po obou stranách doplňkové barvy (která ale použita být nemusí). Měly by být dostatečně daleko od sebe, aby mezi nimi byl zřetelný rozdíl, a stále tolik, aby působily jako doplněk k barvě hlavní. Speciálním případem je pak tzv. triáda, tedy barevné schéma, kde jsou všechny tři barvy rozmístěny rovnoměrně ve třetinách barevného kruhu (po 120°), tedy obě doplňkové barvy s hlavní barvou tvoří rovnostranný trojúhelník. Toto schéma poskytuje hned dva akcenty, kterými je možno kontrastně doplnit primární barvu, a poskytuje bohatší nástroje pro kreativitu a více možností, jak jednotlivým barvám přidělit významy. Ovšem čím dále jsou ony vedlejší barvy od sebe, tím více je schéma živé, pestré, ale také méně kompaktní. A v onom krajním případě triády pak tři rovnocenné barvy ze tří částí spektra vytvářejí již velké napětí, potlačují význam barvy primární, dávají stejný důraz každé z nich a pro grafika je už mnohem náročnější zvládnout přiřazení barev významům a uhlídat celkové vyznění stránek. Také do tohoto schématu můžeme přidat doplňkovou barvu k barvě hlavní a mít tak vlastně tři typy akcentů.

4 barvy: dvoupárové schéma. V tomto případě nemáme jednu základní barvu, ale pracujeme se dvěma rovnocennými základními barvami a s jejich doplňky. Pokud jsou tyto 4 barvy rozloženy rovnoměrně po 90° kolem barevného kruhu, nazývá se toto specifické schéma tetráda. Dvoupárové schéma (a tetráda obzvlášť) vytváří paletu velmi pestrou až nesourodou a je už poměrně náročné ji v designu zvládnout a zkrotit. Tato paleta nám neposkytne žádný harmonický a barevně vyvážený vzhled, ale pokud potřebujeme design skutečně pestrobarevný, živý nebo třeba až estrádní, je toto schéma ideální volbou.

Další schémata. Vyjmenovaná barevná schémata nejsou pochopitelně ani zdaleka jediná možná. Tyto základní varianty můžeme např. rozšiřovat o další barvy a místo tří použít třeba pět sousedících, analogických barev v řadě. Stejně jako jsme vytvořili dvoupárové schéma, můžeme vytvořit tří- nebo čtyřpárové (se třemi, resp. čtyřmi základními barvami). Můžeme barvy umístit asymetricky a vytvořit schéma zcela protichůdné těmto osvědčeným paletám, pro skutečně nervní až psychedelické barevné kombinace.

Nicméně u barev obzvlášť platí, že méně je více, a více než tři, nejvýše čtyři barvy bychom používat neměli. A přejeme-li si, aby barevné schéma působilo spíše ladně a harmonicky než provokativně, měli bychom použít jedno z výše uvedených základních schémat a barvy volit symetricky kolem či přesně naproti zvolené základní barvě.

Teorie barev

Zde je ovšem namístě připomenout jeden důležitý fakt. Tyto klasické teorie barev jsou velmi staré, používané umělci od pradávna a osvědčené staletími. A proto také vycházejí z prastarého, klasického barevného kruhu založeného na malířské paletě, a nikoli na dnes obvyklých barevných modelech. Současný RGB model vychází z fyzikálního pojetí skládání barev ze tří základních složek světla: červená (R, red), zelená (G, green) a modrá (B, blue) a najdeme jej prakticky ve všech přístrojích, kde se pracuje s barvami: v nastavení monitorů a televizorů, v grafických programech, ve videotechnice, v elektrotechnice atd. V tisku používaný model CMYK zase skládá barvy mícháním základních tiskových pigmentů: azurová (C, cyan), purpurová (M, magenta), žlutá (Y, yellow) a černá (K, blacK). Pokud ale vytvoříme barevný kruh založený na některém z těchto modelů, zjistíme, že výše popsaná barevná schémata moc dobře nefungují a barvy až tak dobře neladí. Doplňkové barvy pak nefungují vůbec: protějškem červené je v RGB ta nejjedovatější světle tyrkysová, naproti zelené je růžová atd., mnohé z těchto párů vytvářejí barevné kombinace pro oko spíše nepříjemné. Tzv. studené barvy zabírají více než polovinu kruhu a barvy teplé jsou znevýhodněny.

Klasický barevný kruh však nevychází z tohoto inženýrského pojetí barevného spektra, ale více z toho, jak barvy vnímá lidské oko a mozek. Základními barvami jsou červená, žlutá a modrá, které jsou rozmístěny rovnoměrně v třetinách barevného kruhu. Teplé a studené barvy jsou v rovnováze, půl na půl. Takže doplňkové, komplementární barvy jsou tvořeny páry skutečně se doplňujícími, dostatečně kontrastními a příjemně působícími. Párovým doplňkem žluté je tmavě fialová, k oranžové azurově modrá, k tmavě modré patří žloutková, k purpurové žlutozelená. A co je hlavní, přesným doplňkem čisté červené je zde čistá zelená, tedy ta typicky vánoční kombinace, kterou mnozí znají jako typický příklad doplňkových barev. To, zda je doplňkem červené zelená, nebo jiná barva, je hlavním rozpoznávacím znakem toho, zda je použitý barevný kruh vhodný pro umělecké, nebo spíše pro technické účely. Jako grafici bychom se měli snažit pracovat právě s barevným modelem, kde je v páru červená se zelenou, a nikoli s tyrkysovou, azurovou či jinou barvou. V tomto spektru, na tomto barevném kruhu teprve všechny ty klasické teorie a poučky začnou pořádně fungovat a výše uvedená schémata produkují ty nejpříjemnější a oku nejvíce lahodící barevné palety.

Osobně jsem s tímhle rozporem v barevných modelech a snahou složitě hledat v grafických editorech správné doplňkové a navzájem ladící barvy bojoval dlouhá léta. Až jsem si nakonec vytvořil vlastní aplikaci, která místo RGB pracovala právě s klasickým barevným kruhem a používala onu klasickou teorii barev. Tato webová aplikace postupem let rostla, prošla mnoha verzemi a dnes je z ní už poměrně silný nástroj jménem Paletton, který kromě mě používají už miliony designérů i amatérů po celém světě. Je k dispozici zdarma na adrese paletton.com a můžete si v něm vyzkoušet nejen všechna základní barevná schémata, ale i mnoho dalších užitečných funkcí zmíněných dále (simulaci poruch barevného vidění či špatného zobrazení barev na nekvalitních zařízeních, výpočet kontrastu různých odstínů různých barev atd.).

Pokud máte zájem dozvědět se o klasické teorii barev a klasickém barevném kruhu ěco víc, doporučil bych začít třeba na Wikipedii s hesly Color theory a Color wheel a ve studiu případně pokračovat přes tam nalezené odkazy.

Paleta webu

Barevné schéma je ale pouze základ. Když si vybereme hlavní, základní barvu (která bude dominovat celkovému tónu webu), barvy doplňkové a případně barvu akcentovou, musíme si také ke každé z barev sestavit sadu různých odstínů: lehké velmi světlé (či velmi tmavé) pro tónovaná pozadí, sytější odstíny pro výrazné prvky, tmavší odstíny pro texty atd. Z těchto odstínů vytvoříme paletu webu, která bude výchozí pro obarvení všech prvků na všech stránkách. U základní barvy můžeme potřebovat odstínů více, řekněme i tucet, u ostatních barev bychom měli použít odstínů méně; u barvy doplňkové (akcentové) nejméně, jen cca dva tři.

Každý odstín by přitom měl mít jasně definovaný účel a použití (pozadí výchozího tlačítka, pozadí tlačítka po najetí myší, barva základního textu, barva odkazů, pozadí stránky, barva ikon atd.) a měli bychom pak všude používat pouze barvy definované v paletě a v souladu s jejich předepsaným účelem. Pochopitelně stejný odstín můžeme použít podle potřeby k více účelům, stejnou barvou například můžeme zobrazit pozadí položek menu, záhlaví tabulek a třeba rámečky tlačítek. Ale všechny typické barevné informace v designu webu by měly mít jednoznačně přidělenou svou barvu — pokud přidáme do stránky tlačítko, bude mít automaticky barvu určenou pro tlačítka v naší paletě. Stejně jako každý další prvek použitý ve stránkách bude mít jednoznačně přiřazen jeden konkrétní odstín z palety.

Každá ze základních barev použitých v paletě musí mít určen jednoznačný význam.

Především je nutné vyhradit celou jednu základní barvu pro aktivní prvky (obvykle to je barva primární, či naopak akcentová), jíž budou zobrazeny všechny aktivní odkazy, tlačítka, položky menu, ovládací prvky ve formulářích atd. A současně už nesmí být použita k jinému účelu. Uživatel totiž musí snadno a bez většího přemýšlení zjistit, že např. na všechno, co je modré, lze kliknout a provést nějakou akci — a žádný aktivní prvek není zobrazen jinou barvou než modrou. Tato konzistence je vždy velkým pomocníkem pro intuitivnost, snadné pochopení a pohodlné používání webu. Máme-li jen jednu barvu, vyhraďme si pro aktivní prvky její nejsytější odstín, výraznější a jasně odlišitelný od všech ostatních. Máme-li v paletě akcentovou barvu, můžeme použít ji. Pracujeme-li v designu s třemi a více barvami, musíme jejich význam rozdělit a vymezit ještě pečlivěji.

Trochu speciální přístup si vyžadují odstíny šedé. Šedá je vlastně speciální odstín libovolné barvy, šedá je kterákoli barva s nulovou sytostí. Když budeme nějaké barvě ubírat sytost, skončíme nakonec u šedé. Světlost pak určuje stupeň šedé, nesvětlejší šedá je bílá, nejtmavší černá. Jsou přitom dva vhodné způsoby, jak s šedými odstíny v designu nakládat. Buďto je můžeme považovat za další samostatnou barvu v paletě a nakládat s ní podobně jako s odstíny ostatních barev. Anebo můžeme šedé odstíny prohlásit za speciální odstín jedné z barev použitých v paletě (obvykle primární barvy) a používat je tak. Bílá a nejsvětlejší šedé stejně jako černá a nejtmavší šedé mají přitom specifické postavení a obvykle se používají pouze pro pozadí stránek a větších ploch a pro texty a další podobný obsah na popředí.

Příklad vymezení významu barev. Použili jsme pro web základní oranžovou barvu a analogické barevné schéma, tedy doplnění o sousední červenou a žlutou, a navíc jsme přidali komplementární modrou coby akcentovou barvu. Oranžová je přitom základní firemní barva a bude na webu dominantní. Oranžové bude logo, další oranžovou použijeme na grafické prvky přímo související s prezentací firmy, na infografiku a ilustrační ikony. Akcentová modrá bude použita výhradně na aktivní prvky — všechna tlačítka, odkazy, vše, nač se dá kliknout, bude zobrazeno stejnou modrou. Použijeme i lehčí méně syté odstíny na sekundární tlačítka, zvýraznění položek menu atd. K modrým odstínům připojíme i střední odstíny šedé, použijeme je třeba pro neaktivní odkazy nebo méně výrazná tlačítka. Bílou a nejsvětlejší odstíny šedé stejně jako černou a velmi tmavé šedé ale použijeme pro pozadí stránek a texty. Odstíny vedlejší červené a žluté barvy budou konstrukční a výplňové barvy, použijeme je na obarvení stavebních prvků stránek — rámečky, boxy, nadpisy, záhlaví a řádky tabulek atd. Většina obsahu všech stránek tedy bude tvořena ponejvíce kombinacemi žlutých a červených odstínů, připravíme si jich tedy dostatek — od bledých, téměř šedých a velmi světlých pro různá pozadí, linky a rámečky po ty nejsytější (např. pro upozornění a varování). Celý design webu tedy bude vytvořen především různými odstíny žluté a červené v kombinaci s bílým a velmi světle šedým pozadím a černým či tmavě šedým textem, v němž budou oranžově zvýrazněny hlavní prezentační prvky a informace související s firmou a modře (či šedě) pak všechny aktivní prvky, odkazy, tlačítka apod. Hlavní navigace bude modro-oranžová, přičemž oranžová bude sloužit k vyznačení právě vybrané stránky či sekce. Náhled palety viz [2]

Dobře vymyšlená paleta, přidělení významu jednotlivým základním barvám i přiřazení jejich jednotlivých odstínů konkrétním grafickým prvkům jsou důležité i pro nás, pro vývoj webu i jeho následnou údržbu. Pokud bychom tvořili odstíny průběžně a náhodně podle okamžité potřeby, skončíme u nepřehledného chaosu spousty velmi podobných barev, v nichž se už nikdy pořádně nevyznáme.

Jasně definovanou paletu s přidělenými významy odstínů pak oceníme hlavně při potřebě přebarvit celý web či vytvořit jinou barevnou variantu (skin). Zde jsou velkým pomocníkem moderní nástroje pro stylování (Less, Sass, Stylus apod.), které umožňují kodérům si barvy pro celý web předdefinovat na jednom místě a dále pak všude ve stylopisech používat pouze odkazy do takto vytvořené tabulky barev. Změna jedné barvy na celém webu nebo kompletní přebarvení jsou pak nesmírně snadné a spočívají v přepsání jediné hodnoty. A nejen to: tyto nástroje obsahují i matematické funkce pro manipulaci s barvami, místo zapsání konkrétní barvy můžeme pouze říci, že dotyčná barva má mít třeba 50% sytost a 25% jas jiné už definované barvy, můžeme barvy navzájem míchat, nasytit či nechat vyblednout, zesvětlovat, ztmavovat… Pomocí těchto funkcí tam můžeme nadefinovat libovolný odstín základní barvy, takže definice barev pak bude obsahovat pouze hodnotu jedné až čtyř základních barev a všechny jejich odstíny budou vypočítané pomocí těchto vzorců. Stačí pak změnit hodnotu základní barvy a celý web se příslušně přebarví při zachování všech poměrů jasů a sytostí.

Nechte dřinu strojům!

Pokud tento postup při kódování webu ještě nepoužíváte, rozhodně vám jej doporučuji. Zapisovat ručně do stylopisů kódy všech jednotlivých barev na všech místech jejich výskytu je už poněkud zastaralý a velmi nepraktický postup.

Barvy: použitelnost a přístupnost

Použité barvy a jejich vzájemné kombinace je také důležité posuzovat z hlediska použitelnosti a přístupnosti. Na většině soukromých a komerčních webů touto optimalizací vzájemných kombinací barev „pouze“ vylepšujeme uživatelský prožitek a usnadňujeme návštěvníkům vnímání obsahu webu a potažmo jeho používání. U některých webů, hlavně u prezentací úřadů, institucí a dalších organizací chráněných a limitovaných zákony a normami, jsou ale konkrétní parametry barev a jejich kombinací předmětem poměrně přesných a přísných pravidel přístupnosti, která tyto weby musejí ze zákona dodržet.

Nejčastěji tyto předpisy chrání zrakově indisponované uživatele a hlavním zájmem je zajistit dostatečný kontrast: jak informací na popředí (obvykle textů) vůči pozadí, tak i sousedících prvků. A to za všech okolností pro osoby slabozraké — zde je prvořadé nebránit uživateli výrazně si zvětšit text a další prvky, ale i zajistit dostatečný kontrast obsahu nad pozadím — i pro všechny, kteří mohou dostat barevnou informaci zkreslenou, neúplnou, či dokonce žádnou. Tedy jak pro uživatele se zhoršeným barvocitem i závažnějšími poruchami barevného vidění, tak třeba i pro ty, kterým barvy změní či zcela odstraní použité zobrazovací zařízení — od monochromatických obrazovek a černobílého tisku po nekvalitní zobrazovací zařízení či nepříznivé světelné podmínky při používání webu.

Webová stránka musí být funkční a použitelná i v černobílé verzi.

Nejčastěji aplikovanou a zmiňovanou normou jsou pravidla WCAG (Web Content Accesibility Guidelines), především známé kritérium 1.4.3, specifikující minimální kontrast. Vzorce a pravidla pro výpočet minimálního požadovaného kontrastu nejsou úplně jednoduché a snadno pochopitelné (nejprve je potřeba spočítat luminanci posuzovaných barev a pak podle konkrétního předepsaného vzorce jejich vzájemný poměr), ale pro hrubé přiblížení stačí počítat s tím, že ve stránce převedené do černobílé podoby se musí popředí a pozadí lišit aspoň o 50 procentních bodů stupně šedé. Tj. na pozadí odpovídající 25% šedé musí být zobrazený obsah alespoň 75% šedou. Na 50% šedé může být text 100% šedou (černá) či 0% šedou (bílá). Je to ale jen orientační hodnota, skutečný výpočet požadovaného kontrastu podle WCAG je mnohem složitější a počítá i s velikostí písma (velké a výrazné prvky musí mít poměr luminancí vůči pozadí nejméně 1:3, zatímco běžný text alespoň 1:4,5).

Požadavek na rozdíl popředí a pozadí o 50 % stupňů šedé je dostatečným praktickým přiblížením pro grafické návrhy.

Zde ještě jednou zmíním aplikaci Paletton.com. Ta totiž kromě základního kombinování dobře spolupracujících barev a náhledů různých aplikací vytvořených palet poskytuje také spoustu nástrojů právě pro zlepšení použitelnosti a přístupnosti. Jednak zde najdete několik simulátorů barevného vidění, od různých typů poruch vnímání barev po simulaci vzhledu barevné palety na špatném monitoru, při nekvalitním tisku či při nízké sytosti či v černobílém zobrazení. A také je zde k dispozici tabulka všech vzájemných kombinací všech barev v paletě s jejich vypočteným kontrastem právě podle metodiky WCAG. Takže je snadné rychle vybrat barvy popředí a pozadí, které mají dostatečný požadovaný kontrast.

Intenzita barvy

Jedna věc se ovšem zohledňuje velmi málo, a dokonce ani pravidla WCAG na ni příliš nepamatují. A tou je síla tahu. Se stále přibývajícími zobrazovacími zařízeními s velmi jemným rozlišením (Retina, 4K displeje ad.) však tento parametr nabývá na důležitosti i pro běžný grafický design i bez potřeby vyhovovat nějakým pravidlům přístupnosti. Zjednodušeně řečeno, tenká šedá či barevná čára o tloušťce jednoho pixelu zobrazovacího zařízení bude působit jako mnohem světlejší prvek než silnější čára či větší plocha téže barvy. Tento fakt je potřeba zohlednit a u tenkých linek a především u textů používat odstíny úměrné síle tahu a řezu písma. Má-li text působit jako zobrazený stejnou barvou jako sousedící plocha či ikona nebo jiný grafický prvek, musí být jeho barva kontrastnější nepřímo úměrně síle tahu. Čím tenčí, tím výraznější.

Posuďte sami na příkladu textu umístěného vedle jednobarevné ikony. U velmi tučného textu budou identické barvy textu a ikony vnímány jako shodné. Čím tenčí písmo ale použijeme, tím světlejším odstínem bude táž barva textu působit. Na obrázku vpravo je pak pro tenčí řezy písma použita úměrně tmavší barva pro zachování shodného dojmu:

Proto se v praxi osvědčilo mít ke každému odstínu, jímž budeme obarvovat nějaké plochy či výraznější grafické prvky, v paletě připraven odstín téže barvy o stupeň tmavší, který použijeme pro texty, aby působily dojmem stejné barvy. Především u velmi častých kombinací ikona + text je ta disproporce, kdy relativně tenké písmo vypadá zřetelně světlejší, než je barva sousední ikony, velmi častá. Asi by bylo možné vymyslet a spočítat nějaké konkrétní číslo, přesný koeficient, o kolik by měla být barva textu tmavší podle řezu a tloušťky písma pro každý používaný font, ale praktičtější je zde použít jen vlastní cit a odhad a přimhouřené oči a nastavit odstín písma ručně tak, aby odstíny pocitově odpovídaly a působily přibližně jako stejná barva.

Grafické prvky

Prostorové uspořádání a barvy určují celkový dojem grafického návrhu, ale to, co jej nakonec dělá jedinečným a specifickým, jsou až konkrétní grafické prvky použité ve stránce — logo, ikony, ilustrace, fotografie, animace, typografie, ovládací prvky i drobné detaily (linky, rámečky, stíny, vzory, ornamenty). Kreativní práce s prostorem a barvami může být považována za autorský záměr, ale až na samotných grafických prvcích se ukáže v plné nahotě grafikův rukopis, styl, podstata jeho práce.

Je to právě styl, který je pro grafický design nejpodstatnější. A to hned z několika ohledů, grafický styl musí být především:

konzistentní

unikátní

přiměřený

Jednotnost grafického stylu je určitě nejzásadnější parametr. Špatný a amatérský design se pozná právě podle nekonzistence a větší či menší rozháranosti jednotlivých grafických prvků. Pro weby tvořené negrafiky je typická nesourodá skládanka prvků posbíraných bez ladu a skladu z kdovíjakých zdrojů, ikony z jedné sady, ilustrace z jiné — a to v tom lepším případě, v extrémních případech můžeme vidět dokonce každou ikonu a ilustraci v úplně jiném stylu, z očividně jiného zdroje, od jiného autora.

Zde nemůžeme nezmínit otázku autorského práva a legálnosti kopírování grafických prvků z externích zdrojů. To je na odpovědnosti každého grafika a případné následky porušení zákona musí nést sám. Zodpovědného profesionálního grafika ani nenapadne, že by si jen tak odněkud zkopíroval obrázek, který se mu zrovna líbí, a použil ho do svého designu. Klíčovým slovem je tady licence, kterou musíme mít ke každému grafickému prvku použitému ve svém návrhu — ve vhodné verzi a s právy k užití pro ty účely a za podmínek, za nichž postupujeme svůj design klientovi.

Všechno na internetu má nějakého autora, vztahují se na to autorské zákony a k užití potřebujeme licenci, svolení autora.

Ale otázky autorského práva zde v tuto chvíli pomiňme — stejně jako mnoho jiných oblastí zmíněných v této knize tato problematika dalece přesahuje její rozsah a možnosti. Musíme se spokojit s tím, že je pro každého grafika naprostou nutností si autorské zákony náležitě nastudovat a ve vlastním zájmu je co nejúzkostlivěji dodržovat. A vraťme se zpět ke stylu našeho grafického návrhu.

Neboť jeho jednotnost jde ruku v ruce s další zmíněnou vlastností, kterou je unikátnost. Pokud pomineme případy, kdy coby grafik sáhneme po nějaké kompletní stavebnici grafických prvků, vytvořené v konzistentním stylu nějakým jiným grafikem, a design z ní pouze poskládáme (což lze za vlastní grafický návrh považovat jen s hodně přimhouřenýma očima), máme už jen jednu možnost, jak jednotného stylu dosáhnout: celý jej navrhnout sami, ve svém vlastním stylu. A je to právě osobitý autorský rukopis, co tvoří pěkný, zajímavý a unikátní grafický design.

Nebojme se být sví a hledat si vlastní výrazný a rozpoznatelný styl vizuálního vyjadřování. To je totiž v dnešní době cenná devíza, významná hodnota, s níž se může grafik prosadit. V opačném případě možná získáme „jistotu“ stálého místa řadového univerzálního grafika v agentuře, který umí podle zadání nasekat sterilní designy podle osvědčených vzorů, ale jsou-li naše ambice vyšší a chceme-li se stát grafiky vyhledávanými, je vedle samozřejmé kvality, profesionality a odbornosti výrazný autorský rukopis tím, co musíme potenciálním klientům nabídnout. Trh webdesignu je obrovský, denně po celém světě vznikají tisíce nových webů a mnoho zadavatelů touží po unikátnosti a osobitém designu. Pokud si budou vybírat, musí se náš styl do jejich širšího výběru vůbec dostat. A to se stane jen tak, že vytvoříme alespoň pár prací ve svém vlastním stylu, který z nich bude zřejmý na první pohled, a takové portfolio můžeme nabízet. Portfolio, kde je každý web v úplně jiném stylu — ne-li dokonce očividnou nápodobou stylu někoho jiného — je užitečné pouze pro přijímací pohovor do oné agentury, která hledá již zmíněného univerzálního a přizpůsobivého kresliče. Pro ostatní je ale naprosto nezajímavé a přejdou ho bez mrknutí oka, takových je dvanáct do tuctu. Ale portfolio prací v jednotném stylu, se zřetelným autorským rukopisem, to zaujme vždy. A i když třeba tento styl hned nepoužijí, tak někdy příště, kdy bude vhodnou volbou, si na něj okamžitě vzpomenou a nebudou se zdržovat tím otravným vybíráním…

Klíč k úspěchu: najít si vlastní styl a být svůj. Kopírování cizích stylů je cesta do zapomnění.

V neposlední řadě musí být grafický styl přiměřený, odpovídající zadání, požadavkům a potřebám klienta. Roztomilé ilustrace na webu instituce státní správy nebudou fungovat, stejně jako strohý industriální design webu komerčního rádia nebo drsný grungeově-streetartový styl na hravém webu pro předškoláky. Vždy musíme najít správnou formu a vizuální jazyk přiměřený potřebám výsledného díla. Pokud se správně netrefíme, bude náš třebas kvalitní, konzistentní a unikátní design nakonec úplně k ničemu.

Vizuální identita

Každý návrh, volba barev i grafického stylu by měly začít od vizuální identity klienta (či jeho značky, produktu, služby). Pokud už existuje taková vizuální identita použitelná pro web, má grafik mnoho práce usnadněno. S mnoha problémy se nemusí trápit, nemusí vymýšlet logo, jeho grafické deriváty, barevná schémata, vhodné kombinace písem — a vlastně ani nesmí. Všechny tyto věci dostane předepsané od klienta v grafickém manuálu, manuálu korportání identity (CI) či přímo v knize značky (brand book) a musí je dodržet. Je ale nutné přiznat, že jen výjimečně je v takovém manuálu (pokud vůbec existuje) předepsána nebo nějak striktně definována podoba webové prezentace. Daleko častěji zde najdeme obecná pravidla, jazyk vizuální komunikace, pokyny pro aplikaci loga apod. Zbytek je už čistě na naší invenci. Nicméně tato pravidla musíme považovat za závazná a musíme se jimi řídit. Ovšem z vlastní zkušenosti mohu říci, že více nežli omezení jsem to vždy vítal jako nesmírně užitečnou pomoc. Nástroj, který mi jednak ušetřil spoustu práce a jednak taková předem daná pravidla příjemně vytyčí hřiště a vymezí základní prostor, ze kterého se dobře odráží k další práci.

Mít aspoň nějaká pravidla a aspoň základní požadavky na identitu je vždy lepší než nemít vůbec žádné. Pokud klient nemá absolutně žádnou představu a neurčuje předem žádná pravidla a omezení na grafický design, značí to ve skutečnosti obvykle mnohem horší a náročnější práci. Neboť musíme onu chybějící vizuální identitu aspoň pro účely webu sami navrhnout od základu, vymyslet logo, jeho základní aplikace, barevná schémata, písma, nadefinovat základní vizuální konstanty — a musíme počítat s tím, že i když se klient bude zpočátku tvářit, že mu to je jedno a nechá to vlastně na vás, nebude výjimkou, že se mu nebudou předkládané návrhy zamlouvat, bude chtít další varianty a strávíte významně hodně času na návrhu nové značky či firemní identity ještě před tím, než se vůbec budete moci pustit do návrhu samotného webu. Neříkám, že je to pravidlem, ale v praxi se mi to stávalo celkem často. Proto také — když se vrátíte v této knize na začátek druhé části — zde tolik doporučuji klientům moc nevěřit, co zdánlivě říkají, a snažit se z nich dostat ty skutečné informace a podklady. Když nic jiného, velmi nám tu pomohou alespoň informace o oblíbených a neoblíbených barvách i stylech webů, které nám klient sdělil v úvodním dotazníku.

Toto je jeden z těch momentů, kvůli nimž jsme na začátku z klienta dolovali informace všemi možnými cestami.

Nastane-li tedy ta situace, že vizuální identita pro web není dosud nijak stanovena, musíme chtě nechtě začít tvorbou značky. Úmyslně zde neříkám tvorbou loga, ale obecněji značky, vizuální identity. O logu můžeme v této fázi třeba jen prohlásit, že bude jednobarevné, kulaté, bílé na modrém pozadí a pro tuto chvíli to může stačit. I s takto vágně navrženým logem se dá bez problémů pokračovat, navrhnout systém barev, rozvržení prostoru, styl ikon a typografická pravidla — a pak se k logu dodatečně vrátit. Třeba jej nakreslit současně s vytvářením ikon. To je ostatně velmi efektivní postup s dobrými výsledky: navrhovat logo webu a hlavní grafické prvky současně. To totiž vede obvykle k dobré konzistenci a silné vizuální vazbě mezi logem, ikonami a dalšími prvky. Pokud je grafik navrhuje všechny najednou, má silnou tendenci je dělat velmi podobné, v jednotném stylu, nad stejným ideovým základem, v témže myšlenkovém rozpoložení. Jen málokdy vyjde grafika webu tak koncepčně jednotná a konzistentní, jako když se navrhuje všechna najednou, současně.

Pokud používáme dnes stále populárnější plochou, jednobarevnou grafiku (flat design), narazíme i na opačný postup, kdy máme vybrané sady ikon a dalších základních grafických prvků a logo přizpůsobíme jim. Na tom není nic špatného: vzhledem k velkému množství snadno dostupných a skutečně kvalitních a bohatých sad ikon a podobných piktogramů je dnes jen málokdy vhodné se pouštět do navrhování vlastních ikon a vizuálního informačního systému. Navrhnout je dobře totiž není vůbec jednoduché, věnuje se tomu samostatný a nijak jednoduchý obor designu a bez odborného vzdělání a velkých zkušeností i dobrý grafik snadno napáchá při vytváření vlastních piktogramů, ikon a jiné infografiky spoustu chyb. Většinou bude nejlepší volbou sáhnout po některé z volně dostupných sad ikon, často poskytovaných ve vektorovém formátu (např. SVG) či v podobě fontu (v současnosti např. často používaný FontAwesome), takže jejich aplikace je velmi snadná — piktogram se pak nevkládá do stránky jako obrázek, ale jako textový znak, což mu poskytuje všechny možnosti, které má webová stránka pro manipulaci s textem: plynulou změnu velikosti, tučnosti, snadnou opakovatelnost, možnost vkládání, manipulace a animace pomocí CSS atd.

Obrázky

Když máme připravenu vizuální identitu webu (ať již implicitně danou, nebo námi vytvořenou), připraveny základní koncepty a šablony stránek a nosné grafické prvky, je třeba se soutředit i na ty ostatní grafické prvky, které do vizuální koncepce webu zcela nezapadají, v návrzích stránek se nahrazují jen proškrtnutými obdélníčky či generickým šumem, ale výsledný vzhled stránek ovlivňují a určují poměrně podstatnou měrou: fotografie, infografika, multimédia.

Většinou se jedná o proměnlivé prvky, které se často mění v čase, hodně se liší mezi jednotlivými aktualizacemi i mezi stránkami a my nemůžeme přesně nadefinovat použití každé fotografie, vybrat optimální výřez a ideálně zakomponovat do stránky. Obvykle coby grafik pracujeme pouze s informací tady bude (možná) asi tahle velká fotka a jediné, co můžeme ovlivnit, je předepsat nějaké parametry, vymezit nějaká pravidla, která by provozovatel měl pro dosažení optimálního vizuálního výsledku dodržovat. Je v moci grafika určit, že na daném místě má být fotografie o předem určených rozměrech (nebo alespoň že to má být fotografie na šířku). Můžeme předepsat, že fotografie musí být kvalitní a profesionálně zpracovaná. Můžeme dokonce říct, že fotografie by měla být tmavá/světlá, barevná/černobílá, zřetelně stylizovaná/přirozená, že má být hodně výrazná a přitahovat pozornost, či naopak má být pouze ilustrační a neubírat pozornost hlavnímu nadpisu apod.

Tak jako tak — a to platí i pro samotné provozovatele — by všechny fotografie i jiná multimédia na webu měly být kvalitní, profesionálně pořízené i zpracované. Měli bychom se vyhýbat různým momentkám, špatně nasvíceným a nekvalitně nafoceným snímkům i fotkám tematicky nesouvisejícím. Různé rádobyveselé momentky z chodu firmy, večírků, nebo dokonce vtipné koláže či nedejbože roztomilé obrázky koťátek a štěňátek možná pobaví a potěší pracovníky ve firmě provozovatele, ale rozhodně ne návštěvníky zvenčí. V jejich očích takové fotky (a videa) jen snižují kredit provozovatele webu a ubližují jeho pověsti.

Než špatná fotka, radši žádná fotka!

Toto pravidlo ovšem platí především pro ilustrační obrázky a fotografie — rozhodně ne tam, kde fotografie nese důležitou informační hodnotu. Tedy u produktových fotek, ve zpravodajství, coby podpůrné důkazy ve všemožných kauzách… Zde platí pravý opak: raději špatná fotka než žádná. Lepší mizerná fotografie výrobku, pořízená levným starým mobilem, než stránka produktu zcela bez fotky. Ale platí to opravdu pouze u těchto výjimek. Pohříchu je mnoho fotek na webech spíše toho prvního druhu, pokud zde vůbec nebudou, nic se nestane. A než mít profil vedení firmy doplněný momentkou z divokého večírku nebo výroční zprávu doprovozenou hrajícími si koťátky, to opravdu raději nic.

Multimédia

Pro videa a další multimédia pochopitelně platí totéž. Na rozdíl od fotografií a jiných statických obrázků jsou zde ale i další požadavky, především dva tvořící hezký paradox:

multimédii musíme šetřit

multimédii nesmíme šetřit

Je to tak, jakkoli to zní nesmyslně a výroková logika pláče, platí oba požadavky současně. Multimédii musíme na webu šetřit, hlavně takovými, která se načítají bez vyžádání. Multimédia jsou velmi náročná na datový objem a přenos, a pokud nešťastný uživatel, který chce najít třeba jen telefonní číslo na recepci, bude donucen načíst si zbytečně mnoho megabajtů dat, a naše stránka mu tak třeba ukousne velký kus z jeho přídělu mobilních dat, nebude nás ani našeho klienta mít moc rád. Krom toho multimédia jsou náročná i na spotřebu času. Zatímco statický obrázek se může načíst poměrně svižně a návštěvník jej „zkonzumuje“ pohledem během několika mikrosekund, každé video, audionahrávka či interaktivní graf vyžaduje ke konzumaci o mnoho řádů více času. Sekundy, minuty. A plnou pozornost, spoustu pozornosti. Ty je návštěvník ochoten investovat v omezené míře, pokud mu to poskytne požadované informace či příjemný zážitek, nebude-li to považovat za ztracený a promarněný čas. Nadbytek multimédií na webu se tak může velmi snadno stát kontraproduktivním a obtěžujícím.

Na druhé straně multimédii na určitých místech šetřit nesmíme, protože se stávají čím dál víc primárním sdělovacím kanálem. Už před sto lety platilo, že jedna dobrá fotografie vydá za tisíce slov. S multimédii to platí v ještě větší míře: dobré produktové, prezentační či výukové video bude pro spoustu lidí užitečnější než několik stránek textového popisu. Ovšem i zde platí, že méně je více, a ještě více než u fotek je zde důležitá kvalita a profesionální zpracování. Amatérsky natočené, špatně sestříhané a trapně namluvené video bude jen pro smích.

Chce-li provozovatel mít na webu video, musí rozhodně investovat do jeho kvality.

Obecně pak pro multimédia na webu platí, že bychom měli maximálně využívat standardních prostředků, které web a prohlížeče poskytují, a vyhýbat se takovým konstrukcím, které vyžadují nějaké speciální a nestandardní doplňky. Což v dnešní době platí i pro kdysi masově používané technologie jako Java nebo Flash, které jsou díky rostoucím schopnostem jiných, standardizovaných technologií už na ústupu a stále více výrobců se je snaží (hlavně pro jejich náročnost na prostředky a výkon a bezpečnostní rizika) tlačit do pozadí. Jak už bylo řečeno, měli bychom se vyhýbat multimédiím, která se načítají, nebo dokonce spouštějí automaticky, a dávat přednost řešením, která se načtou a spustí až na vyžádání. Takové hrůzy, jako je třeba nevyžádaná hudba hrající na pozadí stránky hned po načtení (nedejbože, když se ani nedá vypnout!), budou snad už navždy zapomenutým reliktem dřevních internetových dob.

Jistá známá platební brána modernizovala nedávno svůj web a umístila obří video na pozadí celé stránky. Kdykoli na ten web vstoupím, chci se přihlásit a obraz na pozadí se najednou pohne a vstoupí do něj obří lidská ruka, strašně se leknu. Vím o tom, téměř jsem si na to zvykl, ale stejně se pokaždé leknu. A vždycky si říkám: proč? To technické řešení muselo být poměrně náročné, datový přenos musel výrazně stoupnout a přínos pro firmu bude asi víceméně nulový. Přitom každý, komu jsem ten web ukazoval, reagoval úplně stejně jako já: fuj, to jsem se lekl! Tak proč? Někomu přišlo cool, že umí pohyblivé pozadí stránek? Snažme se vžít do uživatele a nedělejme mu naschvály jen proto, že to někomu přišlo jako „dobrý nápad“.

V neposlední řadě pořád musíme u všech dat, ať už multimédií, nebo i fotek a dalších statických informací, myslet na velikost dat — a to jak na objem datového přenosu u návštěvníků, tak i na šíři přenosového pásma a zátěž serverů na straně klienta. Jakkoli neustále rostou obvyklé přenosové rychlosti, rostou i běžně přenášené objemy dat. Takže i když dnešní standardní webové stránky přesahují v datovém objemu ty před desetiletím i několikanásobně, problémy s pomalým načítáním, přečerpaným datovým limitem či překročeným přenosem na páteřní lince z klientova serveru jsou pořád aktuální stejně jako před lety. Sice možná obě strany stojí dnes terabajt tolik co tehdy gigabajt, ale objem přenášených dat vzrostl stejnou měrou a problém je pořád stejný — i když třeba o řády jinde. Náš uživatel nejspíš sedí u počítače připojen několikanásobně rychlejší linkou než před deseti lety, ale současně také náš web navštěvuje několikanásobně více lidí z mobilních sítí, z veřejných hotspotů atd. Datový objem proto nezanedbávejme, snažme se jej dobře balancovat a udržovat stránky funkční i pro uživatele s pomalejšími linkami a omezeným datovým přenosem. Spolupracujme s kolegy vývojáři na optimalizaci obrázků i multimédií a na vhodném nastavení kešování.

Multimédia ale neznamenají zdaleka jen audio a video. Dnešní weby jsou plné všemožných multimediálních informací mnoha druhů a typů — „živých“ grafů a infografiky, animací, 3D modelů, interaktivních map a mnoha dalších prvků. Často se aplikují pomocí nějakého veřejně dostupného rozhraní poskytovaného provozovatelem příslušné služby (API) a připraveného kódu, který se jednoduše vloží do stránky. Každý grafik i kodér se s těmito prvky setká — přinejmenším třeba ve formě živé mapy, protože upřímně řečeno, nemít dnes na stránce kontaktů živou interaktivní mapu s polohou sídla firmy či sítí provozoven je faux pas srovnatelné snad jen s nabídkou ceníku ke stažení ve formátu BMP. Ale právě ta snadnost použití těchto externích zdrojů, prosté zkopírování připraveného kódu do stránky s sebou nese také jistá rizika. Měli bychom si vždy zodpovědně rozmyslet, co vlastně ten zdánlivě jednoduchý kód vlastně dělá a jaké to má následky. My sice vložíme do stránky krátký javascriptový kód, který se o vše postará a vykreslí na příslušném místě stránky krásnou interaktivní mapu se vším, co má mít — pokud ale v prohlížeči pomocí vývojářských nástrojů prozkoumáme, co vše zde při tom vznikne, co vše se načítá a jak dlouho to trvá, možná se nebudeme stačit divit. Ve velké většině případů jsou takové vložené multimediální a interaktivní nástroje vytvořené tak, že se do stránky umístí rámeček pro nový dokument (iframe) a to, co v něm pak vidíme, je vlastně celá samostatná jednoúčelová webová stránka, která se do něj načetla; obvykle poměrně komplikovaná, nikoli nenáročná na objem dat i výkon a není výjimkou, že je ve výsledku objemnější a mnohem složitější než naše vlastní stránka, do níž jsme tento prvek vložili. Myslet na to musíme především tehdy, když chceme podobných prvků umístit do jedné stránky víc najednou. Tady by už měl i grafik raději počítat se spoluprací s dalšími vývojáři, objem i náročnost jednotlivých komponent si změřit, spočítat a případně přistoupit k nějakým optimalizacím. Třeba k tomu, že se tyto prvky do stránky nevloží a nespustí automaticky při každém načtení stránky, ale až po vyžádání uživatele: po kliknutí, po posunutí prvku do zorného pole prohlížeče atd.

Jistý prestižní magazín nedávno představil na svém webu malou interaktivní aplikaci s tipy na víkendové výlety. Byla velmi pěkně zpracovaná, u každého z deseti tipů byly krásné obrázky a interaktivní mapy. Bohužel když se ji někdo pokusil otevřít třeba na méně výkonném tabletu, vše přestalo fungovat a prohlížeč se po několika minutách marného boje pokaždé odporoučel. Když jsem se podíval, co se v té stránce po načtení vlastně děje, byl jsem docela v šoku. Všech deset tipů bylo fyzicky umístěno v jediné stránce, pouze se přepínaly pohledy, takže byl vidět vždy jen jediný. U každého byl vložený box z Google Maps a až několikamegové fotky ve vysokém rozlišení. To všechno se načítalo najednou, několik desítek opravdu velkých obrázků a desetkrát vložená stránka s interaktivní mapou. Ve výsledku trvalo kompletní načtení až několik minut, vyžádalo si několik set (!) požadavků na servery, odkud se stáhly stovky všemožných souborů (např. několik desítek skriptů a obrázků pro každou z vložených map) a celé si to vyžádalo úctyhodný kus paměti a pořádný výkon procesoru. Což žádný slabší stroj nedokázal ustát. Po této zkušenosti autoři provedli optimalizaci, poměrně zásadně datově zmenšili obrázky a nově se začaly načítat jen ty části stránky, které jsou právě potřeba. Náročnost stránky klesla na zlomek původních hodnot a už ji není problém otevřít ani na postarším tabletu.

Reklamy a slepota

Jednoznačně nejvýraznějšími prvky na mnoha webových stránkách jsou stále reklamní bannery. Tedy menší či větší plochy určené k zobrazování cizí reklamy. Nadužívání těchto bannerů ve stránkách dospělo až k obecnému jevu známému coby bannerová slepota. Tedy podvědomé ignorování grafické reklamy ve stránkách. Uživatelé si velmi rychle navyknou na obvyklé tvary, pestré barvy, animace a pozice bannerů a přestanou je vnímat. Tento jev pak přitom často funguje i tehdy, nabízí-li banner ve skutečnosti produkty či služby, o které by jinak uživatel měl zájem.

Nechceme zde radit tvůrcům bannerů, jak své reklamy dělat efektivnějšími. Nás v tuto chvíli zajímá pohled z druhé strany, z pozice grafických návrhářů webu, a zde jsou pro nás hlavní dva aspekty:

jak co nejúčinněji umístit reklamu, kterou ve stránkách chceme mít

jak zabránit tomu, aby kvůli bannerové slepotě uživatelé přehlíželi náš vlastní obsah

V případě první otázky je odpověď poměrně snadná: méně je více. S rostoucím počtem reklamních pozic ve stránce prudce klesá jejich účinnost. Pokud stránku doslova „vytapetujeme“ reklamními plochami, budou je uživatelé ignorovat tím víc. Větší množství a agresivnější prezentace reklamy nanejvýš donutí návštěvníka k instalaci nástroje na aktivní blokování reklam a na jakoukoli reklamu už potom neklikne ani náhodou, protože ji prostě na našich stránkách už nikdy neuvidí. Nejefektivnější se v praxi ukazuje pečlivá volba pouze jedné či dvou reklamních pozic na exponovaných místech (např. v záhlaví a uprostřed článku) a pochopitelně co nejpřesnější cílení a kvalitní zpracování. Vyhýbejme se různě vyskakovacím, překrývajícím a poletujícím reklamám, které návštěvníky velmi snadno otráví a odpudí. Stabilní reklamní pozice, která neobtěžuje při konzumaci stránky a kde návštěvník občas zahlédne zajímavou informaci, která jej osloví, je často nejúčinnější.

Druhý problém je zákeřnější a trochu se na něj zapomíná. Ale ve skutečnosti působí falešně pozitivní bannerová slepota neustále nenápadné škody na mnoha webech, aniž by si to provozovatelé vůbec uvědomovali. Podstatou problému je totiž používání takových grafických prvků v designu webu, které nějakým způsobem zapadají do vzorců, které mají návštěvníci ve svých myslích vybudované pro reklamní plochy. Při letmém pohledu pak návštěvníkovo podvědomí mylně vyhodnotí určitý úsek stránky jako reklamu, která jej nezajímá a hodlá ji ignorovat, a příslušnou část stránky prostě nevnímá, přehlíží.

Zcela nevhodné je proto v designu webu používat barevné rámečky o rozměrech odpovídajících nejčastěji používaným reklamním bannerům, navíc v místech, kde se bannery nejčastěji nacházejí. Setkal jsem se dokonce se snahou umísťovat vlastní informace mezi reklamní bannery ve formátu velmi podobném okolním reklamám — patrně v představě, že při hledání těchto informací budou uživatelé daleko více věnovat pozornost i okolním podobně vypadajícím reklamám. Efekt byl ale přesně opačný: tyto informace se pro uživatele staly neviditelnými, protože je ignorovali v domnění, že se jedná o reklamu, které pozornost věnovat nechtějí.

Jako reklamní bannery jsou často vnímány i velké automaticky rotující karusely, které najdeme na mnoha webech v záhlaví úvodní strany. Pokud takový prvek použijeme, musíme počítat s tím, že určitá část návštěvníků bude jeho obsah jednoduše ignorovat, a měli bychom ho proto považovat jen za funkčně nedůležitou dekoraci a neumisťovat do něj žádné důležité informace.

Text, písmo, typografie

Přese všechnu starost o barvy, rozvržení stránky a grafické prvky, ba i přes stále silnější nárůst používání multimédií zůstává stejně text hlavním nosičem informací a vše kolem není víc než jeho ozdobou a upoutávkou, nástrojem, jak co nejlépe upozornit na to nejpodstatnější textové sdělení a jak co nejsnáze dovést uživatelův zrak k předávané informaci. Webový grafik by proto měl být v prvé řadě dobrým typografem, víc než čímkoli jiným.

Typografie má přitom jediný hlavní úkol: předat uživateli (zde tedy spíše čtenáři) textovou informaci. Vše ostatní je jen nadstavba a v podstatě pouhá okrasa. Ani nejsmělejší typografická kreace nesmí popřít tuto svou základní povinnost. Veškerá práce s textem a písmem musí vždy a za všech okolností směřovat ke zlepšování čitelnosti, přehlednosti a srozumitelnosti, snahy o unikátní a ohromující typografický design nikdy nesmí jít proti této základní konstantě.

Text, který se nedá číst, je jen znečištěná plocha beze smyslu.

Úkolem typografie a práce s textem obecně proto není primárně vytváření estetiky a krásna, ale nejprve zlepšování čitelnosti, optimalizace přístupnosti, použitelnosti, ergonomie čtení. Pro typografii a text platí v podstatě stejná pravidla a postupy, jaké jsme zmínili před chvílí pro grafiku. Celková grafická vyváženost textu na stránce i v rámci menších bloků, používání správných kontrastů bloků textu i vhodná práce s prázdným místem a používání velkého dynamického rozsahu jsou hlavní nástroje makrotypografie, která pracuje s celkovou strukturou textu. Stejně jako v uspořádání stránky jsou i v textu důležité správné proporce, priority a kontrast, zvýrazňování dominant a upozadění minorit, vytváření vizuálních a logických vazeb a sekvencí (potřebných pro snadné skenování a vedení uživatele k požadovanému cíli). Na opačném pólu pak je mikrotypografie, která se zajímá o tvarosloví znaků, ideální rozestupy písmen a slov, jejich optimální navazování a propojování. Ta je však v prostoru webového designu méně využívaná, neboť se zde povětšinou používají již hotová písma a jejich aplikace je prací počítačových algoritmů v prohlížeči, které designér ovlivňuje jen minimálně. Mikrotypografii tak použijeme jen výjimečně, třeba u návrhů logotypů či ručně kreslených nápisů.

Z výše uvedeného pak jednak vyplývá, že hlavní starostí grafika na webu bude právě makrotypografie, jednak i to, že vlastně není příliš podstatné, jak bohaté či omezené možnosti volby písma a nástrojů k manipulaci s ním máme. Dobrá a krásná typografie se dá udělat i s jediným, úplně základním fontem v jediné barvě. Popravdě řečeno, největších typografických zhůvěřilostí se dopouštějí právě amatéři, kteří mají k dispozici nepřebernou zásobu různých fontů a snaží se jich použít maximum najednou, v mnoha různých velikostech, řezech, barvách a stylech. S takovou typografickou úpravou dnes neuspěje ani cirkusový plakát. Upřímně: jedním z mých koníčků je sbírání otřesných jídelních lístků z restaurací, které se právě takovými kreacemi jen hemží.

Tato kniha nemá za cíl být učebnicí typografie. Takových existuje hodně a každý webdesignér by měl mít aspoň nějakou základní nastudovanou a elementární typografická pravidla mít v malíčku. Přesto si neodpustím zde stručně zmínit aspoň několik těch opravdu nejzákladnějších, s jejichž nedodržováním se na webech setkávám nejčastěji.

Na jedné stránce používejme jedno či nejvýše dvě různá písma. Nikdy nepoužívejme současně písma podobná a příbuzná, oba fonty by se měly výrazněji lišit. Dobrou zvyklostí je např. používat jedno písmo patkové (antikva, serif) a druhé bezpatkové (grotesk, sans-serif). V takovém případě je pak ideální vyhradit patkové písmo jako základní pro běžný text (obsah článků, textové popisy atd.) a písmo bezpatkové pro nadpisy, navigaci a systémové informace — případně opačně. Pokud používáme písmo jediné, je obvyklé použít pro základní text písmo normální a pro nadpisy a vybrané prvky pak písmo třeba výrazně tučnější.

Jedinou výjimku tvoří doplňkové použití neproporčního písma (monospace, např. Courier) pro zobrazení technických informací — klíčových slov, částí počítačového kódu apod.

Jen výjimečně si opravdu zkušený typograf může dovolit použít něco mimo tento základní rámec — egyptienku, unciálu, kaligrafické či nějaké jiné zvláštní písmo pro nadpisy a vybrané speciání nápisy. Prakticky nikdy se taková písma nepoužívají pro základní text, činí jej totiž obtížně čitelným.

Ani nejzoufalejší typograf nikdy a nikde nepoužije písmo Comic Sans. To je znak naprostého amatéra.

Traduje se, že i na obrazovce se lépe čte písmo patkové (např. Times), protože vodorovné patky na úrovni účaří písma vytvářejí pomyslnou linku, která dobře vede oči. Dlouho se mělo za to, že text zobrazený patkovým písmem se proto čte snadněji, rychleji a příjemněji i v menších velikostech a při delších řádcích než s písmem bezpatkovým. U mě osobně to tak sice funguje, ale podrobné studie pro tuto teorii obecnou platnost zcela nepotvrdily. Přesto stejně pro rozsáhlejší texty (články, delší encyklopedická hesla, odborné statě apod.) často volím raději písmo patkové.

Pro každý design musíme připravit několik základních stylů vybraného písma a stanovit si (a dodržovat!) pravidla pro jejich používání. Každý řez písma (tj. např. tučné, italika, podtržené a jejich kombinace) musí mít v určitém kontextu svůj jasně definovaný význam. Např. že důležité pasáže a klíčová slova budou zvýrazněná ztučněním, názvy a citace italikou či kurzívou, klíčová slova negativně na šedém pozadí apod. Zvýraznění pomocí  p r o s t r k á n í  (větší mezery mezi písmeny uvnitř slova) bylo typické pro psací stroje, na webu bychom jej vůbec neměli používat. Nastavené styly pro zvýraznění pak musíme důsledně používat a nenechat uživatele, který si při prvním čtení vytvořil v hlavě z použité typografické symboliky nějaký logický model, aby hned o kousek dál musel tápat a přehodnocovat to, jak napoprvé ty styly písma pochopil. Konzistence a důslednost jsou zde důležité.

Obdobně to platí pro velikosti. Měli bychom si připravit několik velikostí písma, se zřetelnými skoky ve velikosti a jasně odlišitelné — pro základní text, větší pro mezititulky, dvě tři velikosti pro různé úrovně nadpisů, menší písmo pro poznámky, výchozí velikost pro navigační prvky atd. — a poté jednotně používat pro stejné typy obsahu nejen stejný font, stejné styly, ale i tutéž velikost. Písmo lišící se v tomtéž kontextu ve velikosti i o jediný bod působí poněkud rušivě a nepříjemně.

Na webu je zavedeným zvykem zobrazovat aktivní odkazy podtržené. Proto bychom měli podtržení používat výhradně pro zobrazení odkazů a nikdy třeba ke zvýraznění. Ovšem opačně to nutně neplatí — pokud zajistíme, že nějaký jiný styl bude dostatečně odlišený od ostatního textu a nedojde k záměně s jinými prvky, můžeme odkazy zobrazovat i bez podtržení, např. tučně a modře. Nesmíme potom ovšem dopustit, aby byl tučně modře zobrazen nějaký text, který není odkazem. To je pak pro uživatele velmi matoucí.

Vyhýbejme se většímu používání VERZÁLEK, tedy velkých písmen. Text zobrazený verzálkami je velmi obtížně čitelný a je vhodný jen výjimečně, pro krátké nápisy: texty tlačítek, položky v navigaci apod. Ale i v těchto případech musí být použit vhodný jednoduchý font. Nápisy velkými písmeny v nějakém kaligrafickém či jinak rozevlátém písmu jsou naprosto nepřípustné.

Typ a velikost písma musíme navrhovat společně s rozvržením stránky tak, aby řádky souvislého textu nebyly ani příliš krátké, ani příliš dlouhé. Za optimální délku řádku pro pohodlné čtení se považuje 50–60 znaků, za přijatelnou přibližně ještě 30 až 85 znaků. Kratší řádky způsobují komplikace s distribucí delších slov, působí roztrhaně a chaoticky. Delší řádky zase zhoršují čitelnost, oko se musí více soustředit na udržení linie řádku, zrak snadno přeskakuje mezi řádky a při přechodu na nový řádek je mnohem náročnější se trefit správně na začátek toho následujícího. Jsme-li z nějakého důvodu přinuceni zobrazovat text v řádcích delších než cca 60 znaků, měli bychom příslušně zvětšit rozestup mezi řádky, abychom tento problém aspoň částečně eliminovali.

Běžný text by měl být zarovnán doleva, nadpisy a menší bloky mohou být vycentrovány, některé speciální prvky lze zarovnat doprava. Zarovnání do bloku (justify) bychom na webu raději vůbec neměli používat (raději ani u velkých bloků textu s dlouhými řádky), protože tím vznikají velmi nepěkné mezery v textu (řeky) a další komplikace. S těmito problémy se potýkají i sazeči knížek, kde je nutné na spoustě míst taková nehezká místa upravovat ručně, a ještě se to nepodaří pokaždé úspěšně. Počítejme s tím, že algoritmy v prohlížečích zarovnání do bloku neumějí dokonale, a raději se mu vyhýbejme.

Mezi odstavci by měla být znatelná mezera, nad nadpisy vždy větší než pod nimi. Pokud je nadpis ve dvou řádcích, musí být mezera mezi řádky uvnitř nadpisu výrazně menší než mezera nad a pod nadpisem. První řádek odstavce je dobré u dlouhých textů odsadit alespoň o jeden znak (1em), zlepšuje to čitelnost textu. Důležitá je vhodná a vyvážená vzdálenost orámovaných bloků textu od okolního obsahu, mezery mezi sloupci i sousedícími bloky.

Musíme se naučit a dodržovat základní pravidla sazby pro daný jazyk (pozor, mnohé detaily se mezi jednotlivými jazyky liší!). Téměř vždy ale platí, že před interpunkčními značkami se nepíše mezera, za nimi naopak vždycky; (nedělitelná) mezera se píše mezi hodnotou a jednotkou. Musíme se naučit používat správné uvozovky a pomlčky obvyklé pro daný jazyk, včetně důsledného odlišování spojovníku-rozdělovníku a pomlčky — která může mít navíc různou délku. Zvykněme si používat i korektní znaky např. pro trojtečku … nebo znaménko krát × namísto písmene x apod.

V dnešní době už nebývají tak časté nešvary z dob psaní na psacích strojích — zaměňování podobných znaků, malé L místo jedničky (l × 1), velké O místo nuly (O × 0), lomítka místo závorek, ukončování každého řádku enterem, odsunutí textu od kraje pomocí hromady mezer atd. — ale i tak se s tím pořád čas od času můžeme setkat. Pak je důležité jednak v podkladech tyto chyby opravit, jednak třeba i poučit našeho klienta, který bude na web vkládat nový obsah, o základech počítačové typografie a častých chybách, kterým by se měl vyhýbat.

Nejsme-li si něčím jisti, sáhněme po typografické příručce.

Stručné typografické manuály včetně specifik pro většinu běžných jazyků najdeme na webu. Zodpovědnější grafici pak mají dávno ve své knihovničce nějakou významnější příručku či učebnici a základy typografie pečlivě nastudované. Stále bychom měli myslet na to, že typografie tvoří podle mnoha známých pouček až 95 % grafického designu většiny webů a rozhodně není namístě ji ani v nejmenším podceňovat. Upřímně, pokud bych si měl vybrat, zda jako grafického designéra pro tvorbu webů zaměstnat dobrého typografa, který neumí nijak výjimečně kreslit, nebo skvělého výtvarníka, který v typografii tápe, rozhodně si vyberu toho prvního. Působivý a vkusný web totiž vytvoříme i zcela bez grafiky jen skvělou typografií — ale krásná grafika se špatnou typografií dobrý web moc často neudělá.

Většinu podstatného obsahu stále tvoří text, grafika bývá jen jeho ozdoba.

Formuláře

V závěrečné kapitole se z odbočky k čistě vizuálnímu a grafickému designu ještě jednou vrátíme na teritorium webového designu jako celku. Specifickou součástí, ba přímo samostatným podoborem webového designu jsou formuláře, editory a interaktivní ovládací prvky vůbec. V tomto bodě se víc než kde jinde potkávají všechny profese, nejen hlavní designér a architekt aplikace s grafickým designérem, ale i s kodéry a vývojáři všeho druhu. Všichni dohromady a v součinnosti ovlivňují to, zda budou formuláře a další interaktivní ovládací prvky webu funkční a dobře použitelné, nebo nikoli. Kromě grafického zpracování se zde musíme zaměřit také na samotný návrh architektury, vnitřní logiky a chování formulářů, věnovat se návrhovým vzorům či různým technickým detailům implementace.

V interaktivních formulářích (ať už se jedná o dialogová okna v nějaké aplikaci, nebo o formuláře na webu) se obvykle nadělá nejvíce chyb, lze zde napáchat nejvíce škody a naštvat nejvíce uživatelů. Je to prosté: zbytek webových stránek je víceméně statický, tvoří je obsah, který uživatel spíše jen pasivně konzumuje, a navigace nad ním, kde se sice dá také napáchat dost škody, ale v podstatě se pořád jedná o celkem jednoduchou interakci — uživatel si vybere odkaz a klikne na něj, načte se nová stránka. Ovšem formuláře a další interaktivní ovládací prvky už poskytují skutečnou a někdy i velmi složitou dvojstrannou komunikaci mezi uživatelem a počítačem. Uživatel provede nějakou akci, algoritmy aplikace na ni musí podle kontextu správně reagovat a poskytnout vhodnou odezvu. A v nově zobrazeném stavu se zase musí co nejrychleji zorientovat uživatel a vhodně zareagovat — a tak dokola, až se společně doberou požadovaného cíle.

Problematika webových formulářů je opět rozsáhlé téma, kterému se věnuje spousta autorů. Na omezeném prostoru této kapitoly nemůžeme ani jen vypočítat všechny známé chyby a špatná řešení, kterých se designéři a vývojáři na webech dopouštějí. Pokusme se alepoň zmapovat ty nejčastější a nejzávažnější.

Příliš velké formuláře, příliš zbytečných údajů

V prvé řadě je vždy otázkou, zda formulář opravdu musí být tak velký, jak je. Skutečně je nezbytné získat od uživatele všechny ty údaje, které po něm požadujeme? Vždycky je potřeba myslet na to, že mezi prvním a posledním políčkem formuláře je spousta pootevřených dveří, stále větších a s každým dalším zbytečným údajem stále hlasitěji a vyzývavěji lákajících uživatele: Vykašli se na to, pojď pryč!

Samozřejmě záleží na situaci a konkrétním úkolu a účelu, jemuž daný formulář slouží. Žádost o státní občasntví a vydání pasu nebude formalitka, kde stačí vyplnit dva údaje. Ale kvůli jednomu nákupu, kvůli registraci k nějaké službě vyplňovat zemi původu, datum narození, telefon, pohlaví, tři kontrolní otázky a velikost bot? Stojí opravdu našim uživatelům ta služba za to, aby takovou proceduru podstoupili? Kromě toho, že je to nesmírně zdržující, a čím zbytečněji požadované údaje působí, tím i více demotivující — ale rostoucí množství irelevantních otázek budí v každém sílící obavy o bezpečnost a zachování vlastního soukromí. Proč ty údaje vlastně chtějí? Co s nimi budou dělat? Opravdu jim je chci dávat a stojí mi to za to? To přirovnání už v této knize jednou padlo:

Kdyby po vás prodavač v kamenné prodejně požadoval jméno vašeho psa a velikost podprsenky, asi by se se zlou potázal.

Na mnoha webech to však dodnes nepovažují za nic divného a s klidem po svých návštěvnících požadují nejroztodivnější privátní informace, bez nichž by se určitě dokázali obejít. A nedosti na tom. Nejenže tam všechna ta políčka jsou, ona bývají dokonce povinná! Zamyslete se. Opravdu nezbytně potřebujete všechny ty údaje povinně vyplněné? Obvykle ne. Pro registraci většinou postačí e-mail a heslo, pro nákup pak ještě doručovací adresa. Bez všeho ostatního se nejspíš provozovatel obejde. Je pak na pečlivém zvážení, zda poměr získaných dat a odrazených uživatelů je ve prospěch, či v neprospěch webu. K čemu ostatně ta zbytná data někdo potřebuje — ke statistickým účelům, ke zlepšení poprodejních služeb, jen tak pro jistotu? Nebude vhodnější ten účel uživatelům upřímně vysvětlit a místo zupáckého vyžadování irelevantních dat slušně požádat o vyplnění údajů, které mohou být k něčemu užitečné, spolu s ujištěním, že nebudou použity k jiným účelům? Překvapivé množství uživatelů v takovém případě své údaje poskytne mnohem ochotněji a raději. A u těch méně důvěřivých či méně ochotných si vystačíme jen s nezbytným minimem.

V případě, kdy je ale ve formuláři skutečně nutné zadat velké množství dat, je namístě zvažovat nějaké strategie, jak jejich zpracování uživatelům zpříjemnit, usnadnit a zpřehlednit. Údaje seskupit do logických celků, rozdělit do menších oddílů, do více kroků na samostatných stránkách, nabídnout vyplnění formou průvodce. Designéři i kodéři by si měli vzpomenout na občas zapomínanou značku fieldset, určenou právě k vyznačení logických celků. Velký prostor pro práci zde má především hlavní designér webu, největší část zodpovědnosti leží na návrhu vhodné struktury, logiky a chování formuláře už na úrovni drátěných modelů a specifikací — grafici a kodéři už tady později moc nezachrání.

Musíme myslet na to, že sáhodlouhé formuláře přes několik obrazovek mohou uživatele děsit a odrazovat, jeden obrovský formulář působí mnohem strašidelněji než posloupnost několika přijatelně malých dílčích formulářů. Průběžná informace o průběhu může působit povzbudivě a uklidňujícím dojmem (Krok 3 z 5, už se blížíme ke konci!). Neuděláme chybu, když v takovém průvodci už na začátku započítáme ještě předtím provedené akce — jakkoli uživatele třeba nestály skoro žádné úsilí — a začneme samotné vyplňování třeba na kroku 3. Započíst můžeme cokoli, co dává smysl, třeba že se uživatel seznámil s nabídkou produktů na webu a že spustil dotyčného průvodce. Hlavní je, že pro něj bude mnohem více motivující a povzbuzující informace Máte dokončeny 2 kroky z 10, než Máte dokončeno 0 z 8. Ty dva dosavadní kroky byly přece tak snadné, tak čeho se bát, ne?

Ovšem v případě rozdělení formuláře do menších celků a více samostatných kroků musí mít uživatel jistotu beztrestného návratu o krok zpět — a nejenže mu to stránka umožní, ale nesmí ani přijít o žádná již jednou vyplněná data. Situace, kdy se znovu otevře jednou vyplněný formulář a bude zase prázdný nebo budou opětovně vyžadovány některé už jednou zadané údaje, je naprosto nepřijatelná.

Ovládání klávesnicí

Ať už je formulář velký, či malý, stejně je vždy důležité zajistit jeho pohodlné ovládání. Především pomocí klávesnice. Protože zadávání údajů a vyplňování políček spočívá ponejvíce v psaní na klávesnici, je pro uživatele velmi nepohodlné muset neustále přehmatávat z klávesnice na myš a zpátky. Formulář proto musí být co nejvíce ovladatelný pouze pomocí klávesnice (nebo jen pomocí myši, pokud to typ formuláře dovoluje). Čím rozsáhlejší je, tím je tento požadavek důležitější. V případě aplikací, u kterých se předpokládá, že je uživatel nepoužije pouze jednorázově, ale pracuje s nimi delší dobu (různé evidenční systémy, online účetnictví, intranetové aplikace apod.), je to dokonce naprosto kritický ergonomický požadavek.

Nejpodstatnější jsou zde tři body, které si musíme dobře ohlídat u každého formuláře a editoru.

Prvním z nich je podporovat posouvání mezi položkami formuláře pomocí tabelátoru (klávesy Tab), který přesouvá ohnisko (fokus) na další položku v pořadí (resp. na předchozí v případě stisku kombinace Shift-Tab). To je zavedený standard napříč platformami a mnoho uživatelů je na něj zvyklých. A i na dotykových zařízeních bez klávesnice je obvykle tato funkčnost simulována tlačítky další/předchozí, která funkci klávesy Tab přesně kopírují.

Nejen, že nesmíme této funkci jakkoli bránit, musíme ji také optimalizovat: každý formulářový prvek má totiž volitelný atribut tabindex="číslo", který definuje pořadí, v jakém se mezi jednotlivými prvky bude klávesa Tab přesouvat. Pokud jej u prvků neuvedeme (což je stejné, jako když budou mít tabindex="0"), budou se procházet v tom pořadí, jak jsou uvedeny v kódu stránky. Můžeme dokonce přidat atribut tabindex="0" i prvkům, které normálně fokus nedostávají, a zahrnout je tak do sekvence procházení, někdy to může být užitečné.

Přirozené procházení položek podle pořadí v kódu ale nemusí být vždy ideální. Položky mohou být v kódu uspořádány v řádcích, zatímco pro uživatele bude vhodnější je procházet po sloupcích. Nebo naopak. V tom případě bychom měli všem prvkům hodnotu tabindex vyplnit a přiřadit správné číslo, aby se procházely ve správném pořadí. V takovém případě si ale musíme dát hodně záležet a vhodně nastavit tabindex úplně všem položkám formuláře, abychom zajistili správnou sekvenci pro celý formulář. Pozor: číslování pořadí prvků je společné po celou stránku, nikoli jen v rámci jednoho formuláře.

Můžeme také chtít přeskočit některé nepovinné položky, které podle nás drtivá většina uživatelů nebude vyplňovat. V tom případě jim můžeme nastavit tabindex="-1". Záporné číslo zajistí, že položka vůbec nebude zařazena do sekvence procházení. Takový prvek bude možné dál vybrat myší, ale stiskem klávesy Tab se na něj uživatel nedostane.

Druhým důležitým bodem je správné a důsledné užívání popisků položek, tedy prvků label. Tento prvek se vždy pojí pomocí identifikátoru ke konkrétnímu formulářovému prvku a je s ním nedílně svázán. To je důležité při ovládání formuláře myší a dotykem, takový popisek se stává jakousi prodlouženou rukou příslušného prvku a kliknutí na něj má stejný efekt jako kliknutí na položku samotnou. Textová pole získají fokus, přepínače se přepnou atd. Klíčové je to hlavně u drobných prvků typu checkbox nebo radio, u kterých se pak uživatel nemusí nutně trefit do malého prostoru samotného přepínače, ale stačí jen kliknout na text popisku se stejným efektem.

Pochopitelně hlavním účelem popisků je uvést příslušné formulářové pole. Poměrně špatnou praxí se ovšem stalo psát popisky přímo dovnitř textových polí, obvykle šedivě či jinak odlišně od zadané hodnoty. Výhodu ušetřeného místa za popisek umístěný vedle položky či nad ní vyvažuje skutečnost, že takto řešený popisek je vidět, pouze dokud je políčko prázdné. V okamžiku, kdy do něj uživatel něco napíše, popisek zmizí a později už není možné zjistit, o jaké pole vlastně jde. Toto řešení tak má své místo pouze ve formulářích a editorech „na jedno použití“ — tedy na místech, kde uživatel jednou zadá požadovanou informaci, odešle a už víc nebude vyplněná pole měnit: v online diskusích, při komunikaci na sociálních sítích, při zadávání přihlašovacích údajů apod. Jakmile existuje možnost, že se uživateli zobrazí formulář/editor již vyplněný, bez viditelných popisků a má s ním nějak pracovat, je takové řešení už nepřípustné.

A konečně posledním klíčovým bodem ovládání formulářů pomocí klávesnice je umožnit odeslání klávesou Enter (či jinou klávesovou zkratkou ve složitějších případech). Především u malých formulářů typu přihlášení do systému je to docela důležité. Uživatel je na tu sekvenci zvyklý z mnoha míst a přijde mu zcela přirozená: zadat jeden údaj, klávesou Tab se přesunout do dalšího políčka, zadat druhý údaj a klávesou Enter odeslat. V okamžiku, kdy zde klávesa Enter nezafunguje a formulář se neodešle, bude to uživatel vnímat jako chybu, nečekaný problém.

V editorech, kde klávesu Enter nelze z nějakého důvodu použít (např. protože se používá pro nový řádek v textu), by měla být dostupná alternativní klávesová zkratka. V komunikačních programech to bývá např. kombinace Alt-Enter či Ctrl-Enter, ve složitějších online aplikacích pak bývá k dispozici třeba i klávesová zkratka obvyklá pro obdobnou činnost v počítačových aplikacích, např. Ctrl-S pro odeslání zprávy a zavření editoru apod.

U rozsáhlejších aplikací, především u těch, kde se předpokládá, že je uživatelé budou používat dlouhodobě a intenzivně, je vhodné zvážit i použití dalších klávesových zkratek — klávesu Esc pro zrušení akce, různé osvědčené kombinace kláves pro nejčastější akce (kombinace s klávesou S pro uložení či odeslání, O pro otevření, P pro tisk apod.). Je ovšem důležité si dát pozor, aby tyto klávesové zkratky nekolidovaly s ovládáním prohlížeče a systému, a uživatele s nimi náležitě seznámit a umožnit jim jejich vypnutí. Musíme zde počítat s poměrně dlouhou křivkou učení a zvykání si, proto má smysl takové klávesové zkratky nabízet jen u zmíněných intranetových aplikací, evidečních systémů apod., u běžných webů jsou spíš na škodu.

Umělá inteligence

Jedním z nejhorších prohřešků v použitelnosti formulářů je přehnaně technicistní přístup k zadaným datům a lpění na exaktně přesném formátu dat. Přitom počítače jsou tu od toho, aby lidem pomáhaly, a měly by se jim přizpůsobovat. Místo toho často pohodlní vývojáři nutí uživatele, aby se on přizpůsoboval jejich hloupému a neflexibilnímu programu.

Začněme od toho úplně nejjednoduššího. Naprostou samozřejmostí by mělo být, že aplikace ignoruje jakékoli mezery před a za zadanou hodnotou. Přesto je stále možné narazit na weby, kde tomu tak není a zadané hodnoty se předávají včetně mezer a například znak konce řádku, který se do políčka dostal nechtěně při zkopírování a vložení hodnoty, pak zůstává součástí uložené hodnoty a může později působit nečekané komplikace.

Odstranit mezery kolem hodnot je elementárním úkonem. Pro spoustu programátorů ovšem bývá kritické hlavně nakládání s různými oddělovači a nepodstatnými výplňovými znaky uvnitř hodnot. Takový líný programátor jednoduše napíše, že do pole je nutné zadat datum ve formátu MM-DD-YY, a pokud uživatel např. datum 3. září 2015 nezapíše právě jako 09-03-15, aplikace bude zadání odmítat jako chybné. Ulehčovat si práci je ale pro vývojáře přirozené, takže je zde úkolem designéra, který by měl trvat na tom, aby si vývojáři tu práci dali a zadané hodnoty zpracovali v trochu volnějším režimu. Správně popsaná požadovaná hodnota v takovém poli totiž není MM-DD-YY, ale číslo měsíce, nějaký oddělovač, číslo dne v měsíci, oddělovač a rok. Vhodně naprogramovaná aplikace by pak měla přijmout jako platnou hodnotu datum (v americkém formátu) jak 09-03-15, tak třeba také 9/3/15 nebo 9. 3. 2015, v extrémním případě dokonce třeba i něco jako 09032015.

Každá aplikace je právě tak hloupá, jak líný je její programátor.

Ještě víc komplikací nastává u složených údajů. Tedy v podstatě u jedné ucelené informace, která je ale z nejrůznějších důvodů rozdělena do několika dílčích textových polí. Ať už jde o jméno (kombinace jména, příjmení, prostředního jména, přezdívky), číslo bankovního účtu (předčíslí, číslo, kód banky), či telefonní číslo (rozdělené na předvolbu a místní číslo), nebo třeba tak běžnou a často zadávanou informaci, jakou je adresa. Potkávám bohužel stále málo chvályhodných výjimek, které s těmito složenými údaji dokáží pracovat rozumně a inteligentně — např. pokud uživatel zkopíruje telefonní číslo do schránky a vloží do pole formuláře, systém sám rozpozná předvolbu a místní část čísla a sám je rozdělí, případně zformátuje do přehledného tvaru.

Daleko častěji se setkáváme s weby hloupými, kde se s jiným formátem, než je požadované rozdělení do předepsaných komponent, neumějí vypořádat. Číslo zásilky u přepravní služby pak musí uživatel zadat rozdělené do tří samostatných políček — i když v e-mailu je obdržel jako jedno číslo a beztak je sem nikdo nebude zadávat ručně, nejspíš každý soudný uživatel použije postup zkopírovat/vložit. Nástroj na automatické vyplňování osobních údajů nedokáže na objednávce vyplnit adresu, protože programátoři vyžadují ulici a číslo domu ve dvou samostatných polích (zatímco v prohlížeči je to uloženo dohromady jako jedna hodnota) atd.

Designéři by se měli snažit formuláře vymýšlet s co nejméně omezeními na vstupní data a vyžadovat po „svých“ vývojářích, aby byli při zpracování dat z formulářů co nejflexibilnější. Weby by měly projevovat aspoň minimální umělou inteligenci, uživatelům vycházet vstříc a s vyplňováním formulářů jim pomáhat — a ne je jimi obtěžovat a terorizovat.

Kontrola a oznamování chyb

Prakticky každý formulář má nějaké omezení na hodnoty zadané do jednotlivých polí a musí být otestován, zda zadané údaje těmto omezením vyhovují. A pokud ne, nějakým způsobem to uživateli oznámí a požaduje po něm, aby údaje opravil. Tato kontrola (validace) je poměrně komplikovaným procesem, kde narážíme na velké množství problémů a chyb. A to u všech zúčastněných složek: designéři chybně navrhnou logiku kontroly a zobrazování chyb, vývojáři naimplementují kontrolu a vracení chybových informací nevhodným způsobem, copywriter připraví nesrozumitelná a matoucí chybová hlášení, grafici zobrazí chyby nepřehledně…

V prvé řadě je třeba zmínit samotný postup kontroly. Těch je totiž více druhů a často v jednom formuláři postupně probíhají všechny. Data se totiž jednak kontrolují přímo v prohlížeči (pomocí kódu v javascriptu), tak na serveru, kam se dostanou po odeslání formuláře. Kontrolovat se mohou neustále (po stisku nějaké klávesy), průběžně (po přesunu na další políčko), periodicky (v pravidelných časových intervalech) i dávkově (po odeslání formuláře na server). Navíc se jinak testují a jinak chovají formuláře čerstvé (poprvé vyplněné, dosud neodeslané) a jinak ty revalidované (tj. kontrolované opětovně po nalezení a nahlášení chyb).

Mělo by platit, že čím delší formulář, tím spíše by měla probíhat nějaká průběžná kontrola přímo v prohlížeči. Uživatel se může dopustit nějaké zavlečené chyby, a když se dozví až po odeslání formuláře, že udělal chybu už na začátku a celý zbytek formuláře má pak třeba špatně, rozhodně ho to nepotěší.

Důležité je také dát si záležet na tom, aby uživatel nepoznal, kde jsou data kontrolovaná, zda v prohlížeči, nebo na serveru. Výstupy z obou typů validace a zobrazené chybové informace by měly být vždy totožné. Pokud kontrola v prohlížeči informuje o chybách úplně jinak než kontrola ze serveru, může to být velmi matoucí.

Informace o chybách musí být srozumitelné, výstižné a návodné. Extrémně špatný je případ, kdy aplikace nesdělí vůbec nic (formulář se pouze neodešle nebo zobrazí znovu nezpracovaný, ne-li dokonce smazaný), případně se zobrazí velmi obecné, nic neříkající chybové hlášení — Došlo k chybě #00f8. Formulář se nepodařilo uložit. Server error. Takové informace jsou pro uživatele naprosto k ničemu a mnoha z nás už takové lajdácké zpracování chyb způsobilo nekonečné frustrace se zkoumáním, co jsme kde udělali špatně a proč to u všech ráhen a kosatek! nejde odeslat…

Návrh musí pamatovat na všechny možné typy chyb a mezních situací a umět je přehledně a srozumitelně vysvětlit uživateli.

Webdesignéři a grafici často na chybové informace zapomínají, nenavrhnou je vůbec nebo nedůsledně a na mnohé stavy a situace zapomenou. Je potřeba mít dobře vymyšleno, co se stane, když nějaké pole bude obsahovat chybu, jak se chyba zobrazí a jak se položka zvýrazní, kam a jak se zobrazí chybové hlášení. Co se stane u kumulativních chyb, tj. když server vrátí dlouhý seznam chyb — vypíší se někam do dlouhého seznamu pod sebou? Nebo se zobrazí u každé chybné položky a formulář bude jedna bublina s chybovým hlášením přes druhou? Zmizí označení chyby ihned, když uživatel položku opraví, nebo se počká do dalšího odeslání? Otázek a problémů k vyřešení bývá poměrně dost a designu chybových stavů bychom měli věnovat dostatečnou pozornost a čas a nezpomínat na nenápadné detaily. OK, chybné textové políčko se zobrazí červeně, ale jak se třeba zobrazí chyba u přepínače? Chybové hlášení by mělo obsahovat jasné určení místa chyby, její příčinu i návod k možné nápravě. Sdělení typu chybný e-mail nikomu moc nepomůže, užitečnější bude třeba e-mail obsahuje nepovolené znaky.

V žádném případě se nesmí stát, že by se po odeslání formuláře ztratila nějaká zadaná data. Možná jste už narazili na formulář, z nějž po odeslání a opětovném zobrazení s oznámením, že je v něm nějaká chyba, zmizely některé položky a vy jste je museli s každým pokusem vyplňovat znova. To je nesmírná otrava a jednoznačná chyba na straně vývojářů. Ze stejného ranku je i chyba, kdy formulář s každým odesláním požaduje zaškrtnutí souhlasu s podmínkami nebo třeba opsání kontrolního kódu (captcha). S podmínkami jste jednou souhlas projevili, mají zůstat zaškrtnuté. Že nejste robot, jste už jednou prokázali, další opakování captcha je bezúčelné.

Ostatní detaily formulářů

Stalo se už poměrně zavedeným zvykem po úspěšném odeslání formuláře provést na serveru přesměrování (redirekci) na nové URL. Tato nenápadná funkce má za následek to, že prohlížeč po odeslání formuláře obdrží jinou stránku, a pokud uživatel náhodou či úmyslně stiskne v prohlížeči tlačítko pro znovunačtení (Reload, Refresh), načte se pouze tato nová stránka, na niž nás server přesměroval. V opačném případě se totiž místo toho prohlížeč znovu pokusí odeslat formulář, což může mít za následek jen mnohé nežádoucí až nebezpečné akce: nové odeslání téže objednávky, duplicitní odeslání zprávy, opakované zaplacení poplatku… Je až překvapivé, kolik webů tento problém nemá ošetřen a opakované odeslání formuláře na nich hrozí. Vždy si ověřme, zda naši vývojáři přesměrování po odeslání každého formuláře zajistili.

Při samotné tvorbě formulářů se jako designéři snažme používat pro každou hodnotu co nejvhodnější typy položek. Často lze tutéž informaci zadat několika různými způsoby, ne vždy je jednoznačné rozhodnout, který je lepší. Někde bude vhodnější zadat datum výběrem z nabídnutého seznamu, jinde to bude otravné a praktičtější bude zadat je jako text. Doplnit textové pole našeptávačem (tedy nabídkou obvyklých frází odpovídajících již zadané část textu). Ne vždy je vhodné na výběr z několika málo možností použít rozbalovací menu a lepší může být radio přepínač. Ale ani ten nebude vhodný, pokud jde o dvě vylučující se hodnoty, o typ volby ano/ne, kde je zase vhodnější zaškrtávací políčko (checkbox) či nějaké přepínací tlačítko. Pro různé typy textových informací bychom neměli používat pouze obecné textové pole, ale měli bychom upřesnit typ — email, number, date, tel apod. Moderní prohlížeče zobrazují takto upřesněná vstupní pole s různými pomůckami pro snadnější vyplnění (např. stepper, tedy tlačítka +1/-1 při zadání čísla), dotyková zařízení zobrazují odlišné virtuální klávesnice vhodné pro vyplnění zvoleného typu informace atd.

Vycházejme také z předpokladu, že naši budoucí uživatelé mají různé priority a mnohé věci vidí jinak než my. Nevnucujme proto ani ve formulářích uživatelům svůj vlastní světonázor a pohled na řešení problémů. Možná jsme sami přesvědčeni, že bezpečné heslo musí obsahovat malé i velké písmeno, číslici a interpunkční znaménko, ale naši uživatelé si to myslet nemusí. Mohou s úspěchem používat velmi silná hesla, která tyto požadavky nesplňují — třeba typu stig3hapn4bezr9 nebo zevsehonejhorsijsoutrpaslicihahaha. Místo vnucování vlastní představy o bezpečném hesle raději použijme dostatečně chytrý algoritmus, který posoudí, zda je heslo dostatečně silné, a konkrétní tvar uživateli nanejvýš doporučme.

Možná jsme sami přesvědčeni, že každý na světě si přece musí pamatovat svého nejlepšího kamaráda ze školky, měl nějakého prvního psa a fandí nějakému týmu. A že tedy když takové věci nabídneme jako kontrolní otázku pro případ ztráty hesla, každý si bez potíží vybere. Nevybere! Pokud už dojdeme k závěru, že kontrolní otázky opravdu nezbytně potřebujeme, nechejme volbu kontrolní otázky na uživateli. Můžeme mu nabídnout nějaké připravené jako nápovědu, ale nikdy ne jako jedinou možnost. A už vůbec nijak neomezujme odpovědi na ně. Co má pak dělat nešťastník, jehož babička se jmenovala Li, ale programátor webu trvá na tom, že jméno babičky nesmí mít méně než tři znaky?

Při návrhu bychom měli ctít standardy různých platforem, s nimiž uživatelé pracují. Právě ve formulářích, dialogových oknech a různých editorech jsou rozdíly mezi nimi docela markantní. Možná jste si už někdy všimli, že formulářové prvky vypadají na různých typech zařízení a operačních systémů poměrně odlišně. Znamená to především to, že bychom se měli snažit co nejméně přiohýbat a předělávat standardní ovládací prvky a nechat je v původní podobě, aby je mohl prohlížeč vykreslit podle zvyklostí cílové platformy.

Tato myšlenka ale jde mnohem dále. Především designéři a vývojáři, kteří používají celý život jediný operační systém, mají často tendenci považovat určité jevy a zákonitosti „své“ platformy za obecně platné standardy a posléze je i promítají do designu webů. Mohou být potom překvapeni, když části uživatelů, kterým jejich platforma není vlastní, jejich konstrukce nevyhovují a špatně se jim používají.

Někdy jde o velmi nenápadné detaily, někdy jsou rozdíly celkem zásadní. Např. v prostředí Windows je zvykem řadit tlačítka dialogů zleva doprava a hlavní tlačítko (typicky OK) je první zleva — zatímco v prostředí Mac je to odjakživa přesně opačně a hlavní tlačítko je zcela vpravo. Uživatelům obou platforem to „jejich“ řešení připadá jako logické a jediné správné a na to opačné pak hledí jako na podivnost, ne-li chybu. Rozbalovací nabídky (select, combo) ve Windows se standardně ovládají klávesnicí, zatímco na Macu jsou navržené čistě pro ovládání myší — a pokud designér ve formuláři předpokládá možnost výběru položky z nabídky klávesnicí, může narazit na problém u části uživatelů. Klíčová klávesa pro systémové příkazy ve Windows je Ctrl, na macu je to Cmd, zatímco Ctrl zde má dost odlišný význam. Při vypisování souborů je zvykem ve Windows zobrazovat nejprve složky/adresáře, potom teprve soubory, zatímco na Macu je zvykem složky řadit abecedně mezi soubory atd. Podobných příkladů lze najít spousty. Měli bychom na to myslet a snažit se používat konstrukce buďto co nejobecnější, nebo (třeba v případě zmíněných klávesových zkratek) nabídnout alternativní řešení pro různé platformy.

Závěr

Následující věta by po předchozích pár stech stránek mohla působit jen jako pokus o vtipný a ironický závěrečný bonmot, ale věřte, že je míněna zcela vážně:

Toto byl ve stručnosti základní a povrchní přehled toho, co by podle mě měl dobrý webdesignér znát a ovládat.

A to se bezpochyby záhy objeví houf lidí se spoustou důležitých věcí, které jsem zapomněl zmínit… Vlastně tím jen podtrhuji a sčítám předchozí účet současného designérského řemesla, které se během vývoje dostalo do stavu, že ani tak dlouhý text jako tato kniha nedokáže víc než jen načrtnout v hrubých obrysech základní body a hlavní témata k dalšímu hlubšímu studiu. Na druhou stranu, ono nic víc ani nebylo mým záměrem. Úmyslně jsem se snažil v každé kapitole a v každé podstatné oblasti, se kterou se designér potýká, jenom klouzat po povrchu a nebořit se do přílišných detailů. To by tato kniha jinak musela být nejméně desetisvazková — a stejně by nebyla nikdy kompletní.

Budu opravdu spokojen, pokud z těchto stránek laskavý čtenář pochopil, že současný interakční design je už obor neobyčejně rozsáhlý a v nejedné své součásti natolik hluboký a složitý, že si jen pro ni zaslouží úzkou, vysoce odbornou specializaci. Není už v žádných lidských silách jej pojmout kompletně a komplexně, do šířky i do hloubky současně. Musíme si proto vážit jak expertů, kteří ovládají velmi detailně některý z jeho segmentů — ať už se jedná o analytiky trhu či výkonnosti webu, specialisty na samotný návrh rozhraní, grafické designéry, copywritery, či experty v oblasti uživatelského testování, nebo třeba kodéry, co umí perfektně stylovat šablony WordPressu— tak i těch, kteří mají alespoň povrchní, ale široký přehled o všech zákoutích tohoto oboru a dokáží se v něm orientovat a správně delegovat příslušné činnosti na specializované odborníky. Oba přístupy mají svůj užitek a nelze říct, že jeden či druhý je lepší.

Hlavně na velkých, rozsáhlých či dlouhodobých projektech obvykle potřebujeme obojí. Je pak jen na subjektivní volbě, zda si vybereme sestavu několika úžeji zaměřených expertů, kteří znají svou část oboru dostatečně do hloubky, a pomocí dostatečného množství takových pokryjeme všechny potřeby daného projektu — anebo zda najdeme jednoho designéra schopného zastřešit celou problematiku návrhu a vývoje svými širokými znalostmi a přehledem o vztazích a souvislostech s tím, že mnohé detaily jednotlivých kroků pak bude delegovat na jednotlivé úzce zaměřené specialisty, kteří už jen bez znalosti celého obrazu splní zadané a přesně vymezené úkoly. Oba přístupy jsou správné, oba jsou vhodné.

Špatné je zaměřit se jen na některé části návrhu a vývoje a některé (možná v důsledku kritické a zásadní) zcela pominout.

Tato kniha splnila svůj účel, pokud vám pomohla pochopit, že na každém projektu návrhu nového webu, aplikace, rozhraní nějakého zařízení či jiného interakčního designu je velmi mnoho důležitých kroků a mnohem víc úkolů k řešení, než by se na první pohled mohlo zdát. A že podcenit třeba úvodní průzkum, „dolování“ informací, rešerše a analýzy, zpracování detailního zadání a specifikací jednotlivých součástí, práce s drátěnými modely a testování prototypů nebo třeba zpětné vazby a uživatelské testování může být pro výsledek i naprosto kritické.

Pokud jste pochopili, že výsledná grafická podoba aplikace nebo vzhled úvodní stránky webu jsou vlastně ty nejméně důležité a ve výsledku ty vůbec nejsnáze modifikovatelné součásti celého návrhu, zatímco těžiště práce webového designéra leží úplně jinde, spíše v těch poměrně málo nápadných a pro laiky méně viditelných obastech, nemohu být spokojenější.

Na druhé straně samotným designérům tato kniha nese ještě jeden vzkaz, svým sdělením docela protichůdný všemu výše řečenému. Přes všechnu složitost a množství kroků, které každá zakázka obnáší, je totiž celá ta práce ve své podstatě vlastně velice prostá: navrhnout produkt tak, aby maximálně vyhovoval současně uživatelům i zadavateli. Na ničem víc většinou nezáleží a všechny dosud popsané kroky a strategie nebyly ničím víc než podrobněji popsanými možnými nástroji, jak lze tohoto cíle dosáhnout.

Nejcennější odborností na práci designéra je nakonec „jenom“ umět zjistit a co nejpřesněji popsat, co chce a potřebuje zadavatel, a zatraceně dobře vědět, co chtějí a potřebují uživatelé. Mnohem lépe než oni sami.

Kdo tyto dvě informace má k dispozici — podrobné, přesné a pravdivé — má vyhráno. Propojit je nějakým vhodným návrhem je pak už jen víceméně rutinní řemeslo. Držím vám všem palce, abyste vždy dokázali rozpoznat, zda je máte všechny pohromadě, pravdivé a kompletní, a dokázali se podle toho správně zařídit. O nic víc vlastně v designu nejde.

Hodně štěstí.

Malá poznámka pro jazykové puristy

Pravopisně chybný tvar „skicy“ v textu používám zcela záměrně, jako vědomý bojkot jednoho gramatického nesmyslu. Abbé Dobrovský kdysi ve své reformě českého jazyka ponechal „s“ a „z“ obojetnými, zatímco jim nejpříbuznější „c“ svéhlavě a bezdůvodně prohlásil za souhlásku měkkou. A z toho dodnes plynou nesmyslné jazykové zmatky, jako „tácy pro paňácy“, ale „skici pana Hlavici“. Trvám na tom, že souhláska „c“ je svou podstatou obojetná a tvar „skici“ nemá v češtině žádné jiné opodstatnění, než ono podivné rozhodnutí páně Dobrovského, a je zcela korektní toto slovo skloňovat podle vzoru žena včetně oné tvrdé koncovky. Děkuji za pochopení.

Zájemce o podrobný rozbor odkáži na esej „Bezkopcý úval známý svými hicy předlohou skici mistra Kopanici.“ Je c měkké, nebo obojetné? — R. Adam, Naše řeč, ročník 86 (2003), číslo 4 — viz [3]

Petr Staníček

Dobrý designér to všechno ví!

Praktické postupy navrhování (nejen) webů

Vydáno vlastním nákladem autora

Grafická úprava, návrh obálky s použitím kresby Marka Douši, redakce, technické zpracování a sazba Petr Staníček. Jazyková korektura Jan M. Heller. Tisk PBtisk Příbram.

1. vydání, Kamenné Žehrovice, 2016

ISBN 978-80-260-9534-7  (ePUB)
ISBN 978-80-260-9535-4  (Mobipocket)
ISBN 978-80-260-9536-1  (PDF)