Selainpohjaisia, HTML5-teknologialla toteutettuja mobiilipalveluita puolletaan kustannustehokkuutensa, suoraviivaisuutensa ja alustariippumattomuutensa vuoksi. Samaan aikaan suurin osa mobiilipalveluista toteutetaan edelleen natiivisovelluksina. Suurista toimijoista Facebook on valinnut tämän lähestymistavan, kun taas esimerkiksi Guardian ja LinkedIn luottavat sovelluskehityksessään HTML5:een.

Kysymys kuuluukin, kumpi vaihtoehto sopii tarpeisiisi paremmin? Vastaus on hyvin tapauskohtainen ja siksi keräsimmekin ajantasaisia näkemyksiä aiheesta niin ostajan kuin loppukäyttäjänkin näkökulmasta.

Selainpohjainen HTML5-sovellus

Ostajan plussat:
- Kehitys on nopeampaa ja suhteessa halpaa aloittaa.
- Yksinkertainen sisältö on helppo optimoida eri päätelaitteille.
- Kehitysvaiheessa voidaan testata rinnakkain kaikilla alustoilla.
- Ei sitoutumista laitevalmistajien käyttöehtoihin. 
- Prototyyppien rakentaminen nopeaa. 

Ostajan miinukset:
- Monimutkainen sisältö on haastavaa optimoida kaikille päätelaitteille, sillä eri puhelinten selaimet eivät vieläkään noudata kaikkia standardeja (yli 200 erilaista yhdistelmää). Tällainen teknologiapirstaloituminen voi koitua suuren projektin kohdalla yllättävän kalliiksi.
- Palvelun käyttöliittymäsuunnitteluun voi palaa aikaa, sillä alustakohtaisten suositusten puute ja mitä vaihtelevimmat näyttökoot asettavat suunnittelulle omat haasteensa.
- Sovellus ei voi jatkaa toimintaansa silloin, kun käyttäjä tekee puhelimellaan jotain muuta.
- Ei mahdollisuutta viestintään sovelluksen ulkopuolella.
- Ei mahdollisuutta päästä käsiksi kaikkiin puhelimen fyysisiin ominaisuuksiin.
- Tietoturvariskit.

Käyttäjän plussat:
- Ei applikaation asennusvaihetta.
- Toimii suoraan selaimessa.
- Ei erillistä päivitystarvetta.

Käyttäjän miinukset:
- Käyttökokemus ei yllä aivan natiivisovellusten tasolle.
- Alustariippumattoman ja käyttäjälle uuden käyttöliittymän oppimiskynnys on korkeampi.
- Vaativammat animaatiot ja muut efektit on syytä yhteensopivuusongelmien vuoksi jättää pienemmälle.
- Turhat selainpalkit syövät näyttöpinta-alaa.
- Offline-ratkaisun tekeminen on hankalampaa. Tämän vuoksi palvelun nopeus nojaa pitkälti internet-yhteyden nopeuteen.

Natiivisovellus

Ostajan plussat:
- Uudet innovaatiot puhelimissa ja käyttöliittymäversioissa ovat heti kehittäjän saatavilla ja heidän kannaltansa mietittynä.
- Rahanteon helppous. Applen App Store on Internetin suurin kauppapaikka (400 miljoonaa maksuvalmista käyttäjää).
- Kehitystyökalut tarjoavat paljon valmiita käyttöliittymäkomponentteja, joiden käyttöönotto on helppoa ja toiminta varmaa.
- Haastavimmissakin projekteissa pakka pysyy hyvien kehitystyökalujen ansiosta kasassa. Suurempien projektien kohdalla tämä tarkoittaa monesti selviä kustannussäästöjä.
- Sovelluskauppojen tuomat edut kuten top-listat ja helppo palautteen kerääminen.
- Hyvä tietoturva. 

Ostajan miinukset:
- Aloituskustannukset. Pelkästään projektin pystyttämiseen eri alustoille menee tietty aika.
- Monen version ylläpito ja kehitys on yksinkertaisesti kalliimpaa. 

Käyttäjän plussat:
- Alustakohtainen kehitys takaa parhaan käyttökokemuksen sekä toimintavarmuuden.
- Käyttäjä oppii ja käyttää sovellusta nopeimmin, kun juuri hänet on huomioitu suunnitteluvaiheessa tietyn puhelinmallin käyttäjänä.
- Toimii taustalla.
- Nopea pääsy sovellukseen.
- Sovellus toimii tarvittaessa ilman internet-yhteyttä. 

