Avainsana: sovelluskehitys

Ihmisen ja tietokoneen vuorovaikutus -kurssi: alkuosan poimintoja

Stanfordin järjestämä ”ihmisen ja tietokoneen vuorovaikutus” -verkkokurssi, eli englanniksi Human-Computer Interaction (HCI), alkoi viimeinkin muutama viikko sitten. Kurssin tarkoitus on auttaa kehittämään käyttäjäkeskeisiä suunnittelutaitoja ja saamaan periaatteet ja keinot erinomaisten käyttöliittymien kehittämiseen millä tahansa teknologialla. Siis aivan erinomainen kurssi sovelluskehittäjälle. Verkkokurssin alkuosan luennot käsittelivät tarpeiden löytämistä, prototypointia, mitä hyvät käyttöliittymät ovat, heuristiikkaa ja informaation esitysmuotoja.

”Ihmisen ja tietokoneen vuorovaikutus”

Käyttäjäkeskeinen suunnittelu ja ihmisen ja tietokoneen välinen vuorovaikutus ovat aiheiltaan kiinnostavia ja niitä osiltaan diplomityössäni käsittelin prototypoinnin osalta. Stanfordin ”ihmisen ja tietokoneen vuorovaikutus” -verkkokurssi menee aiheeseen syvemmälle ja käy läpi suunnittelun vaiheet idean saamisesta mallintamiseen ja asioiden esittämiseen. Tarkoituksena on, että kurssin jälkeen omaa paremmat taidot käyttäjäkeskeisestä suunnittelusta ja tietää periaatteet ja keinot erinomaisten käyttöliittymien kehittämiseen käytettävästä teknologiasta riippumatta. Kurssi kestää kaikkiaan viisi viikkoa ja asiat käydään läpi hyvien videoluentojen ja esimerkkien kautta, joiden tukena on vielä käytännön harjoitustyöt ja kokeet. Sekä harjoitustöiden että testien tekijät saavat kurssista ”Studio” -todistuksen ja pelkkien testien täyttäjät ”Apprentice” -todistuksen, johon myös itse tähtään.

HCI-kurssista on nyt edennyt neljännelle viikolla ja tässä muutamia poimintoja ensimmäisen kolmen viikon luentojen aiheista. Luennot käsittelivät tarpeiden ja ideoiden löytämistä, prototypointia, mitä hyvät käyttöliittymät ovat, heuristiikkaa ja informaation esitysmuotoja. Käytännössä siis selvittää ideoita ja tarpeita, suorittaa prototypointia eri tekniikoilla, arvioida eri vaihtoehtoja, ymmärtää miksi prototypointi ja vertaileva arviointi ovat oleellisia asioita erinomaisen vuorovaikutuksen suunnitteluun ja hahmottaa miten tiedon eri esitysmuodot vaikuttavat käyttäjäkokemukseen.

Kahden viimeisen viikon aikana käydään vielä läpi visuaalisen suunnittelun periaatteita tiedon jäsentämiseksi ja esittämiseksi käyttöliittymässä, käsitellään havaintojen ja kognition periaatteita tehokkaan vuorovaikutuksen saamiseksi ja viimeisenä aiheena on kontrolloitujen testien suorittaminen ja analysointi.

Viikko 1

Ensimmäinen viikko aloitettiin käsittelemällä prototyyppien voimaa. Lyhyesti sanottuna prototyypit prototypoivat tunnetta (miltä se voisi näyttää), toteutusta (miten se voisi toimia) ja ulkonäköä (mikä voisi käyttökokemus olla). Prototyypit ovat kysymyksiä ja niitä kannattaa kysyä useita.

”The best way to have a good idea is to have lots of ideas”
– Linus Pauling, Practice of trying multiple approaches.

Asian käsittelyä jatkettiin tarpeiden löytämisellä, eli miten saada ideoita asioiden kehittämiseen. Osallistujien havainnointi on yksi hyvä tapa ja siinä kannattaa keskittyä etenkin kiertoteiden ja kekseliäiden ratkaisujen käyttämiseen. Lisäksi virheet ovat kullanarvoisia.

