Suunnittele paremmin ja nopeammin nopealla prototypoinnilla

• 12 min. luettu
• Design,Web Design,Wireframing,Prototyping
• Tallennettu offline-lukemista varten
• Jaa Twitterissä, LinkedIn

Vanha sanonta ”kuva kertoo enemmän kuin tuhat sanaa” kuvaa hyvin sitä, mistä käyttöliittymäprototyyppien luomisessa on kyse: visuaalisten keinojen käyttäminen kuvaamaan tuhansia sanoja suunnittelu- ja kehityspesifikaatioita, joissa eritellään yksityiskohtaisesti se, miten järjestelmän pitäisi käyttäytyä ja näyttää. Käyttöliittymäsuunnittelun iteratiivisessa lähestymistavassa nopea prototyyppien luominen on prosessi, jossa nopeasti mallinnetaan järjestelmän tuleva tila, olipa kyseessä verkkosivusto tai sovellus, ja validoidaan se laajemmalla käyttäjistä, sidosryhmistä, kehittäjistä ja suunnittelijoista koostuvalla tiimillä.

Tämä nopea ja iteratiivinen lähestymistapa tuottaa palautetta varhaisessa vaiheessa ja usein prosessin aikana, mikä parantaa lopullista suunnitelmaa ja vähentää muutostarpeita kehityksen aikana.

Lisälukemista SmashingMagissa:

• Suunnittelun optimointi nopeaa prototyyppien testausta varten
• Oikean prototypointityökalun valitseminen
• Sisällön prototypointi responsiivisessa web-suunnittelussa
• Käyttäjän käyttöliittymäprototyyppien herättäminen henkiin (luomatta zombeja)

Prototyypit vaihtelevat karkeista paperilla tehdyistä luonnospiirroksista interaktiivisiin simulointeihin, jotka muistuttavat lopullisen tuotteen ulkoasua ja toimintaa. Avaimet onnistuneeseen nopeaan prototypointiin ovat nopea tarkistaminen palautteen perusteella ja sopivan prototypointitavan käyttäminen. Nopea prototypointi auttaa tiimejä kokeilemaan useita lähestymistapoja ja ideoita, se helpottaa keskustelua sanojen sijasta visuaalisuuden avulla, se varmistaa, että kaikilla on yhteinen käsitys, ja se vähentää riskejä ja välttää vaatimusten ohittamisen, mikä johtaa nopeammin parempaan suunnitteluun.

Pikaprototypointiprosessi

Pikaprototypointiin kuuluu useampia iteraatioita kolmivaiheisessa prosessissa:

1. Prototyyppi Muunna käyttäjien kuvaukset ratkaisusta mock-up-versioiksi ottaen huomioon käyttäjäkokemusstandardit ja parhaat käytännöt.
2. Arvostelu Jaa prototyyppi käyttäjien kanssa ja arvioi, vastaako se heidän tarpeitaan ja odotuksiaan.
3. Hienosäädä Palautteen perusteella tunnistetaan alueet, joita on hienosäädettävä tai jotka on määriteltävä ja selkiytettävä tarkemmin.

Prototyyppi aloitetaan tavallisesti pienellä tasolla, eli muutama keskeinen osa-alue mallinnetaan, ja se kasvaa laajuudeltaan ja syvyydeltään useiden iteraatioiden aikana sitä mukaa, kun tarvittavia osa-alueita rakennetaan, kunnes prototyyppi viimeistellään lopulliseen muotoonsa, ja se luovutetaan lopullisen tuotteen kehittämiseen. Prosessin nopeus näkyy selvimmin iteraatioissa, jotka vaihtelevat reaaliaikaisista muutoksista muutaman päivän iteraatiosykleihin prototyypin laajuudesta riippuen.

Prototyypin hahmottaminen

