Design uživatelského rozhraní

(c) Shmuel Csaba Otto Traian, CC BY-SA 3.0
Grafické uživatelské rozhraní je např. to, co vidíme na monitoru počítače. Je výsledkem zpracovaného vstupu uživatele a obvykle je primárním rozhraním pro interakci mezi člověkem a strojem. Dotyková uživatelská rozhraní populární na malých mobilních zařízeních jsou pak překryvem vizuálního výstupu s vizuálním vstupem.

Design uživatelského rozhraní (zkráceně UI design, z angl. user interface) je proces návrhu uživatelských rozhraní pro stroje a software, např. počítače, domácí spotřebiče, mobilní a další elektronická zařízení, a to se zaměřením na maximální použitelnost a co nejlepší uživatelský zážitek. Cílem designu uživatelského rozhraní je, aby interakce uživatele s daným systémem byla z hlediska dosažení uživatelského cíle co nejjednodušší a nejefektivnější (design zaměřený na uživatele).

Dobrý UI design usnadňuje užití systému bez toho, aby na sebe zbytečně upozorňoval. K tomu využívá grafický design a typografii, které mají vliv na uživatelovu interakci s rozhraním a napomáhají celkovému estetickému dojmu, a tak UI design zvyšuje použitelnost daného systému. Estetika designu může uživateli v ovládání funkcí rozhraní pomoci, ale může mít i opačný efekt[1], proces návrhu rozhraní proto musí umět vyvážit technickou funkčnost a vizuální prvky (viz např. mentální model) tak, aby vznikl systém, který nejen správně funguje, ale zároveň se dá snadno používat a umí se přizpůsobit měnicím potřebám uživatele.

UI design má široké pole působnosti, od počítačových systémů přes automobily až po komerční letadla. Tyto oblasti toho sice mají po stránce základní lidské interakce mnoho společného, ale každá z nich vyžaduje jedinečné dovednosti a znalosti, proto se designéři často specializují na specifické druhy projektů a své schopnosti rozvíjejí podle daného zaměření, ať už jde o softwarový či průmyslový design, uživatelský výzkum nebo web design.

Procesy a fáze UI designu

Šablona pro design mobilních a desktopových aplikací (pdf).

