Web ostrý jako břitva : návrh fungujícího webu pro webdesignery a zadavatele projektů [Vyd. 1. ed.] 9788087923016, 8087923014

Citation preview

Jan Řezáč Web ostrý jako břitva

Kniha byla zakoupena na serveru Palmknihy.cz. Kupující: Mašek Tomáš Adresa: , , ID 4656-73666670092290324767-17580-623 Upozorňujeme, že kniha je určena pouze pro potřeby kupujícího. Kniha jako celek ani žádná její část nesmí být volně šířena na internetu, ani jinak dále zveřejňována. V případě dalšího šíření neoprávněně zasáhnete do autorského práva s důsledky dle platného autorského zákona a trestního zákoníku. Neoprávněným šířením knihy poškodíte rozvoj elektronických knih v České republice. Tak nám, prosím, pomozte v rozvoji e-knih a chovejte se ke knize, k vydavatelům, k autorům a také k nám fér.

Mašek Tomáš » , ,

Návrh fungujícího webu pro webdesignery a zadavatele projektů. 2014

Jan Řezáč Web ostrý jako břitva Text Copyright © Jan Řezáč Ilustrace Copyright © Klára Zahrádková ISBN: 978-80-87923-01-6

Web ostrý jako břitva Návrh fungujícího webu pro webdesignery a zadavatele projektů. Co Čech, to webdesigner. Weby navrhují elektrikáři i instalatéři, váš učitel na střední, soused, aktivní prateta. To ovšem neznamená, že jejich weby přinášejí smysluplné výsledky. Chcete tvořit weby ostré jako břitva? Pak potřebujete vystoupit z davu nadšených laiků. Držíte v ruce první českou knihu, která dá systém vašemu návrhu webu. Tato kniha je o návrhu webových prezentací (e-shopů, firemních webů, microsites 1…) – tedy o webech, které prodávají produkty či služby. Provedu vás strukturou návrhu webu a odkážu vás na vhodnou literaturu. Začátečníkům a zadavatelům projektů pomůže kniha v rychlejší orientaci v oboru, pokročilým webdesignerům vyplní pár mezer a poskytne jim argumentační podporu pro jejich práci. V knize mluvím směrem k webdesignerům. Jako zadavatel webových projektů získáte přehled o procesu návrhu webu, a tudíž začnete poptávat weby smysluplně a budete moci lépe zkontrolovat práci svého webdesignera. Přečtěte si především kapitoly o procesu návrhu webu a Maslowově pyramidě webdesignu. Jako webdesigner máte v rukou nástroj, který vás provede návrhem webu. Mnoho začínajících webdesignerů narazí na zcela zásadní problém – neví, jak začít, ačkoliv umí pracovat s Photoshopem nebo napsat stránku v HTML. Tato kniha vás seznámí se vším, co budete do začátku potřebovat. Webdesign se během posledních let rozšířil z pouhé tvorby HTML kódu na propracovanou soustavu disciplín a skutečně edukovaných profesionálních webdesignerů chybí jen v České republice stovky.

1 Weby o velikosti jednotek stran. Obecně se týkají úzkého uceleného tématu, jako je prezentace konkrétního produktu.

5

V knize najdete

Krátký úvod do webdesignu Základy práce s poptávkou Smysluplný proces návrhu webu Podněty z praxe Odkazy na kvalitní literaturu

V knize nenajdete Jak ovládat grafické programy Jak psát HTML a CSS Jak programovat Univerzální řešení pro všechny weby Vědecký rozbor webdesignu

6

Jak pracovat s touto knihou Kniha je rozdělena do několika bloků, které vám pomohou zorientovat se v procesu návrhu webu. Po krátkém úvodu do problematiky projdeme základy projektového řízení pro webdesignery, proces návrhu webu, Maslowovu pyramidu webdesignu a základy profesionálního přístupu. Webdesigner si zopakuje to, co už dávno ví a dělá 2, a zadavatel zjistí, co má vyžadovat po svém webdesignerovi 3. V rámci každé kapitoly dostanete základní teoretické informace, úvod do metod, které můžete v dané fázi použít, a odkazy na literaturu. Webdesign není jednoduchý, je jen podceňovaný. Nastal čas to změnit. Zadavatelé projektů mohou literaturu přeskočit, pro webdesignery je naopak zcela zásadní. Tato kniha vám dá všeobecný přehled, ale pro návrh fungujícího webu si budete muset své znalosti i dovednosti ještě výrazně rozšířit. Po jejím přečtení ale už budete vědět, po čem sáhnout.

2 Že? 3 Společně pak můžeme držet minutu ticha za požadavek na “grafický návrh hlavní strany”.

7

Proč jsem napsal tuto knihu Historie této knihy začíná 19. února 2012, kdy mi do e-mailové schránky přišla poptávka na tvorbu nového webu v tomto znění:

Dobré odpoledne, naše společnost potřebuje vytvořit nové webové stránky. Podnikáme v oblasti stavebnictví. Stránky budou obsahovat hlavní stranu, služby, o nás a kontakt. Prosím o cenovou kalkulaci a návrh termínu spuštění. S pozdravem, 4 Kamila Nováková  V tu chvíli jsem si uvědomil, že existuje nezanedbatelné množství webdesignerů, kteří obratem zareagují cenovou nabídkou a klient některou z nabídek s velkou pravděpodobností přijme. Následně webdesigner web vytvoří, odevzdá, dostane za něj zaplaceno a on i klient „jsou v pohodě”. Zda web funguje nebo ne, už v jejich příběhu často nikdo neřeší. Výsledky studií Davida Dunninga a Justina Krugera z Cornell University ve zkratce říkají, že lidé neví, že neví, že neví 5, a na základě své neznalosti dělají neobjektivní rozhodnutí, která plodí chyby a ztráty. Pokud děláte webdesign rok či dva, je míra toho, co nevíte a zároveň si to neuvědomujete, skutečně vysoká. Nízký práh vstupu do odvětví webdesignu vytváří přetlak mezi nízkonákladovými a začínajícími webdesignery, kteří ve většině případů netuší, že netuší, že netuší. Na druhé straně stojí zadavatel, který má pocit, že jeho web by mohl dodat i student na gymnáziu. Neví, co má poptat, požaduje nereálná projektová omezení a dokáže posoudit výsledek jen jako líbí/nelíbí. Perpetum mobile na mizerné weby 6. Po tvůrcích webů je v současnosti velká poptávka. Množství zadavatelů se spálí, když zvolí webdesignera podle nízké ceny, nebo se dokonce pokouší vytvořit si web svépomocí. V prostředí webdesignu neexistuje formální vzdělávání. Vysoké školy webdesign nechápou, protože je příliš mezioborový, takže prakticky všichni webdesigneři jsou samouci. V naší zemi neexistuje v roce 2014 jediná škola, která by se k webdesignu postavila čelem a dala mu jasné základy, metodiku a principy. Jediný způsob, jak bojovat proti Dunning-Krugerově efektu, je sebevzdělávání – kvalitních knih a studijních materiálů je naštěstí mnoho a tato kniha na mnohé z nich odkazuje. Cílem této knihy, je aby příběh (nejen) paní Novákové dopadl dobře.

8

4 Osoby a události v této knize jsou smyšlené a jakákoliv podobnost s realitou je čistě náhodná. 5 Tzv. Dunning-Krugerův efekt nebo zkráceně DK efekt. 6 Odstavcem jsem pravděpodobně naštval skoro všechny potenciální čtenáře.

Slovníček pojmů Klient (zadavatel webu) je v této knize člověk, který za web platí. Klientem můžete být vy sami, může to být agentura/webové studio či marketingové oddělení v korporaci. Klientem může být váš zaměstnavatel, ale také laik 7, který potřebuje web.

Konverzní akce je taková akce, ze které má klient přínos. Konverzní akce dělají na webu jeho návštěvníci.

Návštěvník (uživatel) je člověk, který přichází na web a pokouší se na něm něco udělat dle svých vlastních niterných motivací.

Web je ta věc, kterou vidíme v prohlížeči 8.

Zákazník je návštěvník webu, který na webu provedl nějakou konverzní akci.

7 Bez ohledu na jeho schopnosti či vzdělání – laik je člověk, který se neživí návrhem webu.

8 Ehm. http://naostri. se/zapninet

9

kdy weby selhávají?

úvod do web

schopnosti webdesigner komunikace projektové řízení marketing 10

Jan Řezáč Web ostrý jako břitva Název kapitoly

technický dozor

webdesignu kdy weby fungují?

nera

Jan Řezáč Web ostrý jako břitva Název kapitoly

11

1 Někteří klienti netuší, že mají chtít výkon, a nedokážou ani pojmenovat metriky. Mají ale od webu určitá očekávání a podle nich pak webdesigner doporučí vhodnou metriku a dohlédne na nastavení jejího měření a průběžné vyhodnocování.

Cílem dobrého webdesignera je vytvořit web, který bude fungovat – tedy plnit svůj účel pro byznys klienta a naplňovat potřeby návštěvníků webu. V praxi to znamená, že webová prezentace má pro vašeho klienta jasný přínos, který je nejčastěji reprezentován finančním ziskem. Díky webu váš klient peníze vydělá nebo ušetří. Peníze jsou zásadní metrika, která říká, že jste vyřešili klientův problém. Návratnost investice může mít různé formy v závislosti na tom, kde web stojí v rámci strategie vašeho klienta. Potřebě přínosu by měla být podřízena i snaha webdesignera. Web musí vydělat klientovi peníze, aby se vrátily náklady spojené s tvorbou webu a web vytvářel zisk. Webdesigner si musí být vědom toho, že jeho výtvor nebude nakonec měřen estetickou kvalitou, ale faktickým výkonem 9 dle předem nastavených metrik. Úspěchu nelze dosáhnout, pokud se budete soustředit jen na grafické ztvárnění webu. Výhodou tohoto přístupu je dlouhodobá spolupráce s klientem, která vám přináší další práci, takže vyděláte oba. Klient, kterému web funguje, nemá důvod jít jinam.

Samozřejmě jsou i neziskové projekty – ale i těmi chcete něčeho dosáhnout. Neziskovka chce změnit svět (což je mnohem těžší úkol než vydělat peníze). Osobní web často prodává nějakou službu nebo pomáhá budovat profesionální reputaci. Výkon někdy není finanční, ale v této knize s ním tak budeme pracovat.

9 Estetická kvalita výkon webu podporuje, ale nepředstavuje cíl, nýbrž prostředek.

Jan Řezáč Web ostrý jako břitva Úvod do webdesignu

13

Typy webových projektů Weby můžeme z pohledu požadovaného výkonu rozdělit do tří základních skupin:

⟶⟶ Webová prezentace má za cíl ovlivnit či změnit chování určité skupiny lidí – prezentuje určitý produkt nebo službu a je často kanálem pro prodej. ⟶⟶ E-shop prodává produkty či služby online – cílem e-shopu není jen prezentace produktů, ale především jejich přímý prodej. ⟶⟶ Webová aplikace řeší určitý problém svých uživatelů prostřednictvím sebe sama. Není kanálem pro prodej produktu, ale přímo produktem. Cílem designera webových aplikací je vytvořit nový návyk – aplikace tedy zapadne do života člověka, který ji používá.

Interakce

Obsah Webové prezentace

Obsah webu není nutně jen text. Jsou to fotografie, ilustrace, infografiky, videa, grafy, hudba, animace,…

14

E-shopy

Webové aplikace

Tato kniha je v první řadě o webových prezentacích (e-shopy, microsites, firemní weby, blogy,…), a ne aplikacích (sociální sítě, mapové aplikace, mobilní aplikace, ERP 10, intranety,…). Klíčem k úspěšné webové prezentaci je primárně její obsah, protože kvůli němu návštěvníci na webovou prezentaci chodí 11, a díky tomu se rozhodují, zda uskuteční konverzní akci 12. Pro tvorbu webových prezentací jsou potřeba jiné znalosti a dovednosti než pro tvorbu webových aplikací. Webové prezentace musí umět prodat to, co propagují. U webových aplikací jsou klíčové dobře navržené interakce, snadnost používání a schopnost aplikace podpořit konkrétní procesy vašeho klienta nebo jeho zákazníků. V každé oblasti hledají klienti tým s trochu jiným složením – v případě prezentačních webů se bude jednat primárně o skvělý obsahový/marketingový tým, u digitálních produktů bude kladen důraz více na návrh interakcí. Webdesigner by měl vědět, zda chce dělat spíše prodejní weby (prezentace) nebo webové služby (aplikace), a podle toho zacílit své další vzdělávání. Zkušený webdesigner zvládne postupem času obojí. E-shopy jsou z pohledu tohoto dělení přibližně uprostřed, ale více se blíží webovým prezentacím.

Jan Řezáč Web ostrý jako břitva Úvod do webdesignu

10 Korporátní informační systémy 11 Existují dvě specifické sorty návštěvníků, kteří chodí na web kvůli grafickému designu. Jsou to webdesigneři a majitelé webů. 12 Konverzní akce je taková akce, která má přínos pro vašeho klienta. Více se o konverzních akcích dozvíte později v této kapitole.

Ondřej Válka: Lidé použijí web a splní tak svoje cíle prostřednictvím konverzních akcí, které mají pro vašeho klienta přínos.

Kdy weby fungují? Web, který funguje, vytváří přínosy, a tedy přináší klientovi zisk. Ten ale nemusí přijít hned. Přínosy má web především díky třem faktorům:

⟶ Lidé na něm provedou konverzní akci. Může se jednat o odeslání objednávky, sdílení stránky na sociálních sítích, registraci do newsletteru 13… konverzní akce je často i jednoduše měřitelná. ⟶ Lidé na něm naleznou informaci – člověk na webu najde to, co hledá, informaci zkonzumuje a odchází. Možná na základě této informace začne v budoucnu přemýšlet o tom, že potřebuje produkt vašeho klienta, ale jedná se o dlouhodobější proces. Samotná konzumace se měří výrazně hůře než konverzní akce, ale mnoho webů je postaveno právě na schopnosti předat správným způsobem informace. Díky webu se pak snižuje zátěž call centra, postupně se buduje databáze potenciálních zákazníků, zvyšuje se návštěvnost a nakonec i přímé konverze. ⟶ Lidé na základě webu získají pocit – web vyvolá emoce, které si návštěvník spojí s brandem provozovatele webu. Díky pocitu si návštěvník web snadněji zapamatuje, bude o něm spíše mluvit s ostatními a v budoucnu se může vrátit kvůli informacím, potažmo konverzní akci.

Lidí připravených nakoupit je relativně málo – řádově jednotky procent. Mnohem více lidí o webu vůbec neví, nebo už tuší, ale zdaleka není připraveno nakoupit. Je tedy vhodné přemýšlet o webové prezentaci nejen jako o nástroji pro prodej, ale také o nástroji pro budování vztahu klientovy značky s lidmi a získávání lidí, kteří zatím s brandem klienta vůbec nepřišli do styku. Pro každý webový projekt můžete definovat klíčové ukazatele výkonnosti, tedy KPI (key performance indicators).. Na základě klientových očekávání vzhledem k výkonu webu můžete následně prioritizovat klíčové části webu a primárně řešit to, co je důležité.

Jan Řezáč Web ostrý jako břitva Úvod do webdesignu

13 Hromadný e-mailing.

Kdy weby selhávají? Při mé dosavadní praxi jsem se setkal s těmito základními faktory neúspěchu webového projektu, které způsobil webdesigner:

Schopnosti webdesignera Webdesigner není schopen doručit výstup v odpovídající kvalitě a projekt selže na jeho neschopnosti. Problém může nastat na strategické úrovni, kdy je naplánován nesmyslný web, který neosloví cílovou skupinu. Nebo může vzniknout problém na úrovni exekuce, kdy je web pomalý, nepoužitelný či nedůvěryhodný. V obou případech je projekt zahozen nebo živoří.

Komunikace Špatná či nedostatečná komunikace má za následek vzájemné nepochopení webdesignera a klienta. Patří sem i neznalost korporátní politiky na straně webdesignera. Selhání skvělého projektu může nastat například ve chvíli, kdy se odnikud vynoří osoba na straně klienta, která v projektu dosud nebyla zainteresována, a svou politickou silou ho zastaví nebo výrazně zkomplikuje.

Projektové řízení Webdesigner není schopen dodat výstup v termínu za dohodnutou cenu. Projektové řízení zvládá málokdo a je mu věnována celá kapitola této knihy.

Marketing Část klientů se ke spuštění webu upne jako k zásadnímu milníku, který vyřeší všechny jejich problémy. Tato představa je falešná. Web je jedním z prvků marketingové strategie a bez marketingu nebude nikdy fungovat.

16

Jan Řezáč Web ostrý jako břitva Úvod do webdesignu

Technický dozor Proti totálnímu selhání projektu se může klient zaštítit tzv. technickým dozorem14. V případě rozsáhlejších projektů má klient ve svém interním týmu profesionálního konzultanta webových projektů nebo potřebuje technický dozor. Technický dozor pomáhá smysluplně vydefinovat klientovu představu o webu a v průběhu tvorby dohlíží na práci jeho dodavatelů. Typicky to znamená, že:

⟶⟶ Položí ty správné dotazy a pomůže klientovi vydefinovat vizi. ⟶⟶ Pomůže zvolit vhodného dodavatele včetně vyhodnocení výběrového řízení. ⟶⟶ V klíčových momentech bude jednat za klienta – nelze ho „umluvit” díky tomu, že tématu nerozumí. ⟶⟶ Ověří, že se jednotlivými kroky návrhu a realizace webu klient blíží ke stanovenému cíli. ⟶⟶ Zabrání nerelevantním krokům klienta. ⟶⟶ Dotáhne slepá místa projektu. ⟶⟶ Bude mentorovat klienta i dodavatele s cílem dosáhnout lepšího řešení. ⟶⟶ Může pomáhat řídit průběh projektu.

Z mého pohledu je technický dozor zcela zásadní pro úspěch kteréhokoliv většího webového projektu. Technický dozor projektu pomůže na úrovni strategie i exekuce. Možná klient skutečně ví, co potřebuje pro řešení svého problému, to ale neznamená, že pozná dobře navržený výsledek.

14 Zkušený webdesigner / konzultant webů, který sedí na straně klienta.

Jan Řezáč Web ostrý jako břitva Úvod do webdesignu

17

Vážená paní Nováková, děkuji vám za vaši poptávku. K tomu, abych mohl váš projekt nacenit, budu potřebovat mnohem více informací. Bylo by možné se sejít během příštího týdne v Brně? Navrhuji úterý, 15:00 v kavárně FALK na Gorkého. S pozdravem Jan Řezáč

18

19

je klien práce spojené se web? získáním projektu skutečná práce na projektu osa „za k komunikace řízení projektu na Vaší straně způsoby odměňování práce platba předem s popt změny v kalkulaci slevy smlouvání ukotvení proje práce zdarma Spec!Work Hodinová sazba Pevná cena Podíl na projektu Odměna za výkon 20

Jan Řezáč Web ostrý jako břitva Název kapitoly

ient připraven na nový ? Kdy stanovovat termíny a kolik“ Dodržujte termíny

ce optávkou

rojektu

osa „kdy“ jsem pro projekt ta správná osoba? osa „co“

projděte si s klientem navazující práce technika WBS (Work Breaking Structure) Jan Řezáč Web ostrý jako břitva Název kapitoly

21

Prostě říkejte: NE

Lidé vám budou volat a budou chtít výsledky přes víkend. Lidé budou chtít, abyste pro ně pracovali zadarmo nebo ...

Mašek Tomáš » , ,

2 Abyste mohli vytvořit web, který přesvědčí návštěvníky k provádění konverzních akcí, musíte pochopit podstatu byznysu klienta a niterné motivace jeho návštěvníků (jak produkt/služba klienta naplňuje jejich potřeby). Na základě pochopení těchto dvou pilířů pak navrhnete web, který efektivně propojí klienta s jeho budoucími zákazníky. Nejdříve vám ale přijde poptávka, které se budeme věnovat v celé následující kapitole. Ve většině případů není vhodné reagovat na poptávku cenovou nabídkou – o projektu ani klientovi ještě nic moc nevíte. Jestliže vás poptávka zaujme, s klientem se pokud možno sejděte. Telefon a e-maily jsou spíše nouzová varianta. Smyslem vaší počáteční práce je zjistit o projektu dostatek informací, abyste ho mohli pochopit, odhadnout jeho velikost, cíle a cílovou skupinu a po skončení schůzky pak poslat klientovi kalkulaci a časový rámec. Absolutní částku nikdy neříkejte přímo na schůzce, pokud se nejedná o jasně definovaný objem práce 15. Klienti bývají z pohledu tvorby webu různě zkušení. Nejnáročnější je práce pro laiky. Znamená to, že:

⟶ Design není klientův šálek kávy a pravděpodobně má zkreslenou představu o procesu, ceně, termínech, předpokladech pro úspěch i vašich faktických schopnostech. ⟶ Web často není pro vašeho klienta priorita, má denně k řešení spoustu jiných věcí. ⟶ Web je pro vašeho klienta investice, primárně jde tedy o její návratnost (v extrémních případech v podobě estetického uspokojení). ⟶ Klient si pravděpodobně uvědomuje svou nevědomost a hledá dodavatele, který mu dá zpětnou vazbu na jeho zadání. Je tedy vhodné se orientovat nejen ve webdesignu, ale i v problematice byznysu a marketingu. ⟶ Webdesigner jste vy a nikoliv váš klient – jste zodpovědní za to, že váš proces tvorby webu funguje, a za vyjasnění této pozice v případě, že klient překročí hranici a začne navrhovat web za vás. 15 Téma naceňování projektů rozvádím podrobně později.

Jan Řezáč Web ostrý jako břitva Práce s poptávkou

23

Lidé vám budou volat a budou chtít výsledky přes víkend. Lidé budou chtít, abyste pro ně pracovali zadarmo nebo v pochybných výběrových řízeních. Lidé budou chtít práci, kterou si myslí, že potřebují, a nikoliv takovou, která jim poskytne výsledky. Prostě říkejte: NE, protože jinak proděláte kalhoty a velmi rychle vyhoříte na práci, která nemá žádný smysl a v dlouhodobém horizontu dokonce ani finanční přínos. Vytvořit webovou prezentaci ostrou jako břitva trvá tři měsíce nebo déle a většina webdesignerů (těch dobrých) má plno na dlouho dopředu. Poptávka po kvalitním webu výrazně převyšuje nabídku. Pokud klient potřebuje nový web zítra, tak se bude muset vždy spokojit se suboptimálním řešením už jenom proto, že skoro jistě nemá vytvořený obsah a dobrý webdesigner na něj nemá skoro jistě čas za dostupnou cenu.

24

Jan Řezáč Web ostrý jako břitva Práce s poptávkou

Jsem pro projekt ta správná osoba?

Jednou za čas dostanu poptávku na web pro drobného živnostníka či rodinnou firmu. Dělám i malé weby, ale většinou je mým klientem střední firma nebo nadnárodní korporace. Moje práce se vyplatí až od určitého objemu investice a potenciálního zisku. Pro lokálního bylinkáře nemá smysl, abych mu navrhoval web, protože se mu investice bude vracet roky.

Optimální přístup, který se mi vyplatil pro zakládání dlouhodobé spolupráce, je Coveyho 16 „win-win, nebo žádná dohoda”. Znamená to, že buď se spolupráce vyplatí oběma stranám, nebo neuzavřete kontrakt. Pro tento přístup je nutné znát klienta a podmínky projektu alespoň tak dobře, abyste dokázali poznat, zda se klientovi vaše služby vyplatí a zda má projekt z vašeho pohledu smysl. Vždy zvažujte, zda se klientovi vyplatí vás najmout. Když si nejste jistí, uveďte hned na začátku hodinovou sazbu a nerelevantní poptávky se odfiltrují samy (směrem nahoru i dolů). Mnoho klientů má pocit, že potřebuje web na míru, ačkoliv tomu tak není. Pro nízkonákladové projekty je výrazně jednodušší a levnější postavit web na upravené typové šabloně nebo službě, která umožňuje vytvářet weby svépomocí. Pokud klient investuje uspořené finance do kvalitního obsahu a marketingu, dostane i řádově lepší výsledek, než je mu schopen „na míru” dodat začínající webdesigner. Druhou stranou mince jsou rozsáhlé weby a komplexní zakázky – pokud jste doposud nenavrhovali zpravodajský portál pro stovky tisíc lidí denně, je možné, že na tu práci jednoduše nestačíte. V takovém případě se raději spojte se zkušenějšími, nebo „dopadnete na ústa”. Neodrazuji vás od velkých projektů, ale doporučuji rozumnou opatrnost a sebereflexi.

16 Stephen R. Covey: 7 návyků skutečně efektivních lidí

Jan Řezáč Web ostrý jako břitva Práce s poptávkou

25

Je klient připraven na nový web?

Více než jednou jsem se setkal s přístupem, kdy klient zavelel, jak se bude dělat jeho web. Poprvé jsem skákal, jak klient pískal (byl skutečně přesvědčivý) a výsledek dodnes neexistuje. Poučil jsem se z této situace a i v případech, kdy klient vypadá, že ví, co chce, tak jsem to já, kdo nastavuje mantinely tvorby webu a říká, co se kdy a jak bude dělat. Klientovi, který pochopí, že je v rukou webdesignera a nikoliv diletanta, to velice rychle uvolňuje ruce a může se opět soustředit na svoji vlastní práci. Je možné, že ještě nemáte patřičné argumenty, znalosti a vystupování – v takovém případě raději pracujte v týmu a nechte komunikaci na jiných, od kterých se můžete učit. Je to jednodušší a více ku prospěchu vašich klientů.

Vaši klienti jsou vysoce inteligentní lidé, kteří rozumí svému byznysu a jeho prostředí. Najímají si vás, protože nerozumí webům a ve většině případů je jejich představa o webu velmi zkreslená. Na nás – webdesignerech – tedy leží úkol edukovat klienty a provést je procesem návrhu a tvorby webu takovým způsobem, aby měl výsledný web pro klienta smysl. Mimo jiné to znamená, že potřebujete pochopit klientův byznys, jeho zákazníky a jeho dlouhodobou strategii, abyste mu mohli v otázkách webu radit. Typický scénář je takový, že klient netuší, co znamená nechat si vytvořit web. Jeho fantazie často končí u mlhavé představy vzhledu a obsahu hlavní strany a potřebě redakčního systému. Vše je doplněno zcela nereálnými termíny, které jsou mnohdy pevně navázány na další marketingové aktivity. Nebo dokonce na web zapomněl a řeší ho dodatečně. Jste pro projekt ta správná osoba? Máte pocit, že projekt má smysl? Nastal čas zasadit ho do projektového rámce.

Rozsah

Cena

26

Termín

Jan Řezáč Web ostrý jako břitva Práce s poptávkou

Před několika lety jsem vyrobil doslova přes noc web pro jednoho brněnského politika. Strana dala na billboard webovou adresu, billboardy byly zveřejněny a PAK si teprve někdo vzpomněl, že by na tom webu mohlo i něco být…

Tvorba webových prezentací je fakticky reprezentována projekty. Jestliže neděláte krabicová řešení, je každá zakázka unikátní 17 a jsou na ni vyčleněny omezené zdroje. Úspěšné projekty vždy někdo řídí a v tomto případě jste to vy 18. V rámci úvodního oťukávání s klientem je nutné ukotvit projekt do trojimperativu. Trojimperativ je pojem z projektového řízení, který obsahuje tři osy:

1. Co bude vytvořeno 2. V jakých termínech 3. Za jakou cenu Projekty s určující osou ZA KOLIK pravděpodobně stejně nechcete dělat – moje zkušenost je taková, že jsou časově roztahané 20 a po určité době vás přestanou bavit.

Trojimperativ je banální pro malé projekty, ale velmi komplikovaný pro větší 19, protože se v průběhu práce mění zadání, a tudíž i rozsah práce. Nechte klienta určit, zda je pro něj klíčový rozsah/kvalita výstupu, čas nebo cena. Buďte neoblomní – klient vám bude tvrdit, že všechno je důležité… vyslechněte ho… ale domluvte se jen na jedné určující ose. Typická zakázka má určující osu „Co“ a důraz je na rozsahu/kvalitě výsledku. Jestliže má klient navázáno spuštění webu na určitý pevný termín (termín veletrhu, návštěvu zahraničního partnera,…), pak je určující osa „Kdy“. Tvorba webu je často doprovázena stresem, který pramení z toho, že klient zvolil jako hlavní osu „Co“ a „Kdy“ zároveň. Nikdy se nenechte natlačit do tohoto typu projektu, pokud není stres vyvážen vysokou odměnou. Před zasláním kalkulace s klientem vyřešte, co a kdy od vás dostane za výstup. Bez ujasněného trojimperativu zapláčete nad výdělkem (a váš klient také), protože dodáte něco, co klient nechtěl, v termínu, kdy už to nepotřebuje, a on vám odmítne zaplatit cenu, na které jste se nedohodli. Cenu nikdy nestřílejte od boku. Jestliže řeknete, bez jakékoliv bližší znalosti projektu částku, klient se jí chytí jako záchytného bodu a bude s ní porovnávat vaše veškeré další kalkulace bez ohledu na to, jak moc jste mu na začátku tvrdili, že je to orientační odhad. Lidé jsou schopni srovnávat pouze relativně a vaše cifra vytvoří mentální kotvu, se kterou budou podvědomě porovnávány veškeré další kalkulace.

Jan Řezáč Web ostrý jako břitva Práce s poptávkou

Jiří Rusňák: Při první spolupráci s klienty postupuji tak, že jim napíši, co budu dělat, jaký je odhadovaný čas, co z toho budou mít, kolik je to bude stát. Je to součást mojí edukace klienta. Každá další dodávka je tak iterací (ne delší než 14 dní), která obsahuje výstupy a jejich ověření vůči očekáváním, naplánování obsahu následující iterace (co dodám, kdy a v jaké kvalitě) a případně i korekce zadání, pokud je to vhodné. Já i klient pořád víme, na čem jsme, kam jdeme, kudy (jak), proč, co bude obsahem příštího kroku a kolik to bude stát.

Ukotvení projektu

17 Z pohledu klientova kontextu, nikoliv přístupu designera ke svému procesu. 18 Pokud jste freelancer. Jinak je to projektový manažer. Tak jako tak musíte uřídit alespoň sebe sama. 19 Velikost je individuální vzhledem k vašim zkušenostem. 20 Ze dvou týdnů je po nějaké době rok a peníze stejně nikde...

27

Část klientů očekává, že v ceně díla jsou konzultace k tomuto dílu a dalším navazujícím výstupům i několik měsíců po předání. Ukažte tedy klientovi dopředu, jak bude vypadat váš výstup a kolik práce od vás může očekávat po jeho předání. Typicky je potřeba vyjasnit, zda jsou součástí ceny projektové schůzky a cestování s nimi spojené.

Osobně používám WBS na každý komplikovanější projekt – je to práce navíc, ale na druhou stranu vám umožní vyvarovat se zbytečných překvapení a moje kalkulace je pak poměrně přesná.

Je bezpodmínečně nutné vyjasnit s klientem jeho očekávání vzhledem k vašim výstupům a jejich faktický rozsah, abyste v určitou chvíli mohli prohlásit: „Zde vám předávám výstupy, na kterých jsme se dohodli, mohu vystavit fakturu?“ Bez přesné specifikace se dostanete do stavu, kdy obě strany předpokládají, že rozsah je přece jasný… V případě malých projektů stačí krátká slovní specifikace rozsahu (ideálně včetně počtu revizí, setkání,… oceněných např. hodinovou sazbou). U větších projektů je vhodné využít některé z technik projektového řízení. Co bude skutečně vytvořeno, závisí na vašem procesu, schopnostech a určující ose trojimperativu.

Technika WBS (Work Breakdown Structure) WBS neboli Work Breakdown Structure je technika, kterou využijete jako podklad při plánování a řízení projektů. WBS pochází z leteckého inženýrství (kde si nemohou lidé dovolit laxní rozsah projektu) a nakonec pronikla i do projektového řízení. Projekt v rámci WBS rozdělíte na uzavřené nepřekrývající se celky, které je potřeba udělat, a ty pak dělíte na menší části až do chvíle, kdy můžete každou část považovat za rozumně nacenitelnou a odhadnutelnou 21. Cílem je pokrýt všechny části projektu, které bude potřeba udělat bez ohledu na jejich časovou souslednost. Projekt rozložený pomocí WBS se vám bude výrazně jednodušeji naceňovat, zjednoduší se tvorba časového odhadu i vlastní řízení projektu. WBS vypadá jako strom, takže je nejjednodušší vytvořit WBS jako myšlenkovou mapu 22. K WBS samozřejmě potřebujete dostatek vstupních informací, takže v jednu chvíli budete tak jako tak odhadovat, co bude potřeba udělat (a záleží jen na vaší zkušenosti, jak dobře se trefíte)… a později odhad zpřesníte a doplníte 23. Při odhadování větších projektů je vhodné váš úvodní odhad vynásobit vhodným koeficientem, ale záleží samozřejmě na vaší dosavadní zkušenosti.

Projděte si s klientem navazující práce Klienta je potřeba upozornit, co bude ještě potřebovat ve chvíli, kdy s prací skončíte (zvláště v případě, kdy se v oboru neorientuje – pokud pracujete jako subdodavatel pro webovou agenturu, je situace jednodušší). V případě, že tvoříte prototyp projektu a grafický návrh, upozorněte klienta na nutnost tvorby šablon, programování, tvorby obsahu a dodatečných marketingových aktivit, bez kterých nemusí mít váš výstup žádný smysl. Většinou se vyplácí dodat výstup dříve a ve vyšší kvalitě, než klient očekává. Tedy pokud to jde. Tento přístup vám může pomoci v tom,

28

Jan Řezáč Web ostrý jako břitva Práce s poptávkou

Pokud klient používá WBS při své práci, tak jste si právě významně šplhli.

Osa „Co”

21 Jedná se o techniku odhadování projeků nazvanou Zespodu nahoru – viz kniha Odhadování softwarových projektů, Steve McConnell, 2006 22 Existuje mnoho nástrojů pro tvorbu myšlenkových map. Pro spolupráci více lidí nad jednou mapou jsou vhodnější ty online. 23 U velkých klientů prochází rozpočet schvalováním, které někdy vylučuje pozdější posuny kterýmkoliv směrem.

Zapisujte si čas strávený nad projektem a porovnávejte své odhady se skutečností. Je to jediný způsob, jak se v odhadování zlepšit.

že si vás vaši klienti zapamatují jako spolehlivého partnera. Dodávat za nižší cenu nemá smysl, protože byste šli sami proti svým ekonomickým zájmům a klient by si zvykl, že budete pracovat levněji, než jste se na začátku dohodli 24. Zároveň by vás mohl začít doporučovat nikoliv jako „toho dobrého”, ale jako „toho levného” a tento fakt do budoucna ovlivní typy klientů, kteří vás budou oslovovat.

24 Tady hodně záleží na tom, jak dobře odhadujete projekty, a na vaší etice. Osobně klientovi vždy rozklíčuji cenu…

Osa „Kdy” Poté co vyřešíte, CO máte udělat, je vhodné zamyslet se nad termíny realizace. Nejčastější termín pro řešení webových projektů je ASAP, tedy „as soon as possible“. Weby by měly být hotové ideálně přes víkend či přes noc – ve chvíli, kdy klient zjistí, že jsou webové adresy vytisknuté na vizitkách pro obchodníky, či nejlépe hned. Termíny je potřeba zchladit a převést do realistické podoby – moje zkušenost je taková, že web s termínem ASAP budete řešit ještě následující rok a nikdy výsledek nespustíte. Nenechte se zmást představou klientů, že včera bylo pozdě, jinak se nikdy nezastavíte. Samozřejmě, že ASAP práce existuje a stejně tak existují termíny, které je potřeba dodržet – často se jedná o masivní inzerci, účast na veletrhu, schůzku s významným zákazníkem (a v takovém případě je KDY klíčová osa trojimperativu). Jestliže klient přijde s termínem ASAP, je nejjednodušší rozdělit práci na menší části a začít s rychlou minimalistickou variantou, kterou lze při nejhorším stihnout přes noc. Zkrátka, aby co nejrychleji „něco bylo“, a další den začít pracovat na „normálním” projektu. To má ale smysl jen pro skutečně zajímavé klienty a projekty, které chcete dělat. Z tohoto hektického „ASAP stavu” je nutné se co nejrychleji dostat zpět do vašeho normálního režimu.

