Návrh uživatelského rozhraní a použitelnost na webu: Co stojí za uživatelským prostředím?

Sonja Hoffmann Naposledy aktualizováno 21.10.2020
8 min.
UX-Design-Usability
Naposledy aktualizováno 21.10.2020

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:

Návrh uživatelského rozhraní a použitelnost na webu: Co stojí za uživatelským prostředím?

Proč bych se měl zabývat UX?

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.

Co je uživatelské prostředí?

Uživatelská zkušenost podle dnešního standardu nezačne při návštěvě webových stránek a nepřestane ji opustit. Spíše popisuje celou zkušenost, kterou má uživatel se značkou nebo produktem – od prvního do posledního kontaktu.

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 nemůže nevýznamně ovlivnit vaše prodejní údaje. To, co mě osobně pohání, je povinnost jako provozovatele webových stránek nezmařit uživatele.

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

Jednoduše řečeno, Affordance popisuje, co je obecně možné. Použití obrazovky plochy jako příkladu, to by byla možnost "kliknout". Vzhledem k tomu, že by bylo nečinné a frustrující, kdybyste museli kliknout bez rozdílu kdekoli na webu, instalujeme signifikátory (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.

Co jsou cenové známky, signifikanti a zpětná vazba?

Cenová dostupnost popisuje, která interakce je obecně možná. Signifikátory (indikátory) signalizují, že interakce je možná. Zpětná vazba na druhou stranu zajišťuje, že uživatel ví, že jejich interakce něco spustila.

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

  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"?

Schopnost interakce je často definována zařízením, které přistupuje k webové stránce: na (standardním) stolním počítači není možné potáhnutí prstem a dotyk, zatímco na mobilních zařízeních neexistuje žádný efekt přechodu.

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ě

Cenové výžky a signifikanti mohou také jít nad rámec rozhraní vašeho webu. 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 prohlížeče je skutečnost, která se nachází mimo váš web. 

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 rezervují lety prostřednictvím zahraničního poskytovatele služeb, jehož stránka není ve výchozím nastavení zobrazena v němčině nebo angličtině. Najednou jsem nemohl najít nastavení jazyka přes mobilní verzi. Vzpomněl jsem si však, že jsem již přistupoval na web prostřednictvím aplikace, kde bylo vše zobrazeno ve standardním anglickém režimu. Od té doby jsem k mobilnímu webu přistupoval pouze přes objížďku "aplikace", protože si to pamatuji a protože dávám přednost tomu, abych udělal o dvě kliknutí více, 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ší je zjistit takové chování jejich pozorováním. Ten, kdo testuje web, je relativně bezvýznamný. Není nutné najít lidi, kteří web poté 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ůžete testerovi říkat, co má dělat nebo jak se dostat kam. Klíčem je identifikovat a zaznamenat potenciální překážky a komplikace, aby byl váš web 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í.

Návrh uživatelského rozhraní a použitelnost na webu: Co stojí za uživatelským prostředím?
https://www.lonelyplanet.com/portugal/lisbon

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ý si může být například vědom toho, že kliknutí na logo povede zpět na stránku indexu. Nebo je ten modrý podtržený text odkaz. Navigační panel webu, který dnes používáme, je také takovým jevem. Očekáváme je na určitých místech na jedné straně. Víme, že Nav Bar slouží jako náš obsah a vede nás přes webové stránky. Panel nabídek, který se na mobilních zařízeních změní na ikonu Hamburger, také 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).

Návrh uživatelského rozhraní a použitelnost na webu: Co stojí za uživatelským prostředím?
https://bulka.cafe/

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:

Pinterest

Ve verzi pro stolní počítače se při najetí myší zobrazí nové výzvy k akcím. Vzhledem k tomu, že uživatel intuitivně klikne na obrázek a přidá jej do své sbírky, je nepravděpodobné, že by tato funkce byla nezjištěna. Nicméně, designéři vyvinuli plán B: Pokud kliknete na obrázek, dojdete k velkému pohledu, 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.

Návrh uživatelského rozhraní a použitelnost na webu: Co stojí za uživatelským prostředím?

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ýzvy k akcím, stejně jako u verze pro stolní počítače, jsou však k dispozici až poté, co na obrázek skutečně kliknete. Nejsou tedy již skrytými signifikátory. 

Co mě však překvapilo, bylo to, že Pinterest používá dvě různé ikony pro stejnou interakci v obou verzích. Z hlediska použitelnosti si nemyslím, že se to doporučuje. Pokud se uživatel změní z mobilní verze na verzi pro stolní počítače nebo naopak, použití stejných ikon by vám spíše spíše 10000000000000000000000000000000000000000000000000000000000000000000000000000000 Díky tomu je použití plynulejší. Použitelnost je tedy 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žíváte poštovní schránku, mohlo by to poškodit použitelnost vašeho webu. Proč? Uživatel se musí pozastavit a zvážit další krok. Musí se ptát, zda tento symbol odpovídá tomu, čeho chce dosáhnout.

Návrh uživatelského rozhraní a použitelnost na webu: Co stojí za uživatelským prostředím?
Autorská práva: https://www.iconfinder.com/icons/2296974/email_inbox_letter_mail_mailbox_icon_icon

Závěr

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 Don Me Thinked, Revisited: Přístup zdravého rozumu k použitelnosti na webu," Steve Krug
  • "Design každodenních věcí," Donald A. Norman
  • https://www.uxpin.com/ nabízí několik velmi zajímavých e-knih ke stažení zdarma
Vaše dotazy týkající se uživatelského prostředí

Jaké máte dotazy týkající se použitelnosti na webu a návrhu uživatelského prostředí? Jaké procesy můžete doporučit? Použijte funkci komentáře. Chcete další tipy na návrh a vývoj webu? Pak nás sledujte na Twitteru, Facebooku nebo prostřednictvím našeho zpravodaje.

Po studiu game designu a creative writingu v zeleném Aucklandu se Sonja specializovala na design webových aplikací a jeho vývoj. Zaměřuje se na gamification a výzkum motivace uživatelů a jejích zkušeností, spolu s vášní a zvědavostí pro technologické trendy.

Podobné články

Komentáře k tomuto článku

Napsat komentář

Vaše e-mailová adresa nebude zveřejněna. Povinná pole jsou označena *.