5-vaiheinen rautalankamallinnusprosessi parempien tuotteiden rakentamiseen

By Suren Karapetyan

Luo parempia suunnitelmia, tee vähemmän hankalia muutoksia ja minimoi hukkaan heitetty aika.

Olen varma, että olet kuullut rautalankamallinnuksen hyödyistä joko tuotehallinnan kursseillasi tai kollegoiltasi ja työtovereiltasi. Oletan myös, että olet yrittänyt ottaa tuotteessasi käyttöön jonkinlaisen rautalankamallinnusprosessin.

Mutta toimiiko prosessisi hyvin? Saatko nykyisellä toteutustavallasi rautalankamalleistasi kaiken hyödyn irti? Se riippuu todella paljon käyttämästäsi prosessista.

Auttaakseni sinua tehostamaan rautalankamallinnusta haluan jakaa kokemukseni ja kertoa rautalankamallinnusprosessista, jonka olen havainnut parhaaksi.

Rautalankamallinnus on olennainen osa UX-suunnitteluprosessia

Rautalankamallit ovat tuotteesi korkean tason visuaalisia esityksiä, joiden avulla voit havainnollistaa, miltä haluat tuotteen näyttävän ja miten sen haluat toimivan. Näiden visualisointien avulla voit testata ja kehittää ideaasi ennen kuin pyydät insinöörejä mukaan ja aloitat kehitysprosessin – näin säästät aikaa ja rahaa.

Pidän todella paljon käyttäjäkokemuksen asiantuntijoiden NN/g:n määritelmästä rautalankamallinnukselle, sillä se tuo esiin siitä saatavan keskeisen hyödyn.

Nopea ja kustannustehokas tekniikka merkittävien käytettävyysongelmien tunnistamiseen varhaisessa vaiheessa luonnosten ja paperin avulla. Täydellinen valinta ketteriin ja Lean-prosesseihin.

Riippumatta siitä, minkä rautalankamallinnusmenetelmän valitset (paperille piirtäminen sopii tähän mainiosti!) tai mitä rautalankamallinnustyökalua päätät käyttää (tutustu tätä varten parhaiden rautalankamallinnustyökalujen luetteloomme), suosittelen noudattamaan tätä prosessia, jonka olen löytänyt kokeiltuani käytännössä kaikkia mahdollisia rautalankamallinnusprosesseja.

Vaihe 1: Varmista, että tunnet käyttäjäsi riittävän hyvin

Hyvä suunnittelu alkaa tiimistä, joka tuntee käyttäjänsä hyvin. Kuka loppujen lopuksi tarvitsee suunnitteluasi ja tuotetta, jota se havainnollistaa, jos se ei pysty palvelemaan asianmukaisesti niiden ihmisten tarpeita, joille se on tarkoitettu? Siksi tärkein vaihe ennen rautalankamallinnuksen aloittamista on käyttäjätutkimus.

Todellisuudessa käyttäjätutkimuksen tulisi jatkua koko rautalankamallinnusprosessin elinkaaren ajan (ja sen jälkeenkin), mutta keskitytään tässä alkuvaiheeseen, jolloin yrität ymmärtää tulevien asiakkaidesi tarpeita ja arjen todellisuutta.

Tässä on joitakin tärkeitä toimia, joita suosittelen tekemään tämän vaiheen aikana:

Exploratiiviset haastattelut: Haluatko tietää, mitä käyttäjäsi haluavat? Mikset siis kysy heiltä suoraan? Voit aloittaa laatimalla luettelon kysymyksistä, jotka auttavat käyttäjiäsi kertomaan kohtaamistaan ongelmista ja ratkaisuista, joita he käyttävät näiden ongelmien ratkaisemiseen.

Sen jälkeen voit tavoittaa ja rekrytoida potentiaalisia käyttäjiä sosiaalisen median kautta, erikoistuneilta alustoilta, kuten Userinterviews tai Respondent, tai tavata heitä jopa messuilla.

