Hlavní navigace

Redesign webu v roce 2010 – tipy a inspirace

 Autor: 74287
Martin Snížek

Pokud se chystáte v tomto roce redesignovat váš web, přečtěte si aktuální best practices a inspirujte se u nejlepších! V článku naleznete čtyři praktické tipy a čtyři inspirující příklady.

Protože už většina webů byla jednou postavena, vyvstává u nich vždy po určité době potřeba je více předělat, tedy redesignovat. Pokud se chystáte připravovat návrh vašeho nového webu, pojďte si přečíst čtyři tipy a poznatky z praxe, proložené několika inspirativními příklady moderních funkcí a přístupů na webu.

1. Ujasněte si, proč

Na začátku redesignu si ujasněte, proč ho děláte. Nemusíte sepisovat žádné dlouhé epopeje, pouze se zamyslete, v čem by měl být nový web lepší než ten současný, v čem by měl převyšovat konkurenci. Jako výstup úplně stačí, když budete mít pět bodů o tom, jaký nový web bude. Tyto body si napište někam na viditelné místo a v průběhu celého redesignu se na ně opakovaně dívejte a přemýšlejte o tom, jak je nově vznikající web plní. Projekty redesignu jsou dlouhé a původní myšlenka se v nich snadno ztratí, toto vám ji pomůže udržet. Pokud budete chtít jít ještě o krok dále, stanovte si v návaznosti na své body jednu až tři metriky, kterými budete úspěšnost redesignu poměřovat. Může se jednat o nárůst nových zákazníků, zlepšení konverzního poměru nebo různé „soft“ metriky (počet stránek, které si návštěvník průměrně prohlédne).

Inspirace #1

webtip 1

Web John Lewis nabízí zákazníkům pohodlné živé filtrování, bez načítání celé stránky, řešené pomocí technologie Ajax. Podobnými funkcemi můžete značně usnadnit a urychlit návštěvníkům používání vašeho webu – především u složitých formulářů a stránek s velkým množstvím informací.

2. Nespoléhejte se jen sami na sebe

K vytvoření kvalitního webu nevystačíte jen se svým pohledem na věc. Budete potřebovat zpětnou vazbu od kolegů, svých zákazníků i uživatelů webu – možnosti jsou velké:

  • Testujte již navrhovaný web na nezaujatých uživatelích – stačí kolegové, rodina, nebo třeba hosté v kavárně (kterým nebude vadit, když je budete chvíli otravovat). Dejte jim nějaký typický úkol, který by u vás návštěvníci měli plnit, a pozorujte, jak se s ním poperou. To samé pak provádějte u grafických návrhů nebo polofunkčních verzí webu. Velmi levně a rychle takto získáte zpětnou vazbu, která vám ušetří velké množství peněz za úpravy již finálního webu (pokud byste až u něj zjistili, že jste se vydali špatným směrem).
  • Zeptejte se návštěvníků na webu, ze kterých se nestali zákazníci, co jim na webu chybělo, a naopak zákazníků, co se jim na webu líbilo a přesvědčilo je.
  • Chtějte oponenturu k novému webu od svých kolegů, případně tvořte web přímo ve spolupráci s nimi – více pohledů na věc vám pomůže odfiltrovat mnoho chybných domněnek a názorů.
  • Pokud nabízíte své produkty či služby i v „kamenném“ světě, zeptejte se vašich prodejců a dalších zaměstnanců komunikujících se zákazníkem, na co se zákazníci často ptají při rozhodování, co jim chybí na webu, čím je přesvědčují. Tato znalost je takový zákaznický průzkum v reálném čase, který můžete snadno a rychle získat, nezapomínejte na něj!

Inspirace #2

webtip 2

Web ProFlowers nabízí velmi obratně zákazníkům během objednávky další produkty k dokoupení ke květinám – upselling. Všimněte si, že upsellingu je věnována celá samostatná stránka v objednávce, získá tedy dostatek pozornosti zákazníka. Produkt přitom stačí pro přidání pouze zaškrtnout, nejsou zde žádné odkazy – oba tyto faktory zvyšují významně úspěšnost podobné funkce. Připomenutí upsellingu je vhodné zopakovat také po potvrzení objednávky, kdy mu zákazníci věnují pozornost díky právě dokončenému úkolu (objednávce).

3. Myslete optikou priorit