Sana prototyyppi herättää usein mielikuvan sovelluksen tai käyttöliittymän koodatusta, täysin toimivasta versiosta. Nopeiden prototyyppien ei ole tarkoitus kehittyä täysin toimiviksi ratkaisuiksi, vaan niiden tarkoituksena on auttaa käyttäjiä visualisoimaan ja muotoilemaan lopullisen tuotteen käyttökokemusta. Tätä silmällä pitäen prototyyppiä kartoittaessasi päätä muutamista keskeisistä asioista, ennen kuin aloitat prototyyppityön.

Mitä prototyyppiä tarvitaan?

Hyviä ehdokkaita prototyyppien laatimiseen ovat muun muassa monimutkaiset vuorovaikutussuhteet, uudet toiminnallisuudet ja muutokset työnkulussa, teknologiassa tai suunnittelussa. Esimerkiksi hakutulosten prototypointi on hyödyllistä silloin, kun halutaan poiketa merkittävästi tavanomaisesta hakukokemuksesta; esimerkiksi ottaa käyttöön fasettihaku tai mahdollisuus esikatsella asiakirjaa poistumatta hakutuloksista.

Miten paljon pitäisi prototypoida?

Hyvä nyrkkisääntö on keskittyä 20 prosenttiin toiminnallisuudesta, jota käytetään 80 prosenttia ajasta; eli avaintoiminnallisuuteen, jota käytetään useimmin. Muista, että nopean prototypoinnin tarkoitus on esitellä, miten jokin asia toimii, tai myöhemmissä vaiheissa, miltä muotoilu näyttää, ilman että koko tuotetta prototypoidaan.

Find the Story

Kun olet tunnistanut prototypoitavat osa-alueet, nivoa ne yhteen yhdeksi tai useammaksi skenaarioksi: määrittele johdonmukaiset polut käyttäjäkokemuksen läpi, joita prototyyppi simuloi. Kenkiä myyvällä verkkosivustolla yksi skenaario voisi olla ”tylsä Joe”, joka ostaa täsmälleen samat Nike-juoksukengät, jotka hän osti kuusi kuukautta sitten, kun taas toinen skenaario voisi olla ”tutkimusmatkailija Sam”, joka selailee kokoluokkaa 10 löytääkseen häntä kiinnostavat Oxfordit ja lenkkarit.

Suunnittele iteraatiot

Koko prototyyppiä ei tavallisesti rakenneta yhdessä iteraatiossa, vaan pikemminkin pala palalta. Hyvä lähestymistapa on aloittaa prototyyppien luominen laajasti ja laajasti ja sukeltaa sitten syvälle ratkaisun valittuihin osa-alueisiin. Verkkosivuston kohdalla tämä tarkoittaisi sitä, että ensimmäisessä iteraatiossa rakennetaan etusivu ja laskeutumissivut tärkeimpiä osioita varten (joskus käytetään nimitystä horisontaalinen prototyyppi) ja sitten tarkastellaan ja tarkistetaan tätä kehystä. Myöhemmissä iteraatioissa voitaisiin syventyä yhteen tai useampaan verkkosivuston osaan (vertikaalinen prototyyppi); medialataussivuston tapauksessa tämä voisi tarkoittaa vaiheita, joita käyttäjä tekisi löytääkseen videon ja ladatakseen sen, tai sitä, miten hän hallitsisi verkkokirjastossaan olevaa mediaa.

Valitse sopiva uskottavuus

Uskottavuudella tarkoitetaan sitä, kuinka läheisesti prototyyppi muistuttaa lopullista ratkaisua. Uskollisuudella on useita ulottuvuuksia, ja prototyypit voivat sijoittua mihin tahansa näistä ulottuvuuksista. Riippuen suunnitteluprosessin vaiheesta ja prototyypin tavoitteista, valitse sopiva uskollisuus kullekin seuraavista:

• Visuaalinen uskollisuus (luonnosteltu ↔ tyylitelty) Ulkonäkö ja tuntuma ovat prototyypin uskollisuuden huomattavin ulottuvuus, ja jos sitä ei ole valittu oikein, se voi ohjata prototyypin arviointia sivuraiteille. Jos siirrytään liian pian hifistelyyn, käyttäjät keskittyvät visuaaliseen suunnitteluun, mikä ei ole tarkoituksenmukaista alkuvaiheessa. Visuaalisesta näkökulmasta prototyyppien ei tarvitse olla pikselitarkkoja, mutta niiden pitäisi olla oikeasuhtaisia; jos esimerkiksi vasemmanpuoleisen navigointialueen on täytettävä viidesosa 1024 pikselin näytöstä, sen ei tarvitse olla täsmälleen 204 pikseliä leveä, kunhan se kuvataan prototyypissä oikeasuhtaisesti. Kun prototyyppien luominen etenee suunnittelusyklin aikana, lisää visuaalista uskollisuutta tarpeen mukaan ottamalla käyttöön tyyli-, väri-, brändi- ja grafiikkaelementtejä.
• Toiminnallinen uskollisuus (staattinen ↔ vuorovaikutteinen) Paljastuuko prototyypistä, miten ratkaisu toimii (staattinen), vai näyttääkö se täysin toiminnalliselta ja reagoiko se käyttäjän syötteisiin (vuorovaikutteinen)? Tämä ulottuvuus häiritsee käyttäjiä vähemmän, mutta vuorovaikutteisuuden lisääminen myöhemmissä iteraatioissa lisää toiminnallista uskollisuutta ja mahdollistaa sen, että prototyyppiä voidaan käyttää käytettävyystestaukseen sekä koulutukseen ja viestintään.
• Sisällön uskollisuus (lorem ipsum ↔ todellinen sisältö) Toinen ulottuvuus, joka usein häiritsee käyttäjiä, on prototyypissä näkyvä sisältö. Vinoja viivoja ja tekaistua tekstiä, kuten lorem ipsum, on hyödyllistä välttää prototyyppien suunnittelun alkuvaiheessa. Mutta kun prototyyppiä hiotaan, arvioi tarvetta korvata tyhjä teksti oikealla sisällöllä, jotta saat käsityksen siitä, miten se vaikuttaa kokonaissuunnitteluun.

Prototypoinnin kirjo

Low Fidelity

Nopein tapa aloittaa prototyyppien luominen on myös helpoin: kynän(cil) kirjoittaminen paperille. Luonnostelu paperille on matalan uskottavuuden lähestymistapa, jonka kuka tahansa voi tehdä; erityisiä työkaluja tai kokemusta ei tarvita. Useimmiten luonnostelua käytetään suunnittelusyklin alkuvaiheessa, ja se on nopea tapa luoda karkeat mallinnokset suunnittelun lähestymistavoista ja konsepteista ja saada palautetta käyttäjiltä. Paperiprototyyppien luominen on ihanteellista aivoriihen ja konseptoinnin aikana, ja sitä voidaan tehdä yksin työhuoneessa luonnoskirjan kanssa tai ryhmässä fläppitaulun (tai valkotaulun) ja tussikynien avulla.

Paperiprototyypit ovat prototyyppien spektrin matalan uskottavuuden ääripäässä, ja ne ovat staattisia, ja niiden visuaalinen ja sisällöllinen uskottavuus on tavallisesti alhainen. Tämä pakottaa käyttäjät keskittymään siihen, miten he tulevat käyttämään järjestelmää sen sijaan, miltä se näyttää, ja se tekee suunnittelijoista avoimempia muutoksille, jotka perustuvat käyttäjäpalautteeseen.

Matalan uskottavuuden prototyyppien luominen soveltuu hyvin nopeaan prototyyppien luomiseen. Siinä ei ole oppimiskäyrää, mutta sen avulla muutokset voidaan tehdä helposti ja nopeasti.

Keskipitkän uskollisuuden

