Jak rozjet vlak z nádraží klasický web a vydat se správným směrem na dlouhou cestu do cílové stanice dokonalý mobilní web. Cesta je dlouhá, plná prudkých stoupání, nečekaných mezizastávek i sebevražedných pokusů.

Podívejme se tedy na základní principy a nástroje, které nám cestu usnadní, udělají jí více komfortní a odneseme si z ní skvělý zážitek.

Budeme se bavit o mobilních webech, aplikace jsou na tom podobně.

Nástroje

Prototypovat lze vesměs v čemkoliv, od Wordu přes Powerpoint, Axure nebo Balsamiq.

Zaměřím se však na Axure, které umožňuje stažení předpřipravených widgetů (nevím jak jsou na tom jiné nástroje, pro Balsamiq jsem něco našel na jejich blogu) pro iOs a Android, což nám prototypování značně usnadní.

Jak jsem již naznačil, pro Axure existují Widgety pro iOs a Android. U iOs se nám nabízí jak iPhone, tak i iPad. U Androidu je to trochu smutnější, jsou tam jenom nějaké základní panely.

Mnoho platforem

Základním problémem je mnoho platforem mobilních zařízeních. Mluvil jsem sice jenom o iOs a Androidu, ale potřeba je myslet i na Symbian, Windows mobile, apod.

Při navrhování je tedy potřeba myslet i na ty chudáky, kteří k příležitostnému prohlížení webu používají svoji stařičkou Nokii, kterou zdědili po dědečkovi, který za Karla IV. stavěl most z vajíček. Pro nepražáky – ten most stojí dodnes.

U mobilního webu nás zajímají primárně platformy Andorid, iOs a nový Windows Mobile. Jelikož disponují prohlížeči, které reflektují nejnovější standardy, nebude zde s optimalizací webu veliký problém.

• Nezajímá nás verze OS, web běží v prohlížeči.
• Nezajímá nás velikost rozlišení obrazovky, web se přizpůsobí 100%.

U starších platforem je to trochu problém, tam jsme rádi, aby se nám web vůbec nějakým způsobem vykreslil. Proto je nutné respektovat nějaká základní doporučení, abychom laděním webu pro různé platformy nezajistili vývojářům hezky strávený týden.

Základní doporučení

Při navrhování mobilních prototypů, které jsou podkladem k tomu klíčovému – tedy podkladem ke grafice a následnému vývoji uvádím pár základních doporučení, resp. na co by se nemělo zapomínat.

Jedno oko, jeden prst

Telefony mají malé displeje a uživatelé je ovládají jedním prstem – většinou za chůze. Pozor, ne vždy se telefony ovládají prstem, i na toto je potřeba myslet. Dotykových telefonů je nadpoloviční většina.

Rotace displeje

Uživatel si může otočit telefon o 90°, co se s webem stane pak?

Klikatelné oblasti

• Doporučená klikatelná plocha je 9mm / 34px (v obou směrech samozřejmě).
• Minimální klikatelná plocha je 7mn / 26px.
• Minimální prostor mezi elementy je 2mm/8px.
  Jedná se především o hlavní navigaci, případně tlačítka. Je zde potřeba mezi nimi udělat nějaký neaktivní prostor. Není potřeba dodržovat pokud jsou klikatelné oblasti veliké, například 44px.

Tlačítko zpět není u jednodušího webu potřeba

Uživatelé použijí to, co mají v prohlížeči, případně to hardwarové. Stejně jako u klasického webu, tak i u mobilního webu k návratu na homepage využívají logo.

U složitějších webů ano. Složitějším webem mám na mysli složitější strukturu. V některých případech se návštěvník dostane na web z vyhledávače a měl by tak mít možnost prokliknout se o úroveň výše.

Využití funkcí telefonu

U mobilního webu lze využít geolokace, orientace telefonu či digitálního kompasu.

Odkaz na klasický web

Nezapomínejme odkaz na klasický web. Na mobilní webu nemáme všechny informace a ten, kdo jich potřebuje více (naprostá menšina) bude muset zápasit s klasickým webem. Samozřejmě naším cílem je, aby tento odkaz co nejméně používali – to však neznamemá, že ho schováme :-)

Záložky nebudou fungovat

Na webu jsme zvyklí používat záložky, ty nám ve většině případů na mobilní verzi fungovat nebudou. Nejen kvůli množství textu, ale i velikosti klikatelné plochy a množstvím potenciálních “přetapů”. Dalším problémem je i variabilita tabů – tj. jsme limitováni šířkou, tím pádem je nemůžeme libovolně přidávat a měnit textaci.

Uživatelé webu skrolují

Zvlášť ti uživatelé, co mají iOs – tam je skrolování orgasmus; na Androidu je to místy slideshow. Ale ani to uživatelům nevadí. Telefony jsou zkrátka od toho. Kolikrát denně při používání aplikací telefonu skrolujete (kontakty, zprávy, email, hlavní menu)?

Neexperimentujme

Většina mobilních webů vypadá stejně. Proč? Jsou tvořeny na základě osvědčených způsobů a praktik.

Na závěr?

Očekávám vaše podněty do diskuse. Vadí vám něco na mobilních webech? Našli jste nějaký zajímavý?