1. Best practices pro mobilní web v oboru transport
Best practices pro
mobilní web
v oboru transport
ExperienceU
11.5.2012
1 / 36

2. Best practices pro mobilní web v oboru transport
Obsah
Obsah 2
1 Manažerské shrnutí 4
1.1 Web versus aplikace, separátní verze versus responsive design 5
1.2 Stav mobilního webu je tristní 5
2 Specifika mobilního webu 6
3 Mobilní trendy 8
3.1 Vývoj trhu mobilních zařízení 8
3.2 Mobilní internet a online aktivity 8
4 Mobilní web versus mobilní aplikace 9
4.1 Nižší finanční náklady 10
4.1.1 Mobilní aplikace 10
4.1.2 Mobilní web 11
4.2 Jednoduchý způsob, jak začít s mobilní variantou 11
4.3 Rychlejší aktualizace a úpravy 11
4.4 Více uživatelů na větším počtu zařízení 12
5 Řešení mobilního webu 13
5.1 Separátní mobilní verze 14
5.2 Responsive design 15
5.3 Spojení responsive design a separátní mobilní verze 17
6 Současná situace v České republice 18
7 Dobré a špatné příklady 20
7.1 Navigace 20
7.1.1 Špatné příklady hlavní navigace 21
7.1.2 Dobrý příklad hlavní navigace 23
7.1.3 Špatné příklady dalších navigačních prvků 24
7.1.4 Dobré příklady dalších navigačních prvků 25
2 / 36

3. Best practices pro mobilní web v oboru transport
7.2 Vstupní formuláře 25
7.2.1 Špatné příklady rozložení vstupních formulářů 26
7.2.2 Dobrý příklad rozložení vstupních formulářů 27
7.2.3 Špatné příklady využití typů vstupních formulářů 28
7.2.4 Dobrý příklad využití typů vstupních formulářů 28
7.3 Obsah/kontext 29
7.3.1 Špatné příklady formy prezentování obsahu/kontextu 29
7.3.2 Dobré příklady formy prezentování obsahu/kontextu 31
8 Doporučení 32
Autor studie 33
ExperienceU 33
Hlavní autor studie 33
ExperienceU – přední česká agentura v oblasti user experience 34
Kontakty 36
Základní kontakty 36
Fakturační adresa 36
Autorská práva 36
3 / 36

4. Best practices pro mobilní web v oboru transport
1 Manažerské shrnutí
Celosvětově neustále narůstá počet lidí, kteří na web přistupují z mobilního zařízení, především z
chytrých telefonů. Společnost GARTNER předpovídá, že počet přístupu na web z mobilních zařízení
převýší počet přístupů z klasických počítačů již v průběhu roku 2012.
POČET PŘÍSTUPŮ NA WEB Z MOBILNÍCH ZAŘÍZENÍ PŘEVÝŠÍ POČET PŘÍSTUPŮ Z KLASICKÝCH
POČÍTAČŮ JIŽ V PRŮBĚHU ROKU 2012
Narůstající obliba mobilních zařízení je způsobena především: klesající cenou mobilních zařízení
 výkonnějším a lépe technicky vybaveným mobilním zařízením
 zvyšující se rychlostí mobilního internetu
Nejrůznější studie přicházejí s předpokladem, že v roce 2012 prodej chytrých telefonů převýší
prodej klasických počítačů. Tím logicky poroste o poměr využití webu prostřednictvím mobilních
telefonů.
ODHADUJE SE, ŽE V ROCE 2012 PRODEJ CHYTRÝCH TELEFONŮ PŘEVÝŠÍ PRODEJ
KLASICKÝCH POČÍTAČŮ.1
OBRÁZEK 1 Odhaduje se, že v roce 2012 prodej chytrých telefonů převýší prodej klasických počítačů.
1
Kniha Mobile First od Luke Wroblewski
4 / 36