Kdy stanovovat termíny

Osobně si beru vždy o něco více projektů, než předpokládám, že ustojím, ale na druhé straně si vždy nechám alespoň nějaké místo pro nenadálé zajímavé projekty. Co to znamená v praxi? Běžně nepracuji 8 hodin denně 26, pokud se nevynoří skutečně zajímavý projekt.

30

Termín je potřeba stanovit až ve chvíli, kdy víte, co vás čeká – tedy znáte rozsah projektu a víte, jakými metodami se dostanete k výstupům. U malých projektů později začnete řešit termíny od stolu, protože už budete mít odhad v oku, u velkých je vhodné mít WBSku či jinou dohodu nad rozsahem projektu. Při stanovení termínů je vhodné se zamyslet nad další prací, která vás v daném období čeká, přidat průměrné množství servisních požadavků pro své běžící projekty (čím déle děláte weby, tím více jich bude) a vzít si na svá bedra cca 75 % toho, co můžete reálně stihnout (nebo jiné procento dle vaší zkušenosti – třeba Pavel Maček 25 si bere cca 25 %, a přesto má stále plno). Nezanedbatelnou část projektů zpozdí vaši klienti a vy chcete mít dostatek práce i přes všechna zpoždění na jejich straně. Když odhad nevyjde, budete potřebovat dovolenou na rozdýchání propracovaných nocí, ale na druhou stranu nikdy nebudete mít nedostatek práce. S klienty je pak potřeba jasně od začátku definovat, co se stane, když budou mít zpoždění oni. Jiří Rusňák: Po určité době (letech) se dostanete do bodu, kdy budete stát před rozhodnutím: „Kým chci jako webdesigner být – živnostník nebo freelancer?”. Jako živnostník máte 8 hodin x 21 dnů x 12 měsíců – 21 dnů na dovču, Vánoce, apod. Jako freelancer máte projekt,

Jan Řezáč Web ostrý jako břitva Práce s poptávkou

Nestíháte? Stane se. Ale je nutné komunikovat s klientem mnohem dříve než v den odevzdání práce či dokonce po něm. Na vaše výstupy je často navázána práce dalších lidí a bez komunikace po vás brzy neštěkne ani pes.

25 http://naostri.se/ pavelme 26 Zlé jazyky tvrdí, že dvanáct. Tímto zdravím svou ženu.

Několik let zadávám práci dalším lidem a kvůli termínům (ne) dodání jsem skončil už nejednu slibnou spolupráci. Většinou to probíhalo podle scénáře: „freelancer nedodal výstup v termínu dle dohody, po urgenci ho slíbil o dva dny později, to opět nedodržel a výsledek jeho činnosti měl zpoždění cca 14 dnů“. Tou dobou už jeho práci dělal někdo jiný, protože druhá šance nemá smysl. Možná ho zkusím za pár let – tedy pokud má skutečně vynikající výstupy. Jinak pravděpodobně nikdy.

Dodržujte termíny Vaší nejvyšší prioritou je dodržet dohodnuté termíny projektu. Jestliže to dokážete, máte náskok před mnohými potenciálními konkurenty, protože v našem oboru zvládne dodržet termíny málokdo – ať už firmy nebo jednotlivci. . Platí nepříjemná přímá úměra – čím jste známější, doporučovanější a dražší, tím větší je tlak na profesionální a precizní výstupy v domluvených termínech. Pokud tedy máte v plánu ve webdesignu vyrůst, pak se připravte na to, že bude potřeba být více a více ukázněný. Jedinou omluvou je, když dokážete dodat výstupy o řády lepší než konkurence, ale pokud jste dlouhodobě „pankáč”, tak přežijete jen obtížně i se skvělými výsledky.

Jiří Sekera: Nezvládnete si čas zorganizovat sami? Pak vám ho začnou podle sebe organizovat ostatní. To je fajn, pokud děláte na jednom projektu a jde o zkušeného lídra, který je za projekt zodpovědný. Pokud ale jde o několik klientů najednou, vyžadujících okamžitou pozornost, a za vše jste zodpovědní vy, jde o cestu do záhuby.

kterým jste si schopni např. za půl roku vydělat na následující rok. Tím se dostáváte do situace, kdy si po dokončení projektu můžete vzít měsíc/dva/půl roku volna třeba na studium (chcete se zlepšovat) a cestování (poznání jiných kultur, jiného způsobu myšlení i života, inspirace, …). Následně vezmete další podobný projekt.

Cena vaší práce je něco, co bude vašeho klienta zajímat od prvního kontaktu. Práce na projektu lze z vašeho pohledu rozdělit na:

Práce spojená se získáním projektu Do této položky spadá cokoliv, co jste museli udělat proto, abyste projekt získali. Tuto položku velmi pravděpodobně nenaceníte, ale je vhodné vědět, že tam je. Projekty nechodí sami od sebe, ale jsou důsledkem nějakých dalších činností, které děláte (včetně excelentních výkonů na předchozích projektech).

Skutečná práce na projektu Ta zahrnuje uživatelský výzkum, prototypování, testování, grafický návrh, responsivní šablony, programování, copywriting,… tedy položky, které můžete napsat na fakturu a využíváte u nich své znalosti, dovednosti a knowhow. S těmito položkami velmi pravděpodobně počítáte a klient v zásadě nemá problém je zaplatit. Proto si vás koneckonců najal.

Marek Prokop: Marketing je všechno, co dělám, abych nemusel prodávat.

Osa „Za kolik”

Komunikace

Osobně beru každou schůzku s klientem jako placenou konzultaci. Samozřejmě to znamená, že schůzka musí mít pro klienta přínos a musím ji tak od začátku řídit. Tlachání o ničem vám nikdo nezaplatí... a stejně to nechcete dělat 28.

Patří sem úvodní schůzka, setkání nad rozdělanými výstupy nebo finální prezentace výsledku top managementu. Stejně tak sem patří e-maily. Klient často předpokládá, že komunikace je zdarma 27. Je tedy vhodné nastavit množství komunikace, které je v ceně a která již v ceně není, nebo ji prostě rozložit do ceny ostatních prací a ozvat se ve chvíli, kdy začíná být situace neudržitelná. Potřeba komunikace a prezentace vašich myšlenek roste s velikostí projektu a velikostí organizace, pro kterou projekt děláte.

Řízení projektu na vaší straně Nutnou součástí projektu bez ohledu na to, zda v něm řídíte nějaké další lidi, je váš vlastní projektový management. Cenu řízení projektu se v případě one-man-show jednoznačně vyplatí rozpustit do hodinové sazby.

32

Jan Řezáč Web ostrý jako břitva Práce s poptávkou

27 Pokud nejste konzultant. 28 Na druhé straně potřebujete mít s klientem dobrý vztah. A k němu patří i to, že si s ním jednou za čas popovídáte.

Způsoby odměňování Hodinová sazba Teď si možná říkáte – proč by někomu mělo vadit, že jsem levný? Vadí to klientům, kteří chtějí špičkovou práci – ta je levná málokdy – a s nízkou sazbou jste pro ně nedůvěryhodní. Vadí to i vám – klient si z vás může udělat “hadr na holi”, protože je pro něj levné plýtvat vaším časem. Cenotvorba je komplexní problematika, která by vydala na samostatnou knihu.

Uživatelské testování se třemi uživateli ve dvou iteracích = (X hodin času) + rezerva = pevná cena.

Vsuvka pro startupové nadšence. Nezajímá mě váš nápad – sám mám taky spoustu nápadů. Zajímá mě, kdo je v týmu. Zajímá mě trh, do kterého jdete. Zajímá mě, jakou strategii jste zvolili a proč. Nápady a fantazie jsou užitečné, ale pokud mě chcete v týmu, jde v první řadě o byznys 31.

Osobně používám hodinovou mzdu ve chvíli, kdy je projekt neohraničený, popř. si hranici neumí ani jedna strana dostatečně dobře představit. Hodinová sazba je nejjednodušší způsob stanovení ceny projektu, ale málokdo na ni přistoupí bez jasného stropu. Většinou je vázána na konkrétní odhad hodin a průběžně informujete klienta o jejich čerpání (zvláště ve chvíli, kdy se blížíte hranici, kterou jste původně stanovili). Výhodou hodinové mzdy je její nízké ekonomické riziko pro vás a jednoduchost výpočtu. Váš klient zaplatí čas, který strávíte nad projektem. Je nutné si ale dopředu vyjasnit, co znamená „čas nad projektem“. Nevýhoda hodinové mzdy je nutnost si pravidelně zaznamenávat strávený čas a ten pak vykazovat klientovi 29. Stejně tak se můžete setkat s překvapením nad výší hodinové sazby (týká se především malých klientů) nebo její níží (týká se těch velkých). Hodinové sazbě se při klientské práci nevyhnete tak jako tak – nad každým projektem strávíte nějaký čas a získáte za něj určitý obnos. Peníze nastavují očekávání vašeho klienta – klienti si vaší práce často cení v přímé úměře vůči tomu, kolik je vaše práce stojí. Existuje mentální zkratka, která říká, že cena je úměrná kvalitě 30 .

Pevná cena Pevná cena má smysl v případě, že prodáváte určitý pevně ohraničený balíček služeb, který jste schopni přesně nacenit. Výhodou pro vás je, že když půjde vše hladce, máte zisk navíc. Výhodou pro klienta je, že má jasně danou položku v rozpočtu, se kterou může počítat. Nevýhody jsou stejné – pokud to nepůjde hladce, pracujete zadarmo či pod cenou. Pro klienta je nevýhoda, že hypoteticky mohl získat lepší cenu, kdyby šel do hodinové sazby. Pokud používáte pevnou cenu, vyplatí se nastavit počet kol úprav, které má klient v ceně.

Podíl na projektu V případě webových prezentací je tento způsob odměny prakticky nereálný, používá se zejména pro startupy nebo e-shopy. Předtím, než půjdete do tohoto typu odměny, zjistěte si maximum informací o projektu, byznysu a projektovém týmu. Vaše odměna bude záviset na mnoha dalších lidech a roste riziko, že nedostanete ani korunu. Podíl na projektu má smysl jen ve specifických případech, protože nad takovým projektem potřebujete mít kontrolu a rozhodovací pravomoc. Zatím se mi nepovedlo vytvořit ideální situaci, kdy bych vydělal na podílu z projektu, naopak se mi povedlo prodělat.

Jan Řezáč Web ostrý jako břitva Práce s poptávkou

29 Doporučuji zkusit aplikaci toggl.com, která je v základní verzi zdarma. 30 Více o tomto a dalších mentálních zkratkách se dočtete v knize Zbraně vlivu od pana Cialdiniho. 31 Také jsem měl startup. Zatím mě nikdo nepřesvědčil, abych šel do dalšího – možná budete první.

33

Finanční výkon webové prezentace záleží na mnoha faktorech, které z pozice webdesignera neovlivníte. Tento typ odměny má smysl v případě, že máte kontrolu i nad marketingem (nebo důvěru v marketing a samotný produkt/službu), a nikoliv jen nad návrhem webu. Odměna za výkon je relevantní např. v případě zvýšení konverzního poměru e-shopu.

Platba předem V případě nových klientů, které vůbec neznáte, doporučuji fakturovat část peněz dopředu. Na jedné straně vás taková faktura nutí projekt neodkládat (obzvláště, když ji zaštítíte smluvně), na druhé straně nutí zákazníka k tomu, aby na projektu spolupracoval, protože už vám přece zaplatil. Výše platby předem je cokoliv mezi 20 – 100 % ceny projektu.

Změny v kalkulaci

Jednou se mi stalo, že HTML koder navýšil v průběhu projektu o 25 % hodinovou sazbu a o 80 % odhad celkového počtu hodin. A já ty šablony potřeboval včas. Odhadněte, zda spolu ještě děláme na dalších projektech...

Výrazným momentem, které mohou ovlivnit další spolupráci s klientem, jsou změny v kalkulaci a odhadu ceny. Bez ohledu na to, jakou cenu jste stanovili – nikdy neměňte způsob jejího výpočtu v průběhu projektu, pokud k tomu není pochopitelný důvod. Týká se to hodinové sazby i celkové částky za projekt. Jestliže jste si na začátku práce řekli 200 Kč na hodinu, berte své dvě sta až do hořkého konce, jinak budete působit nekonzistentně, a tudíž nespolehlivě. Zákazníka po prvním stanovení ceny nezajímá, kolik je za tím či oním fakticky práce, pokud mu nerozklíčujete svou cenotvorbu už v první nabídce.

Slevy Nemusíte brát každou práci. Dokonce i když vypadá zajímavě.

Robert Vlach: Pokud pracujete s vyšší základní hodinovkou (konzultanti, koučové, specialisté obecně) a chcete posilovat dlouhodobou spolupráci s prémiovými klienty, zkuste jim nabídnout předplacené hodinové balíčky s individuální slevou. Pro klienta, který nad svými výdaji přemýšlí dlouhodobě a chytře, je to výhodné stejně jako pro vás. Výsledkem je výrazně lepší cashflow a navýšení obratu i zisku.

Odměna za výkon

Nikdo vám to neřekl? Tak teď už to víte.

Nedávejte slevy. Když dáte klientovi slevu, tak vám vnitřně najednou nepřijde, že se jedná o win-win spolupráci, což může podvědomě snížit vaši výkonnost a schopnost dodat odpovídající kvalitu – a to aniž byste si to uvědomili! Nemá smysl dávat slevy dopředu 32. Sleva má smysl v případě, že něco pokazíte – nedodržíte termín, nedodáte celý rozsah nebo kvalitu. Slevy dávejte zpětně, když cítíte, že je to potřeba – ale nikdy ne dopředu.

32 http://naostri.se/ sbalicky

34

Jan Řezáč Web ostrý jako břitva Práce s poptávkou

Smlouvání Nejlepší je nesmlouvat – už jsem zažil více než jednou situaci, kdy klient navrhl snížení ceny, já na slevu nepřistoupil, a přesto jsem práci dostal. Smlouvání je v pořádku v případě, že jsou vaše ceny vysoko nad průměrem trhu a klient smlouvá, protože jste mu sice vyrazili svou cenou dech, ale ještě jste to neudělali tak moc, aby ihned ukončil konverzaci. Má tedy zájem spolupracovat. V takovém případě omezte rozsah práce (a poměrně k tomu sazbu za celkovou práci) a pokuste se dostat na určitý kompromis tak, aby to bylo pro obě strany přínosné (win-win). Jestliže jsou ale vaše ceny spíše na úrovni průměru, pak doporučuji spolupráci s klientem požadujícím slevu vůbec nezačínat.

Práce zdarma Na začátku své kariéry raději nepracujte za peníze. Existuje množství neziskových projektů, které vám dají startovací můstek pro budoucí práci. Tvořit někomu zadarmo firemní web je kontraproduktivní – jdete sami proti sobě, a tím, že nic moc nevíte, i proti svému klientovi. Web pro chovnou stanici koček vaší kamarádky či diskusní forum skautského oddílu mohou být ideální startovní body.

Osobně si pro práci zdarma na dobrovolnické bázi nechávám každý rok určité místo, které je zpravidla vyplněno v lednu… předcházejícího roku. Práce zdarma funguje na jiné mentální úrovni než práce za peníze – pracujete v rovině vztahů, nikoliv obchodu. A ačkoliv mám neziskovky rád, tak je také potřeba z něčeho žít.

Nikdo si k vám nedovolí víc než člověk, pro kterého děláte zadarmo. Tam, kde by běžný klient začal platit vícepráce, si váš „klient“ zdarma vymýšlí další a další dodělávky. Existují dvě výjimky, kdy doporučuji práci zdarma. První je ve fázi, kdy ještě prakticky moc neumíte, druhá je v případě dobrovolnické činnosti. Webdesigner musí na začátku své kariéry experimentovat zdarma, aby si vyzkoušel základy tvorby webu bez nutnosti faktického finančního výkonu svých výtvorů. Při práci zadarmo jste odpovědní jen sami sobě a můžete experimentovat, zkoušet si různé cesty a proaktivně získávat na své výtvory zpětnou vazbu od zkušenějších webdesignerů. Pokud jste s webdesignem začali až ve chvíli, kdy potřebujete peníze pro vlastní přežití, tak je to pozdě – v tu chvíli už musíte mít brand, záchytnou síť obchodních partnerů a tvořit výsledky, které jednoznačně vydělávají peníze. Webdesign je byznys jako každý jiný a doba, kdy lidé jen potřebovali mít web, protože ho mají i ostatní, se pomalu blíží ke konci – během následujících let půjde o faktické a měřitelné výsledky.

Spec! Work Spec! Work (spec od slova spekulativní) je práce, kterou odvedete dle svého nejlepšího vědomí a svědomí bez jakékoliv záruky, že bude zaplacena. Například dodáte grafický návrh hlavní strany webu do „soutěže“, či „tržnice webů”. Klient si následně vybere ze tří předložených návrhů na základě svého vkusu. Nepatří sem tedy výběrová řízení jako taková. Prostě vás klient poptá a mimochodem zmíní, že poptal víc lidí a nemusí si vás vybrat… a v takovém případě ani nezaplatí vaši práci. Spec! Work škodí nejenom designérům, ale v konečném důsledku i samotným klientům. Jestliže webdesigner ví, že nemusí dostat zaplaceno, zákonitě se to projeví na výsledku jeho práce a klient si

Jan Řezáč Web ostrý jako břitva Práce s poptávkou

35

vybírá jen ze špatných návrhů (typicky i na základě velmi špatného zadání), ale nepozná to. Nedělejte spekulativní práci – existuje jen proto, že jsou designeři, kteří jsou ochotni do ní jít.

36

Jan Řezáč Web ostrý jako břitva Práce s poptávkou

Jan Řezáč Web ostrý jako břitva Práce s poptávkou

37

Odneste si z kapitoly

Má smysl dělat takové projekty, které v sobě skrývají výzvu a jsou zasazeny do promyšlené strategie. Před začátkem projektu si vždy vyjasněte všechny osy trojimperativu (rozsah, čas, cena) či jejich absenci (obě strany ví, že teď rozsah projektu neznají, a tudíž nastaví podmínky spolupráce volněji). Nepracujte zdarma, se slevou či 38

v pochybných soutěžích, pokud vám to nedává vnitřně smysl. Pochybné soutěže nedávají smysl nikdy. Dodržujte termíny. Vždy a bez výjimek. Webdesign je byznys a vaše slovo buď platí nebo ne. Je možné, že máte špatně nastavenou cenu za svou práci. Potkávejte se s dalšími designery a konzultujte s nimi svou cenotvorbu. 39

Vážená paní Nováková, jsem rád, že jsme se dnes mohli setkat. Tvorbu webové prezentace si zjednodušeně představte jako stavbu domu – abychom mohli začít stavět, musíme si nejdříve ujasnit konstrukční plány. Moje práce zahrnuje právě tvorbu těchto plánů…

40

41

intuitivní proces návrhu webu

manažerský přístup k návrhu webu

který přístup zvo

42

Jan Řezáč Web ostrý jako břitva Název kapitoly Mašek Tomáš » , ,

proces návrhu webu

zvolit?

Jan Řezáč Web ostrý jako břitva Název kapitoly

43

3 Návrh webu je designerský proces, který můžeme rozdělit na následující fáze: 1. 2. 3. 4.

Moje zkušenost je taková, že přítomnost všech čtyř fází níže popsaného procesu návrhu webu snižuje riziko neúspěchu. Projekt nemusí uspět i při aplikaci správného procesu, ale pokud některou z fází vynecháte, zakládáte si na problém skoro vždy.

Objevování – pochopení klienta a naplánování návrhu webu Uživatelský výzkum – pochopení návštěvníků webu Návrh webu – analýza získaných informací a vytvoření smysluplného návrhu Evaluace – ověření, zda výsledek funguje tak, jak chceme, a jeho vylepšování

Podobných dělení samozřejmě existuje více – například: Sběr dat, Pochopení, Organizování, Vysvětlování, Testování 33.Proces návrhu webové prezentace je vždy o tomtéž. Na jedné straně je klient a jeho byznys. Na druhé jsou lidé, kteří budou web používat. Potřebujete pochopit obě strany a navrhnout řešení, které otestujete. Je v zásadě jedno, zda je ve fázi Uživatelského výzkumu či Vysvětlování, pokud víte, proč ji děláte. Každý webový projekt je unikátní. Tuto větu uslyšíte zejména od začínajících webdesignerů, kteří se snaží zakrýt slepá místa ve svém vlastním procesu. Unikátní je vzhledem k tomu, co máte k dispozici a co musíte dodat, ale ne celkovým přístupem k procesu návrhu! Vždy budete poznávat klienta a jeho zákazníky, budete navrhovat a ověřovat, ale dle omezení projektu využijete jinou paletu metod. Někdy bude návrh webu formou rychloskic na flipchartu. Jindy budete ověřovat prototyp v metru 34 cestou na jednání. Na některých projektech bude uživatelský výzkum kombinací dat z Google Analytics, znalostí na základě studií a klientovy fantazie. Unikátní podmínky a možnosti ale zdaleka neznamenají, že budete na každém projektu vynalézat kolo.Jak vybrat metody pro konkrétní projekt? Líbí se mi klíč, který používá Martin Kopta 35:

1. (Ne)mám čas/rozpočet – budu volit rychlé a levné metody nebo si mohu dovolit jít hlouběji? 2. (Ne)mám přístup k cílové skupině – mohu mluvit s lidmi z cílové skupiny webu nebo si musím vystačit sám? 3. (Ne)mám zkušený tým – některé metody vyžadují zkušeného facilitátora či kooperaci na straně týmu klienta.

Jan Řezáč Web ostrý jako břitva Proces návrhu webu

33 Tento konkrétní proces využívá např. http://naostri.se/uxtechs 34 Nebo v šalině. 35 Přední český UX researcher. Na twitteru jako @atpok.

45

Pochopení návštěvníků webu a byznysu klienta, podrobná syntéza všech informací, aplikace psychologických principů či modelů chování návštěvníků, tedy vše, co pro klienta děláte předtím, než se dáte do vlastní tvorby webu (ať už v HTML editoru nebo v grafickém programu), mají jeden jediný účel – snížit riziko, že projekt selže.

Nebude to nuda, být svázaný jednoznačným procesem? Moje zkušenost je, že rozfázování projektu vám zjednoduší práci a umožní vám věnovat se těm skutečně podstatným a kreativním věcem, které v sobě každý projekt skrývá. Takže ne – nebude.

46

Fungující web lze vytvořit i bez uživatelského výzkumu, testování či znalosti psychologie. Může ho vytvořit laik. Ovšem pravděpodobnost vytvoření takového webu bez použití promyšleného designerského procesu je obecně nízká… a dále se nepřímo úměrně snižuje s mírou konkurence v oboru, ve kterém váš klient podniká. Pro návrh dostatečně dobrého webu jediného truhláře v Brně nepotřebujete mluvit s desítkami lidí, kteří truhláře potřebují či ho někdy budou potřebovat. Při návrhu webu nové internetové parfumerie bez pochopení návštěvníků pravděpodobně neuspějete.

Jan Řezáč Web ostrý jako břitva Proces návrhu webu

Intuitivní proces návrhu webu V době psaní této knihy používá mnoho webdesignerů 36 následující přístup k návrhu webu:

⟶⟶ Zjistí od klienta, co chce na webu mít ⟶⟶ Přidá své vlastní podněty ⟶⟶ Navrhne wireframe 37 titulní strany a načrtne mapu webu 38 ⟶⟶ Klient vše schválí a webdesigner pokračuje grafickým návrhem titulní strany ⟶⟶ …

Poznali jste se? Nezoufejte, od toho jste tady!

Tento postup je rychlý, levný a v rukou většiny je zároveň tragicky nefunkční. Cílem této knihy je změnit váš přístup k návrhu webu. Proč nedoporučuji používat intuitivní proces? 1. 2. 3.

4.

Mnoho webdesignerů nikdy netestovalo své výstupy a jedinou zpětnou vazbu dostávají jen od laiků – tedy svých klientů. Jak má pak vzniknout ta správná intuice? Setkávám se s intuitivním přístupem denně a mám ho velmi dobře vyzkoušený na vlastní kůži. Ale doba pokročila a intuitivní návrh během následujících let z profesionálního webdesignu vymizí. Chcete zmizet s ním?

Klient netuší, co by mělo být na webu – je to laik, nikoliv expert na návrh webu (ačkoliv si vždy něco vymyslí – co mu také zbývá). Jestliže nemáte jasnou představu o klientově byznysu a jeho zákaznících, jsou vaše podněty podobné střelbě od boku do temného tunelu. Wireframe titulní strany webu je k ničemu. Web funguje jako celek a titulní strana slouží v množství případů k tomu, aby z ní lidé odešli 39. Je to tedy jedna z méně důležitých částí webu, ačkoliv jako jediná bude mít rozmyšlený obsah a jeho rozvržení. Klient wireframe a mapu webu schválí jen proto, že netuší, že tvorba nemusí dopadnout dobře – přesvědčí se o tom až ve chvíli, kdy je web těsně před spuštěním a z daleka nesplňuje ani to, co by po něm chtěl, natožpak aby měl nějaký faktický obchodní výkon.

Intuitivní proces má i různé varianty – včetně té, kdy vytváříte wireframy celého webu, které ale nikdy neotestujete ani je nepostavíte na potřebách skutečných návštěvníků. Webdesigner je plně zodpovědný za proces, kterým se dostane k výsledkům, a pokud využívá intuitivní proces návrhu webu, tak k tomu musí mít jednoznačný důvod a musí klientovi vysvětlit důsledky (tedy, že to možná nebude fungovat a lze tomu předejít). Návrh webu na první pohled vypadá jako obor, ve kterém potřebujete hlavně selský rozum, kterým nahradíte skutečné znalosti a dovednosti. Webdesigner nedojde pouze se selským rozumem daleko. Intuitivní proces je přímým produktem selského rozumu a dokazuje, že skutečnou intuici je potřeba systematicky budovat.

Jan Řezáč Web ostrý jako břitva Proces návrhu webu

36 Část ne, ale většina, se kterými jsem se kdy setkal, ano. 37 Drátěný model 38 Hierarchický seznam stránek, které na webu budou 39 Tam, kam chceme… ale odešli.

47

Manažerský přístup k návrhu webu Předtím, než se dostaneme k návrhu webu, si dovolím krátkou odbočku směrem k projektovému řízení webových projektů. Každý web znamená závazek dodat klientovi fungující řešení včas, v daném rozpočtu a dohodnuté kvalitě. U webdesignu není často problém v dodání řešení, jak tomu bylo dříve, ale v tom, že dodaná řešení nefungují. Existují dva protichůdné přístupy k projektovému řízení. V prvním případě může být projekt řízen jako vodopád – na začátku řeknete, co bude přesně uděláno, a toho se držíte do konce projektu v pevně definované posloupnosti prací. Praktickým důsledkem je situace, kdy analýza provedená před půl rokem je v době vývoje zastaralá (klient má nové požadavky nebo změnil zadání, situace na trhu se změnila) a už v době vývoje je potřeba jiné řešení než to, které se navrhlo na začátku. Opačný případ jsou agilní metodiky. Agilní způsob řízení je založený na jediné jistotě, která v projektu existuje – na změně. Cílem agilních metodik je zaměřit se na hodnotu (funkcionalitu, business goal), která je pro klienta v tuto chvíli nejdůležitější, a tu mu co nejrychleji dodat. Agilní přístup počítá s tím, že v projektu jsou slepé uličky, na které dříve nebo později musíte narazit. Řešení tedy klient dostává postupně (iterativně). Iterace oceníte zejména v okamžiku, kdy pracujete na velkém projektu. Agilní přístup zahrnuje množství metodik, které řeší tento problém pokaždé trochu jinak. Některé metodiky se hodí více pro programátory a analytiky (XP, TDD), jiné pro střední management (SCRUM, Kanban), jiné pro designery (Lean) a jiné pro top management (PRINCE2). Většina agentur nabízejících tvorbu webu se spíše blíží vodopádu, protože klient požaduje fixní čas a/nebo rozpočet. Naopak korporátní IT týmy a startupy, které vyvíjí webové aplikace, se blíží více agilním metodikám. U klientů, kteří podnikají mimo IT, jsem zaznamenal velmi silnou nedůvěru k agilnímu přístupu. Občas totiž musíte něco zahodit, protože se původní myšlenka či návrh řešení ukázal jako nerelevantní. Mohou vás tedy tlačit k vodopádu.

48

Jan Řezáč Web ostrý jako břitva Proces návrhu webu

Který přístup zvolit? Webový projekt má typicky některé z následujících charakteristik:

⟶⟶ Je to webová prezentace a prodává služby/produkty nebo webová aplikace a je sama o sobě produktem/ službou. ⟶⟶ Byznys klienta je zcela nový a unikátní, nebo se jedná o variaci na stovku jiných podnikání u nás či v zahraničí (ačkoliv má vlastní USP 40, tak už to prostě někdo někde nějak také dělá). ⟶⟶ Web je pro klienta klíčový touchpoint 41, přes který získává většinu zákazníků, nebo je sice součástí marketingového mixu, ale jeho byznys s ním nepadá. ⟶⟶ Klient již web má nebo vytváří zcela nový. ⟶⟶ Klient má pro projekt webu technický dozor nebo vše řeší sám. ⟶⟶ Běžný návštěvník web využije jednorázově nebo se na něj pravidelně vrací. ⟶⟶ …43

Každá charakteristika ovlivňuje míru rizika, se kterou je vhodné k webu přistupovat. Unikátní myšlenky mají vysokou míru neurčitosti a tudíž i rizika 43. Pokud je pro klienta web klíčový a stojí na něm jeho podnikání, pak opět potřebujete uspět mnohem více, než když na něm klient primárně nezávisí a je pro něj jen jedním ze zdrojů příjmů. Návrh webu či redesign může probíhat jako celková změna nebo postupné úpravy 44. Dostáváme se tedy k velkým a malým sázkám. Každá úprava/zásah do webu je sázka 45, kterou se snažíte zvýšit jeho přínosy.

40 Jedinečný prodejní argument vysvětluji v další kapitole 41 Místo styku / kontaktní místo člověka se značkou 42 Doplňte dle vlastního uvážení 43 Motivace není strategie! Vaše myšlenky mohou být skvělé jak chtějí, ale neznamená to, že uspějí na volném trhu.

44 O sázkách a inovaci píše i Jakob Nielsen v článku http://naostri. se/inovateweb 45 Pojem jsem převzal od Roberta Vlacha a přizpůsobil jsem ho kontextu návrhu webů

Jan Řezáč Web ostrý jako břitva Proces návrhu webu

49

Osobně se pohybuji více v prostředí fixního času / fixních termínů, takže se můj proces více blíží vodopádu. Iterovat a upravovat návrh webu mohu do chvíle, než ho předám klientovi do výběrového řízení.

Pokud nevíte, co děláte, sázejte opatrně, protože se zvyšuje riziko, že výsledek nebude mít očekávané přínosy. Navrhujete malou firemní webovou prezentaci, jednoduchou stránku pro e-mailovou kampaň či standardizovaný e-shop? Neurčitost je malá, a když klient zvolí vhodného dodavatele, výsledek pravděpodobně dopadne dobře. V případě, že z aktuálního webu přichází zákazníci, je vhodné zvolit opatrnější postup než celkový redesign. Místo toho je často vhodnější začít expertní analýzou, analýzou návštěvnosti a A/B/M testováním 46. Úpravami konkrétních izolovaných částí webu obratem zjistíte, zda je vaše snaha korunována úspěchem. Redesignovat můžete vždy, ale kompletní redesign je sám o sobě velká sázka 47. Když se pouštíte do zcela nového typu projektu (například vyvíjíte webovou aplikaci, která na trhu zatím není), je vhodné postupovat v iterativních cyklech – tedy zvolit agilní přístup a neustále ověřovat, že jdete správným směrem. Jinak může vzniknout exekučně skvělé řešení, které ale nemusí nikdo potřebovat… a naopak. Dlouhodobé a rozsáhlé projekty benefitují ze změny přístupu na agile a rychlých iterací – ale na takovou změnu klient potřebuje zkušeného dodavatele, jinak se projekt změní v černou díru na čas i peníze. V následujících kapitolách projdeme všechny fáze návrhu webu z pohledu designera bez ohledu na konkrétní manažerský přístup.

46 Metoda používaná pro testování výkonnosti různých variant prvků webových stránek vzhledem ke konkrétní konverzní akci. Je lepší zelené nebo červené tlačítko?

47 Redesign nebo realign? http://naostri.se/ rerealign

50

Jan Řezáč Web ostrý jako břitva Proces návrhu webu

Jan Řezáč Web ostrý jako břitva Proces návrhu webu

51

Odneste si z kapitoly

Používejte selský rozum jen v případě, že weby už léta navrhujete včetně výzkumu a testování. Zpětná vazba od klientů je důležitá, ale je to podobné jako u lékaře. Klient není schopen zhodnotit odbornou stránku vaší práce , ale spíše komunikaci a projektové řízení . Riziko selhání ovlivňuje množství faktorů a je vhodné s nimi počítat 48

49

52

při návrhu konkrétního postupu. Zamyslete se nad svým procesem návrhu webu a najděte místa, kde ho lze zlepšit – pomohou vám knihy níže i zbytek této knihy.

48 Přidusili mi dceru při porodu vlastní vinou, nebo jí zachránili život? 49 V nemocnici se jedná o stravu a standard ubytování.

53

Vážená paní Nováková, nejdříve musím důkladně pochopit váš byznys. Pojďme si o vás popovídat – řekněte mi, kdo jste, co děláte a jaké problémy pomáháte řešit svým zákazníkům…

54

55

metody teorie

fáze 1: objevován

kdo je náš klient a kam směřuj jedinečný prodejní argument brand marketingová podpora webu spojenci a konkurenti očekávání a požadavky klienta omezení projektu procesy na straně klienta 56

Jan Řezáč Web ostrý jako břitva Název kapitoly

úvodní dotazník rozhovory s lidmi na straně klienta SWOT analýza

vání

řuje nt

u

nta

zlaté kruhy omezení obsahu webu vizuální omezení Jan Řezáč Web ostrý jako břitva Název kapitoly

57

Úspěšné projekty mají vizi, se kterou se dokážou lidé ztotožnit, nikoliv pouze produkt.

co

jak

proč

4 V rámci objevovací fáze je vaším úkolem položit správné otázky správným lidem, abyste si dokázali vytvořit představu o rozsahu projektu a potřebách klienta. Při návrhu webové prezentace doporučuji zvolit přístup, kdy v první řadě přemýšlíte, jak web zapadá do širší strategie klienta. Záhy můžete například zjistit, že z krátkodobého pohledu nemá web smysl a z dlouhodobého je potřeba výrazně robustnější řešení, nebo je lepší soustředit energii jiným směrem. Pro získávání strategických informací je vhodné v první řadě mluvit s majitelem či nejvyšším managementem firmy a postupně se propracovávat hierarchií níže.

58

Jan Řezáč Web ostrý jako břitva Fáze 1: Objevování

Zlaté kruhy

Důležité je rovněž říct, že smyslem existence společnosti by neměly být v první řadě peníze – peníze jsou zpětná vazba, kterou dostáváte na svou práci. To se někdy jednodušeji říká než dělá. Kolik znáte lidí, kteří mají za cíl „vydělat prachy“… a nikdy je nevydělají?

Zlaté kruhy 50 odpovídají na otázku: „Proč něco uspěje a něco jiného nikoliv?“ Úspěšné projekty mají vizi, se kterou se dokážou lidé ztotožnit (proč), nikoliv pouze produkt (co). Vize, sen, důvod, proč něco děláte, přímo rezonuje s nejstarší částí lidského mozku, která dělá rozhodnutí na základě intuice. Proto uspějí firmy, produkty a weby, které mají ve své podstatě silně zakotvenou smysluplnost. Vaši klienti budou často chodit se zadáním typu: „Chceme, aby na webu byly aktuality“ nebo „Potřebujeme Hlavní stránku, O nás, Kontakt a Služby“, popř. všeobjímající „potřebujeme redesignovat“. Tomuto přístupu je vhodné se vyhnout a místo toho se začít ptát na skutečné důvody stojící na pozadí těchto požadavků – přejít tedy k myšlenkové kaskádě „Proč → Jak → Co“. Díky pochopení klienta máte šanci zvolit vhodné nástroje pro realizaci jeho strategie. Následně pro vás nebude problém navrhnout konkrétní obsah webu (a třeba zavrhnout redesign ve prospěch A/B testování částí aktuálního webu). Váš klient většinou nezná specifika webdesignu, ale rozumí svému byznysu. Webdesigner zase neví o všech aspektech klientova byznysu, ale rozumí webdesignu. Klient se neorientuje v aktuálních možnostech z hlediska internetového marketingu či webových trendů a technologií, nedokáže relevantně vizualizovat své představy a pravděpodobně si neumí položit ty správné dotazy. Nenavrhne si tedy sám web, který mu bude dobře sloužit, ale musí být schopen říct, kdo je, čeho chce dosáhnout a proč by si jeho produkty od něj měl někdo chtít koupit. Webdesigner zase bez pochopení byznysu a zákazníků klienta může jen obtížně navrhnout web, který bude fungovat pro klienta a jeho zákazníky. Existují sice obecné principy návrhu webu, frameworky či psychologické metody pro podporu prodeje, ale bez faktického pochopení klientova byznysu a jeho budoucích zákazníků vám může uniknout právě ten zásadní detail, díky kterému web nakonec nedoručí očekávané přínosy.

50 http://naostri.se/ zlatekruhy

Jan Řezáč Web ostrý jako břitva Fáze 1: Objevování

59

Co to znamená v praxi? ⟶ Nemá smysl ptát se klienta, co chce na webu. Klient vám to samozřejmě řekne a vy musíte zjistit, proč má pocit, že to na web patří… protože tam se skrývají skutečně důležité informace. ⟶ Nemá smysl se ptát zákazníků klienta, co by chtěli na webu. Oni si samozřejmě něco vymyslí, ale vaším úkolem je jít hlouběji a najít jejich skutečné motivace, nikoliv si dělat odrážky do seznamu požadavků. ⟶ Nemá smysl si vymýšlet, co bude na webu… předtím, než pochopíte klienta a jeho záměr. ⟶ Na začátku projektu nikdy netušíte, co vám na konci vypadne… pokud se neupnete k prvoplánovitému řešení. U menších projektů může být první nápad dostatečný, ale pro rozsáhlejší řešení doporučuji rozporovat svoje vlastní myšlenky a hledat alternativní cesty. Pomůže vám v tom jednak kritický postoj k vlastním nápadům a především přizvání dalších členů týmu k návrhu například metodou Design Studio. Přínosná je i metoda šesti klobouků 51.

60

51 Na knihu odkazuji na konci kapitoly.

Jan Řezáč Web ostrý jako břitva Fáze 1: Objevování

Teorie

Můj kamarád Richard Kafoněk, který pomáhá firmám s jejich strategií, tvrdí, že 95% firem strategii nemá a neřeší. Za posledních 10 let jsem se nesetkal s jevem, který by jeho tvrzení vyvrátil. Web bývá katalyzátor pro zlepšení celé firmy skrze vlastní sebeuvědomění.

Abychom mohli klientovi dodat web, je potřeba mít pro vzájemnou spolupráci dostatečné množství počátečních informací. Větší část z nich by měl mít klient dávno definovanou a ujasněnou, praxe je ovšem taková, že se nad nimi začíná zamýšlet až ve chvíli, kdy se zeptáte. Strategie je dlouhodobý plán činností zaměřený na dosažení konkrétních cílů. Strategie znamená, že klient má promyšleno co, jak a proč dělá. Takže má představu o aktuálním stavu a vytyčenou cestu – jak formou obecného směru, tak i konkrétních kroků, které se vzájemně podporují, a soustředí tak energii určitým směrem. Ve většině případů má váš klient určitou podvědomou strategii – prodává a možná i roste a klíčoví lidé ji takříkajíc mají v hlavě, ale nemá ji sepsanou a vyjasněnou napříč celým svým týmem… a možná jsou v ní hluchá místa. Náplní vaší práce není vytvořit klientovi strategii, ale získat odpovědi, na kterých bude stát vaše práce. Když je nepoložíte, odpověď nedostanete. Když je položíte necitlivě, tak s vámi vyrazí dveře. Není výjimkou, že si klient uvědomí, co vlastně dělá, právě prostřednictvím tvorby webu. Ale musíte se umět zeptat. Co potřebujete zjistit při tvorbě webové prezentace:

1. Kdo je váš klient? 2. Co váš klient dělá? 3. Proč by měl zákazník chtít klientův produkt či službu? 4. Kdo jsou klientovi zákazníci? 5. Jaká má klient očekávání vzhledem k webu? 6. Jak bude web podporován z pohledu ostatních aktivit klienta? 7. Jaké procesy na straně klienta se dotýkají vašeho projektu? 8. Na jakém trhu klient působí?

Velmi krátké odpovědi typu „naši zákazníci jsou všichni” jsou známkou toho, že klient nemá jasno v tom, kdo je jeho zákazník. Klient někdy ani nechce tyto otázky řešit a v takovém případě je pro vás lepší ukončit spolupráci, protože se radikálně snížila naděje na úspěch projektu.

Jan Řezáč Web ostrý jako břitva Fáze 1: Objevování

61

Kdo je váš klient a kam směřuje Co potřebujete o klientovi vědět před začátkem tvorby webu?

1. 2. 3. 4. 5.

Proč váš klient dělá to, co dělá – jakou má misi (poslání)? Jak se dostal tam, kde je dnes – z čeho firma vznikla, jakou má historii? Kam se chce klient dostat – jaká je jeho vize pro další směřování firmy? Jaké má klient zásady/hodnoty, kterých se drží? Kdo jsou jeho zákazníci?

Na první pohled jsou to velice jednoduché otázky, ačkoliv typickou odpovědí bývá mlčení či marketing-speak, kdy věta vypadá odborně, ale prakticky nic neříká. Chtějte takové odpovědi, u kterých se necítíte hloupě (pocit uvnitř spolehlivě odliší marketing-speak od autentické reakce) – pokud se spokojíte s obecnou frází, tak pouze snížíte naději na úspěch celého projektu. Marketing-speak si představte jako: „Jsme tu pro to, abychom poskytovali profesionální služby svým zákazníkům“. Věta zní učeně, neříká nic. Po jejím pronesení klient očekává, že přikývnete. Vy zíráte. Pak větu přeformulujete ve stylu: „Takže vlastně říkate svým zákazníkům, že podnikáte... že?“. Teď zase zírá klient. A buď pochopí, nebo je to výstražný vykřičník pro vaši budoucí spolupráci.

Mašek Tomáš » , ,

Jedinečný prodejní argument

Na otázku, zda uspěje klient i bez USP, odpovídám – ano, může. Ale je to těžší a výrazně méně pravděpodobné, než když klient USP má. Dobré USP totiž pomáhá soustředit energii na webu určitým směrem v souladu se strategií a marketingem klienta.

USP je zkratka pro anglický název Unique Selling Proposition, tedy česky jedinečný prodejní argument. Váš klient vám musí být schopen odpovědět na otázku – proč by si měl člověk zvolit právě mě a moji službu nebo produkt? USP musí být jasné, konkrétní, jednoduché a musí mít význam pro zákazníky vašeho klienta. USP vypadá takto: Harley-Davidson je jediná motorka, která vám umožní stát se moderním americkým kovbojem. Jediná. Unikátní. V lepším případě má váš klient USP ujasněno dopředu, jinak je potřeba dobrat se alespoň seznamu bodů, které dohromady tvoří klientovu USP. Bez USP není projekt na čem stavět a další mrtvý katalog či řadovou internetovou parfumerii přece dělat nechcete. USP má váš klient a další samostatná dílčí USP mají i jednotlivé klientovy produkty a služby. Nechte si tedy USP specifikovat i pro ně.

Příklady dobrých USP ⟶ Jsme nejrychlejší opravna ponožek v Brně. ⟶ Náš vysavač má inovativní design, takže vysává 5x účinněji než konkurenční modely. ⟶ Jsme jediná firma, která má lektora se zkouškou IPMA stupně A ve střední Evropě. ⟶ Naše kadeřnictví má otevřeno nonstop. ⟶ Umožňujeme klientům jako jediní na světě podrobně analyzovat jejich obchody na FOREXové burze. Špatné USP je typicky nekonkrétní a v marketing speaku: ⟶ ⟶ ⟶ ⟶ ⟶ ⟶ ⟶

Máme mladý a dynamický kolektiv. Máme unikátní know-how. Jsme adaptabilní a neustále zlepšujeme interní procesy.

Přinášíme jasnou přidanou hodnotu oproti konkurenci. Jsme jiná internetová agentura. Náš tým spolupracuje se zachováním vnitřní soutěživosti.

Jsme levnější.

Cítíte také rozpaky, když vám někdo tvrdí něco takového? Já ano – hlavně proto, že mi výše uvedené body nic neřeknou, vyjma poslední možnosti, u které se na chvíli zastavíme… Konkurovat cenou je nebezpečné, pokud nevíte, co děláte. Stává se to

Jan Řezáč Web ostrý jako břitva Fáze 1: Objevování

63

typicky v případě, kdy: 1. 2. 3.

Produkt či celá oblast podnikání je komodita a zákazník se rozhoduje především díky ceně. V odvětví začala cenová válka – konkurence bude nucena dříve nebo později také snížit cenu a cena tak poletí ve spirále smrti až k minimálnímu zisku. ...

Jestliže váš klient konkuruje cenou a není to dáno objektivními faktory (vytvořil generický lék, protože vypršel patent na účinnou látku – tedy třetí bod), tak se raději pokuste najít jiné USP nebo si případnou spolupráci dobře promyslete.

Hrdina

Mág Rebel

Objevitel

Klaun

Mudrc

Neviňátko

Milenec

Tvůrce

Běžný člověk Vládce

64

Pečovatel

Jan Řezáč Web ostrý jako břitva Fáze 1: Objevování

Brand

Pokud váš klient tvrdí, že je pro něj zákazník na prvním místě, tak v určitou chvíli dojde na lámání chleba. A prodavač pomůže zákazníkovi s věcmi do auta. Objedná mu produkt v jiném obchodě, protože u klienta zrovna došel. Doveze mu nákup před odletem na letiště. Jinak je takové tvrzení jen prázdná skořápka.

. Archetypy jsou prastaré příběhy, které se opakují napříč kulturami. Hrdina. Psanec. Vládce. Mudrc,... Popsal je C. G. Jung a pro marketing je upravila Carol Pearsonová, která popsala 12 základních archetypů použitelných pro značky. Archetyp umožňuje značce komunikovat konzistentně a zapamatovatelně. Např. Nike představuje archetyp Hrdiny, který překonává sám sebe při sportovním výkonu – často při běhu. Harley-Davidson je na druhé straně konzistentní archetyp Rebela. Mnoho světově známých značek pracuje s archetypy, protože jim dávají jasný směr, ale zároveň i dostatečný manévrovací prostor.

Branding je činnost, prostřednictvím které dáváte smysl osobním i firemním značkám a pomáháte vyprávět jejich příběh konzistentním a zapamatovatelným způsobem. Nepleťte si brand s logem či vizuálním stylem. Brand je duše značky 52. Brand je příběh, který si lidé ztotožňují s klientovou značkou. Brand odlišuje jednu značku od jiné. Autentické a konzistentní značky tvoří základ vaší budoucí práce, protože pak máte na čem stavět. Brand má typicky i vizuální reprezentaci (logo, vizuální styl), ale to neznamená, že brand je logo. Brand je slib a rozhodně nestačí sdělovat, že máte nejekologičtější pračky ze všech, jste komunikativní a chováte se hezky ke zvířatům. Je potřeba tak i konat. Mít brand znamená, že jste si vnitřně ujasnili svůj smysl a cestu, v rámci které se pohybujete směrem, který jste si vytyčili, a říkáte to jasně okolnímu světu vhodnými způsoby na různých místech, kde je vaše značka vidět 53. Výhodou silné značky je to, že ji lidé rozeznají, zapamatují si ji a v určitém momentu ji upřednostní před jinými značkami. Klient s dobrým brandem typicky:

⟶⟶ Rozlišuje atributy a benefity své značky. ⟶⟶ Má vyjasněný marketingový archetyp značky. ⟶⟶ Uvědomuje si pozici své značky (např. má značka působit levně nebo draze?). ⟶⟶ Ví, co jeho značka slibuje svým zákazníkům, a skutečně tím žije. ⟶⟶ Má vizuální styl – logo, písmo, barvy, firemní materiály, potisk na letadla. ⟶⟶ Ví, jak má brand komunikovat navenek, jaký obsah chce/nechce komunikovat a jaký tón používá při komunikaci. ⟶⟶ A další… tento seznam rozhodně není úplný a vyčerpávající.

Vaším úkolem není klientovi vytvořit brand, ale pochopit ho a odrazit se od něj při návrhu a tvorbě webu. Je tedy potřeba od klienta získat co nejvíce informací o brandu, jeho vlivu na vizuální a obsahovou složku webu. Pokud váš klient zná archetyp své značky, tak je to velice dobrý signál, že má z hlediska brandu jasno. V opačném případě je dobré mu zprostředkovat spolupráci s konzultantem brandingu/marketingu a na jejich výstupech pak stavět.

Jan Řezáč Web ostrý jako břitva Fáze 1: Objevování

52 Koncept brandu jako duše jsem slyšel poprvé od Karla Novotného, mindless.cz, kterého vám mohu doporučit na váš vlastní brand 53 A jsme opět u zlatých kruhů.

65

Marketingová podpora webu Web je pravděpodobně jeden z mnoha touchpointů (míst interakce), na kterém se lidé stýkají s klientovým brandem. Dalšími touchpointy mohou být vizitky, facebooková stránka či e-mail od obchodního zástupce. Doporučuji uvědomit si pozici webu v rámci ostatních touchpointů a vytvořit pro web takové podmínky, aby na něj začali chodit návštěvníci. Bez nich web nebude nikdy fungovat. Je tedy vhodné hned na začátku zjistit, jakými kanály budeme na web návštěvníky přivádět (na internetu i mimo něj). Prověřte možné synergické efekty vzhledem k dalším aktuálním a plánovaným marketingovým aktivitám klienta a aktivitám jeho spojenců, které mohou výrazně zjednodušit rozjezd webu v rámci cílové skupiny. Doba, kdy byl web vytvářen pouze pro svou existenci, končí a marketing je čím dál více tlačen k jasnému dokládání výsledků 54. Je tedy více než vhodné, aby se webdesigner nesoustředil pouze na tvorbu webu – bez marketingové podpory má web řádově nižší šanci na úspěch a radikálně se tak ochuzujete o možnosti dlouhodobé spolupráce s klientem.

TV

Telefonická podpora

Outdoor

Veletrhy

Sociální sítě

Weby

Nabídky

E-mailová k Tisk

66

Blogy

Logo

Produkty

Dokumenty

Příručky

PR

Brand

Kanceláře a budovy

Prodejny a výdejny

Prezentace

Služby

Reklama Cedule

54 Možná že právě díky absenci jasných výsledků má pracovní pozice Chief Marketing Officer největší fluktuací ze všech top manažerských pozic v USA. http://naostri.se/fastcmo

Vizitky

Bannery

Rádio

Nepřímá konkurence může být řádově nebezpečnější – např. iPhone vytlačil fotoaparát z mých dovolených. Nefotím nijak zvlášť dobře a iPhone produkuje dostatečně dobré fotky do rodinného alba.

Word of mouth

Hlavičkové papíry

Jan Řezáč Web ostrý jako břitva Fáze 1: Objevování

Spojenci a konkurenti Občas se potkávám s názorem, že konkurence pro podnikatele není zajímavá. Představte si, že zavřete oči před částí faktů, na kterých budete stavět podnikání. Pomůže vám to, nebo uškodí? To je asi jediná otázka, kterou byste si měli položit. Nemá smysl se denně trápit vlastní konkurencí, ale měli byste o ní mít alespoň základní přehled.

Spojenci nebo partneři vašeho klienta tvoří pomocnou síť, která představuje příležitost pro rychlejší rozjezd vašeho projektu. Při návrhu webu nás zajímá především, kdo jsou spojenci, zda jsou ochotni s námi spolupracovat a podporovat nás na webu (a v rámci synergických efektů být podporováni). Konkurenti jsou druhá strana mince – vůči nim se budeme v rámci projektu vymezovat. Váš klient má přímé (pro Škodovku třeba Hyundai) a nepřímé konkurenty (pro Škodovku vlaková doprava) a je vhodné se o nich před startem projektu dozvědět. Zmapujte současné konkurenční webové projekty (odkazy vám dodá váš klient) – jak přímou konkurenci na trhu, tak u podobné firmy na jiných trzích. Získáte tak během několika hodin (či pár desítek minut) představu o stavu webů (vizuálním designu, pojetí informační architektury a obsahu), ze kterých se můžete inspirovat a následně je překonat. Analýzu webů konkurence 55 rozvádím ve fázi uživatelského výzkumu.

Přednášky Obaly produktů E-mailové newslettery Auta

bídky

Zaměstnanci Kupony

ailová komunikace

Faktury

Networking

Jan Řezáč Web ostrý jako břitva Fáze 1: Objevování

55 Analýza konkurence (nikoliv jen jejích webů) je komplexní obor, na knihy s podrobnějšími informacemi odkazuji na konci kapitoly.

67

Nevýhodou zaměření se na přínosy je fakt, že je musíte umět dodat. Ale proto přece čtete tuto knihu. :-)

Očekávání a požadavky klienta Vyjasněte si s klientem jeho očekávání vzhledem k výstupům projektu. Vaším cílem je dokončit v termínech a za danou cenu to, na čem jste se s klientem dohodli. Klientovým cílem ovšem není mít web, ale mít z něj co největší užitek. Klienta často v jeho byznysu něco trápí a předpokládá, že web je vhodným řešením jeho problému. Profesionální webdesigner se tedy primárně soustředí na to, aby mohly být očekávané přínosy naplněny. Ve chvíli, kdy vidí, že klient jde svou činností proti očekávaným přínosům nebo je projekt ani nemá šanci naplnit, radikálně zakročí. Soustředění se na přínosy je opět oboustranně výhodné. Klient, který pochopí, že mu chcete přinést skutečné výsledky, vám dá mnohem větší volnost a prakticky odpadají debaty nad grafickým ztvárněním webu. Příkladem přínosu je vybudování databáze kontaktů, se kterými může klient dále pracovat, nebo přímý prodej produktů. Přínosy jsou extrémně důležité, protože jen díky znalosti očekávaných přínosů jste schopni:

⟶ navázat přínosy na konkrétní konverzní akce a dělat kvalifikovanější rozhodnutí o obsahu webu, ⟶ zastavit projekt, jestliže dospějete k závěru, že je příliš vysoké riziko neúspěchu, ⟶ změnit rozsah a zaměření projektu (místo investice do webového portálu vytvoříte raději microsite a zbytek zdrojů dáte na PPC reklamu), ⟶ prioritizovat činnosti vzhledem k omezenému rozpočtu a času na realizaci, ⟶ máte šanci ověřit, zda jste uspěli. Očekávání je někdy abstraktní – například podpora značky. Když se zamyslíte nad tím, jak tvoříme weby, tak každý dobře vytvořený web automaticky podporuje značku – je to jeho přirozená vlastnost – tedy jestliže na něj umístíte klientovo logo. Špatně navržené weby mohou značku naopak poškodit 56. Snažte se s klientem najít jasně vymezené přínosy, které můžete v budoucnu změřit, a web vzhledem k nim optimalizovat. Jestliže má projekt více přínosů, pak je nutné je seřadit dle priorit, jinak budete mít problém už při vlastním návrhu webu a při prioritizaci obsahu. Když budete vědět, co je nejdůležitější, můžete vždy reagovat na interní politické tlaky v klientově týmu, které se budou snažit ovlivňovat obsah a funkčnost jednotlivých částí webu.

68

Jan Řezáč Web ostrý jako břitva Fáze 1: Objevování

56 http://naostri.se/ badwebbrand

Jak se vypořádat s požadavky klienta Část přání klienta je extrémně obecná (chceme, aby byl web jednoduchý a dobře použitelný), část technická (web bude psán validním HTML a CSS), část řeší detailně některé části webu (na titulní stránce bude logo společnosti a uvítací text), či přímo vizionářsky popisuje, jak budou některé části webu skvělé (součástí webu bude intuitivní plánovač tras). Přání mnohdy vycházejí z fantazie klienta a obsahu webů konkurentů, nikoliv z uživatelského výzkumu a skutečných potřeb klientova byznysu. Dobří webdesigneři transformují přání klienta do smysluplného řešení, špatní se je snaží otrocky splnit 57.

57 Např. proto, že přeskočili uživatelský výzkum, a chybí jim tedy potřebné argumenty.

Omezení projektu Zjistěte a definujte omezení webového projektu na straně klienta – díky znalosti omezení budete schopni předvídat některá rizika, pracovat s nimi a vytvořit tak lepší výsledek. Zároveň nebudete muset přepracovávat větší část návrhu. Omezení vám pomáhají dodat web – mezi nejhorší noční můry webdesignera patří projekty bez omezení. Určitě znáte věty, jako je: ⟶⟶ „Nějak to udělejte, máte mou plnou důvěru.” ⟶⟶ „Nebudu omezovat vaši kreativitu.” ⟶⟶ „Nemám žádné požadavky, vizuální styl, ani oblíbené weby. Nějak to zvládněte.” Klient vám tím říká, že nemá ujasněnou svou strategii, vizuální komunikaci a pravděpodobně ani další předpoklady nutné k úspěchu webu. Jestliže je rámec příliš vágní, jsou výsledky často výrazně horší, než když je webdesigner svázán 100 stránkovým manuálem jednotného vizuálního stylu 58. U projektu bez omezení počítejte s tím, že ho bude nutné několikrát přepracovat a velmi pravděpodobně ani nikdy nedojde k jeho spuštění. Klient si bude v průběhu upravovat zadání a dostanete se tak do nekonečného kruhu úprav, které vám nikdo nebude chtít zaplatit. Nedělejte projekty bez omezení.

Omezení obsahu webu Nejčastěji se jedná o interní omezení, která vyplývají z nastavení klientova týmu. Někdy je dokážete ovlivnit, někdy ne – a je potřeba s nimi počítat. Klient někdy není schopen dodat určitý typ podkladů, protože je nemá, nebude mít či je nesmí zveřejnit. Typicky se jedná o fotografie, videa, poděkování svých zákazníků,… a vy s touto informací musíte dále pracovat.

Vizuální omezení Grafický designer, který navrhuje vizuální složku webu, vždy primárně pouze interpretuje vizuální styl klienta vzhledem k navrženému obsahu a funkcionalitě webu. Do designových omezení tedy patří vizuální styl klienta nebo jeho plánovaná aplikace (podoba ostatních webů a tiskovin, GUI software, avatar,…). Vždy upřednostňujte vizuální konzistenci před egoismem – alespoň v případě, že nový web nemá být základem redesignu celého vizuálního stylu, protože buď vůbec neexistuje, nebo je již z nějakého důvodu nepoužitelný. Dalším typickým designovým omezením jsou reklamní plochy, které mají pevnou velikost a nelze s nimi nic dělat.

70

Jan Řezáč Web ostrý jako břitva Fáze 1: Objevování

58 Tvrzení neplatí pro designery v extratřídě, kteří si s tím hravě poradí…

Moodboard si představte jako plochu, na které se pokusíte vyjádřit grafické vyznění webu, aniž byste pracovali s konkrétním rozložením prvků. Často se jedná o výřezy z různých webů, fotografie, barevnou paletu apod., takže si klient dokáže lépe představit, kam bude web graficky směřovat. Smysluplný moodboard má jeden konzistentní styl – můžete připravit dva či tři (nebo je necháte připravit přímo klienta.) a ujasnit si emocionální a grafickou stránku webu.

Omezení z hlediska grafického ztvárnění dávají webdesignerovi jasnější představu o mantinelech, ve kterých se může pohybovat, a snižují možné (oprávněné) důvody odmítnutí designu klientem. Web v souladu s propracovaným manuálem je málokdy odmítnut. V případě, že klient nemá vizuální styl a vy přesto chceme projekt dělat, je bezpodmínečně nutné nastavit grafická očekávání, např. formou moodboardu.

Procesy na straně klienta V případě větších a složitějších projektů je nutné zmapovat aktuální stav procesů na straně klienta a počítat s nimi při návrhu webu a jeho administrace. Procesy budete řešit i u překvapivě malých webových prezentací, jako jsou e-shopy nebo weby pro získávání kontaktů.

⟶ ⟶ ⟶ ⟶

Jak probíhá objednávka? Co se děje po objednávce? Co se bude dít s nasbíranými kontakty? …

Extrémní případ nastává, když navrhujete systém pro interní potřeby nějaké skupiny lidí či organizace – od komplexního administračního systému po intranety. V takovém případě hraje analýza procesů na straně klienta klíčovou roli, protože na ně buď váš web nasedne a podpoří je, nebo selže na celé čáře ve chvíli, kdy ho budou muset zaměstnanci klienta začít používat, a klient zjistí, že jim práci přidává, místo aby ji šetřil.

Jan Řezáč Web ostrý jako břitva Fáze 1: Objevování

71

Metody Pro každý projekt se mohou hodit jiné formy sběru informací v závislosti na tom, co potřebujete od klienta získat a kolik na to máte času. Zjistěte časové a cenové omezení projektu a na základě omezení vytipujte vhodné metody z každé fáze návrhu. Plán můžete následně představit klientovi, nacenit ho a udělat rámcový časový odhad.

Úvodní dotazník Dotazník představuje strukturovanou sadu otázek, kterou pošlete klientovi, nebo se s ním nad dotazníkem potkáte a on vám odpoví 59. V některých případech jsou odpovědi uspokojivé, jindy klient vůbec nepochopí, na co se ptáte. Moje zkušenost je taková, že se u nízkonákladových projektů vyplatí poslat dotazník a případné „nedokonalosti” řešit osobně. Část klientů vyplňuje dotazníky tak podrobně, že už k žádné osobní schůzce dojít nemusí, se zbytkem je lepší potkat se osobně a vyjasnit si vaše dotazy. Používám pro klienty jednotnou kostru projektového dotazníku, do které přidávám další dotazy vzhledem ke konkrétnímu projektu a mým aktuálním znalostem o něm. Dotazník mám v Google dokumentech, takže ho jednoduše nasdílím jak s klientem, tak s ostatními členy týmu. Odpovědi klienta si převedu do myšlenkové mapy (pomáhá mi to přemýšlet o projektu lépe, než když je mám jen v dokumentu). V dotazníku je vhodné uvádět příklady, aby si klient dokázal spíše představit, co po něm chci za odpověď. Ptát se musíte jazykem bežných lidí, protože jinak si klient bude připadat jak blbec a vaše spolupráce skončí dříve než začne.

Struktura mého úvodního dotazníku ⟶⟶ Projekt, jeho přínosy a určující osa trojimperativu. ⟶⟶ Byznys klienta – co dělá, vize, mise, hodnoty a strategie. ⟶⟶ Brand, klíčové vlastnosti značky, příběh, archetyp, USP… ⟶⟶ Konkurence a spojenci. ⟶⟶ Potřeby a motivace zákazníků. ⟶⟶ Odkud budeme přivádět na web lidi. ⟶⟶ Očekávání od webu, konverzní akce, základní omezení z hlediska podkladů (mám/nemám fotky). ⟶⟶ Další specifické dotazy vzhledem k charakteru klienta. 59 Lepší, ale časově náročnější možnost.

72

Jan Řezáč Web ostrý jako břitva Fáze 1: Objevování

Rozhovory s lidmi na straně klienta

Zásadním rizikem projektu je, když klient neví, kdo jsou jeho zákazníci. Poznáte to tak, že si myslí, že jeho zákazníci jsou všichni, popř. netuší, jak je charakterizovat (a posledních 7 let jim prodává krém na boty, který si zjevně někdo kupuje). V tuto chvíli vám mohou výrazně pomoci proto-persony rozebírané ve fázi uživatelského výzkumu.

V případě řešení rozsáhlejších webů už dotazník rozhodně nestačí a je třeba si dohodnout schůzku se všemi klíčovými lidmi na straně klienta, zmapovat jeho interní procesy, které se týkají projektu apod. Jedná se především o top management, marketingové oddělení, zákaznickou podporu, ale i lidi za pultem,… Ti vám prostřednictvím hloubkových rozhovorů dokáží popsat svá očekávání, jak zákazníci přemýšlejí, na co kladou důraz, jak se rozhodují a co pro ně můžete svým projektem udělat. Zaměstnancům klienta mimo top management nemá smysl posílat brief, mnohem efektivnější je se na hodinu setkat a probrat jejich pohled osobně. Ze znalostí na straně zaměstnanců klienta můžete získat především odpovědi na otázky: ⟶⟶ ⟶⟶ ⟶⟶ ⟶⟶ ⟶⟶ ⟶⟶

Na co se lidé ptají? Na co si lidé stěžují? Jaké jsou jejich obavy před uskutečněním obchodu? Jaké jsou mýty o byznysu klienta? Jaké jsou důvody neuskutečněného obchodu? Co si myslíte, že zákazníci chtějí a potřebují?

Dále pak demografii a velmi obecný popis cílových skupin. Hloubkové rozhovory podrobněji rozebereme ve fázi uživatelského výzkumu.

SWOT analýza Vytáhněte tým klienta z kanceláře a nechte každého zvlášť sepsat silné stránky, slabé stránky, příležitosti a hrozby pro organizaci/produkt a následně diskutujte nad jednotlivými pohledy a formulujte závěry. Druhá možnost je zahrnout SWOT analýzu do svého úvodního dotazníku. SWOT analýza vám umožní lépe porozumět klientovi a díky znalosti silných stránek, slabých stránek, hrozeb a příležitostí můžete lépe formulovat USP.

Jan Řezáč Web ostrý jako břitva Fáze 1: Objevování

73

Odneste si z kapitoly

Většina vašich potenciálních klientů nemá sepsanou svoji strategii a pravděpodobně nad ní začne přemýšlet, až se zeptáte. Zásadní brandové otázky pro klienta dle Martyho Neumeiera jsou: 1. Kdo jste? 2. Co děláte? 3. Proč by to mělo někoho zajímat? Nedělejte projekty bez 74

strategie, nedělejte projekty bez omezení, nedělejte projekty bez širší marketingové podpory. Nemá smysl ptát se „proč“, pokud otázku neformulujete jasně a konkrétně − „proč“ začne klienta za chvíli vytáčet. Výjimkou je technika „5 why  “. 60

60 http://naostri.se/ whys5

75

76

Literatura V rámci této fáze vás zajímají knihy o brandingu, byznysu a marketingu. Jestliže se chcete dlouhodobě věnovat návrhu webových prezentací, bude pro vás marketing takřka denní chleba. Doporučuji začít kteroukoliv knihou Setha Godina. . Naopak designeři, kteří navrhují aplikace, mohou s klidem přejít na další kapitolu o uživatelském výzkumu. Margaret Mark, Carol Pearson: Hrdina nebo psanec, 2012 Kniha o archetypech a jejich použití v brandingu a marketingu – hodí se pro firemní i osobní brandy. Úskalí archetypů spočívá v tom, že se poznáte takřka ve všech a začnete jich používat více zároveň. Marty Neumeier: Brand Gap, 2008 Bible brandingu – vyšla i v češtině a přečtete ji za hodinu… a začnete o značkách přemýšlet jinak. Seth Godin: Fialová kráva – Marketing konečně jinak!, 2010 Seth Godin: Permission Marketing, 1999 Seth Godin: Free Prize Inside: The Next Big Marketing Idea, 2004 Moderní marketing pro začátečníky a mírně pokročilé, přečtěte si kterékoliv tři Sethovy knihy o marketingu.

Rick Levine, Christopher Locke, Doc Searls, David Weinberger, McKee Jake: Cluetrain Manifesto, 2010 Kniha z roku 2000, která naznačila směr moderního marketingu. Markets are conversations. Edward de Bono: Šest klobouků aneb Jak myslet, 1997 Metoda pro přemýšlení nad problémy z různých úhlů. Richard Rumelt: Good Strategy Bad Strategy: The Difference and Why It Matters, 2011 Základy strategického myšlení. Michael E. Porter: Competitive Strategy: Techniques for Analyzing Industries and Competitors, 1998 Analýza konkurence pro strategické konzultanty a top manažery korporací. Může se vám hodit na dlouhodobých projektech.

Jan Řezáč Web ostrý jako břitva Fáze 1: Objevování

77

Vážená paní Nováková, děkuji vám za upřesnění zadání. V příloze posílám 1. návrh postupu pro vytvoření vašeho webu 2. orientační termíny, 3. cenovou nabídku. Jestliže vám proces i cena vyhovuje, poprosím vás o zaslání závazné objednávky a uhrazení zálohy.

78

79

jak probíhá uživatelský výzk

metody zna uživatelského persony výzkumu storyboardy online výzkum výzkum v terénu

fáze 2: u výzkum

analýza současného webu online dotazníky na webu dotazníkový průzkum analýza webů konkurence analýza dalších používaných webů 80

Jan Řezáč Web ostrý jako břitva Název kapitoly

ýzkum modely chování lidí

znalostní mezera metody dokumentace uživatelského výzkumu

: uživatelský m guerillový uživatelský výzkum hloubkové rozhovory focus groups card sorting stínování analýza call center, prodejen a výdejen Jan Řezáč Web ostrý jako břitva Název kapitoly

81

Uživatelský výzkum je nedílnou součástí návrhu webu a je vaše starost ho zrealizovat.

Mašek Tomáš » , ,

Navrhoval jsem e-shop se spodním prádlem. Pár otázek na ženy v mém okolí (měli byste vidět, jak se tváří ženy při rozhovoru o spodním prádle s cizím chlapem!) mi potvrdilo několik hypotéz týkajících se používaného názvosloví produktů, na které bych bez toho krátkého výzkumu nikdy nepřišel. Přitom jejich dopady na návrh navigace webu byly poměrně značné.

5 Uživatelský výzkum nemusíte dělat pokaždé – pokud už máte v dané oblasti ověřené znalosti z předchozích projektů, využijte je! 61

Setkávám se s tím, že designer má pocit, že klient uživatelský výzkum nezaplatí. Je jen a pouze na schopnostech designera a jeho týmu, aby prodal klientovi svůj proces tvorby webu. Klient pravděpodobně netuší, co je potřeba udělat a proč, dokud mu to odborník srozumitelně nevysvětlí. Ano – jsou projekty s velmi omezeným rozpočtem, ale je jen na vás, které projekty přijmete. Uživatelský výzkum nemusí být drahý.

Uživatelský výzkum je způsob, jak získat vhled do uvažování lidí – např. potenciálních návštěvníků vašeho webu. V rámci výzkumu můžete využít mnoho různých metod. Cílem výzkumu je minimalizovat riziko, že vytvoříte nesmyslný výstup, protože na webu nebude to, co lidé potřebují. Zároveň díky výzkumu snáze stanovíte priority celého projektu z pohledu návštěvníků webu. Velké množství webových projektů stojí jen na informacích získaných od klienta, v horším případě pouze na fantazii designera. Této situaci předejdete jen tím, že budete u svých projektů trvat na uživatelském výzkumu jako na klíčovém podkladu pro svou vlastní práci. Dříve nebo později se tak podaří změnit trend, kdy množství webových projektů nenaplní očekávání kvůli absenci správných informací. Udělat rozumný výzkum není na hodinu a pokud je prioritou projektu čas nebo rozpočet, je často přeskočen. Při práci na projektu musíte hrát s kartami, které jsou rozdány, ale na druhou stranu – vy jste tu od stanovení pravidel hry (procesu návrhu webu). Mnoho slibných projektů selhalo na tom, že designer vynechal uživatelský výzkum. Informací, které získáte, nemusí být mnoho, ale mohou být zcela zásadní pro budoucí úspěch webu. Uživatelský výzkum v pojetí webdesignu není uživatelský výzkum v pojetí marketingu. Marketing zajímají data a čísla, aby bylo jasné, zda má smysl produkt uvést na trh a jak ho pozicovat. Webdesignera zajímají při tvorbě webové prezentace niterné motivace a očekávání lidí pro používání produktu – proč a kdy ho lidé vůbec potřebují, jak o produktu přemýšlí, jak ho vybírají a používají, aby ho bylo možné co nejlépe prezentovat nebo navrhnout – což kvantitativní marketingový přístup nepokrývá. U webové aplikace je pak důležité ponořit se do hlubšího kontextu jejího používání. Je významný rozdíl, když o své cílové skupině něco skutečně víte – například na základě čeho se lidé rozhodují při volbě mezi více produkty na vašem e-shopu, a když si svého uživatele pouze představujete. Nebojte se, uživatelský výzkum už jste pravděpodobně dělali – a pokud ne, je nejvyšší čas alespoň některou z jeho forem zavést do vašeho procesu návrhu webové prezentace.

