FIREMNÍ BLOG

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

08.02.2021

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
Michal Krčmář
Michal Krčmář
CEO
CEO at Onlineandweb. Over 12 years in the online business. Helping clients to achieve higher profits, being more successful in the digital environment and in online marketing. In digital I went through essentially everything I could (copywriting, PPC, social, web analytics and development). That is why I sometimes feel that I know a lot about the digital environment :-)

Napsat komentář

Vaše e-mailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *