Uživatelské rozhraní: Porovnání verzí

 
(Není zobrazeno 106 mezilehlých verzí od stejného uživatele.)
Řádek 1: Řádek 1:
−
{{Pracuje se}}
+
==Uživatelské rozhraní==
−
==Definice==
+
[[Uživatelské rozhraní (user interface)|Uživatelské rozhraní (anglicky User Interface, známé pod zkratkou UI)]] je souhrn způsobů, jakými uživatelé ovlivňují chování systémů. Nejzásadnějšími aspekty pro hodnocení uživatelského rozhraní jsou jednoduchost a přehlednost. Uživatelské rozhraní slouží k interakci člověka se strojem (anglicky [[HCI |HCI = Human-computer interaction]]). Cílem této interakce je efektivně manipulovat a kontrolovat stroj z pozice člověka, mezitím, co stroj kontinuálně informuje člověka o svém stavu tak, aby mohl člověk provádět rozhodnutí. <ref name=":1">NEDBÁLEK, Stanislav. Uživatelské rozhraní mobilních aplikací. [online] Brno, 2016. 94 s. Diplomová práce. Masarykova univerzita, Fakulta informatiky. Vedoucí diplomové práce doc. RNDr. Petr Sojka, Ph.D. [cit. 2021-02-15] Dostupné z: https://is.muni.cz/th/exrqj/stanislav-nedbalek-diplomova-prace.pdf</ref> Je to tedy pomyslný prostředník, který zprostředkovává [[Komunikace|komunikaci]] mezi člověkem a [[Počítač|počítačem]] nebo [[Informační systém|informačním systémem]]. Rozhraní je soubor prostředků, který definuje komunikační zónu mezi dvěma oddělenými entitami a je tedy [[Komunikační kanál|komunikačním kanálem]] mezi uživatelem a systémem. Jeho vzhled, funkčnost, přehlednost nebo chaos ovlivňují, zda se uživatel příště vrátí, anebo ne. Návrh, struktura a jeho následná realizace jsou důležitým faktorem vzniku jakéhokoli informačního systému.
−
Uživatelské rozhraní (anglicky User Interface, známé pod zkrat-kou UI) je souhrn způsobů, jakými uživatelé ovlivňují chování systému. Nejzásadnějšími aspekty pro hodnocení uživatelského rozhraní jsou jednoduchost a přehlednost.
 
  
−
Uživatelské rozhraní slouží k interakci člověka se strojem (anglicky human-machine inter-action).Cílem této interakce je efektivně manipulovat a kontrolovat stroj z pozice člověka, mezitím, co stroj kontinuálně informuje člověkao svém stavu tak, aby mohl člověk provádět rozhodnutí. <ref name=":1">NEDBÁLEK, Stanislav. Uživatelské rozhranímobilních aplikací. [online] Brno, 2016. 94 s. Diplomová práce. Masarykova univerzita, Fakulta informatiky. Vedoucí diplomové práce doc. RNDr. Petr Sojka, Ph.D. [cit. 2021-02-15] Dostupné z: https://is.muni.cz/th/exrqj/stanislav-nedbalek-diplomova-prace.pdf</ref> Je to tedy pomyslným prostředníkem, který zprostředkovává komunikaci mezi člověkem a počítačem nebo informačním systémem. Rozhraní je soubor prostředků, který definuje komunikační zónu mezi dvěma oddělenými entitami a je tedy komunikačním kanálem mezi uživatelem a systémem.Jeho vzhled, funkčnost, přehlednost nebo chaos ovlivňují, zda se uživatel příště vrátí, anebo ne. Návrh, struktura a jeho následná realizace jsou důležitým faktorem vzniku jakéhokoli informačního systému
+
Uživatelské rozhraní je tvořeno jak [[Hardware|hardwarovými]], tak [[Software|softwarovými]] komponenty, dále dělené na vstupní (např. klávesnice) a výstupní (např. monitor). V ideálním světě je toto rozhraní natolik intuitivní a efektivní, že ho uživatel při činnosti nevnímá a plně se soustředí na úlohu, kterou vykonává. Míra této efektivity se označuje jako použitelnost. <ref name=":2">SEDLÁČEK, Pavel. Uživatelská přívětivost univerzitních informačních systémů. [online] Brno, 2017. 152 s. Diplomová práce. Masarykova univerzita, Fakulta informatiky. Vedoucí diplomové práce RNDr. JUDr. Vladimír Šmíd, CSc. [cit. 2021-02-06] Dostupné z: https://is.muni.cz/th/vkmaz/Pavel_Sedlacek_DP_-_Uzivatelska_privetivost_univerzitnich_informacnich_systemu_pqmgvtmu.pdf</ref>  
  