Haastatteluiden avulla saadaan lisää tietoa ja niissä kannattaa miettiä haastateltavien valintaa ja millaisia kysymyksiä esittää. Avoimet, ei johdattelevat kysymykset ovat toimivia, kun vielä muistaa, että ihmiset sanovat toista, kuin mitä oikeasti tekevät. Muita menetelmiä ovat esimerkiksi päiväkirjatutkimukset, otanta kokemuksista ja erilaisten käyttäjäryhmien hyödyntäminen havainnoinnissa.

”You can observe a lot just by watching”
– Yogi Berra.

Viikko 2

Toisen viikon luennot aloitettiin prototypoinnilla ja mitä tekniikoita suunnittelun eri vaiheissa kannattaa hyödyntää. Alussa yksinkertaiset kuvakäsikirjoitukset ovat näppäriä ja niistä voidaan edetä paperimalleihin, digitaalisiin luonnoksiin ja yhä enemmän viimeisteltyihin malleihin.

Kuvakäsikirjat ja paperimallit

Lyhyesti tiivistettynä kuvakäsikirjoitus auttaa tähdentämään miten käyttöliittymä täyttää tehtävän, välttää sitoutumisen tiettyyn käyttöliittymään ja auttaa kaikkia sidosryhmiä saamaan saman kuvan asiasta, mihin ollaan pyrkimässä. Käytännössä kuvakäsikirjoituksen pitäisi välittää kolme asiaa:

  • Tapahtumapaikka: liittyvät henkilöt, ympäristö ja suoritettava tehtävä.
  • Jakso: liittyvät askeleet, miksi henkilö käyttää sovellusta, mitä tehtävää kuvataan.
  • Tyytyväisyys: mikä motivoi henkilö käyttämään järjestelmää, mitä se mahdollistaa henkilöiden saavuttaa ja mitä tarpeita se täyttää.

Paperiprototyyppien osalta parasta antia olivat esimerkit niiden tekemisestä ja käyttämisestä käyttäjien kanssa. Paperimallithan ovat hyviä keinoja testata sovelluksen vuorovaikutuksen kulkua erittäin nopeasti ja edullisesti. Niitä on myös helppo muuttaa useiden erilaisten asioiden testaamiseksi. Lisäksi käytiin läpi eri välineitä, joita paperiprototyyppien teossa voidaan käyttää. Hyvinä vinkkeinä mallien tekoon annettiin monikäyttöisten komponenttien piirtäminen ja suulliset kuvaukset hankalasti simuloitavista asioista (kuten etenemispalkki, hiiren menut) ja tuttujen käyttöjärjestelmä elementtien käyttäminen viitekontekstin luomiseksi (kuten selain). Lisäksi rautaa ja sovellusta voi sekoittaa esimerkiksi ottamalla kuva oikeasta laitteesta ja sijoittamalla paperimalli sen sisään. Ei mitään salatiedettä, vaan luovaa ajattelua.

”Test multiple prototypes simultaneously to get most value.”
”Parallel prototyping yields to more diverse designs.”

Toimintojen jäljittely

Prototyyppien avulla voidaan myös helposti kuvata asioita, joita ei ole vielä olemassa, kuvittelemalla ja simuloimalla mahdollista toimintaa. Yksi tekniikka tähän on käyttää ”Wizard of Oz”, eli ”Ozin velho” -menetelmää, jossa suunnittelija toimii tietokoneena ja simuloi käyttäjälle näkyvää toimintaa. Sen avulla voidaan helposti täyttää sovelluksen aukot, joita ei ole vielä toteutettu ja suunnittelija oppii samalla ymmärtämään sovelluksensa logiikan. ”Ozin velho” -tekniikan avulla saadaan kerättyä paljon kommentteja käyttäjältä jo alkuvaiheessa ja sillä voidaan näppärällä, halvalla ja nopealla tavalla imitoida jotain tekoälyä vaativaa toiminnallisuutta. Toisaalta helposti voidaan simuloida asioita, jotka eivät ole teknisesti mahdollisia.