61 Tento přístup se nazývá Genius Design a popisuje ho Jared Spool v článku http:// naostri.se/uiegenius

Jan Řezáč Web ostrý jako břitva Fáze 2: Uživatelský výzkum

83

Jak probíhá uživatelský výzkum 1. Sepíšu si, co o návštěvnících webu nevím a potřebuji vědět. 2. Zvolím vhodné metody uživatelského výzkumu. 3. Provedu výzkum. 4. Vytvořím dokumentaci a zjištění konzultuji s klientem.

84

Jan Řezáč Web ostrý jako břitva Fáze 2: Uživatelský výzkum

Znalostní mezera Ve fázi Objevováni jsme získali orientační informace o lidech, kteří jsou pro vašeho klienta zajímaví. Jestliže chcete návštěvníka webu ovlivnit tak, aby na vaší prezentaci provedl nějakou konverzní akci, musíte pochopit jeho vnitřní motivace a navodit takové podmínky, aby ji nakonec skutečně provedl. Pro webové prezentace je často klíčové zjistit:

⟶⟶ ⟶⟶ ⟶⟶ ⟶⟶ ⟶⟶

Jak produkt zapadá do života jeho uživatele. Jak uživatel chápe produkt. Co je pro něj důležité a co naopak není. Kdo rozhoduje o koupi produktu. Zda ho bude kupovat a využívat stejná osoba (musíte uspokojit potřeby více typů lidí). ⟶⟶ Jaký je proces nákupu, schvalovací mechanismy (důležité zejména v B2B 62). ⟶⟶ V jaké situaci je člověk, který si produkt kupuje. ⟶⟶ … doplňte další dotazy dle svého projektu.

62 Zákazníky jsou firmy, což výrazně ovlivňuje např. délku nákupního cyklu.

Jan Řezáč Web ostrý jako břitva Fáze 2: Uživatelský výzkum

85

Metody uživatelského výzkumu

Smyslem výzkumu není dělat výzkum a odškrnout si další z fází procesu, ale pomoci si při následném návrhu webu. Podle toho volte i konkrétní metody. Pomohou vám persony při další práci? Udělejte je! Potřebujete je přesné? Tak nejdříve shromážděte maximum relevantních informací.

Metody pro uživatelský výzkum lze rozdělit do dvou oblastí. První oblast tvoří metody, kterými získáváte data, a druhou metody, kterými dokumentujete svá zjištění. Když provedete hloubkové rozhovory, můžete výstup dokumentovat například formou person 63, ale vytvářet rovnou persony nové vhledy do projektu mnohdy nepřinese. Proces práce s dokumentací není lineární – výsledná dokumentace ovlivňuje formu uživatelského výzkumu, protože díky ní víte, jaké informace potřebujete od lidí získat. Takže je vhodné vědět dopředu, jak chcete výstup zdokumentovat a k čemu budete tuto dokumentaci dále využívat (tedy proč volíte právě tuto formu dokumentace). Jaké máte možnosti?

Online výzkum Online výzkum nemusí být nutně levnější než ten, který probíhá fyzicky mezi lidmi. Doporučuji ho provádět pouze jako doplňkovou aktivitu, ale je lepší než nic. Výraznou výhodou online výzkumu je, že získáte nejen některá fakta, ale i čísla, o která se můžete opřít.

Analýza současného webu Při redesignu existujícího webu získáváte skvělý prostor pro získání informací (aniž byste museli ven mezi lidi!). Velmi pravděpodobně na současném webu běží nějaký analytický nástroj typu Google Analytics 64, který vám pomůže pochopit, co lidé dnes na webu dělají. Jaké jsou předpoklady úspěšného využití dat z analytického nástroje?

1. Web je rozumně technicky navržen (není nad rozsáhlé fazetové navigace 65, komplexní vyhledávání nebo konverzní trychtýře, které běží na jednom jediném URL bez ohledu na to, co s nimi návštěvník dělá). 2. Nástroj je dostatečně a správně nakonfigurován, takže je možné z něj data získat (zaznamenává se vše, co potřebujete pro analýzu, včetně akcí, které nemění URL, jsou nastaveny konverzní trychtýře, odfiltrovány přístupy klienta,…). 3. Jste schopni data správně interpretovat a udělat na jejich základě závěry (na to potřebujete dobrého analytika).

86

Jan Řezáč Web ostrý jako břitva Fáze 2: Uživatelský výzkum

63 Persona je archetypální uživatel. Vysvětluji později v kapitole. 64 Google Analytics jsou v roce 2014 pravděpodobně nejrozšířenější analytický nástroj pro web, takže se s nimi setkávám nejčastěji.

65 Navigace pomocí komplexního filtru, používá ji v době psaní knihy např. booking.com

Mezi analytické nástroje nepatří jen Google Analytics, další rozebírám v poslední části designerského procesu (kapitola Evaluace). Mít data je jedna věc, ale bez správné interpretace jsou vám k ničemu. Osobně ji přenechávám specialistům na webovou analytiku 66. Co hledat v Google Analytics ⟶ ⟶ Představte si člověka, který hledá na webu informaci, kterou nemůže najít. Je extrémně zaujatý, prochází množství stran, tráví na webu obrovské množství času, ale přesto odchází naštvaný.

⟶

⟶ ⟶

Online dotazníky na webu

66 Doporučuji Jana Tichého, Lukáše Čecha a Pavla Šabatku. 67 Sekvence stránek, která končí konverzní akcí. 68 Vysoká míra opuštění ještě nemusí znamenat problém – např. blogy mohou mít bounce rate 80% a přitom fungovat zcela v souladu se zamýšlenými cíli. 69 Tato myšlenka není moje, ale Avinashe Kaushika, který je v době psaní knihy analytik číslo jedna této planety.

Data z analytického nástroje vám řeknou, CO návštěvníci na webu dělají (často agregovaně), ale už vám neřeknou PROČ 69. Často si jen domýšlíte, proč návštěvník jednal tak, jak jednal nebo, kdo to vůbec byl. Proto je vhodné doplnit analýzu o vhled do motivací lidí formou online dotazníků. Nevýhoda online dotazníků je zřejmá – nemáte statisticky vhodný vzorek návštěvníků. Procento vyplnění se bude lišit vzhledem ke zna-

70 Původní 4Q koupil provozovatel webu http://naostri.se/iperc

⟶ ⟶ ⟶ ⟶ ⟶ Osobně jsem si oblíbil dotazník doporučovaný Avinashem Kaushikem, který využívá metodu 4Q 70. Spočívá v tom, že se lidí neptáte, co by chtěli (to je skoro vždy nesmyslná otázka), ale s jakým záměrem na web přišli a zda se jim povedlo dosáhnout svého cíle.

Jak vypadají konverzní trychtýře 67? Jak si web stojí z pohledu konverzí a mikrokonverzí? Míra opuštění konkrétních stránek – existují na webu stránky, kam přicházejí návštěvníci a ihned z nich odcházejí? Chceme to takto 68? Jaký je trend ve vývoji počtu přístupů z mobilních zařízení (relativně i absolutně)? Má smysl vzhledem k očekávané životnosti webu navrhnout web responsivně? Jaký je trend z pohledu rozlišení displayů? Jak moc lidé hledají? Co lidé na webu píšou do vyhledávacího pole? Jaké mají hledané fráze důsledky pro budoucí návrh informační architektury? Jaký obsah nám získává nejvíce nových zákazníků? Které zdroje návštěvnosti jsou nejzajímavější vzhledem ke konverzím? Který obsah webu je nejvíce sdílen na sociálních sítích? Jak často se lidé vracejí na web? Na které návštěvě provedou konverzní akci? Jak se liší chování nových návštěvníků od vracejících se?

Jan Řezáč Web ostrý jako břitva Fáze 2: Uživatelský výzkum

87

losti brandu vašeho klienta návštěvníkem a fázi nákupního cyklu, ve které se návštěvník nachází. Ale i tak z nich lze získat zajímavé podněty pro další práci a rozkrýt částečně motivace návštěvníků webu.

Dotazníkový průzkum Dotazníkový průzkum je sociologická metoda, která vám umožní ověřit vaše hypotézy na širším okruhu lidí, než jsou návštěvníci webu. Aby dotazník k něčemu byl, potřebujete ho vyplnit od relevantní skupiny, která se velmi pravděpodobně neshoduje s okruhem vašich přátel či fanoušků na sociálních sítích. Můžete si ovšem pomoci reklamou (třeba na Facebooku), díky které dotazník zacílíte přesně na svou cílovou skupinu. Pro tvorbu dotazníků existuje množství pravidel a pokud vám mají výstupy k něčemu být, musíte se doslova stát sociologem. Proto jejich tvorbu až na výjimky přenechávám odborníkům.

Konkurence vašeho klienta může mít na webu obsah a funkce, které nikdo nevyužívá, a jejich weby mohou obecně fungovat pěkně mizerně. Což často nezjistíte bez pohledu do jejich statistik návštěvnosti (které navíc nejsou nijak nastavené). Klient vás i tak může tlačit do nějakého řešení, které využívá jeho konkurence. Důvod je jednoduchý – není expert na návrh webu a cizí weby jsou nejuchopitelnější zdroj inspirace. Nekopírujte bezhlavě konkurenci (bez ohledu na přání svého klienta), ale zjistěte, jaké má klient motivace pro své přání..

Analýza webů konkurence Na konkurečních webech se často vyskytují použitelné myšlenky, které vám mohou pomoci při návrhu webu. Konkurenci a projekty podobné tomu vašemu proto nepodceňujte, ale na druhé straně je berte jen jako bod, od kterého se odrazíte. Váš klient nepotřebuje konkurenci dohnat, potřebuje ji předstihnout a vyzdvihnout své kvality (odlišit se − ale tak, aby to mělo smysl pro jeho zákazníky... a to jsme opět u USP a brandu). U analýzy webů konkurence netravte zbytečně mnoho času – stačí mít pouze velmi rámcovou představu a síly raději vrhnout na lepší pochopení klientových zákazníků a do vlastního návrhu webu. Projděte si konkurenci ideálně ve chvíli, kdy už máte rámcovou představu lidech, kteří budou weby používat, abyste se dokázali lépe vcítit do toho, co by pro ně mohlo/nemuselo být vhodné. Odkud čerpat konkurenci pro analýzu: 1. 2. 3.

Nechte si od klienta poslat seznam webů, které vnímá jako konkurenční. Zadejte si obor klienta česky do vyhledávače a projděte si weby, které najdete tam. Projděte zahraniční weby z oboru vašeho klienta v galeriích hezkých webů. Vybírejte ideálně takové, které jsou „krásné” (a tedy nad nimi někdo trávil v poslední době nějaký čas na grafickém designu a při troše štěstí budou zajímavé i z pohledu interakčního designu – někdy samozřejmě nejsou, ale je to většinou lepší než výsledky na prvních stranách vyhledávače).

Znalost klientovy konkurence vám může pomoci při hledání řešení – nebudete muset znovu vymýšlet kolo a svou energii budete moci soustředit do míst, které třeba žádný z konkurentů ještě nevyřešil

88

Jan Řezáč Web ostrý jako břitva Fáze 2: Uživatelský výzkum

(a všichni při řešení této situace kopírují jedničku či dvojku na trhu). Stejně tak na konkurenčních webech objevíte chyby, kterých se při své práci budete moci snadněji vyvarovat. Weby můžete analyzovat sami nebo na nich provést uživatelské testování.

Analýza dalších používaných webů Lidé, kteří budou chodit na web vašeho klienta, se budou pohybovat i na dalších webech. Je vhodné si vytipovat několik takových webů a projít si je z pohledu používaných návrhových vzorů, na které mohou být návštěvníci vašeho nového webu zvyklí. Této znalosti můžete následně využít při návrhu uživatelského rozhraní webu. Na používané weby se zeptejte třeba při hloubkových rozhovorech. Mohou mezi ně patřit portály, zpravodajské weby, weby školicích agentur, blogy, sociální sítě,…

Analýza klíčových slov Analýza klíčových slov vám pomůže pochopit, jak lidé uvažují o tématu vašeho webu při hledání informací na internetu. To může mít důsledky na jazyk používaný na webu a jeho navigaci a informační architekturu. Osobně přenechávám analýzu klíčových slov specialistům na optimalizaci webu pro vyhledávače.

Výzkum v terénu Předchozí metody byly virtuální a mohli jste je realizovat v pyžamu z pohodlí vašeho obýváku. Teď je čas vyjít ven do ulic. Uživatelský výzkum, uživatelské testování, uživatelská zkušenost, uživatelský prožitek – vše má v sobě slovo uživatel 71. Je vhodné se alespoň na některých projektech s lidmi potkat, abyste měli možnost bojovat se svým pocitem, že přece víte, jak to lidé mají. Věřte mi, že nevíte, že nevíte, že nevíte.

Guerillový uživatelský výzkum Nízkonákladová varianta uživatelského výzkumu, která spočívá v tom, že vytipujete cílovou skupinu, dáte si na Facebook inzerát, že hledáte určitý typ lidí, požádáte své kamarády o kontakty a nabídnete jim pozvání na kávu. A chvíli si s nimi povídáte. Pokud se vám nepodaří najít lidi touto cestou, můžete zastavovat lidi na ulicích, v metru, ve vlaku, či v kavárnách 72. Získávání lidí chce trochu hroší kůži, ale když se zamyslíte nad mým příkladem s dámským spodním prádlem, tak to mnohdy není zas tak obtížné. A během pár hodin může být v projektu jasněji.

Jan Řezáč Web ostrý jako břitva Fáze 2: Uživatelský výzkum

71 Uživatel může užívat jen dvě věci. Software nebo drogy. Vyberte si sami. 72 Martin Kopta oslovuje lidi po hospodách. Prostředí je sekundární, pokud jsou v něm lidé, kteří jsou zajímaví pro váš projekt a udělají si na vás trochu času.

89

Hloubkové rozhovory

Interview se zaměstnaným ajťákem o tom, jak si jako nezaměstnaný hledá práci uklízečky, vám správný vhled neposkytne.

Držte hubu a krok. Vaše myšlenky a postřehy si nechte na jindy a pouze občas zkorigujte téma hovoru tak, aby zpovídaná osoba mluvila o tom, co vás zajímá.

90

Jako nejvhodnější prostředek pro poznání lidí doporučuje mnoho autorů hloubkové rozhovory s lidmi, které jste vytipovali jako vhodné pro váš projekt. Osobně doporučuji zaměřit se právě na hloubkové rozhovory, a pak až na další metody, pokud máte dostatečný rozpočet. Z hloubkových rozhovorů dostanete více informací a pocitů než z úžeji zaměřené techniky, jako je card sorting 73. Udělat dobrý hloubkový rozhovor chce empatii, zkušenost a cvik – v první fázi si budete zvykat na pocit, že to, co děláte, je vážně divné (a to i v případě, že to děláte po stopadesáté – jak se asi cítí člověk na druhé straně, který je tam poprvé?). Osobně nedokážu nikdy říct, jak bude rozhovor probíhat. Skutečně zajímavé informace získáte ve chvíli, kdy lidé překonají stres z toho, že je někdo zpovídá, a rozpovídají se o sobě/své práci/ koníčcích či o jiném předmětu hovoru. V rozhovoru je něco jako bod zlomu, kdy předtím člověk reaguje takřka holými větami a po něm vypráví příběhy. Už se mi stalo, že jsme se k bodu zlomu nedostali, nebo jsme ho dosáhli až poté, co jsem vypnul diktafon 74 (někteří lidé jsou neradi nahráváni, ale rozhovor bez nahrávání pro vás bude mít nižší užitek, protože můžete zapomenout na spoustu důležitých věcí). Počítejte s tím, že lidé budou některé situace přikrášlovat, aby vypadali lépe. Pokud vám to vadí, je nutné se zeptat na jednu a tu samou věc různými způsoby vícekrát za rozhovor. Díky příběhům si budete schopni mnohem lépe představit lidi, kteří budou web používat. Má to dva háčky. Prvním je rozpočet projektu, druhým je schopnost vašeho klienta najít lidi, kteří budou vyhovovat vašemu záměru a zároveň si s vámi budou chtít povídat. Moje zkušenost je taková, že je lepší absolvovat alespoň několik rozhovorů s ne zcela vhodnými lidmi než tuto metodu zcela vynechat. Lidé by ale měli být z cílové skupiny webu – netestujete rozhraní, kde platí určitá obecná pravidla, ale snažíte se pochopit život konkrétního výseku populace. Jako začátečníci můžete udělat dvě zásadní chyby. První je, že se ptáte na hypotetické situace. Lidé si pro vás vymyslí cokoliv, ale reálně z těchto informací nevypadne nic moc užitečného. Ptejte se na to, co lidé fakticky dělají, nikoliv na jejich hypotetické představy. Druhá chyba je, že máte pocit, že někdo musí neustále mluvit, ačkoliv opak je pravdou. Vaše mlčení je základem toho, aby se druhá strana rozpovídala. Mlčte a naslouchejte – jen tak se máte šanci něco dozvědět. Z hloubkových rozhovorů můžete získat podněty pro informační architekturu, pochopíte jazyk uživatele, jeho skutečné problémy a především pocit z interakce, který vám žádná jiná metoda nedá (snad jen metoda stínování či žití s daným člověkem… ale v tomto mají hloubkové rozhovory lepší poměr cena/výkon). Rozhovory lze dělat jak osobně, tak telefonicky nebo přes Skype. Na konci kapitoly najdete odkazy na literaturu, která vám dá teoretický základ pro plánování, vedení a vyhodnocování hloubkových rozhovorů a také dalších možných metod.

Jan Řezáč Web ostrý jako břitva Fáze 2: Uživatelský výzkum

73 Metoda pro návrh a ověření návrhu struktury webu. 74 iTalk aplikaci pro iPhone. Aktuálně nahrávání nevypínám, dokud nejsem venku z budovy.

Focus groups Focus groups uvádím, protože jste o nich pravděpodobně slyšeli. Pro nás webdesignery jde o okrajovou metodu, kterou si můžete představit jako diskusi se skupinou lidí na určité téma (např. diskuse ke konkrétnímu výrobku či službě). Potřebujete pro ni zkušeného facilitátora a je relativně drahá (je potřeba opakovaně získat a kompenzovat čas skupině lidí, nikoliv jednotlivcům). V době psaní knihy focus groups pro návrh webových prezentací nepoužívám.

Card sorting Cílem card sortingu je pochopit, jak lidé uvažují o pojmech a jejich kategoriích. Lidé při card sortingu pracují s pojmy, které jste napsali na kartičky. Je možné ho provádět osobně nebo využít online aplikaci 75. Typy card sortingu:

⟶⟶ Lidé dostanou kartičky a vytváří z nich skupiny, které sami pojmenují (otevřený card sorting). ⟶⟶ Lidé dostanou kartičky a vytváří z nich skupiny, které jste určili vy (uzavřený card sorting). ⟶⟶ Vy poskládáte skupiny a požádáte lidi, aby je pojmenovali. ⟶⟶ Ukážete lidem název skupiny a zjišťujete, co by v této skupině očekávali.

Card sorting vám přinese vhledy, které vám pomohou při návrhu navigace a informační architektury webu.

75 Seznam card sortingových aplikací najdete např. na http://naostri. se/cardsorts

92

Jan Řezáč Web ostrý jako břitva Fáze 2: Uživatelský výzkum

Stínování Stínování je jedna z časově náročnějších metod uživatelského výzkumu, která spočívá v tom, že se doslova stanete stínem zkoumaného člověka – třeba na celou jeho pracovní dobu. Při stínování ho pozorujete a získáváte tak postupně vhled do té části jeho života, kterou chcete změnit či ovlivnit. Občas s ním prohodíte pár slov, ale nesmíte ho rušit při práci. Později pak navážete hloubkovými rozhovory, protože už máte představu o tom, na co se ptát. Stínování je časově a finančně náročné a pro návrh webu tuto metodu pravděpodobně nevyužijete (naopak pro návrh informačního systému či systému pro podporu konkrétních procesů ve firmě může být stínování neocenitelné).

Analýza call centra, prodejen a výdejen Redesignujete e-shop, který má zákaznickou linku, prodejny či výdejny? Zadejte pracovníkům, aby zaznamenávali potřeby, problémy a představy zákazníků, kteří volají na linku či přicházejí do prodejny.

Metody dokumentace uživatelského výzkumu Provedli jste výzkum? Projděte si poznámky, pusťte si záznamy hloubkových rozhovorů (analýza rozhovorů je dobrá činnost do auta nebo do vlaku – tedy pokud řídí někdo jiný) a vytvořte dokumentaci. Dejte si chvíli oraz a poté se k ní vraťte a učešte ji. Dokumentace má smysl jen v případě, že ji budete využívat během návrhu webu, během prezentace klientovi a po celou dobu tvorby. Už to nebude „já si myslím, že naši zákazníci chtějí X”, ale „na základě uživatelského výzkumu chtějí X”. Vaše slova najednou začnou mít váhu, což se hodí na každém webovém projektu. Bez výzkumu a jeho závěrů má vždy poslední slovo klient – prostě proto, že projekt platí. Klient si ale velmi dobře rozmyslí svou argumentaci proti závěrům uživatelského výzkumu, protože v takovém případě už to není váš názor, ale vaše fakta (která mohou být zkreslená tím, že výzkum uděláte špatně, ale to už je jiný příběh). Dodejte raději méně dokumentace než více. Dříve se má projektová dokumentace k větším webům blížila rozsahem stránek této knize. Dnes ji beru jako dokonalý protipříklad – nikdo ji nikdy pořádně nečetl. Zapomeňte na rozsáhlé slovní popisy toho, co na webu bude 76. Pokud dokumentace neumožňuje konkrétní akci člověka, který ji prostuduje, je to špatná dokumentace.

94

Jan Řezáč Web ostrý jako břitva Fáze 2: Uživatelský výzkum

76 Nejlépe s obrázky wireframů.

Persony

Jedna vymyšlená proto-persona může změnit celý projekt. Přišel jsem do týmu, který navrhoval novou webovou aplikaci, ale nevěděl, kdo přesně ji bude používat. Vytvořit jsem tedy proto-persony potenciálních uživatelů na základě skupinového brainstormingu a najednou se mlha projasnila a bylo možné udělat některá rozhodnutí (například aplikaci mnohem přesněji zacílit na konkrétní skupinu uživatelů a omezit některé vlastnosti). Aplikace vypadala za týden úplně jinak – do funkční verze bylo potřeba ještě mnoho dalších iterací, ale jedna proto-persona znamenala skutečný posun v uvažování celého týmu.

Persony jsou archetypální uživatelé vašeho webu. Představte si je jako list papíru, na kterém je fotka, pár základních demografických údajů a především příběh daného člověka (příběhy jsou lepší než body, protože vám pomohou si lépe personu představit jako skutečného člověka). Persona mapuje chování, motivace a potřeby lidí, kteří budou chodit na váš web (nebo popisuje ty, o které naopak nemáte zájem a nechcete pro ně web navrhovat – tzv. negativní persona). V agenturním prostředí narazíte spíše na proto-persony, které jsou založeny na vaší fantazii v kombinaci s libovolnými daty, která máte o uživatelích. Proto-persony jsou lepší než nic – klient a tým přestane částečně uvažovat nad tím, jak to má on, ale empaticky se pokusí vcítit do budoucích návštěvníků webu. Pokud děláte proto-persony, tak je na druhé straně berte s rezervou a nebojte se je upravit ve chvíli, kdy zjistíte, že jsou vaše předpoklady mylné 77.

Doporučení pro tvorbu person ⟶⟶ Součástí persony by měl být příběh, který propojí personu s vaším webem či produktem. ⟶⟶ Zdůrazněte vlastnosti, které odlišují jednotlivé persony mezi sebou. ⟶⟶ Zaměřte se na situace, myšlenky, potřeby, které souvisí s webem, a nikoliv na demografické údaje. ⟶⟶ Pokud na základě informace nebudete schopni provést akci, pak taková informace nemá smysl – viděl jsem např. dlouze rozepsanou rodinnou situaci persony pro projekt, který ovšem nebyl vůbec zaměřený na rodinu. ⟶⟶ Vytvořte raději více person a pak je prioritizujte – vždy je lepší promyslet více možností, ale je nutné se následně zaměřit na ty klíčové.

77 Budou.

Jan Řezáč Web ostrý jako břitva Fáze 2: Uživatelský výzkum

95

Storyboardy Storyboard je krátký příběh popsaný sekvencí skic s popisem. Do designu se dostaly ze světa filmařů, kteří je používají pro prototypování filmů. V rámci návrhu webu využijete storyboardy především, když:

1.

Neumím kreslit! Pro tvorbu storyboardů to naštěstí není potřeba… tak se tím netrapte. Vždycky můžete vzít své skici a nechat je překreslit nebo využít některý z online nástrojů78.

Potřebujete nástroj pro koncepční přemýšlení nad širším rámcem řešení a kontextu lidí, kteří přistupují na web v různých situacích nebo s různými zařízeními. 2. Potřebujete zjistit, jak váš klient přemýšlí o potenciálním řešení (a nakreslíte storyboard na meetingu na základě jeho představy). 3. Potřebujete si ověřit, že chápete správně problém a navržené řešení splňuje klientovu představu.

Jinými slovy storyboard je nástroj pro nalezení shody. Každý storyboard obsahuje: ⟶⟶ Postavu – zákazník nebo persona, která je centrem příběhu. ⟶⟶ Scénář – jak postava, která chce vyřešit problém, přemýšlí o svém problému a co se jí honí v hlavě – popř. co říká ostatním. ⟶⟶ Prostředí – kde se postava pohybuje – je u sebe doma, v kanceláři či na různých místech s různými zařízeními? ⟶⟶ Zápletku – začíná tím, že se něco stalo (prasklo topení) a směřuje k úspěšnému či neúspěšnému řešení situace. Načrtněte si, jak bude vypadat zápletka a jak s v ní postava zachová. Dokáže vyřešit svůj problém a dosáhnout cíle? Jak jí v tom pomůže vaše služba? Co je nutné proto, aby postava uspěla? 78 Například http://naostri.se/storybs

96

Jan Řezáč Web ostrý jako břitva Fáze 2: Uživatelský výzkum

Modely chování lidí

Doporučuji si ze studií a modelů udělat svou malou soukromou wiki, do které můžete v případě potřeby sáhnout a využít ji pro argumentaci klientovi nebo pro návrh webů. Klidně si do ní kopírujte celé články i s obrázky. Vytvoření si vlastní znalostní báze znamená roky práce, ale pak z ní můžete další roky těžit – trendy a technologie zastarávají, ale lidský mozek se významněji nemění.

Vhodným doplňkem uživatelského výzkumu je obecná teorie o chování lidí, která vám může pomoci pochopit budoucí návštěvníky webu z jiného úhlu než uživatelský výzkum. Uvedu zde model z knihy Submit Now, který je odvozen od nákupního cyklu uživatele a dělí lidi podle fáze, ve které se vzhledem k nákupnímu cyklu nachází.

1. Hledač Hledač často netuší, že by mohl chtít vaši službu, a na váš web se může dostat i omylem prostřednictvím různých kanálů. Vaším úkolem je ho zaujmout natolik, aby začal uvažovat o tom, že by mu vaše služba mohla k něčemu být, a zároveň si vás zapamatoval.

2. Porovnávač Porovnávač hledá řešení pro svou potřebu, je tedy nutné mu pomoci při výběru. Příliš mnoho možností ho může paralyzovat, příliš málo zase odradit. Porovnávače je třeba zaujmout některou z alternativ a přesvědčit ho, že mu nabízíte skutečné řešení jeho potřeby a dané rozhodnutí je to nejlepší, co může udělat. Na Maslowově 79 pyramidě je často potřeba dostat se až k přesvědčivosti.

3. Nakupující Tento člověk se rozhodl, že nakoupí a dokonce, že nakoupí u vás. Je potřeba mu neházet klacky pod nohy a nechat ho co nejrychleji a nejjednodušeji objednat.

4. Zákazník Zákazník je člověk, který u vašeho klienta provedl transakci. Vaším úkolem je postarat se o jeho spokojenost, opětovný návrat na web kvůli další transakci ve správnou chvíli a sdílení jeho zkušenosti s jeho známými tak, aby byla klientova služba doporučována dále. Ze spokojených zákazníků se v budoucnu stávají advokáti vaší značky.

Kdy využívat modely Tento konkrétní model je jednoduchý a dobře aplikovatelný zejména pro návrh e-shopů. Existují i další modely a cykly návštěvníků, některé z nich najdete popsány v knihách níže 80. Modely nenahrazují uživatelský výzkum, ale mohou vám pomoci začít přemýšlet o webu v širším kontextu.

Jan Řezáč Web ostrý jako břitva Fáze 2: Uživatelský výzkum

79 Viz další kapitola 80 Určitě si projděte Avinashův model See-Think-Do

97

Odneste si z kapitoly

Uživatelský výzkum je nedílnou součástí návrhu webu a je vaše starost ho zrealizovat. Lze ho provést i ve chvíli, kdy nemáte skoro žádné zdroje, přístup k lidem a zkušený tým. Uživatelský výzkum sestává ze sběru informací a jejich uchopení do takové podoby, která vám pomůže při návrhu webu. Online výzkum použijte ideálně pouze jako 98

doplňkovou alternativu, raději vyjděte do ulic a povídejte si s lidmi. Klíčová metoda uživatelského výzkumu jsou hloubkové rozhovory – jednak s lidmi na straně klienta, ale především s lidmi, kteří budou (potenciálně) na nový web chodit.

99

100

Literatura Steve Portigal: Interwieving users, 2013 Kniha o hloubkových rozhovorech a umění vyzpovídat lidi relevatním způsobem. Indi Young: Mental Models, 2008 Mentální modely – komplexní nástroj uživatelského výzkumu, který v sobě mmj. skrývá i hloubkové rozhovory – vhodná kniha pro pochopení tvorby person. Richard Caddick: Communicating the User Experience, 2011 Autor probírá různé formy dokumentace prakticky. Dan Brown: Communicating Design Základy dokumentace – podrobný popis různých forem dokumentace od wireframů až po persony. Steve Mulder: The User is Always Right, 2006 Uživatelský výzkum pro projekty, kde máte 2 měsíce času jen na výzkum. Velmi pravděpodobně ji v začátcích nevyužijete.

Marc Stickdorn, Jakob Schneider: This is Service Design Thinking: Basics, Tools, Cases, 2012 Základy designu služeb včetně popisu konkrétních metod výzkumu využitelných i na webu. Tady najdete např. stínování podrobněji. Scott McCloud: Understanding Comics: The Invisible Art, 1994 Zaujaly vás Storyboardy? Pak využijete základy tvorby komixu. Covey, Stephen M. R.: 7 návyků skutečně efektivních lidí – Zásady osobního rozvoje, které změní váš život, 2013 Kultovní kniha mmj. o komunikaci a naslouchání. Bez empatie nemá váš výzkum naději na úspěch. Erika Hall: Just enought research, 2013 Kuchařka metod uživatelského výzkumu.

Jan Řezáč Web ostrý jako břitva Fáze 2: Uživatelský výzkum

101

Vážená paní Nováková, v příloze Vám posílám závěry uživatelského výzkumu. Web navrhuji pojmout takto…

102 Mašek Tomáš » , ,

103

pojmenování webu generování nápadů teze návrhu nepodce 1. stanovení směru grafický 2. struktura a obsa 3. prototypování fáze 3: ná obsahová strategie designové frameworky návrh informační chyba architektury s výpl pozice webu v cestě které uživatele průchody návštěvníka chyba z kata webem klient mapa obsahu webu chyba jak nepřistupovat a dejt k obsahu webu 104

Jan Řezáč Web ostrý jako břitva Název kapitoly

design studio metoda šesti klobouků dceňujte grafický design ký rámec projektu skicování sah webu wireframy prototyp návrh webu mobile first 4. grafický návrh webu

yba č.1: vytvořte web ýplňovými texty a obrázky, ré doplní klient yba č.2: dejte na web texty atalogů a letáků, které už ent používá jinde. yba č.3: ušetřete za fotografa ejte na web fotky z fotobank. Jan Řezáč Web ostrý jako břitva Název kapitoly

105

6 Všimněte si, že klient (a začínající webdesigner) si pod webdesignem představuje až poslední viditelnou vrstvu. Přirovnal bych webdesign k ledovci – skutečná masa ledu je až pod hladinou. Není na tom nic špatného, jen je potřeba se nenechat svést na cestu “jako první uděláte grafický návrh hlavní strany”.

Získali jste podněty a vhled do klientova byznysu a života jeho zákazníků. Teď je potřeba se vrátit ke stolu a začít tvořit. Vaším cílem je interpretovat získané informace tak, aby měl výsledek smysl. Znamená to oddělit zrno od plev, najít v informacích vzory, přidat k nim své vlastní znalosti a dát výsledku jasnou strukturu. Vaše činnost bude probíhat ve třech krocích:

1. Stanovení směru 2. Navržení struktury a obsahu webu 3. Prototypování Pokuste se pozdržet své nutkání začít skicovat nebo dokonce navrhovat wireframy. Wireframy jsou důležitou součástí návrhu, ale zdaleka ne prvním nebo dokonce jediným krokem. Zatím nemáte rozmyšlenou strukturu, obsah ani jednotlivé stránky webu, a tudíž není co vizualizovat. Typicky je tedy potřeba vytvořit takové množství obsahu, abyste návštěvníka přesvědčili k tomu, aby jednal v různých fázích nákupního cyklu (málokdo provede konverzní akci při první návštěvě).

Jan Řezáč Web ostrý jako břitva Fáze 3: Návrh webu

107

1. Stanovení směru Vaším prvním cílem je utřídit si myšlenky z předchozích dvou fází a interpretovat je do vysokoúrovňové představy o webu. Provedli jste uživatelský výzkum, takže máte informace o tom, jak je to dnes. Shrňte si jádro aktuálního stavu do krátkého odstavečku. Pomůže vám to při prezentaci klientovi, ale především při návrhu řešení. Dnes je to takto, cíle jsou takové, pojďme udělat toto.

Pojmenování webu

Vím, že to zní skutečně banálně, ale už se mi stalo, že klient potřeboval e-shop, jehož hlavní strana vypadala jako blog, ve kterém je mimo jiné i možnost si něco koupit. Pojmenování pomáhá vašemu záměru navrhnout smysluplný web.

Velmi se mi vyplatilo pojmenovat si, co navrhuji. Navrhuji e-shop. Navrhuji produktovou microsite. Navrhuji zpravodajský portál. Tato věta vám pomůže v případě, že váš návrh začne vypadat jako „navrhuji všehochuť“ a umožní vám se vrátit o krok zpět a stanovit lépe priority. Sbírá váš web kontakty do databáze? Prodává něco? Nabízí unikátní videa? Tak to z něj musí být vidět 81.

Generování nápadů Cílem generování nápadů 82 je neupnout se na první řešení, které vás napadne 83. Pro menší projekty může první myšlenka fungovat, pro větší je skoro vždy nějaká lepší – a té je potřeba dát čas a prostor, aby se mohla projevit. Metod pro generování nápadů existuje celá řada, osobně používám brainstorming nad myšlenkovou mapou, na který navazuje minimálně den pauza, po které se k nápadům opět vrátím. Dvě metody generování nápadů rozvedu podrobněji:

81 Pokud svůj záměr tedy cíleně neskrýváte, ale v takovém případě víte, co chci říct. 82 V zásadě libovolnou metodou – KJ metoda, Design Studio, brainstorming, mindmapy, skicování,... 83 Najděte si termín functional fixedness.

Metoda šesti klobouků Metodu šesti klobouků vytvořil Edward de Bono. Umožňuje přemýšlet nad problémem strukturovaným způsobem z šesti předem definovaných úhlů. Účastníci si pomyslně nasadí jeden z klobouků a přemýšlejí o problému daného úhlu (fakta, emoce, negativní/pozitivní přístup, kreativita, přemýšlení). Metoda je popsána vyčerpávajícím způsobem v knize, kterou odkazuji na konci kapitoly.

Design Studio Jedna z náročnějších metod pro generování nápadů ve skupině je Design Studio. Účastníci jsou rozděleni do skupinek, pochopí problém, který budou řešit, navrhnou řešení prostřednictvím skicování, skici si vzájemně odprezentují a autoři dostanou zpětnou vazbu a nakonec vytvoří společný návrh na základě iterace předchozí diskuse. Doporučuji shlédnout video 84 Todda Zaki Warfela, které vám dá podrobný návod pro použití metody.

84 Warfel: http://naostri. se/zakistudio

Jan Řezáč Web ostrý jako břitva Fáze 3: Návrh webu

109

Teze návrhu Cílem tezí je vytvořit shodu s klientem o podobě budoucího řešení. Teze reprezentují filosofii nového řešení v kontextu všech informací, které máte z fáze objevování a uživatelského výzkumu. Část vznikne na základě diskuse s klientem, část vzejde z uživatelského výzkumu a některé vás napadnou při brainstormingu či ranní kávě. Teze se snažím navíc shrnout pomocí jednoho jediného slova, které naznačí další směřování projektu.

Příklady tezí ⟶

⟶

Vyhledávání se bude chovat podobně jako Google (jedno pole, našeptávač). Výsledky vyhledávání budou označeny podle typu obsahu, ze kterého pochází. Bude možné si zobrazit historii vyhledávaných pojmů. Kalendář bude obsahovat akce z různých webů, které budeme přebírat prostřednictvím moderovaných RSS kanálů. Každý uživatel si bude moci personalizovat svůj výpis akcí na základě tématu a místa konání a přihlašovat se přes web na konkrétní akce.

Teze sepište a odprezentujte klientovi. Umožní vám to velice levně ověřit, zda postupujete správným směrem ještě předtím, než uděláte prototyp. Tato fáze má největší smysl u komplikovaných projektů, kdy vy ani klient přesně nevíte, jak by měl vypadat výsledek.

110

Jan Řezáč Web ostrý jako břitva Fáze 3: Návrh webu

2. Struktura a obsah webu Širší kontext webu začněte převádět v podrobnější popis řešení (stále ne nutně graficky). Osobně mi pomáhá dát si všechny informace na jedno místo (v mém případě je to myšlenková mapa – ve vašem to můžou být třeba lístečky a poznámky na stěně) a přemýšlet nad nimi v jednom velkém celku. Z nich pak postupně vzniká struktura obsahu (a u ní poznámky ke konkrétním funkcím webu), kterou dále rozpracovávám. Co vám může pomoci při tvorbě obsahu?

Obsahová strategie Obsahová strategie se zabývá plánováním, tvorbou a vyhodnocováním účinnosti obsahu napříč všemi marketingovými kanály, mmj. i webem tak, aby naplňoval potřeby klienta a jeho zákazníků. Typicky obsahuje:

1. 2. 3. 4. 5. 6. Avinash popsal svůj framework v článku délky cca 20 A4 textu, skoro nikdo ho tedy nečetl a nepoužívá. Přitom jde o skvělý nástroj, který pomáhá uvažovat o projektu v celé šíři nákupního cyklu. Donutí vás položit si otázky typu: Jakým způsobem váš projekt opečovává návštěvníky, kteří nemají ponětí o vašem oboru, značce či produktu? A jak budete měřit, že je skutečně přitahujete?

zmapování aktuálních kanálů, na kterých vytváříme obsah, zmapování aktuálního webu (pokud redesignujeme), stanovení principů pro tvorbu obsahu a procesů pro práci s obsahem, naplánování vytvoření a převodu stávajícího obsahu, naplánování tvorby dalšího obsahu na jednotlivých kanálech, nastavení a vyhodnocení KPI.

Díky obsahové strategii máte obsah pod kontrolou a zachováváte jeho konzistenci, aktuálnost, relevantnost, apod. Obsahový stratég je něco jako analytik a šéf lidí, kteří vytváří obsah, v jedné osobě. Udává směr a vyhodnocuje výsledky. Osobně používám pro návrh obsahové strategie webů framework Avinashe Kaushika See-Think-Do 85 formou myšlenkové mapy. Obsahovou strategii podrobně rozebírají knihy na konci kapitoly. Pokud chcete navrhovat webové prezentace, musíte znát základy obsahové strategie (u webových aplikací je naopak moc nevyužijete).

85 http://naostri.se/ kaushikSTD

Jan Řezáč Web ostrý jako břitva Fáze 3: Návrh webu

111

Designové frameworky Jedním z prvních kroků k návrhu obsahu webu pro vás mohou být designové frameworky. Ty vám dají návod, jak přemýšlet nad návrhem obsahu jednotlivých prezentačních stránek. Chcete, aby vám lidé na určité stránce vyplnili e-mailovou adresu? Tu vám ovšem bez jasného a srozumitelného přínosu skoro nikdo nedá. Proč by se měl váš návštěvník nechat spamovat? Pro získání e-mailu můžete použít framework Registrace:

1. Uvedete jasný a viditelný nadpis, který definuje co návštěvník získá, když vám poskytne e-mail (Získejte ZDARMA 50 stránkové kompendium hojení ran). 2. Rozvedete zásadní konkrétní výhody toho, proč vám má dát e-mailovou adresu (udělá si přehled o tom jak hojit rány, o prevenci, správné stravě pro podporu hojení a 1x měsíčně mu pošlete odkazy na zajímavé články okolo hojení ran). 3. Přidáte poděkování stávajícího odběratele pro zvýšení důvěryhodnosti (s fotografií, celým jménem a uvedením věku dle demografie cílové skupiny webu). 4. Uvedete jasnou a viditelnou výzvu k akci (formou výzvy a nikoliv v trpném rodě – získejte kompendium již dnes). 5. Vše podpoříte grafikou (např. obrázek knihy – kompendia).

Konverzní poměr s použitím výše uvedené struktury informací bude mnohonásobně vyšší, než kdybyste dali na web pouze formulář. Designové frameworky opět odkazuji v literatuře na konci kapitoly.

112

Jan Řezáč Web ostrý jako břitva Fáze 3: Návrh webu

Návrh informační architektury Návrh informační architektury a navigace webu je samostatný a rozsáhlý obor – nejlepší je začít knihou od pánů Morvilleho a Rosenfelda uvedenou níže. Pár tipů ode mě:

⟶⟶ Používají klient a návštěvníci webu stejný jazyk? ⟶⟶ Jaký obsah potřebujete na webu mít? ⟶⟶ Podle jakých kritérií budete seskupovat obsah webu? ⟶⟶ Podle jakých kritérií budete řadit obsah webu? ⟶⟶ Budou lidé často přecházet mezi různými kategoriemi? ⟶⟶ Jak lidé hledají obsah dnes? Budete mít k dispozici klasifikační analýzu klíčových slov 86?

Pozice webu v cestě uživatele V tuto chvíli byste už měli vědět, jaká bude pozice webu v byznysu klienta. V praxi to znamená, že na něj odněkud budou chodit návštěvníci a na základě své činnosti na webu budou pokračovat na další místa, kde se mohou potkat s klientovým brandem. Na webu pravděpodobně budou probíhat nějaké konverzní akce, které budou mít pro klienta přínos jen v případě, že jim budou předcházet jiné aktivity a akce, které na webu neovlivníte. Proberte je s klientem a ukotvěte web vzhledem k jeho pozici v klientově marketingovém mixu. Pomůže vám to lépe naplánovat průchody uživatelů webem a přinesete klientovi další přidanou hodnotu tím, že ho upozorníte na možná úskalí jeho služby (např. že potřebuje mít rozpočet na skvělý hromadný e-mailingový systém, protože jinak je mu sbírání e-mailů k ničemu).

Jan Řezáč Web ostrý jako břitva Fáze 3: Návrh webu

86 Marek Prokop: Jak se dělá a k čemu slouží klasifikační analýza klíčových slov http://naostri.se/klasifikacni

113

Průchody návštěvníka webem Smyslem této metody (anglicky task flows) je zmapovat, jak budou lidé procházet webem. V případě, že máte za sebou uživatelský výzkum, tak pouze rozpracujete motivace návštěvníků do konkrétních sekvencí stránek.

1.

Lidé budou mít určité motivace, se kterými na web přijdou a které jste už zmapovali v rámci výzkumu. 2. Lidé přijdou z externího marketingového kanálu na konkrétní stránku webu, pravděpodobně to nebude úvodní strana webu. 3. Lidé projdou určitou sekvencí stránek – důležitá zde není hierarchie, ale návaznost stránek mezi sebou vzhledem k cíli návštěvníka. 4. Návštěvníci v ideálním případě provedou nějakou konverzní akci. Díky task flows budete schopni přemýšlet o širším mentálním nastavení návštěvníka při návrhu obsahu jednotlivých stránek webu. Některé návaznosti stránek pochopíte intuitivně (průchod objednávkou v e-shopu), jiné navrhnete na základě výstupů z uživatelského výzkumu a obecných modelů chování lidí.

Mapa obsahu webu Mapa obsahu webu (Website Content Map) je moje vlastní metoda, jak si ulehčit přemýšlení nad obsahem webu. Vytvořte si mindmapu a začněte do ní přidávat stránky, které by z vašeho současného pohledu měl web mít. Stránka je velmi nepřesný pojem (nemusí to být nutně samostatné URL) – řekněme, že jde o sekce, které se budou na webu vyskytovat a některé z nich budou zároveň i samostatné stránky. Ke každé stránce si udělejte poznámku:

⟶⟶ Cíl stránky, ⟶⟶ co chceme návštěvníkovi říct – jakou pro něj máme na stránce zprávu, ⟶⟶ co by měl návštěvník na stránce udělat.

114

Jan Řezáč Web ostrý jako břitva Fáze 3: Návrh webu

Příklad: O nás ⟶⟶ Cíl: Podpořit důvěryhodnost služby v očích zákazníka. ⟶⟶ Zpráva: Máme za sebou skoro 100 let vývoje, víme co děláme. ⟶⟶ Akce: Přejít na ohlasy spokojených zákazníků. Jestliže dáte každé stránce jasný smysl, jednoduše odfiltrujete všechny, které smysl nemají nebo na něj nemůžete přijít. Následně doplňte k jednotlivým stránkám obsah, kterým zařídíte, aby byl splněn cíl stránky, návštěvník získal zprávu, kterou mu chcete předat, a provedl požadovanou akci. Obsah rozepište až na úroveň konkrétních slov, které se budou na stránce vyskytovat. Nestačí vědět, že na hlavní straně bude nadpis, potřebujete vědět jaký konkrétní nadpis. Mapa obsahu webu je místo, kde se stýká návrh webu a copywriting. Nejsem copywriter, ale dávám copywriterům zadání formou svých velmi konkrétních textů (a grafikům prostřednictvím proškrtnutých boxů… které ale opět velmi konkrétně popíšu). Copywriter pak může pracovat s velmi konkrétní představou, a nikoliv se zadáním à la „tady budou tři hlavní benefity”. To byste nemuseli poznávat klienta či návštěvníky webu! Mapa vám pomůže definovat strukturu webu a konkrétní obsah jednotlivých stránek, který následně můžete vizualizovat pomocí skic a prototypu. Ale základ máte ujasněn a máte co kreslit.

Jan Řezáč Web ostrý jako břitva Fáze 3: Návrh webu

115

Jak nepřistupovat k obsahu webu Chyba č. 1: Vytvořte web s výplňovými texty a obrázky, které v budoucnu doplní klient. V takovém případě brzy zjistíte, že rozložení webu a jeho obsah k sobě nesedí a bude potřeba je změnit. Tento krok spolehlivě pohřbí sebelepší webový projekt.

Chyba č. 2: Dejte na web texty z katalogů a letáků, které už klient používá jinde. Psaní pro web je velmi specifická disciplína, na kterou potřebujete dodatečné vzdělání nebo zkušeného webového copywritera Do webového copywritera se vyplatí investovat vždy – web bez čtivých a srozumitelných textů nedokáže efektivně předávat vaše sdělení.

Chyba č. 3: Ušetřete za fotografa a dejte na web fotky z fotobank. Lidé ignorují fotky z fotobank 87. Buď budou vaše fotografie autentické, nebo je na web nedávejte vůbec. 87 http://naostri.se/ nielsenphotos

116

Jan Řezáč Web ostrý jako břitva Fáze 3: Návrh webu

Tvorba prototypu webu má tři fáze: skicování, wireframy a prototyp. V rámci prototypu navrhnete rozložení obsahu a jeho priority na jednotlivých stránkách webu. Ty pak vzájemně provážete. Je tedy možné projít klíčové interakce návštěvníka s webem a výstup otestovat.

Skicování Skicování je levná a rychlá metoda, která vám pomůže generovat nápady. Vezmete si papír a tužku a začnete si kreslit. Obsah a smysl už máte ujasněn, teď je potřeba je převést ho do velmi hrubé vizuální podoby. Skicování vám umožňuje vyhnout se prvoplánovitým nebo zcela chybným řešením. Udělejte si ke každé stránce webu několik skic. Skicujte v malém – třeba 6-8 skic na A4ku a zkoušejte možná rozložení obsahu webu. Další velká výhoda skic spočívá v tom, že umožňují vytvářet nápady v týmu – skicovat může každý a všichni chápou, že skica je skica a nikoliv grafický návrh. Jestliže pracujete s kolegou grafickým designerem, skicujte spolu.

Jiří Sekera: Na začátku může být pohled na prázdný list papíru depresivní. Začněte úplně čimkoliv, kdekoliv, odkudkoliv a zkoušejte co nejvíc variant vás napadne. Cílem není hned napoprvé načrtnout optimální finální řešení, ale levně a rychle zkoušet různé varianty, třídit si myšlenky a experimentovat.. Od malička nás učili, že chybovat je špatně – v případě skicování je každý zmačkaný papír v koši cennou zkušeností a často i symbolem ušetřeného času a peněz za nákladný vývoj nedomyšleného nápadu.

3. Prototypování

Jiří Rusňák: Používám formát A6. Jedna A6 = jeden nápad (pro storyboardy používám A4, kterou čarami rozdělím na A7). Když řeším základní principy nebo koncepty, používám něco s hodně tlustým hrotem (fix) – to mi totiž nedovolí kreslit detaily, protože s tím to prostě smysluplně nejde, a zaměřuji se tak pouze na to důležité. Tužkou nebo propiskou doplňuji pouze nejnutnější vysvětlující popisky. Až když mám vyřešené koncepční věci, můžu,pokud to má smysl, začít kreslit detailnější skici tužkou nebo propiskou – to už se ale dost blížím k wireframům.

Jan Řezáč Web ostrý jako břitva Fáze 3: Návrh webu

117

Ukazujte skici ostatním členům týmu a probírejte s nimi rozpracované rozvržení stránek – pochopí ho spíše než mapu obsahu webu a dostanete zpětnou vazbu předtím, než se vrhnete na náročnější části procesu.

Wireframy

Jednou mi klient vyčetl, že grafický návrh webu je stejný jako wireframy. Použil jsem totiž při jejich tvorbě jeho logo a korporátní barvu, takže mezi wireframy a grafickým návrhem nebyl výrazný kontrast (vy byste poznali rozdíl na první pohled, ale laik nutně nemusí). Od té doby nedělám wireframy v barvě a s fotografiemi, dokonce do nich nedávám ani logo klienta.

Cílem wireframů je rozvrhnout obsah jednotlivých stránek webu, které můžete odprezentovat klientovi, a on je pak může předat dodavateli svého webu. Skici můžete také ukázat klientům, ale bez slovního komentáře jsou prakticky nepřenositelné. Z drátěného modelu by mělo jít jasně vidět:

⟶⟶ Jaký obsah bude na dané stránce. ⟶⟶ Jakou bude mít vizuální prioritu. ⟶⟶ Jak bude rozvržen a jaké budou vztahy mezi jednotlivými částmi obsahu. Wireframe je podklad pro grafickou interpretaci webu – čím zkušenější grafický designer je, tím více si může dovolit wireframe přeskládat a významněji ho interpretovat. Ale priority a obsah by měly být víceméně totožné. Uvažujte o wireframu jako o kostře, na kterou v budoucnu natáhnete kůži (grafický design) – což ale neznamená, že webový grafik vybarvuje vaše wireframy. Při návrhu wireframů už máte dostatečnou představu, jaký obsah bude na webu. Nemá tedy smysl používat výplňové texty typu lorem ipsum – raději použijte obsah stávajícího webu (či webu konkurence). Osobně píšu texty do jednotlivých wireframů, které pak slouží jako podklad pro copywritera (to nemá smysl u delších textů, tam při absenci jiných zdrojů využijte výplňové texty 88).

Prototyp Slovo prototyp může mít různý význam. V kontextu této knihy se jedná o wireframy provázané odkazy. Primárním cílem prototypu je vytvořit prostředek pro komunikaci s klientem nad budoucím webem. Prototyp si na rozdíl od wireframů může proklikat, vyskakují v něm skrytá menu, je možné odeslat formulář – je z něj tedy výrazně jasnější, jak se web bude skutečně chovat. Pro agenturní/freelance návrh webu je prototyp jedním z klíčových momentů, kdy se láme chleba, a dobře navržený a odprezentovaný prototyp může rozhodnout o realizaci celého projektu a naopak. Klienti nejsou v roce 2014 na proklikávací prototypy webů zvyklí, a tak můžete management klienta velmi pozitivně překvapit. A to až tak,

118

Jan Řezáč Web ostrý jako břitva Fáze 3: Návrh webu

88 Představu, že copywriter napíše texty a já je pouze umístím do wireframů, jsem vzdal už před lety. Stejně tak málo copywriterů, se kterými jsem spolupracoval, zvládá navrhnout strukturu obsahu webu.

že se někdy ani nezmůžou na slovo. Výhody prototypu jednoznačně převažují těch pár minut, kdy budete propojovat jednotlivé wireframy mezi sebou. Prototypování stojí na stejných principech, jako tvorba grafických návrhů, a proto byste měli mít alespoň základní znalosti grafického designu. Bez nich se může snadno stát, že grafičtí designeři budou muset zcela překopat vaši ideu a budou s vašimi výstupy pracovat jen s krajní nechutí. Úroveň interaktivity prototypu je plně závislá na jeho účelu – pro prezentaci klientovi stačí některé části popsat slovně (u ikonky se objeví po najetí myši vysvětlující text), pokud budete chtít prototyp podrobit uživatelskému testování, vyplatí se dotáhnout jeho obsah a funkčnost alespoň do takové podoby, aby vám testování k něčemu bylo (lidé budou při testování mnohem citlivější na výplňové texty než váš klient). Prototyp je potřeba po vytvoření vyvážit se všemi informacemi, které o projektu do této chvíle máte, a okomentovat ty části, které jste se rozhodli neprototypovat. Prototyp je jen částečný pohled na řešení a vždy vyžaduje trochu představivosti. ⟶⟶ Porovnejte prototyp se záměrem klienta – má pro klienta smysl? ⟶⟶ Projděte si dokumentaci uživatelského výzkumu a svoje poznámky – odpovídá prototyp očekáváním návštěvníků webu? ⟶⟶ Porovnejte jednotlivé stránky prototypu mezi sebou – jsou tam opakující se vzory, nebo je to každý pes jiná ves? Následně si dejte pauzu a prototyp si projděte ještě jednou za pár dnů. Díky odstupu najdete pro některá sporná místa lepší řešení. Prototyp nikdy neposílejte e-mailem klientovi, který není na tento postup z vaší předchozí spolupráce zvyklý. Doporučuji prototypy prezentovat vždy osobně.

Mobile First Při tvorbě wireframů a prototypů se mi osvědčila metodika Mobile First a současné vytváření mobilní, tabletové a desktopové varianty každé stránky. Ušetříte si tím spoustu práce oproti případu, kdy navrhujete pouze desktopovou variantu a mobilní verzi necháte na grafikovi či koderovi a zároveň vytvoříte jednodušší a použitelnější weby i pro desktop. Knihu s metodikou Mobile First odkazuji na konci kapitoly.

Jan Řezáč Web ostrý jako břitva Fáze 3: Návrh webu

119

4. Grafický návrh webu Při návrhu vizuální podoby webu (tedy toho, čemu všichni obvykle říkají design) je nutné udržet své ego na uzdě a přemýšlet. Je velice jednoduché sklouznout k tomu, že člověk navrhuje web, který se mu líbí, nikoliv web, který bude fungovat. Líbivost je poplatná trendům, nehledí na rámec klienta, projektu či lidí, kteří budou na web chodit. Mnoho lidí má pocit, že grafický design je subjektivní a každý na něj má vlastní názor. Grafický design ale není o názoru, ale o tom, zda podporuje přínosy projektu či nikoliv. Je velmi vhodné, aby se klient s výsledkem ztotožnil (koneckonců ho platí), ale nečekejte od něj jinou zpětnou vazbu než líbí/nelíbí. Váš klient není odborník na webdesign, může jít o jeho první či druhý web v životě a nemá ponětí o tom, zda je vámi dodaný výstup dobrý nebo špatný. Pokud budete hledat zpětnou vazbu na svou práci pouze u klientů, během několika let spláčete nad výdělkem – skutečnou zpětnou vazbu dostanete jen důsledným měřením faktického výkonu vašich projektů a/nebo prostřednictvím zkušenějšího webdesignera (částečně vám pomohou i marketéři nebo management, ale třeba z hlediska grafického designu jen webdesigner). Doporučuji vám tedy aktivně vyhledávat zpětnou vazbu – a pokud není v okolí nikdo tak dobrý jako vy, hledejte ji v zahraničí. Kooperaci se zkušenějšími doporučuji především proto, že si můžete velmi rychle uvědomit skutečné chyby webu, jejich příčiny a důsledky, a začnete se posouvat řádově rychleji než doposud. V rámci grafického designu existují prošlapané cesty, kterými je vhodné se ubírat před tím, než se vrhnete do křovisek a začnete se probíjet grafickou džunglí sami. Tyto cestičky jsou zdokumentované, popsané a můžete se od nich odrazit před vlastním bádáním. Dávám zpětnou vazbu grafickým designerům už několik let a setkávám se se stále stejnou neznalostí základních grafických principů. Pro grafický design potřebujete talent a trpělivost. Bez talentu se nikdy nedostanete na špici, na druhou stranu i bez něj můžete vytvářet vysoce funkční weby (z mého pohledu je talent 5%, zbytek je píle). Klíčové je, že ve webdesignu nikdy nelze oddělit grafický design, interakční design a obsah webu – ten, kdo se o to pokusí, se stává pouhým dekoratérem. Proto jsou tvůrci wireframů, kteří netuší o grafickém designu, řádově znevýhodněni oproti lidem, kteří si prakticky prošli tvorbou grafických návrhů. Stejně tak jsou tradiční grafičtí designeři znevýhodněni před lidmi, kteří ovládají interakční design a dokážou navrhnout obsah webu. Webdesign je obtížnější disciplína, než tradiční grafický design 89.

89 Plakáty, loga a tak vůbec.

120

Jan Řezáč Web ostrý jako břitva Fáze 3: Návrh webu

Nepodceňujte grafický design Grafický design je místo, kde se láme váš příští chleba – klient nebude chtít další web, pokud se mu tento nebude líbit. To samozřejmě není všechno. Kvalitní grafika podporuje pozici značky, zvyšuje důvěryhodnost webu a zvyšuje tolerantnost návštěvníků k chybám. Atraktivita webu je důležitá pro jeho obchodní výkon a pokud vám někdo tvrdí, že lidé grafické ztvárnění nevnímají, snaží se jen maskovat svou neschopnost dodat odpovídající výstup. Druhou stranou mince je, že se klient často soustředí JEN na grafický design 90, který je sice důležitý, ale bez interakčního designu a obsahové strategie váš projekt skončil ještě před spuštěním. Grafický design má svých nepostradatelných 20%… zbylých 80% obstarají interakční design a obsah webu.

Jak se dívat na grafický návrh webu Na grafický návrh webu se můžete dívat z různých úhlů:

⟶⟶ Grafický návrh se mi líbí/nelíbí. ⟶⟶ Grafický návrh je/není postaven dle aktuálních trendů. ⟶⟶ Grafický návrh stojí/nestojí na principech grafického designu a typografie. ⟶⟶ Grafický návrh podporuje pozici značky klienta. ⟶⟶ Grafický návrh předává zprávu, kterou chceme, aby si návštěvník odnesl. ⟶⟶ Grafický návrh funguje vzhledem ke konverzním akcím. Laik se dívá na grafiku optikou líbí/nelíbí. Jako technický dozor se dívám na návrh pomocí principů grafického designu a brand klienta. To, zda grafická interpretace předává tu správnou zprávu návštěvníkům nebo podporuje konverze, většinou nezjistíte bez analýzy chování návštěvníků na webu či testování grafického návrhu 91.

90 Tedy konkrétně grafický návrh hlavní strany. 91 Testování návrhů popisuji v následující kapitole.

Jan Řezáč Web ostrý jako břitva Fáze 3: Návrh webu

121

Grafický rámec projektu Při každém návrhu webu vyjděte z kontextu, který web obklopuje. Typicky nastává situace, kdy:

⟶⟶ Klient má logotyp a grafický manuál. ⟶⟶ Existují letáky, katalogy, billboardy, vizitky, ilustrace, fotografie, barvy, rastry, motivy apod., které budou s webem vizuálně provázány. Ideální je v takovém případě kooperovat úzce s grafickým designerem klienta a vytvořit web jako součást celku. Klient už může mít nějaké weby. Pokud nemá být váš web základem nového vizuálního stylu, je velmi vhodné vycházet při tvorbě nového webu i ze stávajících webů klienta. Neříkám kopírovat, říkám vycházet. Může se stát, že váš grafický návrh bude odmítnut, protože nesedne do klientova grafického rámce. Druhý extrém je, že klient nemá nic, a začínáte na zelené louce. V takovém případě doporučuji nechat tradičního grafického designera položit základ klientova vizuálního stylu, a pak na jeho práci navázat a vzájemně kooperovat. V naší zemi vím v době psaní knihy asi o desítce grafických designerů, kteří umí navrhovat skvělé logotypy, tiskoviny a zároveň i skvělé weby, ale většina obojí nezvládá. Grafický design pro webdesignery by vydal na samostatnou knihu, kterou jsem se tentokrát rozhodl nenapsat, takže vás alespoň odkážu na aktuální literaturu.

122

Jan Řezáč Web ostrý jako břitva Fáze 3: Návrh webu Mašek Tomáš » , ,

Jan Řezáč Web ostrý jako břitva Fáze 3: Návrh webu

123

Odneste si z kapitoly

Jděte od smyslu webu ke smyslu jeho částí a pak teprve rozmýšlejte konkrétní obsah a skicujte, ideálně v týmu. Grafický design je nedílnou součástí návrhu webu a bez dobrého grafika se vám budou weby tvořit jen obtížně. Při návrhu obsahu webu vám pomůže framework Avinashe Kaushika See-Think-Do, který 124

zjednodušeně popisuje celý nákupní cyklus, designové frameworky a Maslowova pyramida. Brainstormujte a neupínejte se k prvnímu řešení, které vás napadne. Při přemýšlení nad obsahem vám mohou pomoci myšlenkové mapy.

125

Literatura Pro začátečníky budou mít největší přínos knihy Submit Now nebo Web Anatomy, které dávají základ pro přemýšlení nad návrhem obsahu webu.

Metody a proces Dan M. Brown: Communicating Design, 2010 Základy tvorby dokumentace pro weby. Jesse James Garrett: The Elements of User Experience, 2010 Základy návrhu webu. Robert Hoekman Jr.: Designing the Obvious: A Common Sense Approach to Web Application Design, 2006 Základy filosofie návrhu webových aplikací.

Peter Morville, Louis Rosenfeld: Information Architecture for the World Wide Web: Designing Large-Scale Web Sites, 3rd Edition, 2006 Základy návrhu informační architektury webu. Scott McCloud: Understanding Comics: The Invisible Art, 1994 Jak se tvoří komiks. Luke Wroblewski: Mobile First, 2011 Krátká a přelomová kniha o přístupu k mobilnímu webu.

Návrh obsahu webu Colleen Jones: Clout: The Art and Science of Influential Web Content, 2010 Základy návrhu přesvědčivého obsahu webu. Andrew Chak: Submit Now: Designing Persuasive Web Sites, 2002 Návrh obchodně úspěšných webů, byznys pohled na webdesign – starší, ale velice dobrá kniha.

126

Robert Hoekman Jr., Jared Spool: Web Anatomy: Interaction Design Frameworks that Work, 2009 Designové frameworky, které vám pomohou lépe a rychleji navrhovat obsah webů. Chip Heath, Dan Heath: Made to Stick: Why Some Ideas Survive and Others Die, 2007 Framework pro předávání nápadů užitečný pro návrh webových prezentací.

Jan Řezáč Web ostrý jako břitva Fáze 3: Návrh webu

Susan Weinschenk: 100 Things Every Designer Needs to Know About People, 2011 Základy psychologie pro webdesignery.

Janice Redish: Letting Go of the Words, Second Edition: Writing Web Content that Works, 2012 Copywriting pro web.

Obsahová strategie Kristina Halvorson: Content Strategy for the Web, 2009 Bible obsahové strategie pro web.

Erin Kissane: The Elements of Content Strategy, 2011 Pokud jste četli několik knih o obsahové strategii, tak vám tato může pomoci vyplnit pár mezer.

Grafický návrh webu Khoi Vinh: Ordering disorder, 2010 Kniha o mřížce a její aplikaci na webu. Robert Bringhurst: The Elements of Typographic Style, 2002 Typografická bible.

Edward Tufte: Envisioning Information, 1990 Principy vizualizace informací. Timothy Samara: Making and Breaking the Grid: A Graphic Design Layout Workshop, 2005 Kniha o layoutu plná příkladů mimo web.

Jill Butler, Kritina Holden, William Lidwell: Universal Principles of Design, 2003 Přehled designerských principů a jejich dopadů.

Jan Řezáč Web ostrý jako břitva Fáze 3: Návrh webu

127

Vážená paní Nováková, jsem rád, že se vám prototyp líbí. Příští týden provedeme uživatelské testování, při kterém prověříme i jeho uživatelskou přívětivost pro budoucí návštěvníky.

128

129

analýza formulá checklisty uživatelské testování

fáze4: eva guerillové testování použitelnosti uživatelské testování dle kruga testování užitečnosti testování grafického designu eyetracking 130

Jan Řezáč Web ostrý jako břitva Název kapitoly

ulářů

a/b testování

workshop kritické zpětné wazby

evaluace expertní zpětná vazba heatmapy kliků průchody uživatelů webem Jan Řezáč Web ostrý jako břitva Název kapitoly

131

Cílem této fáze je ověřit, zda jste si v předchozích fázích nevystavěli vzdušné zámky…

7 Cílem této fáze je ověřit, zda jste si v předchozích fázích nevystavěli vzdušné zámky, a vylepšit vaše aktuální řešení na základě zpětné vazby. Jen díky zpětné vazbě na vaši práci si můžete vybudovat skutečnou intuici, zda něco bude nebo nebude na webu fungovat. Evaluaci můžete realizovat v různých formách a na různých úrovních podle toho, jak jste daleko v procesu návrhu webu. Je rozdíl mezi tím, kdy chcete testovat použitelnost nebo přesvědčivost vašeho webu. Pro většinu forem testování vám nebude stačit prototyp, který je z poloviny naplněn lorem ipsum a proškrtanými obdelníky. Testovat můžete kvantitativně (máte velký vzorek lidí) nebo kvalitativně (máte jich jednotky). Část metod lze provést online, část pouze offline. Při volbě metod hrají roli omezení projektu a to, co chcete otestovat/ vylepšit. Nejčastěji pravděpodobně využijete neformální kvalitativní uživatelské testování dle Kruga v kombinaci s některou z dlouhodobějších online metodou (analýza Google Analytics, heatmapy kliků 92,…).

[baf!]

92 Zobrazení míst, na která lidé klikají na stránce.

Jan Řezáč Web ostrý jako břitva Fáze 4: Evaluace

133

134

Jan Řezáč Web ostrý jako břitva Fáze 4: Evaluace

Uživatelské testování Uživatelské testování spočívá v tom, že zadáváte lidem úkoly, které na webu plní a nahlas je komentují. Pro testování už potřebujete mít alespoň něco hotovo – ačkoliv je možné testovat skici, je vhodné mít připravený alespoň prototyp naplněný základním obsahem webu. Testování může být velmi vhodný politický nástroj, když potřebujete přesvědčit konkrétní členy klientova týmu k tomu, aby dali zelenou úpravám webu. Má také velmi kladný dopad na programátory, kteří díky němu změní pohled na uživatele webu. Musí ho ovšem vidět osobně. Je dobré si uvědomit, že při testování pravděpodobně přijdete jen na zlomek chyb celého webu 93. Na druhou stranu i zlomek je lepší než žádné testování. Více o uživatelském testování zjistíte v knize Steva Kruga, kterou uvádím na konci kapitoly. Díky testování získáte podněty k úpravám webu a těmito úpravami do webu můžete zanést nové chyby. Vyplatí se tedy dělat alespoň dvě kola.

Guerillové testování použitelnosti Sepište si základní scénáře. Jděte do kavárny s notebookem a oslovte někoho, kdo sedí sám, zda by s vámi nestrávil následujících 15 minut 94, protože potřebujete pomoct se svým webem. K notebooku vytáhněte myš a mějte českou klávesnici. Projděte své scénáře metodou dle Kruga. Dělejte si poznámky. Poděkujte. Pozvěte ho 95 na kafe. Máte to za sebou. Jděte najít další subjekt 96. Guerillové testování je levné, rychlé a vyžaduje asertivitu. Hodí se na všechny typy webů, které nejsou vysoce odborné, pro ověření srozumitelnosti rozhraní webu. Nemá smysl testovat intranet pro Komoru auditorů na lidech, kteří nejsou auditoři. Ve většině případů lze použít na otestování použitelnosti a smysluplnosti rozhraní, nikoliv třeba přesvědčivosti vašeho sdělení – lidé pravděpodobně nebudou z vaší cílové skupiny a na webu nebude jeho skutečný obsah. Na počátku testování můžete provést tzv. pětisekundový test – ukažte člověku váš návrh na 5 sekund. Pak návrh skryjte a zeptejte se ho, co si zapamatoval.

Uživatelské testování dle Kruga Když někdo řekne „uživatelské testování”, myslím tím nejčastěji kvalitativní uživatelské testování dle Kruga. Je rychlé, jednoduché, nepotřebujete laboratoř ani oční kameru a přináší hmatatelné výsledky za poměrně nízkou cenu. Spočívá v tom, že vytipujete scénáře, které chcete otestovat, vezmete prototyp nebo hotový web a posadíte k němu cca 3-5 testovacích subjektů 97, kterým dáte konkrétní úkoly. U testování potřebujete člověka, který bude zadávat úkoly a facilito-

Jan Řezáč Web ostrý jako břitva Fáze 4: Evaluace

93 Více viz http://naostri.se/molich 94 Tzn. pravděpodobně nebudete testovat celý web, ale jen jeho část. 95 Nebo ji. 96 Muhehe – no schválně – jak byste nazvali ty lidi vy?

97 Jakob Nielsen: How Many Test Users in a Usability Study? – http://naostri.se/ nousers

135

Jiří Rusňák: Mám vyzkoušené, že když přivedete „problematického” vývojáře na takové testování, celkem rychle pochopí svůj omyl a v některých případech se i stane advokátem zájmů návštěvníků webu.

