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

1. diel - Úvod do UX

Vitajte u úvodné lekcie o UX, čiže U ser e X Perience. Zoznámime sa s odborom UX designu, vysvetlíme si, prečo je dôležité sa venovať návrhu rozhrania a uvedieme si najzákladnejšie pravidlá jeho návrhu.

Čo je to UX?

UX, alebo po slovensky "Užívateľský prežitok", je odbor zaoberajúci sa uľahčením používania rozhrania webov, programov, ale aj strojov a ďalšieho. Užívateľ môže mať z používania, napríklad webu, rôzne pocity:

  • Logicky umiestnené navigačné prvky alebo prehľadne usporiadaný obsah sú jedným zo znakov, ktoré používateľa zaujmú.
  • Naopak, ak je web preplnený reklamou, ktorá "skáče" a stránka sa pomaly načítava, používateľ často web opustí.

UX je často vnímaný ako synonymum UI (U ser I nterface či užívateľské rozhranie). Oba odbory sa týkajú procesu tvorby rozhranie, ale každý rieši rôznu časť. Úlohou UI je tvorba rozhranie, zatiaľ čo úlohou UX je premyslenie návrhu rozhranie. V praxi sa často obaja odbory kombinujú a hovoríme tak o UX / UI designu.

Je dôležitejšie UX, alebo UI?

UX a UI je rovnako dôležité a hrajú svoju nezastupiteľnú úlohu. Ak vytvoríme graficky pekné rozhranie, napríklad webu, s ktorým však nemožno rýchlo pracovať, potom môžeme tvrdiť, že taký web má dobré UI, ale zlé UX. Naopak ak sa web dobre ovláda, ale nechce sa nám na neho vôbec pozerať, potom máme dobré UX a zlé UI.

Prečo je UX dôležitý odbor?

Túto otázku si odpovieme ukážkou niekoľkých zlých riešení rozhranie, ktoré používateľa dokážu veľmi rýchlo odradiť od ich používania či zaobstaranie.

Ako prvý príklad si uvedieme výťahová tlačidlá:

rozhranie výťahu

Ak potrebuje užívateľ vysvetliť, ako rozhranie funguje (v našom prípade, ako si zvoliť poschodie), potom je rozhranie neprehľadné a používateľa bude miasť. Dobré rozhranie, nielen výťahu, ale aj webu či programu, musí byť na prvý pohľad pochopiteľné a použiteľné.

Tento výukový obsah pomáhajú rozvíjať nasledujúce firmy, ktoré možno hľadajú práve teba!

Ďalší príklad si uvedieme autorádio:

rozhranie autorádia

Veľkým strieborným kolieskom môže vodič ovládať automatickú prevodovku, kolieskom napravo si môže upravovať hlasitosť. Nepozornému vodiči by sa mohlo stať, že namiesto zosilnenie rádia vyradí prevod. Rozhrania a jeho použiteľnosť je jedným z rozhodujúcich faktorov pri výbere produktu, nepraktické rozhranie môže teda užívateľa odradiť.

Mohli by sme ďalej uvádzať ďalšie príklady, ktoré sa vyskytujú nielen v reálnom svete. Teraz si však zodpovieme našu otázku, prečo je UX dôležitý. Zásady UX dizajnu nám totiž umožňujú vytvárať rozhranie, nielen webová a programová, ktoré sú zrozumiteľné a práca s nimi je rýchla a efektívna.

Desatoro UX designera

Návrh rozhranie nie je triviálna vec. Je potrebné zohľadniť veľké množstvo aspektov. Desatoro "prikázaní" UX dizajnéra obsahuje tie najdôležitejšie.

1. Používateľ vždy vie, čo sa deje

Rozhranie by malo užívateľa informovať o stave systému. K tomuto môžeme využiť potvrdzovacie správy, zvýrazňovanie položiek, alebo ukazovateľ priebehu:

Ukazovateľ priebehu kopírovania zložky vo Windows 10

Ukazovateľ priebehu kopírovania zložky vo Windows 10.

2. Rozhranie využíva zrozumiteľný dizajnový jazyk

Užívateľ musí bez akýchkoľvek dodatočných znalostí porozumieť správam programu. Tlačidlá je vhodné ilustrovať ikonkami:

Ukážka ikon programu Microsoft Excel

Ukážka ikon programu Microsoft Excel.

3. Používateľ musí mať nad programom skrz rozhranie úplnú kontrolu

Rozhranie by malo poskytovať užívateľovi všetky dostupné možnosti programu a nič pred ním neskrývať. Ak nastane v programe chyba, potom musí program užívateľovi umožniť problém vyriešiť, napríklad pomocou tlačidla "Zrušiť":

