Mobilní zařízení: Porovnání verzí
(Není zobrazeno 6 mezilehlých verzí 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č. | |
− | |||
− | '''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. | ||
+ | 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 19: | Řá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 | + | * 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: == | ||
− | + | ||
* 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 29: | Řádek 22: | ||
== Typologie mobilních aplikací == | == Typologie mobilních aplikací == | ||
− | |||
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''' | + | '''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''' | + | '''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 45: | Řá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ů. | + | i malým displejům telefonů. |
+ | |||
+ | '''Hybridní aplikace''' | ||
− | |||
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 | + | 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í == | ||
− | + | ||
− | '''a) Ergonomické faktory''' | + | '''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 62: | Řádek 58: | ||
přes dotykovou obrazovku. | přes dotykovou obrazovku. | ||
− | '''b) Velikost displeje''' | + | '''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 | ||
velké množství typů mobilů a především různých velikostí displejů od 3,5” | 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 | + | až po 5,7”, jejichž [[Rozlišení obrazových informací|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 | displeje a to, jak uživatel své mobilní zařízení drží, zásadně ovlivňuje použitelnost | ||
uživatelského rozhraní. | uživatelského rozhraní. | ||
− | '''c) Dotyk''' | + | '''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''' | + | '''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''' | + | '''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 86: | Řá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''' | + | '''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.) | + | |
+ | 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 | 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 97: | Řádek 99: | ||
(Brejcha, 2015), sociálními nebo technickými kontexty. | (Brejcha, 2015), sociálními nebo technickými kontexty. | ||
− | '''h) Animace''' | + | '''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 104: | Řádek 107: | ||
==Zdroj== | ==Zdroj== | ||
− | |||
Článek je založen na práci: | Č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. | + | Č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 == | == Odkazy == | ||
+ | |||
=== Reference === | === Reference === | ||
<references /> | <references /> | ||
− | |||
− | |||
− | |||
=== Související články === | === Související články === | ||
[[Uživatelské rozhraní (user interface)|Uživatelské rozhraní]]<br /> | [[Uživatelské rozhraní (user interface)|Uživatelské rozhraní]]<br /> | ||
Řádek 122: | Řá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í] | + | 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č.
Obsah
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
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í