Problémy českých webů očima konference WebTop100

Jiří Suchý: Během redesignu spolu komunikujte

První přednáška se věnovala redesignu webu O2. Suchý, který působil jako hlavní architekt pro online společnosti O2, zahájil svou prezentaci tím, o čem mluvit nebude – tedy jak redesignovat web. Naopak zaměřil se na otázky, jak probíhá tento proces v korporaci a čím se vyznačuje úspěšný web. Trošku nelichotivě představil Telefónicu O2 jako jednoho z největších molochů v České republice, s čímž souvisí i problémy webu. Procesy jsou pomalé a schvalování nepružné.

V poslední době se obecně web dostává do centra pozornosti korporací, dá se jím totiž hodně vydělat. To ale znamená, že na web rostou požadavky. Web českého O2 má 3000 jednotlivých stránek a nespočetné množství externích aplikací. O web se stará zhruba 40členný on-line tým. Jedná se tedy o významný moloch v rámci molocha. Redesign je ale vždy problém – obsahuje až příliš mnoho konfliktních prvků. Zároveň v žebříčku funkcí a prvků na stránce má jako takový poměrně nízkou prioritu.

V O2 došlo k redesignu především proto, že na web přicházely požadavky, které nemohl plnit. Mezi ně patřily například RSS zprávy nebo videa – před třemi lety byly takové funkce na vrcholu, i když dnes už jsou spíše v pozadí. Pro úplný přehled o akci je zajímavé představit i finanční stránku: redesign stál asi polovinu ročních nákladů na správu, míň než 2měsíční výdaje na reklamu a méně než roční výdaje na PPC. Takže proč je jeho zahájení takový problém, když ve srovnání s dalšími náklady jsou ty na něj relativně zanedbatelné?

V Telefónice to trvalo rok a tři čtvrtě. To ale zahrnuje i příchod nového ředitele a proběhl stop stav, během kterého docházelo jen k drobným konkrétním úpravám. Během celého procesu přichází změny, a proto je třeba se připravit na to, že nestihnete všechno a ve svých projektech budete odřezávat – rušit jednotlivé projekty nebo požadavky.

Jaké jsou tedy body úspěšného redesignu? První bod úspěchu je podle Suchého komunikace. Ve velkých korporacích se totiž snadno můžete ztratit. Tato konkrétní skupina proto začala spolupracovat s přibližně 40 lidmi z firmy, kteří měli na webu zájem. To zahrnovalo i workshopy a zájemci se účastnili každé klíčové části redesignu. Všechny podléhaly uživatelskému testování.

  • Pro úspěšný proces redesignu se nechte inspirovat následujícími radami z přednášky:
  • Mluvte o očekáváních a ne požadavcích. Dáváte tím najevo, že vy nemáte povinnost zapracovávat to, co vám lidé říkají. Přesto máte jejich důvěru.
  • Vždy mluvte nejdřív o konceptech a teprve poté o řešení.
  • Představujte vždy komplexní celky. Vyhnete se tomu, že lidi vám budou donekonečna komentovat drobnosti a vracet projekt.
  • Připravte se na to, že na někoho nebo něco zapomenete. V případě O2 to byl formulář. Počítejte s tím v otázce načasování.
  • Komunikujte, jak jste uzavřeli a vyřešili problémy. Jinak se může stát, že si neporozumíte.
  • Mluvte česky. Vaši zákazníci mluví česky. Nepodceňujte to.
  • V redesignu poměrně často potřebujete představovat neobvyklé a kontroverzní řešení. Buďte diktátor.
  • Svěřte svůj projekt motivovaným lidem a věřte jim, že to zvládnou. To je nejlepší způsob, jak sestavit kreativní týmy.
  • Odvažte se (ale dodržujte požadavky).
  • Prosazujte agenturní nápady ve společnosti.
  • Pracujte v malém týmu s jasnými pravomocemi a zodpovědnostmi.
  • Důvěřujte svým partnerům a očekávejte od nich to nejlepší.
  • Uvědomte si, že nikdy neuspokojíte 100 procent návštěvníků webu, stakeholderů a nakonec ani sebe. Tedy i 80 procent je úspěch.

Namísto vypočítávání úspěchů webu se v závěru prezentace Suchý věnoval tomu, co se nepovedlo. To je zajímavý přístup a tak porovnejte sami, co se týmu bývalého hlavního architekta O2 podle jeho zhodnocení nepodařilo. Prvním neúspěchem je komunikace mobilního internetu. V době, kdy se na něj operátoři zaměřují, to může být problém. Zbytečně nepřehledný je prý designový manuál. Třetím velkým neúspěchem je mobilní verze celého webu a nepovedla se prý ani náhrada písma.

 

