UX Design & Web Použitelnost: Co je za uživatelské zkušenosti?

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

Uživatelské zkušenosti (UX) Design, použitelnost, human interface design a human centered design - to jsou jen některé z pojmů jsme stále konfrontováni s. Ale co to je? Proč byste měli být obzvláště zájem o použitelnost a uživatelské zkušenosti jako web designer? A jak můžete přidat ux, i když nemáte ux designer ve vašem týmu?

V mém posledním článku o harmonický web design Ukázal jsem vám, jak vytvořit vlastní design pokyny. Nicméně, harmonický web design se vyznačuje několika faktory - to je důvod, proč jsem obviňovat vás dnes uživatelské zkušenosti:

UX Design & Web Použitelnost: Co je za uživatelské zkušenosti?

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

Mnoho české Návrháři, které znám, mají silné zázemí v komunikačním 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 tiskovém designu je komunikační cesta jasná: je zde vysílač (například plakát nebo brožura) a přijímač (ten, na který se médium zaměřuje). Příjemce nemá nic jiného na práci, než přijímat zprávy, pochopit, a pak učinit (nákup) rozhodnutí.

Web design, na druhé straně, je interaktivní: nejen, že zpráva být zaslány zde, ale spíše konverzace je generována. 

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 žádná zmínka o ux designérech, ale o návrhářích lidské interakce - a profese byla obecně mnohem méně častá než dnes.

Co je uživatelské prostředí?

Uživatelské prostředí podle dnešního standardu se nespustí, když navštívíte webové stránky a nepřestane ji opouštět. Spíše popisuje celou zkušenost, kterou má uživatel se značkou nebo produktem - od prvního až po poslední kontakt.

Rád bych se však omezil na podoblast, která přímo souvisí s internetovými stránkami: 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 údaje o prodeji. Co mě pohání osobně, je povinnost jako provozovatel webových stránek není zmařit uživatele.

Cenárce, značky a zpětná vazba

Jednoduše řečeno, Affordance popisuje, co je obecně možné. Použití plochy obrazovky jako příklad, to by bylo možnost "klikněte". Vzhledem k tomu, že by bylo nečinné a frustrující, kdybyste museli kliknout bez rozdílu kdekoli na webových stránkách, instalujeme signifiers (indikátory). Ty ukazují uživateli, kde je něco možné a co. 

Jedním z nejznámějších signifiers je tlačítko. Omezuje povrch interakce. Víme, že když klikneme sem, něco se stane. To je obvykle zesílen hover efekty - nebo když kurzor promění ukazováček, když jsem se vznášet nad ním. Tohle jsou také signifiers.

Co jsou affordances, Signifiers a zpětná vazba?

Affordance popisuje, která interakce je obecně možná. Signifiers (indikátory) signalizují, že interakce je možná. Zpětná vazba na druhé straně zajišťuje, že uživatel ví, že jejich interakce něco spustila.

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

  1. Jaké interakce jsou obecně možné?
  2. Jak zobrazím svým uživatelům, ž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, které přistupuje k webové stránce: na (standardním) stolním počítači není přejetí prstem a dotykové ovládání možné, zatímco na mobilních zařízeních není žádný efekt najetí přes.

To je přesně to, co je třeba vzít v úvahu při výběru signifiers. Například, odkazy se jasné pouze tehdy, když jsem se najet myší? Pak si mobilní návštěvník neuvědomuje, že interakce je vůbec možná. 

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

Affordances a signifiers může 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 prohlížeče je skutečnost, která se nachází mimo váš web. 

Pokud návštěvník omylem přešel na část vaší stránky, kde nemůže najít to, co chce, je pravděpodobné, že se bude pohybovat pomocí tlačítka Zpět namísto odkazů na vaší 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 není ve výchozím nastavení zobrazena v němčině ani angličtině. Najednou jsem nemohl najít jazykové nastavení přes mobilní verzi. Vzpomněl jsem si však, že jsem již přistupoval k webovým stránkách prostřednictvím aplikace, kde bylo vše zobrazeno ve standardním anglickém režimu. Od té doby jsem přistupoval pouze k mobilní webové stránce prostřednictvím objížďky "aplikace", protože si to pamatuji a protože dávám přednost dvěma kliknutím, než kliknout na mobilní stránku ve frustraci.

Ale měli byste si také být vědomi toho, že nemůžete "re-vzdělávat" své uživatele. Nemůžete se zbavit takových "špatných" postupů, 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 Internet Explorer, který je bohužel stále rozšířený. Některá rozložení se nezobrazují tak kreativně cenná jako například ve Firefoxu nebo Chromu. I když je to nepříjemné, musíme také navrhnout a program pro tyto uživatele.

Protože je to horší než například přístup na stránku přes aplikaci nebo pomocí tlačítka Zpět, je to, když se návštěvník stránky zcela 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 zpracování chyb.

Proč testování použitelnosti?

Mimochodem, je nejlepší zjistit takové chování jejich pozorováním. Ten, kdo testuje webové stránky, je relativně nevýznamný. Není nutné najít lidi, kteří skutečně používají stránky poté. Vzhledem k tomu, opravdu hrubé chyby použitelnosti dochází u téměř každého uživatele. 

