Inspirujme se pro uživatelská rozhraní v reálném světě

Když se dnes rozhlédneme kolem sebe, uvidíme spoustu lidí hrát si s telefonem, tabletem nebo jak si čtou nějakou knížku na Kindle. Dost lidí také bude používat nějaký počítač v práci.

Je tedy jasné, že digitální produkty se opravdu staly každodenní součástí našich životů a my se tak neustále setkáváme s uživatelským rozhraním, díky kterému naše zařízení ovládáme, něco na nich tvoříme nebo „konzumujeme“.

Asi není potřeba říkat, že uživatelské rozhraní by mělo co nejjednodušší a lidé jej tak mohli snadno použít. Jak toho ale dosáhnout? Existuje spousta způsobů, mně osobně se třeba líbí hledat inspiraci v reálném světě a dělat tak uživatelská rozhraní nejen snadno použitelná, ale i vizuálně zajímavá.

Historie nám může hodně ukázat

Protože táta miluje historii, vždycky mi tloukl do hlavy, abych se o ní taky zajímal. Prý se z ní můžu lecos naučit, resp. se poučit z toho, co už někdy bylo. (Určité události se totiž prý neustále opakují, například módní trendy.)

Podívejme se tedy trochu do historie a vezměmě si třeba takové počítače. Když se z nich pomalu stával produkt pro běžné lidi, výrobci řešili zapeklitou otázku – jak udělat jejich ovládáni co nejjednodušší a lidé si je tak domu koupili? Přeci jen ani dnes není ovládání přes příkazovou řádku zrovna jednoduché.

Začala se tedy objevovat různá grafická rozhraní, například:

  • Xerox představil úplně první rozhraní s okny.
  • Kapesní počítače graficky simulovaly kancelář.
  • Apple ve svých prvních iOS aplikacích využil motivy reálných materiálů.
Magic Cap UI - jak vypadalo rozhraní pro jeden z prvních kapesních počítačů.
Magic Cap UI – jak vypadalo rozhraní pro jeden z prvních kapesních počítačů.
Zdroj: https://blog.codinghorror.com/is-the-command-prompt-the-new-desktop/

Designéři totiž chtěli rozhraní udělat co nejjednoduší a vlastně jej co nejlépe vysvětlit lidem – aby na základě formy lépe chápali, jak funguje. Proto jej přizpůsobovali věcem z reálného světa, který lidé znají.

Určitě tento přístup znáte, jmenuje se Skeumorphism. Na Wikipedii se o něm můžete například dočíst, že:

„A skeuomorph is a derivative object that retains ornamental design cues (attributes) from structures that are inherent to the original.“

Je to vlastně princip, který zakládá na vizuální imitaci nějakého vzorového (původního) objektu.

Jak to vlastně ale ovlivňuje uživatelské rozhraní? Podívejme se například na běžný přepínač, který můžeme znát z různých zařízení. V podstatě jde o jednoduché zařízení se dvěma stavy – zapnuto a vypnuto.

Jak vypadá přepínač, tak jak jej můžete znát z běžného života.
Jak vypadá přepínač, jak jej můžete znát z běžného života.

Přepínač jsem vybral záměrně, protože se s ním dnes velice často v rozhraní setkáme. Jak by vlastně vypadal, kdy bychom jej navrhli s využitím Skeumorphismu a Flat designu?

Příklad přepínače s využitím Skeumorphismu a Flat designu.
Příklad přepínače s využitím Skeumorphismu a Flat designu.
Zdroj: https://loonars.com/skeuomorphism-in-web-design/

Skeumorphism se začal docela hojně využívat, ale po nějaké době začala být cítit vlna odporu proti „koženým“ aplikacím. Přišla tedy snaha Skeumorphism pohřbít a postupně se používat Flat design.

Z mého pohledu se ale, i přes veškerou snahu, Skeumorphism pohřbít nepodařilo a v určité míře jej stále využíváme. Podívejme se na některé standartní prvky, jako je například:

  • Tlačítko,
  • Zaškrtávací políčko,
  • Složky,
  • V podstatě i výběr datumu skrz kalendář.

A další. Známe je z reálného světa a jejich digitální podoba se jim stále hodně podobá. Což je podle mě ale dobře, protože díky jejich vzhledu (naučeným konvencím) je pak můžeme snadno vnímat, chápat a používat.

Mně se tento přístup opravdu líbí. Vždy se snažím rozhraní navrhnout co nejjednodušší, ale kožená rozhraní navrhovat zrovna nemusím. Nedržel bych se tedy přímé definice Skeumorphismu, ale inspiroval se její částí „retains design cues that are inherent to the original“ a využívat tedy designové náznaky originálu – tedy toho, jak bychom to udělali v reálném světě.

Jak byste to udělali v reálném světě?

V souvislosti s návrhem uživatelského rozhraní mě zaujala knížka Brave NUI World od Daniela Wigdora a Dennise Wixona. Popisují v ní proces, jakým v Microsoftu tvořili vícedotykové rozhraní pro Microsoft Table, Surface a další podobná zařízení.

