UI design

CTA
Jasno na první pohled

Správně graficky navržené tlačítko zaujme svým vzhledem na první pohled, je tak akorát velké, aby se na něj dalo kliknout i na mobilním zařízení, a má srozumitelný text, který jasně říká, co je jeho účelem.

Je také důležité rozlišovat primární a sekundární tlačítka. Jejich funkce by měla být na první pohled rozlišitelná, a to je právě úkolem UI designéra, aby dokázal uživateli předat informaci o primárním a sekundárním tlačítku.

Kontrast
Správné odstíny barev

Dostatečný barevný kontrast mezi textem, pozadím a grafikou zvyšuje čitelnost celého webu. Barevné kontrasty jsou důležité nejen z pohledu čitelnosti webu, ale také jsou důležité pro přístupnost webu uživatelům se zrakovým postižením.

Více o tom, jaké zvolit kontrasty pro weby a e-shopy jsme psali v článku O správném kontrastu webové grafiky.

Typografie
Na velikosti záleží

Nejen výběr fontu, ale také jeho velikost, řez a odsazení mezi písmeny, ale i mezery mezi řádky rozhodují o čitelnosti daného textu. Příliš malý text nebo řádky moc blízko u sebe znesnadňují čtení celého textu.

Správný výběr fontu je naprosto klíčový a zkušený UI designér by nikdy neměl zapomenout na zjištění použitelnosti pro český jazyk.

Branding
A jeho vizuální identita

Váš brand určuje to, jak budete vnímáni vašimi potenciálními, ale i stávajícími klienty.

Důležitou složkou brandu, je pro UI designéra vizuální identita. Kromě loga a grafických prvků, zahrnuje vizuální identita i firemní barvy a další. Na vizuální identitu by neměl zapomínat žádný UI designér při tvorbě webu nebo e-shopu.

Ikony
Vizuální metafory

Grafické motivy lidské oko zpracuje dříve než text.
Pozor však na detaily, které znesnadňují jejich pochopení. UI designér by vždy měl vybírat jednoduché ikony, které nebudou zbytečně detailní.

Při výběru těch správných ikon by měl myslet nejen na lazení ke zbytku vizuální identity (například zaoblené hrany, tlučnost linky...), ale také na jejich jednoduchou čitelnost.

Není dobré používat přehnaně detailní nebo propracované ikony. V jednoduchosti je krása.

Animace
Že se něco děje musí být vidět!

Aby uživatel poznal, že se po kliknutí na tlačítko nebo při načítání další stránky něco děje, je nutné proces graficky znázornit např. bliknutím, točícím se kolečkem, apod. 

Typickým příkladem může být takzvaný hover efekt na tlačítku. Při najetí myší na tlačítko, se tlačítko "aktivuje" tím dává najevo uživateli další možnost procházení webu.

Zkuste si to například na tomto tlačítku:

Kontaktujte nás >

Symboly
Univerzální grafický jazyk

Originální symboly mohou být sice krásné, ale také matoucí. Existují symboly, které jsou natolik zažité, že by v případě jejich záměny uživatele velmi mátly.
Např. křížek znamená zrušit, fajfka potvrdit, domeček homepage (domovskou stránku).

Není tedy dobré tyto symboly používat pro ostatní webové prvky, nakolik by v uživateli nevyvolala ten správný customer experience.