Mobilní zařízení: Porovnání verzí

 
(Nejsou zobrazeny 2 mezilehlé verze od 2 dalších uživatelů.)
Řádek 1: Řádek 1:
'''Mobilní zařízení''' jsou přenosné komunikačně informační systémy s možností připojení k [[Internet|internetové]] síti. Z toho vyplývá, že za mobilní zařízení se dají považovat například laptop, [[Telefon|mobilní telefon]], tablet, ale i mp3 přehrávač.<br />
+
'''Mobilní zařízení''' jsou přenosné komunikačně informační systémy s možností připojení k [[Internet|internetové]] síti. Z toho vyplývá, že za mobilní zařízení se dají považovat například laptop, [[Telefon|mobilní telefon]], tablet, ale i mp3 přehrávač.
 
 
  
 
== Mobilní uživatelské rozhraní ==
 
== Mobilní uživatelské rozhraní ==
 
Pro termín [[uživatelské rozhraní]] je často používaný anglický termín user interface a jeho zkratka UI. Uživatelské rozhraní je zprostředkovatelem komunikace mezi člověkem a strojem.
 
Pro termín [[uživatelské rozhraní]] je často používaný anglický termín user interface a jeho zkratka UI. Uživatelské rozhraní je zprostředkovatelem komunikace mezi člověkem a strojem.
Při návrhu uživatelských rozhraní v mobilních zařízeních je nezbytné zohledňovat všechny tyto aspekty a mít je neustále na mysli. Mobilní zařízení lze klasifikovat dle následujících kritérií:<br />
+
Při návrhu uživatelských rozhraní v mobilních zařízeních je nezbytné zohledňovat všechny tyto aspekty a mít je neustále na mysli. Mobilní zařízení lze klasifikovat dle následujících kritérií:
 +
 
 
* velikost a váha,
 
* velikost a váha,
 
* vstupní režim (input modes),
 
* vstupní režim (input modes),
Řádek 12: Řádek 12:
 
* komunikační schopnosti,
 
* komunikační schopnosti,
 
* typ [[Operační systém|operačního systému]],
 
* typ [[Operační systém|operačního systému]],
* rozšiřitelnost (expandability).<ref name="kocka">FRANTIŠEK, Čanda. <i>Role animace v uživatelském rozhraní mobilních zařízení</i>. Praha, 2016, 86 s.</ref><br />
+
* rozšiřitelnost (expandability).<ref name="kocka">FRANTIŠEK, Čanda. <i>Role animace v uživatelském rozhraní mobilních zařízení</i>. Praha, 2016, 86 s.</ref>
 
== Design uživatelských rozhraní mobilních zařízení je ovlivněn několika aspekty: ==
 
== Design uživatelských rozhraní mobilních zařízení je ovlivněn několika aspekty: ==
<br />
+
 
 
* mobilní zařízení jsou využívány převážně v rukách uživatele,
 
* mobilní zařízení jsou využívány převážně v rukách uživatele,
 
* fungují na bázi bezdrátového spojení,
 
* fungují na bázi bezdrátového spojení,
Řádek 22: Řádek 22:
  
 
== Typologie mobilních aplikací ==
 
== Typologie mobilních aplikací ==
<br />
 
 
Navrhování uživatelského rozhraní pro mobilní zařízení je také ovlivněno
 
Navrhování uživatelského rozhraní pro mobilní zařízení je také ovlivněno
 
tím, jakým způsobem je uživateli nabízen obsah, případně jaký způsob si sám zvolí.
 
tím, jakým způsobem je uživateli nabízen obsah, případně jaký způsob si sám zvolí.
 
Budiu (2015) rozlišuje tři základní typy [[mobilní aplikace|mobilních aplikací]]:
 
Budiu (2015) rozlišuje tři základní typy [[mobilní aplikace|mobilních aplikací]]:
  
'''Nativní aplikace'''<br />
+
'''Nativní aplikace'''
 +
 
 
Jedná se o aplikační [[software]], jehož hlavní výhodou je optimalizace aplikace
 
Jedná se o aplikační [[software]], jehož hlavní výhodou je optimalizace aplikace
 
přímo pro zařízení. To znamená, že jsou vytvořené přímo pro danou platformu
 
