Ahoj, už se to načítá…

Sdílejte

Facebook

Instagram

Nahoru

Je váš web dobře použitelný?

19. 10. 2018

Jak říká Dan Norman ve své knize Design pro každý den: „Jak je možné, že dokážu pracovat s mainframem za miliony dolarů, ale nedomluvím se s ledničkou?“ Na vině je špatný design — použitelnost a srozumitelnost. My se zaměříme na web.

 

Začněme malým testem. Zkuste ukázat váš web někomu, kdo ho ještě neviděl a ať provede vybranou akci. Nakoupí, najde informaci, přihlásí se k odběru newsletteru. Nenapovídejte mu. Pokud vše našel, máte web dobře navržený, nebo jste uživateli napovídali. Lidé by měli na vašem webu s co nejmenšími obtížemi provést to, co jste si zamýšleli jako cíl. Podívejme se, co lidem hazí nejčastěji klacky pod nohy a co můžete změnit ještě dnes.

Písmo

  • Nejmenší písmo na webu by mělo být 16 px.
  • Vhodnější písmo pro online je s větší střední výškou (střední výšku písma měříme podle písmene „x“).
  • Lidé dávají přednost textu o 75 znacích, ale řádek se 100 znaky přečtou rychleji.

Navigace a tlačítka

  • Lidé si nepamatují. Nenuťte je pamatovat si více jak 4 věci. Pokud má tedy vaše menu více jak 4 položky, vytvořte skupiny max po 4 položkách.
  • Tlačítko by mělo mít minimálně 1 × 1 cm.
  • Ať tlačítko vypadá jako tlačítko (nezapomeňte i na sekundární a terciární varianty).

Barvy

  • Devět procent mužů a půl procenta žen je barvoslepých (otestujte si váš web, jak ho vidí lidé, kteří nevidí třeba modrou)
    https://www.toptal.com/designers/colorfilter/
  • Mějte jasný systém barev. Primární barva pro aktivní prvky. Neutrální pro text. Doplňková barva pro různá hlášení a informace.

Pokud už se vám z toho motá hlava, můžete nám napsat a my se na váš web rádi podíváme.

Texty

  • Texty na webu musí být jasné a krátké.
  • Lidé čtou hlavně nadpisy. Dejte tam to důležité.
  • Chybová hlášení pište srozumitelně (Co se stalo, proč a co má uživatel udělat dál)
  • Lidé se rádi smějí. Bavte je, ale ne za každou cenu.

Animace a videa

  • Když video, tak max 7 minut.
  • Vyskakovací okna. Moc je nepoužívejte. Google to nemá rád a uživatelé taky ne.
  • Animace podporují ovládací prvky. Používejte mikro interakce.

Telefony

  • Vždy si představujeme člověka stojícího v tramvaji. Jednou rukou se drží madla a druhou na vašem webu hledá jídelní menu nebo otevírací dobu, která se mu stahuje v PDF nebo hůř v excelové tabulce 🙂
  • Mějte vše dostatečně velké.
  • Vyzkoušejte si vše na reálných zařízeních.

Widgety na mobilu

  • Řekněte hned uživateli, že něco špatně vyplnil pomocí live validace. Ne až na konci.
  • Když uživatelé v poli vyplňují text, dejte jim klávesnici s písmenkama.
  • Když uživatelé vyplňují telefon, dejte jim klávesnici s číslama.

Nejdůležitější místa na webu

  • Levý horní roh. Dejte tam logo.
  • Patička. Lide si tam většinou doskrolují a hledají kontakt. Dejte jim ho tam.

Na závěr tři pravidla designérské legendy Michaela Bieruta

  1. Soustřeďte se na to, pro koho to má být.
  2. Jednoduchost — jaký je nejjednodušší způsob sdělení?
  3. Myslete napříč disciplínami — podívejte se třeba jak elekroinženýr přišel na jeden z nejkomplikovanějších systémů na světe.

Jakub Vaněk

Zdroje jsme načerpali z těchto super knížek a stránek: Susan Weinschenk — 100 věcí, které by měl každý designér vědět o lidech; Martin Michálek — Vzhůru do responzivního designu; TED talks; Nick, UI/UX Designer https://www.uplabs.com/nickbuturisvili; Mamun Srizon https://dribbble.com/srizon; Donald A. Norman — Design pro každý den;