Petr Štědrý: Jak navrhnout nový web ve 14 dnech

Specialista na návrh webů a internetových aplikací z Dobrého webu předvedl případovou studii návrhu webu společnosti Sencor. Předpokladem pro rychle spuštěný projekt je vyvarovat se několika chyb, kterými přednáška začala. První z nich je nepřesné nebo neúplné zadání. Hned na začátku je třeba si vyjasnit požadavky. Dalším úskalím je příliš dlouhý schvalovací proces, který je zároveň zbytečně odsunutý. Vývojáři projektu tak ztrácí možnost napravovat poslední chyby.

Důležité je ale podle Štědrého věnovat se hlavně vizuální sránce a komunikaci. Při návrhu webu je většina problémů vizuálních. Nelze je popisovat textově a následně posílat e-mailem, taková komunikace je jasně zdlouhavá a nejasná. A přesto ji lidé používají. Jednoduchá rada tedy zní: raději pošlete rukou naskicovaný návrh nebo protinávrh.

Proč tedy konkrétní redesign Dobrého Webu pro Sencor trval jen 14 dní?

Ještě před prezentovanou odpovědí na tuto otázku ale namísto Štědrého upřesňuji: samotný proces srovnávání představ byl opravdu krátký, přesto v den konference uběhlo od začátku projektu přesně 71 dní a projekt byl prý těsně před spuštěním. Nepředstavujte si tedy, že od zadání do spuštění webu proběhlo 14 dní. Jedná se jen o koncepci.

Projekt začal designovým workshopem – klienti kreslili své představy nového webu a jednotlivé skupiny zapracovávaly připomínky, které na workshopu padaly. Prostor, kde workshop probíhá, by měl být nasycený informacemi o webu firmy. Jedná se hlavně o cílové skupiny, brand values, stránky konkurence a podobné informace, které je třeba zvážit při tvorbě webu.

Ze strany Dobrého webu byl na workshopu přítomný moderátor. Ten měl ale odlišný úkol: měl by se držet stranou, získá tak skutečný názor klientů a zbytečně je neovlivňuje. Na workshopech by kritika měla být konkrétní. Čím konkrétnější, tím lépe jde nápady kultivovat.

Hlavní rada Štědrého zní: věnujte se vizuální stránce v komunikaci. Při grafických návrzích se chyby v nápadech snadno nacházejí i opravují. Opět hlavně při konkrétních připomínkách

Po této fázi přišlo na řadu skicování ze strany Dobrého webu – to se ale jednalo spíš o kultivaci a zapojení designérů. Z toho můžou vzejít i nové nápady. V tomto konkrétním případě z fáze vzešlo řešení menu. I v takto krátkém čase řešení proběhlo uživatelské testování, a to desátý den. Zapracování výsledků uzavřelo fázi koncepce.

Dané rady platí hlavně tehdy, pokud chcete od klienta zjistit, co chce, a vlastní řešení nechat na něm. Na straně zadavatele je totiž většinou spousta znalostí, které je možné vydolovat a ke spokojenosti všech použít.

Daniel Frouz: Nenechte zákazníka odejít

Přednáška majitele a výkonného ředitele společnosti iNet Solutions byla příjemně konkrétní. Tedy krátce a přehledně případové studie redesignu webu inetprint, nejprve v číslech:

  • tvorba koncepce – 3 měsíce – 75 tisíc korun
  • tvorba grafiky – 2 měsíce – 45 tisíc korun
  • kódování – 3 měsíce – 50 tisíc korun
  • programování – 14 měsíců – 1,05 milionu korun
  • copywriting – 1 měsíc – 35 tisíc korun
  • plnění obsahu – 3 měsíce – 40 tisíc korun
  • testování – 2 týdny – 35 tisíc korun
  • opravy po testování – 2,5 měsíce – 190 tisíc korun
  • webová analytika – 2,5 týdne – 40 tisíc korun
  • celkem – 2 roky – 1,6 milionu korun

V tomto postupu dokázal Frouz zpětně identifikovat chybu: při dalším redesignu by zahájil testování významně dříve. Proběhlo až ke konci a následně trvalo skoro tři měsíce, než se opravily chyby. Zpětně to Frouz označil jako zbytečně pozdní a zdlouhavé.

