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

 
(Není zobrazeno 126 mezilehlých verzí od stejného uživatele.)
Řádek 1: Řádek 1:
−
{{Pracuje se}}
+
==Uživatelské rozhraní==
−
'''Uživatelské rozhraní''' 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í (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í 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í tři složky:'''
 +
* '''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:''' 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.
 +
* '''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>
 +
 
 +
'''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ů. <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>
 +
 
 +
'''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 [[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>
  
 
'''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>
 
'''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>
−
* data-centered design
+
* [[Database-centric architecture|data-centered design]]
−
* user-centered design
+
* [[UCD (User-centered design)|user-centered design]]
  
−
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.
+
====Návrh zaměřený na uživatele====
−
Uživatel je centrálním a určujícím činitelem celého informačního systému.
+
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.
  
−
'''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>
+
=== Návrh uživatelského rozhraní ===
−
* příkazový řádek (CLI = Command Line Interface)
+
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í.
−
** 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)
+
'''Pro návrh uživatelského rozhraní je potřeba:'''
−
** základem je koncept WIMP (Windows, Icons, Menus, Pointing device)
+
* znalost designu, programů a technologie;
−
** přímá manipulace s objekty na obrazovce pomocí polohovacích zařízení
+
* 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é 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.  
 +
 
 +
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žitelnost webu|použitelnosti]]
 +
* '''[[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í;
 +
* '''[[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>
 +
 
 +
'''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á.
 +
 
 +
'''Č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) <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ří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 ===
−
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 30: Řádek 113:
  
 
===Doporučená literatura===
 
===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===
 
===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  
+
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“