Käyttäjän miinukset:
- Sovelluksen lataus.
- Sovelluksen päivittäminen.

Summa summarum

Mikäli palvelusi on yksinkertainen tai päivittyy usein, käyttäjilläsi on paljon erilaisia päätelaitteita ja budjetti tiukalla, HTML5-pohjaisuus on todennäköisesti hyvä lähtökohta. Jos taas palvelu on monimutkaisempi, havittelet paljon uskollisia käyttäjiä tai haluat tarjota vain parasta – sitouta heidät natiivisovelluksen turvin.

Hyvänä kompromissivaihtoehtona toimvat myös hybridisovellukset, joissa HTML5-koodia voidaan yhdistellä natiivielementtien kanssa ja lopputuloksena synnyttää ihan ns. "oikeantuntuisia" sovelluksia sovelluskauppoihin.

Panosta yhteistyöhön yrityksen kanssa, joka osaa (ja haluaa) neutraalilta pohjalta kertoa, millainen ratkaisu missäkin kohdassa on budjetin sekä palvelun luonteen valossa se järkevin. Taiste on harjaantunut molempien vaihtoehtojen toteuttajana, minkä vuoksi voimme lähestyä asiaa rehellisesti asiakkaan näkökulmasta.

Muista myös, että onnistuneen mobiilipalvelun suunnitteluun vaikuttavat muutkin asiat kuin teknologiavalinnat. Mikään valinta ei tuota hyvä tulosta, mikäli hyvään käyttöliittymään, käytettävyyteen tai sovelluksen idean selventämiseen ole käytetty riittävästi aikaa.

QR-koodien käyttö mobiilissa kaupankäynnissä on älypuhelimien suosion myötä kovassa kasvussa. Erään arvion mukaan erilaisia QR Pop-Up -kauppoja on tänä vuonna ollut eri puolilla maailmaa yli 300. Ensi vuonna luvun odotetaan lähes kymmenkertaistuvan.

Tietotekniikkaan erikoistunut nettikauppa Jimm's halusi olla Suomessa ensimmäisten kokeilijoiden joukossa. Saimme haasteeksemme suunnitella mahdollisimman yksinkertaisen ja mutkattoman mobiilin tilausnäkymän, joka kertoo skannatun tuotteen lisätiedot, kokonaishinnan ja auttaa tilauksen viimeistelyssä. Kaikki tämä yhden näkymän voimin, mahdollisimman vähin täppäyksin ja hyvällä käyttökokemuksella.

Konseptissa ostaja lukee QR-koodin puhelimellaan, täyttää yhteystietonsa (tai vastaavasti hakee olemassaolevat tietonsa järjestelmästä) ja lähettää tilauksen. Tekstiviesti kertoo, koska tavara on noudettavissa Itellan pakettiautomaatista. Asiakas syöttää saamansa koodin automaattiin, maksaa ostoksen ja saa paketin käteensä.

Itse kauppatauluja oli yhteensä 100 eri puolilla Helsingin metroasemia ja pysäkkejä. Skannauksia ensimmäisellä viikolla tuli yli 500 ja kiitosta tuoreesta ideasta sitäkin enemmän. Katso myös Shop2Mobin tuore listaus Top 10 QR-kaupoista.

"Uuden palvelun kehittäminen Taisteen kanssa oli meille todella helppoa. Heidän innovatiivinen ja innostunut näkemys mobiilikaupankäyntiin toi meille ratkaisun useisiin avoimiin kysymyksiin jo ennen kuin edes osasimme sitä itse kysyä"

Antti Järvinen / Toimitusjohtaja / Jimm's

Alkava talvi on pitänyt taistelaisia sopivan kiireisinä. Yhtenä syynä ovat olleet Itiksen mobiilisovellukset, joita olemme suunnitelleet yhdessä mainostoimisto Dynamon ja Itiksen oman väen kanssa.

Pohjoismaiden suurin kauppakeskus on ollut massiivisen uudistamisprosessin alla jo vuoden alusta asti. Uudistuksen myötä kauppakeskuksen ilme, tilat sekä liikevalikoima kokevat suuren kasvojenkohotuksen. Uudistuksen myötä julkaistaan myös mobiilisovellukset kolmelle eri alustalle ja kolmella eri kielellä.