Lopuksi teet haastattelun joko tallentimen avulla (jotta voit analysoida sen myöhemmin) tai niin, että haastattelukumppani istuu vieressäsi ja tekee muistiinpanoja.

Huomautus: Ihannetapauksessa teet molemmat.

Kyselyt: Haastattelut ovat erinomainen laadullisen tiedon lähde, joka auttaa selvittämään käyttäjien tarpeiden ja käyttäytymisen taustalla olevia syitä. Kyselyt puolestaan tuottavat yhdistelmän laadullista ja määrällistä tietoa, minkä ansiosta voit vahvistaa havaintosi tilastollisesti merkitseviksi.

En mene tässä liian yksityiskohtaisiin asioihin, sillä meillä on kokonainen opas kyselykysymyksistä, johon voit tutustua.

Kenttätutkimukset: Tässä tapauksessa tarkkailet käyttäjiäsi heidän ”luonnollisessa elinympäristössään”. Se tarkoittaa, että olet joko virtuaalisesti tai fyysisesti läsnä ympäristössä, jossa kohdekäyttäjäsi kohtaavat ongelmia, joita haluat ratkaista.

Oletetaan esimerkiksi, että rakennat työkalua, jonka avulla sosiaalisen median videoiden muokkaaminen on helppoa. Kenttätutkimuksesi voisi tarkoittaa sosiaalisen median vaikuttajan prosessin seuraamista tämän kuvatessa TikTok-videota, muokatessa sitä ja ladatessa sen kanavalleen.

Vaikka kenttätutkimuksia on suhteellisen vaikea järjestää (kaikki käyttäjät eivät tunne oloaan mukavaksi, jos seuraat heidän päivittäisiä toimiaan), ne tarjoavat rikkaimman kontekstin ja eniten oppeja käyttäjistäsi.

Sidosryhmien kanssa järjestettävät löytämistyöpajat: Kyllä, hyvä käyttäjäkokemuksen suunnittelu rakentuu käyttäjien tarpeiden ympärille, mutta älkäämme unohtako myöskään keskeisiä sidosryhmiäsi. Vaikka käyttäjätkin ovat sidosryhmiä, käytän tätä termiä tarkoittamaan perustajiasi ja johtoryhmääsi, sijoittajiasi sekä kaikkia kanssasi työskenteleviä oikeudellisia tai sääntelyviranomaisia ja muita vastaavia tahoja.

Joskus teet suunnittelupäätöksiä et käyttäjien tarpeiden perusteella, vaan otat huomioon seuraavat asiat:

  • Visiosi ja strategiasi: Applen käyttäjät pitävät johdoista ja langallisista yhteyksistä, mutta Applella on langaton visio – siksi se poistaa jatkuvasti liitäntöjä. (Nyt tiedät!)
  • Oikeudellinen ympäristösi: Laaja evästeasetusten valikoima ei ole käyttäjäystävällisin käyttöliittymä, mutta saatat olla lain mukaan velvollinen näyttämään sen.
kuva Google-blogista
Lähde: Google-blogi

Myös intuitiolle on paikkansa – vaikka tuntisit käyttäjäsi hyvin, saatat käyttää omaa intuitiotasi jonkinlaisen suunnitteluratkaisun tekemiseen.

Kun tutkimuksen käsite ja tyypit ovat selvillä, havainnollistetaan seuraavaksi esimerkin avulla, miltä tämä näyttää käytännössä.

Get Free Access to the Product Vault
We’ve collected the goods — AI prompts, exclusive deals, and a library of resources for product leaders. Unlock your account for access.
Get Free Access

Have an account? Log In

Esimerkki 1: Rautalankamallityökalun luominen käyttöliittymäsuunnittelijalle

Kuvitellaan, että vastuullasi on rautalankamallityökalun (jonkin Balsamqicin kaltaisen) luominen ja haluat tietää tarkasti, miten kohdekäyttäjäsi (tässä tapauksessa suunnittelutiimit) käyttävät sitä ja mitä ongelmia he haluavat ratkaista.

