Články

V každém z nás je určité množství kreativity a tak není důvod nepustit se s chutí do originálního díla. Nebudeme zde probírat technická specifika stránky, její kód, skripty atd. Raději se zaměříme na rozmístění jednotlivých prvků tak, aby úvodní stránka, coby výkladní skříň vašeho serveru, byla nejen graficky zajímavá a poutavá, ale hlavně přehledná. Aby nenutila uživatele přemýšlet. Aby ji důvěřoval a rád se na ni vracel.

Základním východiskem pro návrh homepage je určení cílové skupiny a účelu našeho serveru. Jinak chceme oslovit 16ti-letého snowborďáka, jinak zákazníka z řad domácností a jinak manažery velkých korporací. Vliv na design bude mít i to, zda chceme budovat značku, prodávat výrobky nebo nabídnout aktuální zpravodajství. Každá skupina vyžaduje trochu jiný přístup. Přesto je několik základních nepsaných pravidel, kterých je přinejmenším dobré se držet, neboť jsou praxí vyzkoušena a zažita. Uživatelé jsou konzervativní a nemají rádi příliš velké změny. Neberme jim to.

Při tvorbě našeho návrhu je nejlepší začít s obyčejnou tužkou a papírem. Základní nákres dělejte černobílý, bez prokreslování detailů. V této fázi se snažíme hlavně přemýšlet o obsahu a rozvržení. Nedbáme na vzhled, ale na logiku. Kam umístíme název či logo stránky, veškeré navigační prvky, vyhledávací a vstupní okna, hlavní obsahovou část, reklamní či jiné grafické upoutávky, atd.

Název serveru

Název, logo a poslání serveru musí být dobře vidět. Chci jako uživatel ihned vědět, kde jsem a čím se firma, resp. její webová prezentace, zabývá. Čteme zleva doprava, odshora dolů a tak je tedy nejlogičtější (není to samozřejmě dogma) umístit tyto prvky do levé horní části hlavičky.

Tip: I když máme k dispozici celou hlavičku, je pro orientaci snazší umístit slogan, sdělení, účel serveru poblíž loga. Pokud možno proporčně tak, aby nezastínilo samotný název či logo.

Vyhledávání

Neocenitelná pomůcka pro rychlé nalezení potřebné informace uvnitř stránek je vyhledávání. Nenechte návštěvníky toto záchranné okno dlouho hledat. Naprostá většina lidí (podle statistik www.webdesignpractices.com  ) očekává hledání v těchto místech (viz obrázek). Pro jednoduché fulltextové vyhledávání vám úplně postačí jedno zadávací okno a za ním tlačítko s nápisem "hledat". Nepište "OK", šipky či jiné matoucí názvy a znaky. Okno vyhledávání také není nutné uvozovat slovy "hledání" apod., vše potřebné vyjádří samotné tlačítko.

Tip: Většina uživatelů má spojené vyhledávání s ikonkou lupy. Pokud to pomůže graficky zatraktivnit vzhled, nebojte se ji použít.

Navigace

Existuje mnoho názorů a způsobů řešení, která popisují umístění navigace. V případě krátkého a relativně stabilního (co do počtu položek) menu bývá obvykle nejlepší vodorovné umístění pod hlavičkou. Je vždy vidět a nechává nám pod sebou celou šířku stránky na samotný obsah. V případě rozsáhlejšího menu, řešíme navigaci častěji vertikálně, což nám dělí návštěvníky na tábor "leváků" a "praváků". Osobně se přikláním k táboru "leváků" – menu vlevo je přeci jen více zažité a při menším rozlišení je vždy vidět. V třísloupcovém portálu by jistě byli "pravým menu" potěšeni inzerenti, ale méně již uživatelé. Rovněž vizuálně je oddělení samotného obsahu od levého kraje pomocí menu ideálním řešením. Pravé menu naopak je vhodné využít jako doplňkovou navigaci. V případě rozsáhlejší struktury serveru zkombinujte horizontální a vertikální menu.

Je důležité aby navigace byla výrazná, měla okolo sebe dostatek prostoru a bylo ihned zřejmé, na co má uživatel kliknout. Používejte proto jednotnou barvu odkazů – ať pro samotný text či jako pozadí menu a důsledně odkazy podtrhávejte. Na grafickém cítění potom záleží, zda zvolíte jako menu editovatelný text na pozadí, záložky nebo grafická tlačítka.

Při tvorbě globální navigace myslete i na vnitřní sekce. Doporučuje se, aby menu na úvodní stránce neměnilo svoji polohu, vzhled a strukturu ani na dalších stránkách serveru. Na homepage si sice příležitostně můžeme dovolit malé výstřelky, ale souvislost by měla být vizuálně zřejmá.

