Prototyping. Håkon Tolsby Håkon Tolsby

Transkript

1 Prototyping Håkon Tolsby Håkon Tolsby 1

2 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 HåkonTolsby 2

3 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! Håkon Tolsby 3

4 Husk at design og utvikling er en iterativ prosess Håkon Tolsby 4

5 Det er mulig å involvere «klienten» i hele prosessen Håkon Tolsby 5

6 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 HåkonTolsby 6

7 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? HåkonTolsby 7

8 Eksempler på prototyper Blueprints Wireframes Brukerscenarier Metaforer Historier Konseptuelle diagrammer Enkle implementasjoner Håkon Tolsby 8

9 Blueprints Illustrerer sammenhenger mellom sider og innholdskomponenter Kalles også sitemaps Håkon Tolsby 9

10 Blueprint - enkel

11 High-level blueprints Håkon Tolsby 11

12 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 Håkon Tolsby 12

13 Wireframe

14 Wireframes eksempel 2 Flere detaljer Layout Reelt innhold Forklaringer Håkon Tolsby 14

15 Wireframes eksempel 3 Høy grad av nøyaktighet Prototype Tidkrevende Håkon Tolsby 15

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

17 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 Håkon Tolsby 17

18 scenario mapping Håkon Tolsby 18

19 Morville: visuell kommunikasjon

20 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 Håkon Tolsby 20

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.

22 Contextual Inquiry Hvordan kan prototyper brukes for å skape større tilnærming til kontekst når man ønsker tilbakemelding fra brukere og klienter? Håkon Tolsby 22