Selvittääksemme tämän voimme laatia kyselylomakkeen, jonka haluamme esittää käyttäjillemme haastattelun aikana. Voimme sisällyttää siihen esimerkiksi seuraavat kysymykset:

grafiikka käyttöliittymäsuunnittelijan rautalankamalliprosessista

Kuvitellaan nyt, että saamme selville palautteen olevan pääasiassa tiettyä tuotteen rautalankamallin osaa koskevia kommentteja ja että tuotepäällikön on hyväksyttävä rautalankamallin suunnittelu. Nämä ovat kaksi havaintoa, jotka vaikuttavat suoraan suunnitteluumme, sillä meidän on suunniteltava työnkulku ja käyttöliittymä rautalankamallin kommentointia ja hyväksymistä varten.

Yhteenvetona voidaan todeta, että selvitystutkimuksen tekeminen on rautalankamalliprosessin tärkein osa, enkä suosittele sen ohittamista. Kun kaikki opit ovat nyt hallussasi, siirrytään rautalankamalliprosessin seuraavaan vaiheeseen.

Vaihe 2: Rakenna käyttäjäpolkusi

Ennen kuin luot itse näkymiä tai sivuja ja sijoitat niille komponentteja, kuten lomakkeita, kortteja, kuvia ja painikkeita, sinun on ymmärrettävä niiden vaiheiden järjestys, joita kuvittelet käyttäjiesi suorittavan.

Näitä jaksoja kutsutaan myös käyttäjäpoluiksi, ja ne kuvaavat kaikkia mahdollisia reittejä, joita käyttäjät voivat kulkea tavoitteidensa saavuttamiseksi. Tavoitteet voivat olla jotain tavallista ja ”hallinnollista”, kuten rekisteröityminen tai salasanan vaihtaminen, tai ne voivat liittyä ydintoimintoihisi, kuten musiikin hakemiseen ja suoratoistoon Spotifyssa.

Joka tapauksessa käyttäjäpolkujen rakentaminen on tärkeää, sillä se auttaa sinua hahmottamaan paremmin kaikki näkymät ja sivut, jotka haluat suunnitella, sekä kussakin tarvittavan sisällön.

Jotta ymmärtäisit käyttäjäpolkuja paremmin, näytän sinulle yhden käyttäen Flowmapp-työkalua, jolla voi luoda vuokaavioita.

Esimerkki 2: Verkkosuunnittelutyökalun käyttäjäpolun visualisointi Flowmappia käyttäen

Oletetaan, että rakennat Webflown kaltaista vedä ja pudota -periaatteella toimivaa verkkosuunnittelutyökalua. Käyttäjäsi ovat koodittomia verkkosuunnittelijoita, ja haluat visualisoida vaiheet, joiden avulla he lisäävät verkkosivulleen taustakuvan.

Tältä kyseisen ominaisuuden käyttäjäpolku näyttää Flowmappissa:

kuvakaappaus Flowmappin käyttäjäpolusta

Kuten näemme, käyttäjäpolussa painotetaan enemmän käyttäjän suorittamia toimintoja sekä niiden välistä järjestystä ja syy-seuraussuhdetta kuin sivuja ja niiden suunnittelua.

Tässä esimerkissä haluamme, että käyttäjä voi valita kuvan galleriasta tai ladata kuvan galleriaan tai lisätä sen sinne. Haluamme myös, että käyttäjä voi esikatsella kuvaa ennen kuin työkalumme käyttää sitä käyttäjän verkkosivun taustana.

Tarkastelemalla tätä käyttäjäpolkua ymmärrämme, että käyttäjä pysyy samalla sivulla eli verkkosivueditorissa, ja saattaa nähdä toisen näkymän, jossa kuvagalleria näytetään ponnahdusikkunana.