přímo pro zařízení. To znamená, že jsou vytvořené přímo pro danou platformu
 
(např. [[Android]], Windows phone nebo iOS).
 
(např. [[Android]], Windows phone nebo iOS).
  
'''Mobilní webové aplikace'''<br />
+
'''Mobilní webové aplikace'''
 +
 
 
Mobilní web není aplikací ve skutečném slova smyslu, protože není potřeba
 
Mobilní web není aplikací ve skutečném slova smyslu, protože není potřeba
 
žádné instalace. Zobrazuje se v mobilním [[internetovém prohlížeči|internetové prohlížeče]]. Je tedy
 
žádné instalace. Zobrazuje se v mobilním [[internetovém prohlížeči|internetové prohlížeče]]. Je tedy
Řádek 38: Řádek 39:
 
stránek, která je optimalizovaná pro mobilní zařízení, čímž se odlišuje od desktopové
 
stránek, která je optimalizovaná pro mobilní zařízení, čímž se odlišuje od desktopové
 
webové aplikace. Měla by být tedy přizpůsobena omezením mobilního prohlížeče
 
webové aplikace. Měla by být tedy přizpůsobena omezením mobilního prohlížeče
i malým displejům telefonů.<br />
+
i malým displejům telefonů.
 +
 
 +
'''Hybridní aplikace'''
  
'''Hybridní aplikace'''<br />
 
 
Jsou určitým kompromisem, mezi dvěma předchozími typy mobilních
 
Jsou určitým kompromisem, mezi dvěma předchozími typy mobilních
 
aplikací. Stejně jako nativní aplikace jsou dostupné v obchodech s aplikacemi
 
aplikací. Stejně jako nativní aplikace jsou dostupné v obchodech s aplikacemi
 
jednotlivých platforem ([[App store]], [[Google play]] apod.), ale současně jsou (stejně jako
 
jednotlivých platforem ([[App store]], [[Google play]] apod.), ale současně jsou (stejně jako
 
mobilní webové aplikace) poskytovány skrze [[internetové prohlížeče]], ovšem
 
mobilní webové aplikace) poskytovány skrze [[internetové prohlížeče]], ovšem
s výjimkou toho, že prohlížeč je zakotven v aplikaci.<ref name="kocka">FRANTIŠEK, Čanda. <i>Role animace v uživatelském rozhraní mobilních zařízení</i>. Praha, 2016, 86 s.</ref><br />
+
s výjimkou toho, že prohlížeč je zakotven v aplikaci.<ref name="kocka">FRANTIŠEK, Čanda. <i>Role animace v uživatelském rozhraní mobilních zařízení</i>. Praha, 2016, 86 s.</ref>
  
 
== Faktory ovlivňující UI mobilních zařízení ==
 
== Faktory ovlivňující UI mobilních zařízení ==
<br />
+
 
'''a) Ergonomické faktory'''<br />
+
'''a) Ergonomické faktory'''
 +
 
 
[[Ergonomie]] je při návrhu mobilních uživatelských rozhraní základním
 
[[Ergonomie]] je při návrhu mobilních uživatelských rozhraní základním
 
kamenem, na který musí návrhář UI myslet. Mobilní zařízení mají jiné rozměry než
 
kamenem, na který musí návrhář UI myslet. Mobilní zařízení mají jiné rozměry než
Řádek 55: Řádek 58:
 
přes dotykovou obrazovku.
 
přes dotykovou obrazovku.
  
'''b) Velikost displeje'''<br />
+
'''b) Velikost displeje'''
 +
 
 
Především díky výrobcům mobilních zařízení pro otevřený operační systém
 
Především díky výrobcům mobilních zařízení pro otevřený operační systém
 
Android, který je využíván většinou výrobců mobilní elektroniky, musíme rozlišovat
 
Android, který je využíván většinou výrobců mobilní elektroniky, musíme rozlišovat
Řádek 63: Řádek 67:
 
uživatelského rozhraní.
 
uživatelského rozhraní.
  
'''c) Dotyk'''<br />
+
'''c) Dotyk'''
 +
 
 
Ovládání mobilních zařízení rychle přechází od hardwarového ovládání
 
Ovládání mobilních zařízení rychle přechází od hardwarového ovládání
 
