Best practices pro mobilní web v oboru IT
- 1. Best practices pro mobilní web v oboru IT Best practices pro mobilní web v oboru IT ExperienceU 11.5.2012 1 / 34
- 2. Best practices pro mobilní web v oboru IT 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 16 6 Současná situace v České republice 17 7 Dobré a špatné příklady 19 7.1 Navigace 19 7.1.1 Špatné příklady hlavní navigace 19 7.1.2 Dobrý příklad hlavní navigace 21 7.1.3 Špatné příklady dalších navigačních prvků 22 7.1.4 Dobré příklady dalších navigačních prvků 23 2 / 34
- 3. Best practices pro mobilní web v oboru IT 7.2 Vstupní formuláře 23 7.2.1 Špatné příklady rozložení vstupních formulářů 24 7.2.2 Dobrý příklad rozložení vstupních formulářů 25 7.2.3 Špatné příklady využití typů vstupních formulářů 25 7.2.4 Dobrý příklad využití typů vstupních formulářů 26 7.3 Obsah/kontext 26 7.3.1 Špatné příklady formy prezentování obsahu/kontextu 27 7.3.2 Dobré příklady formy prezentování obsahu/kontextu 29 8 Doporučení 30 Autor studie 31 ExperienceU 31 Hlavní autor studie 31 ExperienceU – přední česká agentura v oblasti user experience 32 Kontakty 34 Základní kontakty 34 Fakturační adresa 34 Autorská práva 34 3 / 34
- 4. Best practices pro mobilní web v oboru IT 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ří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. 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ější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 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 / 34
- 5. Best practices pro mobilní web v oboru IT 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 10 IT firem. 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ů. IT FIRMY VE VĚTŠINĚ ZKOUMANÝCH PŘÍPADŮ NEMAJÍ WEB OPTIMALIZOVANÝ PRO MOBILNÍ ZAŘÍZENÍ. 5 / 34
- 6. Best practices pro mobilní web v oboru IT 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 / 34
- 7. Best practices pro mobilní web v oboru IT OBRÁZEK 15 Navigace na mobilní verzi webu Siemens. Navigace na mobilní variantě webu Siemens nabízí uživatelům dostatek prostoru pro přístup do požadované sekce. Jednotlivé položky jsou nejen dostatečně velké, ale také od sebe jednotlivě oddělené. 7.1.3 Špatné příklady dalších navigačních prvků OBRÁZEK 16 Seznam odkazů na mobilní verzi webu IBM Česká republika. V případě, kdy je vhodné uživateli nabídnout v rámci aktuální stránky další obsah, např. formou rozcestníku, jednotlivé položky musí dodržovat doporučená pravidla o rozměrech a rozložení. 22 / 34
- 8. Best practices pro mobilní web v oboru IT 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 31 / 34
- 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,... 32 / 34
- 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. 33 / 34
- 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. 34 / 34