Suunniteltavana on siis sivu ja ponnahdusikkuna, joihin tarvitaan asiaankuuluvat suunnitteluelementit ja ominaisuudet.

Kun meillä on yleiskuva vaiheista, joita käyttäjät suorittavat saavuttaakseen tavoitteensa tuotteessamme, voimme viimein aloittaa varsinaisen rautalankamallinnuksen.

Vaihe 3: Aloita matalan tarkkuuden rautalankamallista

Kyllä, rautalankamallin tekeminen on tämän rautalankamalliprosessin kolmas vaihe. Usko kuitenkin, että kahden edellisen vaiheen tekeminen nostaa rautalankamallisi laadun aivan uudelle tasolle, joten niihin kannattaa ehdottomasti käyttää aikaa.

Itse rautalankamallin osalta suosittelen aloittamaan matalan tarkkuuden mallista. Matalan tarkkuuden rautalankamalli ei sisällä sivujesi ja näkymiesi tarkkoja yksityiskohtia, kuten oikeita värejä, kokoja tai muita suunnittelumääritteitä. Se ei myöskään sisällä oikeita kuvia tai tekstiä. Niiden sijaan käytät molemmille paikkamerkkejä.

Ja tähän, miksi matalan tarkkuustason rautalankamalli on tällainen ja miksi sinun kannattaa aloittaa siitä, on hyvä syy – matalan tarkkuustason rautalankamallit on nopea rakentaa ja muokata.

On hyvin mahdollista, että suunnittelustasi on jäänyt huomaamatta jotain varsin tärkeää. Kun keräät siitä palautetta (käsittelemme tätä yksityiskohtaisesti seuraavassa vaiheessa), saatat ymmärtää, että monia kohtia ja työnkulkuja täytyy muuttaa.

Jos sinulla olisi valmis suunnitelma, näiden muutosten tekemiseen olisi kulunut päiviä. Matalan tarkkuustason rautalankamallin avulla voit kuitenkin tehdä muokkaukset ja viedä suunnitelmasi uudelle palautekierrokselle muutamassa tunnissa tai nopeammin.

Kun olemme nyt ylistäneet matalan tarkkuustason rautalankamalleja näin paljon, katsotaan, miltä ne näyttävät suositulla rautalankamallien suunnittelutyökalulla Balsamiqilla.

Esimerkki 3: verkkosivuston rautalankamallin luominen

Rautalankamallien, erityisesti matalan tarkkuustason rautalankamallien, suunnitteluun erikoistuneiden työkalujen hienous on siinä, ettei jokaista elementtiä tarvitse piirtää alusta alkaen.

Sen sijaan niissä on yleensä valmiina useita peruskäyttöliittymäelementtejä (esimerkiksi kuvia, valikoita, murupolkuja, painikkeita ja niin edelleen) sekä vedä ja pudota -toiminnot, joiden avulla suunnittelu on erityisen nopeaa. Tässä on esimerkki, jonka olen rakentanut Balsamiqilla.

esimerkki Balsamiqilla rakennetusta verkkosivuston rautalankamallista

Matalan tarkkuustason rautalankamallien luonteen vuoksi ne ovat yleensä harmaasävyisiä tai niissä on vain vähän värejä ja visuaalista suunnittelua. Sen sijaan näet ainoastaan suunnitelmasi käyttöliittymäelementtien yleisen ulkoasun sekä niiden sijoittelun ja tietoarkkitehtuurin.

Kun matalan tarkkuustason rautalankamallisi on valmis, on aika viedä se ensimmäiselle arviointikierrokselle.

Vaihe 4: kehitä matalan tarkkuustason suunnitelmaasi sisäisesti

Ennen kuin käytämme aikaa ja vaivaa lopullisen tuotteen suunnittelun rakentamiseen, oletetaan perustellusti, että olemme tehneet suunnittelussa monia asioita väärin tai unohtaneet ottaa jotain huomioon, ja aletaan näyttää matalan tarkkuustason rautalankamalliamme kollegoillemme ja sidosryhmillemme.

