Skip to content

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ä.

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.

Linkki slaidisettiin

Erilaisia mockup-työkaluja:

Oma mockup-prototyyppi

Tämän kurssin puitteissa sinun tulee 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