Dalo by se to shrnout tak, že pozvali mnoho lidí, kterým:

  • Pokládali různé úkoly pro práci s rozhraním.
  • Sledovali, jak dané věci udělají.

Lidé pro ovládání používali gesta tak, jak je používají v běžném životě. Například pro odstranění nějaké položky z obrazovky jej prostě dotáhli za kraj obrazovky – jako když byste chtěli dát časopis pryč ze stolu.

Jak například vyřešit interakci pro odebrání nějaké položky? Stejně jako kdybyste chtěli dát ze stolu pryč časopis - prostě jej “stáhnout” mimo.
Jak například vyřešit interakci pro odebrání nějaké položky? Stejně jako kdybyste chtěli dát ze stolu pryč časopis – prostě jej „stáhnout” mimo.

Je to vlastně hodně podobné zmiňovanému Skeuomorphismu, i když tady nejde o vizuální formu, ale ovládání. Co kdybychom ale obojí spojili dohromady?

Podívejme se třeba na formuláře pro placení kartou. Vedle požadovaných políček v nich často najdete nápovědu, kde najít CVV číslo (které je umístěné na zadní straně). Viz následující příklady.

Zaplatit kartou můžete vlastně pomocí běžného formuláře, ve kterém je nápověda, pokud byste si nevěděli rady.
Zaplatit kartou můžete vlastně pomocí běžného formuláře, ve kterém je nápověda, pokud byste si nevěděli rady.

Je taková nápověda potřeba? Co kdybychom totiž tento formulář trochu přibližili podobě skutečné platební karty?

Jen takový koncept - pozice políček je jako na kartě a rozhraní by člověka automaticky vedlo zadáváním, aniž by musel sundat ruce z klávesnice.
Jen takový koncept – pozice políček je jako na kartě a rozhraní by člověka automaticky vedlo zadáváním, aniž by musel sundat ruce z klávesnice.

Díky pozici prvků přesně jako na kartě a jejímu otočení bychom:

  • Nemuseli nic složitě hledat, formulář by nás svou formou a chováním automaticky navedl.
  • Mohli údaje velice snadno zkontrolovat.

Nebo si vezměmě obyčejný seznam položek. Představme si, že si chceme všechny položky volně projít a vybrat si z nich jen ty nejzajímavější. Třeba jako když si procházíte životopisy kandidátů nebo poštu.

V uživatelském rozhraní se seznamy běžně setkáváme. Typicky jsou postavené tak, že:

  • Položky jsou seřazené pod sebou.
  • Musíte víceméně každou položku otevřít pro získání více informací.
Výpis položek, kterým můžete “skrolovat”. Celkem běžná součást jakékoliv aplikace.
Výpis položek, kterým můžete „skrolovat”. Celkem běžná součást jakékoliv aplikace.

Co kdybychom ale seznam udělali tak, jako když skutečně listujete nějakými papíry?

V LMC jsem přemýšlel o tom, jak udělat listování profily lidí trochu . Inspiroval jsem se tím, jak by si člověk procházel papíry ze složky (třeba životopisy).
V LMC jsem přemýšlel o tom, jak udělat listování profily lidí trochu jinak a pro daný případ zajímavějším a (možná) lepším způsobem. Inspiroval jsem se tím, jak by si člověk procházel životopisy ze složky.

Nemuseli bychom všechny položky otevírat, ale stačilo by si jej prolistovat a otevřít si jen to, co nás skutečně zaujalo.

Podle mě není potřeba při tvorbě rozhraní vymýšlet nic složitého. Mnohdy se stačí rozhlédnout kolem sebe a najít nějakou inspiraci, díky které bude výsledek nejen snadno použitelný, ale i vizuálně zajímavý. (Třeba jak o tom mluví Johny Vino během Live UI/UX Design s Adobe.)

Děláme to pro lidi

Když vymýšlíme nějaké uživatelské rozhraní, měli bychom mít na paměti, k čemu má vlastně sloužit a komu. Primárně by mělo být pro lidi, kteří budou chtít pomocí něj něčeho dosáhnout.

Je asi zbytečné říkat, že rozhraní by měla být jednoduchá. Sám si právě často říkám, proč nezačít s něčím, co už možná lidé dávno znají. Přeci jen to děláme primárně pro ně a neměli bychom jim zbytečně házet klacky pod nohy.

Komentáře

  1. Michal, zaujímavý článok. V ukážke rozhrania so zoznamom je pekne vidno, že v digitálnom svete máme vlastne oveľa viac možností a hlavne na zariadeniach s väčšou obrazovkou môžeme nájsť ešte lepšie riešenie ako sa ponúka vo fyzickom svete: vybrať najdôležitejšie informácie z každej položky, zobraziť ich vypísané v zozname a umožniť preklik na detail každej položky s kompletnými informáciami. V každom prípade je inšpirácia v reálnom svete určite užitočná.

    • Ahoj, díky za komentář. Ano, máš pravdu, že můžeme často využívat více možností. Je ale potřeba nad tím často přemýšlet a nedělat to svéhlavě a zase obrazovky přehltit ;-).

Napsat komentář: Matej Chyľa Zrušit odpověď na komentář