Hlásenie Windows 10 o chybe pri práci so súborom

Hlásenie Windows 10 o chybe pri práci so súborom.

4. Rozhranie využíva zabehnuté a známe štandardy

V dnešnej dobe existuje mnoho štandardizovaných dizajnových jazykov, treba Material design používaný v aplikáciách operačného systému Android. Aplikácie využívajúce tento jazyk majú rovnaké ovládacie prvky. užívateľ tak nemusí rozpoznávať nové ovládacie prvky:

Ukážka aplikácie používajúce dizajnový jazyk Material design

Ukážka aplikácie používajúce dizajnový jazyk Material dizajn.

5. Rozhranie nepotrebuje vysvetlenie

Rozhranie musí byť pre užívateľa prehľadné a jeho ovládanie intuitívne, nenútime ho si pamätať ovládanie programu alebo webu. Vhodné je využívať vizuálny nápovedy:

Vizuálne nápoveda pri výbere fontu v programe Microsoft Word

Vizuálne nápoveda pri výbere fontu v programe Microsoft Word.

6. Rozhranie ošetruje zlé vstupy

Rozhranie by malo validovať vstupy, napovedať hodnoty a redukovať zbytočné kroky. Pred vykonaním nezvratné zmeny je vhodné sa používateľa opýtať, ak je si skutočne istý. Vzorové rozhranie napríklad ošetruje prihlasovaciu e-mailovú adresu:

Ošetrenie prihlasovacieho e-mailu na webe

Ošetrenie prihlasovacieho e-mailu na webe.

7. Rozhranie obsahuje "zložitejšie režim" pre expertov

Bežný užívateľ najpravdepodob­nejšie využije automatické nastavenie. Náš program však môžu používať aj "počítačovo zdatní" užívatelia, ktorým je vhodné poskytnúť rozšírené nastavenia:

Pokročilé nastavenia v programe VirtualBox

Pokročilé nastavenia v programe VirtualBox.

8. Rozhranie je estetické a minimalistické

Tu sa dostávame skôr do roviny UI. Vytvárané užívateľské prostredie by malo byť vzhľadné či bez zbytočných funkcionalít. Uveďme si príklad z praxe. Koľko tlačidiel má televízny ovládač u vás doma? A koľko tlačidiel reálne využívate?

Koľko tlačidiel potrebuje ovládanie televízie?

Koľko tlačidiel potrebuje ovládanie televízie?

9. V prípade problému sa užívateľ má na koho obrátiť

Každý program by mal obsahovať kontakt na technickú podporu. Nemusí sa hneď jednať o celé oddelenie, menším projektom postačí e-mail pre kontaktovanie v prípade problémov.

10. Ku zložitejšiemu rozhranie je používateľsky prístupná nápoveda

Niekedy sa môžeme snažiť urobiť čo najprehľadnejšie užívateľské rozhranie, ale aj tak môže byť pre niektorých užívateľov, najmä zo začiatku, mierne mätúce. Pre uľahčenie nasadenia nášho programu by mala vždy existovať nápoveda. Užívateľ tak vždy bude mať istotu, že bude vedieť, ako pokračovať.

Touto lekcií sme sa uviedli do problematiky UX dizajnu, vysvetlili sme si základnú myšlienku tohto odboru a na príkladoch z praxe si ukázali základné pravidlá.

V budúcej lekcii, Spolupráca s užívateľom a pomôcky UX designera , si ukážeme, akú úlohu zohrávajú pri realizácii rozhrania používatelia a aké pomôcky používa UX designer.


 

Všetky články v sekcii
User Experience (UX)
Článok pre vás napísal Jiří Křištof
Avatar
Ako sa ti páči článok?
Ešte nikto nehodnotil, buď prvý!
Aktivity (1)

 

 

Komentáre

Avatar
Nositelka Změny:21.10.2020 19:32

Nejsem si jistá, ale lepší ovládání výtahu ani televize si moc neumím představit. Výtah ani jinak udělat nejde a na ovladači jsou tlačítka alespoň jako okrasa, bez nich by to nevypadalo hezky...

Odpovedať
21.10.2020 19:32
j.k.j
Robíme čo je v našich silách, aby bola tunajšia diskusia čo najkvalitnejšia. Preto do nej tiež môžu prispievať len registrovaní členovia. Pre zapojenie sa do diskusie sa zaloguj. Ak ešte nemáš účet, zaregistruj sa, je to zadarmo.

Zobrazené 1 správy z 1.