Prototyping av brukergrensensitt

Transkript

1 Prototyping av brukergrensensitt Designprosessen - bakgrunn og filosofi Designteknikker - fremgangsmåter, fordeler/ulemper Trondheim, 2001

2 Jacob Nielsen Usability Engineering

3 Iterativt Design Iterativt design Produksjon Design/Redesign -> Prototyp Analyse av videologg Brukertesting Trondheim, 2001

4 Brukbarhetsproblemer halveres for hver iterasjon

5 Hvorfor modellere interaksjon? Primært Kunne teste ut en design ide empirisk - mot virkeligheten Sekundært Utforske design rommet /frihetsgradene Kommunisere med andre utviklere Kommunisere med oppdragsgiver Kommunisere med sluttbrukere Teste tekniske problemer

6 Tre dimensjoner som krever ulike modeller Funksjon Teknologi Intensjoner Implementasjon Opplevelser Look and Feel

7 Konsekvenser for modellen/prototypen Den trenger ikke å overleve lenger en brukbarhetstesten Den behøver ikke være robust, detaljert, rask realistisk, vakker, utvidbar, eller komplett Alle triks er lov! Dens verdi skal være lav Just enough prototyping Gillian Crampton Smith

8 Kost/nytte av modeller Høy nytte Alpha/ 0-serie Skjermsimulering Funksjons modell Lav nytte Papir Rask å bygge Langsom å bygge

9 Lo-fi vs. Hi-fi prototyper Lo-Fi (Low fidelity): Enkle prototyper uten mye detaljer verken grafikk eller interaksjon Brukes tidlig i prosjekter Enkle å lage, men mangler detaljrikdom Hi-Fi (High fidelity): Komplekse prototyper med mer detaljer Brukes senere i prosjekter Koster med å lage. Lages ofte v.h.a. prototypingsverktøy. Ligner med på det ferdige produktet.

10 Horisontale vs. Vertikale prototyper Horisontale: Vise totalsystemet uten særlig mye interaktivitet og funksjonalitet. Vertikale: Gå i dybden på en detalj, d.v.s implementere nok interaktivitet og funksjonalitet til å kunne teste dette.

11 Lag og kast vs. Evolusjonær utvikling Det er mulig å utvikle et system evolusjonært, og la hver versjon bli testet. Fordeler i forhold til Lag og kast prototyper: Man kaster ikke bort arbeidet med prototypene. Man kan bygge videre mot ferdig produkt. Ulemper: Koden blir fort veldig uryddig. Det tar lenger tid å utvikle med tanke på at koden skal kunne utvides. Begrenser valgmuligheter i forhold til verktøy.

12 Interaktive prototyper Fortrinnsvis vertikale prototyper, evt. kombinasjon. Lag en quick and dirty implementasjon av interaktivitet v.h.a. et egnet verktøy. Spesialsydd for å teste ut designidéer. Behøver ikke kunne leve sitt eget liv.

13 Designteknikker Skissere interaksjon med storyboarding Detaljere grensesnittet med papirprototyper og rollespill Designe Look and Feel med skjermsimuleringer Prøve det ut i virkeligheten med Wizard of Oz simuleringer Trondheim, 2001

14 Storyboard Serie med bilder Beskrivende tekst Av hvordan ting gjøres i dag Av hvordan ting kan gjøres i fremtiden

15 Storyboard Tekst og bilde kan være utgangspunkt for ideskissing Legg til tegninger og tekst som beskriver: Nye funksjoner Nye produkter Nye grensesnitt Nye handlinger Overflødige gamle handlinger

16 Leke med dukker Flytende overgang fra scenarioskriving til rollespill Tillater dynamiske analyser av kommunikasjon og handling Tillater eksperimentering med flere aktører og ulike personas Stor informasjonsrikdom, men vanskligere å dokumentere enn storyboard (bruk video og grafiske teknikker i etterkant)

17 Rollespill "Roleplaying is a great tool for communicating concepts " I m already looking forward to the next possibility of participating although hopefully not as a virtual princess!"

18 Rollespill - fremgangsmåte Planlegg hovedaktivitetene Lag/finn omgivelser og ting å tenke med (gjerne enkle & abstrakte representasjoner) Kjenn din rolles motivasjon og interesser Kjør rollespill inntill problemer oppdages. Redesign, spol tilbake og prøv på nytt! Dokumentér med video

