Uživatelská zkušenost (UX) Design, použitelnost, design lidského rozhraní a design centrovaný na člověka - to jsou jen některé z termínů, se kterým jsme stále více konfrontováni. Ale co se děje? Proč byste se jako webový designér měli zajímat zejména o použitelnost a uživatelskou zkušenost? A jak můžete přidat ux, i když ve svém týmu nemáte návrháře UX?

Ve svém posledním článku o harmonickém webovém designu jsem vám ukázal, jak vytvořit vlastní pokyny pro návrh. Harmonický webový design se však vyznačuje několika faktory – proto vás dnes obžaluji z uživatelské zkušenosti:

Proč se zabývat UX designem?

Mnoho české Designéři, které znám, mají silné zázemí v oblasti komunikačního designu, takže pocházejí ze směru tiskových médií. Zde jsou vytvořeny sofistikované kompozice, které představují přesné poselství.

V návrhu tisku je komunikační cesta jasná: existuje vysílač (například plakát nebo brožura) a přijímač (ten, na který střední cílí). Příjemce nemá nic jiného na práci, než zprávu obdržet, pochopit ji a poté učinit (nákupní) rozhodnutí.

Webový design je na druhou stranu interaktivní: nejenže je zde odeslána zpráva, ale spíše je generována konverzace. 

Uživatelské prostředí: uživatelské prostředí

Od počátků internetu se společnosti zabývaly psychologickými aspekty těchto interakcí. V té době však nebyla zmínka o návrhářích UX, ale o návrhářích lidských interakcí – a profese byla obecně mnohem méně běžná než dnes.

Rád bych se však omezil na pododdíl, který přímo souvisí s webovou stránkou: použitelnost. Cesta naším produktem by proto měla být co nejpříjemnější a nejplynulejší. Neměli byste však ignorovat rozpočet a interní požadavky společnosti.

Dobrá použitelnost může mít významný dopad na vaše prodejní čísla. To, co mě osobně pohání, je povinnost jako provozovatele webových stránek: nefrustrovat uživatele.

Cenové úhrady, signifikanti a zpětná vazba

Jednoduše řečeno, afordance popisuje, co je obecně možné. Použijeme-li příklad obrazovky na ploše, bude to možnost "kliknout". Vzhledem k tomu, že by bylo zbytečné a frustrující, kdybyste museli náhodně kliknout všude na webu, zahrnujeme signifikanty (indikátory). Ty ukazují uživateli, kde je něco možné a co. 

Jedním z nejznámějších signifikátorů je tlačítko. Omezuje povrch interakce. Víme, že když tady klikneme, něco se stane. To je obvykle umocněno efekty vznášení – nebo když se kurzor změní na ukazováček, když na něj najedete myší. To jsou také signifikanti.

Aktivní stav tlačítka mi ukazuje jako zpětnou vazbu, že se něco stalo, když jsem na něj klikl. Všechny tři procesy se navzájem spojují a mohou pomoci jako základní otázky, aby vaše webové stránky byly od začátku uživatelsky přívětivější.

1. Jaké interakce jsou obecně možné?
2. Jak mohu uživatelům ukázat, že jsou možné?
3. Jak vědí, že udělali "správnou věc"?

Možnost interakce je často definována zařízením používaným pro přístup na webové stránky: na (standardním) stolním počítači není možné přejetí prstem a dotyk, zatímco na mobilních zařízeních neexistuje žádný efekt vznášení.

To je přesně to, co je třeba vzít v úvahu při výběru ověřovatelů. Jsou například odkazy jasné pouze v případě, že na ně najedete myší? Mobilní návštěvník si pak vůbec neuvědomuje, že interakce je možná. 

Uživatelé komunikují fyzicky i digitálně

Afordance a signifikanty mohou také jít nad rámec vašeho webového rozhraní. Váš návštěvník může být ovlivněn vnějšími okolnostmi nebo používat určité interakce jinak, než bylo původně zamýšleno. Například tlačítko Zpět v prohlížeči je situace, která se nachází mimo vaše webové stránky. 

Pokud návštěvník omylem přejde na část vaší stránky, kde nemůže najít to, co chce, je pravděpodobné, že bude procházet pomocí tlačítka Zpět namísto odkazů na stránce. 

Jak jsou interakce záměrně používány "nesprávně" - příklad