Jos halutaan visualisoida asiaa enemmän, voidaan hyödyntää videoprototypointia, jossa kuvakäsikirjoituksen tavoin kuvataan sovelluksen käyttämistä hyödyntäen esimerkiksi fyysiseen laitteeseen yhdistettyjä paperimalleja käyttöliittymän osalta. Videot ovat edullisia ja nopeita tehdä ja toimivat erinomaisina kommunikointivälineinä. Video voi toimia myös määritelmänä kehittäjille ja se sitoo käyttöliittymän ja tehtävän toisiinsa.

Prototypoidessa on hyödyllistä tehdä enemmän malleja, kuin keskittyä laatuun. Lisäksi, kun eri malleja tekee rinnakkain päästään osittain eroon yhteen ideaan ja toimintatapaan juuttumisesta. Rinnakkaisuus erottaa egon luomuksesta ja kannustaa vertailuun, joka vastaavasti auttaa oppimista.

Suora vaikuttaminen ja ajatusmallit

Toisen viikon jälkimmäisillä luennoilla käsiteltiin asioita, mitkä tekevät käyttöliittymistä helppoja, vaikeita tai luonnollisia. Yksi huomioitava asia on suorituskuilu, eli miten käyttäjä tietää mitä tehdä ja mitä pitäisi tapahtua. Luennoilla annettiin muutamia esimerkkejä, miten asioiden ei pitäisi toimia.

Käyttäjän tehtävän suorittamisen tueksi järjestelmän pitäisi tarjota:

  • Näkyvyyttä (käyttömahdollisuudet, tarkoitus)
  • Palautetta toiminnasta
  • Yhdenmukaisuutta (toisin sanoen standardit)
  • Toiminnot eivät ole peruuttamattomia (Peruuta-toiminnon tärkeys)
  • Löydettävyys: kaikki toiminnot ovat löydettävissä järjestelmällisessä valikoiden tutkimisella
  • Luotettavuus: toimintojen pitäisi toimia. Tapahtumien ei pitäisi tapahtua satunnaisesti

Suorituskuilujen lisäksi ongelmia aiheuttavat myös käyttäjän mielikuvat, miten asioiden pitäisi hänen mielestään toimia. Tämä johtaa helposti virheisiin, jos käsitteellinen malli asiasta eroaa järjestelmän toiminnasta. Käyttäjän mielikuvat ja uskomukset siitä, miten asian pitäisi toimia, juontavat kokemuksiin, vertauskuviin ja verrannolliseen päättelyyn kuten ”tekstinkäsittelyohjelma on kirjoituskone”. Mielikuvat ovat usein epätäydellisiä, epäjohdonmukaisia, muuttuvat ajan mukaan ja täynnä taikauskoa. Tavoitteena suunnittelussa pitäisi olla, että suunnittelu viitoittaa oikeaan ajatusmalliin toiminnasta, jolloin ei tarvitse luottaa käyttäjän ajatusmaailmaan asiasta. Eli nykyisen käytännön ja uuden teknologian välistä välimatkaa pitäisi minimoida.

”The goal: design beacons the right model”

Käyttöliittymässä mielikuvien vaikutus, eli ero kuvitellun toiminnallisuuden ja miten järjestelmä oikeasti toimii välillä, näkyy hitaana suorituksena, virheinä ja turhautumisena. Sitä voidaan pienentää hyödyntämällä oikean maailman vertauskuvia ja tekemällä käyttöliittymästä sellainen, että se tuo esille miten sitä pitää käyttää.

”If technology is to provide an advantage, the correspondence to the real world must break at some point”
– Jonathan Grudin

Viikko 3

Kolmannella viikolla luennot syventyivät enemmän teoriaan, alkaen heuristisella arvioinnilla ja jatkuen tiedon esitysmuotojen vaikutuksilla ja ajattelun hajauttamisella.

Heuristiikka

Heuristinen arviointi on Jakob Nielsenin kehittämä ja auttaa löytämään käytettävyysongelmia. Siinä pieni ryhmä (3-5 henkeä) tutkii käyttöliittymää ja tarkistaa sen yhdenmukaisuuden käytettävyysperiaatteita vasten. Heuristista arviointia voidaan suorittaa toimivalle käyttöliittymälle tai luonnoksille ja se on erittäin kustannustehokasta. Käyttäjätestaukseen verrattuna se on muun muassa nopeampaa, tulokset ovat ennalta tulkittuja ja se löytää eri ongelmia.

