Nejčastější chyby u návrhu designu / grafiky a jak jim předejít

Grafika na webu hraje v současnosti jednu z nejdůležitějších rolí a design je to první, čeho si vaši potenciální zákazníci všimnou. Je proto potřeba pro ně vytvořit příjemné a především snadno použitelné rozhraní, ve kterém se budou snadno orientovat a nebudou tápat. Zde je souhrn pravidel, kterých je třeba se držet, pokud je vaším cílem navrhnout úspěšný web (a pokud zároveň nechcete zbytečně pálit za další následné úpravy své vlastní peníze).

1. Kompletní style guide pro web

Každý web, ať již jednoduchý nebo složitý obsahuje několik (i desítek) různých typově odlišných stránek. A protože se často byznys, ke kterému se web vztahuje, vyvíjí, je třeba upravovat a aktualizovat i web samotný. A věřte mi, že i po pár týdnech od jeho spuštění nebudete nosit v hlavě, kde se používá jaký prvek a jak se chová, zda je v souladu s brand identity atd. Tohle vše by měl shrnovat dokument, kterému se říká style guide (takový malý svatý grál pro kodéry a pro grafika, který přebírá po někom práci :-)).

Tento dokument by měl obsahovat minimálně níže uvedené prvky:

• Logo –⁠ logo by mělo být ideálně vektorové a také dostupné ve čtvercovém formátu (pro favicon) – nebo alespoň mít podklady, ze kterých se dá favicon vytvořit.
• Font – style guide musí obsahovat také všechny řezy písma a zdroj písma, abyste si jej mohli stáhnout a nemuseli jej zdlouhavě hledat (tady oceníte nástroje jako Invision, které vám již umí vytvořit přímo podklady pro kodéra, kde jsou fonty, velikosti písma, řádkování nadefinované). Fonty se dělí na placené a neplacené. Doporučuji používat ty, které si lze stáhnout z Google Fonts – jsou zdarma a nehrozí nějaké tahanice o licence apod.)
• Nadpisy a podnadpisy – mít nadefinované velikosti h1 až h6 (na to se nejčastěji zapomíná zejména u obsahových webů, kde potřebujete mít obsah strukturovaný, aby bylo jasné, kam spadá daná sekce / podsekce).
• Běžný text – je třeba nadefinovat velikost včetně řádkování.
• Jiné formy textu – například citace, zdroje na konci článku atd. Prostě jakýkoliv textový prvek, který se liší od běžného textu. Zde bych zahrnul i to, jak má vypadat daný prvek na mobilu a jak se má chovat (pokud se liší oproti desktopu).
• Číslované/nečíslované seznamy – v HTML kódu <ul> / <ol> (unordered / ordered list = číslované nebo nečíslované odrážky v textu), je třeba ve style guide vizualizovat, jak mají vypadat i jednotlivé podúrovně  (1.1, 1.2 apod.) a jak bude vypadat jejich formátování. Opět – často se na to zapomíná a řeší se to často až ve chvíli, kdy si někdo vzpomene, že chce například na blogu použít odrážky pro zpřehlednění textu a text vypadá najednou jinak, někde chcete v číslovaném seznamu pak použít další prvky (odkazy, obrázky atd.) a opět kodér potřebuje pak jasné zadání, jak má daný prvek nastylovat. Proto je třeba na to myslet již na začátku a grafika dokopat k tomu, aby vám do style guide nadefinoval vizuální podobu všech číslovaných i nečíslovaných seznamů. Příklad viz níže, jak takový číslovaný seznam může vypadat – tady je navíc ještě „okořeněn“ o rozklikávací tlačítka plus / minus.
• Odkazy – zda budou podtržené, jak se budou chovat jednotlivé stavy (výchozí, hover, active), některé odkazy jsou pak méně / více důležité, proto se může lišit i jejich barevná kombinace / viditelnost.
• Tlačítka (všechny stavy) – jinak se budou chovat a vypadat tlačítka, která mají sloužit ke konverzní akci (odeslání formuláře), jinak sloužící jako navigační prvek (tlačítka zpět, zobrazit více apod.). Opět je třeba nadefinovat, jak bude vypadat výchozí stav, jak po najetí myši atd.)
• Tabulky – důležité hlavně pro obsahové weby, kdy chcete ukázat podobný výstup jako například z Excelu, je třeba nadefinovat ve style guide například i to, pokud chcete nějakou buňku či řádek zvýraznit oproti ostatním (něco jako podmíněné formátování v Excelu) nebo pokud chcete mít třeba popisky buněk / sloupců / řádků podbarvené a jak pro lepší přehlednost.
• Barvy – je potřeba si definovat seznam použitých barev (ověřit si dostatečný kontrast vůči pozadí, například dle nástroje WCAG 2.0, pozor na používání zbytečně mnoho podobných barev), pro určení vhodných doplňujících barev, lze pak využít například nástroj Paletton.com.
• Vzhled formulářů – je třeba mít navržené vizuály i pro formuláře, včetně jednotlivých stavů (error hlášky, úspěšné odeslání formuláře).
• Ikony – ideální je mít všechny ikony uložené / navržené ve style guide k vašemu webu nebo mít odkazy na sety ikon, které byly použity (opět se vyhnete nechtěnému a zdlouhavému pátrání na vlastní pěst, až to bude jednou potřeba). Jinak ikony je možné si také nechat vytvořit, ale je to ta dražší varianta.

