Návrh uživatelského rozhraní: Porovnání verzí

Značky: editace z Vizuálního editoru, možná chyba ve Vizuálním editoru
Značky: editace z Vizuálního editoru, možná chyba ve Vizuálním editoru
Řádek 24: Řádek 24:
 
O definici uživatelského rozhraní detailně pojednává článek [[Uživatelské rozhraní (user interface)]].
 
O definici uživatelského rozhraní detailně pojednává článek [[Uživatelské rozhraní (user interface)]].
  
=== Uživatelské rozhraní v souladu s "Goal oriented process" ===
+
O technické stránce interakce mezi počítačem a uživatelem - fenoménu "Human-computer interaction - HCI" pojednává článek [[HCI]].
  
 +
== Uživatelské rozhraní v souladu s "Goal oriented process" ==
 
Velmi zjednodušeně se jedná o přístup, který je zaměřen na řešení uživatelových cílů (anglicky "Goals") a nikoliv úkolů (anglicky "Tasks'). Tento přístup sahá až hluboko k psychologické teorii motivace jedince.
 
Velmi zjednodušeně se jedná o přístup, který je zaměřen na řešení uživatelových cílů (anglicky "Goals") a nikoliv úkolů (anglicky "Tasks'). Tento přístup sahá až hluboko k psychologické teorii motivace jedince.
  
Řádek 45: Řádek 46:
 
Z příkladu je jasně patrný rozdíl cíle oproti úkolu. Nabízet uživateli řešení cíle místo samotného úkolu je samozřejmě mnohem výhodnější.
 
Z příkladu je jasně patrný rozdíl cíle oproti úkolu. Nabízet uživateli řešení cíle místo samotného úkolu je samozřejmě mnohem výhodnější.
  
== Jak uživatelé vnímají rozhraní ==
+
=== Typologie uživatelských cílů (goals) ===
O kognitivním poznávání uživatelského rozhraní samotnými uživateli se detailně rozepisuje například Alan Cooper ve své knize About Face. Konkrétně vyjmenovává následující 3 stupně:
+
 
 +
Dle teorie se jedná o 3 typy cílů, kterých se uživatel pokouší dosáhnout:
 +
* Prožitkové
 +
Uživatel se chce nějakým způsobem cítit - například hraním elektronické rulety uspokojuje touhu po slastném pocitu úspěchu - výhry.
 +
* Konečné
 +
Uživatel si přeje něco udělat - například si potřebuje z internetu stáhnout návod k sedací soupravě, kterou si právě koupil.
 +
* Životní
 +
Jedná se o životní aspirace uživatele, přeje si někým být. Například si přeje nebýt zodpovědný za zabíjení zvířat na jatkách a chce se stát veganem.
 +
 
 +
== Fáze vnímání rozhraní uživateli ==
 +
Při tvorbě uživatelského rozhraní je třeba mít na zřeteli fáze, během kterých uživatelé různými způsoby toto prostředí vnímají. Všechny mají svá specifika a díky dnešní úrovni poznání je již možné modelovat prvky rozhraní s ohledem na tyto fáze.
 +
 
 +
O kognitivním poznávání uživatelského rozhraní samotnými uživateli se detailně rozepisuje například Alan Cooper ve své knize About Face. Konkrétně vyjmenovává následující 3 fáze:<ref>Cooper, Allan. About Face. 2010</ref>
  
 
* Viscerální
 
* Viscerální
Řádek 57: Řádek 70:
 
Při tvorbě uživatelského rozhraní je nutné brát v potaz všechny 3 stupně poznávání, aby byl uživatel ve všech jeho fázích plně uspokojen.
 
Při tvorbě uživatelského rozhraní je nutné brát v potaz všechny 3 stupně poznávání, aby byl uživatel ve všech jeho fázích plně uspokojen.
  
=== 3 typy gólů, které může chtít uživatel interakcí uspokojovat ===
+
== Aspekty návrhu uživatelského rozhraní ==
* Prožitkové
+
 
Uživatel se chce nějakým způsobem cítit - například hraním elektronické rulety uspokojuje touhu po slastném pocitu úspěchu - výhry.
+
Pravidla designu uživatelských rozhraní jsou variabilní pro každou z platforem, na které interakce probíhá. Obecně ale existují základní aspekty, ze kterých tato variabilní pravidla vždy vychází a pouze se přizpůsobují.
* Konečné
 
Uživatel si přeje něco udělat - například si potřebuje z internetu stáhnout návod k sedací soupravě, kterou si právě koupil.
 
* Životní
 
Jedná se o životní aspirace uživatele, přeje si někým být. Například si přeje nebýt zodpovědný za zabíjení zvířat na jatkách a chce se stát veganem.
 
  
== Aspekty návrhu uživatelského rozhraní ==
+
Aspekty vznikaly postupně na základě děl vícero teoretiků i praktiků. Za zásadního přispěvatele se ovšem považuje Jakob Nielsen.<ref>Nielsen, Jakob. 10 usability heuristics for user interface design.</ref>
  
Mezi klíčové aspekty patří:
+
Mezi klíčové aspekty návrhu uživatelského rozhraní patří:
 
* minimalizace zátěže paměti uživatele
 
* minimalizace zátěže paměti uživatele
 
* umístění uživatele do centra ovládání
 
* umístění uživatele do centra ovládání
Řádek 75: Řádek 84:
 
* optimalizace pro případy chybování
 
* optimalizace pro případy chybování
 
* přizpůsobení rozhraní různému stupni pokroku uživatelů
 
* přizpůsobení rozhraní různému stupni pokroku uživatelů
 +
== Tvorba uživatelského rozhraní v praxi ==
 +
V dnešní praxi se návrhem rozhraní zabývají především osoby na pozicích webdesignerů, interakčních designérů, UX specialistů, vizuálních grafiků a mnohých dalších.
  
== Tvorba uživatelského rozhraní v praxi ==
 
 
Pokud aplikujeme výše zmíněné aspekty do konkrétního odvětví - například webdesignu, můžeme pozorovat jejich úpravu a transformaci, aby co nejvíce odpovídaly hlavnímu cíli: vytvoření co nejlepších a nejfunkčnějších webových stránek.
 
Pokud aplikujeme výše zmíněné aspekty do konkrétního odvětví - například webdesignu, můžeme pozorovat jejich úpravu a transformaci, aby co nejvíce odpovídaly hlavnímu cíli: vytvoření co nejlepších a nejfunkčnějších webových stránek.
  
=== Fáze tvorby webových aplikací ===
+
Dá se říci, že webové stránky jedné služby/produktu by neměly být uniformní pro vícero platforem, ale vždy by měly být přizpůsobeny. Například, stránky jedné služby by měly obsahovat rozdílné prvky pro mobilní verzi, jiné pro tabletovou a jiné pro desktopovou. Tyto rozdíly by měly vycházet ze specifik jednotlivých zařízení a kontextu, v jakém jich uživatelé používají pro dosahování svých cílů.
 +
 
 +
V minulosti se programovalo více verzí webových stránek pro jednotlivé platformy, které se automaticky spouštěly na základě detekce interagujícího zařízení. Dnes se zpravidla užívá jediné verze stránek, které jsou responzivní a automaticky se přizpůsobuje vlastnostem zařízení, převážně velikosti displeje, operačnímu systému apod.
 +
 
 +
Níže si můžeme prohlédnout zjednodušený proces tvorby webových stránek dle materiálů digitální agentury H1.cz.
 +
 
 +
=== Fáze tvorby webových aplikací<ref>Studijní materiály kurzu "Design webových stránek" - agentura digitálního marketingu H1.cz</ref> ===
 
# Seznámení s projektem
 
# Seznámení s projektem
 
# Definice cílů webu a jejich dosahování
 
# Definice cílů webu a jejich dosahování
Řádek 97: Řádek 113:
 
# Vytvoření grafického návrhu webu dle prototypu
 
# Vytvoření grafického návrhu webu dle prototypu
 
# Programování a příprava beta verze
 
# Programování a příprava beta verze
 +
 +
== Reference ==
 +
<references />
 +
 
[[Kategorie:Informační studia a knihovnictví]]
 
[[Kategorie:Informační studia a knihovnictví]]
 
[[Kategorie:HCI]]
 
[[Kategorie:HCI]]
 
[[Kategorie:StuNoMe]]
 
[[Kategorie:StuNoMe]]
 
[[Kategorie:Uživatelé, gramotnost a čtení]]
 
[[Kategorie:Uživatelé, gramotnost a čtení]]

Verze z 24. 5. 2016, 21:10

Archivovaná verze stránky je dostupná na tomto odkazu.

Stránka ve výstavbě
Inkwell icon - Noun Project 2512.svg Na této stránce se právě pracuje. Prosím needitujte tuto stránku, dokud na ní zůstává tato šablona. Předejdete tak editačnímu konfliktu. Jestliže uběhla od poslední editace doba alespoň dvou dnů, neváhejte tuto šablonu odstranit. Inkwell icon - Noun Project 2512.svg


Uživatelské rozhraní (anglicky User interface) je nástroj, skrze který je možné komunikovat s určitým (informačním) systémem či zařízením. Komunikující člověk se nazývá uživatel, tvůrce rozhraní se nazývá designér a zabývá se vztahem a interakcí uživatele se systémem či zařízením.

Obor se řadí do odvětví Interakce člověka a počítače (anglicky Human-computer interaction nebo HCI), což je společensko-technologická věda, která se zabývá problematikou interakce komunikace mezi člověkem a počítačem, lidským vnímáním a poznáváním a schopnosti využívat počítač.

Typy a příklady uživatelských rozhraní

  • webové aplikace
  • mobilní aplikace
  • operační systémy
  • databázové systémy

Faktory definující dobré a špatné uživatelské rozhraní

Uživatelské rozhraní se posuzuje na základě množství faktorů, které by měly být ve vzájemném souladu. Platí, že že každé uživatelské rozhraní je stejně silné, jako jeho nejslabší část. Mezi tyto faktory může patřit například:

  • přístupnost
    • responzivita (optimalizace pro různá zařízení)
  • použitelnost
    • konzistentnost ovládacích prvků
    • intuitivita ovládání
    • zpětná vazba
  • důvěryhodnost

O definici uživatelského rozhraní detailně pojednává článek Uživatelské rozhraní (user interface).

O technické stránce interakce mezi počítačem a uživatelem - fenoménu "Human-computer interaction - HCI" pojednává článek HCI.

Uživatelské rozhraní v souladu s "Goal oriented process"

Velmi zjednodušeně se jedná o přístup, který je zaměřen na řešení uživatelových cílů (anglicky "Goals") a nikoliv úkolů (anglicky "Tasks'). Tento přístup sahá až hluboko k psychologické teorii motivace jedince.

Úkol je něco, co má uživatel stanoveno jako řešení některého ze svých cílů. Problémem ale je, že stanovený úkol nemusí být nejlepší způsob řešení uživatelova cíle. Úkol je výsledkem nějakého rozhodovacího procesu, který je velmi subjektivní, náchylný ke zkreslením omezený množstvím dalších parametrů.

Oproti tomu Cíl je nějaká potřeba, co uživatel objektivně potřebuje vyřešit a hledá toto řešení prostřednictvím nejvhodnějšího úkolu.

Příklad:

Uživatel má hlad - toto je fyziologická potřeba.

Cílem je uspokojit tuto potřebu - nemít hlad a najíst se.

Uživatel si stanoví úkol: najít si na internetu nejbližší supermarket a jít si nakoupit.

Produkt, který by uživateli vyřešil tento úkol, by byla například mapa se supermarkety.

Produkt, který by uživateli vyřešil cíl bez ohledu na stanovený úkol by byla například webová aplikace. Ta by měla umožňovat najít supermarket, najít restauraci, objednat si jídlo domů, objednat si nákup domů, naučit se meditaci pro potlačení pocitu hladu a další.

Z příkladu je jasně patrný rozdíl cíle oproti úkolu. Nabízet uživateli řešení cíle místo samotného úkolu je samozřejmě mnohem výhodnější.

Typologie uživatelských cílů (goals)

Dle teorie se jedná o 3 typy cílů, kterých se uživatel pokouší dosáhnout:

  • Prožitkové

Uživatel se chce nějakým způsobem cítit - například hraním elektronické rulety uspokojuje touhu po slastném pocitu úspěchu - výhry.

  • Konečné

Uživatel si přeje něco udělat - například si potřebuje z internetu stáhnout návod k sedací soupravě, kterou si právě koupil.

  • Životní

Jedná se o životní aspirace uživatele, přeje si někým být. Například si přeje nebýt zodpovědný za zabíjení zvířat na jatkách a chce se stát veganem.

Fáze vnímání rozhraní uživateli

Při tvorbě uživatelského rozhraní je třeba mít na zřeteli fáze, během kterých uživatelé různými způsoby toto prostředí vnímají. Všechny mají svá specifika a díky dnešní úrovni poznání je již možné modelovat prvky rozhraní s ohledem na tyto fáze.

O kognitivním poznávání uživatelského rozhraní samotnými uživateli se detailně rozepisuje například Alan Cooper ve své knize About Face. Konkrétně vyjmenovává následující 3 fáze:[1]

  • Viscerální

Jedná se o povrchní vnímání pomocí smyslů, které zatím není doprovázeno jakoukoliv interakcí s rozhraním. Uživatel hodnotí subjektivní krásu a estetičnost, emočně, vzniká první dojem. Tento první dojem může být ovlivněn velkým množstvím biasů neboli kognitivními zkresleními: například se může jednat o Efekt primarity, Haló efekt, Efekt rámování a další.

  • Behaviorální

Behaviorálním vnímáním označujeme poznávání rozhraní během uživatelovy interakce s ním.

  • Reflexivní

Jedná se o zpětné vnímání rozhraní s odstupem a to na základě (nejen) dvou předchozích stupňů poznávání. Opět hrají velkou roli emoce a paměť. Tímto poznáváním mohou být například i slastné vzpomínky na dojemnou hudbu, kterou si uživatel pustil z rozhraní svého iPodu. Toto poznávání bývá nejčastěji využíváno v marketingu.

Při tvorbě uživatelského rozhraní je nutné brát v potaz všechny 3 stupně poznávání, aby byl uživatel ve všech jeho fázích plně uspokojen.

Aspekty návrhu uživatelského rozhraní

Pravidla designu uživatelských rozhraní jsou variabilní pro každou z platforem, na které interakce probíhá. Obecně ale existují základní aspekty, ze kterých tato variabilní pravidla vždy vychází a pouze se přizpůsobují.

Aspekty vznikaly postupně na základě děl vícero teoretiků i praktiků. Za zásadního přispěvatele se ovšem považuje Jakob Nielsen.[2]

Mezi klíčové aspekty návrhu uživatelského rozhraní patří:

  • minimalizace zátěže paměti uživatele
  • umístění uživatele do centra ovládání
  • maximální konzistence ovládacích prvků
  • adaptace rozhraní pro mentální model uživatelů
  • maximální poznání uživatelů - uživatelská testování
  • optimalizace pro případy chybování
  • přizpůsobení rozhraní různému stupni pokroku uživatelů

Tvorba uživatelského rozhraní v praxi

V dnešní praxi se návrhem rozhraní zabývají především osoby na pozicích webdesignerů, interakčních designérů, UX specialistů, vizuálních grafiků a mnohých dalších.

Pokud aplikujeme výše zmíněné aspekty do konkrétního odvětví - například webdesignu, můžeme pozorovat jejich úpravu a transformaci, aby co nejvíce odpovídaly hlavnímu cíli: vytvoření co nejlepších a nejfunkčnějších webových stránek.

Dá se říci, že webové stránky jedné služby/produktu by neměly být uniformní pro vícero platforem, ale vždy by měly být přizpůsobeny. Například, stránky jedné služby by měly obsahovat rozdílné prvky pro mobilní verzi, jiné pro tabletovou a jiné pro desktopovou. Tyto rozdíly by měly vycházet ze specifik jednotlivých zařízení a kontextu, v jakém jich uživatelé používají pro dosahování svých cílů.

V minulosti se programovalo více verzí webových stránek pro jednotlivé platformy, které se automaticky spouštěly na základě detekce interagujícího zařízení. Dnes se zpravidla užívá jediné verze stránek, které jsou responzivní a automaticky se přizpůsobuje vlastnostem zařízení, převážně velikosti displeje, operačnímu systému apod.

Níže si můžeme prohlédnout zjednodušený proces tvorby webových stránek dle materiálů digitální agentury H1.cz.

Fáze tvorby webových aplikací[3]

  1. Seznámení s projektem
  2. Definice cílů webu a jejich dosahování
  3. Definice cílových skupin a jejich potřeb
    1. Tvorba person nebo uživatelských modelů
    2. Storyboardy, zákaznické cesty webem...
  4. Inspirační analýza
    1. Uživatelský výzkum - usertesting, focusgroups...
    2. Datová analýza předchozí verze webu
    3. Analýza konkurence
  5. Návrh informační architektury
    1. Analýza klíčových slov
    2. Návrh mapy obsahu webu
    3. Ověření návrhů testováním - cardsorting, focus groups...
  6. Příprava drátěného modelu - wireframu
  7. Tvorba prototypu a jeho ověřování testováním
  8. Vytvoření grafického návrhu webu dle prototypu
  9. Programování a příprava beta verze

Reference

  1. Cooper, Allan. About Face. 2010
  2. Nielsen, Jakob. 10 usability heuristics for user interface design.
  3. Studijní materiály kurzu "Design webových stránek" - agentura digitálního marketingu H1.cz