Hlavní navigace

Jak se dělá homepage portálu

Daniel Grunt

Centrum.cz má již několik týdnů novou homepage. Co pro internetový portál homepage znamená? Proč se inovuje a co inovaci předchází? Jak probíhá celý proces tvorby nového vzhledu a jaké jsou hlavní zásady homepage portálu? Kdo ji navrhuje a jaké jsou na ni požadavky? Na tyto a další otázky naleznete odpověď v naší exkluzivní případové studii.

Domovská stránka portálu (homepage, hlavní stránka nebo HP) představuje v očích uživatelů celý portál. To je správné, protože masového uživatele nemusí zajímat (a nezajímá), co vše je za onou hlavní stránkou. HP portálu má základní úkol: umožnit uživateli dostat se co nejrychleji a nejsnadněji k čemukoli, co na Internetu (v našem případě českém) potřebuje. Představuje pro něj „ovládací panel“ Internetu nebo inteligentního asistenta.

1194
Stránka Centrum.cz z března 2000

Částečně lze homepage portálu přirovnat k titulní straně deníku. Také musí na malé ploše podat ty nejdůležitější informace přehlednou formou. Musí zaujmout a nalákat k dalšímu používání. Na rozdíl od titulky deníku má ale homepage portálu mnohem širší záběr. „Neprodává“ pouze vlastní obsah a neinformuje o nejdůležitějších či nejzajímavějších událostech, ale musí uživateli předložit „celý“ Internet, a to takovou formou, aby se v něm dokázal zorientovat a jednoduše ho používat.

Z pohledu reklamy je homepage nejvýnosnější. Jedná se o nejnavštěvo­vanější stránku – v pracovní den ji použije cca 150 tisíc uživatelů, kumulovaně za měsíc více než 800 tisíc uživatelů. Například cena malého banneru je 60 tisíc na týden a při plné vyprodanosti (mimo prázdnin prakticky vždy) je výnos půl milionu korun za týden.

Koncepce HP portálů

Základními stavebními kameny HP, které mají všechny významné portály, jsou především vyhledávání, emailová služba, rozcestník na další portálové služby a aktuální zpravodajství.

Zjednodušeně lze říci, že na Internetu je několik koncepcí hlavních stránek portálů. Silná je koncepce Yahoo.com. Další koncepce je založená především na zpravodajském obsahu. Příkladem ze zahraničí může být maďarský Index.hu. V České republice je to například Tiscali.cz. Někde mezi stojí koncept, který oba předešlé sdružuje. Příkladem může být MSN.com. Více bokem vykročil např. Lycos.com. Zde však jde spíše o opuštění myšlenky univerzálního internetového portálu směrem ke specializaci na tržní niku online zábavy a komunikace.

Kdo a co na HP?

Koncept, styl a produktová strategie portálu se ze všeho nejvíce odráží právě na jeho hlavní stránce. Internet je rostoucí médium stojící před bodem zvratu, kdy poroste ještě mnohem rychleji, aby se ustálilo zhruba na penetraci 65 procent české populace. Již dnes je na Internetu převažující podíl netechnických uživatelů – v branži často označovaných jako BFU. Tento podíl bude výrazně narůstat. Pro takové uživatele je HP hlavním odrazovým můstkem do Internetu.

Jestliže je cílem portálu Centrum.cz zvyšovat svůj podíl na trhu (podle počtu uživatelů), musí se zaměřit na přehlednost a jednoduchost svých služeb – v první řadě na svou homepage. Hlavní zdroj financí portálů se v současnosti přesunuje od klasické mediální reklamy (bannery – ať standardní, tak netradiční formáty) k příjmům z vyhledávání. Není to kvůli tomu, že mediální reklama klesá. Zájem o ní u zadavatelů čím dál více roste a na Internet se již dostávají firmy, které do této chvíle do internetové reklamy neinvestovaly (především FMCG). Ale ještě rychleji roste trh adresářů a klíčových slov. Z tohoto důvodu se Centrum výrazně zaměřuje na vyhledávácí služby. Email je nejpoužívanější internetovou službou – každý ho má a pro nového uživatele je to první zřizovaná služba. Neustálá inovace je nutná pro udržení již získaných uživatelů a akvizici zcela nových nebo stávajících uživatelů Internetu.