UI design vyžaduje porozumění potřebám uživatelů a jeho hlavním zaměřením jsou požadavky dané platformy a očekávání, která od ní uživatelé mají. Design uživatelského rozhraní se skládá z několika fází a procesů, které mohou mít v závislosti na konkrétním projektu různou váhu.[2] (Pozn.: ve zbytku této části článku slovo systém znamená jakýkoli projekt, např. web, aplikaci nebo zařízení.)

  • Shromažďování požadavků na funkčnost – sestavení seznamu funkcí požadovaných systémem k dosažení cílů projektu a uspokojení potenciálních potřeb uživatelů.
  • Uživatelská a úkonová analýza – forma terénního výzkumu za účelem analýzy potenciálních uživatelů systému, které výzkum sleduje při plnění úkonů, jejichž fungování musí proces designu zajistit, a následné rozhovory vedoucí k formulaci cílů.[3] Typické otázky jsou např.:
    • Co by uživatel chtěl, aby systém udělal?
    • Jak by systém zapadl do běžného denního chodu nebo pracovního postupu uživatele?
    • Jak technicky zdatný uživatel je a jaké podobné systémy již používá?
    • Jaký styl tzv. look and feel (tedy vzhled a základní chování daného rozhraní) uživatel preferuje?
  • Informační architektura – vývoj zpracovávání nebo toku informací v rámci daného systému (u mapy telefonních stromů by tedy šlo o vývojový diagram libovolného stromu a u webu by to bylo schéma zobrazující hierarchii jednotlivých stránek).
  • Prototypování – tvorba wireframes, tedy skic daného systému, buďto ve formě papírových prototypů, nebo jednoduchých interaktivních obrazovek. Tyto prototypy neobsahují žádné prvky look and feel a většinou jen minimum obsahu, aby se neodpoutávaly pozornost od samotného rozhraní.
  • Kontrola použitelnosti – kontrola rozhraní hodnotitelem. Tento proces se obecně považuje za levnější než testování použitelnosti (viz níže) a dá se použít už v brzkém stadiu vývoje, protože tak lze vyhodnotit prototyp nebo specifikace systému, které se nedají testovat na uživatelích. Mezi běžné metody kontroly použitelnosti patří kognitivní průchod, který se zaměřuje na jednoduchost plnění úkonů v systému novými uživateli, dále heuristické hodnocení, které dokáže pomocí řady heuristik odhalit v rámci daného UI designu problémy s použitelností, a pluralitní průchod, kdy vybraná skupina projde předem danou řadou úkonů a poté diskutuje o problémech s použitelností.
  • Testování použitelnosti – testování prototypů na skutečném uživateli, často pomocí techniky myšlení nahlas, kdy má uživatel během testování mluvit o tom, co se mu honí hlavou. Testování designu uživatelského rozhraní pomáhá designérovi porozumět, jak daný uživatel rozhraní přijme, což ústí v tvorbu úspěšných aplikací.
  • Design grafického uživatelského rozhraní – reálné look and feel (vzhled a chování) grafického uživatelského rozhraní (GUI). Jedná se o ovládací prvky a motivy. Hlasem ovládaná rozhraní zahrnují verbálně sluchovou interakci, zatímco dotyková rozhraní interagují pomocí 3D designu a gest. Design daného GUI lze založit na poznatcích získaných z uživatelského výzkumu a zdokonalit odstraněním problémů s použitelností objevených během testování.[4] V závislosti na typu rozhraní jsou obvykle potřeba různé typy programování, díky kterým lze ověřit výkonnost, vytvořit odkazy nebo umožnit provedení požadovaných úkonů.[5]
  • Údržba softwaru – po implementaci nového rozhraní je zapotřebí provádět občasnou údržbu za účelem odstranění softwarových chyb, změny funkcí nebo kompletního upgradu systému. Jakmile dojde k rozhodnutí rozhraní upgradovat, tzv. legacy system (stávající starší systém) projde novým designovým procesem a začne nový životní cyklus uživatelského rozhraní.[6]

Požadavky na uživatelské rozhraní

Dynamické vlastnosti systému jsou z hlediska požadavků na dialog, tzn. interakci mezi člověkem a strojem, popsány v sedmi zásadách části 10 ergonomické normy ISO 9241. Tato norma stanoví rámec ergonomických „zásad“ pro metody dialogu s detailně popsanými definicemi a názornými příklady. Zásady dialogu představují dynamické složky rozhraní a většinou je lze zahrnout pod feel, tedy celkový dojem, daného rozhraní. Sedm zásad dialogu je:

  • Vhodnost pro daný úkon: dialog je pro úkon vhodný, jestliže uživateli pomáhá úkon efektivně dokončit.
  • Sebepopsatelnost: dialog je sebepopisný, jestliže je každý jeho krok prostřednictvím zpětné vazby systému neprodleně srozumitelný, nebo je uživateli na vyžádání vysvětlen.
  • Ovladatelnost: dialog je ovladatelný, jestliže je uživatel schopen zahájit a řídit směřování a tempo interakce až do bodu, kdy je proveden daný úkon.
  • Shoda s očekáváním uživatele: dialog se shoduje s uživatelským očekáváním v případě, že je konzistentní a odpovídá profilu uživatele v oblastech jako znalost úkonu, vzdělání, zkušenost nebo obecně přijaté konvence.
  • Tolerance chyb: dialog je tolerantní k chybám, jestliže i navzdory zjevných vstupním chybám lze dosáhnout kýženého výsledku bez žádné, nebo jen s minimální činností ze strany uživatele.
  • Schopnost individualizace: dialog je schopen individualizace, jestliže je možné přizpůsobit softwarové rozhraní potřebám daného úkonu a individuálním preferencím a dovednostem uživatele.
  • Vhodnost pro učení: dialog je vhodný pro učení, jestliže podporuje a vede uživatele při učení, jak daný systém používat.