−
Uživatelské rozhraní tvoří následující 2 složky  
+
'''Uživatelské rozhraní tvoří následující tři složky:'''
−
*fyzickou složku,  která  zahrnuje soubor vstupních, výstupních zařízení, nástroje selekce a zpětné vazby.
+
* '''fyzickou složku:''' ta zahrnuje soubor vstupních, výstupních zařízení, nástroje selekce a [[Zpětná vazba|zpětné vazby]].
−
* Konceptuální  složku,  která  je souhrnem vyhledávacích mechanismů, které jsou použity při komunikaci mezi člověkem a počítačem, jedná se např. o dotazovací jazyky a interaktivní styly.
+
* '''konceptuální složku:''' ta je souhrnem vyhledávacích mechanismů, které jsou použity při komunikaci mezi člověkem a počítačem, jedná se např. o [[Dotazovací jazyk|dotazovací jazyky]] a interaktivní styly.
−
V některé literatuře [Součková, 2003] nalezneme ještě třetí složku Ul:
+
* '''perceptuální složku:''' ta se zaměřuje na vnímání objektů, které jsou umístěny na obrazovce, jejich uspořádání a použití barev. <ref name=":4">LOUKOŤOVÁ, Klára. Uživatelská rozhraní profesionálních online systémů [Userinterfaces of professional  online retrieval systems]. Praha, 2007. 154 s.,46 s. příl. Rigorózní práce. Univerzita Karlova v Praze, Filozofická fakulta, Ústav informačních studií a knihovnictví. Konzultant rigorózní práce PhDr. Richard Papík, PhD.[cit. 2021-02-15] Dostupné z: https://dspace.cuni.cz/handle/20.500.11956/12222</ref>
−
* Perceptuální  složku,  která  se zaměřuje na vnímání objektů, které jsou umístěny na obrazovce, jejich uspořádání a použití barev.
 
  
−
===Typy uživatelského rozhraní===
+
'''Dobré uživatelské rozhraní by mělo splňovat tyto atributy:'''
−
*Grafické uživatelské rozhraní neboli GUI (Graphical User Interface) - používá se pro typy rozhraní založená na paradigmatu WIMP, tedy Windows (okna), Icons (ikony), Menus (menu) a Pointing device (polohovací zařízení).
+
* Jednoznačnost – bez textových či grafických dvojznačností, intuitivní;
−
*Textové uživatelské rozhraní neboli CUI (Character User Interface) - používá se pro rozhraní s menu, tlačítky atd., ovládané klávesnicí.
+
* Stručnost – pouze nezbytný text, jednodušší orientace a hledání;
−
*Příkazový řádek neboli CLI - používá se pro rozhraní, kdy uživatel zadává příkazy pomocí jazyka.
+
* Podobnost – co nejvíce podobné předchozím zkušenostem uživatelů;
−
* hlasové uživatelské rozhraní - VUI (Voice User Interface)
+
* Responzivnost – zpětná vazba poskytovaná uživatelům o provedeném úkonu;
−
* multimodální  rozhraní  (zatím  se jedná převážně o  rozšíření GUI  o  nové typy prezentací a vstupu dat)
+
* Konzistentnost – možnost naučit se vzorce užívání – snazší a rychlejší;
−
* rozhraní  typu  virtuální  realita  (jeho  využití  je  v současné  době předmětem vědecko-výzkumných prací)
+
* Estetičnost – vizuální příjemnost;
 +
* Efektivita – zvyšující produktivitu svým designem či zkratkami;
 +
* Ochota odpouštět – chyby lehko napravitelné.
  
−
'''Dva základní přístupy k uživatelskému rozhraní''' <ref> GREGAR, Tomáš. ''Semantics Visualization and Visual Semantics: in E-learning and other Applications'' [online]. Brno, 2011. Disertační práce. Masarykova univerzita, Fakulta informatiky. Vedoucí práce doc. RNDr. Tomáš Pitner, Ph.D.</ref>
+
'''Fáze vývoje UI:'''
−
* data-centered design
+
* '''Plánování:''' fáze, kdy se definují cíle projektu, cílové skupiny uživatelů a jejich požadavků a očekávání, metody přístupu k vývoji a implementaci.
−
* user-centered design
+
* '''Návrh:''' fáze, kdy se tvoří struktura systému, vizuální koncepty a budoucí interakce v systému. V této fázi se vyjasňují nejasnosti a nepřesnosti v zadání.
 +
* '''Vývoj:''' fáze, kdy probíhá samotná implementace systému (opět zahrnuje testování a hodnocení použitelnosti).
 +
* '''Spouštění:''' fáze, kdy se ověřuje splnění zadání projektu (požadavků) a finalizuje se dokumentace. Získání finální zpětné vazby od uživatelů. <ref name=":2">SEDLÁČEK, Pavel. Uživatelská přívětivost univerzitních informačních systémů. [online] Brno, 2017. 152 s. Diplomová práce. Masarykova univerzita, Fakulta informatiky. Vedoucí diplomové práce RNDr. JUDr. Vladimír Šmíd, CSc. [cit. 2021-02-06] Dostupné z: https://is.muni.cz/th/vkmaz/Pavel_Sedlacek_DP_-_Uzivatelska_privetivost_univerzitnich_informacnich_systemu_pqmgvtmu.pdf</ref>  
  
−
Vývoj přináší akcent na uživatele a jeho potřeby, bez respektování potřeb uživatelů pracuje systém víceméně naprázdno.
+
'''Typy uživatelského rozhraní'''
−
Uživatel je centrálním a určujícím činitelem celého informačního systému.
+
* '''[[Grafické uživatelské rozhraní]]:''' neboli GUI (Graphical User Interface). Je to uživatelské rozhraní umožňující ovládat počítač pomocí interaktivních grafických prvků. Pojmem počítač zde rozumíme libovolný číslicový stroj, jehož výstup je potřeba prezentovat uživateli. Rozhraní tohoto typu tedy zahrnuje mimo počítače například i [[Telefon|mobilní telefony]], multimediální přehrávače, domácí spotřebiče, průmyslové vybavení, a jiné. <ref name=":1">NEDBÁLEK, Stanislav. Uživatelské rozhraní mobilních aplikací. [online] Brno, 2016. 94 s. Diplomová práce. Masarykova univerzita, Fakulta informatiky. Vedoucí diplomové práce doc. RNDr. Petr Sojka, Ph.D. [cit. 2021-02-15] Dostupné z: https://is.muni.cz/th/exrqj/stanislav-nedbalek-diplomova-prace.pdf</ref> Používá se pro typy rozhraní založená na paradigmatu [[WIMP]]:
 +
** '''[[Windows]]''' (okna) - reprezentují spuštěné programy, z nichž každý je izolován od ostatních programů, které mohou mít vlastní okna, což umožňuje vykonávat více činností najednou;
 +
** '''Icons''' (ikony) - reprezentují zkratky, které slouží k provdení konkrétní činnosti, jako je spuštění programu;
 +
** '''Menus''' (menu) - reprezentují textové či z ikon složené nabídky, které umožňují jednu vybrat a provést tak určitou akci;
 +
** '''Pointing device''' - jde o přímou manipulace s objekty na obrazovce pomocí polohovacích zařízení Nejobvyklejším vstupním zařízením pro ovládání kurzoru je počítačová myš.
 +
* '''[[Textové uživatelské rozhraní]]:''' neboli CUI (Character User Interface), které se používá se pro rozhraní s menu, tlačítky atd., ovládané klávesnicí.
 +
* '''[[Příkazový řádek]]:''' neboli CLI, používá se pro rozhraní, kdy uživatel zadává příkazy pomocí jazyka.
 +
* '''[[Hlasové uživatelské rozhraní]]:''' - VUI (Voice User Interface)
 +
* '''[[Multimodální rozhraní]]:''' zatím se jedná převážně o rozšíření GUI o nové typy prezentací a vstupu [[Data|dat]].
 +