Voisit toki näyttää tämän suunnitelman myös käyttäjillesi. Kun kuitenkin otetaan huomioon, kuinka vaikeaa on rekrytoida käyttäjiä, jotka haluavat arvioida suunnitelmaasi tai testata sen käytettävyyttä, suosittelen käyttämään heidän arvokkaan aikansa tarkempien suunnitelmien tarkasteluun sen sijaan, että tuhlaat heidän aikaansa sellaisten ongelmien osoittamiseen, jotka kollegasi olisivat helposti löytäneet.

Suosittelen kuitenkin ottamaan sidosryhmät mukaan tässä vaiheessa. Tähän on kaksi keskeistä syytä:

  • Pienennetään heidän ja tuotetta rakentavien tiimin jäsenten välistä ”etäisyyttä” ottamalla heidät mukaan jo varhaisessa vaiheessa.
  • Korjataan strategiseen yhteensopivuuteen liittyvät suunnitteluongelmat varhaisessa vaiheessa, jotta säästät myöhemmin aikaa.

Kun olet lopuksi kerännyt palautetta kollegoiltasi ja sidosryhmiltäsi, voit korjata matalan tarkkuustason rautalankamallisi palautteen perusteella, varmistaa korjausten toimivuuden heidän kanssaan ja siirtyä tekemään tuotteesi varsinaista visuaalista suunnittelua.

Vaihe 5: valmistele korkean tarkkuustason rautalankamalli ja napsautettava prototyyppi

Kun ymmärrät kunnolla, miltä suunnitelmasi tulee yleisellä tasolla näyttämään, voit turvallisesti käyttää aikaa suunnitelmasi visuaalisten osien luomiseen ja saattaa sen tilaan, jossa se näyttää mahdollisimman paljon siltä, mitä aiot rakentaa.

Tässä suunnitteluvaiheessa digitaalinen rautalankamallisi sisältää:

  • Käyttöliittymäsuunnitelmasi: oikeat värit, varjot, typografia ja fontit, marginaalit ja niin edelleen.
  • Visuaalisen sisältösi: jos aiot käyttää sivuillasi kuvia, kuvituksia, videoita tai muita graafisia elementtejä, lisäät ne tässä vaiheessa.
  • Sivusi tekstisisällön: tällä tarkoitetaan käyttöliittymäelementeissä, painikkeissa, otsikoissa ja niin edelleen olevaa tekstiä.
  • Sisältösi malliversion: jos suunnitelmasi sisältää käyttäjien luomaa sisältöä tai omaa sisältöäsi, lisää siitä myös malliversio. (Esimerkiksi julkaisun alla olevan kommentin suunnitelma, jonka koko ja sisältö vastaavat todellisten käyttäjiesi kirjoittamaa tyypillistä kommenttia.)

Korkean tarkkuustason rautalankamalli toimii paitsi tuotteen suunnitelman perusteella rakentavan teknisen tiimisi tärkeimpänä toimitettavana kokonaisuutena, myös erinomaisena työkaluna käytettävyystestaukseen todellisten käyttäjiesi kanssa.

Voit käyttää testissä joko korkean tarkkuustason rautalankamallia sellaisenaan tai viedä sen seuraavalle tasolle lisäämällä siihen vuorovaikutussuunnittelun ja muuttaa sen napsautettavaksi prototyypiksi.

Tässä käsitellyt termit (korkean tarkkuustason rautalankamallit, vuorovaikutteiset prototyypit ja niin edelleen) on todella helppo sekoittaa keskenään. Selvennetään siis niitä hieman ja katsotaan samalla pari esimerkkiä.

More Articles

Rautalankamallien eri tyyppien erottaminen toisistaan: mallikuvat, korkean tarkkuustason rautalankamallit ja napsautettavat prototyypit

