Käyttöliittymien suunnittelu ja prototyyppaus Adobe XD:llä

Käyttöliittymän suunnittelu on helppoa. Aluksi.

Kaikki lähtee asiakkaan ideasta, jossa käyttäjälle on kaavailtu uusia mahdollisuuksia. Kokenut koodari hahmottelee ajatusta hetken päässään, piirtelee karkeita kulkukaavioita siitä, mitä dataa kulkee minnekin, ja avaa lopulta koodieditorin. Käyttöliittymä ottaa muotoaan, mutta hetken päästä edessä on jokin seuraavista tilanteista:

1. Käyttöliittymä ei näytä hyvältä.
2. Haluttu toiminnallisuus onkin odotettua monimutkaisempi.
3. Jokin toiminto on unohtunut.
4. Asiakas ei pidä käyttöliittymästä.

Sorrun omassa työssäni valitettavan usein näihin tilanteisiin johtavaan ylimielisyyteen. Kuvittelen hahmottavani käyttöliittymään tarvittavat elementit ja niiden väliset vuorovaikutukset riittävän hyvin. Kuitenkin löydän itseni aina asettelemasta lomakkeiden virhe-elementtejä ja muita helposti unohdettavia komponentteja paikoilleen.

Sitten näytän lopputulosta asiakkaalle ja kaikki menee uusiksi.

Monen odottamattoman lisäyksen ja korjauksen jälkeen on alkuperäinen visio usein hämärtynyt ja koodipohja nopeiden korjausten jäljiltä hutera. Refaktorointiin palaa aikaa ja energiaa, eikä voi olla ajattelematta, miksi taas kerran jätti suunnittelun väliin.

Mielekästä suunnittelua Adobe XD:llä

Suunnittelun mieltää usein liian raskaana prosessina. Toteutettava käyttöliittymä on kuitenkin yksinkertainen ja vastaavia on tullut tehtyä jo monia. Näkymiä ei vaivauduta piirtämään paperille, hitaasti aukeavan kuvankäsittelyohjelman käynnistämisestä puhumattakaan. Jonkinlaisista leiskoista olisi tietysti apua, kunnes niiden implisiittisiä interaktioita pitää alkaa erittelemään asiakkaalle.

Kevyeeseen suunnitteluun on onneksi olemassa työkaluja — sellaisia, joilla käyttöliittymien prototyyppauksesta on oikeasti hyötyä itselle, omalle tiimille ja asiakasinteraktiolle. Käsittelen tässä kirjoituksessa ilmaista Adobe XD ohjelmaa, joka on käytettävissä sekä Windows että MacOS laitteilla. Samat periaatteet pätevät varmasti sen kilpailijoihin, kuten Sketch, inVision ja Figma.

Adobe XD:llä työskentelyn tuloksena on käyttöliittymän interaktiivinen prototyyppi, jonka voi lähettää asiakkaalle arvioitavaksi tai kehittäjätiimille työn tueksi. Tein esimerkkinä kolmesta näkymästä koostuvan pyöräkaupan. Sen arviointiversiota voi kokeilla niin kuin se olisi valmis sovellus. Painikkeet johtavat oikeisiin näkymiin ja siirtymät ovat ainakin havainnollistavassa muodossa paikoillaan. Kehittäjäversiosta ilmenee mm. käytetyt värit, fontit, kuvat ja näkymien väliset siirtymät.

Kullanarvoista prototyypeissä on asiakkaan mahdollisuus kommentoida niitä täsmällisesti. Jos painikkeen väri häiritsee, asiakas voi kiinnittää siihen merkin ja ilmaista huolensa lyhyesti tekstillä. Enää ei tarvitse murehtia siitä, kuinka olette pitkään puhuneet samasta asiasta eri nimillä tai eri asioista samalla nimellä. Merkki näyttää täsmällisesti mistä on kyse.

Konkreettinen prototyyppi poistaa omista ajatusprosesseista ”näyttääköhän tämä hyvältä” vaiheen. Keskittymisen voi ohjata ratkaisemaan miten asiat toteutetaan eikä miltä ne näyttävät toteutettuna. Kun tietää mihin on menossa, koodia menee merkittävästi vähemmän hukkaan.

Seuraavassa Adobe XD artikkelissa sukelletaan sovelluksen perusteisiin ja opetellaan käyttöliittymän prototyypin luomista käytännössä!