Väännänkö rautalangasta?

02.12.2013

Wireframet, wiret, rautikset, rautalangat – rakkaalla lapsella on monta nimeä. Kaikki, jotka ovat tehneet töitä verkkopalvelu-projektissa, ovat jossain vaiheessa päässeet perehtymään rautalankoihin. Mutta, ovatko rautalangat sittenkään niin mainio työkalu, kun niiden laaja käyttö antaa ymmärtää?

Tuija Riekkinen




Kyllä, mutta mielestäni niitä käytetään väärin ja väärässä vaiheessa projektia. Ja tästä syystä rautalangat eivät aina todellakaan edistä projektia, vaan itse asiassa aiheuttava sekaannusta sekä tuplatyötä eikä niitä edes käytetä lopulta siihen, missä ne oikeasti ovat parhaimmillaan.

Kun keskustelen alan ammattilaisten kanssa, suurin osa myöntää haasteet rautalankojen osalta. Siitä huolimatta suunnittelumetodit ja –prosessit eivät tunnu kehittyvän, vaan samalla kaavalla mennään; ensin rautalangat, sitten leiskat ja sitten koodataan.

Nopeuttaako rautalanka, vai hidastaako sittenkin?

Mietitäänpäs hetki, että miten rautalankoja siis tyypillisesti käytetään.

Rautalangat piirretään ennen leiskoja. Niillä hahmotellaan sivuston konseptia, rakennetta, sisältösuunnitelmaa, toiminnallisuuksia. Vähän kaikkea siis.

Rautalanka on mainio ja monipuolinen suunnittelutyökalu. Rautalankojen piirtäminen on myös sukkelaa, kun moneen visuaaliseen seikkaan ei tarvitse eikä voi käyttää aikaa.

Mutta rautalanka ei ole oikea työkalu, kun näitä asioita, konseptia, rakennetta jne, viestitään asiakkaille.

Miksi? Siksi, että rautalanka on aina ruma ja yksinkertaistettu. Tekstit, kuvat ja toiminnallisuudet näyttävät ankeita. On vaikea luottaa, että tulee hyvännäköinen lopputulos.

Olen ollut isossa projektissa, missä yhtä hemmetin tuotesivua jumpattiin iäisyys rautalankatasolla. Olin itse ns. asiakkaan puolella kommentoimassa wirejä ja silloin tajusin omankin rajallisuuden nähdä rautalankojen yli seuraavaan vaiheeseen. Saadaanko me kaikki tarvittava tauhka sivulle käytettävästi ja visuaalisesti näyttävästi?

Ehdotinkin myöhemmin, että olisi järkevämpää jatkossa ensin fiilistellä isolla pensselillä Photoshopissa ja kun on saavutettu se WAU-fiilis leiskasta, siirrytään tarkempaan määrittelyyn rautalankojen avulla. Silloin kaikki tietävät, että palvelusta tulee visuaalisesti päräyttävä ja on helpompi keskittyä päättämään muista asioista (yleensä myös kommentoijiakin on paljon vähemmän, kun nappien väreistä ja muista on päästy yhteisymmärrykseen).

Eli, suunnittelu tehdään rautalankojen avulla, koska leiskan tekeminen on hitaampaa? Mutta jos päätöksiä ei pystytä tekemään pelkän rautalangan perusteella, on parempi siirtyä saman tien fiilistelemään visuaalisesti.

Joskus rautalangat on helppo hyväksyttää asiakkaalla. Nyökytellään, että joo, näyttää oikealta. Kunnes rautalanka piirretään auki leiskaksi, jolloin alkaakin asioiden iterointi. Kun ne asiat vaan näyttää enemmän todenmukaiselta leiskassa. Niinpä niin.

Eli, rautalankojen avulla toivotaan löydettäväksi konsensus monesta tärkeästä asiasta. Rautalangat pitää olla hyväksytty ennen kuin aletaan leiskaamaan. Hyvin tyypillinen käytäntö projektissa. Kuitenkin niitä muutoksia tehdään myös leiskavaiheessa eli rautalankojen viilaaminen ja hyväksyttäminen hidastaa projektia.

Verkkopalvelut ovat tänä päivänä visuaalisia, interaktiivisia ja dynaamisia kokemuksia.

Visuaalisen konseptin, rakenteen ja tilanjaon esittelyyn soveltuu parhaiten leiska. Interaktioiden ja dynaamisten sääntöjen määrittelyyn puolestaan rautalanka ja määrittely tulee työvaiheissa aina konseptin hyväksynnän jälkeen. Yksityiskohdatkin hahmottuvat vasta projektin edistyessä.

Miten siis tehdä asiat toisin?

Suunnitellaan sivuston konsepti ja punainen lanka. Ihan sama mitä työkaluja käytät.

Listataan konseptin kannalta tärkeimmät sisällöt ja toiminnallisuudet.

Hahmotellaan ja presentoidaan palvelun konseptuaalinen idea ja fiilis suosiolla leiskan avulla. Rautalangat voivat olla taustalla suunnittelutyökaluna, mutta asiakasviestinnän välineitä ne eivät ole.

Kun konseptista ja visuaalisesta linjasta ollaan yhtä mieltä, voidaan aloittaa tarkempi määrittely eli rakenne (navigaatio), toiminnallisuuksien interaktiot, sisältöjen rakenteistaminen, dynaamiset säännöt, joiden avulla sisällöt nousevat sivuille. Tähän hommaan rautalanka on oivallinen työkalu.

Heti kun rautalangan avulla on määritelty sisältö ja toiminnallisuus, voidaan lähteä visualisoimaan niitä. Pala palalta, elementti kerrallaan. Iteroiden. Tässä vaiheessa voidaan joutua vielä viilaamaan konseptin viestintävaiheen visua. Mielestäni täysin hyväksyttävää.

Valmiit visuaaliset elementit kannattaa sitten saman tien pistää toteutukseen, koska verkkopalvelun natiivi ympäristö on selain. Vasta siellä nähdään, toimiiko ”paperilla” suunnitellut ratkaisut vai ei.

Lue lisää aiheesta