V čem stará grafika nevyhovovala?

Jestliže máme jasno ve strategii, je nutné provést analýzu stávající homepage a zjistit, zda této strategii vyhovuje. Základem analýzy je uživatelské testování. Uživatelé zde testují pomocí plnění vámi zadaných úkolů použitelnost služby. Jde sice o metodu poměrně nákladnou, ale podle mého názoru nezbytnou. Je asi největším nebezpečím říct si: „Tvorba služeb je mým denním chlebem, a tak nemůže nikdo vědět lépe, jak stránky pro uživatele navrhnout.“ Takový produktový manažer nebo webdesigner si vůbec neuvědomuje, že jeho zkušenosti a znalosti mohou být (a téměř vždy jsou) úplně jiné, než znalosti a zkušenosti uživatelů služby. Nejdůležitějšími zásadami pro uživatelské testování je správný výběr testovací skupiny. Testovací skupina by měla přesně kopírovat sociodemografickou strukturu uživatelů služby. Vzhledem k obtížnosti tohoto bodu a váze, kterou má v naší analýze, jsme test zopakovali s několika rozdílnými skupinami.

Uživatelské testy jsme doplnili sledováním „klikavosti“ jednotlivých bodů na stránce, analýzou logů a výstupy z hepline.

1195
Starý design Centrum.cz

Z analýzy stávající homepage vyplynuly tyto závěry:

  • První dojem je nejdůležitější. Nejsou pravdivé výzkumy, kde uživatelé uvádějí, že nejdůležitější a na prvním místě je kvalitní obsah. Ano, sami uživatelé tomu věří, ale na základě našeho výzkumu jsme zjistili, že uživatele musí stránka oslovit v průběhu první půl až jedné minuty. Jestliže se tak nestane, naprostá většina uživatelů odchází a vaše stránka nedostává šanci předvést svůj obsah. První dojem, to je především rychlost načítání, grafika a přehlednost služby.
  • Pro časté používání musí služba přinášet uživateli jasnou a identifikovatelnou hodnotu.

Jako hlavní nedostatky stávající homepage vzhledem ke strategii byly označeny:

  • Stránka není příliš čistá a vzdušná, tj. přehledná.
  • Vyhledávací řádek není dostatečně výrazný; roletku u vyhledávání využívá minimum lidí; většina uživatelů nezná rozsah našich vyhledávacích služeb (obrázky, vyhledávání ve zboží, zpravodajských zdrojích apod.).
  • Rozcestník služeb je pro uživatele velmi špatně použitelný – je hutný a nepřehledný.
  • Založení nového emailu je špatně viditelné, ač jde o jedno z nejdůležitějších míst na stránce.
  • Výstupy ze zpravodajství jsou nepřehledné a nelákají k přečtení a kliknutí.
  • Rozdělení katalogu a Centra firem je nepřehledné a matoucí.

Zadání pro tvorbu nové HP

Hlavními body zadání byl důraz na přehlednost, lehkost a líbivý design. Homepage nesmí být nudná, technokratická, ale musí mít styl a být živá, aby vynikla oproti konkurenci. Homepage musí přinášet uživateli hodnotu, aby měl potřebu se na ni co nejčastěji vracet. Jestliže jsme si výše říkali, že HP je „ovládacím panelem“ Internetu, musí mít uživatel vše na dosah ruky. Věci každodenní potřeby dosažitelné okamžitě a ostatní maximálně na tři kliky myší. Velký důraz byl kladen na vyhledávání, které má být dominantou stránky. Rozcestník služeb musí být maximálně přehledný. Vstup do emailu a založení nové schránky musí být snadno dosažitelné a viditelné. Přehled aktuálních zpráv a článků musí být přehledný a atraktivní. Důležitý je důraz na obrázky. Uživatelé stránku nečtou, ale prohlížejí si ji.

