Alhaalla oleva välilehtipalkki, sivulaatikko ja kelluva toimintopainike (Floating Action Button, FAB) ovat yleisimmin käytettyjä malleja mobiilisovellusten ylätason navigointiin. Jos haluat suunnitella selkeitä ja yksinkertaisia navigointipolkuja, käytä sovelluksessasi jotakin näistä malleista.
Kerää mukaan varsinainen kopio
Sen jälkeen kun olet tyytyväinen visuaaliseen hierarkiaasi, aloita sijoitussalpaajien ja tekaistun tekstin korvaaminen oikealla sisällöllä (varsinainen kopio tai käyttäjälle merkityksellinen teksti). On tärkeä syy, miksi tässä vaiheessa tulisi välttää tyhjää tekstiä – Lorem Ipsum ei kerro, miten sivu tukee käyttäjiä heidän tavoitteidensa saavuttamisessa. Myös monet luomamme visuaaliset elementit perustuvat tuotteissamme olevaan sisältöön. Kun alat lisätä todellista sisältöä, huomaat, että jotkin käyttöliittymäelementit (tai jopa käyttöliittymäosiot) eivät ole tarpeellisia tuotteellesi.
Joskus, kun täytät rautalankamallisi todellisilla yksityiskohdilla, saatat huomata, että nykyinen ulkoasu ei toimi hyvin. Tällöin on tärkeää iteroida ja löytää parempi tapa esittää tiedot, joita yrität välittää.
Kun olet täyttänyt sivun todellisella kopiolla, testaa, sujuvoituuko sivu käyttäjän kannalta. Osa sivusi sisällöstä voi olla epäjärjestyksessä. Tämä on täydellinen hetki järjestää sivun sisältö uudelleen ja parantaa sommittelua.
Alhaalla on esimerkki kotinäytön rautalankamallista, jossa on todellista tietoa. Erilaisia fonttikokoja käytetään joidenkin UI-lohkojen (kuten ruokakategorioiden) priorisointiin.
Varmista, että sisältösi skaalautuu hyvin
Jos suunnittelusi näyttää hyvältä keskikokoisella puhelimen näytöllä, kuten iPhone XS:ssä, se ei tarkoita, että iPhone 5:n ja iPhone XS Maxin käyttäjät saavat yhtä hyvän kokemuksen. Vaikka on aivan hyvä aloittaa keskikokoisesta näytöstä rautalankamallinnusta tehdessäsi, on myös tärkeää tarkistaa, miltä sisältö näyttää eri näytön koossa (sekä pienemmillä että suuremmilla näytöillä), ja mukauttaa sitä tarvittaessa.
Kytke sivut toisiinsa luodaksesi virtauksen
Vaikkakin on mahdollista toimittaa muotoilu kokoelmana yksittäisiä näyttöjä, on kuitenkin parempi, että luodaan virtauksen luominen niistä. UX-virtojen avulla tiimin on helppo ymmärtää vuorovaikutusskenaarioiden yksityiskohdat – ne kertovat, miten ihmisten on tarkoitus olla vuorovaikutuksessa tuotteen kanssa.
UX-virtojen avulla voit myös miettiä sovelluksen toiminnallisuutta kokonaisuutena. Kun olet esimerkiksi visualisoinut UX-virran, saatat huomata, että sinun on otettava käyttöön ylimääräinen tila aloitusnäytön ja hakutuloksia sisältävän sivun väliin (koska järjestelmäsi backendillä kestää muutaman sekunnin palauttaa tulokset).
On myös hyvä antaa jokaiselle näytölle viitenumero. Viitenumerot helpottavat elämääsi huomattavasti, kun keskustelet projektista muiden tiimin jäsenten tai sidosryhmien kanssa.
Testaa suunnittelupäätöksesi
Testaaminen on rautalankamallinnuksen viimeisiä (ja tärkeimpiä) vaiheita. Testaaminen edellyttää käyttäjän vuorovaikutusta, minkä vuoksi tätä termiä käytetään usein prototyyppien yhteydessä. On kuitenkin mahdollista suorittaa yksinkertaista testausta rautalankakuvista luodulle virtaukselle. Balsamiqin avulla on mahdollista luoda yksinkertaisia klikattavia prototyyppejä linkittämällä rautalankakuvia toisiinsa. Tällaisen testauksen tavoitteena on nähdä, toimivatko näytöt yhdessä.
Johtopäätös
Lankamallinnuksen perimmäisenä tavoitteena on tunnistaa sisällön pääpiirteet ja luoda vankka perusta suunnitteluprosessin tuleville vaiheille. Hyvin suunnitellut rautalankakehykset tekevät visuaalisesta ja vuorovaikutussuunnittelusta paljon helpompaa.
Kuten missä tahansa suunnittelutoiminnassa, vietä tarpeeksi aikaa kokeilemalla erilaisia työkaluja ja prosesseja, niin löydät oman tyylisi rautalankakehitykseen. Harjoitus tekee mestarin.
Sanat Nick Babich
Originally published on Balsamiq’s UI Education Site