Kun alamme käyttää tietokonepohjaisia työkaluja, kuten Visiota ja Omnigrafflea, prototyyppien luomisessa, uskollisuus lisääntyy useimmilla rintamilla, jolloin saadaan aikaan keskipitkän uskollisuuden prototyyppejä. Näillä työkaluilla luodut rautalankakehykset, tehtävävirrat ja skenaariot vievät enemmän aikaa ja vaivaa, mutta näyttävät muodollisemmilta ja hienostuneemmilta. Vaikka visuaalisia elementtejä, kuten tuotemerkkejä, värejä ja tyyliä, voidaan ottaa käyttöön, prototyyppien laatijat pysyttelevät usein erossa niistä ja keskittyvät sen sijaan sovelluksen käyttäytymisen havainnollistamiseen. Vuorovaikutteisuutta voidaan simuloida linkittämällä sivuja tai näyttöjä, mutta toiminnallinen uskottavuus on tällöin korkeintaan keskinkertaista. Nämä prototyypit soveltuvat parhaiten sen määrittämiseen, täyttyvätkö käyttäjän tarpeet ja onko käyttökokemus optimaalinen.

On kaksi syytä, miksi keskipitkän tarkkuuden prototyyppi saatetaan tarkoituksella tehdä niin, että se ei näytä keskipitkän tarkkuuden prototyypiltä:

• Ensimmäinen syy on se, että käyttämällä Balsamiq- tai luonnosmaisia Visio-maskeja, joilla prototyyppi saadaan näyttämään matalan tarkkuuden prototyypiltä, pakotat käyttäjät näkemään prototyypin pikemminkin luonnokseksi tai keskeneräiseksi työksi kuin kiillotetylle ja valmiiksi hiotulle tuotteelle.
• Toinen on se, että antamalla prototyypille korkean visuaalisen uskollisuuden (esimerkiksi Photoshopissa tehdyllä kattavalla ulkoasulla) saat käyttäjän keskittymään visuaaliseen suunnitteluun ja ulkoasuun, mukaan lukien väriin, fontteihin, ulkoasuun, logoon ja kuviin.

Keskipitkän uskollisuuden prototyyppien nopeus saavutetaan malleilla, sabloneilla ja uudelleenkäytettävillä widgeteillä ja elementeillä. Se nopeutuu sitä mukaa, kun opit käyttämään valitsemiasi työkaluja entistä paremmin.

High Fidelity

High Fidelity -prototyypit ovat kaikkein realistisimpia, ja niitä luullaan usein virheellisesti lopulliseksi tuotteeksi, mutta ne ovat yleensä aikaavieviä. Muutama vuosi sitten ainoa tapa luoda korkean todenmukaisuuden prototyyppejä oli itse asiassa koodata ohjelmointikielellä, mikä edellytti usein suunnittelijan ja kehittäjän yhteistyötä. Nykyään sovellussimulointityökalujen avulla ei-tekniset käyttäjät voivat kuitenkin vetämällä ja pudottamalla käyttöliittymän widgettejä luoda tarkkoja prototyyppejä, jotka simuloivat lopputuotteen toiminnallisuutta, jopa liiketoimintalogiikan ja tietokantojen vuorovaikutuksen osalta. Axure ja iRise ovat esimerkkejä sovellussimulointityökaluista, joilla voidaan luoda tarkkoja prototyyppejä.

Nämä prototyypit ovat sopivia silloin, kun tarvitaan korkeaa visuaalista ja toiminnallista tarkkuutta, esimerkiksi kun otetaan käyttöön uusi teknologia (esimerkiksi siirryttäessä suurkantasovelluksesta – kyllä, niitä on yhä olemassa – verkkopohjaiseen ratkaisuun). Useimpia näistä prototyypeistä ei voida muuntaa käyttökelpoiseksi koodiksi, mutta ne toimivat erinomaisena viitteenä kehittäjille. Niistä on hyötyä myös käytettävyystestauksessa ja käyttäjien kouluttamisessa.

