SEO

Co je UI

Poslední aktualizace 01/12/2022

Sdílej...

Obsah stránky

2) Návrh UI

Četba: 3 minuty

Pojem Uživatelské rozhraní | UI | 2023

User experience design / User interface design

User Interface Design / Design uživatelského rozhraní (Návrh uživatelského rozhraní)

V základu je to především návrh uživatelských rozhraní pro jakoukoli aplikaci nebo web. Když se podíváte na designová témata, vždy jde o typografii, barvu nebo způsob užití.

Uživatelské rozhraní (UI) je proces, který návrháři používají k vytváření rozhraní v softwaru nebo počítačových zařízeních se zaměřením na vzhled nebo styl. Návrháři se snaží vytvářet rozhraní, která uživatelé považují za snadno použitelná a příjemná. Návrh uživatelského rozhraní odkazuje na grafická uživatelská rozhraní a další formy – např. rozhraní ovládaná hlasem.

Pokud by stalo, že vám nějaká terminologie nebude úplně známá, podívejte se prosím do našeho slovníku pojmů pro SEO, anebo MARKETING, které stále doplňujeme.

UI pro uživatele

# 1

Uživatelská rozhraní jsou jako přístupové body, na kterých uživatelé interagují s návrhy. Jsou dostupné ve třech formátech:

Grafická uživatelská rozhraní (GUI) z anglického Graphical user interfaces (GUIs): uživatelé interagují s vizuálními znázorněními na digitálních a ovládacích panelech. Plocha počítače je grafické uživatelské rozhraní (GUI).
Rozhraní ovládané hlasem (VUI) z anglického Voice-controlled interfaces (VUIs): uživatelé s nimi interagují prostřednictvím svého hlasu. Většina chytrých asistentů jako je Siri v iPhone, asistenti v automobilech (možná z YouTube znáte „Mercedesi…“) anebo Alexa na zařízeních Amazon, tak to vše jsou rozhraní ovládané hlasem (VUI).
Rozhraní založená na gestech z anglického Gesture-based interfaces: uživatelem prováděná gesta/pohyby rukou nad infotainmentem ve voze, která ovládají funkce vozu. Nebo zapojení do 3D designových prostorů prostřednictvím tělesných pohybů: například ve hrách s virtuální realitou (VR).

Návrh UI

# 2

Chcete-li navrhnout uživatelské rozhraní co nejlépe, měli byste si uvědomit základní pravidla:

Uživatelé posuzují návrhy rychle a nejvíce se zajímají o použitelnost, praktičnost a vzhled.
Nezáleží jim na vašem designu, ale na tom, aby své úkoly zvládli snadno a s minimálním úsilím.
Proto by design měl být „neviditelný“. Uživatelé by se neměli soustředit na vzhled, ale na dokončení úkolu.
Snažte se tedy pochopit cíl a požadavek uživatele, abyste mohli navrhnout nejlepší a nejintuitivnější uživatelská rozhraní, která poskytují bezproblémové prostředí.

Uživatelská rozhraní by také měla být příjemná a intuitivní (nebo alespoň uspokojující, a především nezpůsobit uživateli frustraci z nepochopení dalších kroků):

Když váš návrh předvídá potřeby uživatelů, tak si mohou prostředí lépe užívat, přijde jim užití osobitější, jako navrhnuté „na míru“. Udělejte jim radost a oni se budou vracet.
Tam, kde je to vhodné, mohou prvky gamifikace učinit váš návrh zábavnějším.

Gamifikace

Gamifikace – strategický marketingový nástroj a stimulační technika, která využívá zábavných a motivačních principů. Jsou to postupy, anebo prvky her v neherním prostředí jako například sbírání bodů kvůli slevám, postupná dosažení ocenění, či odměn a dárků.

Uživatelské rozhraní by mělo sdělovat hodnoty značky a posilovat důvěru uživatelů.
Dobrý design vzbuzuje emoce. Uživatelé spojují dobré pocity se značkami, které k nim promlouvají na všech úrovních a udržují v nich příjemné (positivní) zážitky.

Pravidla pro UI

# 3

Chcete-li poskytovat působivá UI, stále myslete na to, že uživatelé mají rádi pohodlí a jednoduchost v kombinaci s krásou. Měli byste se, pokud to je možné, řídit těmito pokyny:

Udržujte konzistenci značky. Sjednoťte barvy, fonty a základní geometrické prvky. Podobné fotografie k tématu.
Zajistěte, aby tlačítka a další aktivní prvky fungovaly předvídatelně, a to i s očekávanou následnou reakcí. Aby bylo zřetelné, že objekt po akci provede požadovanou, očekávanou reakci a splní svou funkci.
Zachovejte u objektů vysokou viditelnost. Jasně označte ikony, nebo přidejte zvýrazňující prvky, jako například stíny pod tlačítka.
Udržujte rozhraní jednoduchá. Používejte pouze prvky, které pomáhají uživatelům udržet správný směr. Vytvářejte „neviditelný“ pocit, že je cesta naprosto intuitivní.
Respektujte pohled uživatele, pokud jde o uspořádání. Zaměřte se na hierarchii a čitelnost:
- Použijte správné zarovnání. Obvykle zvolte zarovnání k levému okraji, nebo na střed.
- Vždy pamatujte, že i webová stránka se čte jak kniha, z levého horního rohu směrem doprava dolu. (Vycházím ze středoevropského standardu, abych někoho neurazil.)
- Upoutejte klíčové vlastnosti pomocí:
  - Barvy, jasu a kontrastu. Přitom se vyhněte nadměrnému používání kontrastních barev.
  - Text pomocí velikostí písma, tučného písma nebo váhy, použití kurzívy, anebo velkých písmen, či rozpal mezi písmeny. Uživatel si takto přečte záchytné body pouhým skenováním.

Informace

Rozpal, nebo odborně Kerning, česky Vyrovnání či Podřezávání, se v typografii označuje úprava mezer mezi určitými dvojicemi písmen. Cílem je zlepšení optického dojmu z textu.

Minimalizujte počet akcí pro provádění úkolů a zaměřte se na jednu hlavní funkci na stránce. Provádějte uživatele tím, že jim označíte preferované akce. Usnadněte si složité úkoly pomocí postupného odhalování.
Umístěte ovládací prvky blízko objektů, které chtějí uživatelé ovládat. Například tlačítko pro odeslání formuláře by mělo být blízko tohoto formuláře.
Informujte uživatele o reakcích/akcích systému pomocí zpětné vazby. Jednoduchou formou, po kliknutí na ikonu košíku informaci: „Zboží vloženo do košíku.“, nebo „E-mail odeslán“ a podobně.
Použijte vhodné návrhu uživatelského rozhraní, které pomohou uživatelům najít správnou cestu a zbytečně je nezatěžovat. Příkladem je předvyplněný symbol „@“ ve formuláři na odesílání newsletterů.
Dejte si pozor na příliš tmavé, nebo příliš světlé kombinace vzhledu, které zahrnují špatně viditelná, předvyplněná, zaškrtávací políčka pro přihlášení/odhlášení anebo přidávání položek do košíků uživatelů.
Vždy uvádějte další kroky, které mohou uživatelé přirozeně lákat k návštěvě, mohou být pro uživatele ale i tak zajímavá, i když nebudou úplně v kontextu.

Jak dělat UI

# 4

Pokud se vám líbí myšlenka vytváření úžasných UI, a vidíte se jako osoba s tvůrčím talentem, možná vás bude více zajímat právě UI. Níže naleznete stručný přehled klíčových úkolů návrháře UI, a upřesnění toho, co návrhář uživatelského rozhraní skutečně dělá.

Vzhled a dojem z produktu:

Analýza zákazníků
Designový výzkum
Branding a grafický vývoj
Uživatelské příručky a příběhy

Responzivita a interaktivita:

Prototypování UI
Interaktivita a animace
Přizpůsobení všem velikostem zobrazovacích zařízení
Implementace s vývojářem

Jako vizuální a interaktivní designér je role UI zásadní pro jakékoli digitální rozhraní a pro zákazníky je klíčovým prvkem důvěry ke značce. Zatímco za značku samotnou nikdy není zodpovědný výhradně jen návrhář UI, jejím převodem do produktu ano.

Shrnutí UI

# 5

Protože nejlepší rozhraní není žádné rozhraní, měli byste uživatelům nabídnout to nejpřímější, nejpřístupnější a nejpohodlnější ovládání. Ukázat jim tu nejlepší zkušenost, kde zapomenou, že vlastně používají váš návrh a jdou vaší cestou.

Proto se stále ptejte sami sebe: „Mohu to ještě více zjednodušit?“.