Ergonomická norma ISO 9241 definuje i samotný koncept použitelnosti, a to z hlediska efektivity, účinnosti a spokojenosti uživatele. Část 11 definuje použitelnost následovně:

Použitelnost se měří:

  • Mírou, do jaké je dosaženo kýžených cílů využití celého systému (efektivita).
  • Zdroji, které je třeba na dosažení zamýšlených cílů využít (účinnost).
  • Mírou, v jaké považuje uživatel celý systém za přijatelný (spokojenost).

Efektivitu, účinnost a spokojenost lze vnímat jako faktory kvality použitelnosti. Aby bylo možné je hodnotit a měřit, je nutné je rozložit na dílčí faktory a dále na opatření použitelnosti.

Standardy prezentace informací jsou popsány částí 12 ergonomické normy ISO 9241 pro organizaci informací (uspořádání, zarovnání, seskupení, štítky, umístění), zobrazování grafických objektů a značení informací (zkratky, barvy, velikost, tvar, vizuální podněty) sedmi atributy. Tyto „atributy prezentovaných informací“ představují neměnné aspekty rozhraní a lze je popsat jako look, tedy vzhled, rozhraní. Detailní popis atributů se nachází doporučeních výše uvedené normy, přičemž každé doporučení navazuje na jeden nebo více ze sedmi atributů. Sedm atributů prezentace je:

  • Jasnost: informační obsah je přenesen rychle a přesně.
  • Rozlišitelnost: prezentované informace lze přesně rozlišit.
  • Stručnost: uživatelé nejsou přetíženi nesouvisejícími informacemi.
  • Konzistence: jednotný design shodný s očekáváním uživatele.
  • Zjistitelnost: pozornost uživatele je vedena směrem k požadovaným informacím.
  • Čitelnost: informace se dají snadno přečíst.
  • Srozumitelnost: význam je jasně pochopitelný, jednoznačný, vyložitelný a rozpoznatelný.

Část 13 normy ISO 9241 říká, že informace v pokynech pro uživatele by měly být snadno odlišitelné od ostatních uvedených informací a měly by zapadat do konkrétního kontextu jejich použití. Uživatelské pokyny lze poskytnout následujícími pěti způsoby:

  • Výzvy, které buďto explicitně (konkrétní) nebo implicitně (obecné) dávají najevo, že je systém připraven k interakci.
  • Zpětná vazba informující o interakci a vstupech uživatele, a to včasně, jasně a nerušivě.
  • Stavové informace popisující průběžný stav aplikace, hardwarových a softwarových komponent a aktivit uživatele.
  • Správa chyb včetně jejich prevence, oprav, uživatelské podpory v rámci správy chyb a chybových zpráv.
  • Online nápověda pro požadavky ze strany systému nebo uživatele, a to s konkrétními a relevantními informacemi.

Výzkum

Design uživatelského rozhraní byl předmětem značného výzkumu, včetně jeho estetiky.[7] Již v 80. letech byly vyvinuty standardy pro definování použitelnosti softwarových produktů a jedním ze strukturálních pilířů se stal referenční model uživatelského rozhraní IFIP, který pro účely výstavby uživatelského rozhraní navrhuje čtyři dimenze:

  • Dimenze vstupu a výstupu (vzhled)
  • Dimenze dialogu (dojem)
  • Dimenze technická nebo funkční (přístup k nástrojům a službám)
  • Dimenze organizační (podpora komunikace a spolupráce)