Ukázka šablony pro sestavení style guide – takto nějak výsledný dokument vypadá.

2) Začněte s mřížkou

Většina webů pracuje s vertikálním rozložením, které ale funguje jen v určitých případech. Mřížka slouží kóderům, a zajistí vám to, že i po kódování grafiky zůstane vše na svém místě – že web zkrátka bude vypadat tak, jako jej grafik nakreslil v grafickém návrhu. Proto by navržením mřížky měl začínat návrh designu pro každý web. Mřížka také pomáhá v zarovnání objektů a zvýšení přehlednosti a je pro kodéra vodítkem, kde má být který prvek umístěný atd. Nejčastěji se používá mřížka nástroje Bootstrap, která pracuje s 12 sloupci, které jsou od sebe vzdáleny 30 pixelů.

Návrhem mřížky to však nekončí, protože si musíte dát pozor také na to, jaké rozestupy máte mezi jednotlivými sloupci. Všechny mezery by měly být stejné, protože jinak web působí zmateně. V Bootstrapu na to naštěstí najdete nástoj Spacing, který nabízí přednastavené mezery mezi sloupci nebo vám umožní si vytvořit vlastní.

Jedna z možností rozložení gridu v rámci Bootstrap.

3) Nebojte se opakovat jednotlivé prvky / elementy

Prvky, které se v grafickém designu opakují jsou pro uživatele přirozeně přitažlivé – respektive – když se s daným prvkem na webu již setkal, už se na webu bude cítit trochu více jako doma. Problém je naopak, když se každá stránka / obrazovka chová a vypadá jinak – uživatel si musí opět na vše znovu zvykat, zkoumat a testovat, jak co funguje, což zvyšuje čas, který musí na stránce strávit a je to také trochu frustrující.

Proto už v základní konstrukci webu (v tzv. wireframu) nesmí chybět prvky, které zůstanou stejné na všech stránkách webu. Případné výjimky samozřejmě můžete (a časti nusíte) do wireframu zahrnout, ale počítejte s tím, že s každou další odlišností se prodlužuje doba kódování a zvyšuje zmatečnost / složitost celého webu. Důležité je při tvorbě webu pracovat s komponentami, což jsou bloky, které mají stejný základ, ale lze je libovolně obměňovat. Opakování prvků je dnes běžnou záležitostí, protože je výhodné pro uživatele i poskytovatele webu.

Každý blok má jiný obsah, ale jedná se o jeden a ten samý prvek, který se opakuje.

4) Buďte konzistentní

Uspořádání webu musí uživateli na první pohled dávat smysl, protože jinak se cítí frustrován (musí být pořád na pozoru a vlastně si neustále stále vše osahávat a testovat).

Představte si, že jste ve velké kancelářské budově, která má jednu dlouhou rovnou chodbu plnou dveří a máte ji proběhnout v co nejrychlejším čase. První se dveře otevírají směrem dovnitř, druhé ven, další se zase rozjíždějí do stran. Jednou mají kliku, podruhé se otevírají automaticky na zmáčknutí knoflíku, potřetí zase jen jemným stlačením kliky. A teď si vezměte, že máte pořád stále jednu a tu samou chodbu ve vedlejší budově, která je pořád plná dveří, ale všechny se otevírají stejným způsobem. Kterou chodbou podle vás proběhnete rychleji a proč?

