INF1500 - Introduksjon til design, bruk, interaksjon Design, prototyping og konstruksjon 29. september 2014 Institutt for Informatikk, Universitetet i Oslo joshi@ifi.uio.no INF1500 Introduksjon til design, bruk, interaksjon Design, prototyping og konstruksjon 1 29.09.14
Oversikt Prototyping Hva, hvordan og hvorfor? Dimensjoner ved prototyping Low-fidelity High-fidelity Kompromisser Konstruksjon Konseptuell design Metaforer Interaksjonstyper Scenarioer Oblig 2 Konkurranse INF1500 Introduksjon til design, bruk, interaksjon Design, prototyping og konstruksjon 2 29.09.14
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 INF1500 Introduksjon til design, bruk, interaksjon Design, prototyping og konstruksjon 3 29.09.14
Brukersentrert utvikling Obligatorisk oppgave 1 Behovsanalyse kravspesifikasjon Her er vi nå! Evaluering analyse Obligatorisk oppgave 3 Design prototype Obligatorisk oppgave 2 INF1500 Introduksjon til design, bruk, interaksjon Design, prototyping og konstruksjon 4 29.09.14
Er dette en prototype? INF1500 Introduksjon til design, bruk, interaksjon Design, prototyping og konstruksjon 5 29.09.14
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 6 29.09.14
Hva er prototyping? INF1500 Introduksjon til design, bruk, interaksjon Design, prototyping og konstruksjon 7 29.09.14
Hva er prototyping? INF1500 Introduksjon til design, bruk, interaksjon Design, prototyping og konstruksjon 8 29.09.14
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 9 29.09.14
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 10 29.09.14
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 11 29.09.14
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) Funksjonalitet i fokus Ofte bare én riktig løsning 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) Bruker i fokus Utallige løsninger Obligatorisk oppgave 2 prototype to designforslag INF1500 Introduksjon til design, bruk, interaksjon Design, prototyping og konstruksjon 12 29.09.14
Dimensjoner ved prototyping Dimensjon Utseende Eksempler på variable Størrelse, farge, form, fasong, tekstur, proporsjon, hardhet, gjennomsiktighet, haptisk, lyd Data Funksjonalitet Interaktivitet Romlig struktur Størrelse, type, bruk, personvern, hierarki, organisering Systemets funksjoner og brukernes behov Input, output, feedback, informasjon 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 13 29.09.14
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 14 29.09.14
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 15 29.09.14
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 16 29.09.14
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 17 29.09.14
Storyboards (CMU HCI Master's Capstone Project 2007) Eksempel fra obligatorisk oppgave 2 i 2011: INF1500 Introduksjon til design, bruk, interaksjon Design, prototyping og konstruksjon 18 29.09.14
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 19 29.09.14
Skisser (N. Carlson and J. Bates, 2009) (N. Carlson and H. Emsheimer, 2009) INF1500 Introduksjon til design, bruk, interaksjon Design, prototyping og konstruksjon 20 29.09.14
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.html http://lonewolfej.com/cs5317/ INF1500 Introduksjon til design, bruk, interaksjon Design, prototyping og konstruksjon 21 29.09.14
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 22 29.09.14
Kortbaserte prototyper (R. Saunders 2006) INF1500 Introduksjon til design, bruk, interaksjon Design, prototyping og konstruksjon 23 29.09.14
Online prototypeverktøy INF1500 Introduksjon til design, bruk, interaksjon Design, prototyping og konstruksjon 24 29.09.14
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 Hei Tone Hei Tone (S.Greenberg 2005) Talestyrt maskin INF1500 Introduksjon til design, bruk, interaksjon Design, prototyping og konstruksjon 25 29.09.14
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 29.09.14
Prototyping i tidlig vs. sent design Tidlig design Brainstorming av ulike representasjoner Velg representasjon Kladde ut et grensesnitt Low-fidelity prototyping Oppgavesentrert walkthrough og re-design Fintuning av grensesnitt, skjermdesign Heuristisk evaluering og re-design Brukbarhetstesting og re-design Medium-fidelity prototyping Begrenset testing i feltet High-fidelity prototyping Alphatesting Betatesting Fungerende systemer Sent design INF1500 Introduksjon til design, bruk, interaksjon Design, prototyping og konstruksjon 27 29.09.14
Ulike faser i prototypingen Målsetning Identifisere brukere og deres nøkkeloppgaver Brainstorme idéer Forbedre designet Ferdigstilt design Metode Oppgave sentrert systemdesign Participatory design Brukersentrert design Dagligdags psykologi Evaluere oppgaver Brukerinnvolvering Representasjoner og metaforer Oppgavesentrert walkthrough Lowfidelity prototyping Participatory design Grafiske skjermdesign Retningslinjer for grensesnitt Stilmaler Brukbarhetstesting Highfidelity prototyping Heuristisk Evaluering Testing i feltet Produkt Bruker- og oppgavebeskrivelse Kastbare papirprototyper Testbare prototyper Alpha- og betatesting eller ferdig system INF1500 Introduksjon til design, bruk, interaksjon Design, prototyping og konstruksjon 28 29.09.14
Low-fidelity vs. high-fidelity Low-fidelity High-fidelity Åpen diskusjon Utspørring nødvending «Quick and dirty» Tidlig validering Klare meninger Selvforklarende Bevisst og forseggjort Konkrete ideer Få detaljer Fokus på hovedinteraksjoner Flere detaljer Fokus på helheten (A. Wiethoff & A. Butz, 2011) INF1500 Introduksjon til design, bruk, interaksjon Design, prototyping og konstruksjon 29 29.09.14
Low-fidelity vs. high-fidelity Fidelity 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 29.09.14
Ulike faser i utviklingen Eksplorativ utvikling Formativ utvikling Idé Skisse Konsept Low-fi Hi-fi Lansering Radikale forandringer Inkrementelle forandringer (S. Wendlandt, 2011) INF1500 Introduksjon til design, bruk, interaksjon Design, prototyping og konstruksjon 31 29.09.14
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 29.09.14
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 29.09.14
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, hvordan det 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 34 29.09.14
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 35 29.09.14
Interaksjonstyper Forteller hvordan en bruker interagerer med systemet Fire typer interaksjon: 1. Instruerende 2. Konverserende 3. Manipulerende 4. Eksplorerende Disse fire interaksjonstypene er det viktig at dere kan godt til eksamen! Les mer i kapittel 2. 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) INF1500 Introduksjon til design, bruk, interaksjon Design, prototyping og konstruksjon 36 29.09.14
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 37 29.09.14
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 38 29.09.14
Scenarioer involverer personas (A. Cooper et. al, 2007) INF1500 Introduksjon til design, bruk, interaksjon Design, prototyping og konstruksjon 39 29.09.14
Fra scenario til storyboard INF1500 Introduksjon til design, bruk, interaksjon Design, prototyping og konstruksjon 40 29.09.14
Fra use case til kortbasert prototype INF1500 Introduksjon til design, bruk, interaksjon Design, prototyping og konstruksjon 41 29.09.14
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 how your design fits in." INF1500 Introduksjon til design, bruk, interaksjon Design, prototyping og konstruksjon 42 29.09.14
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 43 29.09.14
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 29.09.14
Ø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 INF1500 Introduksjon til design, bruk, interaksjon Design, prototyping og konstruksjon 45 29.09.14