Na návrh obvykle nemáte neomezené množství času, musíte být rychlí, ale zároveň se věnovat tomu nejpodstatnějšímu. Mnoho lidí si ale neuvědomuje, že neomezené množství času nemají ani návštěvníci, pro které web připravují. Pokud tedy mluvím o prioritách v návrhu, myslím priority jak z pohledu vašeho času, tak z pohledu návštěvníků. Nejprve něco k těm vašim:

  • Nezdržujte se tím, že byste dávali dohromady vyčerpávající seznam všeho, co na webu potřebujete mít, a v jaké podobě. Stojí to spoustu času a navíc se to pořád mění – než web dokončíte, už to nebude aktuální. Stačí mít na začátek ty nejdůležitější věci, vystačíte zde s „top-level“ pohledem. Vše ostatní už vyřešíte po návrhu během sestavování webu, navíc díky CMS se již dnes dá skoro vše na webu změnit nebo doplnit později.
  • Až na velmi složité weby můžete klidně vypustit sestavování struktury (mapy) webu. Tato součást návrhu je sice velmi oblíbená, ale bez sáhodlouhého výkladu je obvykle ostatními účastníky projektu špatně pochopena. Důležité je, jak se struktura projevuje v rámci webu, jaké menu bude mít jakou prioritu, kam budou návštěvníci vedeni – a to se znázorňuje až v maketách stránek. Navíc se názvy kategorií nebo jejich uspořádání dají obvykle snadno změnit v CMS, takže je můžete průběžně dolaďovat. Uživatelé už také umí velmi dobře používat fulltextové vyhledávání, kterým se nejlépe vypořádají s hledáním ve složité struktuře. Opět, stačí se zamyslet nad strukturou hlavních položek, ale nemusíte mít připravenou naprosto detailní strukturu.
  • Začínejte s těmi nejdůležitějšími částmi webu – úvodní stránka, stránky kategorií, důležité vstupní stránky.

Pohled vašich návštěvníků je samozřejmě ještě důležitější než vaše efektivita. Ve všech částech návrhu je proto potřeba si uvědomit jedno základní pravidlo: navrhujte ze shora i ze zdola. Ze zdola znamená, že víte, co na webu chcete mít, a jakou to má přibližně strukturu a podobu (tato část je zde hlavně omezením). Ze shora znamená, že přemýšlíte u každé stránky, u priorit různých prvků, o tom, co je důležité pro návštěvníka, jak se může nejlépe dostat tam, kam chce a kam ho také chcete dostat vy. Toto pravidlo se projevuje při návrhu na mnoha místech:

  • Struktura menu by neměla být pouze logická, ale měla by také odrážet důležitost položek – nejdůležitější položky z hlediska uživatelů by se měly nacházet v nejvyšší úrovni (často je třeba i vytahovat důležité položky z nižších pater hierarchie výše).
  • Pro každou stránku byste si měli připravit seznam obsahových prvků nebo změn oproti současné verzi, a tento seznam byste měli prioritizovat z hlediska uživatelů – makety stránek pak tyto priority musí odrážet.
  • Úvodní stránka by neměla obsahovat pouze upoutávky na kompletní obsah vašeho webu (to by byl pouze návrh zdola), ale zaměřovat se na ty nejdůležitější části z hlediska návštěvníků. To samé platí i pro ostatní stránky.

Inspirace #3

webtip 3

Když stojíte v recepci hotelu, snadno poznáte, jaký je o něj zájem mezi hosty, online ale toto neplatí. Díky pokročilým technologiím však můžete tento dojem vytvářet podobně jako server Booking.com, který v pravém horním rohu zobrazuje u hotelu dynamicky, kdy byl naposledy zarezervován a kým a dokonce i to, kolik si hotel aktuálně prohlíží na webu lidí. To ve spojení s uvedeným počtem posledních volných pokojů dokáže působit jako velmi dobrá urgence.

4. Dokumentace musí být efektivní

Návrh webu je popsán v dokumentaci, ze které potom vychází jeho tvůrci. Nejčastější dokumentací jsou wireframy, tedy makety stránek naznačující obsah, jeho umístění a priority, ale bez grafického zpracování. Wireframy bývají vytvořeny pro nejdůležitější stránky (jejich tvorba je časově náročná), ostatní stránky a funkce se obvykle specifikují již pouze textovým popisem, případně slovně během vytváření webu. Z nástrojů se často používá MS Visio (se speciálními symboly pro wireframy), MS PowerPoint (velmi dobrý nástroj i pro testování návrhů), z profesionálních dražších nástrojů třeba Axure nebo zajímavý Balsamiq.