Komunikujte s ním neverbálně, na základě barev i tvarů tak, aby se jeho pohyb na webu odvíjel intuitivně bez delšího přemýšlení. Protože nikomu se nechce dlouho přemýšlet – a to samé nechcete po uživateli ani vy, protože může vymyslet nějakou zatáčku, se kterou jste nepočítali anebo jen celé bádání na vašem webu prostě vzdá, protože „je moc složité“ v danou chvíli.

Pokud například na hlavní stránce použijete kulatý button a na další stránce jej vyměníte za šipku, pro zákazníka je to matoucí. Kdokoliv, kdo přijde na váš web, by neměl mít problém se zde orientovat, protože jinak ho zkušenost s vaším webem odradí a většinou odchází.

Množství informací, které za den musíme zpracovat se zvyšuje, roste zahlcenost internetu a tím i pádem klesá naše chuť trávit někde čas, kde nás někdo zdržuje nebo dokonce okrádá o náš drahocenný čas. Čím více toho musíme na webu řešit, přemýšlet, tím klesá naše spokojenost. A teď si představte, že si u vás mám něco koupit a musím se 10 minut lopotit s vaším webem. Na konci celého procesu (nákupu, dohledání informací) nejspíš nebudu mít žádný super pocit, zůstane pouze pocit nasranosti. Přitom třeba máte super zboží, ale já si jej právě proto tak nevychutnám, protože můj „uživatelský zážitek“ prostě žádný nebude :-).

 

Například takto může vypadat konzistentní style guide.

5) Nastavte si optimální kontrast

Kontrast je skvělým nástrojem, jak ovládat pozornost diváka. Pomáhá zvýraznit to, co považujete za důležité a uživateli tak usnadňuje orientaci. Je to neverbální cesta, která umožňuje nejen zdůraznění informací, které by si uživatel měl odnést. Krom toho také v  zákazníkovi vzbuzuje zvědavost a umocňuje příběh vašeho sdělení.

Kontrasty doporučuji užívat k zvýraznění odkazů, čehož můžete dosáhnout případně i podtržením. Kontrast používejte ale i v běžném textu, který musí být dobře čitelný a splňovat WCAG 2.0 standart. Zároveň úplně nedoporučuji na web umisťovat písmo menší než 16 pixelů. Dost špatně se čte.

Pomocí kontrastu můžete ovlivnit, co si uživatel z vašeho webu zapamatuje, nebo co jeho zrak upoutá jako první.

6) Méně je více

Studie provedená Microsoftem v roce 2015 zjistila, že rozsah naší pozornosti klesl na pouhých 8 sekund (a stále klesá).

Pro srovnání – akvarijní rybička udrží pozornost 9 sekund. Z toho plyne, že nejlepšími online zákazníky by byly akvarijní rybičky…

Vaším cílem je předat potenciálním zákazníkům co nejvíce informací v co nejkratším čase. Uvědomte si, že cokoliv přidáváte na webovou stránku, rozptyluje pozornost uživatele.

Pokud webová stránka obsahuje příliš mnoho elementů, pak se důležité prvky ztrácejí. Každý prvek umístěný na vašem webu proto musí být účelný. To se týká například i číslování stránek, které je často na stránce zbytečně zvýrazněno, ačkoliv nenese žádnou informaci o vašem produktu. Vždy si položte otázku, zda to, co na web umisťujete, bude vašeho zákazníka opravdu zajímat.

Na následujícím příkladu vidíme zbytečně moc textu, které by se daly shrnout / odhlehčit (použít méně textu – respektive jeden větší headline a podmínky případně dovysvětlit v rozrolovávacím textem nebo na další stránce například).

Příliš mnoho prvků působí přeplácaně a na první pohled chaoticky.

7) Nepoužívejte více než dva fonty

Dva fonty bohatě stačí. Pokud jich chcete použít více, musíte pro to mít dobrý důvod.