* '''[[Rozhraní typu virtuální realita]]:''' jeho využití je v současné době předmětem vědecko-výzkumných prací. <ref name=":4">LOUKOŤOVÁ, Klára. Uživatelská rozhraní profesionálních online systémů [Userinterfaces of professional  online retrieval systems]. Praha, 2007. 154 s.,46 s. příl. Rigorózní práce. Univerzita Karlova v Praze, Filozofická fakulta, Ústav informačních studií a knihovnictví. Konzultant rigorózní práce PhDr. Richard Papík, PhD.[cit. 2021-02-15] Dostupné z: https://dspace.cuni.cz/handle/20.500.11956/12222</ref>
  
−
==== Návrh UI: ====
+
'''Dva základní přístupy k uživatelskému rozhraní''' <ref> GREGAR, Tomáš. ''Semantics Visualization and Visual Semantics: in E-learning and other Applications'' [online]. Brno, 2011. Disertační práce. Masarykova univerzita, Fakulta informatiky. Vedoucí práce doc. RNDr. Tomáš Pitner, Ph.D.</ref>
−
* znalost designu, programů a technologie
+
* [[Database-centric architecture|data-centered design]]
−
* znalost mentálních procesů lidí, interakce a komunikace
+
* [[UCD (User-centered design)|user-centered design]]
−
* odborná znalost tematiky
 
−
* vědět, co uživatel potřebuje, jaké činnosti bude vykonávat, co je hlavním cílem nebo objektem zájmu
 
−
znalost lidí, pro které to dělám - analýza typického uživatele (např. SIS - studenti, vyučující, studijní oddělení, management) - dovednosti, schopnosti, motivace, vzdělání, kulturní prostředí
 
−
* správná ergonomie, funkčnost a konzistence
 
−
* je třeba vyjít z obecných standardů
 
  
 
====Návrh zaměřený na uživatele====
 
====Návrh zaměřený na uživatele====
−
Záměrem návrhu zaměřeného na uživatele (anglicky user-centereddesign) je především vyvinout a poskytnout uživateli použitelný de-sign [10]. Oproti běžnému vývoji softwaru, kdy designer uživatel-ských rozhraní navrhne rozhraní podle svého uvážení v očekáváníshody s uživatelským vnímáním, se návrh zaměřený na uživatele řídípřímo uživatelem. Respektive chováním uživatele, které bylo zjištěnona základě uživatelského průzkumu cílové skupiny. Prvním krokemnávrhu zaměřeného na uživatele je tedy specifikace cílové skupinyuživatelů, následované zkoumáním uživatelského chování. Samotnévyhodnocení získaných informací poté slouží jako podklad pro návrhuživatelského rozhraní. Základním druhem získané informace jsoupotřeby (někdy také cíle) uživatele – co od produktu, služby očekáváa jakým způsobem chce tato očekávání naplnit k dosažení požadova-ného cíle a uspokojení potřeb
+
Záměrem návrhu zaměřeného na uživatele (user-centered design) je především vyvinout a poskytnout uživateli použitelný design. Oproti běžnému vývoji softwaru, kdy designer uživatelských rozhraní navrhne rozhraní podle svého uvážení v očekávání shody s uživatelským vnímáním, se návrh zaměřený na uživatele řídí přímo uživatelem. Respektive chováním uživatele, které bylo zjištěno na základě uživatelského průzkumu cílové skupiny. Prvním krokem návrhu zaměřeného na uživatele je tedy specifikace cílové skupiny uživatelů, následované zkoumáním uživatelského chování. Samotné vyhodnocení získaných [[Informace|informací]] poté slouží jako podklad pro návrh uživatelského rozhraní. Základním druhem získané informace jsou potřeby (někdy také cíle) uživatele – co od produktu, služby očekává a jakým způsobem chce tato očekávání naplnit k dosažení požadovaného cíle a uspokojení potřeb.
  
−
====Uživatelský prožitek====
+
=== Návrh uživatelského rozhraní ===
−
Definice uživatelského prožitku4(anglicky User Experience, známépod zkratkou UX, nebo UxD z anglického User Experience Design)není jednoznačná. Na internetu jsou k nalezení desítky různých defi-nicí. StandardISO 9241-210 definuje uživatelský prožitek jakouživatelská očekávání a reakce, které plynou z použití produktu, sys-tému nebo služby. Dle této definice uživatelský prožitek zahrnujeuživatelovy emoce, přesvědčení, preference, očekávání, fyzické a psy-chologické odezvy, chování a schopnosti, které se objeví před, běhema po použití. Standard dále definuje tři faktory, které mají vliv nauživatelský prožitek:Systém,Uživatel,Kontext použití
+
Tvorba uživatelského rozraní se skládá ze dvou základních částí. Těmi částmi je návrh uživatelského zážitku a návrh samotného uživatelského prostředí.  
  
−
Jak uvádí Garret ve své knizeThe elements of user experience, uživa-telský prožitek nejčastěji chápeme jako souhrn několika poddisciplín:
+
'''Pro návrh uživatelského rozhraní je potřeba:'''
−
* uživatelský výzkumjsou zejména rozhovory, on-line výzkumy,určení majoritních skupin, testování použitelnosti
+
* znalost designu, programů a technologie;
−
* interakční designse zabývá návrhem konkrétních stráneknebo složitějších interakcí v případě aplikací;
+
* znalost mentálních procesů lidí, interakce a komunikace;
−
* informační architekturadefinuje strukturu informací;
+
* odborná znalost tematiky;
−
* vizuální designse zabývá návrhem vzhledu a emocionálníh opůsobení pomocí barev, písma a grafických prvků.
+
* vědět, co uživatel potřebuje, jaké činnosti bude vykonávat, co je hlavním cílem nebo objektem zájmu;
 +
* znalost lidí, pro které to dělám - analýza typického uživatele (např. SIS - studenti, vyučující, studijní oddělení, management) - dovednosti, schopnosti, motivace, vzdělání, kulturní prostředí;
 +
* správná ergonomie, funkčnost a konzistence;
 +
* je třeba vyjít z obecných standardů.
  
−
Jednotlivé disciplíny budou dále v textu aplikovány při návrhu aplikace
+
'''Empirická pravidla tvorby uživatelského rozhraní:'''
 +
* pravidlo 10 minut - do 10 min by měl být uživatel schopen osvojit si základy práce se systémem;
 +
