Rautalankamallit ovat UX-suunnittelussa juuri se vaihe, jonka yli tekee mieli hypätä. Olen huomannut tämän itse ja kuullut samanlaisia ajatuksia myös muilta suunnittelijoilta. Erilaisten väripalettien ja kuvitusten pyörittely kiehtoo, eikä suunnitelmia malttaisi pitää rautalankamallien vaatimalla yksinkertaistetulla tasolla. Miksi meidän kuitenkin pitäisi malttaa mielemme ja suunnitella ensin rautalankamalleja?
Mitä hyötyä rautalankamalleista on?
Mielestäni rautalankamallien suurin hyöty on se, että ne auttavat keskittymään olennaiseen. Sen sijaan, että värivalinnat ja näkymän välittämä fiilis vievät huomion, keskitytään siihen
a) kuinka johdonmukaiselta käyttäjän eteneminen eri näkymien välillä vaikuttaa
b) mitä elementtejä kussakin näkymässä tulee olla ja mikä on niiden keskinäinen hierarkia.
Tämä pätee niin suunnittelijan kuin koko tiimin kohdalla silloin, kun suunnitelmia käydään yhdessä läpi.
Viimeisin oma kokemukseni rautalankamallien hyödystä on nykyisestä asiakasprojektistani. Suuren määrän erilaisia näkymiä sisältävä mobiilisovellus ja siihen kaavaillut uudet ominaisuudet oli itselleni helpompia hahmottaa, kun loin ensin osasta näkymiä rautalankamallit. Lisäksi rautalankamallien kanssa oli helppo esitellä asiakkaalle ja tiimilleni erilaisia mahdollisuuksia, joita näkymien suhteen oli olemassa. Kyseisessä projektissa visuaalisuus on hyvin oleellisessa osassa ja alussa konsepti sen suhteen oli vielä auki. Hämmennyksen ja väärien vaikutelmien välttämiseksi en halunnut sotkea värejä ja grafiikkaa alussa mukaan ollenkaan.Vaikka rautalankamallien teko voi joskus tuntua ylimääräiseltä työltä, menee suunnitteluun todellisuudessa vähemmän aikaa, kun jaksat ensin vääntää rautalangasta. Rautalankamalleilla iteroiminen on huomattavasti nopeampaa kuin pitkälle viedyillä näkymillä. Jopa käyttäjätestausta on suositeltavaa tehdä rautalankamalleilla ennen kuin näkymiä työstetään pidemmälle. Kun käyttöliittymän elementit ja niiden suurpiirteinen sijainti ovat lyöty lukkoon, voit siirtyä hiomaan visuaalisuutta.
Rautalankamallit auttavat hahmottamaan myös esimerkiksi mitä komponentteja ja kuinka monta erilaista tekstityyliä näkymät vaativat. Siinä tapauksessa, jos minkäänlaista design systemiä tai tyylikirjastoa ei vielä ole olemassa, tämän tiedon avulla sellaisen rakentaminen on helpompi aloittaa.
Miten tehdä rautalankamalleja tehokkaasti?
Rautalankamallien teon voi aloittaa vaikka kynällä ja paperilla. Usein tällaiset nopeat hahmotelmat ovatkin suunnittelijan ensimmäinen askel, joka on tarkoitettu lähinnä hänen itsensä nähtäväksi. Toisaalta tällaisia piirrustuksia voi syntyä myös esimerkiksi työpajojen tuloksena.
Figma on suunnittelutyökaluista oma suosikkini ja nykyään jo alan standardi. Figman Community tarjoaa lukemattomia valmiita tyyli- ja komponenttikirjastoja, joiden avulla rautalankamalleja on älyttömän nopeaa ja vaivatonta luoda digitaalisesti. Valmiiden kirjastojen kanssa on tärkeää kuitenkin muistaa, että käyttää nimenomaan rautalankamallien tekoon luotuja lähteitä. Figma on pullollaan myös visuaalisesti pitkälle vietyjä kirjastoja, joilla näkymien rakentaminen on yhtälailla nopeaa. Mitä enemmän visuaalisuutta kuitenkin on mukana, sitä vaikeampi on keskittyä olennaisiin asioihin. Ehkä juuri tästä syystä markkinoille on kehitetty myös pelkästään rautalankamallien luomiseen tarkoitettuja työkaluja, kuten Balsamiq.
Digitaaliset, helposti jaettavat ja hieman siistityt versiot ovat usein hyödyllisimpiä silloin, kun näkymiä halutaan käydä yhdessä tiimin ja/tai asiakkaan kanssa läpi. Digitaalisessa ympäristössä näkymien monistaminen ja iteroiminen on myös nopeaa.
Yhteenveto
Kun rautalankamalleja käytetään oikeaan aikaan ja oikeassa paikassa, ne auttavat keskittymään projektin kannalta sillä hetkellä olennaisiin asioihin. Näitä ovat mm. käyttäjän eteneminen eri näkymien välillä ja näkymissä tarvittavien elementtien keskinäinen hierarkia. Tehokkaasti esimerkiksi valmiiden komponenttikirjastojen avulla tuotetut rautalankamallit myös nopeuttavat suunnitteluprosessia.
Lue myös: UI ja UX – mitä eroa niillä on?