Sovelluksen pääasiallinen tarkoitus on helpottaa kauppakeskuskävijää löytämään liikkeet sekä palvelut ja informoimaan näiden palvelutarjonnasta, tarjouksista ja kaikesta siitä, mitä aktiivisessa kauppakeskuksessa on meneillään.

Käyttäjäni, missä menet?

Itis on kauppakeskuksena niin laaja, ettei edes vakiokävijälle ole mitenkään itsestään selvää, mitä kaikkea se pitää sisällään. Tämän pulman pohjalta olikin luontevaa lähteä suunnittelemaan palvelua kävijän sen hetkisten tarpeiden, sisätilakartan sekä käyttäjän sijainnin ympärille.

Sovelluksella on käytännössä kaksi pääasiallista käyttöskenaariota – käyttäjä joko on tai ei ole kauppakeskuksessa. Mikäli hän on jo paikan päällä, hänellä on todennäköisesti jo jokin syy ja päämäärä olemassa. Tällaisessa tapauksessa esitettävää informaatiota on syytä suodattaa jonkin tietyn tiedon, vaikkapa liikkeen tarkan sijainnin, löytämisen nopeuttamiseksi. Mikäli käyttäjä taas ei ole paikan päällä, hänellä ei välttämättä ole päämäärää, hän toivoisi inspiroituvan tai suunnitella tulevaa käyntiään esimerkiksi tarkistamalla liikkeen aukioloajan tai mahdollisia tarjouksia. Tällöin on jopa toivottavaa nähdä sisältöä, jota palvelusta ei osaa itse etsiä.

Käyttäjäni, mitä haluat?

Miten ennustaa mitä erilaisten ja eri tilanteissa olevien käyttäjien mielessä milloinkin pyörii? Älypuhelinaikakautena on muodikasta paikantaa, ennustaa ja laskea käyttäjän todennäköisiä tarpeita, mutta miksemme voisi olla välillä hieman vanhanaikaisia, samalla hieman kustannustehokkaimpia ja yksinkertaisesti kysyä tätä suoraan?

Päädyimme ratkaisuun, jossa ensikäynnistyksen yhteydessä kysytään, mitä käyttäjä haluaa nähdä. Tämän jälkeen toivotut asiat listautuvat päänäkymään ja elävät jatkossa käyttäjän valitseman kiinnostuksen kohteen mukaan. Mikäli käyttäjää kiinnostaa esimerkiksi muoti, palvelu listaa vain muotiliikkeet sekä listaksi että merkeiksi kartalle. Jos taas tarjoukset, sama logiikka: listaus, sekä näiden sijainnit kartalla.

Kartta osana käyttöliittymää

Kauppakeskuksen kaltaisen fyysisen ympäristön kohdalla on luontevaa lähteä miettimään myös karttaa osana käyttöliittymää, eikä vain käyttää sitä asioiden esittämiseen. Uskallamme myös väittää, että käyttäjän itsensä suodattama tieto sekä selkeänä listauksena, että sijaintina kartalla auttavat olennaisesti löytämään lähes 200:n kaupan, palvelun tai ravintolan seasta enemmän ja helpommin kuin perinteinen hakutoiminnallisuus. Kartasta löytyy myös paikannustoiminto, joka helpottaa liikkeiden (ja itsensä) löytämistä.

Liikkeen omalle sivulle on myös syytä päästä sekä kartalta, että listauksesta. Tämä Foursquarestakin tuttu konventio alkaa olemaan ihmisille niin tuttu, että logiikka on syytä pitää nopean oppimiskynnyksen vuoksi vastaavana tai vähintään samankaltaisena. Uudistuksen aikana kauppakeskuksessa on myös paljon työn alla olevia alueita, jotka haittaavat kulkua tai hämäävät kävijää. Karttaa käytetään myös viestimään näistä erikoisalueista omalla huomiovärityksellään.

Yksinkertaisuuden voima

Käytimme myös sovelluksen visuaaliseen ilmeeseen paljon aikaa. Yksinkertaistimme karttaa (karttakomponentista kiitos Whatamapille) karsimalla siitä kaiken turhan informaation pois, säädimme sävyt siten, ettei se huuda liikaa, vaan välittää suurpiirteisen mutta kuitenkin ymmärrettävän kuvan pohjapiirrustuksesta. Näin ollen itse kaupat, palvelut, wc:t, hissit ym. on helpompi ja nopeampi havaita.