Při začátku redesignu je tvorba koncepce nejdůležitější krok. Jednoduchá rada tedy zní: stanovte si hlavní cíle a očekávání. Následně si ve firmě udělejte brainstorming. Lidé jsou tak na projektu zainteresováni a získáte spoustu nápadů. Udělejte si hlavní body koncepce, vhodné jsou myšlenkové mapy. Jak tvořit koncepci? Kreslete si rozmístění prvků jednotlivých stránek. Zkuste více variant. Testujte na lidech v okolí jednotlivé varianty a laďte je (ve firmě, rodině, ukažte je přátelům).

Pokud necháte stránky tvořit mimo firmu, vždy se návrhu aktivně účastněte. K domluvě s externí agenturou je třeba čas, musíte se navzájem pochopit. Co se týče grafiky, doporučil Frouz udělat více grafických návrhů a pokud možno s více různými grafiky. Přitom stačí, aby grafik navrhl jednu až dvě stránky z koncepce.

Majitel iNetu byl s výsledky webu spokojený a prezentoval to na několika číslech (nárůst průměrné doby na webu, pokles míry opuštění nebo nárůst vracejících se návštěvníků). Jako jednu z nejdůležitějších funkcí vyhodnotil podporu vracejících se zákazníků.

  • ukládejte cestu, kudy chodí – nabídněte jim návrat
  • ukládejte navštívené produkty – nabídněte jim návrat
  • ukládejte jejich vyhledávání – nabídněte jim zopakování
  • ukládejte, co vytvořili – nabídnete jim návrat
  • ukládejte, co nedokončili – nabídněte jim dokončení
  • a hlavně, ukládejte košík – nabídněte jim dokončení objednávky
  • přivítejte uživatele při návratu – zákazník vidí, že o něm víte a že si ho vážíte, má pak pocit, že se o něj více staráte

Nakonec se při redesignu za každou cenu snažte zachovat URL adresy – jinak ztratíte prakticky všeho, čeho jste dosáhli před ním.

Ondřej Kratochvíl: Úspěšnost nezáleží na kvalitě návháře

Porotce a garant oblasti použitelnost WebTop 100 uvedl, že 62 procent webů v soutěži hodnotil jako průměrné či horší. Zlepšení oproti předchozím letům je podle něj vidět, ale není významné. Co mu především vadilo?

  • 1. Obtížné hledání smyslu webu.
  • 2. Příliš dlouhá nebo nepřehledná navigace. Tvůrci by neměli vše dávat do jednoho menu.
  • 3. Odlišnost od tzv. návrhových vzorů (způsobů, jak web dělat správně). Je to jako když v 80. letech Citroen experimentoval s hranatým volantem. Brzy se vrátil k tomu kulatému.

Problémy Kratochvíl demonstroval na webu firmy e.on (jedná se o příklad). Neobvyklé umístění přepínání do angličtiny, vyhledávání a složitá navigace hned na úvodní stránce jsou odrazující. A pokud návštěvník úvodní stránky e.on nezná zaměření společnosti, musí klikat, aby zjistil, na co se ve skutečnosti společnost zaměřuje. Kratochvíl kritizoval i chybějící uživatelské rozhraní pro mobily, tablety i netbooky. Je odhadováno, že v letech 2013 až 2015 bude více uživatelů s mobilním zařízením než s počítačem. Moc času tedy nezbývá.

Jak tedy navrhovat weby pro uživatele? Je třeba řešit takzvaný user experience design. Ten zahrnuje kromě uživatelské zkušenosti další přístupy – od snadného užívání přes prezentaci výrobků až po smysl této prezentace. A to už od počátku plánování projektu napříč jeho životem – od záměru přes koncept či copywriting po testování a údržbu. Uživatel se na webu musí orientovat, chápat ho a umět ho využívat.

Tvůrci webů by neměli čekat – uživatelské zkušenosti se mění a přesouvají na mobilní zařízení. Zpoždění trendů v Česku oproti zahraničí je ale 3 až 5 let, user experience design by proto měl teprve nastoupit. Díky němu by se uživatelé na webech měli konečně bavit.

Martin Kalda: Jak (ne)dělat grafiku

