Best practices pro mobilní web v oboru transport

  • 484 views
Uploaded on

 

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
484
On Slideshare
0
From Embeds
0
Number of Embeds
4

Actions

Shares
Downloads
0
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Best practices pro mobilní web v oboru transportBest practices promobilní webv oboru transport ExperienceU 11.5.2012 1 / 36
  • 2. Best practices pro mobilní web v oboru transportObsahObsah 21 Manažerské shrnutí 41.1 Web versus aplikace, separátní verze versus responsive design 51.2 Stav mobilního webu je tristní 52 Specifika mobilního webu 63 Mobilní trendy 83.1 Vývoj trhu mobilních zařízení 83.2 Mobilní internet a online aktivity 84 Mobilní web versus mobilní aplikace 94.1 Nižší finanční náklady 10 4.1.1 Mobilní aplikace 10 4.1.2 Mobilní web 114.2 Jednoduchý způsob, jak začít s mobilní variantou 114.3 Rychlejší aktualizace a úpravy 114.4 Více uživatelů na větším počtu zařízení 125 Řešení mobilního webu 135.1 Separátní mobilní verze 145.2 Responsive design 155.3 Spojení responsive design a separátní mobilní verze 176 Současná situace v České republice 187 Dobré a špatné příklady 207.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 transport7.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ářů 287.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 318 Doporučení 32Autor studie 33ExperienceU 33 Hlavní autor studie 33 ExperienceU – přední česká agentura v oblasti user experience 34Kontakty 36Základní kontakty 36Fakturační adresa 36Autorská práva 36 3 / 36
  • 4. Best practices pro mobilní web v oboru transport1 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 zchytrý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 2012Narů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 internetuNejrů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íchtelefonů. ODHADUJE SE, ŽE V ROCE 2012 PRODEJ CHYTRÝCH TELEFONŮ PŘEVÝŠÍ PRODEJ KLASICKÝCH POČÍTAČŮ.1OBRÁ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 transport1.1 Web versus aplikace, separátní verze versus responsive designPř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 JEJICHPOUŽ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 sepřepravou osob či věcí. Zjištění byla neuspokojivá, v současné době má web optimalizovaný promobilní 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 transportKrité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í proUž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í aPotř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 transport7.1.1 Špatné příklady hlavní navigaceOBRÁ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ístitpoložky navigace do spodu stránky s odkazem v hlavičce, který uživatele automaticky na tutonavigaci přesune.V případě, že prostor na stránce je, není potřeba navigaci schovávat do rozbalovací nabídky nebo jiopakovat. 21 / 36
  • 8. Best practices pro mobilní web v oboru transportAutor studieExperienceUExperienceU 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 pracovalPublikační činnost  Navrhování webů s využitím metody design studio 33 / 36
  • 9. Best practices pro mobilní web v oboru financeExperienceU – přední česká agentura v oblasti user experienceZlepš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žitelnostiDodáme vám návrhy na vylepšení uživatelské zkušenosti z vašeho produktu a pomůžeme takpodpořit vysokou spokojenost zákazníků.  Uživatelské testování použitelnosti,  Testování oční kamerou,  Expertní hodnocení,...Uživatelský výzkumDů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 financeProfesionální usability labJedna 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 10osob, 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 financeKontaktyZákladní kontaktyEXPERIENCEUUX divize společnosti Dobrý web, s. r. o.Milady Horákové 116/109, 160 00 Praha 6tel:+420 277 004 688, fax:+420 277 004 601web: www.experienceu.cze-mail: info@experienceu.czFakturační adresaEXPERIENCEUUX divize společnosti Dobrý web, s. r. o.Milady Horákové 116/109, 160 00 Praha 6IČ: 24724505, DIČ: CZ24724505 (jsme plátci DPH)Bankovní spojení – Komerční banka Praha, č. ú.: 43-7835420267/0100Autorská právaTento 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