Grafický design vám vydělá peníze

  1. Pomůže návštěvníkovi v orientaci na webu
  2. Zvýší zapamatovatelnost webu návštěvníkem
  3. Podpoří vnímání vaší značky
  4. Vyvolá správné emoce
  5. Zvýší konverzní poměr

Grafický design tvoří jen malou (ač důležitou) část vašeho webu

1/
Web se vám
samozřejmě musí líbit!

Váš názor nemá výrazný vliv na obchodní výkon webu. Názor vašeho grafika také ne.

Líbí se vám váš web? To je dobře. Alespoň dáte svému webovému grafikovi další zakázku. Na předchozím tvrzení to ale nic nemění.

Grafický design vzniká na pevných základech,
nikoliv jako kreativní erupce vašeho grafika

Grafický návrh webu není umělecké dílo, ale nástroj pro podporu obchodní výkonnosti webu. Vzniká na základě uživatelského výzkumu a v kontextu vašeho byznysu. Názory vám prodávat nepomohou, raději s grafikem diskutujte dostupná fakta.

2/
Web ale musí
být moderní!

Váš webový grafik se o to postará. Weboví grafici jsou také jediní, kdo bude „trendovost“ vašeho designu řešit.

Lidé chodí na weby kvůli obsahu a ne grafice

Vliv trendů na výkon webu je relativně nízký. Navíc, viditelně staré weby mohou být vnímány jako důvěryhodnější.

3/
Web musí respektovat
principy grafického designu

Existuje rozsáhlá grafická teorie, která pomáhá snižovat riziko selhání webu. Škoda, že ji málokterý webový grafik ovládá.

  • 80/20 Rule
  • Aesthetic-Usability Effect
  • Affordance
  • Attractivenes Bias
  • Cathedral Effect
  • Chunking
  • Closure
  • Consistency
  • Contrast
  • Feedback Loop
  • Fitt's Law
  • Framing
  • Gestalt Rules
  • Golden Ratio
  • Hick's Law
  • Horror Vacui
  • Inverted Pyramid
  • Mental Model
  • Ockham's Razor
  • Picture Superiority Effect
  • Priming
  • Signal-to-Noise Ratio
  • Threat Detection
  • Visibility

Kdy je web vnímán jako hezký?

Existuje vysoká korelace mezi dlouhodobou atraktivitou webu a dojmem nabytým během prvních 50–500 ms.

Co z toho plyne pro web?

  1. Jasná hierarchie
  2. Vizuálně výrazné prvky
  3. Jednoduchost a čistota
  4. Rychlost načítání

Stanovte si jasné vizuální priority
když řve vše, není vidět nic

Nečitelné weby nikdo nečte

Lidé na webu text scanují a my jim musíme co nejvíce ulehčit jejich práci, jinak si ho prostě nepřečtou.

Bílý text na černém pozadí čtou lidé o 32 % pomaleji než černý na bílém

Ideální délka řádku je okolo 75 znaků na řádek na desktopu, 35–50 na mobilu. Porovnejte následující ukázky. Která se lépe čte?

Řádkový proklad 1,5 /
cca 45 znaků na řádek
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi volutpat enim nec arcu elementum maximus. Mauris dapibus sem nec nisl sollicitudin, ut tincidunt enim ultricies. Pellentesque consequat lacinia lacinia. Donec vel dictum purus. Aliquam tincidunt dui eget lacus dictum, id luctus mauris pharetra. Quisque quis pharetra ex.
Řádkový proklad 1 /
cca 80 znaků na řádek
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi volutpat enim nec arcu elementum maximus. Mauris dapibus sem nec nisl sollicitudin, ut tincidunt enim ultricies. Pellentesque consequat lacinia lacinia. Donec vel dictum purus. Aliquam tincidunt dui eget lacus dictum, id luctus mauris pharetra. Quisque quis pharetra ex. Praesent dapibus blandit nulla sed viverra. Donec interdum convallis lacus hendrerit bibendum. Nulla accumsan diam vitae dui volutpat, cursus dignissim risus mattis. Etiam rhoncus est eu ante faucibus vehicula. Praesent ornare ullamcorper elit, at cursus dolor dignissim non. Phasellus eu diam sed arcu pulvinar ornare porttitor vitae lacus. Proin ullamcorper felis sit amet ipsum elementum consequat. Quisque mattis posuere massa. Nunc suscipit iaculis lobortis. Integer tincidunt mauris ut turpis convallis eleifend. Cras lacus tortor, elementum quis malesuada vel, accumsan pharetra neque. Mauris quis convallis sapien. Phasellus elementum lacus quis turpis elementum, et finibus ante luctus. Quisque ultricies viverra turpis eget volutpat. Donec in pharetra odio, eu tincidunt massa. Maecenas quis molestie ex.

