6 typů digitální afordance, které dokáží ovlivnit UX

Afordance je termín, který vymyslel a poprvé použil psycholog J. J. Gibson v sedmdesátých letech minulého století. Definoval ji jako vztah mezi prostředím a aktérem. Dnes se afordance šíří i za hranice behaviorální a kognitivní psychologie, také do designu digitálních rozhraní. Když pochopíte, co afordance je, budete schopni lépe porozumět designu produktů a rozhraní, a postupně se stanete mnohem lepším designérem.

Co je afordance?

Situace, kdy smyslové charakteristiky objektu intuitivně implikují jeho funkcionalitu a používání. Crowdcube

Laická definice od Crowdcube je perfektní. Všechny objekty okolo nás mají afordance, některé jsou zjevnější než jiné. Afordance je možnost podniknout s objektem nějakou akci; není to vlastnost objektu samotného. Jinak řečeno, tlačítko se dá stisknout; možnost tlačítko stisknout je jeho afordance.

Původní definice, kterou poprvé použil J. J. Gibson, popisovala všechny možné fyzické akce, které můžete s objektem provést. V průběhu času se definice posunula. Nyní je definice širší a zahrnuje tzv. odhalitelnost (discoverability) akcí. Tuto změnu způsobila technologická revoluce digitálních rozhraní. Odhalitelnost je v digitální sféře zajímavý pojem, protože pokud používáte počítač, odhalujete možné akce prostřednictvím pokynů udělovaných uvnitř samotného rozhraní.

Fyzické objekty

Učiňme krok zpět do fyzického světa, kde vidíme objekty s vlastnosti jako jsou velikost, tvar nebo váha. Ty poskytují náznaky, co se s takovými objekty dá dělat. Uveďme dva klasické příklady. Začněme s čajovým šálkem; je malý a má ucho, které umožňuje šálek uchopit. Má také miskovitý tvar, který indikuje, že v něm může být něco nalitého. Pokud je v něm čaj, afordance je to, že můžete šálek uchopit a čaj vypít. Jako další příklad může posloužit kartáček na zuby: má dlouhé, ale tenké držadlo, které umožňuje ho pevně uchopit, a tak dále.

Fyzické objekty se mohou uspořádat do tří typů afordance:

Znatelná (perceptible) afordance je základní definice afordance, kde charakteristiky objektu implikují nějakou akci.

Skrytá afordance je taková, když objekt má afordance, které nejsou až tak očividné; když se například zběžně podíváte na pivní láhev, nebudete schopni říci, zda s její pomocí můžete otevřít jinou pivní láhev.

O falešnou afordanci jde tehdy, když sice existuje nějaká vnímaná afordance, ale možná akce nepřináší žádné výsledky. Stisknete například nějaké tlačítko, které nedělá nic, jako když chcete pomocí dálkového ovladače zapnout televizi, ale z nějakého důvodu to nefunguje. Afordance je přítomná — můžete svobodně tisknout tlačítko, kolikrát chcete — ale nic se nestane, není s ní sdružena žádná funkce. Typický příklad je zapomenutý odkaz na tlačítku.

Afordance v digitálních prostorech

Digitální rozhraní jsou zvláštní. Umožňují dělat věci limitované na dvourozměrný svět obrazovky počítače. Uvnitř každé aplikace, webu nebo programu se dá dělat strašná spousta všelijakých věcí; všechny ale mají jedno obrovité ochromující omezení: nemohou poskytovat fyzická vodítka, co se s nimi dá dělat. Místo toho se vše spoléhá na vizuální vodítka neboli afordance. To může být velmi ošidné, pokud dostatečně nechápete důležitost role, jakou afordance hraje při vytváření úspěšných rozhraní.

Pokud dobře chápete, jak afordance fungují, budete je schopni využívat ve svůj prospěch. Když umíte z afordance udělat nástroj, budete schopni vytvářet designy, které budou intuitivní, a bude snadné je používat. Intuitivní designy mají v sobě jistou výzvu tohoto druhu — nejpravděpodobněji proto, že pořád nacházíme spoustu webů či aplikací, které jsou nudné nebo jdou na nervy — takže je opravdu osvěžující, když narazíme na intuitivní design. Afordance kromě toho účinkují na konverze, a na těch hodně záleží, chcete-li vytvořit úspěšný design.

