INF1500 - Introduksjon til design, bruk, interaksjon ... · INF1500 –Introduksjon til design, bruk, interaksjon Design, prototyping og konstruksjon 21 | 29.09.14 Pictive • “plastic

INF1500 – Introduksjon til design, bruk, interaksjon Design, prototyping og konstruksjon 1 | 29.09.14

INF1500 - Introduksjon til design, bruk, interaksjon

Design, prototyping og konstruksjon

29. september 2014

Institutt for Informatikk, Universitetet i Oslo

[email protected]


Oversikt

• Prototyping• Hva, hvordan og hvorfor?

• Dimensjoner ved prototyping

• Low-fidelity

• High-fidelity

• Kompromisser

• Konstruksjon

• Konseptuell design

• Metaforer

• Interaksjonstyper

• Scenarioer

• Oblig 2

• Konkurranse


Konkurransen

magnusoy 6275

kirstaan 6175

siljemda 5350

jorgebjo 5575

tanahb 5575

jorgetre 5550

torbjovl 5500

ingrisvi 5325

idamva 5075

blob 4875

• Sist oppdatert på fredag…

• Gjennomsnittet på forrige quiz var 3,8 av 7 poeng

• Vi er allerede snart halvveis i gruppeundervisningen

• Midtveisevaluering neste uke!

• Det kommer fem quizer til i løpet av semesteret

• Husk at dette er god egentrening og flotte premier


Behovsanalyse

kravspesifikasjon

Design prototype

Evaluering analyse

Obligatorisk oppgave 1



Brukersentrert utvikling

Her er vi nå!


Er dette en prototype?


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”


Hva er prototyping?


Hva er prototyping?


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


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


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”


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


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)


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)


Hva kan man lage prototype på?

• Tekniske forhold

• Arbeidsflyt, oppgavedesign

• Skjermlayout, informasjonsvisning

• Interaksjonsforhold

• Vanskelige, kontroversielle, kritiske områder


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


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


Storyboards

• Eksempel fra obligatorisk oppgave 2 i 2011:

(CMU HCI Master's Capstone Project 2007)


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


Skisser

(N. Carlson and H. Emsheimer, 2009)

(N. Carlson and J. Bates, 2009)


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/


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


Kortbaserte prototyper

(R. Saunders 2006)


Online prototypeverktøy


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)


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


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


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


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)


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)


Ulike faser i utviklingen

Idé Skisse Konsept Low-fi Hi-fi Lansering

Eksplorativ utvikling Formativ utvikling

Radikale forandringer Inkrementelle forandringer(S. Wendlandt, 2011)


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


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


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


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)


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.


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?


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)


Scenarioer involverer personas

(A. Cooper et. al, 2007)


Fra scenario til storyboard


Fra use case til kortbasert prototype



• 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."


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?


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


Ø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

Documents

INF1500 - Introduksjon til design, bruk, interaksjon ... · INF1500 –Introduksjon til design, bruk, interaksjon Design, prototyping og konstruksjon 21 | 29.09.14 Pictive • “plastic