* pravidlo tří kliknutí (three-click-rule) - uživatel by měl najít na webové stránce informaci kterou hledá pomocí maximálně tří kliknutí myší (pokud se informace na stránce nachází);
 +
* doba odezvy - doba odezvy systému by měla být 2 - 4 sekundy (ne jako sběr publikačních výsledků akademických pracovníků - 50 sekund po každém kliknutí a nekonečné formuláře);
 +
* customizace - přizpůsobivost aplikací požadavkům uživatelů.
 +
* základní navigační prvky
 +
** '''Search Box (vyhledávací pole):''' umožňuje zadat dotaz pomocí [[Klíčové slovo|klíčového slova]] či fráze.
 +
** '''Breadcrump (drobečky):''' umožňují uživateli identifikovat svou aktuální polohu v systému.
 +
** '''Pagination (stránkování):''' rozděluje obsah mezi stránky, umožňuje se uživateli pohybovat mezi jednotlivými stránkami nebo některou přeskočit (např.: stránkování relevantních výsledků).
 +
** '''Tags ([[Tag|tagy]], štítky):''' umožňují uživateli vyhledávat obsah ve stejné kategorii (např.: kategorie jednotlivých [[Popište princip kategorizace a jeho využití v pořádání informací a znalostí. Vysvětlete pojmy kritérium členění, faseta a fasetová analýza|fasetů]]).
 +
** '''Sliders (posuvníky):''' umožňuje uživateli nastavit nebo upravit hodnotu. (např.: např. nastavení roku vydání).
 +
** '''Icons (ikony):''' slouží jako intuitivní symbol, který umožňuje uživateli snadnější pohyb například mezi jednotlivými systémy. Ikony jsou typicky [[Hypertext|hypertextové]].
 +
** '''Image Carousel:''' umožňuje uživateli si vybrat jeden ze sady obrázků v databázi, obrázky jsou typicky hypertextové (např.: nejčastěji užito v obrazových databázích).
  
 +
===Uživatelská přívětivost===
 +
Definice uživatelského prožitku (anglicky [[User Experience]], známé pod zkratkou UX, nebo UxD z anglického User Experience Design) není jednoznačná. Na internetu jsou k nalezení desítky různých definicí. Standard ISO 9241-210 definuje uživatelský prožitek jako uživatelská očekávání a reakce, které plynou z použití produktu, systému nebo služby. Dle této definice uživatelský prožitek zahrnuje uživatelovy emoce, přesvědčení, preference, očekávání, použitelnost, fyzické a psychologické odezvy, chování a schopnosti, které se objeví před, během a po použití. Standard dále definuje tři faktory, které mají vliv na uživatelský prožitek: systém, uživatel, kontext použití. <ref name=":1">NEDBÁLEK, Stanislav. Uživatelské rozhraní mobilních aplikací. [online] Brno, 2016. 94 s. Diplomová práce. Masarykova univerzita, Fakulta informatiky. Vedoucí diplomové práce doc. RNDr. Petr Sojka, Ph.D. [cit. 2021-02-15] Dostupné z: https://is.muni.cz/th/exrqj/stanislav-nedbalek-diplomova-prace.pdf</ref> Pro dobrou uživatelskou přívětivost je třeba zohlednit a přizpůsobit se cílové skupině zákazníků, jejich potřebám, aktivitám a očekáváním.
  
−
'''Empirická pravidla tvorby UI:'''
+
Jak uvádí Garret ve své knize ''The elements of user experience'', uživatelský prožitek nejčastěji chápeme jako souhrn několika poddisciplín:
−
* pravidlo 10 minut - měl by být schopen osvojit si základy práce se systémem
+
* '''uživatelský výzkum:''' jedná se zejména o rozhovory, on-line výzkumy, určení majoritních skupin, testování [[Použitelnost webu|použitelnosti]]
−
* doba odezvy - jsme ochotni čekat 2 - 4 sekundy (ne jako sběr publikačních výsledků akademických pracovníků - 50 sekund po každém kliknutí a nekonečné formuláře)
+
* '''[[Interakční design|interakční design]]:''' ten se zabývá návrhem konkrétních stránek nebo složitějších interakcí v případě aplikací;
−
* customizace - přizpůsobivost aplikací
+
* '''[[Informační architektura|informační architektura]]:''' definuje strukturu informací;
−
 
+
* '''[[Vizuální design|vizuální design]]:''' se zabývá návrhem vzhledu a emocionálního působení pomocí barev, písma a grafických prvků. <ref name=":1">NEDBÁLEK, Stanislav. Uživatelské rozhraní mobilních aplikací. [online] Brno, 2016. 94 s. Diplomová práce. Masarykova univerzita, Fakulta informatiky. Vedoucí diplomové práce doc. RNDr. Petr Sojka, Ph.D. [cit. 2021-02-15] Dostupné z: https://is.muni.cz/th/exrqj/stanislav-nedbalek-diplomova-prace.pdf</ref>
−
===Hodnocení uživatelských rozhraní===
 
−
'''Dobré uživatelské rozhraní by mělo splňovat tyto atributy:'''
 
−
* Jednoznačnost – bez textových či grafických dvojznačností, intuitivní
 
−
* Stručnost – pouze nezbytný text, jednodušší orientace a hledání
 
−
* Podobnost – co nejvíce podobné předchozím zkušenostem uživatelů
 
−
* Responzivnost – zpětná vazba poskytovaná uživatelům o provedeném úkonu
 
−
* Konzistentnost – možnost naučit se vzorce užívání – snazší a rychlejší
 
−
* Estetičnost – vizuální příjemnost
 
−
* Efektivita – zvyšující produktivitu svým designem či zkratkami
 
−
* Ochota odpouštět – chyby lehko napravitelné
 
−
Stejně jako samotný vývoj software, i proces vývoje UI obdobně prochází několika fázemi – plánováním, návrhem, vývojem a spuštěním. <ref name=":2">SEDLÁČEK, Pavel. Uživatelská přívětivost univerzitních informačních systémů. [online] Brno, 2017. 152 s. Diplomová práce. Masarykova univerzita, Fakulta informatiky. Vedoucí diplomové práce RNDr. JUDr. Vladimír Šmíd, CSc. [cit. 2021-02-06] Dostupné z: https://is.muni.cz/th/vkmaz/Pavel_Sedlacek_DP_-_Uzivatelska_privetivost_univerzitnich_informacnich_systemu_pqmgvtmu.pdf</ref>  
 
  
 +
