Mikä ihmeen rauta­lan­ka­malli?

syys 19, 2018 | Käytettävyys

Rauta­lan­ka­malli (eng. wireframe) on matalan tarkkuus­tason graafinen raken­nelma verkko­sivun tai sovel­luksen sisäl­löstä, elemen­teistä, toimin­nal­li­suuk­sista ja sen käyttäy­ty­mi­sestä, vähän niin kuin luuranko. Malli tarjoaa suunta­viivat raken­teelle, asette­lulle ja tietoark­ki­teh­tuu­rille ja toimii alustavana kuvauksena käyttö­liit­ty­mästä. Se on siis erinomainen apuväline kommu­ni­kaa­tiolle suunnit­telun alkuvai­heessa.

Visuaa­li­sesti rauta­lan­ka­malli on hyvin rajoit­tunut, ja sen tekemiseen tarvi­taankin oikeastaan vain viivoja, laati­koita ja harmaan eri sävyjä. Varsi­naista sisältöä korvaa­massa ovat usein paikka­merkit (eng. place­holder), kuten tekstille lorem ipsum. Rauta­lan­ka­mallien ei siis tulisi sisältää värejä, kuvia tai erikoisia fontteja, mutta teksti­tyylejä voidaan vaihtaa hierarkian selkeyt­tä­mi­seksi (otsikot, leipä­teksti, jne.) Visuaa­lisen yksin­ker­tai­suuden ansiosta ihmisten on paljon helpompaa kiinnittää huomiota mallin toimin­nal­li­suuksiin, infor­maa­tio­ark­ki­teh­tuuriin, käyttä­jä­ko­ke­mukseen ja käytet­tä­vyyteen, ulkoasun sijaan.

KUVA 1. Palvelupolun avaaminen vaihe vaiheelta (kuva: Eija Hautala)

Rauta­lan­ka­mallien rakentaminen on ketterää ja edullista. Kun ei käytetä paljon aikaa ja muita resursseja visuaa­lisen ilmeen suunnit­teluun, vaan pyritään hakemaan ajatusta käyttö­liit­tymän eri elemen­teistä yksin­ker­tai­silla muodoilla ja place­hol­de­reilla, voidaan tehdä ripeitä ja radikaa­le­jakin muutoksia tuote­ke­hi­tyksen alkuvai­heessa, kun muutoksia ei tarvitse tehdä vielä grafiikkaan tai koodiin. Mallin avulla voidaan myös kerätä kalli­sar­voista palau­tetta kehitys­tii­miltä, osakkailta ja mahdol­li­silta käyttä­jä­ryhmien edusta­jilta.

Kun käyttö­liittymä on rauta­lan­ka­mallien avulla iteroitu ja testattu toimi­vaksi, voidaan mallien pohjalta alkaa suunnit­te­lemaan varsi­naista visuaa­lista ulkoasua (piirrelmät eli mockupit) ja toimin­nal­li­suuksia tarkemmin (proto­tyypit), mutta näistä lisää seuraa­vissa blogeissani.

Omat suosikkini rauta­lan­ka­mallien raken­ta­miseen:

Adobe XD (tämän hetken suosikki)
https://www.adobe.com/fi/products/xd.html

Rauta­lan­kojen lisäksi nopeat interak­tii­viset proto­tyypit mahdol­lisia. Yhteen­so­pivuus muiden Adobe tuotteiden kanssa takaa helpon siirtymän rauta­lan­goista varsi­naiseen visuaa­liseen suunnit­teluun.

Axure
https://www.axure.com/

Rauta­lan­kojen ja nopeiden interak­tii­visten proto­tyyppien jakaminen helposti pilvessä. Mahdol­listaa myös HTML- ja CSS-generoinnin.

Balsamiq 
https://balsamiq.com/

Puhdasta rauta­lankaa, hyvässä ja pahassa. Ehkä hieman kankea, mutta ajaa asiansa.

Figma
https://www.figma.com/

Hyvin saman­kal­tainen kuin Adobe XD, toimin­nal­li­suuk­sissa vain pieniä eroja.

Ja tietenkin Kynä & Paperi 😉

FixUi Oy on oululainen suunnittelu- ja digipal­ve­luita tarjoava yritys.

Tarjoamme monipuo­lisia suunnit­te­lu­pal­veluja brändin raken­nuk­sesta käyttö­liit­ty­mä­suun­nit­teluun. Monipuo­liset tekijämme luovat sinulle toimivat ratkaisut käytet­tä­vyyden sydämellä!

Kirjoittaja

Panu Pasanen

Panu Pasanen

Käyttö­liit­ty­mä­suun­nit­telija

Moi! Panu (FM) on nimeni, käyttö­liittymät ja käytettävyys intohimoni.