Kuka kaipaa rautalankoja



Isoissa verkko- ja softaprojekteissa on ollut pitkään tapana piirrellä rautalankoja (wireframes) useista näkymistä. Niitä hierotaan Balsamicin tyyppisillä ohjelmilla joilla saa aikaan sellaista Comic Sans henkistä lopputulosta. Ne näyttävät visuaalisesti aivan kamalalta, eivätkä kerro käytännössä kenellekään millään tavoin että miltä lopullinen käyttöliittymää tulee näyttämään.

Tee työtä jolla on tarkoitus? Eli kenelle niitä rautalankoja oikein piirretään? Melkein 100% asiakkaista haluaisi nähdä jo jotain enemmän valmista heti alusta lähtien, eivätkä staattiset kuvat paperilla avaa yhtään käyttöliittymän interaktioita. Hoverit, mouse-overit ja click-to-open tyyppiset toiminnallisuudet, sekä niiden toimiminen päätelaiteriippumattomasti, ovat kuitenkin kaikista helpointa todentaa suoraa html/css maailmassa. On täysin hullua kuvitella että tänä vuonna tehtyjä ohjelmistoja tai palveluita käytettäisiin vielä kahden vuoden päästä 23″ ruudulta. Windows8 ja sen kautta tuleva ”tablettien rantautuminen työelämään” vaikuttaa päätelaitekantaan huomattavasti.

Miten siis tästä eteenpäin?

Tarkoitus ei ole sanoa, etteikö nykyisin rautalankoja piirteleviä henkilöitä tarvittaisi. Uskon vain, että heille olisi projekteissa huomattavasti tärkeämpiäkin tehtäviä. User Experience on kokonaisuudessaan niin suuri siivu, että käyttäjälähtöisten palveluiden suunnittelussa on tehtäviä jokaiselle.

Rautalankoja voi edelleen piirtää esim. yksittäisestä toiminnallisuudesta, mutta sen voi avata ihan yhtälailla vaikka Powerpointilla.

Responsiivinen verkkosuunnittelu (Responsive Web Design) on luonut täysin uusia vaatimuksia käyttöliittymäsuunnitelulle. Olen ollut mukana projekteissa joissa niin visuaaliset suunnittelijat kuin rautalankojen piirtäjät eivät ole selkeästi ymmärtäneet yhtään että mitä RWD tarkoittaa käytännössä. Se on suurin yksittäinen muutos koko suunnitteluprosessiin, joka käyttöliittymäsuunnitteluun on tullut sitten internetin synnyn.

Näytä vain mikä on tärkeää

Yksi suurimmista trendeistä käyttöliittymissä on parin viimeisen vuoden aikana ollut se, että kaikki turha pyritään piilottamaan. Käyttäjät ovat jo tottuneet siihen, lähinnä mobiilisovellusten myötä, että esimerkiksi navigaatio piilotetaan oletuksena klikkauksen taakse. Käyttäjälle tulisi aina pyrkiä näyttämään yhdessä näkymässä vain oleellinen tieto. Tätä ajatusta on projektiryhmässä todella haastavaa saada läpi, jos asiaa ei käydä esimerkiksi staattisen prototyypin tai hyvien esimerkkien kautta läpi niin selkeästi että jokainen ymmärtää mistä on kyse.

Palveluiden käyttäminen on kuitenkin yleensä ”tunnelissa etenemistä”. Käyttäjää kuljetetaan läpi toiminnallisuuksien ohjatusti ja harkitusti. Jos mietit vaikka puhelimessasi olevaa Facebookin natiivi-appia. Kun käyttäjä on valinnut että hän haluaa lisätä kuvan, hän siirtyy sellaiseen näkymään josta ei voi suoraa hypätä muokkaamaan omia asetuksiaan. Loogista, karsittua ja hallittua. Jostain syystä tätä samaa logiikkaa kuitenkin hyödynnetään todella harvoin työpöytäsovelluksissa. Jokaisessa näkymässä on esillä kaikki mahdolliset asiat joita klikkaamalla käyttäjä saa virheviestin tyyliin ”haluatko keskeyttää tapahtuman ja siirtyä pois” tai ”et voi juuri nyt käyttää tätä ominaisuutta”. Miksi siis edes näytämme sellaisia toiminnallisuuksia joita ei voi sillä hetkellä käyttää?

Fast prototyping

Siirry niin nopeasti kevyeen protoon kuin mahdollista. Responsiivinen gridi pohjalla auttaa testaamaan käyttöliittymän toimivuuden kaikilla laitteilla ja tiettyjen interaktioiden käytettävyys on heti alussa helpompaa testata ja todentaa.

Prototyyppi on sitten helposti koristeltavissa ”asiakkaan näköiseksi” ja esimerkiksi nappien ja navigaation käytettävyys paranee värien kautta aina. Virheviestien tai huomioboksien sijoittelukin on helpompaa kun voit pelata enemmän väreillä. Erottuva punainen laatikko erottuu huonommassakin kohdassa paremmin. Musta-valkoisessa rautalankamallissa se sijoitetaan aina tiettyyn paikkaan keskeiselle sijainnille.

Maailma muuttuu. Suunnittelu muuttuu. Älä siis pysy paikoillaan.

Janne Gylling


Avainsanat: Graafinen suunnittelu käyttökokemus muotoilu muutos palvelumuotoilu Personointi responsiivisuus verkkopalvelu

One thought on “Kuka kaipaa rautalankoja

  1. Täysin samaa mieltä rautalankamallien ongelmista. Prototyyppivetoinen design on ainut oikea malli suunnitella moderneja verkkopalveluita, myös pienemmissä projekteissa.

    Balsamiq on tosin ihan hyvä työkalu määrittelyvaiheessa siihen, että konkretisoidaan ideoita ja vaatimuksia. Balsamiqin ”karkeus” on siinä vaiheessa vain hyvä asia, ja siksi esim. meidän määrittelydokkareissa on usein Balsamiqilla tehtyjä näkymiä (yleensä desktop ja mobiili, ja joskus jopa ajatuksia tabletista). Emme kuitenkaan yritä väittää, että se olisi käyttöliittymäsuunnittelua – se on vain vaatimusten konkretisointia. Joskus siinä toki määritetään esim. informaatioarkkitehtuurin ja sisältöstrategian toteutustapoja, mutta ei vielä käyttöliittymäratkaisuja.

    Todellinen käyttöliittymäsuunnittelu pitäisi sitten tapahtua suoraan välineissä joilla saadaan tehtyä lopullista jälkeä, eli photoshop & html/css ym lelut.

    Käyttöliittymäkonsepti on ehdottomasti sellainen asia joka on viime vuosina siirtynyt strategia/konsepti/määrittely -vaiheesta pois ja liittyy nykyisin paljon enemmän teknisen toteutuksen vaiheeseen.

    Täydellisessä maailmassa tuollaista kaksijakoa ei tietysti ole, mutta usein kustannustehokkuuden tavoittelu, julkinen hankintalaki tai rajallinen kumppanivalikoima pakottavat projektin pilkkomiseen jollain tavalla suunnittelu- & toteutusvaiheisiin.

Comments are closed.