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ý?

Dostupná na www.slideshare.net/honzahommer/mobiln-een.

Nejsme „kolbenka“, jsme Forresti. Přijď se přesvědčit osobně!

P.S.: Prsa výhodou!

Máte zájem seznámit se blíže s naší prací? Pořádáte výběrové řízení na služby v oblasti internetu? Máte jakýkoli dotaz či připomínku? Budeme rádi, když nám napíšete.

www.symbio.cz/kontakt.html

Giant intercative

Máte zájem seznámit se blíže s naší prací? Pořádáte výběrové řízení na služby v oblasti internetu? Máte jakýkoli dotaz či připomínku? Budeme rádi, když nám napíšete.

http://www.giant.cz/kontakt/

Webdesign Michal Svoboda

Máte zájem seznámit se blíže s naší prací? Pořádáte výběrové řízení na služby v oblasti internetu? Máte jakýkoli dotaz či připomínku? Budeme rádi, když nám napíšete nebo zavoláte

http://www.crnet.cz/michal/index.php?idstr=4

Hell Solutions s.r.o.

Máte zájem se seznámit s naší prací blíže? Pořádáte výběrové řízení na služby v oblasti internetu? Máte jakýkoli dotaz či připomínku?

http://www.hellsolutions.cz/kontakt.html

Pojmem vše jsem zdaleka nemyslel jen web – stejně jako u webu, kdy můžeme testovat skici, wireframy, interaktivní prototypy, grafiku, HTML šablony či hotový web, tak můžeme v běžném životě testovat třeba… Lahev vína.

Nevěříte? Proč ne? Otestujte si jí sami. Vyhovuje vám design láhve? Najdete na etiketě snadno veškeré informace? Chutná vám obsah?

I toto je testování!

Bavme se o webu

Dokonalý web nikdo nikdy nenavrhne napoprvé! Věděli jste, že odhady chování uživatelů jsou ze 75% špatné? A že… Ne? Už to víte!

Nebojte se lidí, kteří zastávájí názor, že si uživatel zvykne na vše, poslat… Víte kam!

Web optimalizujeme pro lidi, ne pro nás – UX designéry, grafiky, kodéry, programátory nebo dokonce obchodníky!

Záleží, co testujeme

Vždy je důležité si uvědomit, co testujeme. Budeme-li testovat pouze grafický návrh, těžko testerům poručíme, aby si zkusili vyplnit formulář. Že přeháním? Malinko. Ale je to tak.

•  Budeme-li testovat grafiku, zadáme úkol: „Kam kliknete, chcete-li se dozvědět informace o naší pobočce?“
•  Budeme-li testovat funkční web, zadáme úkol: „Najděte více informací o naší pobočce!“

Odhalíme chyby

Každé uživatelské testování vám chyby odhalí. Co vám však neprozradí je, jak chyby napravit.

Myslíte si, že pokud polovina testerů zvládne úkol na 100% je statistika úspěšnosti 50%? Mýlíte se! Ani statistiku úspěšnosti se z uživatelského testování nedozvíte.

Kdy testovat

V každé fázi projektu.

Čím více testování, tím více Adidas tím lepší výsledek. Pamatujte si, že 2 testování po 3 lidech jsou lepší, než 1 testování s 8 lidmi. Věřte mi, je to dokázáno!

Moudro na závěr

Testujte!

Díky moc Ladě za zlidštění změti technicistních pojmů. Článek je dostupný i on-line na stránkách TREND Marketingu.