Lekce 22 - UX: Jak na tlačítka

V minulé lekci, UX: Návrhový a prototypovací software, jsme si představili nejznámější a nejpoužívanější prototypovací nástroje, které můžeme jako UX designeři využít.

V této lekci se budeme zabývat tlačítky. Ukážeme se jak správně vytvářet a používat tlačítka tak, aby byla aplikace uživatelsky přívětivá.

Proč používáme tlačítka

Aby jsme dobře rozuměli tlačítkům, musíme se podívat na jejich předchůdce. Pradědové digitálních buttonů (tlačítek) jsou skutečné fyzická tlačítka. Lidé byli zvyklí mačkat fyzická, mechanická tlačítka, aby nastartovali auto nebo uvedli nějaký stroj do pohybu. Nemusí přesto vědět, jak to vlastně funguje. A právě v tomto pocitu z toho, že jsme něco spustili nebo uvedli do chodu, leží dnešní trend digitálních tlačítek.

To je to, co fascinuje uživatele i dnes. Instantní potěšení z toho, že se něco stane jednoduchým klinutím na tlačítko. Jedním kliknutím se můžeme všem našim přátelům pochlubit novou fotkou, okomentovat příspěvek, přihlásit se k odběru atd. Právě z toho důvodu je nesmírně důležité, aby tlačítka byla vytvořená správně a neubírala uživateli toto "potěšení z kliknutí".

Tlačítka vs. odkazy

Tlačítka říkají, že stisknutím provede uživatel nějakou akci. Když tlačítko stiskne, tak se něco stane. Běžně bývají umístěná v uživatelském rozhraní na místech s formuláři a dialogovými okny. Odkazy se mnohdy spíše nachází v textu. Zásadním rozdílem je však to, že uživatel vnímá odkaz jako cestu na jinou stránku. Uživatel vidí odkaz a ví, že když na něj klikne, tak bude přesměrován někam jinam. Uživatel neočekává, že se provede nějaká akce. Proto je velmi důležité odlišovat odkazy a tlačítka.

Pamatujme si, že:

• Tlačítka se používají k provedení akce. Např.: Odeslat, Zavřít, Potvrdit, Přihlásit se atd.
• Odkazy se používají k přesměrování uživatele někam jinam. Např.: Zobrazit vše, Přejít na profil atd.

Jak vypadá tlačítko

Vytvořit tlačítko, které bude jasně komunikovat jeho význam není tak jednoduché, jak se může zdát. Nestačí jen vložit tlačítku správný popis. První se ale podívejme, z čeho se tlačítko skládá:

Hlavními částmi tlačítka jsou:

• Text, který komunikuje, co tlačítko udělá
• Ikona, která není povinná, ale pomáhá lepšímu porozumění významu konkrétního tlačítka
• Odsazení, které se dělí na horní odsazení a dolní odsazení (známé také jako padding)
• Ohraničení, které ohraničuje celé tlačítko kolem dokola (známé také jako border)

Stavy tlačítka

Vzhled tlačítka se mění podle toho, v jakém stavu se nachází vykonávaná akce. Uživatelé jsou zvyklí na zavedené pravidla, jak tlačítka vypadají a jak se chovají, takže není úplně dobré to měnit. U každé interakce s tlačítkem uživatel očekává nějakou zpětnou vazbu (tzv. feedback). Když tedy na tlačítko najedu kurzorem, změní barvu či odstín:

Tlačítka se mohou nacházet v těchto stavech:

• Normální stav (výchozí) je stav, kdy uživatel na tlačítko nekliká ani neukazuje.
• Hover stav je stav, kdy uživatel najede kurzorem na tlačítko. Tlačítko by mělo lehce změnit svou barvu, aby uživateli indikovalo, že funguje a je aktivní.
• Disabled je stav tlačítka, kdy není (ani nemá být) funkční a mělo by to být už od pohledu uživateli jednoznačně řečeno vzhledem tlačítka. Takovéto tlačítko nijak nereaguje na uživatelovy akce.
• Načítání je stav, kdy tlačítko dává najevo, že se již něco děje a ujišťuje uživatele, že nemusí již znovu klikat. Znovu jde o zpětnou vazbu uživateli. Představme si, že tlačítko ukládá velké množství dat, proto může tato akce chvíli trvat. Kdyby uživatel klikl na tlačítko a v pozadí by začalo probíhat ukládání, ale tlačítko by nijak nezareagovalo (nebyl by přítomen feedback), tak by si uživatel nebyl jistý, že aplikace funguje a klikal by na tlačítko dále. Když se ale objeví načítací ikona, tak uživatel ví, že se již něco děje a není třeba klikat znovu.