'''Uváděné atributy definující uživatelskou přívětivost systémů:'''
 +
* Použitelnost – dělá to něco, co lidé potřebují udělat?
 +
* Naučitelnost – umí lidé vymyslet, jak to použít?
 +
* Efektivnost – udělá skutečně to, co chceme?
 +
* Účinnost – udělá to v rámci rozumné míry času a úsilí?
 +
* Chtěnost – chtějí to lidé?
 +
* Potěšení – mají z toho lidé pozitivní dojem? <ref name=":2">SEDLÁČEK, Pavel. Uživatelská přívětivost univerzitních informačních systémů. [online] Brno, 2017. 152 s. Diplomová práce. Masarykova univerzita, Fakulta informatiky. Vedoucí diplomové práce RNDr. JUDr. Vladimír Šmíd, CSc. [cit. 2021-02-06] Dostupné z: https://is.muni.cz/th/vkmaz/Pavel_Sedlacek_DP_-_Uzivatelska_privetivost_univerzitnich_informacnich_systemu_pqmgvtmu.pdf</ref>
  
 +
'''Použitelnost (usability)'''
 +
Použitelnost souvisí ovládáním, srozumitelností a přehledností. Uživatel se snadno orientuje, rychle a bez zbytečné námahy nalezne to, co hledá.
  
−
==== Použitelnost, přístupnost, přívětivost ====
+
'''Časté chyby v rámci použitelnosti webu:'''
−
S pojmem uživatelské rozhraní souvisí pojmy použitelnost, přístupnost a přívětivost.
+
* Nevhodná grafika
−
+
* Špatná navigace mezi stránkami
−
'''Použitelnost (usability)'''
+
* Špatné rozmístění ovládacích prvků
−
Použitelnost souvisí ovládáním, srozumitelností a přehledností. Uživatel snadno orientuje, rychle a bez zbytečné námahy nalezne to, co hledá.
+
* Špatná čitelnost textu na stránce, přehlednost a rozložení prvků stránky
 +
* Složitý objednávkový proces (e-shopy) <ref>HUMAN – COMPUTER INTERACTION. Moodle UK pro výuku 1 [online]. [cit. 2020-09-29]. Dostupné z: https://dl1.cuni.cz/pluginfile.php/506815/mod_resource/content/0/opakovani3_HCI_bibliometrie.pdf</ref>.
 
   
 
   
 
'''Přístupnost (accesibility)'''
 
'''Přístupnost (accesibility)'''
−
Přístupný je takový web,„který neklade uživatelům žádné překážky v jeho používání.“[2]. Znamená to, že umožňuje plnohodnotný přístup všem uživatelům bez ohledu na jejich technické vybavení, znalosti či postižení.
+
Přístupný je takový web, „který neklade uživatelům žádné překážky v jeho používání.“[2]. Znamená to, že umožňuje plnohodnotný přístup všem uživatelům bez ohledu na jejich technické vybavení, znalosti či postižení.
−
 
−
'''Uživatelská přívětivost'''
 
−
Pojem uživatelská přívětivost (aglicky user friendly nebo také user experince) je nejasně definovaný termín, který zahrnuje jak použitelnost, tak přístupnost a také všechny možné další prvky, které vedou k celkové spokojenosti uživatele s rozhraním.
 
−
 
 
−
'''Základní způsoby interakce systému a uživatele''' <ref> GAJDOŠ, Andrej. ''Testování grafických uživatelských rozhraní'' [online]. Brno, 2012. Bakalářská práce. Masarykova univerzita, Fakulta informatiky. Vedoucí práce Jiří Barnat. </ref>
 
−
* příkazový řádek (CLI = Command Line Interface)
 
−
** uživatel zadává vstup a počítač vyhodnocuje optimální výstup, který prezentuje zpět uživateli
 
−
* grafické uživatelské rozhraní (GUI = Graphical User Interface)
 
−
** základem je koncept WIMP (Windows, Icons, Menus, Pointing device)
 
−
** přímá manipulace s objekty na obrazovce pomocí polohovacích zařízení
 
−
 
 
−
Grafické uživatelské rozhraní(anglicky Graphical User Interface,známé pod zkratkou GUI) je uživatelské rozhraní umožnující ovládatpočítač pomocí interaktivních grafických prvků. Pojem počítač zde ro-zumíme libovolný číslicový stroj, jehož výstup je potřeba prezentovatuživateli. Rozhraní tohoto typu tedy zahrnuje mimo počítače napří-klad i mobilní telefony, multimediální přehrávače, domácí spotřebiče,průmyslové vybavení, a jiné. <ref name=":1">NEDBÁLEK, Stanislav. Uživatelské rozhranímobilních aplikací. [online] Brno, 2016. 94 s. Diplomová práce. Masarykova univerzita, Fakulta informatiky. Vedoucí diplomové práce doc. RNDr. Petr Sojka, Ph.D. [cit. 2021-02-15] Dostupné z: https://is.muni.cz/th/exrqj/stanislav-nedbalek-diplomova-prace.pdf</ref>
 
  
 
=== Informační architektura ===
 
=== Informační architektura ===
−
Vědecká disciplína zabývající se uspořádáním systému způsobem, který naplní potřeby uživatelů. [[Informační architektura]] vytváří logickou strukturu informací ve vztahu zejména k webovým aplikacím.
+
Informační architektura je vědecká disciplína zabývající se uspořádáním systému způsobem, který naplní potřeby uživatelů. [[Informační architektura]] vytváří logickou strukturu informací ve vztahu zejména k webovým aplikacím. Termín informační architektura zavedl [[ Richard Saul Wurman]] roce 1976.
−
Termín informační architektura zavedl Richard Saul Wurman roce 1976.<br/>
 
  
 
'''Nejdůležitější oblasti:'''<ref>KVAŠOVÁ, Zuzana. ''Informační architektura webového rozhraní vybraných digitálních knihoven''. Praha, 2014. 80 s., 39 s. příl. Diplomová práce (Mgr.). Univerzita Karlova v Praze, Filozofická fakulta, Ústav informačních studií a knihovnictví. Vedoucí diplomové práce Ing. Martin Souček, Ph.D.</ref>
 