High-fidelity -prototyyppien luominen on suhteellisen nopeaa, kun otetaan huomioon vuorovaikutteisuuden ja tarkkuuden taso, ja sitä voidaan nopeuttaa käyttämällä raahaa ja pudota -simulointityökaluja. Lisäksi jotkin näistä työkaluista helpottavat käyttäjäpalautteen keräämistä ja vaatimusten dokumentointia, mikä nopeuttaa suunnitteluprosessia entisestään. Vaikka sinun ei tarvitse opetella uutta ohjelmointikieltä, näissä työkaluissa on oppimiskäyrä.

Tarkkuustason valinta

Prototyypin tarkkuustason valinnassa ei ole yhtä oikeaa lähestymistapaa. Useimpien uusien tuotteiden suunnittelu kannattaa aloittaa luonnoksista, minkä jälkeen siirrytään joko keskitason tai korkean uskottavuuden prototyyppeihin riippuen järjestelmän monimutkaisuudesta ja uskottavuusulottuvuuksien vaatimuksista.

Työskennellessämme erään tietyn lääketeollisuudessa toimivan asiakkaan kanssa siirryimme valkotauluista interaktiivisiin prototyyppeihin, joiden toiminnallinen ja sisällöllinen uskottavuus oli korkea, mutta visuaalinen uskottavuus alhainen. He eivät välittäneet niinkään ulkoasusta kuin yrityksen ohjeiden noudattamisesta.

Toiselle asiakkaalle, joka toimi vähittäiskaupan alalla, vuorovaikutteisen prototyyppimme piti olla visuaalisesti ja toiminnallisesti erittäin uskollinen. Sisällön uskollisuudella ei ollut merkitystä, koska he käyttäisivät sisältöä uudelleen ja tunsivat sen jo ennestään. Heille ulkoasulla ja vuorovaikutteisella kokemuksella oli enemmän väliä, koska kyseessä oli heidän ensimmäinen SharePoint-toteutuksensa, ja he halusivat saada portaalin näyttämään ”ei-SharePoint-mäiseltä”!

Työkalujen valitseminen

Menetelmästäsi riippuen sinulla on monenlaisia työkaluja, joista valita. Dan Harrelson on koonnut Adaptive Path -blogissa listan suosituista prototyyppityökaluista.

Kullakin työkalulla on omat ominaisuutensa ja vahvuutensa. Arvioi omien tarpeidesi ja työstämiesi projektien vaatimusten perusteella, mikä työkalu olisi sopivin. Seuraavassa on muutamia kysymyksiä, joita kannattaa pohtia työkaluja arvioitaessa:

• Miten helppoa työkalun opettelu ja käyttö on?
• Onko se joustava tukemaan prototyyppejä web-, paketti- ja räätälöityjä ohjelmistosovelluksia varten sekä työpöytä- ja mobiilisovelluksia varten?
• Onko käytettävissä uudelleenkäytettävien sabluunoiden, mallipohjien tai widgettien arkisto?
• Miten helppoa prototyypin jakaminen muiden kanssa tarkistettavaksi on? Voidaanko heidän palautteensa tallentaa työkalun avulla?
• Miten helppoa on tehdä muutoksia lennossa tai sisällyttää palautetta?
• Onko työkalussa yhteistoimintaominaisuuksia, kuten se, että useat ihmiset voivat työskennellä sen parissa samaan aikaan?
• Mitkä ovat lisenssiehdot ja kustannukset?

Dos And Don’ts

Aloittaessasi on tässä muutama tehokkaaseen nopeaan prototyyppien luomiseen liittyvä seikka, jotka kannattaa pitää mielessä:

Tee…

