Vinkkejä mobiilipalveluiden suunnitteluun
Otathan huomioon, että tämä artikkeli on yli 12 vuotta vanha, joten sisältö ja linkit eivät ole välttämättä ihan ajan tasalla. Tuoreena lukemisena samasta kategoriasta: Verkkopalveluiden alustat Suomessa - markkina alkaa kypsyä.
Perjantaina pidettiin Vierityspalkin järjestämä ”Mobiilisivustot vai responsiivinen design?” -seminaari. Seminaarin puheenjohtajana toimi Perttu Tolvanen (Projekti55 Oy). Puhujina olivat toimitusjohtaja Pyry Lehdonvirta (SC5), Lead Designer Tuukka Uskali (Sininen Meteoriitti) ja EPiServer-asiantuntija Mikko Huilaja (Sininen Meteoriitti). Seminaarin isäntänä toimi SC5 Online Oy. Seminaari järjestettiin samalla konseptilla jo toisen kerran tänä keväänä. Ensimmäisen näytöksen isäntänä toukokuussa toimi Deasign Helsinki.
Nyt järjestetty seminaarin toinen näytös otettiin myös videolle, ja videot tulevat saataville myöhemmin.
Tässä allekirjoittaneen koostama top-10 vinkkilista mobiilipalveluiden suunnitteluun perustuen seminaarin puheenvuoroihin ja paneelikeskusteluun.
- Responsiivinen ulkoasu tulisi nähdä ’kivijalkana’ verkkopalveluiden mobiilipuolen suunnittelussa. Mobiilisivustot ja -sovellukset täydentävät tätä kivijalkaa. Ensin tulisi aina panostaa laadukkaaseen responsiiviseen ulkoasuun ja sitten vasta erillisiin mobiilisivustoihin. Erillisten mobiilisivustojen tekemistä ei nähnyt kestävänä vaihtoehtoisena ratkaisuna kukaan seminaarin puhujista. Poikkeuksia tähän perussääntöön todettiin toki löytyvän, mutta nämä nähtiin selkeinä poikkeuksina perussääntöön. Lyhyesti: Responsiivinen design for the win!
- Responsiivisen ulkoasun onnistunut suunnittelu tarvitsee uudenlaisen suunnitteluprosessin. Vain photoshopissa tehtävästä käyttöliittymä- ja ulkoasusuunnittelusta pitäisi siirtyä yhä aikaisemmin työstämään toimivia HTML-versioita ulkoasusta. Vain näin voidaan suunnitella aidosti responsiivisia toteutuksia jotka toimivat eri päätelaitteilla. Käytännössä tämän mallin nähtiin menevän jopa niin pitkälle, että digitoimistojen Art Directoreiden pitäisi pystyä luovuttamaan visuaalisen ja käyttöliittymäsuunnittelun lopputuotteina responsiivisia HTML-saitteja pelkkien staattisten psd-tiedostojen sijasta (ei toki välttämättä tuotantokelpoisia html-sivustoja).
- Moni asia on vielä aika kesken, niin tekniikassa kuin käyttöliittymäkonventioiden osalta. Seminaarissa todettiinkin, että hyvän lopputuloksen saaminen edellyttää tällä hetkellä varsin paljon ”iteratiivista hinkkausta”. Tekniikat ja päätelaitteet ovat vain yksinkertaisesti jatkuvassa muutoksessa joten kovien osaajienkin on vaikea pysyä perässä. Asiakkaiden näkökulmasta katsottuna on syytä varautua siihen, että laadukas eri päätelaitteilla toimiva palvelu vaatii aikaa ja rahaa tämän ”iteratiivinen hinkkaus” -vaiheen toteutukselle.
- Responsiivisen ulkoasun ylläpidossa isoin haaste ei lopulta ole tekninen, vaan paljon enemmän painetta tulee sisällöntuotantoon. Sisällöntuottajien saatavilla olevia toimintoja julkaisujärjestelmässä on käytännössä pakko usein karsia, jotta esimerkiksi monimutkaiset taulukot ja kuvaelementit eivät riko huolella hiottua ulkoasua. Tämä asia vaatii jatkuvaa huomiota verkkopalvelun suunnittelu-, toteutus- ja käyttöönottovaiheissa. Lisäksi tämän varmistaminen on käytännössä lähes täysin asiakkaan projektipäällikön vastuulla olevaa työtä.
- Responsiivisen designin tarjoamien mahdollisuuksien suhteen kannattaa olla maltillinen. Responsiivisuuden voi “vetää överiksi” hyvin helposti. Liialliset mukautukset ja kirjavat breakpoint-säännöt voivat osoittautua todella työläiksi ylläpitää ja hallinnoida. On myös tärkeätä, että mukauttamisessa ei piiloteta sisältöjä joiltain päätelaitteilta. Seminaarissa korostettiin, että mukautumisen pitäisi olla käyttäjän kannalta mahdollisimman luontevaa eikä palvelu saisi liikaa muuntua toisenlaiseksi vaikka sitä käytettäisiin erilaisilla laitteilla.
- Responsiivinen design on enemmän kuin vain responsiivinen ulkoasu. Pelkän pinnan mukautumisen lisäksi yhä enemmän pitää huomioida myös kosketusnäytöt, joissa esim. pyyhkäisyt ja muut eleet ovat osa normaalia käyttöä. Tämä ei ehkä ole se isoin asia vielä vuonna 2012, mutta on hyvä ymmärtää responsiivinen design jo nyt laajempana asiana kuin vain verkkosivuston ulkoasun mukautumisena kapeamman näytön mobiililaitteelle. Esimerkiksi kuvagallerian järkevä mukautuminen tablettilaitteelle voi muuttaa gallerian toiminnallisuuksia varsin paljon.
- Responsiivisen designin filosofiaa eivät mitkään suositut julkaisujärjestelmät käytännössä tue tällä hetkellä. Useimpien julkaisujärjestelmien kohdalla joudutaan tekemään varsin paljon töitä jotta julkaisujärjestelmän teemakäytänteet ja sivupohjat saadaan toimimaan responsiivisuuden mukaisesti. Etenkin jos aikoo päivittää responsiivisen ulkoasun nykyisin käytössä olevan julkaisujärjestelmän (vaikkapa SharePoint tai Drupal) päälle, niin kannattaa varautua varsin työlääseen operaatioon.
- Monimutkaisten tai erityisen laajojen palvelukokonaisuuksien kohdalla voi olla myös järkevää harkita julkaisujärjestelmän jättämistä taustajärjestelmäksi täysin. Tällöin verkkopalvelun voi rakentaa enemmän sovellukseksi kuin sivustoksi, ja tällöin voi hyödyntää vapaammin HTML5:n ja muiden uusien menetelmien tarjoamia mahdollisuuksia. Tällainen malli mahdollistaa myös helpommin sisältöjen puskemisen muihin kanaviin, kuten mobiilisovelluksiin tai kumppaneiden palveluihin.
- Responsiivisen ulkoasun ylläpitäminen, testaaminen ja pienkehitys ovat merkittäviä haasteita asiakkaille. Tähän tarvitaan yhä enemmän työkaluja ja resursseja jatkossa. Esimerkiksi jotkut web-julkaisujärjestelmät (mm. EPiServer) kehittävät eri päätelaitteiden hallitsemiseksi koko ajan uusia ominaisuuksia, kuten erilaisia esikatselutoimintoja. Näiden ominaisuuksien kohdalla ei kuitenkaan olla vielä kovin pitkällä, joten testausresursseja ja ”iteratiivista hinkkausta” tarvitaan.
- Erilliset mobiilisivustot säilyvät konseptina tulevaisuudessakin, mutta niistä tulee todennäköisesti yhä enemmän natiivisovellusten kaltaisia. Erilliset mobiilisivustot eivät siis pyrikään tarjoamaan samoja sisältöjä ja toimintoja kuin varsinainen verkkopalvelu. Esimerkiksi Fonectan mobiilisovellus ei tarjoa kaikkea Fonectan tarjontaa, vaan Fonecta Caller on erillinen konsepti joka on keskittynyt tiettyihin palveluihin. Mainitun esimerkin kaltaisen tiukemman konseptoinnin ennustettiin seminaarissa yleistyvän myös mobiilisivustoissa.
Krediitit näistä vinkeistä ja suosituksista menevät seminaarin puhujille kollektiivisesti. Mahdolliset väärintulkinnat menevät allekirjoittaneen piikkiin, ja ne voi korjata kommenteissa.
Lue myös: Responsiiviset verkkosivustot Suomessa vuonna 2012
Lue lisää: Web-sovellukset – kaikki artikkelit Vierityspalkissa
Perttu Tolvanen
Perttu on Vierityspalkin päätoimittaja ja kirjoittaja.
Perttu Tolvanen on digitaalisten palveluiden suunnittelun, arkkitehtuuriratkaisujen ja kumppanivalintojen asiantuntija. Perttu on konsulttiyhtiö North Patrol Oy:n konsultti ja toinen perustaja. North Patrol on digitoimistoista ja järjestelmätoimittajista riippumaton konsulttiyhtiö, joka suunnittelee digitaalisia palveluita ja auttaa asiakkaita onnistumaan uudistushankkeissaan. Ota yhteyttä Perttuun!
10 kommenttia on “Vinkkejä mobiilipalveluiden suunnitteluun”
Kommentointi on suljettu.
Kimmo Kuisma
”1. Responsiivinen ulkoasu tulisi nähdä ‘kivijalkana’ verkkopalveluiden mobiilipuolen suunnittelussa.”
Jos responsiivinen ulkoasu nähdään suunnittelun ”kivijalkana”, ei suunnittelija mielestäni ole sisäistänyt designin tai työnsä olennaisinta sisältöä. Mobiili tai ei, responsiivinen ulkoasu on tietyn lähestymistavan, workflown ja suunnittelufilosofian lopputulos. Kivijalasta puhuttaessa tälle konseptille annetaan aivan liikaa itseisarvoa, mikä ei web-teknologioiden parissa ole ennenkuulumatonta.
Suunnittelun todelliset kivijalat löytyvät todella paljon sivuston (responsiivista) käyttöliittymää syvemmältä. Elegantti ja laadukas design on kokonaisuus, joka perustuu käyttäjien ja muiden sidosryhmien tarpeisiin ja haluihin. Näihin pyritään löytämään luonnollisen tuntuinen, miellyttävä ratkaisumalli. Tarpeet priorisoidaan ja sivuston informaatioarkkitehtuuri ja hierarkiat mietitään näitä tarpeita vastaaviksi. Ulkoasu (responsiivinen tai ei) tarjoaa ratkaisumalleille vain niiden visuaalisen ulottuvuuden ja tuo sisällön hierarkian esille visuaalisin keinoin.
Designissa on kyse kokonaisuudesta, jossa suunnittelun todelliset kivijalat löytyvät ihmisen kognition ja käytännön tilanteiden parista. HTML5:n, responsiivisen designin tai CMS:ien nostaminen ongelmien ratkaisuksi on turhaa ja itseisarvoista oli kyse sitten desktop- tai mobiilikehityksestä. Nämä ovat loppujen lopuksi vain työkaluja, joilla pyritään toteuttamaan ratkaisuja syvemmällä havaittuihin ongelmiin. Holistinen tapa suhtautua suunnitteluun on aina yksittäisiä silver bulletteja parempi ratkaisu.
Ei ”responsiivinen design for the win!”, vaan mieluummin ”user-centered design for the win!”
Perttu Tolvanen
Kiitos hyvästä kommentista Kimmo.
Seminaarin kysymyksenä oli nimenomaan vastakkainasettelu erillisten mobiilisaittien ja responsiivisen designin välillä. Olet varmasti oikeassa siinä, että tällainen vastakkainasettelu ei ole suuressa kuvassa katsottuna järkevää. Ehkä on myös liian ylevää puhua ”suunnittelusta” kun oikeampi termi varmaan olisi puhua ”teknisestä suunnittelusta” tässä yhteydessä.
Toisaalta kommenttisi loppuosan kanssa uskallan myös olla hieman eri mieltä. Laadukas design on yhtä lailla laadukasta toteutusta kuin pelkkää suunnittelua. Laadukas toteutus taas vaatii sitä, että ymmärretään niitä työkaluja mitä on tarjolla, ja suunnitellaan ratkaisuja siihen maailmaan joka meillä on käsillä juuri nyt. Joskus se todellisuuden realismi ohjaa enemmän sitä lopputulosta kuin käyttäjälähtöinen suunnitteluprosessi – ja hyvä niin silloin kun maailma muuttuu nopeasti ja teknologia on epätäydellistä – ja uskallan väittää webin olevan tällä hetkellä sellaisessa tilanteessa.
Toisen ”silver bullet” on toiselle vain hyvä ’design konventio’. Mielestäni hyvä suunnittelija hyödyntää konventioita aina kun mahdollista, mutta osaa myös erikoistilanteissa poiketa niistä. Konventiot ja erilaiset ”nyrkkisäännöt” ovat minusta keskeinen osa laadukasta designia. Ja joskus ne ovat myös teknisen toteutuksen suuntaviivoja.
En itse usko siihen, että tämä ala menisi eteenpäin vain sillä että yritetään myydä kaikkiin tilanteisiin vain enemmän suunnittelua ja käyttäjälähtöisempää otetta. Pitää olla osaamista myös sanoa mitkä tekniset ratkaisut ja konseptilliset lähestymistavat ovat ”usein soveltuvia” ja mitkä ovat ”harvemmin soveltuvia”. Ei aina ole varaa tutkia, haastatella ja iteroida erilaisia toteutusmalleja.
Käyttäjälähtöistä tekemistä voi olla myös se, että tehdään parhaalla arvauksella nopeasti jotain joka on aiemmin havaittu toimivaksi, ja kerätään palautetta sen pohjalta. Esimerkiksi minun mielestäni responsiivinen design on parempi nopean etenemisen ratkaisu kuin erillisen mobiilisivuston ratkaisu. Samalla tavalla myös CMS:n käyttäminen verkkosivuston toteutuksessa on sellainen ”hyvä nyrkkisääntö” joka useimmiten osoittautuu päteväksi periaatteeksi.
Nina Patkai
Kiitos hyvästä artikkelista! Tuli mieleen, että miten mainosbannerien myynti muuttuu responsiivisen designing myötä?
Aapo Talvensaari
Google+:n puolella tätä jo puitiin, mutta harmittaa hieman ettei tämön kirjotuksen perusteella otettu kantaa erilaisten input-laitteiden ja tapojen ymppäämiseen samaan designiin ja sen ongelmiin. Mielestäni tässä jäi hieman sellainen vaikutelma, että lopputulos oli ennalta sovittu. Mielestäni keskiössä ei ollut vastakkainasettelu vaan lähinnä responsiivisuuden esittäminen ratkaisuna. Ja tämä ob toki loistavaa myös. Lisää pohdintaa aiheesta vaikkapa täältä: bazclark.com/2012/06/adaptive-responsive-or-mobile-first/
Kimmo Kuisma
Kiitos kommentista Perttu!
Täytyy heti alkuun tarkentaa, että en millään tavalla viitannut käyttäjälähtöisellä tai käyttäjäkeskeisellä suunnittelulla perinteiseen deliverables-tapaan tehdä suunnittelutyötä. Suunnittelun pääpaino ei saisi olla dokumentaatiolla ja paperikasan pyörittelyllä, vaan toimivaan protoon on pyrittävä nopeasti. Monet puhuvat tässä yhteydessä lean-lähestymistavasta UX:n suhteen.
Sanoit, että ”Joskus se todellisuuden realismi ohjaa enemmän sitä lopputulosta kuin käyttäjälähtöinen suunnitteluprosessi”. Mielestäni näiden kahden konseptin vastakkainasettelu on turhaa. Vaikka ”todellisuuden realismi” heittäisi mitä (teknisiä tai taloudellisia) haasteita tahansa, sovellusten ja palveluiden taustalta löytyy aina todellisia ongelmia, jotka pyritään ratkaisemaan käyttäjän näkökulmasta mahdollisimman sujuvasti, rajattuja resursseja käyttäen. Osaava suunnittelija tunnistaa nuo ongelmat suunnitteluhaasteina ja kykenee luomaan niille toimivat ratkaisumallit käyttäjän kognition ja tarpeiden näkökulmasta. Todellisuuden realismin seuraaminen on tietyllä tapaa käyttäjälähtöisyyden keskeisimpiä piirteitä.
”Todellisuuden realismin” nimissä ei silti ole järkevää heittäytyä tilanteeseen, että mennään teknologian vaatimukset edellä ja laitetaan käyttäjät mukautumaan teknologian tai projektin vaatimuksiin. Käyttäjiä ei mielestäni tulee laittaa opettelemaan uusia tapoja toimia, vaan suunniteltavat ratkaisut taipuvat mukailemaan käyttäjien jatkuvasti muuttuvaa maailmankuvaa. Vaikka prototyypin kehittämisen aikana ratkaisut monesti perustuvat suunnittelijan intuitioon ja parhaisiin arvauksiin, niin oikeasti laadukas design ei jää noin subjektiivisten perustelujen varaan olipa suunnittelija sitten miten guru tahansa. ”Totuuden realismi” ei saisi sulkea pois käyttäjälähtöisen suunnittelun olennaisinta toimintatapaa – suunniteltujen ratkaisujen testaamista käyttäjillä. Hyvä design on aina iteratiivista, osallistavaa ja keskustelevaa.
Olen samaa mieltä kanssasi siitä, että käyttäjälähtöisen suunnittelutyön myyminen irrallaan on järjetöntä. käyttäjälähtöisen otteen pitäisi olla jokaisen suunnittelua lähelläkään olevan ihmisen tajunnassa jatkuvasti eikä sitä tarvitse myydä erikseen vaan se on erottamaton osa suunnitteluprosessia. Jos näin ei ole, lopputulos on valitettavan usein päälleliimatun tuntuinen. Kun mietitään responsiivista designia, niin tässähän ollaan jo liikuttu oikeaan suuntaan. Käyttäjien laitteiden eri näyttökokojen, näyttötarkkuuksien, kontekstien yms huomioiminen on osoitus siitä, että pyritään luomaan käyttäjien monipuolistuvaan toimintaympäristöön mukautuvia ratkaisuja. Suunnittelussa syntyvien ratkaisujen iteratiivinen varmistaminen palautteen kautta on tähän hyvin luonnollinen jatkumo.
Perttu Tolvanen
Aapo: Olet täysin oikeassa, että keskiössä ei ollut vastakkainasettelu, koska sitä ei käytännössä tullut. Minä tulkitsin asian niin, että erillisissä mobiilisaiteissa on vain enemmän ongelmia kuin hyötyjä. Ja tässä viittaan nyt nimenomaan siihen, että on jokin ihan erillinen m.palvelu.fi johon pusketaan sisällöt julkaisujärjestelmästä erikseen ja johon ohjataan satunnaisesti käyttäjä perustuen päätelaitetunnistukseen tai kankeaan pop-up-kysymykseen. Ainakin semman puheenvuorojen perusteella vahvistui käsitys siitä, että kyseinen malli on a) työläs tehdä usein, b) käyttäjien kannalta potentiaalisesti sekava ja c) googlen ja linkityksien kannalta ongelmallinen malli. Eli ylipäätään vaatii ylläpitoa ja hallintaa aika paljon jotta saa tehtyä hyvin. Ja kun yhdenkin hyvän saitin tekeminen on yleensä aika ison työn takana, niin harva asiakas kaipailee kahden saitin kanssa tasapainoilua muun duunin päälle vielä.
”Yhden saitin malli” ei varmasti ratkaise kaikkea, ja varmaan tähän aiheeseen on saatava jatkossa nyansseja lisää – ja teknisesti katsottuna varmaan joskus kannattaa toteuttaa ihan erillinen tablet-sivusto ja puskea se vain sitten väkisin tablettikäyttäjille (ilman mitään kyselyitä ja responsiivisia kikkakolmosia).
Kaiken tämän mobiilivouhotuksen keskellä minusta ainakin oli perjantaina mukava kuulla sen suuntaista puhetta, että responsiivinen toteutus sai yksiselitteistä kannatusta useammalta tekijämieheltä. Vaikka itse olen konsultti, niin silti mobiilipalveluiden ympärillä on minusta ollut viime aikoina aivan liikaa ”se riippuu tilanteesta” -tyyppistä viisastelua josta ei ota mitään selvää vaikka välillä luulee jostain jotain ymmärtävänsäkin.
Nyt juuri ainakin tuntuu siltä, että ”kevyen responsiivinen toteutus” on hyvä askel aloittamiselle useimmissa tapauksissa. Sitten voi hifistellä jatkokehityksenä kun perussaitti ja about kaikki perustoiminnot toimivat tärkeimmillä päätelaitteilla.
Perttu Tolvanen
Nina: Mainosbannerien maailmaa sivuttiin hieman ekassa seminaarissa. Silloin kommentoitiin lähinnä, että mainostenhallintajärjestelmät ja mainosmyynti on vielä kaukana tämän trendin perässä. HS:n Kaisa Aalto kertoi, että heillä on jo ollut caseja joissa mainos on toteutettu HTML5-toteutuksena ja näin saatu esim. iPadissa toimimaan siististi. Mutta todellisia responsiivisia mainoksia ei vielä ole käytetty. Varmaankin mainosbannereihinkin saadaan jotain breakpointteja jossain kohtaa mahdolliseksi, mutta ainakin tällä hetkellä vaikutti silti, että tämä aihe on vasta saapumassa mainospuolen ihmettelyyn.
Yksi syy erillisten mobiilisaittien houkuttelevuuteenhan on mediataloissa juuri se, että sinne on helpompi myydä mainoksia kun sitä voi käsitellä yhtenä uutena myyntikanavana eikä tarvitse muuttaa perussaitin bannerimyyntilogiikkaa mitenkään.
Vähän pelottaa ajatuskin siitä, että joku IAB ryhtyy määrittelemään mediatalojen saittien breakpointteja…
Harri Kilpiö
@Perttu: Ulkomailla näkyypi olevan jo ensimmäinen yrityskin joka tarjoaa responsiivisia mainoksia responsiveads.com käyttöön sekä aiempi prototyyppi mahdollisesta toteutuksesta ravelrumba.com/blog/responsive-ad-demos/
Aapo Talvensaari
Miksi se ei riippuisi tilanteesta? Ymmärrän toki, että kaipaat vastauksia, mutta ei tällaisiin kysymyksiin voi antaa vastausta. Jostain voi lyötyä kulma, että esim. blogityyppisiin sivustoihin responsiivinen design sopii, kuin nenä päähän, mutta aivan mahdotonta yleistää. Mielestäni kysymys ei ole mistään viisastelusta.
Vesku
Online-bannerien kohdalla responsiivisuuden puuttumiseen syy löytyy usein kampanjan tavoitteista. Responsiivisia banneritoteutuksia ei ole juuri nähty, vaikka itse media olisi jo täysin eri päätelaitteille mukautuva.
Toki on paljon mainostajia, jotka voisivat toteuttaa saman kampanjan täysin samoilla materiaaleilla yhtäaikaa eri päätelaitteille, mutta esimerkiksi Motonet-tyyppisen mainostajan on todennäköisesti järkevää ajaa desktop-vierailijaa kohti verkkokauppaa ja mobiilikäyttäjää hänen sijaintinsa perusteella kohti lähintä kivijalkaa (tietysti tapauskohtaista). Pointtina siis se, että mobiilikampanjoissa on tunnuksenomaista ohjata käyttäjää kohti lähintä kivijalkaa, muistuttaa häntä esimerkiksi paikallisen ostoskeskuksen alemyynnistä tai promota einesvalmistajan aamupalatuotteita silloin, kun käyttäjä istuu bussissa matkalla kohti työpaikkaa. Desktopissa taas huomattavasti mobiilia useammin tavoitteena on suora konversio verkkokaupassa / onlinepalvelussa.