Typy afordance, které ovlivňují uživatelské prožitky

Chcete-li plně pochopit, jak fungují afordance v designu rozhraní, musíme být konkrétnější. Udělejme to tak, že probereme šest různých typů afordance, které vídáme v digitálních rozhraních: explicitní, šablonová, skrytá, falešná, metaforická a negativní afordance.

1) Explicitní afordance

Je obdobou znatelné (perceptible) afordance. Explicitní afordance jsou náznaky dané řečí nebo fyzickým vzhledem objektu. Reliéfní tlačítko s popiskem ‘Tady klikni’ je skvělou ukázkou řečového a současně fyzického vodítka. Reliéfní vzhled tlačítka indikuje, že se asi dá stisknout, a k témuž navádí text ‘Tady klikni’. Jasné a zřejmé.

Když doprovázíte uživatele digitálními rozhraními, hraje přitom důležitou roli řeč. Vstupní pole, které žádá, abyste uvedli své ‘jméno a příjmení’, očividně umožňuje tyto údaje do něho zapsat. Řeč poskytuje jasné pokyny nejen k tomu, co máte udělat, ale i k tomu, co byste mohli případně udělat. Zadávání písmen, jako když píšete své jméno, je něco jiného než zadávání čísel, jako když píšete své telefonní číslo, a podle kontextu můžete sdělit, co právě přichází v úvahu. Je však také důležité posoudit, jak snadno se rozhraní používá, když nebudou po ruce explicitní doslovné pokyny. Design musí být dobře použitelný a intuitivní, ne aby uživatel musel kvůli nějakým pokynům zastavovat své prsty při každém kroku.

2) Šablonová afordance

Šablonová (pattern) afordance je afordance daná konvencemi. Skvělým příkladem je logo, které bývá umístěné v levém horním rohu webové stránky a lze na něm kliknout. Je to jedna z šablon, jaké vidíme všude; proto je také všude očekáváme. Text, který je jinou barvou než ostatní text v odstavci, možná je také podtržený nebo kurzívou, se považuje za odkaz. E-mailová adresa se často reprezentuje obálkou, zatímco nastavování možností je často reprezentované ozubeným kolem.

Připomeňme, že e-mail nepotřebuje skutečnou obálku — nikdy ji nemá — a když nastavujete možnosti, nemusíte manipulovat s ozubenými koly. Je to jedna z metaforických šablon, jimž jsme vystavování už dlouhou, velmi dlouhou dobu; takže se staly (nepsanými) konvencemi.

Tyto druhy šablon jsou skvělé jakožto mentální komunikační zkratky, ale jen tehdy, pokud je uživatelé berou na vědomí, pokud vědí, co dané vzory vyjadřují. Pořád totiž vznikají nové vzory, například poměrně novým konceptem pro nabídky a navigaci je tzv. hamburgerové menu. Pokud hodláte v designu používat nějaké nové šablony, musíte zajistit, aby se s nimi uživatelé včas seznámili. Pokud ale víte, že publikum už bylo dříve takovým šablonám vystaveno, máte k dispozici výbavu, se kterou můžete vytvářet některé ohromující designy, aniž byste museli být explicitní.

3) Skrytá afordance

Skrytá (hiddden) afordance v digitálních designech je obdobou afordance fyzických objektů. V digitálním světě však není skutečná afordance dostupná, dokud se nepodnikne nějaká akce, která by ji vyjevila. Když například držíte kurzor myši nad nějakým tlačítkem, abyste zjistili, zda je aktivní, a zda se tedy dá na něm kliknout. Dalším příkladem jsou rozevíraná (drop down) menu, kdy menu nevidíte, dokud nepodržíte kurzor nebo nekliknete na položce v rodičovském seznamu.

Skrytými afordancemi se často zjednodušují vizuální složitosti designu. V příkladu rozevíraných menu, který jsme uvedli výše, navigační volby skrýváme, protože je jich příliš mnoho, nemůžeme je zobrazit všechny najednou. Chce-li uživatel přejít někam jinam, musí si odpovídající volbu najít uvnitř sady rozevíraných voleb. Obrovitou nevýhodou skrytých afordancí je, že požadují, aby si je uživatelé nacházeli sami, přitom se jim někdy neposkytuje žádný náznak, že takové afordance vůbec existují. Nevíte, co máte očekávat. Dá se říct, že to je něco jako hra „uhádni slovo, které si myslím“, tápete a afordance nacházíte až za pochodu.

