27. 9. 2007

Jak vznikala nová homepage Seznamu

S připravami nové homepage se začalo již na počátku tohoto roku. Vznikla řada grafických návrhů a do podoby promluvil také eyetracker.

Před několika dny (konkrétně v pátek) jsme oficiálně vypustili beta verzi nové homepage Seznamu na adrese http://beta.seznam.cz. Vlastně bych měl správně říci “alfa” verzi, protože od bety se očekává výrazně bližší podoba s cílovým stavem a také značně nižší chybovost. Tomuto spuštění předcházela poměrně velká nervozita. Ve skutečnosti je totiž právě první zveřejnění nového produktu nebo nové podoby stávající služby výrazně nervóznější, než finální spuštění “naostro”.

Tomuto “odkrytí karet” na naší straně předcházel hodně dlouhý a nebojím se říci i hodně bolestivý proces. Kdesi v názorech na novou HP (rozumějte homepage) jsem se dočetl, že když ji má Centrum, tak my musíme rychle také. Docela mě to pobavilo. Chtěl bych umět připravit novou podobu nejnavštěvovanější české stránky tak rychle. Ve skutečnosti padlo rozhodnutí o přípravě nové podoby Seznamu začátkem tohoto roku a krátce na to přišly i první grafické návrhy. Od té doby se chystalo mnoho podob – s různými obdobami jich ve finále bylo hodně přes sto. Na některé z nich se zde můžete podívat. Intenzivní přípravu v podobě konkrétního stanovení cílů a zahájení psaní specifikace jsme spustili v dubnu. Z cílů zde mohu vypíchnout dva hlavní: Posílení hledání a Maximalizace možností personalizace. V původních plánech bylo také postavení nové HP na API, které by umožnilo dodávat i tzv. widgety třetích stran. Od toho jsme nakonec ustoupili a zvolili jsme jednodušší a rychleji realizovatelnou variantu. Widgety můžeme doplnit v další etapě, pokud o ně bude zájem. Což je vlastně otázka na Vás.

Pracovni graficky navrhPracovni graficky navrhPracovni graficky navrh

Ideje grafické podoby vznikaly pro Seznam standardně spoluprací Iva a týmu grafiků. První návrh, který jsme byli ochotni ozkoušet, se zrodil v průběhu června. V této fázi se ke slovu dostalo také zkoumání, co je již vlastně v tomto směru na světovém internetu vytvořeno. Během cca dvou měsíců jsem prostřídal několik personalizovatelných domovských stránek – Live, iGoogle, Netvibes a Yahoo. Tímto se pouštím poněkud na tenký led. Již dopředu jsme věděli, že reakce typu “Zase kopie” je nevyhnutelná. Nicméně stavět novou HP způsobem, který nevyhovuje ani nám ani uživatelům, a to jen proto, abychom nemohli být osočeni z plagiátorství, nemá smysl. Nakonec jsme zvolili střední cestu. Inspirovali jsme se tím, co funguje (například šoupání okének), zvolili jsme vlastní přístup k přidávání a hledání RSS a přidali něco svého nového (třeba nastavování hledacího formuláře). Celé jsme to postavili tak, aby to byla evoluce stávající HP. To chci zdůraznit – vyšli jsme z původní HP. Chtěli jsme z ní přenést jednoduchost použití, přehlednost a datovou úspornost (pro rychlé načtení) a toto obohatit o výše zmíněné prvky.

Heatmapa z eyetrackeru Koncem června vznikl i prototyp nové HP, tedy “jednoduchá” HTML stránka s pár javascripty, která emulovala výslednou funkčnost – otevírání dialogů a šoupání okének. Ještě dříve, než se vývojáři pustili do vyvíjení, jsme tak mohli udělat uživatelské testy. A na ně jsme dostali novou hračku. Tzv. eyetracker neboli mašinku, která sleduje pohyby očí uživatelů po obrazovce. Zpracovat a správně interpretovat výsledky se ukázalo být náročnějším, než jsme čekali, ale ve výsledku jsme se dozvěděli, co jsme potřebovali. A tím je fakt, jestli je rozložení prvnků na stránce optimální a jestli nám některé grafické prvky nepřebíjejí to, co chceme zdůraznit. Určitě se zde na blogu o eyetrackeru dočtete časem více, je to velice zajímavé téma. Nyní můžete nahlédnout na ukázkový výstup – jedná se o tzv. teplotní mapu, která ukazuje, kde utkvěl pohled uživatelů nejdéle. A mimochodem – podoba prototypu se nejvíce blížila skinu “Modrý” z aktuální nabídky skinů na betě. Tato podoba měla být původně výchozí.

Implementace začala na konci července a vývojářský tým čítal čtyři osoby – dva vývojáře a dva webmastery. Tito se nové HP věnovali na fulltime. Další grafici a vývojáři jim dle potřeby pomáhali. Na představení celého týmu jistě ještě dojde. Je zajímavé, že implementace se nakonec ukázala jako nejméně obtížná část. První výsledky byly k vidění na konci srpna (ty dovolené nám s tím pěkně zamíchaly) a neveřejná beta zhruba od prvního týdne v září. A právě během ní došlo k rozhodnutí, že grafická podoba nevyhovuje. Sešly se názory, že chybí pes (opravdu tam nebyl), že barevnost je “vyblitá” (omlouvám se za ten výraz, ale přijde mi výstižnější, než “mdlá”) a že rámečky to celé znepřehledňují. Proto v posledních týdnech proběhl redesign do stávající podoby. Povinností bylo i zčervenání. Změny se nakonec dotkly i skinu “modrý”, takže bohužel již neposoudíte, jak moc chyběl pes a jak moc “vyblité” to opravdu bylo. Celé to vyvrcholilo spuštěním bety a zveřejněním na ILBlogu v pátek.

Na co se tedy můžete na nové HP podívat:

  • 100% nastavení obsahu (dejte si co chcete kam chcete, nebo si vše zavřete)
  • Nastavení hledacího pole (přidejte si i své hledání)
  • Zjednodušené přidávání RSS (včetně hledání RSS!)

Na Vaše názory se těšíme buď zde nebo na diskusním fóru.

'Petr
Petr