Při tvorbě dokumentace se snažte nevytvářet nic rozsáhlého, složitého, co popíše budoucí web dokonale. Čím delší dokumentace je, tím méně ji její čtenáři pochopí a tím méně jí budou věnovat pozornost, nemluvě o tom, že rozsáhlá dokumentace také může značně prodloužit celkovou dobu redesignu, čímž přicházíte o zákazníky. Nezastupitelným prostředkem je kromě dokumentace osobní komunikace, vysvětlování návrhu a průběžné připomínkování výsledného webu.

Inspirace #4

webtip 4

Vnitřní stránky webu jsou často přizpůsobeny spíše pro návštěvníka, který se k nim prokliká z jiných stránek webu, již jsou ale méně účinné, pokud na ně přijde nový návštěvník třeba z kampaně. Proto se vyplácí dělat speciální vstupní stránky pro kampaně, připravené podle jejich message a optimalizované pro přesvědčení návštěvníka, který z kampaně přijde, jako to dělá třeba Brokerjet. Pokud se vám nechce vytvářet speciální stránky, je vaší další možností content targeting, tedy úpravy obsahu stránek v závislosti na kontextu návštěvníka – např. zvýraznění jedinečných vlastností produktu, pokud je člověk na webu poprvé.

Anketa

Plánujete redesign webu v dohledné době?

Našli jste v článku chybu?

28. 4. 2010 15:12

Myslím, že to kolega myslel ironicky. Facebook bude – jako většina jiných projektů – prostě několik let zářit, aby si pak na něho nikdo nevzpomněl.

Kdo mezitím zlikviduje klasický web, bude mít problém. Ale nemám pocit, že by to někdo dělal.

2. 5. 2010 2:20

Libor (neregistrovaný)
Prestashop jako takový je zajimavý systém pro "obyčejné" prodejce, kteří nepotřebují nic speciálního a extravagantního. Jinak jakákoliv další operace (včetně totálního přestylování - CSS) je práce pro bohy. Děkuju pěkně, prestashop nikdy nebo navždy..
Vitalia.cz: 9 největších mýtů o mase

9 největších mýtů o mase

Měšec.cz: Za palivo zaplatíte mobilem (TEST)

Za palivo zaplatíte mobilem (TEST)

Root.cz: Telegram spustil anonymní blog Telegraph

Telegram spustil anonymní blog Telegraph

Vitalia.cz: Test na HIV je zdarma i za pět set

Test na HIV je zdarma i za pět set

Podnikatel.cz: Změny v cestovních náhradách 2017

Změny v cestovních náhradách 2017

Měšec.cz: Jak levně odeslat balík přímo z domu?

Jak levně odeslat balík přímo z domu?

DigiZone.cz: Recenze Westworld: zavraždit a...

Recenze Westworld: zavraždit a...

120na80.cz: Pánové, pečujte o svoje přirození a prostatu

Pánové, pečujte o svoje přirození a prostatu

Podnikatel.cz: Vládu obejde, kvůli EET rovnou do sněmovny

Vládu obejde, kvůli EET rovnou do sněmovny

Vitalia.cz: Pamlsková vyhláška bude platit jen na základkách

Pamlsková vyhláška bude platit jen na základkách

Měšec.cz: Air Bank zruší TOP3 garanci a zdražuje kurzy

Air Bank zruší TOP3 garanci a zdražuje kurzy

Měšec.cz: Vklad na cizí účet je draze zpoplatněn (přehled)

Vklad na cizí účet je draze zpoplatněn (přehled)

Vitalia.cz: Mondelez stahuje rizikovou čokoládu Milka

Mondelez stahuje rizikovou čokoládu Milka

DigiZone.cz: Česká televize mění schéma ČT :D

Česká televize mění schéma ČT :D

Root.cz: 250 Mbit/s po telefonní lince, když máte štěstí

250 Mbit/s po telefonní lince, když máte štěstí

Vitalia.cz: To nejhorší při horečce u dětí: Febrilní křeče

To nejhorší při horečce u dětí: Febrilní křeče

120na80.cz: Co všechno ovlivňuje ženskou plodnost?

Co všechno ovlivňuje ženskou plodnost?

Vitalia.cz: Když přijdete o oko, přijdete na rok o řidičák

Když přijdete o oko, přijdete na rok o řidičák

Podnikatel.cz: 3, 2, 1..EET startuje. Na co nezapomenout?

3, 2, 1..EET startuje. Na co nezapomenout?

Vitalia.cz: Pravda o přibírání na zimu

Pravda o přibírání na zimu