4. diel - UX: Ako na tlačidlá

V tejto lekcii sa budeme zaoberať tlačidlami. Ukážeme sa ako správne vytvárať a používať tlačidlá tak, aby bola aplikácia užívateľsky prívetivá.

Prečo používame tlačidlá

Aby sme dobre rozumeli tlačidlám, musíme sa pozrieť na ich predchodca. Pradedovia digitálnych buttonov (tlačidiel) sú skutočné fyzické tlačidlá. Ľudia boli zvyknutí stláčať fyzické mechanické tlačidlá, aby naštartovali auto alebo uviedli nejaký stroj do pohybu. Nemusí predsa vedieť, ako to vlastne funguje. A práve v tomto pocite z toho, že sme niečo spustili alebo uviedli do chodu, leží dnešný trend digitálnych tlačidiel.

To je to, čo fascinuje užívateľa aj dnes. Instantné potešenie z toho, že sa niečo stane jednoduchým klinutím na tlačidlo. Jedným kliknutím sa môžeme všetkým našim priateľom pochváliť novou fotkou, okomentovať príspevok, prihlásiť sa k odberu atď. Práve z toho dôvodu je nesmierne dôležité, aby tlačidlá boli vytvorené správne a neuberali užívateľovi toto "potešenie z kliknutí".

Tlačidlá vs. odkazy

Tlačidlá hovoria, že stlačením vykoná užívateľ nejakú akciu. Keď tlačidlo stlačí, tak sa niečo stane. Bežne bývajú umiestnené v užívateľskom rozhraní na miestach s formulármi a dialógových okien. Odkazy sa veľakrát skôr nachádza v texte. Zásadným rozdielom je však, že používateľ vníma odkaz ako cestu na inú stránku. Používateľ vidí odkaz a vie, že keď na neho klikne, tak bude presmerovaný niekam inam. Užívateľ neočakáva, že sa urobí nejaká akcia. Preto je veľmi dôležité odlišovať odkazy a tlačidlá.

Pamätajme si, že:

• Tlačidlá sa používajú na vykonanie akcie. Napr .: Odoslať, Zavrieť, Potvrdiť, Prihlásiť sa atď.
• Odkazy sa používajú na presmerovanie používateľa niekam inam. Napr .: Zobraziť všetko, Prejsť na profil atď.

Ako vyzerá tlačidlo

Vytvoriť tlačidlo, ktoré bude jasne komunikovať jeho význam nie je tak jednoduché, ako sa môže zdať. Nestačí len vložiť tlačidlu správny popis. Prvý sa ale pozrime, z čoho sa tlačidlo skladá:

Hlavnými časťami tlačidlá sú:

• Text, ktorý komunikuje, čo tlačidlo urobí
• Ikona, ktorá nie je povinná, ale pomáha lepšiemu porozumeniu významu konkrétneho tlačidla
• Odsadenie, ktoré sa delia na horné odsadenie a dolné odsadenie (známe tiež ako padding)
• Ohraničenie, ktoré ohraničuje celé tlačidlo dookola (známe tiež ako border)

Stavy tlačidla

Vzhľad tlačidla sa mení podľa toho, v akom stave sa nachádza vykonávaná akcie. Používatelia sú zvyknutí na zavedené pravidlá, ako tlačidlá vyzerajú a ako sa správajú, takže nie je úplne dobré to meniť. Pri každej interakcie s tlačidlom užívateľ očakáva nejakú spätnú väzbu (tzv. Feedback). Keď teda na tlačidlo nabehnete kurzorom, zmení farbu či odtieň:

Tlačidlá sa môžu nachádzať v týchto stavoch:

• Normálny stav (predvolené) je stav, kedy užívateľ na tlačidlo neklikať ani neukazuje.
• Hover stav je stav, kedy užívateľ nabehne kurzorom na tlačidlo. Tlačidlo by malo ľahko zmeniť svoju farbu, aby užívateľovi indikovalo, že funguje a je aktívna.
• Disabled je stav tlačidla, kedy nie je (ani nemá byť) funkčné a malo by to byť už od pohľadu užívateľovi jednoznačne povedané vzhľadom tlačidla. Takéto tlačidlo nijako nereaguje na používateľove akcie.
• Načítanie je stav, keď tlačidlo dáva najavo, že sa už niečo deje a uisťuje užívateľa, že nemusí už znovu klikať. Znovu ide o spätnú väzbu používateľovi. Predstavme si, že tlačidlo ukladá veľké množstvo dát, preto môže táto akcia chvíľu trvať. Keby používateľ klikol na tlačidlo a v pozadí by začalo prebiehať ukladanie, ale tlačidlo by nijako nepodniklo (nebol by prítomný feedback), tak by si užívateľ nebol istý, že aplikácia funguje a klikal by na tlačidlo ďalej. Keď sa ale objaví načítací ikona, tak užívateľ vie, že sa už niečo deje a nie je potrebné klikať znovu.