Důležité je, že nemůžete říct tester, co má dělat, nebo jak se dostat, kde. Klíčem je identifikovat a zaznamenat potenciální překážky a komplikace, aby vaše webové stránky byly uživatelsky přívětivější. Čím méně to řeknete subjektu, tím více nefalšuje výsledek.

4 různé ukazatele

Jaké signály můžete dát na své stránce pro zvýraznění interakcí? Rozlišujeme čtyři různé kategorie, které vám stručně představuji.

1. Explicitní signifier

Explicitní signifiers se skládají z výzvy v textové podobě, například "Klikněte zde". 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 nejstručně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 vědět s téměř jistotou, jaký výsledek může očekávat během interakce.

"SEE MORE" je příkladem jednoduchého explicitního signifieru.

UX Design & Web Použitelnost: Co je za uživatelské zkušenosti?
https://www.lonelyplanet.com/portugal/lisbon

2. Vzory návrhu: Vzory a konvence

Designové vzory jsou opakující se vzory, na které jsme si zvykli, že již nepotřebují žádné vysvětlení nebo další oznámení. Existuje poměrně mnoho z nich. 

Všichni si například mohou být vědomi toho, že kliknutí na logo povede zpět na stránku indexu. Nebo je tento modrý podtržený text odkaz. Navigační panel webových stránek, jak ji 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 změní na ikonu Hamburger na mobilních zařízeních, také nepotřebuje žádné další vysvětlení. 

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

Překvapující je, že tyto vzory 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, aby se tu neobjevovalo kolo. Místo toho se doporučuje pro lepší použitelnost vašich stránek při práci se zavedenými vzory. 

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

UX Design & Web Použitelnost: Co je za uživatelské zkušenosti?
https://bulka.cafe/

3. Skrytý signifier

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

Skryté signifiers mají tu výhodu, že dělají rozložení vypadat čisté a uklizené. Takže můžete svůj design zeštíhlit. 

Mají však také některé nevýhody. Uživatel je našel pouze v případě, že buď vědí, že existují, nebo pokud omylem provedou spouštěcí interakci. Proto tyto signály nejsou vhodné pro důležité, ale nanejvýš pro sekundární výzvy k akci (výzva k akci).

Kromě toho při použití skrytých signifiers, měli byste si být vědomi toho, že samostatné řešení může být třeba nalézt pro každé zařízení.

Dobrým příkladem je Pinterest:

Pinterest

Ve verzi pro stolní počítače se při najetí na druhou položku zobrazí nová výzva 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 zůstala neodhalena. Nicméně, návrháři vyvinuli plán B: Pokud kliknete na obrázek se dostanete do velkého zobrazení, ve kterém jsou viditelné všechny možné interakce.

Je zajímavé, jak vyřešit celou věc v dotykové verzi obrazovky. Opět platí, že existují skryté interakce - ale pro jiné účely.

UX Design & Web Použitelnost: Co je za uživatelské zkušenosti?

Na levém obrázku vidíte obecný přehled stránky. Níže uvedená nabídka se do dá-li uživatel posune nahoru – což se zpočátku zdá neznámé, ale je také velmi intuitivní. Když hledá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 pouze po skutečném kliknutí na obrázek. Tak, oni už nejsou skryté signifiers. 

Co mě však překvapilo, bylo, že Pinterest používá dvě různé ikony pro stejnou interakci ve dvou verzích. Z hlediska použitelnosti si nemyslím, že je to doporučeno. Pokud se uživatel změní z mobilního telefonu na verzi pro stolní počítače nebo naopak, použití stejných ikon vám umožní rychleji zvládnout. Díky tomu je použití hladší. Použitelnost je tak pozitivně posílena.

4. Metaforický signifikant

Lupa, která označuje, že vyhledávací pole se nachází zde. Obálka, která představuje 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 z reálné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žijete metaforický indikátor s upraveným symbolem, mohlo by to zmást uživatele.

Pokud například místo známé obálky použijete poštovní schránku, může dojít k poškození použitelnosti vašeho webu. Proč? Uživatel musí pozastavit a zvážit další krok. Musí se ptát, zda tento symbol odpovídá tomu, čeho chce dosáhnout.

UX Design & Web Použitelnost: Co je za uživatelské zkušenosti?
Copyright: 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 stránky. Použitelnost znamená, že důraz je zde na návštěvníka holisticky - "cesta" přes vaši stranu by měla být co nejplynulejší. 

Každé přerušení – pokaždé, když se uživatel musí pozastavit a zeptat se sám sebe , "Co je skutečně nabízenzde? 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 lokalitu takovým způsobem, aby nedoš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žívat pro svůj vlastní projekt.

Doporučená četba

Jedna z nejznámějších knih o použitelnosti je "Nenuťte mě přemýšlet!" od Steva Kruga. Název je zde program a nakonec to, co každý přístup použitelnosti je vše kolem.

  • "Don't Make Me Think, Revisited: Zdravý rozum přístup k web použitelnosti," Steve Krug
  • "Design každodenních věcí," Donald A. Norman
  • https://www.uxpin.com/ nabízí některé velmi zajímavé e-knihy ke stažení zdarma
Vaše dotazy týkající se uživatelského prostředí

Jaké máte otázky 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 více tipů na web design a vývoj? Tak nás následujte TwitterFacebook nebo přes náš Bulletin.

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 * .