vat celý proces, a zapisovatele, který si bude dělat poznámky. Tvůrce návrhu by měl být v pozici zapisovatele, aby neměl nutkání navádět člověka, který prochází scénáře, a zároveň získal více vhledů, protože se v návrhu orientuje. Testování můžete nahrávat, ale na nahrávku se podíváte jen málokdy a klient, který není u testování přítomen, se na ni určitě nepodívá. Lze ji ale využít ve chvíli, kdy některý z členů týmu argumentuje proti úpravám. Testujte co nejdříve 98. Testujte opakovaně i to, co opravíte díky testování, abyste odstranili nově zanesené chyby.

Testování užitečnosti V rámci uživatelského testování dle Kruga zjistíte, zda je web použitelný – zda se tedy lidé orientují v rozhraní a jsou schopni ho použít. Pomáhá jim ale plnit jejich cíle? Pomáhá jim při práci? Zvyšuje jejich výkonnost? Užitnou hodnotu webu můžete prověřit testováním užitečnosti (anglicky usefullness testing). To probíhá podobně jako uživatelské testování, ale kromě průchodů rozhraním vedete s uživatelem hloubkový rozhovor a zjišťujete, jak vnímá rozhraní vzhledem k jeho práci. Můžete tak přijít na to, že rozhraní sice dokáže použít, ale mnohem užitečnější by pro něj mohl být např. jiný pohled na stejná data.

Testování grafického designu Grafický design je subjektivní, tvrdí designer ve chvíli, kdy klient nesouhlasí s jeho výstupem. Cílem testování grafického designu (anglicky desirability testing) je zjistit, jak působí na cílovou skupinu. Může vám pomoci ve chvíli, kdy chcete klienta přesvědčit, že jdete správným směrem, popř. když se potřebujete rozhodnout mezi více grafickými styly. Probíhá podobně jako card sorting – účastníci testování přiřazují designům kartičky s pojmy podle toho, jak na ně grafický návrh působí. Alternativa je využít škálu hodnot místo kartiček.

Eyetracking Eyetracking je testování s oční kamerou, které může mít smysl pro dlouhodobé projekty a rozšiřování své vlastní znalostní báze. Hypotézy při něm ověřujete na velkém vzorku lidí v laboratorním prostředí. Velmi pravděpodobně ho nikdy provádět nebudete, ale je vhodné o něm vědět a jednou za čas si projít pár eyetrackingových studií a rozšířit si tak své znalosti.

98 Testovat lze i rozumné náčrtky.

136

Jan Řezáč Web ostrý jako břitva Fáze 4: Evaluace

Checklisty Dobrý checklist je nástroj, který i osamělému webdesignerovi dodá zpětnou vazbu a přiměje ho podívat se na web objektivním pohledem. S checklisty nelze diskutovat a přinutí vás zamyslet se nad dotažením různých detailů. Checklist je seznam bodů, které můžete na webu ověřit – web je buď splňuje, nebo nesplňuje. Pravidla přístupného webu státní správy jsou v podstatě takový checklist přístupnosti. Doporučuji vytvořit a udržovat tyto checklisty:

⟶ Checklist pro váš proces vám pomůže nepřeskočit klíčové aktivity, které uděláte, poté co vám přijde poptávka. Tento checklist vám v průběhu času přejde do krve a přestanete ho potřebovat. Více informací o práci s poptávkou uvádím v jedné z předcházejících kapitol. ⟶ Checklist pro metody vám pomůže především u metod, které nepoužíváte často. Chcete udělat uživatelské testování, a to znamená, že budete muset získat někde lidi, sepsat scénáře, domluvit místo a facilitátora,... Je vhodné mít jeden checklist pro každou metodu. ⟶ Checklist před spuštěním webu – co všechno je potřeba udělat těsně před spuštěním nebo chvíli po spuštění (nakonfigurovat analytics, ověřit duplicity v URL,…).

Během let si vytvoříte svoje vlastní checklisty. Pro ilustraci uvádím jednoduchý checklist postavený na Maslowově pyramidě webdesignu, kterou rozebírám v další části knihy:

1. Smysluplnost Web zapadá do strategie vašeho klienta Web zapadá do života jeho návštěvníků Na webu je nasazen a nakonfigurován nástroj pro měření návštěvnosti, např. Google Analytics 2. Nalezitelnost Jsou naplánovány kanály pro přivádění návštěvníků Web je technologicky přizpůsoben vyhledávačům Title 99 je unikátní pro každou stránku Pro důležité stránky je vyplněna description Je ošetřen duplicitní obsah webu Web má nasazeny Google Webmaster Tools Web obsahuje sitemap.xml Web obsahuje robots.txt 2. Dostupnost Web je dostatečné rychlý 100 Vývoj webu je pokryt testy 101 Chybové hlášky jsou napsány jazykem uživatele Chybové hlášky jsou dostatečně návodné a pomáhají situaci vyřešit Web má přizpůsobenou stránku 404 a 500 Web je zkontrolován linkcheckerem Všechny formuláře webu fungují 3. Přístupnost Kód webu je napsán sémanticky správně Web se zobrazuje v pořádku v základních prohlížečích dle parametrů projektu Web se přizpůsobuje tabletům a lze ho ovládat dotykem Web se přizpůsobuje chytrým telefonům a lze ho ovládat dotykem Web je přístupný bez javascriptu V hlavičce stránek jsou RSS/Atom feedy Web obsahuje tiskové styly

138

Jan Řezáč Web ostrý jako břitva Fáze 4: Evaluace

99 HTML element title.

100 Lze zkontrolovat např. pomocí http://naostri.se/gspeed nebo http://naostri.se/ gtmet 101 Těmi programátorskými. Tudíž bude fungovat, i když na něm něco programátoři za půl roku změní.

4. Použitelnost Web je jednoduše čitelný, text má dostatečnou velikost, kontrast i délku řádku Navigace je jednoduchá a snadno pochopitelná Odkaz z loga směřuje na hlavní stranu Odkazy jsou odlišeny a mají na celém webu jednotný styl Každá stránka webu má hlavní nadpis Web odlišuje navštívené a nenavštívené odkazy Web používá favicon Obsah webu prošel korekturou (odbornou i pravopisnou) Web neobsahuje splash screen Interní vyhledávání webu skutečně vyhledává 5. Důvěryhodnost Web obsahuje adresu a kontakt na provozovatele Grafické ztvárnění webu působí na lidi dle záměru klienta Transakční místa na webu obsahují prvky na podporu důvěryhodnosti 6. Přesvědčivost Web využívá alespoň jeden z principů přesvědčivosti 7. Radost z používání Web obsahuje dodatečné prvky pro motivaci návštěvníků

Tento checklist není úplný ani dokonalý, ale pro ilustraci by vám měl stačit. Checklisty jsou pomůcka perfekcionisty – s nimi odevzdáte skvělé výstupy. Bez nich možná také… ale možná ne.

Jan Řezáč Web ostrý jako břitva Fáze 4: Evaluace

139

Expertní zpětná vazba Zpětná vazba je motorem dobrého designu. Vyplatí se ji získat nejen od návštěvníků pomocí testování, ale i od zkušenějších kolegů nebo technického dozoru projektu. Vyžadujte konstruktivní kritiku vlastní práce od lidí, kteří jsou zkušenější. Jestliže pracujete v týmu, je v něm i  někdo zkušenější nebo alespoň na podobné úrovni, kdo vám dá zpětnou vazbu na vaši práci. Webdesigneři na volné noze to mají těžší, ale i ti mají možnosti, kde získat zpětnou vazbu. Buď si seženou mentora, nebo si zorganizují neformální webdesignerskou skupinu či alespoň proberou design s ostatními webdesignery na diskusním fóru. Expertní zpětná vazba je zcela zásadní pro eliminaci pocitu, že vaše návrhy jsou dokonalé. Vaši klienti vám dají zpětnou vazbu z pohledu svého byznysu, ale v případě grafického designu to bude skoro vždy

140

Jan Řezáč Web ostrý jako břitva Fáze 4: Evaluace

jen líbí/nelíbí. Zkušený webdesigner vám zdůvodní, proč je něco špatně, a pomůže vám se zlepšením nejen výsledku, ale i vašeho vlastního procesu. Např. tím, že položí ty správné otázky typu: “Proč to tam je?”102. Samozřejmě to znamená, že se nejdříve dostane do kontextu projektu, protože cílem zpětné vazby je zvýšit pravděpodobnost, že web bude mít očekávané přínosy, nikoliv pohonit ego.

A/B testování A/B či multivariantní testování je základní online metoda pro kontinuální zlepšování výkonnosti webu. Jeho cílem je zvýšit konverzní poměr. Probíhá tak, že pro určité části webu vytvoříte alternativní varianty a nástroj pro A/B testování pak tyto varianty ukazuje poměrné části návštěvníků. Alternativní varianty vznikají na základě uživatelského výzkumu či využívání modelů 103, nemá smysl testovat náhodně různé barvy tlačítek. Po získání dostatečného množství dat ponecháte tu variantu, která má lepší konverzní poměr. A/B testování lze provádět až od určitého počtu návštěvníků (stovky denně), jinak testy trvají poměrně dlouho. A/B testování je v zásadě mechanická činnost, kterou může s úspěchem provádět i méně zkušený webdesigner.

Heatmapy kliků

102 Kredit za tuto otázku má Lukáš Bob Marvan

Přemýšlíte, zda nějaký element na stránce nepřitahuje nechtěnou pozornost? Nasaďte na web nástroj pro monitoring pohybu myši na webu, který umí vytvářet heatmapy kliků 104. Google Analytics vám ukážou, mezi kterými stránkami lidé přecházejí. Nezjistíte ale, jak se na stránce chovají a kam přesně klikají – a to i na místa, která nejsou odkazy. Pomoci vám mohou nástroje jako je Crazy Egg 105 nebo Mouseflow 106.

Průchody uživatelů webem 103 Třeba LIFT Model od WiderFunnel http://naostri.se/LIFTmodel

Potřebujete zjistit, jak se lidé na webu skutečně chovají? Různé nástroje vám udělají záznam průchodu lidí webem včetně polohy kurzoru – např. ClickTale 107. Nevýhodou je poměrně dlouhý čas, který potřebujete pro samotnou analýzu průchodů, a fakt, že nevíte, s čím na web člověk vlastně přišel.

105 http://naostri.se/ crazegg

106 http://naostri.se/ msflw

Analýza formulářů 104 Mezi pozicí kurzoru a místem, kam se lidé dívají, je cca 80% korelace. http://naostri.se/ mouseeye

Pokud máte na webu formuláře (řekněme delší než dvě pole), hodí se zjistit, zda se lidé na některých polích při vyplňování formuláře nezaseknou a neodejdou. Pokročilou analýza formulářů také nabízí např. ClickTale.

Jan Řezáč Web ostrý jako břitva Fáze 4: Evaluace

107 Více na webu http://naostri.se/clicktl

141

Odneste si z kapitoly

Bez systematického ověřování vlastních výstupů získáte pouze falešnou intuici. Vždy využijte alespoň jednu z metod evaluace, která vás dostane do kontaktu se skutečnými lidmi – checklisty a expertní zpětná vazba jsou pouze doplňkové metody. Testování je mnohem levnější než implementace nesmyslného návrhu, 142 Mašek Tomáš » , ,

který se pak musí draze předělat, a klientovi se prakticky vždy peníze vložené do fáze evaluace mnohonásobně vrátí.

143

144

Literatura Avinash Kaushik: Web Analytics: An Hour a Day, 2009 Základní kniha o webové analytice.

Tom Tullis, Bill Albert: Measuring the User Experience, 2008 Kvantitativní přístup evaluace pro pokročilé.

Avinash Kaushik: Web Analytics 2.0: The Art of Online Accountability and Science of Customer Centricity, 2009 Webová analytika pro mírně pokročilé.

Jakob Nielsen, Kara Pernice: Eyetracking Web Usability, 2009 Závěry z velké kvantitativní eyetrackingové studie.

Steve Krug: Rocket Surgery Made Easy, 2009 Základní kniha uživatelského testování. Kniha vyšla i v češtině jako Nenuťte uživatele přemýšlet! Praktický průvodce testováním a opravou chyb použitelnosti webu, název lze jednoduše splést s prvním dílem, který ale není o testování.

Jan Řezáč Web ostrý jako břitva Fáze 4: Evaluace

145

prezentace návrhu klientovi

jak prezen

146

Jan Řezáč Web ostrý jako břitva Název kapitoly

zentovat?

úpravy na základě rozhodnutí klienta

Jan Řezáč Web ostrý jako břitva Název kapitoly

147

8 Navrhli jste první iteraci webu, zkonzultovali jste výsledek s kolegy, provedli jste uživatelské testování a teď nastal čas představit vaše výstupy klientovi. Prototyp nikdy neposílejte pouze e-mailem – vždy se nad ním s klientem sejděte (na dálku po Skype) a odprezentujte ho pokud možno osobně. Osobní prezentace dává veškeré výhody do rukou vám:

⟶ Osobní kontakt podpoří vaši vazbu s klientem a ten si vás lépe zapamatuje. ⟶ Prezentace vám pomůže celou práci zarámovat do širšího kontextu. ⟶ Naživo zodpovíte první dotazy a ušetříte si e-maily nad nesmyslnými připomínkami. ⟶ Klient získá důvěru ve vaši práci. ⟶ Získáte neocenitelnou zpětnou vazbu pozorováním klientovy reakce na vaši odevzdanou práci.

Jan Řezáč Web ostrý jako břitva Prezentace návrhu klientovi

149

Jak prezentovat 1. Uveďte zadání, ze kterého jste vycházeli (popište problém). 2. Projděte byznys klienta a jeho zákazníky. 3. Ukažte proces, kterým jste prošli. 4. Odprezentujte prototyp s důrazem na to, proč toto řešení přinese očekávané přínosy. 5. Odpovězte na dotazy. 6. Dejte klientovi čas na zpětnou vazbu.

Poslední bod trvá typicky týden nebo déle. Klientovi některé věci dojdou, až se prezentace návrhu usadí, a díky důrazu na celkový obrázek dostanete konstruktivní reakci. Jestliže váš proces neobsahoval uživatelský výzkum a testování nebo jste přeskočili vše, co bylo v knize doposud napsáno, výrazně snižujete důvěryhodnost výsledku – srovnejte sami: ⟶⟶ “Na základě dat z Google Analytics, hloubkových rozhovorů s vašimi zákazníky a několika kol testování vznikl prototyp, který…” ⟶⟶ “Na základě vašeho zadání jsme udělali wireframy…” ⟶⟶ “Tohle je grafický návrh hlavní strany, líbí se vám?”

150

Jan Řezáč Web ostrý jako břitva Prezentace návrhu klientovi

Úpravy na základě rozhodnutí klienta Je to tady. Klient má potřebu mít na webu „něco“. Ideálně „někde konkrétně“. Tedy „na hlavní straně nahoře“ 108. Ve chvíli, kdy má klient požadavek na konkrétní obsah na konkrétním místě, je potřeba jít za tuto potřebu a zjistit klientův záměr (čeho chce dosáhnout tím, že vám říká, jak to má podle něj být), nikoliv jen slepě plnit jeho přání. Vaši klienti jsou vysoce inteligentní lidé, kteří chtějí aby web uspěl. Proto spolupracují s vámi. Často má klientův požadavek dobrý základ a je potřeba ho jen upravit. V tom případě oceníte dvě věci:

1. Jednáte s člověkem, který má rozhodovací pravomoc (není to pouhý zprostředkovatel informace). 2. Prošli jste celý proces návrhu, takže máte jasné argumenty, proč něco dělat a něco nedělat. Je možné, že na základě klientova požadavku se objeví nová skutečnost, kterou bude potřeba zapracovat a určit pro ni prioritu, a na základě toho předělat aktuální návrh webu. Pokud je změna skutečně důležitá, určitě na ni získáte rozpočet. Obecně řečeno je někdy politicky výhodné udělat ústupek, aby klient následně udělal ústupek jinde – třeba ve věci řádově důležitější. Nemá smysl s klientem bojovat o to, kdo bude definovat obsah webu, protože tento boj prohrajete tak jako tak oba (vy nedostanete další práci, klient bude mít demotivovaného webdesignera a pravděpodobně i hůře fungující web). Klient má při tvorbě webu vždy v ruce trumf v podobě platby vaší faktury.

108 Většina bitev se odehrává na hlavní straně. V desktopovém zobrazení webu. Nahoře.

Jan Řezáč Web ostrý jako břitva Prezentace návrhu klientovi

151

Závěr k procesu

Sepište si všechny své metody pro návrh webu na kartičky nebo do dokumentu a při plánování projektu si je projděte a vyberte ty vhodné (vždy alespoň jednu na každou fázi). Ušetříte čas a budete dodávat lepší výsledky.

152

Mým cílem je, abyste rozpoznali rozdíl mezi promyšleným návrhem webu a grafickým návrhem hlavní strany. Laik vidí hlavní stranu, přijde mu jako nejdůležitější, a tudíž poptává její „obarvení”. Webdesigner musí odolat pokušení navrhnout web jako vyleštěnou hlavní stranu (a jednu podstranu) jen proto, že je klient ochoten za takovou práci zaplatit. Pokud jste se setkali s designerským procesem poprvé, dejte mu čas, ať se informace postupně usadí. Weby se nenaučíte navrhovat za týden. Webdesigneři v agenturním prostředí využijí spíše levnější a rychlejší metody s méně iteracemi než týmy v korporacích. Součástí webdesignerova procesu musí být vždy prostor na zkoumání slepých uliček, které najdete jen pomocí iterování. I kdyby to mělo být formou úprav prototypu na základě zpětné vazby dalších členů vašeho týmu. Proces návrhu ze své podstaty nesmí být lineární ani v případě, že jste v agentuře či na volné noze, kde to k linearitě při tvorbě krátkých projektů svádí nejvíce. Investice do webu neroste lineárně – udělat či neudělat uživatelský výzkum může znamenat zdvojnásobení ceny návrhu webu, pořádné otestování také. Výsledný prototyp, který ukážete klientovi, sice může mít stejný rozsah jako ten, který uděláte bez uživatelského výzkumu a testování… ovšem návratnost investice a riziko selhání projektu může být diametrálně jinde. Cenu návrhu webu nelze změřit počtem šablon či wireframů, které klient na konci dostane. Kvalitní designerský proces tvoří základní kámen návrhu webu. V další části knihy se podíváme na webdesign z jiného úhlu pomocí Maslowovy pyramidy webdesignu. Zatímco proces popsaný výše říká, co máte při návrhu webu dělat (horizontální pohled), Maslowova pyramida popisuje, v jakých úrovních se návrhu věnovat (vertikální pohled).

Jan Řezáč Web ostrý jako břitva Prezentace návrhu klientovi

Jan Řezáč Web ostrý jako břitva Prezentace návrhu klientovi

153

vytvoření vazby dostu gamifikace využívání emocí radost z používání

maslowova základní principy pyramida w ovlivňování lidí konzistence oblíbenost sociální schválení nedostatek autorita přístupnost reciprocita zdůvodňování

nalezitelnost

stupnost

smysluplnost

použitelnost přesvědčivost

va webdesignu

důvěryhodnost jednoznačný provozovatel vhodná argumentace ohlasy zákazníků grafické ztvárnění webu pocit bezpečí

Přibližně jednou měsíčně mi přijde nabídka na účast ve výběrovém řízení. Zatím jsem nezažil situaci, kdy bych si řekl – toto je zadání, podle kterého jsem schopen nacenit web. Takže odpovídám protinávrhem – stáhněte toto výběrové řízení a udělejme spolu studii proveditelnosti, ze které zadání vzejde. Většinou se zadavatel neozve a výsledky kritizuji o rok později v médiích.

9 Weby státní správy mohou s klidem končit na přístupnosti, protože přístupnost jim nařizuje platná legislativa. Pokud ovšem chce státní správa podpořit rozvoj turismu ve svém regionu, dostává se do výrazně konkurenčnějšího prostředí. Weby pro podporu turistického ruchu musí na Maslowově pyramidě stoupat až ke hvězdám.

Maslowova pyramida webdesignu je zjednodušený hierarchický model potřeb návštěvníka webu, který odráží různé úrovně webdesignu. Pyramida vám pomůže představit si celou šíři webdesignu. Webdesign stojí na průsečíku technologie, návrhu uživatelského rozhraní, tvorby obsahu, psychologie, sociologie, marketingu a brandingu 109. Pyramida vám může sloužit i jako pomůcka pro určení cenového odhadu pro web. Čím má daný web konkurenčnější prostředí, tím výše musíte vyšplhat v pyramidě, aby měl projekt šanci na úspěch. Takže do něj potřebujete investovat více času a peněz. Stupně pyramidy nelze přeskakovat. Pokud je web pomalý, nemá smysl řešit přesvědčivost. Rovněž neexistují ostré hranice mezi jednotlivými stupni. Zapojte vlastní hlavu! Z Maslowovy pyramidy plyne pro webové projekty nepřekvapivý závěr – bez jasného zadání získá klient zákonitě řádově odlišné cenové nabídky na tvorbu webu, protože různí tvůrci vyšplhají na různé stupně pyramidy. Reakce webdesignerů na poptávky se zadáním „udělejte mi web o 5 stránkách“ jsou tedy obecně nesrovnatelné.

109 Potažmo návrhu hlavních stran webů. Ehm.

Jan Řezáč Web ostrý jako břitva Maslowova pyramida webdesignu

157

Smysluplnost Na začátku každého webového projektu by měla být položena jednoduchá otázka. Proč to vlastně celé děláme? Jaký smysl má naše snažení mít? Bez smyslu nebude mít projekt přínos i v případě, že bude jinak navržený skvěle. Odpovězte si na následující dotazy:

1. Řeší váš web něčí problém? 2. Pálí ten problém dostatek lidí? 3. Jsou za řešení ochotni zaplatit, aby se vám to vyplatilo? Můžete vytvořit krásný web – pokud nebude uspokojovat potřeby určité skupiny lidí, tak je k ničemu. Smysluplnost je místo, kde se web stýká se skutečným světem. Obecně je web smysluplný ve chvíli, kdy je jeho potřeba přímým důsledkem klientovy strategie (opět narážíme na to, že ve chvíli, kdy váš klient nemá jasně definovanou strategii, tak je možné, že web děláte zbytečně). Smysluplný web má naději zapadnout do života klientových návštěvníků a pomoci jim splnit jejich životní cíle nebo alespoň aktuální potřeby. Smysluplnost je na jedné straně problém především vašeho klienta, na druhou stranu – vytvořte pár nesmyslných projektů za sebou a vcelku jednoduše vyhoříte. Tápete v tom, zda projekt bude chtít někdo používat? Zapomeňte na manažerský přístup typu vodopád a přejděte na některou z agilních metodik. Místo tvorby webu od začátku do konce potřebujete rychle a levně ověřit, že jsou vaše hypotézy správné.

158

Jan Řezáč Web ostrý jako břitva Maslowova pyramida webdesignu

í y n b á z v a í v ž í u n o t e s p ř   t o o z s v v t i o t s č n y o d V ad vě od st h s R ře ry lno t P ůvě ite nos t D ouž up nos st t o P řís up ln ost e t t P os zi pln D ale slu N my S Jan Řezáč Web ostrý jako břitva Maslowova pyramida webdesignu

159

Nalezitelnost Web, na který nikdo nechodí, nemůže nikdy fungovat. Kolem nalezitelnosti se točí velká část internetového marketingu, je ovšem škoda, že u nalezitelnosti také spousta internetových marketérů a potulných SEO 110 mágů také končí. Nalezitelnost spočívá v tom, že se vhodní lidé (potenciální zákazníci) dozví o existenci webu a přijdou na něj. Je jedno, zda se jedná o proklik z výsledků vyhledávání, odkaz sdílený přes sociální sítě nebo vizitky obchodního zástupce – všechny mohou posloužit svému účelu vzhledem k cílové skupině webu. Prodejce turbín nepotřebuje rozsáhlé portfolio zpětných odkazů ve chvíli, kdy má po celém světě reálně čtyři zákazníky a se všemi jedná prostřednictvím obchodních zástupců. Na web pak chodí návštěvníci díky webové adrese na vizitce a nikdo jiný web prakticky vidět nepotřebuje. Nalezitelnost má pro vašeho klienta různou prioritu:

1.

Klient získává zákazníky převážně přes web, je potřeba jasná vize a rychlá exekuce marketingové strategie, jinak web skončí spolu s klientem. 2. Klient má zákazníky z různých míst a má stabilní odběratele. Web je pro něj prostředek k růstu a nikoliv nutnost pro přežití. Marketingová strategie je součástí projektu webu, ale nemusí být tak agresivní, jako v prvním případě. 3. Web je pro klienta jen doplňkový nástroj, který využívají obchodníci, popř. web slouží jako vizitka.

Uvědomění si, do které skupiny váš klient patří, vám může pomoci při stanovení cílů webu, strategie jejich dosažení a prioritizaci rozpočtu projektu. Klient za vámi přijde s tím, že potřebuje web. Vy zjistíte, že patří do první skupiny a zároveň netuší, jak se lidé na web dostanou. A projekt buď ztratí smysl nebo bude potřeba zapracovat na marketingu a pak teprve jít dělat web.

110 Optimalizace pro vyhledávače

160

Jan Řezáč Web ostrý jako břitva Maslowova pyramida webdesignu

Nalezitelnost v praxi ⟶

⟶

⟶ ⟶ ⟶

Zamyslete se nad typy potenciálních návštěvníků z pohledu celého nákupního cyklu (opět vám pomůže např. Avinashův framework See-Think-Do). Identifikujte místa (touchpointy), kde se vyskytují (nebo mohou za jistých okolností vyskytovat) lidé, kteří jsou zajímaví pro váš web v různých fázích nákupního cyklu. Touchpointy mohou být online i offline a některé dokonce nemusí existovat předtím, než je vytvoříte. Mimochodem – bez důkladného pochopení komunity lidí, která bude na web chodit, nemůžete určit touchpointy, případně můžete vyplýtvat čas a množství prostředků na špatné. Vymyslete způsoby, jak v rámci daných touchpointů návštěvníky upoutat a přesvědčit k provedení mikrokonverze či konverze. Prioritizujte touchpointy a proveďte takovou soustavu činností, aby se lidé skutečně dostávali na váš web. Monitorujte výsledek a přizpůsobujte monitoringu další aktivity.

Faktická podpora nalezitelnosti se na různých touchpointech výrazně liší z hlediska zdrojů a času, které máte k dispozici. První návštěvníky z PPC reklamy ve vyhledávačích získáte okamžitě, ale budování brandu na Twitteru může trvat roky. Je proto nutné vypracovat pro každý web individuální plán pro podporu nalezitelnosti dle konkrétních cílů a projektových omezení. Tuto práci velmi pravděpodobně přenecháte konzultantovi internetového marketingu. Pro mnoho webů jsou klíčovým zdrojem návštěvnosti vyhledávače a web by jim tedy měl být technologicky a obsahově přizpůsoben. SEO je disciplína, o které bylo na českém internetu řečeno mnoho a mým jediným doporučením je používat hlavu. Odstavce SEO textů vám dnes možná pomohou získat několik nových návštěvníků, ale jen málokterý z nich pak na vašem webu skutečně provede konverzní akci, jestliže ho k tomu váš obsah nedokáže přesvědčit 111.

Jan Řezáč Web ostrý jako břitva Maslowova pyramida webdesignu

111 Viz vyšší patra Maslowovy pyramidy.

161

Dostupnost

Jeden z mých klientů redesignoval web a jeho konverzní poměr se snížil na polovinu. Testováním jsme zjistili, že problém není v novém designu webu, ale ve v mohutné javascriptové mezivrstvě, která nebyla dostatečně optimalizována z hlediska rychlosti. Návštěvníci klienta tedy neodcházeli z webu proto, že by se v novém systému nevyznali, ale proto, že museli po každém kliku čekat na odezvu, která je po chvíli odradila.

Dostupný web je rychlý a nevidíte na něm na první pohled chyby – návštěvník se na něm tedy může pohybovat. Na dostupném webu nenajdete stránky „Error 404 – page not found”, a pokud už návštěvník narazí na chybu, je vysvětlena srozumitelným jazykem a rychle opravena. Jen málokterý klient se podrobně zabývá tím, jak je navržena jedna z dražších částí jeho nového webu (po obsahu tvoří vývoj nebo customizace CMS 112 pravděpodobně nejvyšší položku rozpočtu). Je to dáno tím, že programování nerozumí, takže musí důvěřovat expertům, které si najal. Bez zkušeného oponenta nemá šance poznat, zda se jedná o bastl, nebo kvalitní, modifikovatelný, standardizovaný a otestovaný výsledek (a to často ani na straně dodavatele – account manažer neověří kvalitu kódu, ač o ní bude klienta ujištovat). Klient špatně (a někdy i levně) naprogramovaný web nepocítí hned, ale z dlouhodobého hlediska se může zvláště u větších systémů, které se dynamicky rozvíjejí, jednat o zásadní milník pro úspěch projektu. Od systémové části webu se očekává, že bude rychlá, bezchybná, rozšiřitelná a prakticky neviditelná.

Jak poznáte špatně navržený web 1.

Další příklad budiž jednostránkové portfolio jedné designerky, která nadšeně prezentovala obří screeny (určené pro retina displaye) svých iOS aplikací. Jedinou nevýhodou bylo, že návštěvník viděl prvních 30 sekund pouze obří prázdný prostor bez náznaku toho, že v něm něco fakticky bude (ani nebylo poznat, že tam chybí obrázky, které se teprve načítaly). Většina návštěvníků pravděpodobně její tvorbu nikdy neviděla…

162

Každá úprava bude trvat dlouho a klient za ni tedy zaplatí výrazně více než u dobře navrženého systému. 2. Web bude po každém zásahu někde rozbitý a bude potřeba ho manuálně kontrolovat. Dobře navržený web má automatické testy, které programátora upozorní, že něco není v pořádku. 3. Web bude pomalý. 4. Když klient nakonec ztratí trpělivost a předá systém někomu jiném. Následně zjistí, že se v něm nikdo kromě tvůrce nevyzná, nemá přístup ke zdrojovému kódu a dokonce ani nemá právo ho upravovat.

Kombinace nepochopitelných chyb a pomalého webu odradí po určitém čase kteréhokoliv dlouhodobého návštěvníka a sníží šanci získat nové. Rychlost je na webu stále zcela zásadní faktor – neznamená to, že web nemůže např. obsahovat obří fotografie, ale musí na ně být připraven (např. postupným dočítáním stránky 113, které je pro uživatele jasně pochopitelné). Návštěvník očekává, že web bude okamžitě reagovat na jeho akce,

Jan Řezáč Web ostrý jako břitva Maslowova pyramida webdesignu Mašek Tomáš » , ,

112 CMS je redakční systém 113 Lazy loading

Pro ilustraci významu dostupnosti uvádím sociální síť Friendster. Jeho dnešní kopii (dobrá – alespoň z počátku kopii) – Facebook – dnes zná celý svět. Friendster neskončil na grafickém ztvárnění či nezájmu svých uživatelů – lidé ho používali s obrovským nadšením a Friendster se šířil v populaci rychlostí blesku. Fakticky ho položil obří nával návštěvníků, na který nebyli jeho tvůrci hardwarově připraveni – a návštěvníci s nástupem Facebooku odmítli čekat několik minut na zobrazení stránky. Mark Zuckerberg se z osudu Friendsteru poučil, Facebook byl šířen postupně a s dostatečnou hardwarovou podporou, takže místo totálního kolapsu vytvořil multimiliardové impérium115.

protože není ochoten čekat. Lidé s rychlou pevnou linkou nemají naprosto žádnou trpělivost (trpělivost lidí s mobilem není o moc vyšší). Rychlost a „performance“ webu je tedy nutné monitorovat (třeba pomocí nástroje GTmetrix 114) a optimalizovat. Nepodceňujte význam svého vývojářského týmu a rychlosti webu. Bez kvalitního backendu váš projekt z dlouhodobého hlediska ztroskotá. Rychlost webu je návštěvníky vnímána subjektivně a web lze z designerského hlediska „urychlit“ tím, že člověk vidí, že se něco děje (animujete otevření článku, zatímco ho načítáte na pozadí, v případě delších prodlev zobrazíte indikátor průběhu akce 116…) – 10 vteřin načítání webu bez vidiny pokroku (tedy bez zpětné vazby či jiného podnětu) je věčnost. 10 vteřin, kdy se navštěvník baví nebo alespoň vidí, že se něco děje, nemusí být žádný problém. Rychlost je dokonce možné jen předstírat – např. síť Twitter odeslaný tweet okamžitě zobrazí ve streamu uživatele, ačkoliv ho zatím odesílá na pozadí stránky na server. Ale člověk to nepozná.

Jan Řezáč Web ostrý jako břitva Maslowova pyramida webdesignu

114 GT Metrix najdete na http://naostri.se/ gtmet 115 Phil Simon: The Age of the Platform 116 Progress bar

163

Přístupnost

Základ následující části knihy položil český odborník na přístupnost Radek Pavlíček, za což jsem mu vděčný.

Přístupnost se zkomplikovala nástupem vysoce variabilních mobilních zařízení a opět ji musíte vyřešit předtím, než se vrhnete do vyšších pater pyramidy. Přístupnost by měla být primárně doménou webového kodera 117, který by měl v rámci tvorby webu hlídat, zda se grafický návrh příliš neodklání od zažitých pravidel přístupnosti a dostatečně respektuje variabilitu zařízení. Jako vodítko vám mohou pomoci Pravidla přístupnosti pro weby české státní správy, či některá ze zahraničních metodik, ale veskrze je jejich dodržování jednoduché – pište hezký HTML kód, mějte na webu jasně odlišená místa, kam lze kliknout (dotknout se,…) a dodržujte kontrast. Smyslem přístupnosti je zmírňovat či odstraňovat bariéry na webu tak, aby kladl svým uživatelům co nejméně překážek, a ti jej mohli bez problémů používat a udělat na webu to, proč na něj přišli (přečíst si článek, koupit si zboží či poslat e-mail).

Základní principy přístupnosti

117 Přístupnost je samozřejmě klíčová i pro grafické a interakční designery

118 Jak přístupně strukturovat webové stránky pomocí nadpisů: http:// naostri.se/nadpisy

⟶⟶ Obsah webové stránky je vhodně strukturován pomocí nadpisů. 118 ⟶⟶ Web má dostatečný barevný kontrast písma. 119 ⟶⟶ Text webu je dobře 120 čitelný. 121 ⟶⟶ Web je plně ovladatelný z klávesnice. ⟶⟶ Grafické prvky mají definovanou textovou alternativu. ⟶⟶ Tabulky splňují následující vlastnosti: ⟶⟶ buňky obsahují pouze informace, které spolu logicky souvisí, ⟶⟶ tabulka dává smysl čtena po řádcích, ⟶⟶ složitější tabulka se sloučenými buňkami či vícenásobným záhlaví obsahuje atribut summary a její buňky jsou svázány s jednotlivými záhlavími. ⟶⟶ Každé formulářové pole má vhodný popisek. 122

119 Testování kontrastu barev: http://naostri.se/ contrast-ratio

Přístupnost řešíte především kvůli třem skupinám lidí, kteří budou chodit na váš web. Jsou to nevidomí a handicapovaní, roboti vyhledávačů a návštěvníci s mobilními zařízeními.

164

Jan Řezáč Web ostrý jako břitva Maslowova pyramida webdesignu

120 Průzkum znalostí a chování uživatelů na internetu v ČR: http:// naostri.se/lide11

121 Martin Kopta: Čitelnost písma v pixelech – http://naostri.se/repxpt

122 Použitelné a přístupné webové formuláře: http://naostri.se/ plavacekform