Často si rezervuji lety prostřednictvím zahraničního poskytovatele služeb, jehož stránka se ve výchozím nastavení nezobrazuje v němčině nebo angličtině. S mobilní verzí jsem najednou nemohl najít nastavení jazyka. Vzpomněl jsem si však, že jsem již jednou vstoupil na web prostřednictvím aplikace, kde se vše zobrazovalo ve standardním režimu v angličtině. Od té doby přistupuji na mobilní web pouze přes objížďku "app", protože si to pamatuji a protože bych raději udělal další dvě kliknutí, než abych frustrovaně klikal na mobilní stránku.

Ale měli byste si také uvědomit, že nemůžete "přeučit" své uživatele. Nemůžete se zbavit takových "špatných" praktik, ale můžete plánovat toto chování a také se ujistit, že existuje dostatek alternativ.

Dalším dobrým příkladem, který již způsobil bolesti hlavy pro každého z nás, je použití zastaralých prohlížečů nebo Aplikace Internet Explorer, která je bohužel stále rozšířená. Některá rozložení se nezobrazí tak kreativně cenná jako například ve Firefoxu nebo Chromu. I když je to nepříjemné, musíme také navrhnout a programovat pro tyto uživatele.

Vzhledem k tomu, že je to horší než například přístup na stránku prostřednictvím aplikace nebo použití tlačítka zpět, je to, když se návštěvník stránky úplně vzdá – ať už proto, že používání našich stránek vytváří příliš mnoho frustrace nebo proto, že existuje příliš málo alternativ k manipulaci s chybami.

Proč testování použitelnosti?

Mimochodem, nejlepší způsob, jak zjistit takové chování, je pozorování. Kdo testuje webové stránky, je relativně nevýznamný. Není nutné hledat lidi, kteří stránku skutečně používají. Protože opravdu hrubé chyby použitelnosti se vyskytují téměř u každého uživatele. 

Důležité je, že nemáte dovoleno říkat testerovi, co má dělat nebo jak se kam dostat. Vše a konec je identifikovat a zaznamenat možné překážky a komplikace, aby vaše webové stránky byly uživatelsky přívětivější. Čím méně řeknete subjektu, tím více nefalšovaný výsledek.

4 různé ukazatele

Jaké signály můžete dát na stránku, abyste zvýraznili interakce? Rozlišujeme čtyři různé kategorie, které vám stručně předám.

1. Výslovný signifikátor

Explicitní znaky se skládají z výzvy v textové podobě, například "Klikněte sem". Ty se často nacházejí ve spojení s jinými indikátory, jako jsou kontaktní formuláře nebo tlačítka. Ty by měly být co nejjasnější a nejjasnější. Kromě toho bychom se měli uchýlit ke známým formulacím a upustit od údajně kreativních formulací. 

Hodnota rozpoznávání umožňuje uživateli s téměř jistotou vědět, jaký výsledek může během interakce očekávat.

"SEE MORE" je příkladem jednoduchého explicitního značení.

2. Vzory návrhu: Vzory a konvence

Vzory návrhu jsou opakující se návrhy, na které jsme si tak zvykli, že již nepotřebují žádné vysvětlení ani další upozornění. Je jich relativně mnoho. 

Každý by si měl být vědom například toho, že kliknutí na logo vede zpět na stránku indexu. Nebo ten modře podtržený text představuje odkaz. Navigační lišta webových stránek - jak ji dnes používáme - je také takovým fenoménem. Očekáváme je na určitých místech na stránce. Víme, že Nav Bar pro nás slouží jako synopse a provádí nás webovými stránkami. Panel nabídek, který se na mobilních zařízeních změní na ikonu hamburgeru, již nepotřebuje žádné další vysvětlení. 

Běžné vzorce, které jsme se naučili v posledních několika letech

Překvapivé je, že tyto vzorce jsou také často mezinárodní. Vidíte to obzvláště dobře, pokud se chcete orientovat na stránce, jejíž jazyk neznáte. Takže stojí za to nevynalézat tady kolo. Místo toho se doporučuje pro lepší použitelnost vašeho webu při řešení zavedených vzorů. 

To je jasně vidět na příkladu stránky (náhodně vybrané) restaurace v Moskvě. I když nemůžu mluvit rusky ani číst cyrilici, okamžitě vidím, jak mohu procházet stránku. Vidím, ve kterém navigačním bodě se navigovat, a jsem schopen okamžitě odfiltrovat nejdůležitější informace (kontakt).

