INF1500 – Introduksjon til design, bruk, interaksjon Design, prototyping og konstruksjon 1 | 30.09.13
INF1500 - Introduksjon til design, bruk, interaksjon
Design, prototyping og konstruksjon
30. september 2013
Institutt for Informatikk, Universitetet i Oslo
INF1500 – Introduksjon til design, bruk, interaksjon Design, prototyping og konstruksjon 2 | 30.09.13
Konkurranse
andkrist 22
henrihan 21
stiako 20
geirmuns 18,5
eriklar 17
adrianm 16
nielsl 16
frodeni 15
mjohnsen 15
mettesu 15
martdal 15
• Sist oppdatert på fredag…
• Gjennomsnittet på quiz 1 har økt til 6,1 av 15 poeng
• Foreløpig gjennomsnitt på quiz 2 er på 4,7 av 15 poeng
• Vi er halvveis i gruppeundervisningen allerede
• Midtveisevaluering neste uke!
• Det kommer 3-4 quizer til på gruppetimene
INF1500 – Introduksjon til design, bruk, interaksjon Design, prototyping og konstruksjon 3 | 30.09.13
Oversikt
• Prototyping• Hva, hvordan og hvorfor?
• Dimensjoner ved prototyping
• Low-fidelity
• High-fidelity
• Kompromisser
• Konstruksjon
• Konseptuell design
• Metaforer
• Interaksjonstyper
• Scenarioer
INF1500 – Introduksjon til design, bruk, interaksjon Design, prototyping og konstruksjon 4 | 30.09.13
Behovsanalyse
kravspesifikasjon
Design prototype
Evaluering analyse
Obligatorisk oppgave 1
Obligatorisk oppgave 2
Obligatorisk oppgave 3
Brukersentrert utvikling
Her er vi nå!
INF1500 – Introduksjon til design, bruk, interaksjon Design, prototyping og konstruksjon 5 | 30.09.13
Er dette en prototype?
INF1500 – Introduksjon til design, bruk, interaksjon Design, prototyping og konstruksjon 6 | 30.09.13
Hva er en prototype?
• I andre design områder er en prototype en modell, i liten skala
• Miniatyrbil
• Miniatyrbygning
• Prototype – etymologi
Protos ”første” + typos ”intrykk”
INF1500 – Introduksjon til design, bruk, interaksjon Design, prototyping og konstruksjon 7 | 30.09.13
Hva er prototyping?
INF1500 – Introduksjon til design, bruk, interaksjon Design, prototyping og konstruksjon 8 | 30.09.13
Hva er prototyping?
INF1500 – Introduksjon til design, bruk, interaksjon Design, prototyping og konstruksjon 9 | 30.09.13
Prototyping
• Hva er en prototype?
• Hvordan prototype?
• Hvorfor lage prototyper?
• Ulike typer
• Low fidelity (lav nøyaktighet/oppløsning)
• High fidelity (høy nøyaktighet/oppløsning)
• Kompromisser ved prototyping
• Vertikale
• Horisontale
• Konstruksjon av prototyper
INF1500 – Introduksjon til design, bruk, interaksjon Design, prototyping og konstruksjon 10 | 30.09.13
Hvordan prototype?
• To muligheter:1. Begynne fra scratch
2. Modifisere en eksisterende idé
• En serie med skisser
• Et storyboard (dreiebok); tegneserie
• Lysark (powerpoint slides)
• En video – som simulerer bruk av systemet
• Fysisk modell (trebit for håndholdte terminaler)
• Papp modell
• Programkode som viser en begrenset funksjonalitet
• …og utallige andre varianter
INF1500 – Introduksjon til design, bruk, interaksjon Design, prototyping og konstruksjon 11 | 30.09.13
Hvorfor prototype?
• Gir mulighet til å vise frem og teste egne ideer
• For å få til evaluering og tilbakemelding fra brukere
• Aktører kan interagere med prototypen lettere enn ved ”skriftlige beskrivelser”
• Gjør kommunikasjon mellom bruker og utvikler enklere og rikere. Også mellom
medlemmer i designgruppa
• Stimulerer til refleksjon
• Prototyper gir svar på spørsmål, og støtter designere i å velge mellom alternativer
• Gjør at utviklere og ikke-tekniske aktører kan snakke ”samme språk”
INF1500 – Introduksjon til design, bruk, interaksjon Design, prototyping og konstruksjon 12 | 30.09.13
Hvorfor prototype?
• Tradisjonell systemdesign vs. interaksjonsdesign
• Systemutvikler• Hva kan jeg enkelt utvikle på denne plattformen?
• Hva kan jeg enkelt utvikle med verktøyet jeg har tilgjengelig?
• Hva finner jeg som utvikler mest interessant?(S.Greenberg 2005)
• Interaksjonsdesigner• Hva er brukerens egenskaper og behov?
• Hvilken kontekst designer vi for?
• Hvilke oppgaver skal brukeren løse?
• Hvordan kan jeg sikre brukervennlighet?(J.Nielsen 1993)
• Obligatorisk oppgave 2 prototype to designforslag
Bruker i fokus Utallige løsninger
Funksjonalitet i fokus
Ofte bare én riktig løsning
INF1500 – Introduksjon til design, bruk, interaksjon Design, prototyping og konstruksjon 13 | 30.09.13
Dimensjoner ved prototyping
Dimensjon Eksempler på variable
Utseende Størrelse, farge, form, fasong, tekstur, proporsjon, hardhet,
gjennomsiktighet, haptisk, lyd
Data Størrelse, type, bruk, personvern, hierarki, organisering
Funksjonalitet Systemets funksjoner og brukernes behov
Interaktivitet Input, output, feedback, informasjon
Romlig
struktur
Sammensetning av grensesnitt og informasjonssystemer,
relasjon mellom elementer, 2D/3D, tangible eller intangible
Hentet fra s. 397 (3. utgave)
INF1500 – Introduksjon til design, bruk, interaksjon Design, prototyping og konstruksjon 14 | 30.09.13
Dimensjoner ved prototyping
Dimensjon Definisjon Eksempler på variable
Materiale Medium brukt til å forme
prototypen
Fysisk medium (papir, tre, plastikk), utstyr
for å forme fysisk medium (kniv, saks, penn,
sandpapir), programvareutstyr (Adobe
Flash, Visual Basic), fysisk utstyr (Phidgets,
Arduino).
Oppløsning Detaljnivå (hva som
manifesteres) –
korresponderer med
fidelity
Nøyaktighet, utseende, interaktive detaljer,
realistisk data vs. dummy data
Scope Omfanget av det som
manifesteres
Grad av kontekstualisering
Hentet fra s. 398 (3. utgave)
INF1500 – Introduksjon til design, bruk, interaksjon Design, prototyping og konstruksjon 15 | 30.09.13
Hva kan man lage prototype på?
• Tekniske forhold
• Arbeidsflyt, oppgavedesign
• Skjermlayout, informasjonsvisning
• Interaksjonsforhold
• Vanskelige, kontroversielle, kritiske områder
INF1500 – Introduksjon til design, bruk, interaksjon Design, prototyping og konstruksjon 16 | 30.09.13
Low-fidelity
• Bruker et medium ulikt fra det endelige produktet
• Det er raskt, billig og kan endres hurtig gir rask tilbakemelding på design
• Lar oss eksperimentere med alternative design
• Skaper forventningskontroll mellom bruker og utvikler
• Innbyr til utforsking
• Nesten all interaksjon kan fakes
• Eksempler på low fidelity prototyper:
• Storyboard
• Skisser
• Kortbaserte prototyper
• ”Wizard of Oz”
• Wireframing
INF1500 – Introduksjon til design, bruk, interaksjon Design, prototyping og konstruksjon 17 | 30.09.13
Storyboards
• Stammer fra film og animasjon
• Serie med skisser som viser hvordan brukeren går igjennom ulike steg i oppgaven
• Gir et ”manuskript” over viktige detaljer
• Holder detaljer utenfor
• Fokus på de viktigste interaksjoner
• Blir ofte brukt med scenarioer gir mulighet for rollespill
• Blir brukt i en tidlig fase av designet
CMU HCI Master's Capstone Project 2007
INF1500 – Introduksjon til design, bruk, interaksjon Design, prototyping og konstruksjon 18 | 30.09.13
Storyboards
• Eksempel fra obligatorisk oppgave 2 i 2011:
(CMU HCI Master's Capstone Project 2007)
INF1500 – Introduksjon til design, bruk, interaksjon Design, prototyping og konstruksjon 19 | 30.09.13
Skisser
• Tegning av grensesnittets utseende, følelse eller funksjonalitet
• Veldig raskt og enkelt å igangsette
• Forenklingen gjør at brukere kan konsentrere seg om høynivå-temaer
• Viktig å ikke la seg hemme av egne tegneferdigheter bruk enkle symboler
INF1500 – Introduksjon til design, bruk, interaksjon Design, prototyping og konstruksjon 20 | 30.09.13
Skisser
(N. Carlson and H. Emsheimer, 2009)
(N. Carlson and J. Bates, 2009)
INF1500 – Introduksjon til design, bruk, interaksjon Design, prototyping og konstruksjon 21 | 30.09.13
Pictive
• “plastic interface for collaborative technology initiatives through video exploration”
• Brukes mye til å utforske og designe grafiske grensesnitt
• Inkluderer brukere som fullverdige deltagere i designprosessen
• Bruker kontorutstyr (tavle, penn, papir, post-it lapper et.c) til å demonstere interaksjon
• Sesjonen tas opp på video for senere gjennomgang
http://jaigodara.com/ixdesign/notification.htmlhttp://lonewolfej.com/CS5317/
INF1500 – Introduksjon til design, bruk, interaksjon Design, prototyping og konstruksjon 22 | 30.09.13
Kortbaserte prototyper
• Indeks kort
• Typisk 3 x 5 inches (ca. 7,5 x 12,5 cm)
• Hvert kort representerer et skjermbilde – eller en del av en skjerm
• Blir ofte benyttet i utvikling av websider
INF1500 – Introduksjon til design, bruk, interaksjon Design, prototyping og konstruksjon 23 | 30.09.13
Kortbaserte prototyper
(R. Saunders 2006)
INF1500 – Introduksjon til design, bruk, interaksjon Design, prototyping og konstruksjon 24 | 30.09.13
Wizard of Oz
• ”A method of testing a system that does not exist”
(The listening typewriter, IBM 1984)(Gould, Conti & Hovanvecz, Comm ACM 26(4) 1983)
• Brukeren tror han interagerer med et autonomt system, for eksempel en
datamaskin – en utvikler ”spiller” datamaskinen
• Blir vanligvis benyttet
tidlig i design for å
forstå brukerens
forventninger
Talestyrt
maskin
Hei Tone
Hei
Tone
(S.Greenberg 2005)
INF1500 – Introduksjon til design, bruk, interaksjon Design, prototyping og konstruksjon 25 | 30.09.13
High-fidelity
• Bruker materiale som kan forventes i det endelige produktet
• Prototypen likner mer på det endelige produktet enn en low‐fidelity prototype
• Nyttig når man skal selge ideer og teste tekniske forhold
• Fare: Brukere kan tro de har et ”ferdig system” forventningskontroll
INF1500 – Introduksjon til design, bruk, interaksjon Design, prototyping og konstruksjon 26 | 30.09.13
Prototyping i tidlig vs. sent design
Tidlig design
Sent design
Low-fidelity prototyping
High-fidelity prototyping
Fungerende systemer
Brainstorming av ulike representasjoner
Velg representasjon
Kladde ut et grensesnitt
Oppgavesentrert walkthrough og re-design
Fintuning av grensesnitt, skjermdesign
Heuristisk evaluering og re-design
Brukbarhetstesting og re-design
Begrenset testing i feltet
Alphatesting
Betatesting
Medium-fidelity prototyping
INF1500 – Introduksjon til design, bruk, interaksjon Design, prototyping og konstruksjon 27 | 30.09.13
Ulike faser i prototypingen
Oppgave
sentrert
system-
design
Partici-
patory
design
Bruker-
sentrert
design
Identifisere brukere og
deres nøkkeloppgaver
Evaluere
opp-
gaver
Bruker- og
oppgavebeskrivelse
Brainstorme idéer
Dagligdags
psykologi
Brukerinn-
volvering
Represen-
tasjoner og
metaforer
Partici-
patory
design
Oppgave-
sentrert
walk-
through
Low-
fidelity
proto-
typing
Kastbare
papirprototyper
Grafiske
skjerm-
design
Retnings-
linjer for
grensesnitt
Stilmaler
Bruk-
barhets-
testing
Heuristisk
Evaluering
Forbedre designet
High-
fidelity
proto-
typing
Testbare prototyper Alpha- og betatesting
eller ferdig system
Testing i
feltet
Ferdigstilt designMålsetning
Metode
Produkt
INF1500 – Introduksjon til design, bruk, interaksjon Design, prototyping og konstruksjon 28 | 30.09.13
Low-fidelity vs. high-fidelity
Low-fidelity High-fidelity
Åpen diskusjon
Utspørring nødvending
«Quick and dirty»
Tidlig validering
Få detaljer
Fokus på hovedinteraksjoner
Klare meninger
Selvforklarende
Bevisst og forseggjort
Konkrete ideer
Flere detaljer
Fokus på helheten
(A. Wiethoff & A. Butz, 2011)
INF1500 – Introduksjon til design, bruk, interaksjon Design, prototyping og konstruksjon 29 | 30.09.13
Low-fidelity vs. high-fidelityFidelity Fordeler Ulemper
Low-fidelity • Lavere kostnad
• Kan evaluere flere designalternativ
• Nyttig kommunikasjonskanal
• Begrenset feilsjekking
• Drevet av tilrettelegger
• Begrenset bruk i senere faser av design
High-fidelity • Fullt funksjonell og interaktiv
• Brukerdrevet
• Ser og føles ut som endelig produkt
• Dyr og tidkrevende å utvikle
• Ikke effektiv for kravinnsamling
• Sensitiv for feil under testing
Resten av tabellen finnes på s. 396 (3. utgave)
INF1500 – Introduksjon til design, bruk, interaksjon Design, prototyping og konstruksjon 30 | 30.09.13
Ulike faser i utviklingen
Idé Skisse Konsept Low-fi Hi-fi Lansering
Eksplorativ utvikling Formativ utvikling
Radikale forandringer Inkrementelle forandringer(S. Wendlandt, 2011)
INF1500 – Introduksjon til design, bruk, interaksjon Design, prototyping og konstruksjon 31 | 30.09.13
Kompromisser
• Alle prototyper involverer kompromisser
• Eksempler: langsom respons, begrenset funksjonalitet etc.
• To typer kompromisser:
Horisontal prototype
• Tilfører et bredt spekter av funksjoner
• Hver funksjon har lite detalj/dybde
Vertikal prototype
• Tilfører få funksjoner
• Hver funksjon har mye detalj/dybde
• Kompromisser må ikke ignoreres
INF1500 – Introduksjon til design, bruk, interaksjon Design, prototyping og konstruksjon 32 | 30.09.13
Konstruksjon
• Lære fra evalueringen av prototypene
skape en helhet
• Oppmerksom rettes mot:
• Brukbarhet
• Robusthet
• Vedlikeholdbarhet
• Portabilitet
• Effektivitet (efficiency, effectiveness)
• Evolusjonær prototype prototypen utvikles
til et endelig produkt
• ”lag og kast” prototype prototypen kastes
og endelig produkt bygges fra scratch
INF1500 – Introduksjon til design, bruk, interaksjon Design, prototyping og konstruksjon 33 | 30.09.13
Obligatorisk oppgave 2
• Formålet med obligen er å designe to prototyper tilpasset brukeren du intervjuet i oblig 1
• For hver av prototypene skal du lage følgende:
• Et scenario som beskriver brukssituasjonen, samt brukeren og deres behov
• En enkel papirprototype som grovt illustrerer hvordan designet skal bli
• En mer høyoppløselig prototype hvor konkrete designvalg er tatt
• For hver av prototypene skal du beskrive og utdype følgende:
• Prototypens grensesnitt, funksjonalitet og interaksjon
• Valg av designprinsipper og retningslinjer (foreleses neste uke)
• Hvilke dimensjoner som prototypes
• Hvilke behov prototypen adresserer
"First, understand the users' world, then figure out howyour design fits in."
INF1500 – Introduksjon til design, bruk, interaksjon Design, prototyping og konstruksjon 34 | 30.09.13
Tips til obligatorisk oppgave 2
• Utforsk
• Vær kreativ
• Bruk teorien
• Les oppgaven nøye (det er et par restriksjoner)
• Kom i gang tidlig!
• Sentrale spørsmål
• Hvorfor prototyper jeg? Hvilket problemområde ønsker jeg å utforske?
• Hva er det prototypen prototyper? Hvilke dimensjoner av produktet ønsker jeg å studere?
• Hvordan blir prototypen? Hvilken fidelity går jeg for og hvilke kompromisser må jeg godta?
INF1500 – Introduksjon til design, bruk, interaksjon Design, prototyping og konstruksjon 35 | 30.09.13
Konseptuelt design
• Overføring av brukerkrav til en konseptuell modell
• ”En beskrivelse av det foreslåtte system ved et sett med integrerte ideer og konsepter om hva systemet skal gjøre, hvordan det skal oppføre seg, hvordandet skal se ut – som skal være forståelig for brukerne”
• Moodboard
• Fra konseptmodell till ”løsning” lett å ”hoppe” rett til løsning
• Gjenta, gjenta, gjenta
• Ved vurdering av alternativer: prototyper hjelper
INF1500 – Introduksjon til design, bruk, interaksjon Design, prototyping og konstruksjon 36 | 30.09.13
Finnes egnede metaforer?
• Grensesnittmetafor – kombinerer kjent kunnskap med ny kunnskap på en slik
måte at det hjelper brukeren med å forstå løsningen
• Tre steg for å velge metafor:
1. Forstå systemets funksjonalitet
2. Identifisere potensielle problemområder
3. Generer metaforer
• Fem spørsmål for å evaluere metaforer:
1. Hvilken struktur tilfører metaforen?
2. Hvor relevant er metaforen for problemet som skal løses?
3. Er metaforen enkel å representere?
4. Vil brukeren forstå metaforen?
5. Hvor skalerbar er metaforen?
(J. Clark, O’Reilly 2010)
INF1500 – Introduksjon til design, bruk, interaksjon Design, prototyping og konstruksjon 37 | 30.09.13
Interaksjonstyper
• Forteller hvordan en bruker interagerer med systemet
• Fire typer interaksjon:
1. Instruerende
2. Konverserende
3. Manipulerende
4. Eksplorerende
• Tilfører ulike typer grensesnitt innsikt?
• WIMP (Windows, Icon, Menu, Pointing device)
• Shareable
• Augmented reality
• Wearable computing
• Tangible interaction
• Ubiquitous computing
• flere eksempler på s. 158 (3. utgave)
Disse fire
interaksjonstypene er
det viktig at dere kan
godt til eksamen!
Les mer i kapittel 2.
INF1500 – Introduksjon til design, bruk, interaksjon Design, prototyping og konstruksjon 38 | 30.09.13
Utviding av den konseptuelle modellen
• Hvilke funksjoner skal produktet gi?• Hva skal produktet gjøre og hva skal brukere gjøre (oppgaveallokering)?
• Hvordan er funksjonene relaterte til hverandre?• Sekvensiell eller parallell
• Kategorisering
• Hva slags informasjon skal være tilgjengelig?• Hvilke data trengs for å gjennomføre oppgave?
• Hvordan blir data transformert i systemet?
INF1500 – Introduksjon til design, bruk, interaksjon Design, prototyping og konstruksjon 39 | 30.09.13
Bruk av scenarioer i konseptuell design
• Uttrykke foreslåtte eller tenkte situasjoner
• Blir brukt i designet på ulike måter:• Script som kan brukes under evaluering av prototyper
• Konkrete eksempler på oppgaver
• Negative scenarioer (minus-scenarioer) brukes til å utlede ikke-funksjonelle krav
• Benytte ”ekstreme” scenarioer for å utvide designrommet
(A. Cooper et. al, 2007)
INF1500 – Introduksjon til design, bruk, interaksjon Design, prototyping og konstruksjon 40 | 30.09.13
Scenarioer involverer personas
(A. Cooper et. al, 2007)
INF1500 – Introduksjon til design, bruk, interaksjon Design, prototyping og konstruksjon 41 | 30.09.13
Fra scenario til storyboard
INF1500 – Introduksjon til design, bruk, interaksjon Design, prototyping og konstruksjon 42 | 30.09.13
Fra use case til kortbasert prototype
INF1500 – Introduksjon til design, bruk, interaksjon Design, prototyping og konstruksjon 43 | 30.09.13
Oppsummering
• Prototyper brukes til ulike formål – i ulike deler av utviklingen
• Prototyper lar oss utforske og gir svar på spørsmål og hypoteser
• Konseptuell design er det første steget i design
• Vi må vurdere passende interaksjonstyper og grensesnitt
• Storyboards kan bli skapt fra scenarios
• Kortbaserte prototyper kan bli skapt fra use cases
INF1500 – Introduksjon til design, bruk, interaksjon Design, prototyping og konstruksjon 44 | 30.09.13
Øvrig videoer for de interesserte
• Stanford-forelesning: How Prototyping Practices Affect Design Results
• Strategyzer, ep. 3 – Prototyping
• Rapid prototyping Google Glass
• Sketching iPhone User Interfaces
• Game Design Fundamentals - Game Paper Prototyping
Lenker til alle videoene ligger også under pensumoversikten på kurssiden
• …og en interessant artikkel om scenario-basert design
Ligger også på kursets pensumsside