Itiksen rikkaasta väripaletista riitti myöskin sävyjä määrittelemään tietyt kategoriat omilla sävyilään. Näin ollen esimerkiksi limen vihreä kertoo kautta palvelun kyseessä olevan ravintolaan liittyvä painike, merkintä tai muu vastaava toiminto.

Noin muuten noudatimme Itiksen minimalistista ja raikasta ilmettä. Annoimme paljon tilaa hienostuneelle typografialle sekä hyvälle luettavuudelle mutta huomioiden kuitenkin jokaisen puhelinalustan omat erityispiirteet. Selkeitä kontrasteja, vähäeleisiä animointeja, ei turhia liukuvärejä tai koristeita. Vähemmän on tässäkin tapauksessa enemmän.

Sovellus saatavissa nyt iPhonelle, myöhemmin myös Androidille sekä Windows Phonelle.

Olemme viime syksystä lähtien päässeet ihmettelemään Microsoftin uutta ihmelasta, Windows Phonea. Sen tarkoitus on löytää käyttäjänsä yksinkertaistetulla käyttöliittymällä ja hauskalla tavalla kertoa se oleellisin informaatio. No, millaista elämä tämän iPhonen tappajan kanssa nyt sitten on? Seuraa pieni katselmustuokio kolmesta eri vinkkelistä.

Käyttäjälle

Windows Phonen uusi käyttöliittymä on revitty aiempiin versioihinsa verrattuna auki niin perusteellisesti, että 2010-luvun synnyttämän informaatioähkyn ja jatkuvan interaktion keskellä elävän käyttäjän tarpeisiin on voitu vihdoin vastata täsmällisemmin ja käyttäjän itsensä säätämällä volyymilla. Käyttökokemuksessa on erityisesti panostettu mm. siihen, että puhelin on 1) henkilökohtainen ja keskittyy yksilön tarpeisiin 2) aina relevantti ja informatiivinen 3) aina yhteydessä ympärillä oleviin laitteisiin ja palveluihin.

Tämän tasoisen uudistuksen myötä on myös selvää, että käyttäjä pakotetaan monelta osin uusiin konventioihin vaikka puhelimella tehtävät asiat säilyisivätkin osin samoina. Poissa ovat aloitusnäkymän pienet ja staattiset applikaatioikonit. Poissa on kiilto, liukuvärit ja pseudorealistinen grafiikka. Poissa on ylipäänsä  kaikki se paljous pienessä tilassa. Tilalla ovat yksinkertaiset mutta kääntöpuolelta relevanttia informaatiota tarjoilevat applikaatiotiilet. Tilalla ovat minimalismi, selkeät värit ja suuri typografia. Tilalla ovat näkymien laaja-alaisuus ja suuri sulava liike!

Vaikka vaakasuuntainen pyyhkiminen navigaation peruspilarina saattaakin tuntua oudolta, on yllättävää miten luonnolliselta se alkaa pian tuntumaan – eikä ihme, olemmehan jo vuosikaudet tottuneet katselemaan samankaltaisia kamera-ajoja elokuvissa ja odottamaan tarinalle jatkoa oikealta, varsinkin näin länsimaissa. Muutaman päivän käytön jälkeen on jo itsestäänselvää, ettei sovelluksen aloitusnäkymä ole välttämättä vain yksi ruutu vaan panoraama useammasta asiasta yhdessä.

Mielestämme Microsoftin ja Nokian uuden yhteistyön ensimmäinen hedelmä, Lumia 800 on yksi parhaita käyttämiämme puhelimia. Siinä yhdistyvät visuaalinen näyttävyys, hyvä käytettävyys ja tekninen suorituskyky tavalla, josta moni kilpailija voi ottaa mallia.

Suunnittelijalle

On sanomattakin selvää, että minimalismista, kauniista typografiasta ja sveitsiläisestä graafisesta tyylistä nauttivat suunnittelijat ovat kuin kotonaan Metron design-kielen kanssa. Ja vaikkei informaatiografiikasta ja piktogrammeista inspiroitunut visuaalinen ilmaisu olisikaan niitä omimpia, on Microsoftin huolella suunniteltujen lähtökohtanäkymien ja hyvin dokumentoitujen ohjeistusten päälle helppo lähteä rakentamaan toimivaa ja tyylikästä sovellusta.

Perusteellisen Metro-opiskelun ja ensimmäisten kokeilujen jälkeen saattaa suunnittelijasta helposti tosin tuntua, että kaikista applikaatioista lähtee tiukkojen ohjeistusten kautta syntymään väkisinkin samankaltaisia vain pienin väri- ja sisältömuutoksin. Tämä on käyttökokemuksen kannalta erittäin hyvä asia verrattuna esim. Android-maailman liikaan vapauteen, joka johtaa harmittavan usein siihen, että käyttöliittymät lähtevät monilta käsistä ja alustaan sekä itse puhelimeen sidottu yhdenmukaisuus loistaa poissaolollaan. Lopputuloksena nähdään hämmentyneitä käyttäjiä, jotka eivät osaa käyttää jatkuvasti logiikoiltaan vaihtelevia sovelluksia.

Tiukkoihin raameihin kannattaa Metro-maailmassa suhtautua kuitenkin vain aloituspisteenä; kun oppii puhumaan sitä kielenä, on helppo huomata miten inspiroivan lähtökohdan se tarjoaakaan mitä erilaisimmille kokemuksille ja kertomuksille; Valokuvan, grafiikan ja brändin läsnäolon voi virittää suuremman pinta-alan johdosta aivan eri tasolle, puhelimen omassa Segoe-kirjasimessa tai kaikissa marginaaleissa ei tarvitse aina pysytellä ja esim. animoinnit voi rakentaa haluamallaan tavalla uniikin kokemuksen luomiseksi.

Kaiken kaikkiaan suunnittelijalle on onnistuttu rakentamaan erittäin hyvä hiekkalaatikko onnistuneiden ja ilahduttavien sovellusten luomiseksi. Suurena plussana mainittakoon myös harvinaisen omistautunut Windows Phonen Design Team joka jakaa jatkuvasti näkemyksiään mm. Twitterissä.

Kehittäjälle

Sovelluskehitykseen tarjotut työkalut ovat todella hyvät ja kun niiden kanssa pääsee sinuiksi, tuottavuus on aivan omaa luokkaansa. Reactive Extensions ja Async CTP-kirjastot tuovat uutta sähäkkyyttä ohjelmiston arkkitehtuurin suunnitteluun. Osaavissa käsissä niiden avulla saadaan tehtyä suorituskykyistä ja helposti ylläpidettävää koodia nopeasti suhteessa perinteisiin tekniikoihin. Tämä tietää kustannussäästöjä siis myös asiakkaan näkökulmasta.

Uudet tekniikat ja niiden tuomat mahdollisuudet näkyvät myös käyttäjälle. Latausruutuja ei enää tehdä erikseen siten, että sovelluksen kanssa ei pääse toimimaan samaan aikaan, vaan lataus tapahtuu taustalla sovelluksen ollessa koko ajan vasteikkaan tuntuinen.

Uuden Windows Phone-sovelluksen suunnittelussa pitää ottaa huomioon tarkat Microsoftin sanelemat ehdot siitä, miltä sovelluksien tulisi näyttää. Olemme olleet mukana partneriohjelmassa, jossa ideana on vieläkin tarkemmin syynätä sovellus läpi ja varmistua siitä, että kaikilta osin sovellus täyttää sille asetetut vaatimukset. Kehittäjän näkökulmasta korjauskierrokset olivat haastavia, mutta samalla opettivat todella paljon siitä, miten hyviä Windows Phone-sovelluksia tehdään. Hyviä kehitysvinkkejä löytyy myös Windows Phone Developer Blogista.

Partneriohjelmassa tai ei, jokainen muutos, joka tehdään ohjelmistoon tai ohjelmiston tietoihin menee aina Microsoftin sertifioinnin läpi ennen päivitysten päätymistä Marketplaceen. Tähän prosessiin on hyvä varata noin viikko per päivitys. Tämän lisäksi päivitysten hyväksymisen jälkeen kuluu vielä pari päivää, että ohjelmiston uusin versio on päivittynyt läpi Marketplacen ja löytyy hakutuloksista. 

Entä sitten?

Nokia ja Microsoft ovat nyt tulleet mukaan taisteluun älypuhelinmarkkinoiden kuninkuudesta ja yrityksen puutteesta ei todellakaan voi tätä kaksikkoa syyttää. Myös suomalaiset käyttäjät ovat havahtuneet, sillä helmikuussa 2012 Lumia 800 oli Suomen suurimpien operaattoreiden myydyin puhelin.

Jos siis mietit, mitä Windows Phone tarkoittaa bisneksellesi tai olet jo päättänyt laajentaa toimintaasi kyseiselle alustalle, ota yhteyttä.