'''Nejdůležitější oblasti:'''<ref>KVAŠOVÁ, Zuzana. ''Informační architektura webového rozhraní vybraných digitálních knihoven''. Praha, 2014. 80 s., 39 s. příl. Diplomová práce (Mgr.). Univerzita Karlova v Praze, Filozofická fakulta, Ústav informačních studií a knihovnictví. Vedoucí diplomové práce Ing. Martin Souček, Ph.D.</ref>
Řádek 113: Řádek 122:
 
===Související články===
 
===Související články===
 
[[ICT Uživatelské rozhraní rešeršních systémů, základní složky uživatelského rozhraní, význam standardizace komunikace s informačními systémy (např. ISO 9241)]]<br />
 
[[ICT Uživatelské rozhraní rešeršních systémů, základní složky uživatelského rozhraní, význam standardizace komunikace s informačními systémy (např. ISO 9241)]]<br />
−
[[Uživatelské rozhraní (user interface)]]<br />
+
[[Uživatelské rozhraní (user interface)/old]]<br />
 
[[Uživatelské rozhraní rešeršních systémů]]<br />
 
[[Uživatelské rozhraní rešeršních systémů]]<br />
 
[[Použitelnost webu]]<br />
 
[[Použitelnost webu]]<br />
 
[[Typy uživatelských rozhraní a jejich specifika]]<br />
 
[[Typy uživatelských rozhraní a jejich specifika]]<br />
 +
[[Vysvětlete termín HCI, popište, čím se tento obor zabývá, a uveďte, jak se uplatňuje v oblasti informačních a komunikační technologií.]]<br />
 +
[[HCI]]<br />
 +
 
===Klíčová slova===
 
===Klíčová slova===
 
uživatelské rozhraní, počítač, webová aplikace, internet  
 
uživatelské rozhraní, počítač, webová aplikace, internet  
 
[[Kategorie:Informační studia a knihovnictví]]
 
[[Kategorie:Informační studia a knihovnictví]]

Aktuální verze z 24. 2. 2021, 18:53

Uživatelské rozhraní

Uživatelské rozhraní (anglicky User Interface, známé pod zkratkou UI) je souhrn způsobů, jakými uživatelé ovlivňují chování systémů. Nejzásadnějšími aspekty pro hodnocení uživatelského rozhraní jsou jednoduchost a přehlednost. Uživatelské rozhraní slouží k interakci člověka se strojem (anglicky HCI = Human-computer interaction). Cílem této interakce je efektivně manipulovat a kontrolovat stroj z pozice člověka, mezitím, co stroj kontinuálně informuje člověka o svém stavu tak, aby mohl člověk provádět rozhodnutí. [1] Je to tedy pomyslný prostředník, který zprostředkovává komunikaci mezi člověkem a počítačem nebo informačním systémem. Rozhraní je soubor prostředků, který definuje komunikační zónu mezi dvěma oddělenými entitami a je tedy komunikačním kanálem mezi uživatelem a systémem. Jeho vzhled, funkčnost, přehlednost nebo chaos ovlivňují, zda se uživatel příště vrátí, anebo ne. Návrh, struktura a jeho následná realizace jsou důležitým faktorem vzniku jakéhokoli informačního systému.

Uživatelské rozhraní je tvořeno jak hardwarovými, tak softwarovými komponenty, dále dělené na vstupní (např. klávesnice) a výstupní (např. monitor). V ideálním světě je toto rozhraní natolik intuitivní a efektivní, že ho uživatel při činnosti nevnímá a plně se soustředí na úlohu, kterou vykonává. Míra této efektivity se označuje jako použitelnost. [2]

Uživatelské rozhraní tvoří následující tři složky:

  • fyzickou složku: ta zahrnuje soubor vstupních, výstupních zařízení, nástroje selekce a zpětné vazby.
  • konceptuální složku: ta je souhrnem vyhledávacích mechanismů, které jsou použity při komunikaci mezi člověkem a počítačem, jedná se např. o dotazovací jazyky a interaktivní styly.
  • perceptuální složku: ta se zaměřuje na vnímání objektů, které jsou umístěny na obrazovce, jejich uspořádání a použití barev. [3]

Dobré uživatelské rozhraní by mělo splňovat tyto atributy:

  • Jednoznačnost – bez textových či grafických dvojznačností, intuitivní;
  • Stručnost – pouze nezbytný text, jednodušší orientace a hledání;
  • Podobnost – co nejvíce podobné předchozím zkušenostem uživatelů;
  • Responzivnost – zpětná vazba poskytovaná uživatelům o provedeném úkonu;
  • Konzistentnost – možnost naučit se vzorce užívání – snazší a rychlejší;
  • Estetičnost – vizuální příjemnost;
  • Efektivita – zvyšující produktivitu svým designem či zkratkami;
  • Ochota odpouštět – chyby lehko napravitelné.

Fáze vývoje UI:

  • Plánování: fáze, kdy se definují cíle projektu, cílové skupiny uživatelů a jejich požadavků a očekávání, metody přístupu k vývoji a implementaci.
  • Návrh: fáze, kdy se tvoří struktura systému, vizuální koncepty a budoucí interakce v systému. V této fázi se vyjasňují nejasnosti a nepřesnosti v zadání.
  • Vývoj: fáze, kdy probíhá samotná implementace systému (opět zahrnuje testování a hodnocení použitelnosti).
  • Spouštění: fáze, kdy se ověřuje splnění zadání projektu (požadavků) a finalizuje se dokumentace. Získání finální zpětné vazby od uživatelů. [2]

Typy uživatelského rozhraní

  • Grafické uživatelské rozhraní: neboli GUI (Graphical User Interface). Je to uživatelské rozhraní umožňující ovládat počítač pomocí interaktivních grafických prvků. Pojmem počítač zde rozumíme libovolný číslicový stroj, jehož výstup je potřeba prezentovat uživateli. Rozhraní tohoto typu tedy zahrnuje mimo počítače například i mobilní telefony, multimediální přehrávače, domácí spotřebiče, průmyslové vybavení, a jiné. [1] Používá se pro typy rozhraní založená na paradigmatu WIMP:
    • Windows (okna) - reprezentují spuštěné programy, z nichž každý je izolován od ostatních programů, které mohou mít vlastní okna, což umožňuje vykonávat více činností najednou;
    • Icons (ikony) - reprezentují zkratky, které slouží k provdení konkrétní činnosti, jako je spuštění programu;
    • Menus (menu) - reprezentují textové či z ikon složené nabídky, které umožňují jednu vybrat a provést tak určitou akci;
    • Pointing device - jde o přímou manipulace s objekty na obrazovce pomocí polohovacích zařízení Nejobvyklejším vstupním zařízením pro ovládání kurzoru je počítačová myš.
  • Textové uživatelské rozhraní: neboli CUI (Character User Interface), které se používá se pro rozhraní s menu, tlačítky atd., ovládané klávesnicí.
  • Příkazový řádek: neboli CLI, používá se pro rozhraní, kdy uživatel zadává příkazy pomocí jazyka.
  • Hlasové uživatelské rozhraní: - VUI (Voice User Interface)
  • Multimodální rozhraní: zatím se jedná převážně o rozšíření GUI o nové typy prezentací a vstupu dat.
  • Rozhraní typu virtuální realita: jeho využití je v současné době předmětem vědecko-výzkumných prací. [3]