Vzhledem k masovosti služby je nutné, aby byla hlavní stránka použitelná ve všech hlavních prohlížečích. V našem případě to jsou zejména MS Internet Explorer ve verzích 5.0, 5.5 a 6, Netscape 6+, Mozilla 1+ a Opera 6+. Navíc má být stránka optimalizována i pro PDA a mobilní telefony. Nezbytností je testování přístupnosti.

S důrazem na jednoduchost, vzdušnost a maximální přehlednost souvisí bolestné „ořezávání“. Centrum má téměř 40 služeb. Prvotní snahou každého tvůrce stránky je dát na ni všechny služby. Tím se ale přehlednost vytrácí a záměr „prodat“ na hlavní stránce všechno je kontraproduktivní. Z tohoto důvodu je nutné umístit na homepage pouze nejdůležitější služby, které používá masa uživatelů. Stále ale platí, že k ostatním službám se uživatel, který je potřebuje, musí být schopen dostat maximálně na tři kliknutí myší.

Ihned na začátku sestavování stránky musí být jasno v reklamních plochách. Reklama na hlavní stránce je nejžádanější, a tudíž nejdražší. Jedná se o zajímavý zdroj financí, ale na druhou stranu mnoho agresivní reklamy může znamenat odliv uživatelů (a v druhé řadě i oněch financí). Součástí zadání tedy musí být i návrh reklamních prvků tak, aby byly pro inzerenta přínosné a na druhou stranu neobtěžovaly uživatele. Proto reklamní prvky nesmí znemožňovat uživateli používání stránky. Zejména vstup do emailu či zadání dotazu vyhledávacího okna.

1198
Nový design Centrum.cz

Velice důležité u každého redesignu je mít na mysli, že každá změna provokuje odpor. Lidé jsou konzervativní a neradi mění již zažité a ustálené zvyky. Vy na druhou stranu víte, že změny udělat musíte, aby vývoj neustal a nepředběhla vás konkurence. Proto je nutné učinit kroky, které tento odpor ke změně sníží. Jestliže to není nezbytně nutné (ztráta dobrého jména, změna v legislativě apod.), je vhodné ponechat návaznost na stávající službu a základní rozložení stěžejních prvků tak, jak jsou uživatelé zvyklí. V našem případě je to například umístění loga, vstup do emailu (který mělo na hlavní stránce Centrum jako první z českých portálů), rozcestník služeb a katalog.

Tvorba/výroba HP

Po vytvořeném zadání následuje rozhodnutí, zda si grafiku vytvořit in-house, nebo zda si ji objednat od externího specialisty. Centrum.cz se rozhodlo pro druhou cestu z těchto důvodů:

  • Potřeba nových svěžích nápadů nezatížených tím, co se dělalo doposud.
  • Tlak na profesionální grafiku a první dojem.

Ve výběrové řízení vyhrála společnost Symbio Digital. Tendru se dále účastnili Sector 31 a FG Forrest. Úkolem Symbia bylo vytvořit grafiku a kód nové homepage Centrum.

Obchodní ředitel Symbia Robert Haas k tvorbě homepage Centra říká: „Vysoký počet návštěvníků s sebou nese značné objemy přenesených dat. Tomu musí být podřízena grafika i vlastní kód. Samozřejmostí se stává minimální počet grafických elementů či nejkratší možné platné způsoby zápisu kódu a názvů selektorů. Rovněž správné strukturování kódu podle standardů XHTML a jeho důsledné oddělení od formátování pomocí CSS je jedním z důležitých předpokladů pro rychlé a přístupné stránky. Ty musí být samozřejmě použitelné i při vypnutých stylech, obrázcích či JavaScriptech. Při vytváření grafiky jsme brali v úvahu nejrůznější aspekty ovlivňující kvalitu uživatelského zážitku. Volba barev musela na jedné straně navazovat na tradici Centra a zároveň splňovat požadavky na spektrum příjemné lidskému oku. V této souvislosti došlo zároveň k nastavení kontrastu textu a jeho pozadí v souladu s pravidlem 2.2 metodiky WCAG. Při přípravě kódu jsme zvolili definici typu dokumentu XHTML Strict, a to s plným vědomím, že po přidání komponent reklamních či statistických systémů nemůže být stránka validní dle standardů W3C. K tomuto kroku jsme přistoupili zejména proto, že jsme chtěli nastavit určitý cíl, ke kterému je třeba se stále přibližovat.“