Luennoilla esitettiin kymmenen heuristiikkaa arviointia varten (sovellettu Nielsenin arvoista):

  • Näytä järjestelmän tila
  • Tutut vertauskuvat ja kieli
  • Hallinta & vapaus
  • Yhdenmukaisuus
  • Virheiden estäminen
  • Tunnistaminen ennen muistamista
  • Joustavuus & tehokkuus
  • Estetiikka & minimalistinen design
  • Tunnista, määritä & palaudu virheistä
  • Ohjeet ja avustaminen

Tiedon esitysmuodot

Informaation esittämistä ja sen merkitystä käsiteltiin esimerkkien avulla, puhuen hieman myös miten työmuisti vaikuttaa asioiden käsittelyyn. Kokeellista ajattelua, ongelmanratkaisua, avustaa, jos esitysmuodon ominaisuudet vastaavat asian ominaisuuksia, jota ollaan esittämässä.

”Solving a problem simply means representing it so as to make the solution transparent”
– Herbert Simon, The Science of the Artificial

Ajattelun hajauttaminen

”Distributing cognition”, eli jotakuinkin ajattelun hajauttaminen, tähtää asioiden helpompaan käsittelyyn muuntamalla asioiden esitystapaa. Hyvän esitysmuodon pitäisi näyttää vain oleellinen informaatio ja mahdollistaa vertailu, tutkiminen ja ongelmien ratkonta. Esitysmuoto on myös sidottu siihen tehtävään, jonka käyttäjä haluaa suorittaa.

Kun käyttöliittymät auttavat käyttäjiä hajauttamaan ajattelua, se:

  • Kannustaa kokeiluun (esim. Tetris)
  • Tukee oppimista ja vähentää virheitä ylimääräisyydellä (Montessori palikat)
  • Näyttää vain erot, jotka merkitsevät (Lontoon metron kartta)
  • Muuntaa hitaat laskennat nopeiksi havainnoiksi (kartan väritys)
  • Tukee asioiden ryhmittelyä, etenkin ammattilaisten toimesta (Shakki & eleet)
  • Lisää tehokkuutta (kaaviot)
  • Helpottaa yhteistyötä (Lentokoneen ohjaamo)

Informational equivalence != computational equivalence

Esitysmuotoja käytiin läpi useiden esimerkkien kanssa, jotka havainnollistivat miten vaihtoehtoinen esitysmalli vaikuttaa asian ymmärtämiseen. Etenkin esimerkit huonoista esitystavoista olivat käteviä. Esimerkkejä oli muun muassa miten virheilmoituksia ja kysymyksiä esitetään käyttäjälle tilanteissa, joissa lomakkeella on puutteellisia tietoja, kysyttäessä mitä tiedoston merkistöongelmassa pitäisi valita, mitä maksutapaa käyttäjä haluaa käyttää ja miten jo olemassa oleva tiedosto pitäisi korvata.

Loppuosa

HCI verkkokurssin alkuosa on ollut mielenkiintoinen, vaikkakaan ei asiasisällöltään ole mitään yllättävää tarjonnut. Moni asia on tullut eteen jo aikaisemmin, mutta kertaus on oppimisen kannalta hyvä. Ehkä kurssin loppuosa, eli seuraavat pari viikkoa, tarjoavat jotain uutta. Ne käsittelevät visuaalista suunnittelua, informaatiosuunnittelua, kokeiluiden suunnittelua ja suorittamista laboratoriossa ja webissä ja tulosten analysointia. Kuulostaa mielenkiintoiselta ja siitä lisää myöhemmin.

Pitäisikö Web-sovelluksilla olla yhtenäinen tyyli ja logiikka?

Nykyään suuri osa sovelluksista toimii Web-selaimissa ja sovellusten osalta on havaittavissa siirtymää työpöydältä Web-sovelluksiksi, jolloin aikaisemmin suhteellisen samanlailla toimivat ja näyttävät käyttöliittymät muuttuvat monimuotoisiksi. Web-maailmassa ei ole yhtenäistä tapaa toteuttaa asioita, vaan jokainen suunnittelija tekee kuten parhaimmakseen näkee ja sovellusten ulkoasut vaihtelevat suuresti. Perinteisten työpöytäsovellusten osalta eri sovellukset toimivat suurin piirtein samoilla periaatteilla ja toimintopainikkeet sekä näyttävät samoilta että löytyvät tutuista paikoista.

Usability Post kysyykin, pitäisikö Web-sovelluksilla olla yhtenäinen käyttöliittymä, eli ulkoasu näyttäisi ja toimisi visuaalisesti samoilla periaatteilla, kuten työpöytäsovelluksissakin eri käyttöjärjestelmissä sovellukset ovat usein yhtenäisiä keskenään. Tutut toiminnot näyttäisivät samoilta eri Web-sovellusten välillä, kun nyt painikkeiden ja komponenttien ulkoasut vaihtelevat enemmän tai vähemmän eri sovellusten välillä.

On totta, että sitä toivoisi sovellusten toimivan edes suurin piirtein samoilla periaatteilla, ettei aina tarvitsisi arpoa miten asiat nyt tässä toimivatkaan, mutta yleisesti ottaen on vaikea nähdä, että eri Web-sovellukset näyttäisivät peruspiirteiltään samanlaisilta, toimisivat samalla tavalla tai käyttäisivät samoja komponentteja. Web on visuaalisesti toinen maailma verrattuna työpöytäsovelluksiin, joka myös heijastuu sovellusten toimintoihin. Webin osalta ei oikeastaan odoteta, että eri sovellukset näyttäisivät yhtenäisiltä, vaan ollaan jo totuttu, että jokaisen sovelluksen kohdalla pitää aina oppia uudestaan perustoiminnot ja logiikka. Onneksi suunnittelijat tekevät sovellukset usein helposti opittaviksi ja joissa asiat toimivat kuten niiden olettaa toimivan. Tai ainakin näin haluaisi uskoa, sillä todellisuus on välillä aivan jotain muuta.

Kun asiaa ajatellaan pienemmällä skaalalla, olisi sovelluskehittäjällä hyvä olla karkealla tasolla välineet yhtenäisen käyttöliittymän toteuttamiseksi, ainakin saman asiakkaan sovellusten osalta. Toki usein saman kehittäjän sovelluksissa toistuvat samat ratkaisut ja uudestaan käytettävät palikat, joilla yhtenäisyyttä syntyy kuin itsestään. Miksi keksiä asioita uudestaan, kun ne ovat jo kerran toteutettu, ellei asiaa keksi ”paremmin”. Suunnittelun ja ratkaisujen avuksi löytyy myös apuvälineitä, joilla visuaalista ilmettä ja sovellusmaista toimintaa voidaan tukea.

Webissä ei ole yhtä ja oikeaa tapaa toteuttaa asioita, vaan monet ratkaisut ovat yhtä hyviä. Mallia voi ottaa esimerkiksi useilta suunnittelumalli-sivustoilta kuten UI Patterns, YPatterns ja UI Pattern Factory. Lisäksi erilaiset komponenttikehykset kuten JQuery UI ja Java EE -maailmassa RichFaces ja PrimeFaces tarjoavat omia ehdotuksiaan toiminnoille. Vaihtoehtoja on monia ja lopputulos on usein eri ratkaisujen yhdistelemistä, jolloin sovellus koostuu useista erilaisista käyttöliittymäratkaisuista. Harvoin eri valmiiden ratkaisujen mallit toimivat suoraan omiin tarpeisiin nähden ja niitä joudutaan vähintäänkin visuaalisen ilmeen osalta virittelemään.