k ovládání tzv. dotykem. U návrhu UI na mobilních zařízení s dotykovým displejem se u jednotlivých prvků UI, jako jsou tlačítka, odkazy apod. počítá s pojmem [[Touch Targe]]t.Tento pojem udává minimální velikost prvků UI, tak aby byly pro uživatele lehce ovladatelné.
 
k ovládání tzv. dotykem. U návrhu UI na mobilních zařízení s dotykovým displejem se u jednotlivých prvků UI, jako jsou tlačítka, odkazy apod. počítá s pojmem [[Touch Targe]]t.Tento pojem udává minimální velikost prvků UI, tak aby byly pro uživatele lehce ovladatelné.
  
'''d) Ovládání gesty'''<br />
+
'''d) Ovládání gesty'''
 +
 
 
Ovládání mobilních zařízení dotykem přineslo nový způsob ovládání aplikací
 
Ovládání mobilních zařízení dotykem přineslo nový způsob ovládání aplikací
 
pomocí gest. Gesta umožňují urychlovat ovládání a nahrazovat grafické elementy
 
pomocí gest. Gesta umožňují urychlovat ovládání a nahrazovat grafické elementy
 
ovládání v UI a tím i šetřit místo pro obsah.
 
ovládání v UI a tím i šetřit místo pro obsah.
  
'''e) Vizuální faktory'''<br />
+
'''e) Vizuální faktory'''
 +
 
 
Vizuální faktory, jako je hierarchie a [[layout]], použití barev, [[typografie]], ikony
 
Vizuální faktory, jako je hierarchie a [[layout]], použití barev, [[typografie]], ikony
 
i animace ovlivňují percepci obsahu, podporují účel interakcí, a vylepšují tak celkový
 
i animace ovlivňují percepci obsahu, podporují účel interakcí, a vylepšují tak celkový
Řádek 79: Řádek 86:
 
pomáhá chápat smysl vjemů z daného prostředí.
 
pomáhá chápat smysl vjemů z daného prostředí.
  
'''f) Barva'''<br />
+
'''f) Barva'''
Používání barev je často velmi subjektivní, ale je možné vycházet z teorie barev, tedy vědy zabývající se efektem barev na uživatele. Barva je důležitá pro kontrast v UI, pomáhá tak orientaci v obsahu a fungování interakcí. Napomáhá také rozdělovat, případně propojovat strukturu obsahu, oddělovat statický obsah od funkčních interakcí. Pomocí barev můžeme ovlivňovat i dojem uživatelů z UI za jistým účelem (hravost, serióznost, tradice apod.) nebo pomocí zabarvení zvýraznit a dát najevo určitý pocit (notifikace uložení, zákazu, apod.) <br />
+
 
 +
Používání barev je často velmi subjektivní, ale je možné vycházet z teorie barev, tedy vědy zabývající se efektem barev na uživatele. Barva je důležitá pro kontrast v UI, pomáhá tak orientaci v obsahu a fungování interakcí. Napomáhá také rozdělovat, případně propojovat strukturu obsahu, oddělovat statický obsah od funkčních interakcí. Pomocí barev můžeme ovlivňovat i dojem uživatelů z UI za jistým účelem (hravost, serióznost, tradice apod.) nebo pomocí zabarvení zvýraznit a dát najevo určitý pocit (notifikace uložení, zákazu, apod.)  
 +
 
 +
'''g) Ikonografie a obrazovost'''
  
'''g) Ikonografie a obrazovost'''<br />
 
 
Obrazovost a obzvláště používání ikon je častým elementem UI na mobilních
 
Obrazovost a obzvláště používání ikon je častým elementem UI na mobilních
 
zařízeních. Ikony jsou grafikou, která zabírá malou část displeje a většinou poskytuje
 
zařízeních. Ikony jsou grafikou, která zabírá malou část displeje a většinou poskytuje
Řádek 90: Řádek 99:
 
(Brejcha, 2015), sociálními nebo technickými kontexty.
 
(Brejcha, 2015), sociálními nebo technickými kontexty.
  
'''h) Animace'''<br />
+
'''h) Animace'''
 +
 
 
Použití animace je pro percepci UI poměrně novým aspektem. Také zvyšuje míru zapojení a imerze uživatele.
 
Použití animace je pro percepci UI poměrně novým aspektem. Také zvyšuje míru zapojení a imerze uživatele.
 
