Päätelaiteoptimointi vaihtoehtona mobiilisivustolle

Perttu Tolvanen

Mobiilista puhutaan paljon, mutta erilaiset tavat reagoida aiheeseen eivät ole vielä vakiintuneet. Selvää on kuitenkin, että kaikki eivät tarvitse esimerkiksi erillisiä mobiilisivustoja. Mobiilikäytön kannalta monelle olisikin fiksumpaa keskittyä oman pääsivuston käytettävyyden parantamiseen.

Tällaisesta vaihtoehtoisesta mallista näyttää esimerkkiä S-Pankki, jonka markkinointisivusto s-pankki.fi päätelaiteoptimoitiin hiljattain. Testauksen ja kehitysehdotukset toteutti käytettävyysfirma Adage ja muutokset sivustolle teki S-Pankin tekninen kumppani Ch5 Finland. Uudistuksesta tehty uutinen kertoo projektista hieman enemmän.

Projektin kustannukset ovat todennäköisesti olleet muutamista tuhansista muutamiin kymmeniin tuhansiin, joten aivan massiivisesta investoinnista tuskin on ollut kyse. Projektina tapaus edustaa kuitenkin esimerkillistä malliprojektia, jota monen verkkoviestintäpäällikön kannattaisi tällä hetkellä harkita.

Netti on nykyisin täynnä tärkeitä sivustoja, joita on todella vaikea käyttää muilla laitteilla kuin täysiverisellä tietokoneella. Tilannetta vaikeuttaa etenkin se, että monen sivuston takana olevat kehittäjät odottavat vain sitä maagista uudistusta tai ”lopullista ratkaisua” mobiilikäyttöön. Näitä odotellessa kannattaa harkita päätelaiteoptimointia omalle sivustolle.