Garant oblasti grafika prezentoval nejčastější prohřešky, které při hodnocení v této oblasti zaznamenal:

  • 1. Úvodní stránka webu je docela hezká, ale podstránky dost pokulhávají. Jsou dělané uniformně a nezaujmou a tedy neprodávají. Velký problém webů je ten, že jsou šité na výplňové texty. Pokud na ně grafici web tvoří, těžko někoho přesvědčí. Nevyužívejte tedy grafika jako jednorázovou službu, ale využívejte ho po celou dobu procesu
  • 2. Ztráta krátkodobé paměti. Smiřte se s tím, že jako zadavatel nejste objektivní. Web by se měl dělat pro návštěvníky, ne pro generálního ředitele. Není výroční zpráva, nepotřebuje velké množství informací.
  • 3. Firma by měla komunikovat jedním jazykem, jedním vizuálním stylem. Mít grafický manuál by měla být pro firmy povinnost, stejně jako jeho dodržování.
  • 4. Velkým problémem hodnocených webů je to, že informace nedostávají tu správnou vizuální prioritu. Velké množství textu je na škodu. Rozhodněte se, co by měl uživatel vidět jako první. Vyberte si všechny texty, zkraťte je a ze všech textů pak ještě polovinu škrtněte.
  • 5. Při tvorbě webu si najměte někoho, kdo umí česky. Jde i o styl uvozovek nebo správné datum.

Michal Špaček: Jaké technické chyby vás připraví o peníze

 

Garant pro oblast technického řešení prezentoval problémy, se kterými se weby potýkají po technické stránce. Za nejméně důležitý prohřešek považoval nefunkčnost webu bez úvodních www. Závažnějším problémem je chybný odkaz, kdy se na internetu zobrazuje takzvaná not found stránka s chybovým hlášením 404. Bezesporu nejdůležitější chybou ale samozřejmě byly bezpečnostní problémy. Takových webů byla podle něj v soutěži polovina. Aby svá slova dokázal, před publikem přímo na konferenci dokázal jen prostřednictvím webového prohlížeče získat zdrojový kód stránek Coop a následně je vyřadit z provozu…

Přehled výsledků WebTop100

informační technologie

1. www.sherwood.cz (otevřenost a kompletnost informací)

2. www.eset.cz

3. www.superkoderi.cz

energetika

1. www.cez.cz (přehlednost, svěží a umírněná grafika)

2. www.czechcoal.cz

3. www.rwe.cz

finance

1. www.direct.cz (přehlednost, podrobné informace)

2. www.csobpoj.cz

3. www.hypotecnibanka.cz

obchod

1. www.freeport.cz (virtuální prohlídka, dárkové poukazy)

2. www.savo.eu

3. www.globus.cz

telekomunikace

1. www.o2.cz (snaha o zpětnou vazbu)

2. www.t-mobile.cz

3. www.vodafone.cz

e-shop

1. www.pneumatiky.cz (funkční online chat, důvěryhodnost)

2. www.global-wines.cz

3. www.marimex.cz

průmysl

1. www.fortell.cz (správná navigace, funkční vyhledávání)

2. www.okd.cz

3. www.ohlzs.cz

služby

1. www.praha-majales.cz (svěží grafika, využití Facebooku)

2. www.tiskomat.cz

3. www.bvv.cz

auto-moto

1. www.tatra.cz (jasné rozdělení výrobků, využití sociálních sítí)

2. www.skoda-auto.cz

3. www.motohouse.cz

transport

1. www.ceskaposta.cz (příjemný, barevně jednoduchý web)

2. www.prg.aero/cs

3. www.vasosobniridic.cz

potravinářství a gastronomie

1. www.bernard.cz (moderní, elegantní, nenudí)

2. www.znovin.cz

3. www.chocenskamlekarna.cz

microsite

1. www.vyhrajpeugeot.cz (propojení s Google Images, Facebookem)

2. www.splatkomat.cz

3. www.futuremotion.cz

marketingový nástroj

1. www.facebook.com/botypuma (marketingová čísla jsou výborná)

2. www.m.koop.cz

3. www.hypotekapowebu.cz

facebooková stránka

1. www.facebook.com/vodafonecz (nadprůměrné, správně pochopeny možnosti Facebooku)

2. www.facebook.com/nikeroom

3. www.facebook.com/nike_lokality

marketingová trefa

www.eset.cz (přehlednost, nezatěžuje návštěvníky)

designová trefa

www.znovin.cz (čistý design, jasná navigace)

uživatelská trefa

www.bernard.cz (hezká úvodní stránka, funkční elementy)

Hlavní žebříček

1. www.csobpoj.cz

2. www.o2.cz

3. www.pfcp.cz