Dodává dynamiku a osobitost celému UI. Pomáhá orientovat se v prostředí aplikace,
 
Dodává dynamiku a osobitost celému UI. Pomáhá orientovat se v prostředí aplikace,
Řádek 101: Řádek 111:
  
 
== Odkazy ==
 
== Odkazy ==
 +
 
=== Reference ===
 
=== Reference ===
 
<references />
 
<references />
Řádek 111: Řádek 122:
 
=== Externí odkazy ===
 
=== Externí odkazy ===
 
1.[https://www.nngroup.com/articles/mobile-native-apps/ Typy mobilních aplikací]<br />
 
1.[https://www.nngroup.com/articles/mobile-native-apps/ Typy mobilních aplikací]<br />
2.[http://motionographer.com/2015/07/06/user-interface-design-why-motion-matters/ Uživatelské rozhraní]<br />
+
2.[http://motionographer.com/2015/07/06/user-interface-design-why-motion-matters/ Uživatelské rozhraní]
 
=== Klíčová slova ===
 
=== Klíčová slova ===
 
mobilní zařízení, mobilní aplikace, uživatelské rozhraní
 
mobilní zařízení, mobilní aplikace, uživatelské rozhraní

Aktuální verze z 1. 2. 2018, 07:43

Mobilní zařízení jsou přenosné komunikačně informační systémy s možností připojení k internetové síti. Z toho vyplývá, že za mobilní zařízení se dají považovat například laptop, mobilní telefon, tablet, ale i mp3 přehrávač.

Mobilní uživatelské rozhraní

Pro termín uživatelské rozhraní je často používaný anglický termín user interface a jeho zkratka UI. Uživatelské rozhraní je zprostředkovatelem komunikace mezi člověkem a strojem. Při návrhu uživatelských rozhraní v mobilních zařízeních je nezbytné zohledňovat všechny tyto aspekty a mít je neustále na mysli. Mobilní zařízení lze klasifikovat dle následujících kritérií:

  • velikost a váha,
  • vstupní režim (input modes),
  • výstupní režim (output modes),
  • výkonnost (performance),
  • druh užití,
  • komunikační schopnosti,
  • typ operačního systému,
  • rozšiřitelnost (expandability).[1]

Design uživatelských rozhraní mobilních zařízení je ovlivněn několika aspekty:

  • mobilní zařízení jsou využívány převážně v rukách uživatele,
  • fungují na bázi bezdrátového spojení,
  • podporují nové aplikace a internetové připojení,
  • mají relativně malou velikost obrazovky k zobrazení značného množství informací v dané chvíli,
  • mobilní zařízení mají omezenou výdrž, paměť a výkon.[1]

Typologie mobilních aplikací

Navrhování uživatelského rozhraní pro mobilní zařízení je také ovlivněno tím, jakým způsobem je uživateli nabízen obsah, případně jaký způsob si sám zvolí. Budiu (2015) rozlišuje tři základní typy mobilních aplikací:

Nativní aplikace

Jedná se o aplikační software, jehož hlavní výhodou je optimalizace aplikace přímo pro zařízení. To znamená, že jsou vytvořené přímo pro danou platformu (např. Android, Windows phone nebo iOS).

Mobilní webové aplikace

Mobilní web není aplikací ve skutečném slova smyslu, protože není potřeba žádné instalace. Zobrazuje se v mobilním internetové prohlížeče. Je tedy nejuniverzálnější formou, neboť je funkční napříč platformami. Jedná se o podobu stránek, která je optimalizovaná pro mobilní zařízení, čímž se odlišuje od desktopové webové aplikace. Měla by být tedy přizpůsobena omezením mobilního prohlížeče i malým displejům telefonů.

Hybridní aplikace

Jsou určitým kompromisem, mezi dvěma předchozími typy mobilních aplikací. Stejně jako nativní aplikace jsou dostupné v obchodech s aplikacemi jednotlivých platforem (App store, Google play apod.), ale současně jsou (stejně jako mobilní webové aplikace) poskytovány skrze internetové prohlížeče, ovšem s výjimkou toho, že prohlížeč je zakotven v aplikaci.[1]

Faktory ovlivňující UI mobilních zařízení

a) Ergonomické faktory

Ergonomie je při návrhu mobilních uživatelských rozhraní základním kamenem, na který musí návrhář UI myslet. Mobilní zařízení mají jiné rozměry než laptopy a desktopy, jinak se drží, mají různé rozměry a hlavně se ovládají přes dotykovou obrazovku.

b) Velikost displeje

Především díky výrobcům mobilních zařízení pro otevřený operační systém Android, který je využíván většinou výrobců mobilní elektroniky, musíme rozlišovat velké množství typů mobilů a především různých velikostí displejů od 3,5” až po 5,7”, jejichž rozlišení se pohybuje od 240x320 px až po 2560x1440 px. Velikost displeje a to, jak uživatel své mobilní zařízení drží, zásadně ovlivňuje použitelnost uživatelského rozhraní.

c) Dotyk

Ovládání mobilních zařízení rychle přechází od hardwarového ovládání k ovládání tzv. dotykem. U návrhu UI na mobilních zařízení s dotykovým displejem se u jednotlivých prvků UI, jako jsou tlačítka, odkazy apod. počítá s pojmem Touch Target.Tento pojem udává minimální velikost prvků UI, tak aby byly pro uživatele lehce ovladatelné.

d) Ovládání gesty