• Työskentelet yhteistyössä käyttäjien, liiketoiminnan ja tietotekniikan sidosryhmien kanssa nopean prototyyppien kehittämisen aikana. Sen lisäksi, että he antavat arvokasta palautetta, he saavat myös tunteen lopputuotteen omistajuudesta.
• Välttää ”prototyypin hiipiminen” asettamalla prosessille odotuksia, mukaan lukien ne, jotka vaikuttavat tarkoitukseen, uskollisuuteen, laajuuteen ja kestoon. Muistuta kaikkia, myös itseäsi, siitä, että nopea prototyyppien luominen on keino päästä päämäärään, ei päämäärä sinänsä.
• Luotaessasi vuorovaikutteisia korkean todenmukaisuuden prototyyppejä ja simulaatioita, rakenna realistiset viiveet (esimerkiksi ruudun päivittämiseen tai tapahtuman vaiheiden läpikäyntiin), jotta käyttäjät eivät odota välittömiä vasteaikoja lopulliselta tuotekokonaisuudelta.
• Käyttäkää, käyttäkää uudelleenkäytettäväksi, käyttäkää uudelleen. Tietokonepohjaisessa prototyyppien luomisessa tämä tarkoittaa uudelleenkäytettävien mallien, sabluunoiden, mallien ja vekottimien tallentamista tulevia projekteja varten.
• Kaikkein tärkeintä on, että aloitat jokaisen prototyypin tarkasteluistunnon vastuuvapauslausekkeella, jonka mukaan kyseessä on vain prototyyppi, mock-up, ei varsinainen ratkaisu. Tämä muistuttaa käyttäjiä siitä, että kyseessä on keskeneräinen työ, kannustaa palautteen antamiseen ja estää käyttäjiä luulemasta prototyyppiä toimivaksi ratkaisuksi, jos kyseessä on korkean uskottavuuden prototyyppi.

Ei…

• Ei prototyypissä saa käyttää ominaisuuksia tai toiminnallisuuksia, joita ei voida toteuttaa – tämä on usein ongelma ohjelmistopakettien toteutusten kanssa. Kun olet epävarma, varmista asia kehittäjiltä ennen aloittamista.
• Älä ota jokaista prototyypin tarkistuksen yhteydessä tullutta muutosta tai pyyntöä uutena vaatimuksena. Nopea prototyyppien luominen auttaa vangitsemaan unohdetut vaatimukset, mutta nämä uudet vaatimukset on arvioitava huolellisesti. Jotkin niistä saatetaan toteuttaa, kun taas toiset siirretään tulevaan versioon.
• Älä aloita prototyyppien katselmusistuntoja ilman selkeitä ohjeita palautteen antamista varten. Ole hyvin tarkka siitä, millaista palautetta toivot. (Ovatko vaiheet loogisesti järjestetty? Onko navigointi selkeää ja intuitiivista?) Jos näin ei ole, varaudu siihen, että: ”En pidä otsikon sinisestä väristä” tai ”Emmekö voisi käyttää tätä fonttia sen sijaan?” tai ”Voisitko tehdä tästä isomman, rohkeamman, punaisella ja vilkkuvalla värillä?”
• Älä ole perfektionisti. Useimmissa tapauksissa pikaprototyyppien ei tarvitse olla 100-prosenttisen täydellisiä, vaan riittävän hyviä, jotta kaikki ymmärtävät asian.
• Älä prototyyppaa kaikkea. Useimmiten sinun ei tarvitsekaan.

Lisälähteet

• Jos kaipaat sysäystä luonnostelun aloittamiseen, kokeile Dan Roamin kirjaa The Back of the Napkin.
• Opi lisää paperiprototyyppien luomisesta Carolyn Snyderin kirjasta Paper Prototyping: The Fast and Easy Way to Design and Refine User Interfaces.
• Sketchboarding, tekniikka konseptien tutkimiseen ja hiomiseen.
• Need low-fidelity content? Luo Lorem Ipsum -tekstiä prototyyppiäsi varten.
• Tahdotko saada paperiluonnoksesi näyttämään uskolliselta? Kokeile näitä Web-, iPad- ja iPhone-sabloneja.
• Sketching and Prototyping Tools for iPhone Apps
• Helppoa luonnostelua ja prototypointia Firefoxissa Pencil-lisäosan avulla.
• Vapaat tulostettavat luonnostelu-, rautalankamallinnus- ja muistiinpanomallit PDF-malleina
• 50 ilmaista UI- ja web-suunnittelun rautalankamallinnuspakettia, resursseja ja lähdetiedostoja

(al)