Nevidomí a handicapovaní Přístupnost vznikla kvůli lidem se zdravotním postižením (nevidomí, tělesně či sluchově handicapovaní). Se svým handicapem se většinou vyrovnávají nástroji a asistivními technologiemi 123, které jim pomohou překonat většinu případných překážek, kterou jim HTML koder může na webu zanechat. Handicapovaným návštěvníkům je vhodné se věnovat i v případě, že nejsou členy vaší cílové skupiny – představte si, jaké by to bylo, kdybyste byli na jejich místě. Kromě toho asistivní technologie nejsou všemocné – pokud vám nefunguje nějaký web v mobilu, můžete si jej později prohlédnout na desktopu. Ale nevidomý uživatel analogickou možnost (tj. vrátit si zrak a prohlédnout si web očima v případě, že si s ním neporadí pomocí screen readeru) nemá. Handicapovaní nejsou pouze nevidomí – patří sem také lidé s poruchami vnímání barev a dalšími smyslovými poruchami. V neposlední řadě je vhodné vědět, že úpravy, které kvůli přístupnosti uděláte, nepomáhají jen skupině uživatelů se zdravotním handicapem, ale jejich dopad je mnohem větší 124. Například nadefinované klávesové zkratky pomohou každému, kdo chce web efektivněji ovládat z klávesnice, dostatečný barevný kontrast zlepší čitelnost textu i pro běžné návštěvníky a přístupně vytvořené formuláře se snáze ovládají nejen z klávesnice, ale i pomocí myši.

Roboti vyhledávačů Druhou kategorií návštěvníků, pro které řešíte přístupnost, nejsou lidé, ale roboti vyhledávačů. Ti vidí váš web primárně jako textovou stránku (Google penalizuje weby, které mají nahoře na stránce bannery 125, takže ji nevidí jenom jako text). Roboti vyhledávačů potřebují hezky napsaný HTML kód (well-formed) a obsah s textovou alternativou. Pro roboty je rovněž důležitý soubor robots.txt, kterým můžete vyloučit stránky z vyhledavačů, a mapa celého webu sitemap.xml, která zjednodušuje robotům orientaci na stránkách.

Jan Řezáč Web ostrý jako břitva Maslowova pyramida webdesignu

123 Screen readery (čtečky/ odečítače obrazovky), softwarové lupy, hmatové zobrazovače, speciální klávesnice, hlasové ovládání, atp.

124 Přístupnost není charita: http://naostri. se/pristupnost-charita

125 http://naostri.se/ gpenalty

165

Návštěvníci s mobilními zařízeními Třetí a největší kategorii tvoří návštěvníci s mobilním zařízením – telefonem či tabletem 126. Jejich počet roste a bude pravděpodobně růst nadále na úkor desktopů. Tito návštěvníci vyžadují především:

⟶ layout optimalizovaný pro jejich zařízení, ⟶ dostatečně velké odkazy, na které lze kliknout prstem, ⟶ přizpůsobení obsahu webu vzhledem k jejich aktuálnímu kontextu (hledám na webu adresu kanceláře a mobilní verze webu mi hned na homepage nabídne mapu s vyznačenou cestou ke kanceláři).

Jestliže nemáte o existenci „mobilního webu“ tušení, rychle si zaplňte mezery – návrh webů s vysokou variabilitou zařízení je budoucnost webdesignu. Bez ohledu na nástup displayů s vyšším rozlišením budou mít mobily a další zařízení screeny ergonomicky přizpůsobené lidem. Bude pro ně tedy potřeba vytvářet responsivní či zcela samostatný layout. Pro rychlý vstup na pole mobilního webu uvádím vybrané poučky, které jsem sesbíral z různých zdrojů, především od Luka Wroblewskiho:

126 Nebo dokonce s chytrými brýlemi či hodinkami.

1. Web musí být správně uspořádán ⟶⟶ Vždy je zobrazen nejdříve obsah, pak teprve navigace ⟶⟶ Součástí hlavičky webu jsou odskoky na navigaci / přihlášení / vyhledávání ⟶⟶ V rámci navigace je odskok zpět (nahoru) na stránku ⟶⟶ V patičce je přepínač na standardní zobrazení webu (existují uživatelé, kterým mobilní verze prostě nesedne) 2. Web musí být rychlý 127 ⟶⟶ Neobsahuje přesměrování stránek ⟶⟶ Používá CSS sprites 128 ⟶⟶ Kaskádové styly / javascript jsou v jednom souboru a jejich kód je minifikován ⟶⟶ Postupné nahrávání obsahu ⟶⟶ Canvas místo obrázků 3. Web musí mít výrazné a dostatečně velké aktivní prvky ⟶⟶ Prst klikne na oblast cca 9x9mm ⟶⟶ Důležitá tlačítka a tlačítka blízko okraje displaye jsou větší ⟶⟶ Web musí mít mezi aktivními prvky mezery ⟶⟶ Okolo aktivních prvků je neviditelná oblast, na kterou lze kliknout 4. Web je nezávislý na stavech po najetí myší ⟶⟶ Formuláře jsou přizpůsobeny chování mobilních prohlížečů ⟶⟶ Popisky formulářů musí být umístěny nad příslušnými poli, nikoliv vedle nich – mobilní telefony často formuláře přiblíží a popisky vedle polí nejsou vidět ⟶⟶ Pole formulářů jsou semanticky označena – uživateli se tedy zobrazí při zadávání e-mailu upravená klávesnice pro e-mail

Jan Řezáč Web ostrý jako břitva Maslowova pyramida webdesignu

127 Rychlost výrazně ovlivňuje použitelnost webů na mobilech – pokud je web pomalý, tak to obecně zhoršuje jejich vztah k brandu provozovatele. Pomalý web obecně zhoršuje vztah lidí k brandu provozovatele. http://naostri.se/ slowdmg 128 Více obrázků v rámci jednoho velkého obrázku, které pozicujete pomocí CSS

167

Použitelnost Použitelný web neháže návštěvníkovi klacky pod nohy. Návštěvník se v něm zorientuje a je schopen provést rychle to, proč na web přišel – ví, kde je, kam může jít a na co lze kliknout. Použitelnost můžete měřit rychlostí provedených akcí a množstvím chyb, které návštěvník udělá při užívání webu. Součástí použitelnosti je i snadnost konzumace obsahu návštěvníkem – použitelný web je pro návštěvníka srozumitelný a návodný. Vyšší metu použitelnosti tvoří intuitivnost – tzn. web odpovídá návštěvníkovým fyzickým a mentálním predispozicím. Rozdíl mezi použitelností a intuitivností je přibližně takový, že mapu můžete ovládat pomocí růžice (což je použitelné a lidé se rychle naučí klikat na šipky, aby se mapa pohnula) nebo tahem myši/prstu (což je intuitivní). Z hardwarového pohledu je dnes standard používat pro ovládání počítače myš (a lze se to poměrně rychle naučit), ale intuitivní je používat prsty a přímé dotyky na obrazovce. Součástí použitelnosti je i praktická aplikace typografie a teoretických principů, které umožní návštěvníkovi v lepší orientaci na webu, a aplikace návrhových vzorů, které návštěvníkovi zjednodušují používání webu. K použitelnosti patří také dobře navržená informační architektura webu a vhodně zvolené priority obsahu při návrhu jednotlivých stran. O použitelnosti je toho napsáno mnoho – je to základ, od kterého se potřebujete při návrhu webu odrazit (přístupnost a dostupnost za vás z velké části vyřeší HTML koder a programátoři). Nedá se přeskočit, nedá se obelstít a má jednoznačný dopad na obchodní úspěch webu. Stejně tak není nijak složitá, pár stovek pravidel a použitelný web je na světě. Možná proto je na některých webech vidět, že použitelnost už přestala webdesignera bavit a snaží se o rádoby inovativní přístup. Inovace bez použitelnosti nebude nikdy fungovat. Nepokoušejte se inovovat uživatelské rozhraní dříve, než pochopíte principy, na kterých stojí vnímání lidí, a tudíž i použitelnost.

168

Důvěryhodnost Důvěryhodnost webu je založena na psychologických principech a především na využití tisíce let starého umění rétoriky. Důvěryhodný web je autentický, prověřený a garantuje výsledky. Důvěryhodnost je předpoklad pro úspěšnou transakci – na nedůvěryhodných webech se jednoduše žádné konverzní akce neuskuteční. Pro podporu důvěryhodnosti je potřeba uvést na webu dostatečné množství informací, které webdesigner podpoří odpovídajícím grafickým ztvárněním.

Jednoznačný provozovatel Z webu musí být na první pohled jasné, kdo za ním stojí. Ze zákona 129 musí být na obchodním webu uvedeny plné fakturační údaje provozovatele a živnostenský úřad vám může udělit pokutu při jejich absenci. Bez informací o provozovateli webu, či s nedůvěryhodným provozovatelem (např. firmou se sídlem v daňovém ráji), část lidí dopředu odradíte od libovolné konverzní akce.

Vhodná argumentace Důvěryhodnost vašeho klienta můžete podpořit tím, že uvedete jasné podpůrné argumenty pro jeho schopnost doručit zákazníkům slibované přínosy. Jedná se zejména o:

⟶ velká čísla – stovky úspěšných projektů, desítky lidí v týmu, ⟶ certifikace – od účasti na školeních až po ISO 130, ⟶ členství v asociacích – profesní asociace, komory, či další instituce, ⟶ reference či případové studie, které dokládají schopnost řešit podobné projekty pro podobné klienty, ⟶ přednášky a odborné publikace – pokud klient publikuje či přednáší, je to rozhodně plus, ⟶ podpora neziskových organizací – dodává lidskou tvář byznysu, ⟶ neznámou značku se vyplatí podpořit silnými brandy partnerů, pokud nějaké má.

Jan Řezáč Web ostrý jako břitva Maslowova pyramida webdesignu

129 Zákon č. 513/1991 Sb., obchodní zákoník, §13a (nejsem právník, za aktuální legislativní stav v době, kdy čtete tuto knihu rozhodně neručím) 130 na jednom webu mám uvedenou i potápěčskou licenci

169

Ohlasy zákazníků Lidé obecně důvěřují všem ostatním lidem, kromě provozovatele webové prezentace 131. Jestliže tedy návštěvníci webu neznají váš brand/produkt, pak je vhodné se zaštítit autentickými ohlasy vašich zákazníků. Tyto ohlasy budou fungovat v případě, že:

⟶⟶ budou autentické – několik málo negativních ohlasů pomůže dát punc důvěryhodnosti těm pozitivním, ⟶⟶ lidé se budou moci identifikovat s osobami, které ohlas poskytly – je tedy vhodné uvést o autorovi ohlasu maximum informací (celé jméno, město, věk, fotku, firmu, pozici,…).

Grafické ztvárnění webu Existují dva přístupy podpory důvěryhodnosti prostřednictvím grafického ztvárnění webu:

1. Web je viditelně „old school” a působí autenticky. 132 2. Web je špičkově graficky propracovaný a viditelně vyčnívá. Vyvarujte se čehokoliv mezi. Buď potřebujete špičkový design, protože zapadá do marketingové strategie klienta, nebo je pro vás autentické nevypadat free-cool-in a místo nejnovějších trendů bude grafické ztvárnění minimalistické či zastaralé – ne-li žádné. Pokud klient nemá peníze na špičkového designera, tak je raději investujte do obsahu. Grafický návrh od průměrného grafického designera vás zařadí mezi masu všech ostatních webů, které jsou neutrálně vyleštěné, nudné a plné fotek z fotobank. Pro většinu webů této skupiny stačí koupit za pár dolarů šablonu a přizpůsobit ji grafickému stylu klienta. Grafický design je rozsáhlá kapitola webdesignu – laik bohužel kvalitu nepozná, průměrný webdesigner ji nedoručí. Mám rád kvalitní grafický design – má významný vliv na obchodní účinnost webu, ať už díky aeshetic-usability efektu 133, lepší návodnosti a orientaci návštěvníka na webu, navození těch správných emocí a pocitů,… jenže většina webových grafiků ho v roce 2014 v ČR nedodá. Už jsem se více než jednou setkal s názorem (a před mnoha lety jsem ho měl také), že grafický design není důležitý. Webové studio tímto tvrzením pouze maskuje, že nemá dostatečně dob-

170

Jan Řezáč Web ostrý jako břitva Maslowova pyramida webdesignu

131 Spool: Web Anatomy

132 http://naostri.se/ uglywww

133 http://naostri.se/ AEeffect

rého grafického designera. V lepším případě váš web díky špatnému přístupu ke grafickému designu spadne do kategorie „old school”, v horším skončí v šedi neutrálně vyleštěného průměru.

Pocit bezpečí Důvěryhodnost webu je vhodné v některých momentech umocnit tím, že vizuálně podpoříte pocit bezpečí. Typicky při placení online je vhodné těsně vedle formuláře, kam člověk zadává číslo platební karty, umístit informaci, že je to bezpečné 134, vše je zaštítěno důvěryhodnou autoritou, spojení je šifrované SSL (a skutečně ho mít šifrované),… Web musí odpovídat na dotazy svých návštěvníků – co se stane s číslem mé kreditní karty? Je tato transakce bezpečná? Komu prodáte můj e-mail? Bez odpovědí na tyto otázky je často zmařeno množství konverzí, které by jinak proběhly.

134 http://naostri.se/ checksec

Přesvědčivost Webová prezentace by se měla chovat jako zkušený obchodník, který využívá lidské chování tak, aby prodal. Dostupný, přístupný, použitelný či důvěryhodný web nijak nenutí člověka k transakci, zatímco schopný obchodník je schopen na ulici prodat komukoliv téměř cokoliv. Přesvědčivý web aplikuje principy ovlivňování lidí tak, aby zvýšil pravděpodobnost uskutečnění transakce a při jejich využívání webdesigner narazí na tenkou hranici mezi ovlivňováním a manipulací. Lidské chování se dá využít ke spoustě dobrého (jak pro vaše návštěvníky, tak vaše chlebodárce), ale zároveň můžete lidi dotlačit k věcem, kterých budete vy i oni litovat. Je na etickém cítění každého z nás, do jakých projektů se pouští a jaké zakázky přijímá. Prostřednictvím webu můžete ovlivnit miliony lidí a během krátké doby udělat svět lepším… nebo horším. Rozhoduje jen vaše vlastní svědomí. Moje zkušenost je taková, že lidé manipulaci vycítí a už se nikdy nevrátí. Zatímco ovlivňováním se jim snažíte usnadnit volbu a pomoci jim tak, aby pro sebe zvolili to nejlepší, manipulace slouží k jejich obalamucení. Lidé, kteří mají pocit, že je s nimi manipulováno, svou negativní zkušenost velmi rychle roznesou do světa. A váš klient prodělá.

Základní principy ovlivňování lidí O lidském rozhodování je potřeba vědět minimálně dvě věci:

1.

Lidé se nerozhodují racionálně – rozhodnutí probíhá na nižších úrovních než je logika, roli hrají emoce a podvědomí… a ačkoliv je mozek usilovně zkoumán, o rozhodování zas tak moc nevíme. 2. Lidé mají omezené mentální a časové zdroje – není to myšleno jako urážka, ale jako vědecky ověřený fakt. Každý z nás má určitou mentální kapacitu a čas, který je ochoten investovat do rozhodování. Často tedy při rozhodování využíváme mentální zkratky, ačkoliv logické by bylo vzít všechny dostupné informace, provést jejich analýzu a teprve poté se rozhodnout.

Když děláme rozhodnutí, často se rozhodujeme na základě jedné konkrétní zdůrazněné vlastnosti produktu nebo konkrétního podnětu, který aktivuje některý ze spouštěčů, které máme v hlavě. Zkratky, které provádíme při rozhodování, jsou odvozeny od několika principů. Tyto psychologické principy pak můžeme využít pro návrh webu – stejně

172

Jan Řezáč Web ostrý jako břitva Maslowova pyramida webdesignu

jako je využívají úspěšní obchodníci. Všechny taktiky obchodníků mají společnou jednu věc – když o nich někomu řeknete, tak pokývá hlavou a oznámí vám, že to je sice hezké, ale na něj to nefunguje. Že chápe, že na normální lidi to má určitě vliv – zvlášť když je to tak hezky vědecky prokázáno, ale on je jiný. Lepší. Inertní. A ono ne. Principy popsané níže vás ovlivňují i v případě, že o nich víte. Znalost principů a taktik vám umožní se bránit, ale systematickému podvědomému nátlaku neodolá nikdo. Jednáme podle společenských pravidel, která jsou tu odnepaměti. O jaké principy se jedná?

Konzistence Konzistentní lidé jsou vnímáni jako inteligentní a důvěryhodní, naopak nekonzistence mezi slovy a skutky často způsobuje nedůvěryhodnost a někdy i pocit, že má dotyčný mentální poruchu. Lidé odvozují svůj vlastní obraz o sobě na základě svých skutků, takže je stačí ve správnou chvíli drobně ovlivnit a princip konzistence se postará o zbytek. Nesmírná síla potřeby vnitřní konzistence spočívá v drobných krůčcích – když člověk udělá něco malého (podepíše petici), tak to ovlivní jeho obraz o něm a on se začne postupem času chovat dle tohoto nového obrazu, aniž by si byl vědom celého procesu změny. Na webu můžete princip konzistence využít formou anket, petic, lajkování, soutěží,… kterými zahájíte proces změny.

Oblíbenost Nejsme všichni na stejné startovní čáře. Krásní lidé mají sociální výhody, o kterých se nám průměrným ani nesní. Pro většinu populace existuje mentální zkratka „hezký člověk = dobrý člověk“. Hezcí dostávají nižší tresty, jsou spíše voleni do funkcí, lidé jim více pomáhají, jsou přesvědčivější a ostatní předpokládají, že mají lepší vlastnosti než ve skutečnosti mají. Líbivost není ovšem jen o fyzické kráse – lidé mají rádi i lidi, kteří:

⟶⟶ jsou jim podobní (oblečení, minulost, názory,…), ⟶⟶ jsou na jejich straně (proti šéfovi, korporaci,…), ⟶⟶ chválí je (i když je to jen účelové a falešné). Ukažte na webu, že jste na straně lidí, kteří kupují vaši službu, a nechte se profesionálně nafotit (a vyretušovat).

Jan Řezáč Web ostrý jako břitva Maslowova pyramida webdesignu

173

Sociální schválení 95 % populace jsou imitátoři a řídí se tím, co dělají ostatní – to je důvod, proč mají marketéři tak rádi nálepky „nejpopulárnější“ a „nejprodávanější“ – dává to jasnou mentální zkratku pro lidi, kteří budou imitovat dav. Jestliže jsme nejistí, pak děláme to, co dělají lidé, kteří se nám podobají – proto např. fungují protikuřácké programy na středních školách především ve chvíli, kdy je dělají středoškoláci (ostatní se s nimi mohou ztotožnit, protože jsou jako oni sami). Na webu vidíme aplikace sociálního schválení denně. Mnoho webů využívá ohlasy lidí na produkty či služby. Jestliže se lidé, kteří ohlas napsali, dostatečně podobají mě a zároveň je jich dost, tak se rozhodnu na základě jejich názoru.

Nedostatek Nedostatek vyvolává pocit ztráty svobody – dnes se ještě můžeme svobodně rozhodnout pro daný produkt, ale v budoucnu je díky jeho nedostatku tato svoboda ohrožena. Takže jednáme a nakupujeme. Důležité je, že nedostatek zvyšuje atraktivitu produktu pouze z hlediska pocitu vlastnictví – vytváří potřebu produkt koupit, nikoliv ho pak využívat. Cokoliv nedostatkového je najednou zajímavé, i když to předtím pro vás nemělo skoro žádnou hodnotu. Platí to obzvláště ve chvíli, kdy se jedná o nedostatek na základě vysoké poptávky a (záměrně) malé produkce – kdo sleduje mánie okolo produktů Apple, ten ví, o čem mluvím.

174

Jan Řezáč Web ostrý jako břitva Maslowova pyramida webdesignu

Autorita Lidé jsou díky autoritě schopni zajít skoro kamkoliv. Více než polovina populace dokáže umučit zcela neznámého člověka elektrickým proudem. Stačí, když vedle nich stojí osoba ve vědeckém plášti a říká jim, co mají dělat, protože odpovědnost je v jejich hlavě přenesena na danou osobu 135. Autorita se stává skutečnou nikoliv na základě nějaké objektivní příčiny či pověření – stačí domnělý symbol autority. Typicky to může být vhodné oblečení (uniforma, vědecký plášť či oblek). Jako příklad jednoduše získatelného symbolu autority si představte vysokoškolský titul. Lidé s titulem jsou nejen více vážení a málokdo se s nimi dokáže bavit normálně nebo dokonce s nimi nesouhlasit (vždyť je to profesor!). Zaštiťte svůj produkt symboly autority. Patří sem certifikace, ocenění, vyjádření autorit či známých lidí k produktu.

Reciprocita Všichni lidé vrací své dluhy, ať už skutečné nebo domnělé – a na tom funguje princip reciprocity. Já udělám něco pro vás, vy uděláte něco pro mě – a to v rozsahu ± 1000 % původní služby. Na reciprocitě je zajímavé to, že všechny trumfy jsou v rukou člověka, který pro vás ať už vědomě nebo nevědomě něco udělá – on určuje místo, čas i způsob odměny. Princip reciprocity využívá mnoho firem online – jejich reklama či informační web vám něco přinese a vy na základě tohoto přínosu příště zvolíte (mnohdy podvědomě) konkrétní značku.

Zdůvodňování Pusťte mě prosím ke kopírce, protože si potřebuji něco okopírovat.

Předpokládejme, že něco chcete. V případě, že svou žádost zdůvodníte (kouzelným slovem PROTOŽE), tak jí bude vyhověno mnohem pravděpodobněji, než když zůstane nezdůvodněna. Důvod může být banální a nemusí obsahovat žádnou informaci navíc. V případě zdůvodňování totiž nejde ani o obsah zdůvodnění, ale o jeho přítomnost. Slovo „protože” je spouštěč, díky kterému vám lidé vyhoví – podvědomně a bezmyšlenkovitě.

135 Podrobnosti o Milgramově experimentu najdete na http://naostri.se/milgrex

Jan Řezáč Web ostrý jako břitva Maslowova pyramida webdesignu

175

Radost z používání Většina vašich zákazníků bude chtít, aby byl web používán „jednoduše“, vy se můžete snažit dodat ještě něco lepšího, tedy aby byl web používán „rád“. Jak docílit toho, aby lidé rádi používali váš web a byli motivováni k tomu se na něj vracet?

Gamifikace Gamifikace není sbírání virtuálních odznáčků či bodů (ačkoliv to může být její součástí) – je to strategická činnost, která podporuje určité chování vašich návštěvníků na základě psychologie a uplatňování herních principů. Gamifikace může na webu podpořit, aby lidé dělali určité činnosti. Osobně se do gamifikace sám nepouštím a raději najímám odborníky. Pro většinu webových prezentací se investice do gamifikace spíše nevrátí, ale u webových aplikací může gamifikace představovat konkurenční výhodu.

Využívání emocí Vizuální komunikace je primárním nástrojem pro nastavení emocionálního vyznění webu. Emoce jsou na webu důležité z několika důvodů:

⟶ Lidé si spíše zapamatují web, se kterým mají spojenou emoci (ideálně by měla být kladná, to že budou lidé naštvaní, když web nebude dělat to, co od něj čekají, je sice také emoce, která pomůže zapamatovatelnosti, ale takovou úplně nepotřebujeme). ⟶ Lidé budou spíše mluvit o webu/službě, kterou si zapamatují.

Emoce můžeme vhodně podpořit nejen designem, ale i tónem textů a prací s avatary. Avatar je v pojetí webdesignu postavička, která na webu zastupuje daný brand/službu/výrobek a usnadňuje návštěvníkovi dialog s webovou stránkou, potažmo takový dialog navazuje. Avatara úspěšně používá např. služba Mailchimp, která pomáhá rozesílat hromadné personalizované HTML emaily. Mailchimp došel s avatarem až tak daleko, že nemusí mít logotyp – všichni si ho pamatují jako „emaily s opicí“. Na rozdíl od jeho konkurentů – např. Campaign Monitor jsem musel chvíli hledat a rozhodně si jeho název nepamatuji.

176

Jan Řezáč Web ostrý jako břitva Maslowova pyramida webdesignu

Vytvoření vazby

.

Nejvyšší metou Maslowovy pyramidy je vytvoření vazby mezi webem a jeho návštěvníky. Web zapadne do života lidí, kteří ho používají tak silně, že se na něj vrací, mluví o něm a doporučují ho svým známým, takže se stávají ambasadory vašeho projektu a brandu navenek. Předpokladem vytvoření vazby je dokonalé pochopení lidí – ať už v případě webových aplikací, tak i u webových prezentací, které prodávají skvělé produkty skvělým způsobem. Facebook i Twitter změnily miliony vztahů a lidé na nich tráví obrovské procento svého času každý den (uživatelům daných sítí to zjevně naplňuje některou z jejich potřeb). Stejně tak to může být skvělá ToDo aplikace, jízdní řády, hodnocení restaurací, či oblíbený blog…

Jan Řezáč Web ostrý jako břitva Maslowova pyramida webdesignu

177

Proč to není jedno

„Vytvořit dyzajn houmpejdže, nakódit HáTéeMeLko a hodit to ven” stačilo před deseti lety. A stačí to i dnes v případě, že se nepotřebujete „moc snažit“ a o váš produkt je tak extrémní zájem, že se prodává sám. Čím větší konkurenci máte, tím výše musíte v Maslowově pyramidě zajít a tím lepší web musíte vybudovat. 178

Odneste si z kapitoly

Validní HTML je na Maslowově pyramidě proklatě nízko. Úspěch většiny webů závisí na vyšších patrech pyramidy, k tomu ale potřebujete skvěle zvládnout ta nižší. Nižší patra jsou především o technologii, vyšší jsou o psychologii.

179

Literatura Nalezitelnost Viktor Janouch: Internetový marketing, 2010 Jediná kniha, kterou mi k internetovému marketingu doporučil Marek Prokop.

Přístupnost Přístupnost na Zdrojak.cz, http://naostri.se/pristupnost Články převážně Radka Pavlíčka o základech přístupnosti.

Poslepu, http://naostri.se/poslepu Blog Radka Pavlíčka o přístupnosti a asistivních technologiích.

Použitelnost Matthew Linderman, Jason Fried: Defensive Design for the Web, 2004 Základy použitelnosti pro chybové hlášení, formuláře a další kritická místa na webu.

Jef Raskin: The Humane Interface, 2000 Principy použitelnosti od tvůrce Macintoshe. Neřeší weby, ale obecně aplikovatelné principy návrhu rozhraní.

Eric Reiss: Usable Usability, 2012 Principy použitelnosti v rámci přehledné struktury, kterou Eric vymyslel a popsal.

Giles Colborne: Simple and Usable Web, Mobile, and Interaction Design, 2010 Čtyři způsoby, jak zjednodušit uživatelské rozhraní demonstrované na praktických příkladech.

Vytvoření vazby Joshua Porter: Designing for the Social Web, 2008 Návrh webu pro sdílení a zapojení návštěvníků.

180

Phil Simon: The Age of the Platform: How Amazon, Apple, Facebook, and Google Have Redefined Business, 2011 Inspirujte se od nejzásadnějších online platforem dneška.

Jan Řezáč Web ostrý jako břitva Maslowova pyramida webdesignu

Důvěryhodnost a přesvědčivost Z hlediska literatury máte v zásadě 3 možnosti: 1. Populárně-naučná literatura 2. Učebnice a texty pro studenty psychologie 3. Původní vědecké články a knihy Většina níže uvedených knih patří do 1. kategorie – nejsme psychologové, ale webdesigneři. Na druhou stranu, pokud dokážete přečíst Hardmana a téma vás skutečně zajímá, skočte rovnou do původních pramenů. Najdete v nich více než v běžně dostupné literatuře. Jestliže nemáte s přesvědčivostí žádnou zkušenost, začněte s Cialdinim a jeho Zbraněmi vlivu. Susan Weinschenk: Neuro Web Design: What Makes Them Click?, 2009 Psychologie pro začínající webdesignery – jednoduché čtení, které poskytuje souvislosti. Susan Weinschenk: How to Get People to Do Stuff, 2013 Taktiky ovlivňování lidí v praxi. David Hardman: Judgment and Decision Making: Psychological Perspectives, 2009 Psychologie rozhodování – učebnice pro studenty.

Radost z používání Aarron Walter: Designing for Emotion, 2011 Kniha od šéfa UX týmu v Mailchimpu. Stephen P. Anderson: Seductive Interaction Design, 2011 Motivování lidí online.

Robert B. Cialdini: Zbraně vlivu, 2012 Základy principů přesvědčivosti. Paul Adams: Grouped: How small groups of friends are the key to influence on the social web, 2011 Základní principy sociálních sítí. Chip Heath, Dan Heath: Made to Stick: Why Some Ideas Survive and Others Die, 2007 Framework pro předávání vašich nápadů ostatním.

Kevin Werbach: For the Win: How Game Thinking Can Revolutionize Your Business, 2012 Krátký úvod do gamifikace. Daniel H. Pink: Drive: The Surprising Truth About What Motivates Us, 2011 Základní principy motivace a sebemotivace.

Jan Řezáč Web ostrý jako břitva Maslowova pyramida webdesignu

181

kdy začít s webdesign webdesign není...

kdo je webd

webdesign neí umění webdesign není řemeslo webdesign není tiskový design webdesign není it

te ko pr po

webdesign prof znalosti a dovednosti práce s klienty

perfek

etika a webdesign 182

Jan Řezáč Web ostrý jako břitva Název kapitoly Mašek Tomáš » , ,

ux konzultant signem? ux designer webový grafik koder / front-end bdesigner? developer teorie nebo praxe? komunikační dovednosti projektové řízení postoje

profesionálně čekání na godota

fekcionismus či preciznost máte svých 50 % není 50 % jako 50 % bod fáá Jan Řezáč Web ostrý jako břitva Název kapitoly

183

Karel Novotný: Amatér dělá, co chce, kdy chce. Profesionál dělá, co chtějí, kdy chtějí. A je za to rád. 137

184

Jan Řezáč Web ostrý jako břitva Webdesign profesionálně

10 Následující kapitola obsahuje myšlenky pro webdesignery, kteří se rozhodli věnovat webdesignu profesionálně. Píšu ji z pohledu webdesignera na volné noze. Profesionalitu je nutné vyřešit ve chvíli, kdy začnete nabízet svou práci za finanční odměnu. Profesionalita nezávisí na tom, v jakém pracovně-právním poměru vystupujete – jestliže poskytujete služby za odměnu (pracujete), pak jste buď profesionál (což vaši klienti/zaměstnavatel očekávají), nebo diletant (což se projeví záhy). Je tedy vhodné se na samotné poskytování práce připravit – protože na vaší profesionalitě bude záviset váš dlouhodobý úspěch, rozvoj a cesta k mistrovství bez ohledu na to, kolik vám je let, jaký máte psychický či fyzický stav a kolik toho vlastně o své práci víte. Mnoho mých kamarádů začalo dělat webdesignery na volné noze a skončili. Skončili proto, že ve webdesignu nejsou peníze, není tam práce, je to příliš těžké či naopak nezajímavé a nedá se to zvládnout. Fakticky ovšem nebyli na podnikání na volné noze připraveni a šok byl natolik velký, že raději přešli pod křídla větších firem (což nemusí být nutně špatně). Pokud jdete na volnou nohu, je vhodné být profesionál každým coulem.

137 Zábavná poznámka Karla Novotného na jednom z jeho seminářů.

Jan Řezáč Web ostrý jako břitva Webdesign profesionálně

185

Kdy začít s webdesignem? Ideální začátek výuky webdesignera je z mého pohledu na střední škole – nejpozději však ve dvaceti letech života. Důvodem je, že středoškoláci nemusí živit sebe sama ani svou rodinu, a pokud jste v situaci, kdy musíte vydělávat peníze každý měsíc, budete mít výrazně těžší a delší začátky. Webdesign totiž kombinuje několik unikátních faktorů, které mohou začátečníky nucené k finančnímu zisku zničit už v zárodku:

⟶⟶ Vytvořit první HTML stránku lze v řádu hodin, ⟶⟶ klient nepozná kvalitu na první pohled, ⟶⟶ obecně mají klienti-laici o webdesignu velmi zkreslenou představu a odsouhlasí vám často cokoliv, ⟶⟶ klienti jsou ochotni za weby platit, ⟶⟶ začínající webdesigner netuší, kolik toho neví.

Je tedy velmi jednoduché vstoupit do odvětví a zároveň jsou lidé, kteří vám zaplatí alespoň něco i za mizerné výstupy. Takže se vždy najde množství lidí, kteří se titulují webdesignery a nabízejí svou práci za finanční odměnu bez ohledu na její kvalitu – což je z dlouhodobého hlediska zničí. Nejlepší klienti jsou ti dlouhodobí a těm vašim možná bude trvat nějaký čas, než zjistí, že jste mizerní – ale přijdou na to. Středoškoláci mají rodiče, kteří je živí, a naději, že je budou živit i celou vysokou školu. To jim poskytuje odklad před nutností vydělávat peníze. Proto mají čas na to, aby se naučili skutečnému webdesignu, který je naznačen v celé této knize – a který je určitě ještě košatější, než jak ho dnes vidím já. S webdesignem lze začít za 2 hodiny, ale fakticky o něm budete něco málo tušit zhruba po 3-5 letech každodenní práce. Neříkám – nabízejte svoje služby za peníze nejdříve po 3 letech tvorby, ale raději si nechte prostor pro překvapení, která vám mohou dosavadní zažitou představu o webdesignu přeházet.

186

Jan Řezáč Web ostrý jako břitva Webdesign profesionálně

Znalosti a dovednosti Webdesign se vyvíjí a rozpíná. Ještě v roce 2002 bylo možné být špičkovým grafikem, copywriterem, account manažerem a programátorem zároveň, dnes se musíte úzce specializovat, abyste mohli odvádět práci v odpovídající kvalitě. To dělá webdesign obtížným, ale zároveň zábavným. Rozhodně se jako webdesigner nebudete nudit. Zásadním objektem webdesignerova zájmu je člověk a lidská společnost jako celek – chování lidí má zásadní dopady na úspěšnost webových projektů libovolné velikosti. Na počátku své kariéry se možná budete zabývat grafickým designem či jazykem HTML, ale velice rychle zjistíte, že o bytí a nebytí projektu rozhoduje spíše strategie, psychologie a uspokojování lidských potřeb. A úspěch projektů vašich klientů rozhoduje o vašem příštím denním chlebu. Jako profesionál nemusíte nutně kreslit ty nejlepší weby na světě nebo mít zaručený proces pro návrh nejlepší informační architektury, ale měli byste k tomu alespoň směřovat. O znalostech a dovednostech – tedy tvrdé podstatě webdesignerovy práce – je většina této knihy. Jako klíčové vnímám, aby měl webdesigner dostatečný přehled o tom, co ještě neví, a neustále posouval své dovednosti a znalosti.

Teorie nebo praxe? Studie a z nich odvozené poučky vám mohou pomoci při návrhu obsahu a uživatelského rozhraní a z mého pohledu jsou zcela zásadní pro kontinuální vzdělávání webdesignera. Na jednu stranu vám mohou pomoci navrhnout lepší obsah a uživatelské rozhraní, na druhou stranu ale nenahrazují skutečný kontakt s klientovou cílovou skupinou. Z odborných studií často lze udělat některé analogie pro vaše aktuální projekty a pomoci vám pochopit budoucí návštěvníky webu, a tudíž snížit riziko selhání projektu. Mezi vhodné zdroje určitě patří: 1.

Nielsen-Norman (alertbox 138, studie a doporučení na základě kvantitativních výzkumů), 2. vědecké články z oboru interakčního designu (Wichita State Univerzity,…), 3. E-consultancy (jejich studie obsahují mnoho zajímavých a předzpracovaných informací), 4. Baymard Institute (e-shopy a e-commerce), 5. Coursera (prakticky vysoká škola online), 6. Udemy (kurzy všeho druhu), 7. UIE User Experience Training Library (placená videa o UX, ale s 30 dny zdarma), 8. Treehouse (online placená videa), 9. Interaction Design Association (asociace interakčních designerů, spousta materiálů), 10. Interaction Design Foundation (knihy, videa a mnoho dalšího).

Jan Řezáč Web ostrý jako břitva Webdesign profesionálně

138 Blog Jakoba Nielsena

187

Při používání studií a principů je ovšem nutné používat hlavu. Ne každá studie je dostatečně odborná, takže se omezte na takové zdroje, které mají renomované autory a smysluplný základ 139. Stejně tak každá studie není vhodná pro váš projekt. Je potřeba vnímat nejen výsledky studie, ale i prostředí, ve kterém byla prováděna.