19 Designworkshop - eksempel Håndholdt trådløs peer-topeer for tenåringer. Starte med en teknologi Starte med en brukergruppe Lage scenarier Lage low-fi prototyper Teste ut prototypene mot scenariene

20 Designworkshop - eksempel Gruppearbeid med brukere som designere

21 Designworkshop - eksempel Mock-ups for konkretisering av ideer

22 Designworkshop - eksempel Fremføring av scenarier med skissemodellene

23 Papirprototyper Meget hurtig Design av grensesnittet slik brukeren opplever det Brukes til å prøvekjøre interaksjonsideer Ikke riktig responstid, lyder og animasjoner Krever god forestillingsevne hos brukere (bedres med rollespill!)

24 Papir-prototyper Lage skisser av skjermbilder. Lage et tilstandsdiagram som viser sammenhengen mellom skjermbildene. Lage små lapper for vinduer, menyer, knapper,, som kan flyttes på under en Wizard of Oz test. Måter å produsere prototypene på: Frihånds-skisse Klippe og lime ferdiglagede GUI elementer PhotoShop el.l. som skrives ut

25

26 Papirprototype - dokumentasjon

27 Tilstandsdiagrammer - dokumantasjon Viser sammenhengen mellom skjermbildene. Tilstander, hendelser, handlinger og transisjoner. Startbilde Gå inn /vis meny Se tilbud Hoved Valg av vare Handel

28 Skjermsimuleringer Helst lineær interaksjon Gir riktig respons, lyd og skjermbilde Lett å variere utseendet med høy oppløsning 2D Tidkrevende hvis det skal lages fleksibelt Kan gi inntrykk av å være for ferdig

29 Slideshows Bruk PowerPoint el.l. som prototypingverktøy Fordel: Veldig enkelt å gjøre design. Ulempe: Meget begrenset funksjonalitet (kun det å skifte mellom skjermbilder)

30 erpoint el.l. som prototypingverktøy eldig enkelt å gjøre design. eget begrenset funksjonalitet (kun det å lom skjermbilder)

31 Powerpoint prototyp - eksempel

32 Powerpoint prototyp - eksempel

33 Powerpoint prototyp - eksempel

34 Wizard-of-OZ modeller Utseendemodell animert med mennesker og tilgjengelig teknologi bak kulissene. Realistisk gjengivelse hvis alt fungerer Kostbar men svært realistisk simulering

35 Funksjonsmodell Modellering med riktige egenskaper Skjermbilder Software Elektronikk Skall/hardware

36 Alpha versjon / 0-serie Fullverdig produkt Mangler kvalitetssikring og ubetydelige funksjoner Produseres og distribueres til brukere for feedback

37 Prototypingsverktøy Macromedia Director/Flash Visual Basic Web verktøy: eks. Dreamweaver. HyperCard, SuperCard Smalltalk JBuilder, Delphi++

38 Oppsummering: Konkret tenking - for å se det fra brukerens perspektiv. Visuell tenking - for å formidle kontekst og en rik helhet. Rollespill - for å oppleve det selv og få empati. Først parallelle design versjoner for å utforske muligheter Så iterativ design for å teste og rafinere Trondheim, 2001

39 Mobil IT, noen momenter Forgrunn / Bakgrunn Hardware og ergonomi Mind/Body Omgivelses-data Skjerm-størrelse PC på internett Hovedfokuset er på bruk av PCen. PCen har funnet sin fysiske form. Symbolmanipulasjon (mind) Fysiske posisjon er irrelevant (CyberSpace) Store skjermer Mobil, trådløs IT PDA/mobil er integrert med andre aktiviteter Hardware blir viktig (størrelse, vekt, batteri,,) Også fysiske handlinger (bodymind) Lokasjon og sensordata kan brukes. Små skjermer, sollys. Input Tastatur og mus Pen, knapper, en-hånds løsninger.

40 Ny teknologi, Ny praksis Ny teknologi åpner for nye måter å utføre oppgaver og nye samhandlingsmønstre. Teknologi Framtid Oppgaveanalyse Drama workshop med prototyp improvisasjon Nåtid Feltstudier Nåtid Future workshops Praksis Framtid