Je potřeba rozlišovat mezi patkovým a bezpatkovým písmem. Webovým standardem je bezpatkové písmo kvůli lepší čitelnosti na elektronických zařízeních. Vámi zvolený font by měl být dobře čitelný i při zobrazení v menší velikosti. Navíc by se na webu měly vždy objevovat fonty z jediné rodiny písma, což je skupina řezů, které jsou odvozeny od jednoho typu písma.

Tyto „rodiny“ jsou tedy předem navrženy tak, aby k sobě jednotlivé fonty ladily a navzájem se doplňovaly.

Rodina písma zahrnuje několik podobných typů písma.

8) Mobile first přístup

V případě, že volíte desktop first pak to, jestli vůbec a jakou mřížku si vyberete ovlivní to, kolik času strávíte nad upravováním zobrazení pro mobilní zařízení. Jak roste množství uživatelů smartphonů a jejich důležitost v onlinu (tržby vykonané skrze mobilní zařízení rok od roku rostou v e-commerce prostředí, jak u nás, tak ve světě), je potřeba přemýšlet responzivně a vytvořit web, který poskytuje jednotný design, ale různá zobrazení v závislosti na zařízení.

Mobile first přístup vzniknul jako reakce na navrhování webů pouze pro desktopy.

V současnosti má své opodstatnění, protože většina uživatelů navštíví váš web z mobilního zařízení (search fáze = získávání prvotních informací a pokud je objednávkový proces jednoduchý, mohou mobilní zařízení představovat i hlavní prodejní kanál – liší se to ale opravdu byznys od byznysu).

Pro vás to znamená navržení rozhraní od nejmenších displejů. Malý displej mobilního zařízení je při tom omezující z hlediska prostoru a proto se při tvorbě webu tak často opomíjí. Návrh grafiky vašeho webu pro malý displej vám ale pomůže si ujasnit, co je na webu opravdu důležité a desktopová verze se vám pak bude tvořit daleko snáz.

Pokud nemáte možnost grafického návrhu pro malá zařízení, je pro vás o to důležitější, aby se dal obsah, který na web vkládáte snadno upravit pro malá rozlišení. Dlouhé texty pro mobilní zobrazení buď zkraťte nebo přeskládejte tak, aby se obsah zobrazoval správně. Jakýkoliv text bude navíc na mobilu vypadat mnohem delší než na desktopu, což zákazníka může odradit. Příklad viz níže, kde vidíme, že na mobilu se nezobrazuje tolik textu jako na počítači a horní lišta s kategoriemi se na mobilu zobrazuje v hamburger menu.

V mobilním zobrazení pracujeme s faktem, že uživatel bude scrollovat, informace jsou daleko více zhuštěné a tomu je nutné přizpůsobit i návrh (desktopového / responzivního / mobilního) webu.

9) Tvořte co nejvíce variabilní obsah

Počítejte s tím, že čas od času budete chtít svůj web pozměnit a variabilita vám v tomto případě ušetří spoustu času i peněz. Pokud například bude mít nějaká komponenta na vašem webu stálou pozici a vy ji budete chtít převést na běžný text, nepodaří se vám to.

Je proto třeba myslet dopředu.

Řešením jsou v tomto případě SVG (Scalable Vector Graphics) formáty, které můžete vytvořit v počítačových programech jako je Inkscape. Najdou své využití jak pro tvorbu ikon, textů, animací či logotypů a zároveň mají menší datový objem než bitmapy.

Níže opět vidíme příklad.  To, kam ukazují šipky a i text v bublinách se bude těžko měnit, respektive už na to potřebujete zásah grafika.

Je to pak vždy o tom se zamyslet nad tím, jak často a jak rychle budete na stránce potřebovat něco měnit. Někdy je prostě lepší a rychlejší, než plácat napojení na editor to prostě zeditovat u menších webů přímo v kódu. Pokud to ale finance dovolí, je lepší mít na vše editor a myslet na to, že design musí fungovat také potom, co něco změníte – nebo by alespoň měl :-).

Takto může vypadat nevariabilní hlavní strana.

Je třeba také vzít v potaz už při samotném návrhu i variantu, že web se bude dále rozvíjet. A že nebude třeba jen v jednom jazyce. V tu chvíli již potřeba editoru a požadavky na to, aby se grafika hned „nerozbila“ když přeložím text, který bude ve výsledném jazyce výrazně delší / kratší. Vynásobte to počtem jazykovým mutací a zjistíte, že se bez editoru neobjedete a že měnit pokaždé uspořádání grafiky již je docela nákladné….