Ovládání mobilních zařízení dotykem přineslo nový způsob ovládání aplikací pomocí gest. Gesta umožňují urychlovat ovládání a nahrazovat grafické elementy ovládání v UI a tím i šetřit místo pro obsah.

e) Vizuální faktory

Vizuální faktory, jako je hierarchie a layout, použití barev, typografie, ikony i animace ovlivňují percepci obsahu, podporují účel interakcí, a vylepšují tak celkový uživatelský zážitek. Tyto faktory úzce souvisí s teorií vizuální percepce UI a mentálními modely. Tuto percepci můžeme popsat jako proces, který uživatelům pomáhá chápat smysl vjemů z daného prostředí.

f) Barva

Používání barev je často velmi subjektivní, ale je možné vycházet z teorie barev, tedy vědy zabývající se efektem barev na uživatele. Barva je důležitá pro kontrast v UI, pomáhá tak orientaci v obsahu a fungování interakcí. Napomáhá také rozdělovat, případně propojovat strukturu obsahu, oddělovat statický obsah od funkčních interakcí. Pomocí barev můžeme ovlivňovat i dojem uživatelů z UI za jistým účelem (hravost, serióznost, tradice apod.) nebo pomocí zabarvení zvýraznit a dát najevo určitý pocit (notifikace uložení, zákazu, apod.)

g) Ikonografie a obrazovost

Obrazovost a obzvláště používání ikon je častým elementem UI na mobilních zařízeních. Ikony jsou grafikou, která zabírá malou část displeje a většinou poskytuje intuitivní reprezentaci akce, statutu nebo aplikace (Android Developers, 2015). Je to tedy vztah mezi reprezentovaným a objektem založeným na podobnosti, často metafoře. Jejich použitelnost může být tedy ovlivněná odlišnými kulturními (Brejcha, 2015), sociálními nebo technickými kontexty.

h) Animace

Použití animace je pro percepci UI poměrně novým aspektem. Také zvyšuje míru zapojení a imerze uživatele. Dodává dynamiku a osobitost celému UI. Pomáhá orientovat se v prostředí aplikace, poskytuje uživatelům zpětnou vazbu na jejich akce a dává jim pocit přímé manipulace.[1]

Zdroj

Článek je založen na práci: ČANDA, František, Role animace v uživatelském rozhraní mobilních zařízení.[cit. 2018-01-28]. Ústav informačních studií a knihovnictví / Studia nových médií FF UK. Vedoucí práce Mgr. Vít Šisler, PhD., diplomová práce, Praha 2016.

Odkazy

Reference

  1. 1,0 1,1 1,2 1,3 FRANTIŠEK, Čanda. Role animace v uživatelském rozhraní mobilních zařízení. Praha, 2016, 86 s.

Související články

Uživatelské rozhraní
Typy uživatelských rozhraní a jejich specifika/old
Telefon
Operační systém
HCI

Externí odkazy

1.Typy mobilních aplikací
2.Uživatelské rozhraní

Klíčová slova

mobilní zařízení, mobilní aplikace, uživatelské rozhraní