5. Best practices pro mobilní web v oboru transport
1.1 Web versus aplikace, separátní verze versus responsive
design
Přesně před těmito rozhodnutí stojí firmy, které se rozhodnou oslovit uživatele mobilních zařízení.
V rámci studie najdete PŘEHLEDNÉ TABULKY SROVNÁVAJÍCÍ JEDNOTLIVÉ PŘÍSTUPY A VHODNOST JEJICH
POUŽITÍ.
OBECNĚ NEEXISTUJÍ LEPŠÍ ČI HORŠÍ ŘEŠENÍ – EXISTUJÍ JEN ŘEŠENÍ VHODNĚJŠÍ PRO
KONKRÉTNÍ PŘÍPADY.
1.2 Stav mobilního webu je tristní
V rámci přípravy studie jsme detailně zkoumali mobilní weby a aplikace 12 firem zabývajících se
přepravou osob či věcí. Zjištění byla neuspokojivá, v současné době má web optimalizovaný pro
mobilní zařízení pouze třetina z nich. A ani optimalizované weby se nevyvarovaly nedostatků.
FIRMY ZABÝVAJÍCÍ SE PŘEPRAVOU OSOB ČI VĚCÍ VE VĚTŠINĚ ZKOUMANÝCH PŘÍPADŮ
NEMAJÍ WEB OPTIMALIZOVANÝ PRO MOBILNÍ ZAŘÍZENÍ.
5 / 36

6. Best practices pro mobilní web v oboru transport
Kritérium Mobilní web Mobilní aplikace
NIŽŠÍ VYŠŠÍ
Finanční náklady na pořízení Ve většině případů se vytváří jedna Je potřeba vytvořit řešení pro různé
varianta. platformy.
VYŠŠÍ
NIŽŠÍ
Je potřeba vytvořit různá řešení,
Časová náročnost vývoje Ve většině případů se vytváří jedna
která vytváří různé nároky na
varianta.
realizaci.
POMALEJŠÍ
RYCHLEJŠÍ
Aktualizace a úpravy Aktualizace se projevují ihned.
Uživatel si musí aktualizovanou verzi
stáhnout.
VÍCE PŘÍLEŽITOSTÍ OMEZENÉ PŘÍLEŽITOSTI
Na web mohou i lidé, pro které Nároky na vytvoření aplikací pro
Uživatelé nebude dostupná aplikace v rámci různé platformy a propagaci směrem
jejich platformy. k lidem.
NIŽŠÍ
VYŠŠÍ
Aplikace je nainstalovaná v zařízení a
Potřeba připojení k internetu Mobilní web je uložen na vzdáleném
nemusí k chodu využívat datové
serveru a data je nutné stahovat.
připojení.
OMEZENÉ MOŽNOSTI VÍCE MOŽNOSTÍ
Využití možností zařízení Nelze využívat všech technologií, Lze využít všech technologií a funkcí,
které zařízení nabízí, např. kamera. které zařízení nabízí.
TABULKA 1 Srovnání vhodnosti využití mobilního webu versus mobilní aplikace.
4.1 Nižší finanční náklady
Náklady potřebné na vytvoření a správu mobilní aplikace a mobilního webu jsou velice odlišné.
Bereme v úvahu fakt, že drtivá většina současných firem vlastní „klasický“ web.
4.1.1 Mobilní aplikace
V případě mobilní aplikace je nutné vytvořit koncept a zcela nové řešení. Na dnešním trhu
mobilních zařízení jsou tři dominantní platformy, pomocí kterých lze pokrýt většinu uživatelské
komunity. Konkrétně se jedná o:
 Symbian,
 Android
 iOS (iPhone, iPad)
10 / 36

7. Best practices pro mobilní web v oboru transport
7.1.1 Špatné příklady hlavní navigace
OBRÁZEK 14Navigace na mobilní verzi webu FedEx je dostupná na dvou místech – po rozbalení
menu Nabídka a ve spodu stránky.
Navigace musí být v rámci mobilního webu konzistentní a neměla by se zbytečně opakovat.
V případě, že je prostor stránky věnovaný především obsahu, vhodnějším způsobem je umístit
položky navigace do spodu stránky s odkazem v hlavičce, který uživatele automaticky na tuto
navigaci přesune.
V případě, že prostor na stránce je, není potřeba navigaci schovávat do rozbalovací nabídky nebo ji
opakovat.
21 / 36