Je třeba používat takový řádkový proklad, který není příliš hutný, ale zároveň dbát na to, aby kvůli „přepálenému“ prokladu jednotlivé řádky nevypadaly jako seznam samostatných položek. Je tedy vhodné držet se kolem hodnot cca 1,5 na desktopu a 1,8 na mobilu.

Střední výška písma ovlivňuje čitelnost, stejně jako stavba znaků

Minusky jsou lepší než verzálky — jsme na ně více zvyklí, takže je rychleji scanujeme. Jak se vám čte tato věta?

Nemluvě o situaci, kdy je verzálkami vysázený celý odstavec či delší text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque at faucibus risus. Sed ullamcorper arcu vel ex dapibus, in pretium velit luctus. Praesent egestas neque ut erat rutrum ultricies eu in lectus. Vivamus aliquet dolor ut mi cursus convallis. Cras rutrum, urna ac ornare porttitor, lorem elit viverra dui, et aliquam dolor quam at nulla. Nullam vel mi venenatis, iaculis odio at, vulputate enim. Nam id erat urna. Duis et nunc mattis, laoreet mauris vel, sagittis tellus. Fusce a gravida purus.

4/
Web musí respektovat
specifika svého média

Reklama je pro návštěvníky obecně nezajímavá. Ignorují tedy cokoliv, co jako reklama působí.

Banner = obdélník, který je výrazně odlišný od pozadí webu. Lidé je přeskakují.

Jediná věc horší než banner
je automaticky rotující banner
Lidé neuvidí ani jednu
z vašich upoutávek
Spolehlivě zabijete nejexponovanější
prostor svého webu
1 2 2

Fotografie z fotobank

Jsou levným způsobem, jak srazit důvěryhodnost vašeho webu na minimum. Navíc je lidé ignorují. Nechte si raději nafotit vlastní fotky.

Jak se liší zarovnání popisků u formulářových polí?

Popisek nad polem je vidět i na mobilu, lidé ho nejrychleji vizuálně asociují s polem a zrychlí vyplnění formuláře.
Popisek vedle pole šetří vertikální prostor formuláře, ale musíte ho ošetřit na mobilní verzi webu.
Popisek v poli je špatný nápad pro delší formulář. Lidé totiž zapomenou, co vlastně vyplňují.

5/
Zapomeňte na názory
a svou grafiku otestujte!

Už jsme si řekli, že názory se nepočítají – jak tedy přistoupit k designu objektivně? Víte, jak má váš design působit na návštěvníky. A to můžete otestovat.

Pětisekundový test

  1. Pomůže vám ověřit první dojem z vašeho webu
  2. Ukažte člověku váš nový web na 5 sekund
  3. Zase ho schovejte a zeptejte se, co si zapamatoval

Kartičkový test

  1. Ukažte člověku váš nový web
  2. Dejte mu kartičky s vlastnostmi
  3. Nechte ho, ať vybere ty, které mu k webu sedí nejvíce (pak si s ním o tom popovídejte)

6/
A nakonec si dobře nastavte
měření návštěvnosti!

Vliv grafického designu na konverze prostě neodhadnete bez pohledu do analytického nástroje.

Až tedy budete příště řešit grafiku:

Ptejte se grafika: „Proč to tu je?“ a „Jak to
pomůže mému byznysu?“
Uvědomte si, zda dokážete obsah
pohodlně číst.
Zbavte se všech (rotujících) bannerů
a fotek veselých chlapíků z fotobank.
Uvědomte si, zda hypermoderní design
podporuje pozici vaší značky.
Ukažte návrh lidem, na které cílíte.
Testujte emoce a skryté zprávy.
Nastavte si pořádně měření a nespokojte
se s tím, že jste web spustili.

Pusťte si přednášku!

Líbilo? Sdílejte!