Koska Web perustuu pohjimmiltaan HTML:ään ja CSS:ään, voidaan valmiita komponentteja yleensä muokata ulkoasultaan tarpeiden mukaan ja soveltaa toisaalla havaittuja hyviä asioita. Esimerkiksi Web-sovelluksen käyttöliittymää varten voidaan soveltaa Cappucino tai Sproutcore -kehysten Creative Commons Attribution Share-alike -lisenssin alaisuudessa olevia Ace- ja Aristo-teemoja, jotka näyttävät siisteiltä ja tarjoavat yhtenäisen ulkoasun eri komponenttien välille.

Molemmat teemat näyttävät nykyaikaisilta ja niillä on enemmän yhteistä kuin eroa, jonka voi todeta lyhyestä vertailusta. Enemmän teemojen toiminnasta saa selville, kun vierailee teemojen demosivuilla. Sproutcoren Ace-teemasta on havaittavissa yhtäläisyyksiä OS X:n Aqua-teemaan ja SproutCoren kehitys onkin Applen sponsoroimaa. Cappucinon Aristo-teema ei ole niin silmiinpistävä kuin Ace, keskittyy näyttämään hyvältä sekä Windowsissa että OS X:ssä ja sopii paremmin vakavampiin sovelluksiin.

Molempien teemojen soveltuvuus omaan käyttötarkoitukseen riippuu toteutettavasta sovelluksesta, mutta niistä voi ainakin ottaa hieman mallia, miltä peruskomponentit voisivat näyttää. Cappucinon Aristo-teema on hieman helpommin otettavissa testiin ja se on saatavissa PSD -kuvina ja kolmannen osapuolen CSS 3 toteutuksena. Sproutcoren Ace-teema löytyy vastaavasti vain sprite-kuvina, joten teemaus pitää hoitaa itse loppuun, mutta se tarjoaa kattavamman valikoiman eri komponentteja ja malleja.

Ikävä tosiasia valitettavasti on, että sovelluksen ulkoasun eteen joudutaan aina askartelemaan enemmän tai vähemmän. Esimerkiksi jos sovelluksessa otetaan käyttöön jokin valmis komponentti, pitää sen ulkoasua joko muokata vastaamaan muuta sovellusta, tai käyttää valittua kirjastoa kaikilta osin jokaisen komponentin kanssa, jolloin eroavaisuuksia on mahdollisimman vähän. Valituista ratkaisuista riippuen tämä on enemmän tai vähemmän helppoa. Esimerkiksi JQuery UI:n komponenteille voi määritellä haluamansa ulkoasun kätevästi Theme Rollerin avulla, mutta vastaavasti samanlainen teemanrakentaja tarvittaisiin myös RichFaces-komponenteille, joiden teemaus on suhteellisen työlästä ja osittain arpapeliä. Muutenkin aina tuntuu, että useat valmiit ratkaisut eivät toimi kuten niiden haluaisi toimivan, eikä niitä usein voi myöskään helposti muokata riittävällä tasolla.

Kaikenkaikkiaan Web-käyttöliittymä voi näyttää upealta, jos siihen viitsii panostaa, mutta Web-sovelluksilla ei mielestäni tarvitse olla yhtenäisiä periaatteita. Web on monimuotoinen ja asiat saavat toimia, kuten ne parhaimmikseen näkee, kunhan ne silti toimivat loogisesti ja ymmärrettävästi. Toki yhtenäiset ratkaisut helpottavat käyttäjän elämää. Toisaalta Webin käyttöliittymät eivät helposti vertaudu perinteisiin työpöytäsovelluksiin, ainakaan nykyisillä teknologioilla ennen HTML5:n ja CSS 3:n yleistymistä, joten sallittakoon niille myös omat tyylinsä, kunhan ne ovat hyvällä maulla toteutettuja.

Pitääkin tässä edistää työlistalle hautautunutta tehtävää jalostaa omaa visuaalisesti yksinkertaista komponettiteemaa eteenpäin ja rakentaa vastaava teemaus myös RichFaces-komponenteille, jolloin asiakkaan sovellus saisi vielä nykyistä yhtenäisemmän ulkoasun.

Käyttöliittymän hahmottelua luonnostelemalla

