Tuotteiden ”rautalankamallien” luominen palautteen keräämiseksi ennen täysimittaisen toteutuksen aloittamista on paljon vanhempi käytäntö kuin useimmat meistä ymmärtävät. Jo keskiajalla insinöörit (jos heitä tuolloin sellaisiksi kutsuttiin) valmistivat työkaluista ja esineistä prototyyppejä ja esittelivät niitä herroilleen ennen massatuotannon aloittamista.
Myös nykyinen ohjelmistomaailma on luonnollisesti omaksunut tämän prosessin. Toisin kuin tuotteen prototyypin rakentaminen, nykyaikaiset rautalanka- ja prototyyppityökalut mahdollistavat prototyypin testaamisen vielä aikaisemmassa vaiheessa – kun sitä vasta suunnitellaan.
Tänään keskitymme ohjelmistoprototyyppien rakentamisen tärkeimpään osaan – tarkkaan rautalankamalliin, joka mahdollistaa vuorovaikutteisuuden ja herättää konseptin eloon.
Tarkan rautalankamallin ymmärtäminen
Ennen kuin selitän, mitä tarkat rautalankamallit ovat, käsittelen ensin lyhyesti rautalankamallin tarkkuuden käsitettä.
Tarkkuudella tarkoitetaan yksityiskohtien määrää, jonka sisällytät rakentaessasi tuotteen rautalankamallia. Kyse voi olla visuaalisista yksityiskohdista, kuten brändiäsi edustavien käyttöliittymäkomponenttien väreistä tai näytöllä oleviksi tarkoitetuista kuvista (esimerkiksi verkkokaupan hakutuloksissa olevista tuotekuvista).
Visuaalisten ominaisuuksien lisäksi on olemassa myös sisällön tarkkuus. Tällöin käytät joko paikkamerkkitekstiä tai -sisältöä (esimerkiksi lorem ipsumia) tai todellista sisältöä (tuotenimiä ja kuvauksia).
Rautalankamallisi tarkkuudesta riippuen käytät joko harmaasävyisiä visuaalisia elementtejä, joiden ulkoasu on yleisluonteinen ja sisältö paikkamerkkisisältöä (matala tarkkuus), tai brändin mukaista värimaailmaa ja suunnittelujärjestelmäsi elementtejä todellisen sisällön ohella (korkea tarkkuus).
Tällaisilta ne näyttävät rinnakkain.
Vaikka voisit ajatella, että tarkat rautalankamallit ovat näistä kahdesta vaihtoehdosta ilmeinen valinta, asia ei aina ole näin. Matalan tarkkuuden mallien etu on nopeus, jolla voit suunnitella, testata niitä käyttäjillä ja kehittää niitä iteratiivisesti.
Suunnittelusi hyvin varhaisissa vaiheissa käytkin yleensä läpi muutaman iteraation matalan tarkkuuden rautalankamallilla ennen kuin siirryt luomaan tarkan rautalankamallin.
Tarkkojen rautalankamallien hyödyt
Tarkat rautalankamallit vaativat enemmän aikaa, mutta ne ovat erittäin arvokas osa suunnitteluprojektiasi, sillä niihin liittyy monenlaisia hyötyjä. Tässä niistä muutama:
- Parempi viestintä: Ihmiset ovat visuaalisia olentoja ja ymmärtävät suunnittelun paremmin, kun käytät oikeita värejä, elementtejä ja sisältöä. Siksi on hyvin mahdollista, että sama henkilö hyväksyy matalan tarkkuuden rautalankamallisi, mutta löytää ongelmia ja antaa palautetta nähdessään tarkan version ensimmäistä kertaa.
- Parempi käytettävyystestaus: Käyttäjiltä saamasi palautteen laatu paranee, kun näytät todellisen sisällön sellaisena kuin se näkyy lopullisessa suunnittelussa. Hakutulossivu näyttää matalan tarkkuuden rautalankamallissa harmaiden laatikoiden luettelolta. Et voi sanoa, ovatko sivun elementit helposti silmäiltävissä, ennen kuin näet siinä oikeita kuvia ja kirjoitettua tekstiä.
- Prototypointi: Napsautettavat prototyypit ovat surkeita, kun ne rakennetaan matalan tarkkuuden rautalankamallien pohjalta. Tarkat prototyypit puolestaan näyttävät hyvin samanlaisilta kuin lopullinen suunnittelu ja ovat riittävän hyviä jaettaviksi varhaisessa vaiheessa oleville käyttäjille.
- Suunnittelu- ja teknisen tiimin välinen viestintä: Voit jakaa tarkat rautalankamallisi kehitystiimisi kanssa ja saada myös heiltä varhaista palautetta toteutuksen haasteista ja huolenaiheista. Niissä on riittävästi yksityiskohtia, jotta kehittäjät ymmärtävät, miten he toteuttavat sen ja millaisia ongelmia he saattavat kohdata.
Lopuksi tarkat rautalankamallit voivat näyttää tuotteen lopullisen ulkoasun ja käyttötuntuman sinulle ja suunnittelijakollegoillesi. Näin voit löytää suunnittelun epäjohdonmukaisuudet tai muut visuaaliset ongelmat, jotka on korjattava ennen käyttöliittymän viemistä uuteen testikierrokseen.
Tarkan rautalankamallin luomisen työkalut ja ohjelmistot
Vaikka matalan tarkkuuden rautalankamalleja voi teknisesti tehdä paperille tai valkotaululle, tarkan rautalankamallin luomiseen on valittava erityinen tuotesuunnittelutyökalu .
Katsotaan siis muutamaa suosittua vaihtoehtoa, joista voit valita itsellesi sopivan, ja tutustutaan niiden ominaisuuksiin.
Have an account? Log In
Figma
Figma on digitaalisen tuotesuunnittelun markkinajohtaja: yli 40 % kaikista käyttökokemussuunnittelijoista valitsee sen prototypointiin, käyttäjäpolkuihin ja rautalankamallien suunnitteluun.
Alustat: verkko, työpöytä (MacOS, Windows)
Missä se loistaa: suunnittelijoiden, esihenkilöiden ja kehittäjien välinen reaaliaikainen yhteistyö sekä useiden alustojen tuki.
Ominaisuuksien osalta haluan nostaa Figmasta esiin seuraavat asiat:
Yhteistyö: Figma mahdollistaa useiden tiimin jäsenten työskentelyn samassa tiedostossa samanaikaisesti. Näet kaikkien suunnittelutiedostoa selaavien tai muokkaavien henkilöiden kohdistimet, voit jättää kommentteja ja keskustella reaaliaikaisesti, kun kohdistimesi viereen avautuu pieni viestiruutu.
Suunnittelujärjestelmä ja komponenttituki: Figmassa voi luoda uudelleenkäytettäviä komponentteja, mukaan lukien niiden useita tiloja, sekä määrittää kokonaisen suunnittelujärjestelmän omien ohjeiden ja komponenttien avulla.
Prototyypit: Voit muuntaa suunnitelmasi napsautettaviksi prototyypeiksi, joita käyttäjät voivat selata saadakseen käsityksen siitä, miltä tuotteesi tuntuisi käytössä. Vaikka kyseessä ei ole markkinoiden edistynein prototyyppijärjestelmä, se on silti varsin monipuolinen.
Sketch
Sketch oli ennen Figman yleistymistä ensisijainen suunnittelutyökalu, ja se on suosittu vaihtoehto Framerille ja muille suosituille suunnittelutyökaluille. Jotkut arvelevat, että sen rajoittuminen Macille oli yksi syy siihen, miksi tämä muuten erinomainen työkalu menetti asemansa.
Alustat: macOS
Missä se loistaa: Sketch on erittäin muokattavissa laajan liitännäistukensa ansiosta, mikä tekee siitä erinomaisen vaihtoehdon erityisiin suunnittelutarpeisiin.
Tarkastellaan seuraavaksi Sketchin merkittävimpiä ominaisuuksia.
Vektorien muokkaus: Sketchillä on muiden työkalujen vertailussa todennäköisesti markkinoiden monipuolisin vektorien muokkaustyökalu, joka tukee myös Boolen ja leikkausoperaattoreita muotojen määrittämistä varten.
Verkon esikatselu: Vaikka Sketch ei ole täysimittainen muokkain, siinä on verkkosovellus suunnitelmien tarkastelua, aineistojen luovuttamista kehittäjille ja prototyyppien testaamista varten.
Prototyypit: Sketchin prototyyppiominaisuudet ovat Figman tasolla. Voit yhdistää tässäkin kuvataulusi työnkuluksi, tehdä elementeistä napsautettavia ja paljon muuta.
Adobe XD
Tämä on luovien ohjelmistojen jättiläisen Adoben vastaus rautalankamallien ja käyttöliittymä-/käyttäjäkokemussuunnittelun markkinoiden kovaan kilpailuun.
Alustat: macOS, Windows
Missä se loistaa: Adobe XD on täysin integroitu Adoben Creative Cloudiin, joten voit tuoda suunnitelmia ja aineistoja saumattomasti muista Adoben työkaluista ja muualta.
Kun tämän työkalun ominaisuuksia on tullut kokeiltua, seuraavat asiat on myös syytä mainita:
Prototyypit: Adobe XD erottuu kyvyllään prototypoida mikrovuorovaikutuksia tavallisen prototyyppityökalupaketin lisäksi.
Animaatiot: Koska Adobe kuuluu After Effectsin luoneeseen yritykseen, ei ole yllättävää, että Adobe XD tarjoaa kehittyneemmät käyttöliittymäelementtien animointiominaisuudet.
Yhteistyö: Vaikka Adobe XD ei ole yhtä edistynyt kuin Figma, se mahdollistaa useiden henkilöiden muokata suunnitelmaa samanaikaisesti.
Axure RP
Kun muut työkalut olivat yleisiä käyttöliittymä- ja käyttäjäkokemussuunnittelun työkaluja, joilla voi tehdä myös rautalankamalleja ja prototyyppejä, tämä työkalu keskittyy erityisesti jälkimmäisiin.
Alustat: macOS, Windows
Missä se loistaa: Erikoistuneena työkaluna Axure RP mahdollistaa edistyneen prototypoinnin monimutkaisilla vuorovaikutuksilla ja käyttäjäpoluilla.
Tarkastellaan nyt tämän työkalun sisältämiä toimintoja:
Edistynyt logiikka: Sen sijaan, että toiminto olisi vain ”avaa seuraava piirtoalue napsauttamalla”, Axure RP:llä prototyyppeihin voidaan lisätä monimutkaista logiikkaa. Tämä tarkoittaa, että voit avata valikoita ja valita kohteita, jolloin ulkoasu ja sisältö muuttuvat dynaamisesti valintasi tai muiden vastaavien toimintojen perusteella.
Luovutusdokumentaatio: Vaikka lähes kaikissa tässä mainituissa tuotteissa on kehittäjille tarkoitettu luovutusominaisuus, Axure RP on ainoa vaihtoehto, jossa voit luoda erittäin yksityiskohtaisen dokumentaation, joka kuvaa suunnittelusi ja sen logiikan.
Vuokaaviot: Korkean tarkkuuden rautalankamallin suunnittelun lisäksi voit käyttää Axure RP:tä myös vuokaavioiden luomiseen. Niissä kuvataan käyttäjän kulku ja suunnittelusi taustalla oleva liiketoimintalogiikka.
Yhteenvetona voidaan todeta, ettei ”parhaalle korkean tarkkuuden rautalankamallityökalulle” ole selkeää voittajaa. Tässä luetelluilla työkaluilla, kuten myös kuratoidussa UX-suunnittelutyökalujen koosteessamme, on sekä vahvuuksia että heikkouksia. Kyse on siis pitkälti mieltymyksistä sen mukaan, mitkä osa-alueet ovat sinulle ja tiimillesi tärkeimpiä.
Korkean tarkkuuden rautalankamallien luomisen parhaat käytännöt
Kun suunnitteluprosessisi on viimein siinä vaiheessa, että on aika kehittää tämäntyyppinen rautalankamalli, noudata näitä vinkkejä saadaksesi mahdollisimman paljon hyötyä korkean tarkkuuden mallistasi.
Rautalankamalliprosessin parhaat käytännöt
- Varmista, että käyttäjäpersoonasi on ajan tasalla. Sinulla on jo ennestään versio persoonasta, jota käytit ensimmäisen matalan tarkkuuden suunnitelmasi luomiseen. Tämä persoona on kuitenkin todennäköisesti vanhentunut, koska olet jo tehnyt sen kanssa useita testauskierroksia ja löytänyt monia uusia puolia sen persoonallisuudesta ja tarpeista.
- Käy kaikki aiempi käyttäjäpalaute läpi ennen korkean tarkkuuden rautalankamallin aloittamista. On hyvin mahdollista, että matalan tarkkuuden version tarkastelun yhteydessä käyttäjiltä saamasi palautteen joukossa oli asioita, joita pidit tuolloin epäolennaisina mutta jotka ovat nyt erittäin merkityksellisiä.
- Rautalankamallista ei ole olemassa ”lopullista versiota”. Älä takerru liikaa pieniin yksityiskohtiin. Sen sijaan, että työstäisit yksityiskohtaista rautalankamallia viikkojen ajan, tee pari muutosta ja kokeile sitä käytännössä. Mitä lyhyempi sykli on tiimisi suunnitteluideoiden lisäämisen ja käyttäjien suorittaman testauksen välillä, sitä nopeammin saavutat pisteen, jossa rautalankamallisi on valmis muuttumaan lopulliseksi suunnitelmaksi.
- Hyödynnä suunnittelujärjestelmäsi komponentteja ja malleja. Alusta aloittamisesta ei jaeta palkintoja! Näiden mallien käyttö säästää paljon aikaa, ja lopputulos näyttää mahdollisimman paljon lopulliselta suunnitelmalta.
Rautalankamallin suunnitteluvinkkejä
Edellä annettujen suunnitteluprosessin tehokkaaseen toteuttamiseen liittyvien neuvojen lisäksi tässä on muutamia itse suunnitteluun liittyviä vinkkejä.
- Pidä suunnittelusi johdonmukaisena. Vaikka kyseessä on edelleen rautalankamalli eikä lopullinen suunnitelma, suosittelen pitämään kaiken johdonmukaisena, mukaan lukien värit, typografia ja tyhjä tila. Näin varmistat, etteivät suunnittelua testaavat ihmiset kohtaa tarpeettomia käytettävyysongelmia tai anna sinulle puolueellista palautetta.
- Säilytä visuaalinen hierarkia. Teknisesti sen pitäisi olla jo mukana myös matalan tarkkuuden versiossa. Jos näin ei kuitenkaan ole, lisää se tässä vaiheessa. Voit sitten käyttää korkean tarkkuuden rautalankamallejasi visuaalisen hierarkiasi tehokkuuden testaamiseen.
- Lisää suunnitteluusi saavutettavuutta tukevia elementtejä. Korkean tarkkuuden rautalankamallit ovat myös erinomainen työkalu suunnittelusi saavutettavuuden testaamiseen. Varmista siis, että asetat oikeat kontrastisuhteet päällekkäin oleville eri elementeille, ja pidä mielessä myös muut saavutettavuuteen liittyvät näkökohdat.
Lopuksi muista tarjota visuaalisia apuvälineitä suunnittelua testaaville käyttäjille. Tämä on erityisen tärkeää silloin, kun testaat vain osaa tuotteesi suunnittelusta ja jotkin näytöt tai vaiheet puuttuvat. Jotta käyttäjät eivät hämmenny, muista näyttää muistiinpanoja, jotka selittävät, missä kohtaa käyttäjäpolkua he sillä hetkellä ovat ja mitä heidän on tarkoitus tehdä.
Korkean tarkkuuden rautalankamallinnuksen edistyneet tekniikat
Edellä kuvatut parhaat käytännöt auttavat sinua saamaan aikaan ”riittävän hyvän” version korkean tarkkuuden rautalankamallistasi. Jos kuitenkin haluat luoda jotain hämmästyttävää, harkitse näiden edistyneiden tekniikoiden käyttöä.
Interaktiiviset rautalankamallit
Joihinkin suosittuihin rautalankamallityökaluihin kuuluu prototyyppien luomiseen tarkoitettuja ominaisuuksia. Joten mikset hyödyntäisi niitä ja herättäisi rautalankamalliasi eloon? Voit tehdä käyttöliittymäelementeistä napsautettavia ja antaa käyttäjien siirtyä näytöstä toiseen – jäljitellen matkaa, jonka he tekevät oikeassa sovelluksessa. Suosittelen lisäämään animoituja siirtymiä, jotka tekevät sivun tai näytön muuttumisesta käyttäjillesi havaittavampaa.
Voit myös lisätä animaatioita ja siirtymiä mobiilisovelluksesi tai verkkosuunnittelusi eri elementteihin ja nähdä, auttavatko ne käyttäjiäsi huomaamaan tietyn elementin näytöllä tai olemaan vuorovaikutuksessa sen kanssa tarkoittamallasi tavalla.
More Articles
Visuaalisen suunnittelun elementit
Jotta tarkkuudeltaan korkean tason rautalankamallisi edustaisi tuotettasi ja brändiäsi asianmukaisesti, voit harkita myös seuraavien asioiden sisällyttämistä:
- Typografia: Suunnitteluohjeidesi fontit, välit ja tekstivärit.
- Brändäys: Logosi, brändivärisi ja brändiäsi edustavat visuaaliset aineistot.
- Oikea sisältö: Sen sijaan että kirjoittaisit lorem ipsum -tekstiä kohtaan, jossa verkkokauppasovelluksesi suunnittelussa tulisi olla tuotekuvaus, kirjoita siihen todellinen tuotekuvaus.
- Oikeat visuaaliset aineistot: Jos näytöillesi suunniteltiin kuvituksia tai kuvia, lisää myös ne.
- Liukuvärit ja varjot: Ne tekevät rautalankamallistasi realistisemman ja auttavat lisäämään visuaalista hierarkiaa tai vuorovaikutuksia.
Huomautus: Kun on kyse vuorovaikutusten korostamisesta varjoilla, Googlen materiaalinen suunnittelu on paras esimerkki. Siinä varjoja käytetään näyttämään korkeus ja kertomaan käyttäjälle, onko elementin päällä hiiren osoitin, onko sitä napsautettu vai onko se käyttämättömässä tilassa.
Vinkkejä tiimityöskentelyyn
Sekä prototyyppien luominen että rautalankamallien suunnittelu ovat tehtäviä, joita ei koskaan tehdä yksin. Rakennat niitä joko suunnittelutiimisi kanssa, ideoit yhdessä tuotepäällikkösi kanssa tai keskustelet niistä sidosryhmiesi kanssa.
Siksi suosittelen seuraavia toimia suunnittelusi yhteistyö- ja kehitysprosessin helpottamiseksi:
- Järjestä säännöllisiä ideointitapaamisia. Kutsu mukaan tuotepäällikkösi ja muut suunnittelijat. Ehkä myös insinööri, sillä hän auttaa sinua valitsemaan teknisesti toimivimman suunnitteluratkaisun. Avainsana tässä on säännöllisyys: tapaamiset voivat olla kerran viikossa, kahden viikon välein tai harvemmin. On kuitenkin tärkeää järjestää näitä kokouksia jatkuvasti, sillä ne auttavat keksimään kiinnostavia ratkaisuja suunnitteluongelmiisi.
- Järjestä säännöllisiä suunnittelukatselmuksia. Jos työskentelet tiimissä, lähetä suunnittelusi muiden arvioitavaksi ja anna useiden tuoreiden silmäparien tarkastella sitä ja löytää ongelmia, jotka ovat saattaneet jäädä sinulta huomaamatta. Tämä prosessi parantaa merkittävästi suunnittelusi laatua ja auttaa tekemään siitä johdonmukaisen.
- Dokumentoi ajatuksesi ja kommenttisi. Lisää suunnitteluun merkintöjä ja kommentteja, jotka selittävät tiettyjä suunnittelupäätöksiäsi tai antavat kollegoillesi taustatietoa.
Varmista lopuksi, että kaikki rakentamasi on linjassa yrityksen strategian ja tuotevision kanssa. Keskustele siis asiasta tuotetiimisi ja yrityksen johdon kanssa.
Testaa suunnitteluasi kuin se olisi oikea tuote.
Tarkkuudeltaan korkean tason rautalankamallien käytön ehkä tärkein yksittäinen hyöty on niiden kyky esittää tuote mahdollisimman lähellä lopullista versiota. Tällä tavalla käyttäjäsi voivat testata tuotteesi visuaalista esitystä ilman, että sinun tarvitsee rakentaa varsinaista tuotetta.
Siksi kannustan sinua lämpimästi ottamaan rautalankamallien suunnitteluprosessin käyttöön ja hyödyntämään sitä suunnittelusi ja hypoteesiesi testaamiseen osana suunnittelutyönkulkuasi. Toivon, että olen tarjonnut riittävästi taustatietoa ja hyödyllisiä vinkkejä, jotta saat siitä mahdollisimman paljon irti.
Jos kuitenkin haluat perehtyä tähän aiheeseen syvällisesti, suosittelen lukemaan rautalankamallien suunnittelun täydellisen oppaan. Sen lisäksi voit myös tilata uutiskirjeemme saadaksesi lisää tuotehallinnan resursseja ja oppaita.