Dva základní přístupy k uživatelskému rozhraní [4]

Návrh zaměřený na uživatele

Záměrem návrhu zaměřeného na uživatele (user-centered design) je především vyvinout a poskytnout uživateli použitelný design. Oproti běžnému vývoji softwaru, kdy designer uživatelských rozhraní navrhne rozhraní podle svého uvážení v očekávání shody s uživatelským vnímáním, se návrh zaměřený na uživatele řídí přímo uživatelem. Respektive chováním uživatele, které bylo zjištěno na základě uživatelského průzkumu cílové skupiny. Prvním krokem návrhu zaměřeného na uživatele je tedy specifikace cílové skupiny uživatelů, následované zkoumáním uživatelského chování. Samotné vyhodnocení získaných informací poté slouží jako podklad pro návrh uživatelského rozhraní. Základním druhem získané informace jsou potřeby (někdy také cíle) uživatele – co od produktu, služby očekává a jakým způsobem chce tato očekávání naplnit k dosažení požadovaného cíle a uspokojení potřeb.

Návrh uživatelského rozhraní

Tvorba uživatelského rozraní se skládá ze dvou základních částí. Těmi částmi je návrh uživatelského zážitku a návrh samotného uživatelského prostředí.

Pro návrh uživatelského rozhraní je potřeba:

  • znalost designu, programů a technologie;
  • znalost mentálních procesů lidí, interakce a komunikace;
  • odborná znalost tematiky;
  • vědět, co uživatel potřebuje, jaké činnosti bude vykonávat, co je hlavním cílem nebo objektem zájmu;
  • znalost lidí, pro které to dělám - analýza typického uživatele (např. SIS - studenti, vyučující, studijní oddělení, management) - dovednosti, schopnosti, motivace, vzdělání, kulturní prostředí;
  • správná ergonomie, funkčnost a konzistence;
  • je třeba vyjít z obecných standardů.

Empirická pravidla tvorby uživatelského rozhraní:

  • pravidlo 10 minut - do 10 min by měl být uživatel schopen osvojit si základy práce se systémem;
  • pravidlo tří kliknutí (three-click-rule) - uživatel by měl najít na webové stránce informaci kterou hledá pomocí maximálně tří kliknutí myší (pokud se informace na stránce nachází);
  • doba odezvy - doba odezvy systému by měla být 2 - 4 sekundy (ne jako sběr publikačních výsledků akademických pracovníků - 50 sekund po každém kliknutí a nekonečné formuláře);
  • customizace - přizpůsobivost aplikací požadavkům uživatelů.
  • základní navigační prvky
    • Search Box (vyhledávací pole): umožňuje zadat dotaz pomocí klíčového slova či fráze.
    • Breadcrump (drobečky): umožňují uživateli identifikovat svou aktuální polohu v systému.
    • Pagination (stránkování): rozděluje obsah mezi stránky, umožňuje se uživateli pohybovat mezi jednotlivými stránkami nebo některou přeskočit (např.: stránkování relevantních výsledků).
    • Tags (tagy, štítky): umožňují uživateli vyhledávat obsah ve stejné kategorii (např.: kategorie jednotlivých fasetů).
    • Sliders (posuvníky): umožňuje uživateli nastavit nebo upravit hodnotu. (např.: např. nastavení roku vydání).
    • Icons (ikony): slouží jako intuitivní symbol, který umožňuje uživateli snadnější pohyb například mezi jednotlivými systémy. Ikony jsou typicky hypertextové.
    • Image Carousel: umožňuje uživateli si vybrat jeden ze sady obrázků v databázi, obrázky jsou typicky hypertextové (např.: nejčastěji užito v obrazových databázích).

Uživatelská přívětivost

Definice uživatelského prožitku (anglicky User Experience, známé pod zkratkou UX, nebo UxD z anglického User Experience Design) není jednoznačná. Na internetu jsou k nalezení desítky různých definicí. Standard ISO 9241-210 definuje uživatelský prožitek jako uživatelská očekávání a reakce, které plynou z použití produktu, systému nebo služby. Dle této definice uživatelský prožitek zahrnuje uživatelovy emoce, přesvědčení, preference, očekávání, použitelnost, fyzické a psychologické odezvy, chování a schopnosti, které se objeví před, během a po použití. Standard dále definuje tři faktory, které mají vliv na uživatelský prožitek: systém, uživatel, kontext použití. [1] Pro dobrou uživatelskou přívětivost je třeba zohlednit a přizpůsobit se cílové skupině zákazníků, jejich potřebám, aktivitám a očekáváním.

Jak uvádí Garret ve své knize The elements of user experience, uživatelský prožitek nejčastěji chápeme jako souhrn několika poddisciplín:

  • uživatelský výzkum: jedná se zejména o rozhovory, on-line výzkumy, určení majoritních skupin, testování použitelnosti
  • interakční design: ten se zabývá návrhem konkrétních stránek nebo složitějších interakcí v případě aplikací;
  • informační architektura: definuje strukturu informací;
  • vizuální design: se zabývá návrhem vzhledu a emocionálního působení pomocí barev, písma a grafických prvků. [1]

Uváděné atributy definující uživatelskou přívětivost systémů:

  • Použitelnost – dělá to něco, co lidé potřebují udělat?
  • Naučitelnost – umí lidé vymyslet, jak to použít?
  • Efektivnost – udělá skutečně to, co chceme?
  • Účinnost – udělá to v rámci rozumné míry času a úsilí?
  • Chtěnost – chtějí to lidé?
  • Potěšení – mají z toho lidé pozitivní dojem? [2]