8. Best practices pro mobilní web v oboru transport
Autor studie
ExperienceU
ExperienceU je specializovanou UX divizí společnosti Dobrý web, s.r.o.
Hlavní autor studie
MICHAL MAŇÁK
UX konzultant
Michal se specializuje na návrh webových stránek a aplikací pro klasické
počítače a mobilní zařízení. Pro Michala jsou nejdůležitější uživatelé – stará se o
kvalitu obsahu webů, ale i o různé formy uživatelského výzkumu, například s
využitím webové analytiky. Michal je držitelem certifikátu systému Google
Analytics.
Michal začínal jako webový vývojář a kodér, proto klade vysoké nároky na přístupnost webů.
Klienti, pro které Michal pracuje či pracoval
Publikační činnost
 Navrhování webů s využitím metody design studio
33 / 36

9. Best practices pro mobilní web v oboru finance
ExperienceU – přední česká agentura v oblasti user experience
Zlepšujeme konverzní poměr a obchodní výsledky vašeho webu. Umíme navrhnout špičkové
uživatelské rozhraní pro vaše aplikace.
Analýza použitelnosti
Dodáme vám návrhy na vylepšení uživatelské zkušenosti z vašeho produktu a pomůžeme tak
podpořit vysokou spokojenost zákazníků.
 Uživatelské testování použitelnosti,
 Testování oční kamerou,
 Expertní hodnocení,...
Uživatelský výzkum
Důkladná analýza a interpretace zjištění s ověřitelnými výstupy.
 Individuální a skupinové rozhovory,
 Cardsorting,...
Interakční design
Špičkový design odzkoušených specialistů nebo koučování a poradenství pro vaše vývojové týmy.
 Design na zakázku,
 Workshopy interakčního designu,...
Školení a workshopy
 Veřejná UX školení a workshopy,
 Individuální firemní UX školení a workshopy,...
34 / 36

10. Best practices pro mobilní web v oboru finance
Profesionální usability lab
Jedna z nejmodernějších laboratoří pro uživatelský výzkum v Česku. Špičková monitorovací
technika pro přenos videa a audia, možnost simultánního překladu, pozorovací místnost pro 10
osob, 2 testovací místnosti. Nyní máte možnost využít tyto možnosti i pro vaši firmu.
 2 oddělené testovací místnosti.
 Špičková monitorovací technika
pro přenos videa a audia ve
špičkové kvalitě v reálném čase.
 Zařízení pro testování práce
s mobilním zařízením.
 Dálkově ovládaný kamerový
systém.
 Všesměrové i směrové mikrofony
pro zajištění přenosu zvuku ve
špičkové kvalitě.
 Pozorovací místnost pro 10
pozorovatelů.
 2 projekční oblasti (projekční
plátno a LCD obrazovka)
s možností volby libovolného
obrazu.
 Možnost přenosu libovolné
zvukové stopy do celé místnosti či
do sluchátek.
 Místnost pro simultánního
překladatele a zajištění
simultánního překladu.
 Možnost současného překladu do
více jazyků.
 Stěna pro rychlý návrh, tvorbu skic
apod.
35 / 36

11. Best practices pro mobilní web v oboru finance
Kontakty
Základní kontakty
EXPERIENCEU
UX divize společnosti Dobrý web, s. r. o.
Milady Horákové 116/109, 160 00 Praha 6
tel:+420 277 004 688, fax:+420 277 004 601
web: www.experienceu.cz
e-mail: info@experienceu.cz
Fakturační adresa
EXPERIENCEU
UX divize společnosti Dobrý web, s. r. o.
Milady Horákové 116/109, 160 00 Praha 6
IČ: 24724505, DIČ: CZ24724505 (jsme plátci DPH)
Bankovní spojení – Komerční banka Praha, č. ú.: 43-7835420267/0100
Autorská práva
Tento dokument byl vytvořen pro účely projektu WebTop100. Autorská práva náleží ExperienceU,
bez jehož písemného souhlasu není možné dokument zveřejnit ani dále šířit jiným způsobem.
36 / 36