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

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.

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?

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.

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.

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

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

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

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.