3. Skrytý signifikátor

Ty lze vidět pouze prostřednictvím určité akce, jako je například najetí myší a posouvání. 

Skryté signifikátory mají tu výhodu, že rozvržení vypadá čistě a uklizeně. Takže můžete svůj design zeštíhlovat. 

Mají však také některé nevýhody. Jsou nalezeny uživatelem pouze v případě, že buď vědí, že existují, nebo pokud náhodně provádějí spouštěcí interakci. Proto tyto signály nejsou vhodné pro důležité, ale naneshovědce pro sekundární výzvy k akci (výzva k akci).

Kromě toho byste si při používání skrytých ověřovatelů měli být vědomi toho, že pro každé zařízení může být třeba najít samostatné řešení.

Pinterest vám dal dobrý příklad:

Ve verzi pro stolní počítače se při najetí myší zobrazí nová výzva k akci. Vzhledem k tomu, že uživatel intuitivně klikne na obrázek a přidá jej do své sbírky, funkce s největší pravděpodobností nezůstane nezjištěna. Návrháři však vyvinuli plán B: Pokud kliknete na obrázek, získáte velký pohled, ve kterém jsou viditelné všechny možné interakce.

Je zajímavé, jak celou věc vyřešit ve verzi s dotykovou obrazovkou. Opět existují skryté interakce – ale pro jiné účely.

Na levém obrázku můžete vidět obecný přehled stránky. Níže uvedená nabídka vstupuje pouze tehdy, když se uživatel posune nahoru – což se zpočátku zdá neznámé, ale je také velmi intuitivní. Když vyhledáváme navigaci, obvykle se posouváme nahoru. 

Další výzva k akci – stejně jako u verze pro stolní počítače – je však k dispozici pouze tehdy, když jste na obrázek skutečně klikli. Nejsou tedy již skrytými signifikanty. 

Byl jsem však překvapen, že Pinterest používá dvě různé ikony pro stejnou interakci ve dvou verzích. Z hlediska použitelnosti si nemyslím, že se to doporučuje. Pokud uživatel přepne z mobilní verze na verzi pro stolní počítače nebo naopak, použití stejných ikon by vedlo k rychlejšímu způsobu. Díky tomu je použití hladší. Použitelnost je tak pozitivně zvýšena.

4. Metaforický signifikátor

Lupa, která označuje, že je zde umístěno vyhledávací pole. Obálka představující odesílání zpráv. Tlačítko, které signalizuje, že na něj můžete stisknout. Všechny zásady mají společné, že je známe ze skutečného světa. 

Jejich užitečnost v digitálním světě se stala designovým vzorem. Musíte však být opatrní: Pokud používáte metaforický indikátor s upraveným symbolem, mohlo by to zmást vaše uživatele.

Pokud například místo známé obálky použijete poštovní schránku, mohlo by to poškodit použitelnost vašeho webu. Proč? Uživatel se musí zastavit a přemýšlet o dalším kroku. Musí se ptát, zda tento symbol odpovídá tomu, čeho chce dosáhnout.

Závěr o UX designu a použitelnosti webu

Použitelnost neznamená jen to, že vaši návštěvníci si nějakým způsobem najdou cestu přes web. Použitelnost znamená, že se zde zaměřujeme na návštěvníka komplexně – "cesta" vaší stranou by měla být co nejplynulejší. 

Každé přerušení – pokaždé, když se uživatel musí zastavit a zeptat se sám sebe : "Co je zde skutečně nabízeno? Co se stane, když na něj kliknu? Vrátím se? Kde to jsem? Jak jsem se sem dostal?" je kontraproduktivní.

Je možné postavit web tak, aby došlo k přerušení? Pravděpodobně ne. V závislosti na předložených informacích mohou být dokonce žádoucí určitá přerušení, cílená reflexe a mírná frustrace.

Je důležité znát různé nástroje, abyste je mohli vhodně použít pro svůj vlastní projekt.

Doporučené čtení

Jedna z nejslavnějších knih o použitelnosti je "Ne don't don don me think!"od Steva Kruga. Název je zde program a nakonec o čem je každý přístup použitelnosti.

• "Don't Make Me Think: A Common Sense Approach to Web Useability" od Steva Kruga
• "Design každodenních věcí" od Donalda A. Normana
• UX Pin nabízí zajímavé e-knihy ke stažení zdarma