Taktéž přidávání dalších stránek a jejich jazykových mutací na váš web je bez variabilního obsahu nákladné a neobejdete se v takovém případě bez pomoci grafika. Proto při vytváření designu vždy přemýšlejte dopředu.

10) Komprese audiovizuálních prvků

Obrázky se líbí všem, každý chce mít web zajímavý, barevný, jiný a já nevím, co ještě :-).

Ale aby to nejenom dobře vypadalo, ale také správně fungovalo a také aby se vše rychle načítalo na všech zařízeních, je třeba mít i obrázky v dobré kvalitě.

Čož znamená mít kvalitní fotografie ve vyšším rozlišení, které můžete zmenšit a stále vypadají dobře.

Vysoká kvalita bitmapových zdrojů vám zajistí, že je půjde exportovat ve dvojnásobném, ideálně trojnásobném rozlišení. Při exportu se obecně vždy snažte o co nejmenší kompresi, protože finální velikost obrázku optimalizujete až v závislosti na rychlosti webu. Při kódováním se vám takto vysoké rozlišení bude hodit, protože vizuální prvky půjde přizpůsobit i retina displejům.

Na retina displeje nesmíte zapomínat. Nejjednodušší cestou, jak adaptovat váš web pro takové displeje, je vytvoření jediného obrázku, který umístíte na web tak, aby se zobrazoval všem zařízením, ať už mají retinový displej nebo ne. Retina displeje však mají téměř dvojnásobné rozlišení, což znamená, že fotografie, kterou umístíte na web pro retinový displej bude obsahovat 4x více pixelů, čímž rapidně narůstá její datový objem a pro zobrazení na mobilu je zbytečně velká. Řešením je v tomto případě využívání prvků generovaných HTML a CSS, abyste nemuseli připravovat několik různých verzí obrázků.

Pro web je nejvíce doporučovaný formát JPEG právě proto, že umožňuje kompresi bez výrazné ztráty na kvalitě. Pokud však nevkládáte na svůj web přímo fotografie, ale nějakou grafiku, bude pro vás vhodnější formát PNG, který lze nahradit také již zmiňovaným SVG. Další formáty jako je AVIF nebo WEBP se generují automaticky.

PNG umožňuje bezeztrátovou kompresi v rastrové grafice a používá se pro malé ikony či menší obrázky (rozdíl mezi PNG a JPG u třeba banneru přes celou obrazovku může být třeba i několik MB, které chcete po uživateli, aby si musel vždy stáhnout při každém načtení vašeho webu). Proto je třeba hodně přemýšlet i nad výslednou kompresí.

Formát PNG na rozdíl od JPG podporuje průhlednost.

Myslím, že jsem to tady již několikrát zmiňoval, ale pro check toho, co by se na webu dalo optimalizovat (nejen z pohledu komprimace audiovizuálních souborů) se dají využít nástroje:

• https://gtmetrix.com/
• https://developers.google.com/speed/pagespeed/insights/

Je však potřeba umět dané nástroje používat, respektive umět správně interpretovat data odsud (například chápat, že GTMetrix ve free verzi bere často server z Kanady, tzn. ping nebude tak hrozný, že cílem není dosažení skóre 100 / 100 ale určit slabá místa a ta, která opravit / zoptimalizovat můžu, tak opravit / zlepšit a případně si udělat benchmark jiných podobně zaměřených webů, určit si, kam se chcete u jakých metrik dostat a zda je to vůbec reálné s ohledem na vaše finanční možnosti nebo použité prvky na webu, které nutně potřebujete (reklamní systémy, další third party software). Ale to jsem trošku odbočil :-).

Různé varianty komponent si žádají obrázky, které budou vyexportovány ve stejné velikosti a výřezu jako tomu bylo v návrhu grafiky. V případě, že na webu pracujete se sliderem (tedy máte více obrázků, které se střídají), pak musíme obrázky exportovat pro stejné rozměry, aby se slider choval při překlikávání stejně atd.

Zároveň pokud používáte v grafice ořezy obrázků, přenechejte to kodérovi a obrázek vyexportujte klasicky ve čtvercovém formátu. Obrázek se pak bude mnohem lépe upravovat přes redakční systém a dosáhnete tak i menší velikosti obrázku. Přenesením masky do kódu se vám otvírají nové možnosti a můžete vytvářet různé transformace a efekty.