Tento model měl značný vliv na vývoj mezinárodní normy ISO 9241, která popisuje požadavky použitelnosti v rámci designu rozhraní. Touha porozumět problémům s rozhraním specifickým pro aplikace už v brzkém stadiu vývoje softwaru vedla k výzkumu v oblasti nástrojů pro rychlé prototypování GUI, které jsou mnohdy schopné poskytnout věrohodnou simulaci chování dané aplikace během užívání.[8] Určité výzkumy také prokázaly, že v rámci softwaru založeného na grafickém uživatelském rozhraní lze širokou škálu programovacích úkonů provést jinak než napsáním kódu.[9]

V posledních letech je silnou motivací pro výzkum neustále rostoucí paleta zařízení, na která, jak popisuje Moorův zákon, lze implementovat velice komplexní rozhraní.[10]

Mohlo by vás zajímat

Reference

V tomto článku byl použit překlad textu z článku User interface design na anglické Wikipedii.

  1. NORMAN, D. A. Emotion & Design: Attractive things work better. S. 36–42. Interactions Magazine, ix (4) [online]. 2008-11-17 [cit. 2021-02-13]. S. 36–42. Dostupné v archivu pořízeném z originálu dne 2021-03-07. (anglicky) 
  2. WOLF, Lauren. 6 Tips for Designing an Optimal User Interface for Your Digital Event. INXPO [online]. 2013-06-16 [cit. 2021-02-13]. Archivní verze originálu. Dostupné v archivu pořízeném z originálu dne 2013-06-16. (anglicky) 
  3. BLANDFORD, Ann. Semi-structured qualitative studies. The Encyclopedia of Human-Computer Interaction, 2. ed. Interaction Design Foundation. [s.l.]: [s.n.] Dostupné online. (anglicky)  [cit. 2021-02-13]
  4. HOLTZBLATT, Karen a Hugh R. BEYER. Contextual design. The Encyclopedia of Human-Computer Interaction, 2. ed. Interaction Design Foundation. [s.l.]: [s.n.] Dostupné online. (anglicky)  [cit. 2021-02-13]
  5. FOWLER, Martin. Forms and Controls. GUI Architectures [online]. thoughtworks publication [cit. 2021-02-13]. Dostupné online. 
  6. 8 Stages in an HL7 Interface Lifecycle - Caristix [online]. Caristix, 2010-10-05 [cit. 2021-02-13]. Dostupné online. (anglicky) 
  7. VAN SCHAIK, Paul; LING, Jonathan. The role of context in perceptions of the aesthetics of web pages over time. International Journal of Human-Computer Studies. 2009-01-01, roč. 67, čís. 1, s. 79–89. Dostupné online [cit. 2021-02-13]. ISSN 1071-5819. DOI 10.1016/j.ijhcs.2008.09.012. 
  8. SZEKELY, Pedro; LUO, Ping; NECHES, Robert. Facilitating the Exploration of Interface Design Alternatives: The HUMANOID Model of Interface Design [online]. Conference on Human Factors in Computing Systems - Proceedings, 1994 [cit. 2012-06-13]. Dostupné online. 
  9. MYERS, Brad A. Creating user interfaces using programming by example, visual programming, and constraints. ACM Transactions on Programming Languages and Systems. 1990-04-01, roč. 12, čís. 2, s. 143–177. Dostupné online [cit. 2021-02-13]. ISSN 0164-0925. DOI 10.1145/78942.78943. 
  10. MYERS, Brad; HUDSON, Scott E.; PAUSCH, Randy. Past, present, and future of user interface software tools. ACM Transactions on Computer-Human Interaction. 2000-03-01, roč. 7, čís. 1, s. 3–28. Dostupné online [cit. 2021-02-13]. ISSN 1073-0516. DOI 10.1145/344949.344959. 

Média použitá na této stránce

Mobile sketch template.pdf
Autor: User:Yug, Licence: CC0
Mobile sketching.
Linux kernel INPUT OUPUT evdev gem USB framebuffer.svg
(c) Shmuel Csaba Otto Traian, CC BY-SA 3.0
The input/output loop: Human Machine Interface (HMI) peripherals, Linux kernel, evdev,