Nämä kolme käsitettä ovat melko samankaltaisia keskenään, ja valitettavasti ihmiset käyttävät niitä toistensa synonyymeina – mikä aiheuttaa hämmennystä niiden keskuudessa, jotka ovat suhteellisen uusia tuotteen ja suunnittelun parissa.

Tässä on kunkin termin merkitys:

Korkealaatuinen rautalankamalli: Käsittelimme tätä jo edellä. Näytän sen sijaan, miltä se näyttää.

kuva korkealaatuisesta rautalankamallista
Lähde: Anastasia Dvorzhanska

Tämä vaikuttava suunnitelma on tarkoitettu palvelulle, jonka avulla voit palkata yksityisiä kokkeja valmistamaan sinulle korkeatasoisia ruokia. Kuten näemme, tämä suunnitelma sisältää kaiken aina lopullisista kuvista väreihin ja sijoitteluun. Siinä on myös hieman ”lorem ipsum” -tekstiä edustamassa sivulla olevaa ammattikokin suositusta.

Mallikuva: Toisin kuin vastineensa, mallikuva ei sisällä ainoastaan lopullista suunnitelmaa, vaan se näyttää myös ympäristön, jossa suunnitelma esiintyy. Jos esimerkiksi suunnittelet kirjepohjaa, mallikuvassa näkyisi pöydällä oleva paperiarkki, jossa suunnitelmasi on esitetty.

kuva päivittäisestä mallikuvasta
Lähde: Daily Mockup

Mobiilisovelluksen tapauksessa mallikuvassa näkyy iPhonen tai Android-laitteen siluetti, jonka näytöllä suunnitelmasi esitetään.

Prototyyppi: Prototyyppi näyttää korkealaatuiselta rautalankamallilta, mutta lopullisen ulkoasun lisäksi se pyrkii jäljittelemään myös tuotteen toiminnallisuutta.

Vuorovaikutteisten prototyyppien tai 3D-prototyyppityökalujen avulla voit lisätä perusinteraktiivisuutta, kuten vierittämistä, animaatioita, painikkeiden napsauttamista ja sovelluksessa navigointia.

kuva prototyypistä
Lähde: UXPin

Jäljittelemällä tuotteesi vuorovaikutteisuutta prototyyppien avulla voit testata, miten haluat ominaisuuksiesi toimivan, ennen kuin kehität ne.

Lisäksi voit tehdä käyttäjätestausta antamalla korkealaatuiset prototyyppisi käyttäjille ja seuraamalla, miten he ovat vuorovaikutuksessa tuotteesi kanssa, ratkaisevat ongelmiaan tai yrittävät löytää tiensä suunnitelmasi läpi.

Rautalankamallien laatiminen on testaamisen ja iteroinnin peliä

Rautalankamallien iteratiivisen luonteen ansiosta voit säästää valtavasti vaivaa virheidesi korjaamisessa. Lisäksi käymällä läpi tämänkaltaisen rautalankamallien laatimisprosessin varmistat, että käyttäjäsi saavat tuotteen, joka palvelee heidän tarpeitaan parhaalla mahdollisella tavalla.

Käytätkö yrityksessäsi erilaista rautalankamallien laatimisprosessia? Kuulisin siitä mielelläni, joten jätä kommentti alle ja kerro, miten teet sen!

Toivon, että pidit tästä oppaasta ja löysit sen hyödylliseksi. Tutustu myös muihin tuotehallintaa käsitteleviin oppaisiin, joita ovat kirjoittaneet alan parhaat ammattilaiset, kuten:

Lopuksi voit tilata uutiskirjeemme, niin lähetämme myös sinulle kiinnostavaa sisältöä suoraan sähköpostiisi.

Suren Karapetyan
Suren Karapetyan, MBA, is a principal product manager focused on AI-driven SaaS products. He thrives in the fast-paced world of early stage startups and finds the product-market fit for them. His portfolio is quite diverse, ranging from background noise cancellation tools for work-from-home folks to customs clearance software for government agencies.
Follow the author:

You may also like