Käyttöliittymien suunnittelussa ideoiden hahmottelu ja visualisointi käsiteltävään muotoon on yksi ensimmäisiä vaiheita ennen koodiin sukeltamista. Visualisointia voi suorittaa monella tapaa ja yksi kätevä keino on luonnostelu, eli piirtämällä kynällä karkea malli halutusta lopputuloksesta paperille. Yksinkertaista, helppoa ja nopeaa prototypointia, vaikka paperimallit eivät ole kovin joustavia ja muutokset ovat työläitä.

Luonnostelu on yksi yleisimmistä tekniikoista matalan tarkkuuden prototyyppien luomiseen. Menetelmässä käytetty ”kynä ja paperi-menetelmä on luonnollinen ja vähän vaivaa vaativa tekniikka, joka mahdollistaa abstraktien ideoiden siirtämisen konseptista nopeasti kiinteämmälle pohjalle. Erityisen hyödyllisen menetelmän tekee sen luovuuteen ja ajatteluun rohkaiseva luonne. Lisäksi luonnostelu rohkaisee useamman eri tekijän osallistumisen mallin luontiin, kun visuaalinen malli ja tekniikka on kaikille tuttua. Asiat jäävät myös riittävän epätarkoiksi, joka sallii tarkennusten tekemisen myöhemmin, estämättä luovuutta mallin kehittämisen aikana.

Luonnostelua voi suorittaa myös tietokoneella, hyödyntämällä Washingtonin yliopistossa kehitettyä avoimen lähdekoodin BSD-lisenssillä julkaistua DENIM-ohjelmistoa. Ohjelma tarjoaa käytännössä paperintapaisen käyttöliittymän mallien luontiin. DENIM on tarkoitettu tukemaan Web-kehittäjien alkuvaiheen suunnittelua informatiivisen luonnostelun kautta, ja tarjoaa suunnittelun tueksi kynällä luonnostelua, eri tarkkuuksille kohdentamista (sivukartta, kuvakäsikirjoitus, sivu), sivujen linkittämistä kuvakäsikirjoitusta varten, mallin ajamista esittämistä ja vuorovaikutusta varten ja mahdollisuuden luoda uudelleenkäytettäviä komponentteja. Lopputuloksen voi myös viedä linkitetyiksi HTML-sivuiksi. Javalla toteutettu DENIM on saatavilla Windowsille, Unixille ja Mac OS X:lle.

Denim Denim

DENIMillä luodut prototyypit muistuttavat kynällä ja paperilla luonnosteltuja malleja sekä hyvässä että pahassa, ja koska nyt piirtovälineenä toimii hiiri, on piirtojälki kynääkin karkeampaa. Paperimalleihin verrattuna sähköinen media tarjoaa mahdollisuuden elementtien siirtelyyn ja muokkaamiseen ja lopputuloksen dokumentointi ja säilöminen myöhempää käyttöä varten on helpompaa. Tietenkin kuten kynällä ja paperilla luonnostellessa, jää käyttöliittymän vuorovaikutuksen esittäminen ja mallin myöhempi hyödyntäminen vähäiseksi. DENIMin käyttö on suhteellisen yksinkertaista ja opasteen avulla hieman erikoinen käyttöliittymä ja sen tarjoamat toiminnot selviävät nopeasti, mutta tämänkin jälkeen työskentely on hieman hidasta ja monimutkaisen tuntuista.

DENIM tarjoaa mahdollisuuden sähköiseen luonnosteluun, mutta käyttö on hieman kömpelöä, joka tosin johtunee suurilta osin piirtovälineenä käytettävästä hiirestä. Piirtopöydällä käytettynä DENIM voisi olla pätevä apuväline, mutta nyt osa sovelluksen kätevyydestä menee hiiren epätarkkuuden kanssa hukkaan, vaikka ohjelmisto suoristeleekin piirrettyjä viivoja. Myös isolla kosketusnäytöllä, jolloin useampi henkilö voisi yhtä aikaa ilmaista ideoitaan, voisi ohjelman käyttö olla kätevää. Toisaalta, kynällä ja paperilla saa edelleen luotua nopeammin ja helpommin luonnoksia ja piirrosjälki on tarkempaa ja mahdollistaa pienempien ja tarkempien elementtien hahmottelun.