Vzhled tlačítka

Tlačítka existují v různých velikostech, barvách a tvarech. Výběr vzhledu tlačítka závisí především na jeho významu. Následující obrázek ukazuje nejčastěji používané typy tlačítek:

Vzhled tlačítka také indikuje jeho důležitost a odlišuje ho od jiných tlačítek. Především v situacích, kde je na výběr více možností, je důležité odlišit tato tlačítka mezi sebou podle důležitosti:

V příkladu výše můžeme vidět, že na dialogové okno existují tři odlišné možnosti. Nejčastější možností je "Odeslat", proto je také nejvíce výrazné a nejvíce vpravo. Bylo zjištěno, že potvrzovací tlačítka je lepší umisťovat napravo, zatímco tlačítka na zrušení akce je dobré umisťovat nalevo. Další možností je "Uložit", tato možnost je také výrazná, ale ne tolik jako "Odeslat". Proto je napravo v okně, ale nalevo od tlačítka "Odeslat". Poslední možností je "Smazat", která se nachází na levé straně dialogového okna, jelikož je pravděpodobné, že tato možnost bude nejméně používaná.

Konzistentnost je důležitá

Je důležité, abychom při výběru vhodného tlačítka byli konzistentní ve všech situacích. Pokud chceme vytvořit aplikaci, která je uživatelsky přívětivá a intuitivní, musíme ji doladit do nejmenších detailů. Záleží na každé části. I zdánlivě bezvýznamné dialogové okno může rozbít dobrý dojem z aplikace, pokud je navržené špatně. Pokud budeme konzistentní při tvorbě ovládacích prvků, tak tím zajistíme, že práce v aplikaci bude rychlá a jednoduchá, jelikož bude uživatel zvyklý na tradiční rozmístění prvků a nebude překvapen žádným nevhodně položeným tlačítkem.

Uživatel nerad přemýšlí

Vzhled ovládacích prvků v aplikaci by měl být jednoznačný. Uživatel by měl umět aplikaci ovládat, aniž by s ní kdykoli před tím pracoval. To se týká i tlačítek. Je důležité aby bylo jasné, jaký význam má tlačítko a jestli se vůbec jedná o tlačítko. Cílem je vytvořit rozhraní, které se dobře ovládá, nevytváříme hádanky.

Dostatečně velké tlačítko

Zmáčknutí tlačítka by měla být jednoduchá a rychlá akce. Proto kromě pozice tlačítka záleží také na jeho velikosti. Především v dnešní době mobilních telefonů. Pokud vytváříme aplikaci, která bude dostupná také na telefonech, je důležité, aby byla tlačítka dostatečně velká a dostatečně daleko od sebe. Frustrace uživatele z toho, že omylem klikl na něco jiného může vést k tomu, že uživatel aplikaci přestane používat.

Tlačítka nejsou někdy třeba

V některých situacích nejsou tlačítka třeba. Mnoho uživatelů se naučilo používat gesta k vykonání určitých akcí. Například pokud procházím galerii, tak není třeba, aby na pravé a levé straně byla šipka, která zobrazí následující nebo předchozí fotku. Stačí aby uživatel přejel prstem zleva doprava a fotky v galerii se posunuly. Pokud se uživateli fotka líbí, tak není třeba přidávat tlačítko "To se mi líbí", ale uživatel může dvakrát klepnout na fotku a tím jí dát "Like". Používání gest je stále populárnější a designeři aplikací by měli tento trend brát vážně.

V další lekci, UX: Jak na barvy, se budeme zabývat barvami, jejich významem a důležitostí v dobře navržené uživatelsky orientované aplikaci.