Pamatujte, že způsob ořezu ovlivní výslednou velikost obrázku na webu.

Co váš web může ohrozit více než velké obrázky, je video. Proto jeho umístění na web vždy dobře promyslete.

Proč umisťovat video na web:

• Jedno krátké video někdy vysvětlí celou problematiku lépe, rychleji a efektivněji než tuna textu.
• Odlišíte se / navazujete na nějakou formu komunikace (typicky reklamy).
• Interaktivní, osobitější (mluví k vám někdo vaší řečí a nejčastěji za tím je nějaký člověk z masa a kostí = je to důvěryhodnější) a tak dále….

Důvodů proč mít video na webu, by se našla celá řada. Co ale důvody proč ne, nad tím jste už zkoušeli zapřemýšlet?

Proč neumisťovat video na web:

• Jedná se o velký soubor, který web zpomaluje (a to fakt hodně), dá se to vyřešit například tím, že nenačítáte hned celé video při načtení webu, ale až po interakci uživatele (klikne na video, protože si jej chce přehrát, v tu chvíli dotahujete data nutná k přehrání videa, ale neděje se tak při každém pageloadu stránky, Google i uživatelé vám za to poděkují – a to tak, že hodně :-)).
• Komprimací se snižuje kvalita videa – pokud jste se někdy dívali na nekvalitní stream videa, tak víte, o čem je řeč – vidíte jen nějaké rozmazané cucvleky, podobně může dopadnout i špatná komprimace videa.
• Mobilní zařízení mohou mít problém s přehráváním daného videa – chybí vhodný přehrávač video, pomalé připojení atd.

Hlavní nevýhodou videa je zpomalení webu, které s sebou nese, protože je mnohem větší než fotografie. Z tohoto důvodu video před umístěním správně komprimujte a ujistěte se, že se tím významně nezhoršila kvalita obrazu a samotné načítání webu.

 

Nejlepší pro váš web bude, pokud se video bude spouštět až po interakci uživatele.

Pro mobilní zařízení je třeba nastavení videa upravit, protože často mohou mít problém s jeho přehrátím a zpomalení webových stránek se tak může více projevit. Dle vašeho nastavení se video na mobilních zařízeních nemusí zobrazovat buď vůbec nebo se spustí až po interakci diváka, takže web zbytečně nezpomaluje. Méně starostí vám zajistí staré dobré statické objekty nicméně kvalitní video, které diváka zaujme, ho na vašem webu udrží několik minut, což je značnou výhodou.

11) Používejte neviditelné prvky

Neviditelné prvky na stránkách posunou váš web o úroveň výš.

Jedná se o funkci, která umožňuje „rozbalit menu“, zobrazit nápovědu nebo něco podrobněji popsat.

To vše po pouhém najetí kurzorem právě na neviditelné tlačítko. Jejich využití bývá opomíjeno pravděpodobně proto, že slouží převážně uživatelům, kteří web navštěvují ze svého počítače. Použití tohoto nástroje tedy zvolte v závislosti na tom, jak vaše cílová skupina web navštěvuje. Rozhodně však je na místě užití neviditelných prvků alespoň zvážit, protože se jedná o nástroj, který opět usnadní orientaci a náročnější uživatelé ho ocení.

 

Příklad použití neviditelného tlačítka.

12) Web se musí zobrazovat na všech monitorech stejně

Každý uživatel na váš web přichází z jiného zařízení a u desktopů se tak často objevují neshody v zobrazení. Váš web se musí vypadat stejně na monitoru s velkým i malým rozlišením. Při kódování proto počítejte s rozlišením webu od 320 pixelů bez pevné horní hranice, protože ta se právě liší. Vyhněte se rizikovým prvkům, které se i v běžném rozlišení špatně přizpůsobují velikosti displeje.

13) Ikony a loga tvořte vektorově

Vektorové ikony opět souvisí s variabilitou, protože se při zobrazení ve větším rozlišení dokážou roztáhnout.

Nejlepší je na ikony SVG formát. Pokud nemáte žádný vektorový formát k dispozici, pokuste se ho sehnat na internetu.