Vzhľad tlačidla

Tlačidlá existujú v rôznych veľkostiach, farbách a tvaroch. Výber vzhľadu tlačidla závisí predovšetkým na jeho významu. Nasledujúci obrázok ukazuje najčastejšie používané typy tlačidiel:

Vzhľad tlačidla tiež indikuje jeho dôležitosť a odlišuje ho od iných tlačidiel. Predovšetkým v situáciách, kde je na výber viac možností, je dôležité odlíšiť tieto tlačidlá medzi sebou podľa dôležitosti:

V príklade vyššie môžeme vidieť, že na dialógové okno existujú tri odlišné možnosti. Najčastejšou možnosťou je "Odoslať", preto je tiež najviac výrazné a najviac vpravo. Bolo zistené, že potvrdzovací tlačidla je lepšie umiestňovať napravo, zatiaľ čo tlačidlá na zrušenie akcie je dobré umiestňovať naľavo. Ďalšou možnosťou je "Uložiť", táto možnosť je tiež výrazná, ale nie toľko ako "Odoslať". Preto je napravo v okne, ale naľavo od tlačidla "Odoslať". Poslednou možnosťou je "Zmazať", ktorá sa nachádza na ľavej strane dialógového okna, keďže je pravdepodobné, že táto možnosť bude najmenej používaná.

Konzistentnosť je dôležitá

Je dôležité, aby sme pri výbere vhodného tlačidla boli konzistentné vo všetkých situáciách. Ak chceme vytvoriť aplikáciu, ktorá je užívateľsky prívetivá a intuitívny, musíme ju doladiť do najmenších detailov. Záleží na každej časti. Aj zdanlivo bezvýznamné dialógové okno môže rozbiť dobrý dojem z aplikácie, ak je navrhnuté zle. Ak budeme konzistentné pri tvorbe ovládacích prvkov, tak tým zaistíme, že práca v aplikácii bude rýchla a jednoduchá, pretože bude užívateľ zvyknutý na tradičné rozmiestnenie prvkov a nebude prekvapený žiadnym nevhodne položeným tlačidlom.

Užívateľ nerád premýšľa

Vzhľad ovládacích prvkov v aplikácii by mal byť jednoznačný. Užívateľ by mal vedieť aplikáciu ovládať, bez toho, aby s ňou kedykoľvek pred tým pracoval. To sa týka aj tlačidiel. Je dôležité aby bolo jasné, aký význam má tlačidlo a či sa vôbec jedná o tlačidlo. Cieľom je vytvoriť rozhranie, ktoré sa dobre ovláda, nevytvárame hádanky.

Dostatočne veľké tlačidlo

Stlačenie tlačidla by mala byť jednoduchá a rýchla akcia. Preto okrem pozície tlačidla záleží tiež na jeho veľkosti. Predovšetkým v dnešnej dobe mobilných telefónov. Ak vytvárame aplikáciu, ktorá bude dostupná aj na telefónoch, je dôležité, aby boli tlačidlá dostatočne veľká a dostatočne ďaleko od seba. Frustrácia užívateľa z toho, že omylom klikol na niečo iné môže viesť k tomu, že používateľ aplikáciu prestane používať.

Tlačidlá nie sú niekedy treba

V niektorých situáciách nie sú tlačítka treba. Mnoho používateľov sa naučilo používať gestá na vykonanie určitých akcií. Napríklad, ak prechádzam galériu, tak nie je potrebné, aby na pravej a ľavej strane bola šípka, ktorá zobrazí nasledujúcu alebo predchádzajúcu fotku. Stačí aby užívateľ prešiel prstom zľava doprava a fotky v galérii sa posunuli. Ak sa užívateľovi fotka páči, tak nie je potrebné pridávať tlačidlo "Páči sa mi to", ale užívateľ môže dvakrát kliknúť na fotku a tým jej dať "Like". Používanie gest je stále populárnejšie a designéri aplikácií by mali tento trend brať vážne.

V nasledujúcej lekcii, UX: Ako na formuláre , sa budeme zaoberať formulári. Ukážeme si niekoľko pravidiel a postupov ako zabezpečiť, aby boli naše formuláre užívateľsky prívetivé.