Po každé etapě následovalo uživatelské testování a dolaďování na základě těchto testů. Finální kód se po implementaci v Centru testoval na použitelnost uživateli a rovněž procházel zátěžovými testy.

Končí práce po spuštění?

Po spuštění (celý proces od začátku analýz po spuštění trval čtyři měsíce) následuje etapa dolaďování. Zde jsou sbírány reakce uživatelů a analyzují se dopady na ostatní služby Centra.

Současně se analyzuje, zda nové úpravy homepage směřují ke splnění stanovených cílů.

Potěšitelné je, že tři týdny po spuštění nové HP:

  • se zvýšila denní návštěvnost HP Centra o více než deset procent oproti předcházejícímu měsíci a o 59 procent oproti stejnému období loňského roku,
  • počet vyhledávání se zvýšil o 48 procent,
  • zvýšil se počet registrací do emailu o osm procent,
  • zvýšila se návštěvnost zpravodajství o deset procent.

Z reakcí uživatelů a blogů zaměřených na webdesign a dění na Internetu vyplývá, že nová HP Centra je vnímána především jako přehledná, lehká a líbivá.

Anketa

Jak hodnotíte nové stránky portálu Centrum.cz?

Našli jste v článku chybu?

9. 6. 2004 20:45

DD (neregistrovaný)
Tomku, ty jsi fakt dementni ubozak, priblblej megaloman a poloidiot.

6. 6. 2004 9:43

karel (neregistrovaný)
Přesně stejně jsem argumentoval obchodníkům z Centrumu a Atlasu. Vyhledávání klíčových slov - 8x méně než Seznam, ale cena je jen cca 70% Seznamu. Takže prudce drahé.
Root.cz: Mirai má nový cíl 5 milionů routerů

Mirai má nový cíl 5 milionů routerů

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

Recenze Westworld: zavraždit a...

Vitalia.cz: Vychytané vály a válečky na vánoční cukroví

Vychytané vály a válečky na vánoční cukroví

Měšec.cz: U levneELEKTRO.cz už reklamaci nevyřídíte

U levneELEKTRO.cz už reklamaci nevyřídíte

120na80.cz: Rovnátka, která nejsou vidět

Rovnátka, která nejsou vidět

Podnikatel.cz: Alza.cz má StreetShop. Mall.cz více výdejních míst

Alza.cz má StreetShop. Mall.cz více výdejních míst

Podnikatel.cz: Udávání kvůli EET začalo

Udávání kvůli EET začalo

Root.cz: Telegram spustil anonymní blog Telegraph

Telegram spustil anonymní blog Telegraph

Podnikatel.cz: Chaos u EET pokračuje. Jsou tu další návrhy

Chaos u EET pokračuje. Jsou tu další návrhy

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

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

Vitalia.cz: Spor o mortadelu: podle Lidlu falšovaná nebyla

Spor o mortadelu: podle Lidlu falšovaná nebyla

Vitalia.cz: Jmenuje se Janina a žije bez cukru

Jmenuje se Janina a žije bez cukru

Vitalia.cz: Nahradí sluch, ale zvuk je zcela jiný

Nahradí sluch, ale zvuk je zcela jiný

Root.cz: Kamery Sony se dají ovládnout na dálku

Kamery Sony se dají ovládnout na dálku

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

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

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

DigiZone.cz: Vedení ČRo: personální změny od ledna

Vedení ČRo: personální změny od ledna

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

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

Měšec.cz: Sleva na dítě a manželku pro OSVČ je zpět. Ale..

Sleva na dítě a manželku pro OSVČ je zpět. Ale..

Vitalia.cz: Analýza letáků: Na co lákají do prodejen?

Analýza letáků: Na co lákají do prodejen?