Rozhodně doporučuji se před vytvářením ikon na míru podívat, co nabízí fotobanky, které poskytují sady ikon za výhodné ceny. Nejznámější jsou asi Icontail, Iconsolid a Shuttershock, kde seženete jednotlivé sady za pár dolarů. V případě potřeby pak stačí kontaktovat grafika, aby pro vás na míru připravil nějaké konkrétní chybějící ikony.

Hlavní stránka Icontailu.

14) Opatrně s animacemi

Umístění animace na web je vhodné pouze v případě, že uživateli šetří čas.

Vaše kreativita při tvorbě webu nesmí omezovat cíle vašich zákazníků. Některé zdroje uvádí, že animace by neměla trvat déle než půl vteřiny. Pokud se do tohoto času vejdete a vaše animace bude účelná, určitě uděláte dobrý dojem, ale platí to samé, co jsem zmiňoval výše – všeho s mírou.

Animace musí uživateli usnadňovat dosažení jeho cílů a nesmí ho zdržovat.

15) Zbytečně nevybízejte k akci

Některá tlačítka svým vzhledem vybízí uživatele k akci, ale ve chvíli, kdy na ně klikne, tak se nic nestane.

Jasně proto rozlišujte mezi interaktivními tlačítky tak, aby je zákazník na první pohled poznal a hlavně, jak jsem již zmiňoval výše – aby se vždy prvky na webu chovaly stejně.

Grafické prvky, které jsou pro vás důležité (přechody do košíku apod.), musí být dostatečně výrazné. Aby uživateli bylo jasné, kam může kliknout a hlavně – aby to intuitivně sám udělal, až t bude třeba (rozhodnul se, že si to tedy koupí).

Častokrát si ani neuvědomíte, že je váš web v tomto směru matoucí. Kam vaši zákazníci klikají, se naštěstí dá snadno vyhodnotit pomocí UX auditu / pomocí heatmap / focus group atd. Variant je spousta, stačí jen chtít a o váš web se zajímat.

Chování uživatelů na webu / internetu se také postupně mění, proto pořád platí také staré známe testovat, testovat a pak zase testovat. A vyhodnocovat – to je oblíbená kratochvíle zejména v korporátech – sbíráme data, ale nic s nimi neděláme (anebo ani nevíme, kde je máme, ale hlavní je, že „to sbíráme“).

Některé uživatele může napadnout kliknout na bílý kulatý kruh, protože si může myslet, že se jedná o tlačítko.

Na závěr – ptejte se, zjišťujte

Snažte se zkrátka co nejvíce přiblížit vašim zákazníkům a zajímejte se o to, co by na webu rádi viděli. Pomohou vám s tím dotazníky. Přístupné jsou ty od Google Docs nebo Survio. Otázky, které v dotazníku zvolíte, ovlivní to, kolik času strávíte vyhodnocováním, proto volte raději uzavřené otázky (A, B, C), aby se odpovědi, které získáte, snadno kvantifikovaly (a snadno vyhodnocovaly).

Pravidelně vyhodnocujte návštěvnost, na což jsou nejlepší Google Analytics. Důležité je měřit konverze a věnovat pozornost tomu, jak se návštěvníci vašeho webu chovají, kolik času průměrně na vašem webu stráví a kolik procent návštěv vede k nějaké další akci. Časové okno je v tomto případě zcela individuální.

Pokud váš web denně navštíví 5 zákazníků, nejedná se o vzorek, který by cokoliv reprezentoval. Vždy zkrátka čekejte na množství zákazníků, které je významnější. Statistiky ohledně návštěvníků vám odhalí, co je třeba zlepšit.

Všechno je to v detailech, které vás odliší od konkurence a ve výsledku vám ušetří spoustu peněz. Pokud na stránky něco umisťujete, vždy pro to mějte dobrý důvod. A nakonec – nezapomínejte na web při tvorbě grafiky umístit textovou stránku o ochraně osobních údajů, což je něco, co už dnes musí mít každý web a jinak byste se mohli dostat do potíží. Je jednoduché ji vytvořit i dodatečně, pokud máte hlavičku webu propojenou s obsahem.

Přeji hodně štěstí při tvorbě vašeho webu.

A když si s něčím při jeho tvorbě nebudete vědět rady, napište, třeba se domluvíme na nějaké konzultaci. Source : Krcmic.cz