Použitelnost (usability) Použitelnost souvisí ovládáním, srozumitelností a přehledností. Uživatel se snadno orientuje, rychle a bez zbytečné námahy nalezne to, co hledá.

Časté chyby v rámci použitelnosti webu:

  • Nevhodná grafika
  • Špatná navigace mezi stránkami
  • Špatné rozmístění ovládacích prvků
  • Špatná čitelnost textu na stránce, přehlednost a rozložení prvků stránky
  • Složitý objednávkový proces (e-shopy) [5].

Přístupnost (accesibility) Přístupný je takový web, „který neklade uživatelům žádné překážky v jeho používání.“[2]. Znamená to, že umožňuje plnohodnotný přístup všem uživatelům bez ohledu na jejich technické vybavení, znalosti či postižení.

Informační architektura

Informační architektura je vědecká disciplína zabývající se uspořádáním systému způsobem, který naplní potřeby uživatelů. Informační architektura vytváří logickou strukturu informací ve vztahu zejména k webovým aplikacím. Termín informační architektura zavedl Richard Saul Wurman roce 1976.

Nejdůležitější oblasti:[6]

  • organizace obsahu do kategorií
  • informační rozvržení - akcent na informační (nikoliv grafický) design
  • navigační rozvržení

Zdroje

Reference

  1. ↑ 1,0 1,1 1,2 1,3 NEDBÁLEK, Stanislav. Uživatelské rozhraní mobilních aplikací. [online] Brno, 2016. 94 s. Diplomová práce. Masarykova univerzita, Fakulta informatiky. Vedoucí diplomové práce doc. RNDr. Petr Sojka, Ph.D. [cit. 2021-02-15] Dostupné z: https://is.muni.cz/th/exrqj/stanislav-nedbalek-diplomova-prace.pdf
  2. ↑ 2,0 2,1 2,2 SEDLÁČEK, Pavel. Uživatelská přívětivost univerzitních informačních systémů. [online] Brno, 2017. 152 s. Diplomová práce. Masarykova univerzita, Fakulta informatiky. Vedoucí diplomové práce RNDr. JUDr. Vladimír Šmíd, CSc. [cit. 2021-02-06] Dostupné z: https://is.muni.cz/th/vkmaz/Pavel_Sedlacek_DP_-_Uzivatelska_privetivost_univerzitnich_informacnich_systemu_pqmgvtmu.pdf
  3. ↑ 3,0 3,1 LOUKOŤOVÁ, Klára. Uživatelská rozhraní profesionálních online systémů [Userinterfaces of professional online retrieval systems]. Praha, 2007. 154 s.,46 s. příl. Rigorózní práce. Univerzita Karlova v Praze, Filozofická fakulta, Ústav informačních studií a knihovnictví. Konzultant rigorózní práce PhDr. Richard Papík, PhD.[cit. 2021-02-15] Dostupné z: https://dspace.cuni.cz/handle/20.500.11956/12222
  4. ↑ GREGAR, Tomáš. Semantics Visualization and Visual Semantics: in E-learning and other Applications [online]. Brno, 2011. Disertační práce. Masarykova univerzita, Fakulta informatiky. Vedoucí práce doc. RNDr. Tomáš Pitner, Ph.D.
  5. ↑ HUMAN – COMPUTER INTERACTION. Moodle UK pro výuku 1 [online]. [cit. 2020-09-29]. Dostupné z: https://dl1.cuni.cz/pluginfile.php/506815/mod_resource/content/0/opakovani3_HCI_bibliometrie.pdf
  6. ↑ KVAŠOVÁ, Zuzana. Informační architektura webového rozhraní vybraných digitálních knihoven. Praha, 2014. 80 s., 39 s. příl. Diplomová práce (Mgr.). Univerzita Karlova v Praze, Filozofická fakulta, Ústav informačních studií a knihovnictví. Vedoucí diplomové práce Ing. Martin Souček, Ph.D.

Doporučená literatura

  • BALOUN, Josef, BEZPALEC, Pavel a STRNAD, Ladislav. Uživatelské rozhraní ISDN. Vyd. 1. Praha: Česká technika - nakladatelství ČVUT, 2006. 108 s. ISBN 80-01-03388-0.
  • ČERVENKOVÁ, Alena, ed. a HOŘAVA, Michal, ed. Uživatelsky přívětivá rozhraní. Vyd. 1. Praha: Horava & Associates, 2009. 177 s. ISBN 978-80-254-5295-0.
  • PETZOLD, Charles. Programování Microsoft Windows Forms v jazyce C#: [vytváříme uživatelské rozhraní aplikací]. Vyd. 1. Brno: Computer Press, 2006. 356 s. ISBN 80-251-1058-3.
  • HEROUT, Pavel. Java: grafické uživatelské prostředí a čeština. 2. vyd. České Budějovice: Kopp, 2007. 316 s. ISBN 978-80-7232-328-9.
  • LIF, Magnus. Adding usability: methods for modelling, user interface design and evaluation. Uppsala: Acta Universitatis Upsaliensis, 1998. 42 s. Comprehensive summaries of Uppsala dissertations from the Faculty of Science and Technology, 359. ISBN 91-554-4186-6.
  • JOHNSON, Jeff. Designing with the mind in mind: simple guide to understanding user interface design guidelines [online]. Second edition. Boston: Elsevier, [2014], ©2014 [cit. 2021-02-06]. ISBN 978-0-12-411556-9. Dostupné z: https://ebookcentral.proquest.com/lib/natl-ebooks/detail.action?docID=1584420.

Související články

ICT Uživatelské rozhraní rešeršních systémů, základní složky uživatelského rozhraní, význam standardizace komunikace s informačními systémy (např. ISO 9241)
Uživatelské rozhraní (user interface)/old
Uživatelské rozhraní rešeršních systémů
Použitelnost webu
Typy uživatelských rozhraní a jejich specifika
Vysvětlete termín HCI, popište, čím se tento obor zabývá, a uveďte, jak se uplatňuje v oblasti informačních a komunikační technologií.
HCI

Klíčová slova

uživatelské rozhraní, počítač, webová aplikace, internet

Citováno z „https://wikisofia.cz/w/index.php?title=Uživatelské_rozhraní&oldid=64330“