Aktuálně: Postihly zákazy tvou profesi? Poptávka po ajťácích prudce roste, využij slevové akce 50% výuky zdarma!
Pouze tento týden sleva až 80 % na e-learning týkající se Javy
Discount week - May - 50

Lekce 4 - UX: Jak na tlačítka Nové

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 byly vytvořené správně a neubíraly 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ých oken. Odkazy se mnohdy spíše nachází v textu. Zásadním rozdílem je však, ž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

Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!

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 tyto 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 byly 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 následující lekci, UX: Jak na formuláře, se budeme zabývat formuláři. Ukážeme si několik pravidel a postupů jak zajistit, aby byly naše formuláře uživatelsky přívětivé.


 

Předchozí článek
UX: Návrhový a prototypovací software
Všechny články v sekci
User Experience (UX)
Článek pro vás napsal Matěj Eliáš
Avatar
Jak se ti líbí článek?
Ještě nikdo nehodnotil, buď první!
Autor se věnuje programování webových aplikací. Zajímá se o moderní trendy a vývoj ve světě technologií a herním průmyslu.
Aktivity (2)

 

 

Komentáře

Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zatím nikdo nevložil komentář - buď první!