UX Do/Donts

Aneb co nedělat

Tento článek se bude postupně rozšiřivat i další tipy.

Nepopisuj obrázek, ale účel

Z hlediska ux a také user accessibility popisujme vždy akci dané ikony, či grafiky. Nepopisujme vzhled.

Vyhýbejte se technickým pojmům

Při popisu technické chyby, nepišme kód chyby, ale přímo důvod této chyby.

Čisté pojmenovávání akcí na buttonu

Pokud máme například kontextuální menu s buttony, které slouží k vymazání formuláře, tak pojmenujme button rovnou “smazat”. Dalším minitipem je, že například button “smazat” by měl být vždy červený, aby hned uživatele varoval před důsledkem jeho akcí.

Horizontální alignment

Při dodržování zarovnání k značce se zvyšuje čitelnost obsahu. Správné zarovnání na obrazovce usnadňuje očím procházení textu.

Používání informačních ikon

Použití ikon, animací spolu s popisky pomáhá spojit se obsahem a identifikovat akce mnohem snadněji. Navíc tímto způsobem vypadá rozhraní logicky a bohatě a okamžitě přitahuje pozornost.

Ukazatel postupu

Průběžný pruh pomáhá sledovat postup a také usnadňuje pohyb vpřed a vzad. Scénáře jako online nákupy, vyplňování formulářů, různé žádosti atd. používají tento formát k usnadnění sledování procesu.

Souvislé akce k sobě

Neodělujme souvislé akce od sebe pryč. Příkladem mohou být akční ikony v toolbarech, nebo tlačítka pro přihlášení a registraci. Cílem je zjednodušit uživatelskou zkušenost se systém a přehlednost interaktivních elementů.

Barevnost a kontrast

Vždy používejme doporučené barvy z našeho theme nástroje “Spectro” pomocí proměnných. Ty mají automaticky vypočítané kontrasty, které zároveň splňují zákonné normy. Kromě pravidel je však občas potřeba myslet i základní doporučení designu. Zelená prostě bude vždy značit “success” a červená zase “error”. Poslední věcí, kterou je dobré brát v potaz je kombinování barev v rámci komplementárního spectra. V barevném spectru naproti sobě vždy stojí barvičky, které se k sobě nejvíce hodí. Modrá tak výborně pasuje s oranžovou. To nám může prozradit vhodnou kombinaci v rámci primární a sekundární barevnosti aplikace. Není to však vždy pravidlo a pokud je klientská aplikace vázána barevností grafického manuálu, řídíme se raději jím.

Typografie

Typografie má mnoho pravidel. Vlastně se o ní píšou celé knihy. Pro tvorbu našich aplikací však bude potřeba hlavně řešit pár z nich. Jedním z nich je “readability” neboli čitelnost.

Čitelnost a srozumitelnost jsou dva klíčové pojmy, které ovlivňují to, jak snadno uživatelé dokáží číst váš text. Zde je několik tipů, jak je zlepšit:

Čitelnost: Pro: Větší “minusek” (výška písmene “x” oproti “X”) zlepšuje čitelnost. Proti: Velmi tenká nebo tučná písma mohou být obtížná k přečtení.

Srozumitelnost: Pro: Správné nastavení mezery mezi písmeny a řádky. Proti: Chyby jako “rags” (nepravidelné okraje na konci řádků) mohou ztěžovat čtení.

Typ písma: Vyberte správná písma. Příliš mnoho písem může způsobit zmatek. Držte se jednoduchosti a použijte maximálně dva až tři druhy písma. V našich aplikacích máme konkrétně možnost využít jiného písma pro nadpisy a pro formuláře.x

Počet znaků: Optimální délka řádku je důležitá pro čitelnost textu na webu. Mezi 45 až 75 znaky je doporučená délka pro jedno-sloupcovou stránku. Trent Walton navrhl jednoduchou techniku s hvězdičkami na znacích 45 a 75, abyste udrželi řádky v optimální délce. Tím se zlepší uživatelská zkušenost s čtením. Mějte na paměti, že příliš dlouhé nebo krátké řádky mohou ztížit čtení a porozumění textu.