139 Třeba kvantitativní uživatelské testování či eyetracking.

188

Jan Řezáč Web ostrý jako břitva Webdesign profesionálně

Komunikační dovednosti Schopnost vidět svět pohledem svého komunikačního partnera a vcítění se do něj patří mezi zásadní dovednosti webdesignera. Jako profesionální webdesigner budete komunikovat s lidmi – se svým týmem, manažery, klienty (často generálními řediteli či jednateli firem) a jejich zákazníky nebo potenciálními zákazníky. Až se svou prací skončíte, zůstane po vás na základě vašich komunikačních schopností pocit uvnitř lidí, se kterými jste pracovali. Tento pocit bude vytvořen především na základě emočně silných momentů vaší spolupráce. Dojem klienta z vaší práce a její faktický výsledek se mohou výrazně lišit, ale obojí má své místo.

⟶⟶ Dojem klienta je podstatný pro to, abyste dostali další práci – buďte člověk, se kterým je radost spolupracovat. ⟶⟶ Nejde to ale ani bez skvělého výsledku, protože pak se nebudete posouvat dále se svými schopnostmi a dříve nebo později vás práce přestane motivovat.

Nepleťte si ovšem schopnost komunikovat a schopnost přikyvovat. Jednou za čas vás s klientem čeká i konverzace typu „váš byznys nebude fungovat“ – a pokud je klient zvyklý na to, že pouze plníte jeho přání, můžete velmi výrazně narazit.

Jan Řezáč Web ostrý jako břitva Webdesign profesionálně

189

Projektové řízení Profesionální webdesigner doručuje výsledky. Znamená to, že dokáže uřídit alespoň sebe sama a své projekty. Především webdesigneři na volné noze musí mít základy projektového řízení. Vašeho klienta nezajímá vaše snaha něco vytvořit, ale to, zda jste to vytvořili nebo ne, za dohodnutou cenu, v dohodnutém čase a kvalitě. Vymlouvat se můžete kamarádům u piva, klientům musíte doručit výsledky. Základy projektového řízení jsem naznačil v kapitole o práci s poptávkou, pokud máte zájem o hlubší vhled, zkuste např. některý z kurzů společnosti Shine 140 nebo Miru Vlacha 141.

140 http://naostri.se/ shinecz

141 http://naostri.se/ mvlach

190

Jan Řezáč Web ostrý jako břitva Webdesign profesionálně

Postoje

Kdybych psal tuto knihu pro peníze, tak už toho nechám dávno. Motivuje mě možnost zlepšit obor webdesignu a baví mě se sebevzdělávat prostřednictvím psaní této knihy. Nemám žádnou touhu na knize prodělat, ale peníze prostě nejsou při mé hodinovce za návrh webů motiv ke strávení tisíců hodin vzděláváním potenciální 144 konkurence ;-).

Máte dostatečně propracované tvrdé dovednosti a jste člověk, se kterým je radost pracovat? Dokážete si pokecat s prodavačkou a o pár hodin později odprezentovat výsledky uživatelského výzkumu řediteli nadnárodní korporace? Poslední oblast, ve které je vhodné se posouvat, je tzv. osobní rozvoj. V určitou chvíli práce není o tvrdých a měkkých dovednostech, ale o tom, jak vás práce baví, jak jste s ní spokojení a jak pracujete se svým egem (které vám bude mluvit do kdečeho). Postoje jsou poslední, pravděpodobně nejvíce zanedbávanou oblastí, díky které ale v průběhu své kariéry nevyhoříte. Lidé jsou motivováni vnějšími a vnitřními faktory. Vnější faktory jsou typicky peníze, sláva, moc. Vnitřní faktor je vlastní dobrý pocit z odvedené práce, kvůli kterému pracujete. Poté, co dosáhnete na určitý finanční příjem, velmi pravděpodobně zjistíte, že peníze nejsou to, proč děláte webdesign. Na jedné straně peněz ve webdesignu zas tak moc není (webdesignera-miliardáře jsem zatím nepotkal), na druhé straně ale webdesignem lze uspokojit základní lidské potřeby 142, včetně pravidelného jídla v luxusních restauracích a dovolených v různých exotických destinacích. Webdesigneři se mohou z dlouhodobého hlediska rozvíjet a pracovat bez vyhoření pouze na základě vnitřní motivace. Je těžké nedělat weby pro peníze, když potřebujete zajistit své základní potřeby – je tedy nutné dosáhnout takového standardu, aby peníze nebyly problém, ale zároveň nebyly motiv. Vnější motivátory krátkodobě zvyšují výkon, dlouhodobě však snižují kvalitu odvedené práce. Pokud se potřebujete motivovat k práci odměnou či slávou, tak pravděpodobně neděláte to, co byste dělat měli, a je čas na změnu 143.

142 Ano, tohle je ironie. 143 Potenciální proto, že mou konkurencí už dávno nejsou lidé, ale značky. Jste značka? 144 Moudro dne. Už nevím, kde jsem ho vzal.

Jan Řezáč Web ostrý jako břitva Webdesign profesionálně

191

Čekání na Godota Nabízí se zásadní otázka – kdy začít nabízet své služby za peníze? Moje osobní zkušenost je taková, že proces, kdy začnu nabízet novou službu – ať už tvorbu webů nebo něco jiného, probíhá takto:

1. 2. 3. 4.

Rozhodnu se, kterým směrem chci jít. Nastuduji si o tématu maximum. Začnu službu nabízet. Přichází první zákazníci a já na nich odlaďuji faktický proces. 5. Přecházím k bodu jedna.

Můj pracovní životopis v kostce. Na začátku jsem kódoval HTML stránky. Pak jsem začal nabízet grafické ztvárnění webů. Následně jsem začal weby promyšleně navrhovat. Od návrhu webů byl jen krůček ke konzultování návrhů jiných webdesignerů. Konzultace vedly k dozorování větších projektů a tvorbě zadání pro výběrová řízení. A od dozoru webů je do budoucna jen pár kroků k…

192

Důležité je, že nepřijde nějaký člověk, který vám posvětí vaši cestu a jako učený guru prohlásí: „Tohle můžeš ode dneška dělat, Obivane“. Nevím, zda v zaměstnání někdo takový je, ale na volné noze nikoliv. Někdy lze přeskočit jeden či dva body z výše uvedeného seznamu – obzvláště ve chvíli, kdy se vaše nová služba blíží něčemu, co už děláte. Někdy to samozřejmě nevyjde – je možné, že některé vaše projekty (obzvláště ty první) nebudou ziskové či dokonce uškodí vašim klientům a spolupráce vyzní do ztracena. Snažte se snížit rizika kontinuálním učením se. Vaše vlastní promyšlená změna a růst je nejlepší recept na stálý dostatek práce, protože webdesign se vyvíjí a mění skutečně rychle. Pište, navrhujte, produkujte a nechte historiky, ať rozhodnou, zda jste nedělali jen kraviny. Godot nepřijde – používejte hlavu. A jednou za čas si vzpomeňte na pány Dunninga a Krugera.

Jan Řezáč Web ostrý jako břitva Webdesign profesionálně

Práce s klienty Bez klientů není klientská práce. Mezi vámi a klienty vzniká vztah, který můžete cíleně budovat a vhodně posilovat, nebo ho naopak v pravou chvíli ukončit.

Máte svých 50 %

Pomáhal jsem před lety s webem jedné brněnské neziskovce. Spolupráce skončila ve chvíli, kdy byla osoba č. 1 zodpovědná za web, osoba č. 2 za grafické ztvárnění všech výstupů a všechno rozhodoval demokraticky celý tým. Tým pak jednou za čas dodal návrhy na úpravy, které jsem byl nakonec donucen doslovně zapracovat, protože se na nich shodli.

Jste zodpovědní za svou polovinu vztahu s klientem. Nemůžete suplovat aktivitu na straně klienta. Je tedy potřeba zajistit, aby klientových 50 % bylo jasných, konzistentních a dlouhodobě udržitelných – a aby o nich věděl. Chtějte na klientově straně právě jednu osobu, která bude odpovědná za projekt a bude mít schvalovací pravomoc (čím větší klient, tím větší je toto problém), jinak se zvyšuje pravděpodobnost, že projekt nedokončíte úspěšně. Seznamte klienta s nutností získat podklady pro obsah webu – budou potřeba i v případě, že se rozhodne faktickou tvorbu obsahu přenechat odborníkům. Čím obsahově náročnější web je, tím více zdrojů bude potřeba vyčlenit na klientově straně. Vy sice získáte své peníze, ale výsledek nebude nikdy spuštěn díky nedostatku zdrojů na tvorbu obsahu webu. Doporučuji dohodnout si přesné termíny na vaší a klientové straně pro každý projekt s tím, že zpoždění na straně klienta (na vaší být nesmí nikdy) způsobí, že je jeho projekt odsunut na konec vaší pracovní fronty a vy vyfakturujete veškerou dosavadní vytvořenou práci. Tento přístup zlepšuje cashflow, snižuje stres a vytváří prostředí, ve kterém nejste tlačeni k práci ASAP. Musíte být v takové pozici, kdy si vůči svým klientům tento postup můžete dovolit.

Není 50 % jako 50 % S klientem je potřeba si vyjasnit, že vy jste webdesigner, a tudíž za vás nemůže dělat práci, na kterou si vás najal – chcete si přece vydělat svoje peníze. Pokud vám klient donese svůj náčrtek řešení, tak se vám pravděpodobně snaží sdělit něco hlubšího než „tady potřebuji aktuality“ a je vhodné vzít tuto zpětnou vazbu v potaz. Dokud je dialog o ujasňování přínosů pro byznys a návštěvníky, a nikoliv o diktátu obsahu na jednotlivých stránkách, pak má smysl diskutovat. Úpravy na základě interních politických rozhodnutí klienta je možné velmi efektivně omezit osobní prezentací výstupů, účastí klienta na procesu návrhu webu, uživatelským výzkumem a tím, že máte jen jednoho člověka, se kterým komunikujete a kterého je potřeba ve finále přesvědčit o tom, že to bude fungovat.

Jan Řezáč Web ostrý jako břitva Webdesign profesionálně

193

Bod fáá Bod fáá 145 představuje odvrácenou stranu klientské práce. Na začátku projektu se snažíte dodat takový výstup, který považujete za nejlepší možný. Zpětnou vazbu klienta využíváte k tomu, abyste projekt ještě vylepšili, a argumentujete proti podnětům mimo mísu. Jestliže si však klient stojí na svém za každou cenu a nedojde k oboustrannému pochopení, tak vás zpětná vazba může dostat do bodu, kdy si řeknete – tohle už mi za to nestojí. A uděláte, co klient chce. Přebarvíte web na zelenou. Dáte na hlavní stranu fotku klientova psa. Napíšete datum jako 20|10|2012 a použijete amatérský grafický motiv v hlavičce webu. Z kreativního člověka, kterému jde o skvělé výstupy, se stanete… otrokem. Bod fáá navíc často nastává ve chvíli, kdy už je projekt takřka před dokončením, takže buď zahodíte kontrakt a zisk a odmítnete sklonit hlavu, nebo budete držet hubu a krok – a projekt si pak nedáte do referencí. Většinou má smysl přístup číslo dva (protože potřebujete peníze) – jestliže jste přešli přes bod fáá, tak pravděpodobně stejně další spolupráce s tímto klientem v následujících letech nikam nepovede.

Navrhl jsem mnoho webů v oblasti zdravotnictví. Před několika lety jsem přijal zakázku na návrh webu pro jeden zdravotnický startup a majitel svěřil návrh webu právě mně díky referencím, které zahrnovaly i jeho největší konkurenty. Na druhé straně – mí klienti, kterým se on snaží konkurovat, si ho pravděpodobně ještě roky nevšimnou a v Evropě (kde pro ně pracuji já) pravděpodobně nikdy. Konkurence není symetrická vazba.

145 © Mgr. Adam Hrubý

194

Jan Řezáč Web ostrý jako břitva Webdesign profesionálně

Etika a webdesign Bez ohledu na vaše etické cítění nedoporučuji spolupracovat s politickými stranami, protože to nikdy pro vás nedopadne dobře. Naštvete lidi, kteří nemají rádi danou stranu. Naštvete lidi, kteří nejsou v té správné „klice“ strany, pro kterou děláte. A část stran může chtít platit protislužbou „až budou zvoleni“. Prostě win-win vás v politice ve většině případů nečeká 147 .

Etika je věc vašeho vlastního svědomí – jste zodpovědní za volbu klientů a projektů, a tudíž i za to, jakým způsobem měníte svět 146. Mám známé, kteří nedělají pro farmaceutické korporace či GMO. Další zase neberou zakázky pro zbrojaře či politické strany. Osobně si pokládám otázku – proč je tento projekt realizován kromě finančního zisku? Často se dá i na „šedých“ odvětvích najít něco dobrého, popř. tam mohou být lidé, se kterými je radost pracovat. Dělám pro firmy z oblasti zdravotnictví, biotechnologií, či pro firmy živené z evropských dotací a nemám s tím žádný morální problém. Naopak s půjčkami či sázkami problém mám. Je vhodné si před každým novým projektem uvědomit, zda si nekonkuruje s projektem ve vašem aktuálním portfoliu. A pokud ano, ujistěte se, zda je to pro oba vaše klienty OK. Vyhnete se tak nepříjemným rozhovorům a konfliktním situacím. Jestliže jsou vaši klienti přímí konkurenti, pak nemá smysl s tím druhým ani začínat spolupráci. Moje osobní poučení v oblasti etiky za poslední roky:

1. Ujasněte si, co chcete a nechcete dělat předtím, než přijmete nějakou zakázku, jinak se nebudete stačit divit. 2. Bez razantního odmítnutí neetické „spec-work” se nikdy nevyhrabete z bahna spodních pater webdesignu 148. 3. Neignorujte své vlastní svědomí. Práce vás nebude bavit. 4. Pokud nemáte co jíst, jde často etika stranou – také mám pár projektů, které si do referencí nedám, ale v kritickém místě mi pomohly rozumně přežít.

Poslední bod je významný především pro majitele agentur. Když živíte sebe, rozhodujete se pouze za sebe a jen vy schytáte následky. Když rozhodujete o práci pro živitele deseti či více rodin, začnete se na etiku dívat jinak. Což neznamená, že musíte jít proti svému přesvědčení, ale že v určitých chvílích budete mít výrazně těžší rozhodování.

Jan Řezáč Web ostrý jako břitva Webdesign profesionálně

146 Mike Monteiro: How Designers Destroyed the World http://bit.ly/wdestroy 147 Což jsem si odnesl z politologického barcampu. 148 Mám kamarády, kteří s webdesignem skončili, protože se v něm nedá uživit. To je ta část, kterou nazývám spodními patry. Nemyslím to nijak zle, naopak – snažím se lidem, kteří dělají webdesign, a nedaří se jim prorazit, pomoci právě touto knihou.

195

Lukáš Marvan: Neexistuje nic jako „finální PSD” a „hotový web”. Existuje pouze „spuštěný web” a i ten se ihned začne měnit… Se stim smiř.

Perfekcionismus či preciznost Perfekcionismus je pomalý typ sebevraždy a v případě grafického ztvárnění webu to platí dvojnásob. Web není tištěné médium a je k němu potřeba podle toho přistupovat. Nikdy nedosáhnete dokonalého zobrazení ve všech výstupních zařízeních a pokoušet se o to je bláhová ztráta času. Neexistuje pixel-perfect web. Prohlížeče a operační systémy renderují různě použitá písma, interpretují jinak kaskádové styly a HTML, variabilita zařízení rok od roku roste a lidé navíc nevnímají vizuální detaily, takže nemá smysl se soustředit na to, aby web vypadal všude zcela stejně a dle záměru grafika. Webdesign je primárně o návratnosti investice a spoustě klientů se nevyplatí investovat do některých částí našeho oboru, protože se jim investice nikdy nevrátí. Drobný lokální prodejce nepotřebuje propracovaný prototyp. Web masérky pravděpodobně nepotřebuje 3 iterace uživatelského testování. U mnoha projektů bude docházet k extrémnímu tlaku na termíny a celkovou cenu projektu, který vás bude nutit dělat kompromisy. Pokud nejste zvyklí na kompromisy, je nejvyšší čas se s nimi seznámit. Výjimku tvoří nejlepší klienti s velkými rozpočty a vlastní projekty – tam si můžete dovolit být nekompromisní a perfekcionističtí… někdy. Webdesign ovšem obsahuje místo pro preciznost, kterou má jen málokdo – a to při dodávání výstupů.

⟶⟶ Grafický návrh v PSD obsahuje všechny stavy elementů v případě, že jich mají více. ⟶⟶ Šablony obsahují tiskové styly. ⟶⟶ Návrh webu je plně responsivní ⟶⟶  … Používejte checklisty. Díky nim nic skutečně důležitého nezapomenete a umožní vám odevzdat projekt včas v takovém stavu, že nebude třeba nic dodělávat. Nedodělky mají zcela zásadní dopad pro vytvoření (ne)profesionálního dojmu z vaší práce u vašeho klienta. Vaši klienti neřeší jen svůj nový web, a tudíž budou kvalitu výstupů měřit nejen jejich faktickou kvalitou, ale také množstvím práce, kterou budou muset strávit nad jejich revizemi a dokončováním. Když bude klient nadšen z vašeho návrhu, bude to skvělé. Stejný klient ale může lomit rukama nad tím, že nedokážete dodělat takovou maličkost, na kterou jste slovy klientova programátora zapomněli, a projekt se díky vám zpozdil o měsíc.

196

Jan Řezáč Web ostrý jako břitva Webdesign profesionálně

Webdesign není… Webdesign není umění Webdesign není umění. Cílem webdesignu není vyjádřit váš pohled na svět, ale vyřešit problém vašeho klienta. Web samozřejmě může být krásný a při jeho tvorbě jsou využívány některé postupy podobné těm, které používají umělci, ale proto se ještě nestává uměním. Umělec dokonce může web zvolit jako prostředek k tvorbě uměleckého díla, ale webdesign jako takový umění není. Cílem webdesignu není ve většině případů estetické pohnutí klientů, ale jsou vyžadovány výsledky skrze materiální přínosy. Peníze až na prvním místě. Začínající webdesigneři, stejně jako nezanedbatelná část klientů, se zabývají primárně vizuální stránkou webu. Z hlediska designu je třeba si uvědomit, že webový grafik interpretuje vizuální styl klienta, jeho cíle a vize se záměrem vytvořit zisk. Cílem tvorby není krásno samo o sobě, ale reálný přínos webu, který lze ve většině případů úspěšně převést na peníze. Etapou „dělám umění” si projde skoro každý webdesigner (a množství z nich v této etapě i zůstane – vidím to především na zavedených tradičních grafických designerech, kteří se snaží začít dělat webdesign). Web musí dobře vizuálně komunikovat, líbit se (aesthetic-usability effect), vizuálně pomáhat orientaci návštěvníka, být návodným… takže grafický design a typografie jsou nedílnou součástí webdesignu. Na druhé straně zaměření se pouze na grafickou část webu vede projekty do pekel. A někdy i do galerií hezkých webů. Webdesign má měřitelné ukazatele, na základě kterých lze ukázat, zda je web dobrý či není – a to jak po vizuální, tak po výkonnostní stránce. Umění prostě je, zatímco web lze měřit a vyhodnocovat. Existuje množství heuristik pro použitelnost webu. Můžete jednoduše ověřit, zda vizuální styl webu vyvolává ty správné emoce. Zda podporuje značku klienta. Zda se na něm lidé orientují. Zda fakticky provádějí konverzní akce. Proto je webdesign výrazně náročnější disciplína, než tradiční grafický design – účinnost webu lze změřit velice jednoduše a měření lze z velké části automatizovat – což např. u plakátu či logotypu nastane málokdy. Větu „každý to máme jinak“ používají webdesigneři často ve chvíli, kdy vidí, že selhali – a vytvořili místo skutečného designu pokus o umění.

Webdesign není řemeslo Webdesign má mnoho řemeslných aspektů – pro tvorbu webu je potřeba ovládnout různé nástroje – grafické programy, prototypovací nástroje, prostředí pro psaní kódu, ale řemeslo je jen částí webdesignu. Web nikdy nevytvoříte bez ovládnutí řemeslné složky, ale nelze pominout neřemeslnou – řekněme myšlenkovou složku. Její absence má účinky ještě o stupeň destruktivnější.

Jan Řezáč Web ostrý jako břitva Webdesign profesionálně

197

Webdesign v sobě kombinuje psychologii, antropologii, estetiku, komunikaci, branding, marketing a mnoho dalších disciplín zcela neřemeslného charakteru. Jestliže je webdesign řemeslo, pak je psychologie také řemeslo, protože bez psychologie a znalosti lidského chování nikdy nevytvoříte fungující web.

Webdesign není tiskový design Jedním ze zásadních omylů tradičních grafických designerů je představa, že web je série plakátů na obrazovce, mezi kterými lze klikat. Výsledkem jsou pak bohatě ilustrované či jinak graficky propracované weby, které ovšem majiteli nic nepřináší. Až na výjimky nejsou tradiční grafici a tvůrci corporate identity dobrými webdesignery, ačkoliv to díky Dunning-Krugerově efektu nevidí ani oni, ani jejich klienti. Klient často poptává části vizuální styl a zároveň web, což na grafické designery vytváří tlak, aby byli i webdesignery. Jestliže přecházíte mezi tiskem a webdesignem, je bezpodmínečně nutné dohnat vzdělání v oblasti interakčního designu a přejít z paradigmatu „plakát“ na paradigma „grafické uživatelské rozhraní“. Webdesign je výrazně lépe a levněji měřitelný, takže brzy zjistíte, že vaše výtvory často nefungují bez ohledu na to, jak skvěle vypadají. Grafický design a typografie jsou základními kameny výtvarného ztvárnění webů. V konečném důsledku ale nezáleží zas tak moc na vzhledu webu, pokud má návštěvník dobrý pocit z celkové interakce – a toho nikdy nedocílíte jen grafickým designem.

198

Jan Řezáč Web ostrý jako břitva Webdesign profesionálně

Webdesign není IT Pro IT je webdesign dávno vyřešená a uzavřená kapitola. Ajťák bere web jako produkt, který je potřeba naprogramovat (ideálně v nějakém obskurním jazyce), nakódovat v HTML a vypustit mezi lidi. Na grafiku existují šablony (na kterých je podstatné zejména číslo HTML, ve kterém byly nakódovány), obsah dodá do webu někdo jiný. Typickým příkladem situace, kdy web dělá IT, jsou weby vysokých škol či weby státní správy – je tam vše a zároveň nic, nejčastěji vypsané malým písmem do tabulek se sloupci atribut/hodnota. Problém tedy nastává ve chvíli, kdy online marketingu vašeho zákazníka vládne IT, které web vidí výše popsaným a velice omezeným způsobem. Jsem magistr informatiky, takže jejich pohled chápu – IT často vidí svět optikou zdrojového kódu. Je tedy schopné produkovat dostupné a přístupné weby… a u nich to pro ně také končí. V 98 % webových projektů je potřeba jít mílovými kroky dál.

Jan Řezáč Web ostrý jako břitva Webdesign profesionálně

199

Kdo je webdesigner? Webdesigner v této knize není ve většině případů jeden člověk, ale celý tým lidí. Jako webdesigner (tedy to, co si lidé běžně pod pojmem webdesigner představují) budete dělat jednu z následujících činností nebo jejich kombinaci:

⟶ návrh webu (výstupem je dokumentace k webu) → UX designer, interakční designer, informační architekt,… ⟶ grafika (výstupem jsou obrázky webů) → webový grafik ⟶ HTML (výstupem webová stránka) → webový koder ⟶ HTML + javascript (opět je výstupem webová stránka) → front-end developer

Z hlediska náročnosti je nejjednodušší začít jako koder nebo webový grafik, protože v takovém případě převládají řemeslné aspekty webdesignu. V případě front-end developera přidejte nutnost programovat, jako UX designer potřebujete více interakčního designu, informační architektury, strategie, komunikace,… Moje pojetí webdesignera je kombinací povolání výše + přehled o SEO, copywritingu, marketingu, brandingu, psychologii, gamifikaci, byznysu, atd. – což je ovšem stav, do kterého se nedostanete za rok. Webdesigner je desetibojař – nic nedělá do hloubky, ale je všestranný, aby se mohl rychle přizpůsobovat vývoji našeho oboru. Každé z prezentovaných povolání má své prerekvizity, klady a výzvy a potřebujete u něj obsáhnout určité množství teorie. V době psaní těchto řádků vznikají v rámci Sektorové rady pro IT pod MPO a MŠMT hodnotící standardy pro tři z výše uvedených povolání – interakční designer, webový grafik a webový koder. V praxi to znamená, že dnes 149 existuje seznam zcela konkrétních znalostí a dovedností pro tato povolání a je posvěcen výše zmíněnými institucemi. Jako jeden z autorů tohoto standardu vím, že tato kniha pokrývá většinu toho, co budete potřebovat jako webdesigner – UX designer.

149 No prostě dnes. Teď.

200

Jan Řezáč Web ostrý jako břitva Webdesign profesionálně

UX designer

Je také vhodné zmínit, že UX design je nesmyslný pojem. Každý dobrý designer se stará o uživatelskou zkušenost, zkratka UX je tedy v názvu pozice nadbytečná.

Úkolem UX designera je transformovat myšlenky klienta a pochopit jeho zákazníky tak, aby mohl navrhnout prototyp webu a web průběžně testovat. Díky pochopení vstupů a jejich transformaci na výstupy má vizi konečného výsledku a stará se, aby byla realizována napříč celým projektovým týmem tak, aby bylo dané vize dosaženo. Jeho role je být ve středu každého projektu – projektový manažer se stará o hladký průběh a technické vedení projektu a UX designer mentálně propojuje všechny účastníky projektu. Když někdo v týmu potřebuje ujasnit některou z částí webu, nejde za projektovým manažerem, ale UX designerem. UX designer vytváří prototyp a dokumentace popisující části webu, které nedokáže popsat prototypem. K tomu potřebuje znalosti uživatelského výzkumu, uživatelského testování, interakčního designu, informační architektury, psychologie a strategie obsahu (čím větší weby navrhujete, tím více a lépe). UX designer musí přemýšlet a dávat web do souvislostí – potřebuje hluboké teoretické základy. Do řemeslné části pak patří tvorba dokumentace popisující web (tak, aby vypadala dobře a byla jednoduše konzumovatelná) a prototypů – ať už v grafickém editoru, nebo některém z programů, které jsou pro prototypování webů určeny. Jestliže chce UX designer navrhovat i rozložení prvků na stránkách prototypu, pak musí mít zkušenost s grafickým designem. UX designer je často zaměňován s operátorem Axure 150 – operátor kliká wireframy, protože je to jednodušší než dělat dobře grafický design. UX designer aplikuje své znalosti psychologie, sociologie, marketingu, brandingu,… třeba v rámci procesu popsaného v první části knihy, aby navrhl funkční web. Wireframy jsou pro něj jeden z prostředků pro předání ideí, nikoliv modla, okolo které se vše točí. 151

Typická práce UX designera ⟶⟶ Zkoumá kontext ovlivňující projekt na straně klienta i jeho zákazníků ⟶⟶ Plánuje a provádí jednotlivé části procesu návrhu webu ⟶⟶ Provádí uživatelský výzkum ⟶⟶ Pomáhá vymezit rozsah projektu ⟶⟶ Pomáhá pojmenovat problém a hypotézy pro jeho řešení. ⟶⟶ Volí psychologické principy aplikované na konkrétním webu ⟶⟶ Volí metody a způsoby dokumentace ⟶⟶ Testuje průběžně hotová řešení ⟶⟶ Nasazuje a vyhodnocuje analytické nástroje ⟶⟶ Dohlíží na celý proces tvorby webu.

Jan Řezáč Web ostrý jako břitva Webdesign profesionálně

150 V době, kdy čtete tuto knihu, už je možná normální ovládat některé weby hlasovým vstupem. Řekni, kde ty wireframy jsou... co se s nima mohlo stáát... 151 Název jsem si vymyslel, oficiálně vás nikdo jako operátora Axure nenajme, ačkoliv někteří klienti či zaměstnavatelé takto budou chápat vaši pozici v týmu.

201

Jiří Siftar: UX je aplikace psychologie v technologii.

Webový grafik Webový grafik vytváří náhledy webových stránek v grafickém programu a potřebuje grafický cit. Jeho práce tedy stojí zejména na tradičním grafickém designu, typografii a na souvisejících teoretických znalostech (např. teorie gestaltu). Webový grafik si nemusí lámat hlavu s návrhem obsahu, ale musí skvěle graficky interpretovat wireframy, aby měl výsledek smysl pro koncového uživatele a zapadal do vizuálního stylu klienta. Tzn. nejde pouze o obarvování polí, ale o přizpůsobování wireframů s ohledem na jejich skutečný obsah a vizuální prvky – to, co bylo ve wireframu bílý proškrtnutý čtvereček, může být v grafice kde co. Řemeslnou částí práce webového grafika je ovládnutí grafického programu – standard pro webového grafika je v roce 2014 Adobe Photoshop. Na grafické programy existuje množství postupů a návodů na internetu (a samozřejmě knih), můžete s tím začít prakticky okamžitě. Řemeslná schopnost interpretovat wireframy, cit pro leštění barevných ploch a grafický design z vás ale ještě nedělají webdesignera. Jste vždy závislí na kvalitě výstupů UX designera. Je proto potřeba před vstupem na volnou nohu doplnit minimálně teorii a praxi interakčního designu.

Typická práce webového grafika ⟶⟶ ⟶⟶ ⟶⟶ ⟶⟶

Vytváří moodboard webu. Pojmenovává emoce, které má web mít. Zasazuje web do grafického stylu klienta. Koordinuje volbu a tvorbu grafických podkladů – ilustrací, videí či fotografií, které budou součástí webu (nemusí je nutně vytvářet – webový grafik nemusí být ani ilustrátor, ani DTP operátor, ale obojí se samozřejmě hodí). ⟶⟶ Návrhuje typografickou mřížku a konzistentní typografii celého webu. ⟶⟶ Graficky interpretuje wireframy. ⟶⟶ Vytváří vizuální framework pro tvorbu dalších prvků webu.

202

Jan Řezáč Web ostrý jako břitva Webdesign profesionálně Mašek Tomáš » , ,

Koder / front-end developer Kodeřina má nejblíže k řemeslu – dostanete webovou stránku jako obrázek a přepíšete ji do HTML+CSS tak, aby se web zobrazoval hezky v jednotlivých prohlížečích/za­řízeních/operač­ních systémech. HTML+CSS se lze naučit rychle, takže je to nejjednodušší vstupní brána do webdesignu. Vyšší dívčí je pak přizpůsobování výstupů webového grafika vzhledem k rozlišení prohlížeče, tvorba responsivních webů a především udržování webu v konzistentním a snadno rozšiřitelném stavu. Webový koder bude mít bez typografického citu velice těžkou práci, protože s ním bude muset grafik ladit každý pixel (nebo desítku pixelů – záleží na přístupu grafika – tak jako tak ho to brzy přestane bavit).

Typická práce webového kodera ⟶⟶ ⟶⟶ ⟶⟶ ⟶⟶

Udržuje konzistenci grafických prvků napříč webem. Sjednocuje designové výstřelky grafika. Zasazuje elementy webu do mřížky. Vytváří systém pro udržování kódu, aby bylo web možné jednoduše rozšiřovat. ⟶⟶ Důsledně udržuje vizuální framework webu. ⟶⟶ Vytváří responsivní varianty layoutu pro mobilní telefony a tablety.

Front-end developer si k HTML musí připočíst javascript, a tudíž znalosti týkající se programování.

Jan Řezáč Web ostrý jako břitva Webdesign profesionálně

203

Odneste si z kapitoly

Webdesigner neuspěje ve vzduchoprázdnu a jestliže nechcete pouze vykonávat řemeslný aspekt naší práce (v nějaké větší reklamní agentuře nebo webovém studiu), musíte mít znalosti o celé oblasti tvorby webu. Přehled potřebujete obzvláště ve chvíli, kdy chcete působit na volné noze, kde musíte mít hlubší představu 204

o kontextu webdesignu, abyste mohli řešit to, co klienta skutečně pálí. A to je návratnost investice. Webdesigner – řemeslník pouze používá metody, ale nechápe principy webdesignu, na kterých jsou metody postaveny. Tento přístup je možný, ale prakticky vás vrhne do pozice, kdy jste snadno nahraditelní. Webdesigner by měl mít hluboký zájem o lidské chování. 205

Jeho výstupy budou používat lidé – v lepším případě miliony lidí denně, a tudíž by měl být webdesigner fascinován lidmi a měl by se v jejich poznávání neustále posunovat dopředu.

206

207

208

Literatura Mike Monteiro: Design Is a Job, 2012 Základy profesionálního přístupu pro webdesignery.

Seth Godin: Nepostradatelní, 2011 Kultovní kniha Setha Godina o tom, jak uspět v byznysu.

Andy Rutledge: Design Professionalism, 2011 Taktéž základy profesionálního přístupu, tentokráte pro designery obecně.

Daniel H. Pink: To Sell is Human: The Surprising Truth About Persuading, Convincing, and Influencing Others, 2013 Denně prodáváte ostatním svoje nápady, myšlenky a pravdy. Pojďte to dělat pořádně.

Robert Hoekman, Jr: Big Deal: On Being Famous to Almost No One, 2011 Kniha o tom, jaké je to být nanocelebritou.

Steven Pressfield: The War of Art: Break Through the Blocks and Win Your Inner Creative Battles, 2012 Kniha o překonávání sebe sama při tvorbě čehokoliv.

Jan Řezáč Web ostrý jako břitva Webdesign profesionálně

209

Poděkování Tato kniha by nikdy nevznikla bez podpory mnoha lidí. Jmenovitě děkuji: Jiří Sekera – Jirka mi pomohl dostat z knihy maximum především konzistentním oponováním a vylepšováním Jiří Rusňák – Jirka mi pomohl dostat z knihy maximum především jiným pohledem na věc, protože se pohybuje v prostředí návrhu aplikací Jana Volencová – Jana provedla editorskou korekturu celé knihy a posunula její jazyk na novou úroveň Otto Bohuš Adam Hazdra Jolana Hršelová Adam Hrubý Jiří Jakubec Michaela Losekoot Pavel Maček Karel Novotný Radek Pavlíček Zuzana Řezáčová Lukášková Miloš Sekot Ondřej Válka Robert Vlach Jan Vlček Klára Zahrádková

a vám. Za to, že se chcete naučit více o návrhu webu a byli jste ochotni do této knihy investovat.

210

Závěrem Je to za vámi. Tedy vlastně před vámi. Mým cílem bylo poskytnout vám strukturu pro pochopení webdesignu a odkázat vás na literaturu, která vás může posunout ještě mnohem dále. Webdesign je královská designerská disciplína. Napište mi na e-mail [email protected], jak vám kniha pomohla či nepomohla. Možná nezareaguji hned, ale vaše e-maily si postupně přečtu. Užijte si to, Jan Řezáč

Ať je váš příští web ostrý jako břitva.

211

O autorovi Jan se ve webdesignu pohybuje od roku 2002. Za svou kariéru si prošel většinou úrovní návrhu webu – dělal HTML kodera, webového grafika, UX designera a dnes je konzultantem webů. Má rád víno: takže si udělal sommelierský kurz. Rád cestuje letadlem: tak šetří na to, až si jedno koupí. Je pověstný svým nezaměnitelným smíchem. www.janrezac.com

Jan Řezáč Web ostrý jako břitva Grafická úprava, ilustrace, sazba: Jolana Hršelová, Klára Zahrádková, Adam Hrubý Editace: Jana Volencová Jazyková korektura: Renata Sekotová Holatová V roce 2014 vydalo nakladatelství BAROQUE PARTNERS s.r.o. Dělnický dům, Žižkova 1696/15 586 01 Jihlava www.baroquepartners.cz Vytiskla tiskárna H.R.G. spol. s r.o. Svitavská 1203 570 01 Litomyšl Vydání první, 2014 ISBN: 978-80-87923-01-6