Myös alan firmojen kannattaisi varmaankin tarjota aktiivisemmin näitä optimointipalveluita, koska juuri nyt mobiililaitebuumin keskellä tarvetta näille projekteille todella olisi.

  1. Fabian Niemitz says:

    Päätelaite optimoinnissa on tosiaan järkevää lähteä siitä perusajatuksesta, että mobiilisivun voi heivata mäkeen (useimmissa tapauksissa:). Me teemme optimointia sekä omaan Navigo CMS:ään, että Liferay 6.1:een. Optimointiprojektien koko vaihtelee riippuen optimoitavan sivuston rakenteellisista ominaisuuksista.

    S-pankin keissistä emme voi sen enempää kertoa, mutta optimoinnin kustannuksia ei tarvitse pelätä. S-ryhmää huomattavasti pienempienkin toimijoiden kannattaa harkita optimointia. Kerromme mielellämme lisää.

  2. Aki Björklund says:

    Ei S-Pankin sivusto minun silmääni ole millään lailla mobiilioptimointu. Samanlaista rasittavaa edestakaista zoomailua saa harrastaa kuin millä tahansa verkkosivustolla. Jos tällä optimoinnilla tarkoitetaan esimerkiksi sellaista peruasiaa, että on otettu kosketuskäyttöliittymä huomioon, niin sen olisi voinut tarkentaa. Muuten jää täysin hämäräksi, että tehtiinkö ylipäätään mitään.

  3. Fabian Niemitz says:

    Joo olisi sen linkin voinut toistaa tuossa kommentissanikin :). Responsive design johon viittaat on ominaisuus, joka on hieman työläämpi tehdä jälkikäteen sivustolle. Tässä tapauksessa asiakas halusi, että optimoinnissa keskitytään muihin asioihin. Lisää tosiaan tiedotteessa, johon ylläolevassa kommentissa viitattiin.

  4. Perttu Tolvanen says:

    Hyviä kommentteja. ”Responsiivisuus” on juuri nyt paljon käytetty sana, mutta sen tarkempi määrittely ei sitten olekaan niin suoraviivainen asia. Onhan se moderni asia ja tärkeä asia, mutta ei ole vielä selvää, että edes webiin erikoistuneet tekijät oletuksena tekisivät mobiililaitteille sopivia käyttöliittymätoteutuksia ilman että tätä erikseen vaadittaisiin. Eikä oikeastaan tarvitsekaan, koska jos asiakas ei erikseen vaadi ”cutting-edge” toteutusta, niin ei sitä yleensä kannata tehdä pyytämättä. Korkeammat ylläpitokustannukset ja mahdolliset muut sivuvaikutukset ovat kuitenkin todellisuutta aina silloin kun tehdään ei-vakiintuneilla menetelmillä. Kaikki asiakkaat eivät tästä halua maksaa.

    Hankala asia on tietysti juuri tuo, että jälkikäteen ei responsiivista designia sitten saittiin enää tehdäkään vaan jäljellä on päätelaiteoptimointi ym. temput. Kuuluu tällä hetkellä juuri niihin asioihin, joista fiksu asiakas tekee päätöksen ennenkuin pyytää tarjouksen toteutuksesta.

  5. Jarno says:

    Siis hetkinen, miten tuo S-pankki on muka optimoitu mobiiliin? Ei aukea uutisesta, ei jutusta eikä varsinkaan, kun surffailee saitille kännykällä.

  6. Fabian Niemitz says:

    Toimii graafikkomme iPhone 4:llä, junior programmerimme N9:llä ja jopa minun iänikuisella E71:llä. Millä kännykällä onnistuit hajoittamaan sen? Huomasithan, että kyseessä on s-pankin markkinointisivu ei varsinainen s-pankki, siis se missä voit tehdä maksuja tms.

  7. Tiina says:

    Wlanin päässä oleva Lumia 800 ei ensiyrittämällä pääse koko saitille. Olen työkseni tekemisissä mobiilin kanssa, ja kaikella kunnioituksella tekijöitä kohtaan en nyt näe tässä toteutuksessa minkäänlaista UX-näkemystä.

  8. Perttu Tolvanen says:

    Jos tuota alkuperäistä uutista kriittisesti lukee, niin on tosiaan mahdollista, että kovin suuria muutoksia ei todellakaan ole tehty. Lainaus uutisesta: ”Sivustolla uudistettiin navigaatiota, sen järjestystä ja sisältöä sekä visuaalista havainnollisuutta. Linkkilistoja harvennettiin kosketusnäyttöjen käyttäjiä ajatellen. Esimerkiksi leveiden sivupohjien leipätekstiä ja toimipaikkahaun hakutulosten esitystapaa kavennettiin, jotta pienikin näyttö mahdollistaisi luettavuuden ja käytettävyyden.”

    Lähtötilanteesta ei tietysti ole tietoa. Pahimmillaan navigaatio on ollut täysin toimimaton ilman Javascriptiä esimerkiksi, se on voinut hajota sirpaleiksi kapealla näytöllä ja tavallisia sivuja on voinut olla mahdoton lukea ilman sivuttaisvieritystä.

    Esim. juuri navigaatioiden ongelmat ovat tyypillisiä ongelmia. Samoin luettavuushaasteet kun tekstit kasautuvat ja esittäytyvät hyvin pienellä pistekoolla. Päätelaiteoptimointi voi siis hyvinkin keskittyä vain sisältöjen muokkaukseen ja esitystavan yksinkertaistamiseen.

    Jälkikäteen tehtävänä projektina ei varmaan ole kovin usein mahdollista tehdä suurta remonttia. Etenkin kun kyseessä on sisällöllisesti laaja sivusto, jota ylläpidetään julkaisujärjestelmällä hajautetusti – veikkaisin. Pelkästään UX:n ehdoilla kun ei tuollaista isoa saittia voi remontoida ihan tuosta vain. Huomio sinänsä tuosta ”UX-näkemyksen puutteesta” lienee validi, tai ainakin se, että ei tuosta toteutuksesta sellaista näytä löytyvän – mikä ei tietysti tarkoita etteikö tekijöillä sellaista olisi ollut – usein vain toteutuksessa budjetit ja muut realiteetit tulevat vastaan.

  9. Tiina says:

    Asiallisia pointteja, Perttu.

    Mieleen nousee asian tiimoilta montakin kysymystä – ensimmäisenä se, mitä asiakas päätelaiteoptimoinnilla luulee saavuttavansa, ts. mitä hänelle on myyty versus loppukäyttäjän kokemus sivuston mobiiliystävällisyydestä.

    Poloiset markkinointipäättäjät tuntuvat muutenkin olevan mobiilin kanssa aika lailla hukassa, ja tämä vaihtoehto tuskin ainakaan selkeyttää palettia varsinkin jos päätelaiteoptimointi esitetään relevanttina vaihtoehtona aidosti käyttäjälähtöiselle lähestymistavalle mobiiliin.

  10. Fabian Niemitz says:

    Täysin jaw-droppingly-awesome -mallin optimointia ei oikein voi tehdä ilman että koko sivusto tehdään alusta.

    Sitä mitä tässä keississä on tehty, olemme pyrkineet avaamaan uutisoinnissamme siltä osin kun asiakas on antanut luvan ja Perttu onkin sieltä kaivanut ansiokkaasti esiin ydinkohdat. Uutisessa mainittujen asioiden lisäksi emme kommentoi projektia.

    Keskustelua yleisellä tasolla on kuitenkin hyvä käydä. Millä tavalla paras käyttäjäkokemus saavutetaan kussakin keississä: mobiiliversiointi vs. ladattava sovellus vs. päätelaiteoptimointi vs. responsive design? Näistä ja muista asioista asiantuntijamme kertovat mielellään lisää kaikille, jotka ottavat meihin suoraan yhteyttä;).

  11. Perttu Tolvanen says:

    Hyvää kommentointia.

    Täydentäisin siten vielä, että suoraan sanottuna asiakkaiden lisäksi me asiantuntijat olemme myös aika lailla pihalla mobiilista. Eikä sitä minusta tarvitse hävetä. Päätelaitteet ja toteutustekniikat kehittyvät niin hurjaa vauhtia, että ei niitä maagisia ratkaisuja ole kenelläkään.

    Esimerkiksi mainittu ”käyttäjälähtöinen lähestymismalli mobiiliin” on hyvä harjoitus paperilla, mutta useinhan tämän mallin vieminen käytäntöön tarkoittaa nimenomaan koko saitin uusintaa sillä tasolla, että julkaisujärjestelmä ja kaikki taustaintegraatiot täytyy miettiä uusiksi (koska todellinen mobiiliyhteensopivuus ei ole pintatemppuja, vaan vaatii lähdesisältöjen uudelleenmuotoilun yleensä). Esimerkiksi Sitra teki tämän viime vuonna ja julkisti saittinsa juuri vähän aikaa sitten. Sitra.fi on nyt todella komea suoritus responsiivisesta saitista, mutta taustalla on tehty yhden omakotitaloprojektin verran töitä myös sen suhteen, että sisältöjen ylläpito ja integraatiot taustasysteemeihin pitävät kokonaisuuden kasassa. UX-velhoilu on lopulta vain pieni osa siitä, että iso saitti todella saadaan käytettäväksi eri päätelaitteilla.

    Siksi minusta päätelaiteoptimointi on kova juttu. Ei tuollaisia Sitran kaltaisia projekteja ole monella edes isolla firmalla varaa tehdä tässä maassa vain sen takia, että on kiva ottaa vähän uusia päätelaitteita huomioon. Sitralla nyt sattui uudistustarve ajoittumaan tilanteeseen, jossa oli järkevää samalla tehdä saitista myös kestävä lähitulevaisuudessa häämöttävään päätelaitesekamelskaan.

    Monille muille s-pankki.fi on hyvä esimerkki siitä, että järkevintä on aloittaa tekemällä saitista edes toimiva suosituimmilla mobiilipäätelaitteilla. Sitten voi sen jälkeen miettiä, että olisiko jollekin erityiselle mobiilisivusto-konseptille tarvetta, tai jopa applikaatiolle. Responsiivisen designin kanssa ei minusta kannata lähteä leikkimään ellei ole todella tekemässä kunnon saittiuudistusta.

  12. köh says:

    Onko kukaan kokeillut käyttää s-pankkia hitaan yhteyden läpi?

    Esimerkki ja pointti: ihan suomen sisälläkin ollessa 3G-yhteyden takerrellessa edge/gprs ja siirtokaistan ollessa se 6K/s, s-pankkiin kyllä pääsee kirjautumaan sisälle, mutta siitä eteenpäin ei toimikaan enää mikään.

    Valitsee tilin, niin tulee ilmoitus haetaan tietoja ja tiimalasi pyörähtelee, jonka jälkeen pian palataankin takaisin, ei näytä mitään tilitietoja eikä pääse tekemään maksuja.

    Soitin asiakaspalveluun ja kysyin että tietävätkö tästä, niin yhtään mitään ei monen pompottelun jälkeen osattu sanoa. Ainoa oli että ”laita palautetta sivujen kautta”, mutta siihen eivät enää hermot riittäneet, ehkä sitten joku toinen kerta kuvakaappauksen ja videopätkän kanssa.

  13. Aki Björklund says:

    Megaprojekteissa tavataan rakentaa kerralla valmista, eikä huomioida, että verkko elää ja kehittyy ja siinä pitää elää mukana. Raskaita järjestelmiä kannattaa välttää juuri tästä syystä – isonkin organisaation, vaikka kuinka kuvittelee, että se seitsenportainen hyväksymismenettely julkaisuun on aivan ehdoton.

    Mutta s-pankki.fi tuskin on niin massiivinen saitti, että sen kokonainen uusiminen maksaisi paljoakaan. Google sanoo indeksoineensa 597 sivua domainista http://www.s-pankki.fi. Tuolla sivumäärällä ei pitäisi olla rahasta kiinni minkään isommankaan redesign-projektin, kun pankista kerran puhutaan. Sisällötkin näyttävät olevan pääasiassa tekstiä ja pienehköja kuvia sekä muutama suhteellisen yksinkertainen lomake.

    Perttu, olet oikeassa, että äärimmilleen vietynä ”mobiilioptimointi” voi vaatia ihan kaiken uusimista, mutta ei asia ole niin mustavalkoinen. Väittäisin, että tämän esimerkkisaitin tyylittelisi pienille ruudunleveyksille kohdennetulla CSS:llä ja triviaaleilla HTML-muutoksilla varsin kelvolliseksi muutamassa päivässä. Lopputulos olisi useimpien käyttäjien kannalta huomattavasti nykyistä parempi – ja toteutukseen tarvittaisiin vain yksi kompetentti web-ammattilainen eikä yhtään magiaa.

  14. Tiina says:

    Insinöörivetoisuus on suomalaisen yritysmaailman perustavanlaatuinen ongelma. Päätelaiteoptimointi voi olla hyvä ja hieno asia, mutta noin yleisesti ottaen tekniikkavetoisissa projekteissa loppukäyttäjä on aina vaarassa unohtua.

    En halua takertua yksittäisiin toteutuksiin mutta loppukäyttäjä on kuitenkin aina se taho, joka määrittää sivuston toimivuuden riippumatta siitä, mikä on asiakkaan tai konsultin näkemys asiaan. Loppukäyttäjä myös joko kantaa tai ei kanna rahaa sinne asiakkaan kassaan, eli kuluttajan muroihin ei kannata pissiä :)

  15. Fabian Niemitz says:

    Olen samaa mieltä Tiinan kanssa siitä, että Suomessa on valloillaan ”hankitaan hieno laite niin se toimii.” -ajattelu, eikä meillä riittävästi keskitytä siihen miten se ”laite” sitten käytännössä asiakkaan/työntekijöiden käytössä toimii. Itse olen markkinoinnin ja viestinnän puolelta ja painin päivittäin kyseisen insinööriajattelutavan kanssa:).

    PS. Tässä keississä on kyse s-pankin markkinointisivusta EI itse pankkisovelluksesta. Se lukee uutisemme lisäksi myös Pertun tekstissä. Muutamat kommentit vaikuttavat sellaisilta, että uutista/Pertun artikkelia ei ole jokainen ihan ajatuksen kanssa lukenut.

  16. Mikko Kiviniemi says:

    Yksi suurimpia teknisiä ajatuksia Sitrassa oli se, että tarjoilemme täysin saman lähdekoodin päätelaitteesta riippumatta.

    Näin jälkiviisaana tuntuu henkilökohtaisesti siltä, että vielä paremmin pääsisimme palvelemaan loppukäyttäjillä tuomaan kevyttä RESS-ajattelua mukaan (tietysti päätelaitetunnistus tekniseltä kannalta avaa täysin eri purkin kannen): http://www.lukew.com/ff/entry.asp?1392

    Myöskin, otan Pertun kommentin UX-velhoilun väheksymisestä henkilökohtaisesti ;)

    Mikko Kiviniemi,
    Sitra.fi uudistuksen UX-velho