4) Falešná afordance

Falešná (false) afordance v digitálním prostoru dovoluje něco jiného, než co se očekává — jako kdybyste dálkovým ovladačem nezapnuli televizi, ale rozsvítili – nebo se nestane vůbec nic. Na tento typ afordance narážíme na webech všude možně, většinou na ně přijdeme náhodou, jako třeba tlačítko, které sice vypadá jako aktivní prvek, ale nedělá nic, nebo logo, které není s ničím propojené, zvýrazněná slova ‘tady klikni’ uvnitř textu, která ale žádným odkazem nejsou, nebo červené tlačítko, které udělá něco hezkého se zeleným tlačítkem, které udělá něco ošklivého.

Falešná afordance se v hojné míře vyskytuje v designech, v nichž se nevěnuje dost pozornosti detailům, jakým je například odkaz, který už neexistuje. Také s barvami jsou spojené jisté asociace. V západním světě je zelená dobrá, zatímco červená špatná. Když to uděláte opačně, téměř s jistotou některé z uživatelů zmatete, zejména pokud tato dvě tlačítka budou vedle sebe. Tím nechci říct, že to tak dělat nesmíte; musíte ale při tom být obezřetní. Určitě nechcete v designu vyvolávat nějaké falešné afordance, pokud to opravdu není nutné. Neměli byste takto překvapovat své uživatele.

5) Metaforická afordance

Na metaforické afordance se značně spoléhal skeuomorfizmus, kdy se ke komunikaci používaly imitace skutečných objektů. Nádherným jeho příkladem jsou ikony: mapa, nákupní vozík nebo košík, domeček, tiskárna, video, mikrofon, telefon atd. Vezměme například pojetí elektronické pošty. Je založena na metafoře fyzického dopisu; její ikonou je obvykle obálka. Je to skvělá ukázka všudypřítomné metaforické afordance. Pokud něco navrhujete a nejste si jisti, jako to vyjádřit (ztvárnit), vždy je dobré vrátit se do fyzického světa, přinejmenším pro inspiraci a abyste měli z čeho vyjít.

Ne, nemusíte to přehánět natolik, že byste postupovali podobně jako společnost Apple ve svých starých designech, kdy pro svou herní aplikaci vyrobili pozadí v podobě zeleného sukna kulečníkového stolu. Porovnejte to s jejich současnou ikonou aplikace Games, což je jen několik bublin. Co mají společného s hrami? Nevím, metafora se už vytratila. Jestli je to dobrá věc nebo ne, musíte rozhodnout sami. Zda v designu nutně potřebujete nějakou metaforu nebo ne, je na vás.

6) Negativní afordance

Negativní afordanci lze chápat tak, že konkrétně indikuje, že není žádná afordance; když máte nějaké neaktivní tlačítko, nebo tlačítko, které vypadá jako neaktivní. Nejběžnější instanci představuje stav, kdy jsou prvky jako tlačítko či odkaz „zašedlé“. A teď přijde ta ošidná část: není to tak, že se konkrétně pokoušíte uživateli říct, že nemůže toto tlačítko používat — přestože by použitelné být mělo — ale že se jen jeví, jako že ho nemůže používat, přestože ve skutečnosti se používat může.

Existují jisté situace, kdy chcete jasně indikovat, že uživatel by něco konkrétního neměl dělat. Pokud například uživatel vyplňuje nějaký formulář a ještě nevyplnil vše požadované, stav tlačítka by se pořád měl jevit jako neaktivní, protože si ještě nepřejete, aby uživatel pokračoval dál. Pokud však tlačítko jen vypadá jako neaktivní, ale přitom je aktivní, je to prostě špatný design. Dávejte si na to pozor.

Napsala Paula Borowska

Paula provozuje blog BeingLimited uživatelských prožitků a je autorka připravované knihy o mobilním designu, Mobile Design Book, je k mání 13. srpna. Další články od Pauly Borowské

Přeloženo se souhlasem Webdesignerdepot.com

Původní článek: 6 types of digital affordance that impact your UX

Překlad: RNDr. Jan Pokorný

Jazyková korekce: Marek Machač