4.2 Mockup -työkalun käyttö
Mockup-prototyyppi
Mockup on yksinkertaistettuna käyttöliittymäehdotelma. Se voi olla nopea ja karkea paperille suhaistu luonnos, mutta se voi olla myös todella hiottu ja visuaalisesti valmis malli käyttöliittymästä tai palveluun liittyvästä sähköisestä rajapinnasta.
Prototyyppejä tarvitaan käytettävyyden hiomiseen, ideoiden "validoimiseen", kommunikointiin ja sovelluskehitysprosessin tehostamiseen. Tyypillinen UX-iteraatio:
- Tehdään karkea paperiprototyyppi
- Esitellään asiakkaalle ja keskustellaan
- Korjataan palautteen mukaan
Jossain vaiheessa (tai vaikka heti) voidaan siirtyä paperilta käyttämään virtuaalista työkalua. Sama iteraatio jatkuu sen kanssa kunnes käyttöliittymälogiikka on valmis ja se uskalletaan antaa koodaajien käsiin.
Mockupilla siis minimoidaan koodaajien raskas korjaus- ja muutostyö sekä pidetään asiakas projektissa mukana alusta asti.
Erilaisia mockup-työkaluja:
Oma mockup-prototyyppi
Tämän kurssin puitteissa on tavoite tehdä käyttöliittymäprototyyppi vaatimusmäärittelysi tueksi. Voit valita minkä tahansa mockup-työkalun. Useat vaativat rekisteröitymisen, joten käytä koulusähköpostia. Toimiva prototyyppi linkataan vaatimusmäärittelyyn ja myös ruudunkaappaus palvelun päänäkymästä olisi kiva löytyä sieltä.
Oleellisia asioita jota mockupista pitäisi löytyä:
- Eri nappuloiden toiminta visualisoidaan tekemällä siitä linkki toiseen näkymään
- Esim login-sivulle -> tunnus ja salasana -> sisään
- Näkymissä selkeä otsikointi, käyttäjän tulee tietää missä mennään
Bonusta:
- Visuaalisesti nätti
- Väriteemaa voit etsiä esim: https://color.adobe.com/explore
- Mockupin käyttö mobiililaitteella (Fluid-Ui esim.)
- Eri työkalujen kokeilu
Lisälinkkejä UX/mockup-hommista
- Esimerkkivideo pikaisesta UX-kehittäjien sekä devaajien viikon pituisesta iphone-sovelluskehityksestä
- Heli Sutisen opinnäytetyö mockup-työkaluista
-
Käyttöliittymän prototyyppi
Luento
Paavon luento prototyypeistä, mockupeista sekä wireframeista:
Kotona
- Heli Sutisen lopputyö aiheesta
- Nordstrom Innovasion Lab
- Service Design Tools
- Mockup
- Rough Prototyping
- Service Prototype
- Experience Prototype
- Group Sketching
- Wireframing, prototyping and mockuping
- Tutustu termeihin
- Wireframe
- Prototype
- Mockup
- https://www.gv.com/sprint/
- [UxChecklist](uxchecklist
- Jeff Gothelf: Lean UX
Figma-demo: