Prototyping Håkon Tolsby 26.01.2016 Håkon Tolsby 1
Til å visualisere brukes prototyper En prototype kan være ulike ting: Low-fidelity En serie med skisser av websider Scenario (i kombinasjon med skisser) En storyboard, serie med sener (tegneserie) En Powerpoint presentasjon High-fidelity Et websted, men med begrenset funksjonalitet 26.01.2016 HåkonTolsby 2
Hvorfor lager vi prototyper? For å forstå tidlig i prosessen hva vi skal utvikle. Utfordringer, idé og konsept For å kunne kommuniser med: Andre designere Oppdragsgiver Brukere For å inndra brukere i prosessen. VIKTIG! 26.01.2016 Håkon Tolsby 3
Husk at design og utvikling er en iterativ prosess 26.01.2016 Håkon Tolsby 4
Det er mulig å involvere «klienten» i hele prosessen 26.01.2016 Håkon Tolsby 5
Prototyping innebærer kompromisser Begrenset funksjonalitet, sakte respons, simple ikoner og grafikk. To sentrale kompromisser Horisontal prototyping: Mange funksjoner, men liten detalj Vertikal prototyping: Mange detaljer, men få funksjoner Farlig å ignorere kompromissene Begrenset hvilke konklusjoner du kan trekke basert på tilbakemelding på veldig enkle prototyper 26.01.2016 HåkonTolsby 6
Prototyping er virkeliggjøring av idéen Det er et produkt som skal lages Evolusjonær prototyping Throw-away prototyping Hvilke funksjoner skal produktet utføre Hva skal produktet gjøre og hva skal brukerne gjøre Er strukturen og kategoriene riktige Hvilken informasjon må være tilgjengelig? Hva kreves for å utføre oppgaven? 26.01.2016 HåkonTolsby 7
Eksempler på prototyper Blueprints Wireframes Brukerscenarier Metaforer Historier Konseptuelle diagrammer Enkle implementasjoner 26.01.2016 Håkon Tolsby 8
Blueprints Illustrerer sammenhenger mellom sider og innholdskomponenter Kalles også sitemaps 26.01.2016 Håkon Tolsby 9
Blueprint - enkel
High-level blueprints 26.01.2016 Håkon Tolsby 11
Ulike typer wireframes Lages for nettstedets viktigste sider Hovedside Sider til viktige kategorier Viktige applikasjoner som søkegrensesnitt Nøyaktighetsnivå avhenger av hvor i prosessen man befinner seg Skisse (håndtegnet) Generert med for eksempel HTML eller Adobe illustrator Fungerer også som prototyper 26.01.2016 Håkon Tolsby 12
Wireframe
Wireframes eksempel 2 Flere detaljer Layout Reelt innhold Forklaringer 26.01.2016 Håkon Tolsby 14
Wireframes eksempel 3 Høy grad av nøyaktighet Prototype Tidkrevende 26.01.2016 Håkon Tolsby 15
Brukerscenarier Vise hvordan brukere med ulike behov vil navigere nettstedet Utgangspunkt: brukerprofilene fra forundersøkelsen 3 eller 4 ulike typer Navn, tittel og årsak til at de besøker hjemmestedet Scenarier som demonstrerer behov for forskjellige navigasjons- og søkemuligheter Prosessen med: mål, overveielser og beslutninger. Kan kombineres med storyboard.
Eksempel brukerscenario Det er morgen og Kari stopper på bensinstasjonen på veg til arbeidet. Mens hun fyller bensin bestemmer hun seg for å sjekke om dansegruppa hennes har blitt enig om neste trening. Kari tar frem telefonen. Hun logger seg på en tjeneste og får en oversikt over foreslåtte datoer. Kari noterer seg at bare 11 av 15 personer har svart. Hun ser også at det passer best for de fleste neste mandag og lørdag. Kari trenger et endelig svar så rakt som mulig og sender en påminnelse til dem som ikke har svart med de foreslåtte datoene. Så avslutter hun tjenesten, legger telefonen i veska og kjører videre. 26.01.2016 Håkon Tolsby 17
scenario mapping http://www.uxforthemasses.com/scenario-mapping/ 26.01.2016 Håkon Tolsby 18
Morville: visuell kommunikasjon
Hvem lager prototypene? Designer/utvikler Kan oppdragsgiver og brukere delta? Design in action (Susanne Bødker og Kaj Grønbæk) Hvem bør delta, hvem bør ikke? Oversikt, entusiasme, representativ, erfaring Tillit og likeverd 26.01.2016 Håkon Tolsby 20
26.01.2016 21 Contextual Inquiry En tilnærming til etnografisk studie (observasjon, feltstudie) hvor: brukeren er ekspert og designeren er lærling En form for intervju på brukerens arbeidsplass 2 til 3 timers varighet Fire hovedprinsipper: 1. Kontekst: Se arbeidsplassen og hva som skjer 2. Arbeidskollegaer: Bruker og utvikler samarbeider 3. Fortolkning: Observasjoner fortolkes av bruker og utvikler sammen. 4. Fokus: Fremlegg fokus for å gjøre det enklere å forstå hva man skal se etter.
Contextual Inquiry Hvordan kan prototyper brukes for å skape større tilnærming til kontekst når man ønsker tilbakemelding fra brukere og klienter? 26.01.2016 Håkon Tolsby 22