Tip: Není na škodu použít nějaký decentní efekt pro najetí myši na položku v menu (tzv. mouseover). Obvykle ho řešíme změnou barvy fontu či části pozadí nebo lehkou animací.

Aktuální obsah

Hovořím-li o obsahu, záměrně používám přívlastek "aktuální". Chceme-li, aby se návštěvník na náš web vracel, měl by obsah vypadat nejen atraktivně a lákavě, ale musí také vykazovat známky života. Podobně jako obálka časopisu měl by i obsah vaší úvodní stránky být logickým uspořádáním textových a grafických upoutávek toho nejlepšího, co server nabízí. Jako jakási virtuální výkladní skříň.

V textových upoutávkách dbejte na jasné odlišení nadpisu a doprovodného textu pomocí barev a velikosti písma. Text musí být především dobře čitelný. Nevymýšlejte zbytečné experimenty a věřte tomu, že nejlépe se čte tmavý text na světlém pozadí. Správný kontrast si můžete ověřit například pomocí nástroje pro analýzu kontrastu  . Pro klikací texty použijte barvu odkazů a podtržení. Jednotlivým upoutávkám nezapomeňte dopřát dostatek prostoru. Ikona či jiný grafický element (pokud je výstižný) může textovým upoutávkám přidat jak na atraktivitě, tak i na přehlednosti v celém obsahu.

Tip: Nezarovnávejte texty na střed a pokud možno ani do bloku.

Největším lákadlem na úvodní stránce bývají už ze své podstaty grafické upoutávky (proma, self-proma, produktová oznámení, pozvánky, …). V tomto případě záleží především na vkusu a citu grafika. Dovolím si snad jen jedno doporučení, které se týká střídmého použití barev a fontů tak, aby vše korespondovalo se zbytkem stránky. Šest hlavních barev na jedné stránce už hraničí s cirkusem a dva druhy fontů by měly být také dostačující.

Tip: Nebojte se doplnit upoutávku výzvou ke kliknutí a zdůrazněním výhody, které se návštěvníkovi dostane ("klikněte a vyhrajte", "klikněte a stáhněte si zdarma", apod.). Každá upoutávka by měla mít nadefinovanou výzvu k akci a cíl, kterého chceme dosáhnout.

Uspořádejte upoutávky v obsahu tak, aby byla jasně zřejmá hierarchie jejich důležitosti. Ta nejžhavější sdělení by měla být největší a v horní části vlevo.

Zápatí

Zdá se vám zápatí jako nedůležitá součást stránky, která obsahuje nanejvýš povinný copyright? To je ale velký omyl! Nejenže je vhodné stránku graficky ukončit, ale na jejím konci má rovněž místo celá řada užitečných informací a odkazů. Kromě různých ochranných prvků a sdělení zde uživatel ocení možnost doplňkových funkcí a navigace – tisk stránky, mapu serveru, doporučení známému, prohlášení o přístupnosti aj. Někdy je účelné zde zopakovat i globální navigaci. Vizuálně není patička nejatraktivnějším místem na stránce, ale přesto bychom ji neměli opomíjet. Může z grafického hlediska stránku obohatit a učinit ji kompaktnější.

Proporce prvků

Nyní máme všechny části stránky pohromadě a v logickém uspořádání. Víme, kde je uživatel nejčastěji očekává. Nevíme jen, jak přesně budou vypadat. Nastává tedy chvíle pro grafické experimentování s tvarem, barvou a proporcemi. Jedná se o záležitost, která je jen těžko sdělitelná a stojí především na míře výtvarného cítění tvůrce.

Přesto mám pro vás jeden malý tip. Už od antiky se ve vizuálním umění hojně používá tzv. "zlatého řezu". Není divu. Poměr zlatého řezu lze najít v proporcích lidského těla i tváří, v rostlinách, živočiších, nerostech i celé krajině. Je to poměr tak běžný v přírodě, že lidské oko je na něj zvyklé, připadá mu přirozený a proto i velmi příjemný. Není, myslím, na škodu při tvorbě návrhu využít dávných poznatků o tomto "optickém středu". Viz obrázky.

Tento článek pro mnohé možná nepřináší žádná překvapující zjištění. Vychází spíše z již objevených a vyzkoušených poznatků. Přesto se v každodenní praxi utvrzuji v tom, že je potřeba tato užitečná pravidla stále šířit v povědomí tvůrců a majitelů webových stránek. Proto se v příštím čísle ponoříme hlouběji do jednotlivých prvků na stránce. Prozkoumáme je více z pohledu obsahu, jeho smysluplnosti a logiky textů, chyb v typografii atd.

Mnoho zdaru při tvorbě a těším se na další setkání nad webdesignem.