IN1050 - Introduksjon til design, bruk, interaksjon Design, prototyping og konstruksjon 30. september 2019 Institutt for Informatikk, Universitetet i Oslo joshi@ifi.uio.no 30.09.19 IN1050 Introduksjon til design, bruk og interaksjon Forelesning 6: Design, prototyping og konstruksjon 1
30.09.19 IN1050 Introduksjon til design, bruk og interaksjon Forelesning 6: Design, prototyping og konstruksjon 2
30.09.19 IN1050 Introduksjon til design, bruk og interaksjon Forelesning 6: Design, prototyping og konstruksjon 3
Dagens forelesning Prototyping Hva, hvordan og hvorfor? Dimensjoner ved prototyping Low-fidelity High-fidelity Kompromisser Konseptuell modell Grensesnittmetaforer Scenarioer Oblig 3 30.09.19 IN1050 Introduksjon til design, bruk og interaksjon Forelesning 6: Design, prototyping og konstruksjon 4
Designworkshop med Defi onsdag 2. oktober Defi inviterer deg til Designworkshop! Det blir live-prototyping med ulike teknikker Du får mulighet til å lære hvordan man kan prototype med papp, tegne enkle skisser, lage storyboards og wireframes I tillegg vil du få et innblikk i Sketch, Figma og Invision verktøy som du kan bruke til å lage high-fidelity prototyper Det vil være gruppelærere fra IN1050 tilstede og som vanlig stiller Defi opp med snacks, brus og brownies Bli med og få inspirasjon til oblig 3 i IN1050 eller til din designportefølje Lenke til arrangement: https://www.facebook.com/events/562466407624810/ Er det noe annet du vil lære om på Defi sine designworkshops: https://bit.ly/2mqgsza 30.09.19 IN1050 Introduksjon til design, bruk og interaksjon Forelesning 6: Design, prototyping og konstruksjon 5
30.09.19 IN1050 Introduksjon til design, bruk og interaksjon Forelesning 6: Design, prototyping og konstruksjon 6
Nøkkelbegreper fra dagens forelesning Grensesnittmetaforer s. 27 Dimensjoner s. 32-33 Low-fidelity prototyper s. 35 Wizard of Oz s. 53 High-fidelity prototyper s. 55 Horisontal og vertikale prototyper s. 89 30.09.19 IN1050 Introduksjon til design, bruk og interaksjon Forelesning 6: Design, prototyping og konstruksjon 7
Vår rolle i en større prosess uferdige tanker Gründer Idéskaper Interaksjonsdesigner Foreslå konkrete løsninger Utvikler Implementere løsning 30.09.19 IN1050 Introduksjon til design, bruk og interaksjon Forelesning 6: Design, prototyping og konstruksjon 8
Brukersentrert design (UCD) Obligatorisk oppgave 2 Behovsanalyse kravspesifikasjon Her er vi nå! Evaluering analyse Obligatorisk oppgave 4 Design prototype Obligatorisk oppgave 3 30.09.19 IN1050 Introduksjon til design, bruk og interaksjon Forelesning 6: Design, prototyping og konstruksjon 9
Er dette en prototype? 30.09.19 IN1050 Introduksjon til design, bruk og interaksjon Forelesning 6: Design, prototyping og konstruksjon 10
Hva er en prototype? Definisjoner: - Prototype Innen andre designområder er en prototype en modell, i liten skala: Miniatyrbil Miniatyrbygning Ordets etymologiske opprinnelse: Protos første + typos intrykk En prototype hjelper oss med å forstå egenskaper og kvaliteter ved den endelige løsningen 30.09.19 IN1050 Introduksjon til design, bruk og interaksjon Forelesning 6: Design, prototyping og konstruksjon 11
Hva er en prototype? 30.09.19 IN1050 Introduksjon til design, bruk og interaksjon Forelesning 6: Design, prototyping og konstruksjon 12
Prototyping: dagens forelesning 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 prototyper Horisontale prototyper 30.09.19 IN1050 Introduksjon til design, bruk og interaksjon Forelesning 6: Design, prototyping og konstruksjon 13
Hvordan prototype? To muligheter: 1. Begynne fra scratch 2. Modifisere en eksisterende idé Eksempler på relevante prototyper: 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) Pappmodeller Programkode som viser en begrenset funksjonalitet og utallige andre varianter 30.09.19 IN1050 Introduksjon til design, bruk og interaksjon Forelesning 6: Design, prototyping og konstruksjon 14
30.09.19 IN1050 Introduksjon til design, bruk og interaksjon Forelesning 6: Design, prototyping og konstruksjon 15 Pentagon (IN1060 v18): - Christopher Kløv Andersen - Steffen Ekeberg Bråten - Steven Hoang Giang Nguyen - ThuThuan Thi Vo - Trần Văn Ngọc Tân
Hva sitter dere med etter oblig 2? Dere har noen tanker om hva brukerne deres har av ønsker og behov Dere har kanskje lært litt om hvilke muligheter, begrensninger og forutsetninger som finnes Dere forstår mer om hvilken kontekst brukeren befinner seg i under bruk Dere vet litt om hvordan eksisterende løsninger kanskje ikke fungerer optimalt slik det er i dag Dere har sikkert masse tanker om hvilke krav man må stille til en løsning som skal fungere bedre Nå skal vi endelig begynne å snakke om hvordan vi får overført dette til et design 30.09.19 IN1050 Introduksjon til design, bruk og interaksjon Forelesning 6: Design, prototyping og konstruksjon 16
Designeksempel: Lading av nettbrett (1) I oblig 1 valgte jeg temaet om eldre mennesker I oblig 2 intervjuet jeg to eldre mennesker som brukte nettbrett aktivt i hjemmet Jeg lærte at lading var noe de slet med fordi det var vanskelig å treffe dockingen med laderen og kabelen hadde en liten plugg som krevde presisjon Gjennom intervjuet forstod jeg at reumatisme var en av flere årsaker til at dette var vanskelig for dem å bruke Det var et tydelig behov for tilgjengeliggjøring og tilpasning Systemet jeg skal designe i oblig 3 må kunne brukes av eldre mennesker med reumatiske utfordringer Jeg bør unngå presise bevegelser som krever finmotorikk i fingre og hender Jeg bør bygge på faktumet at de er hjemme og godt kjent med omgivelsene 30.09.19 IN1050 Introduksjon til design, bruk og interaksjon Forelesning 6: Design, prototyping og konstruksjon 17
Konseptuell modell Noe vi lager for før vi går i gang med prototyping av konkrete løsninger En konseptuell modell er en overordnet oversikt over konsepter som inngår og deres inter-relasjoner Gjør det lettere for oss å beskrive overordnet strategi og fokus med systemet vi foreslår 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 Hovedkomponentene er typisk: Metaforer og analogier som er relevante for aktiviteten Konseptene brukerne møter gjennom interaksjonen Relasjonen og mappingen mellom de ulike konseptene (mer på s. 74-77 i 5. utg / s. 41-44 i 4. utg) 30.09.19 IN1050 Introduksjon til design, bruk og interaksjon Forelesning 6: Design, prototyping og konstruksjon 18
Å utvide en konseptuell modell 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? 30.09.19 IN1050 Introduksjon til design, bruk og interaksjon Forelesning 6: Design, prototyping og konstruksjon 19
Designeksempel: Lading av nettbrett (2) Konseptuell modell: «Jeg ønsker å lage en løsning som benytter seg av trådløs lading i hjemmet for mennesker som sliter med reumatisme. Ved å bygge løsningen rundt gjenstander og materiale de allerede eier og mestrer kan jeg være sikker på at de faktisk får til å gjennomføre interaksjonene som er nødvendig for å klare å lade nettbrettet. For å passe på at løsningen ikke forstyrrer estetikken i hjemmet vil jeg forsøke å integrere løsningen i eksisterende gjenstander.» 30.09.19 IN1050 Introduksjon til design, bruk og interaksjon Forelesning 6: Design, prototyping og konstruksjon 20
Bruk av scenario i prototyping Uttrykke foreslåtte eller tenkte situasjoner Blir brukt i designet på ulike måter: Konkrete eksempler på oppgaver som er sentrale for eksisterende utfordringer Negative scenarioer (minus-scenarioer) brukes til å utlede ikke-funksjonelle krav Script som kan brukes (senere) under evaluering av prototyper Vi benytter ofte ekstreme scenarioer (f.eks. dommedagsscenario) for å utvide designrommet (A. Cooper et. al, 2007) 30.09.19 IN1050 Introduksjon til design, bruk og interaksjon Forelesning 6: Design, prototyping og konstruksjon 21
Scenarier involverer ofte personas (A. Cooper et. al, 2007) 30.09.19 IN1050 Introduksjon til design, bruk og interaksjon Forelesning 6: Design, prototyping og konstruksjon 22
Fra scenario til storyboard (A. Cooper et. al, 2007) 30.09.19 IN1050 Introduksjon til design, bruk og interaksjon Forelesning 6: Design, prototyping og konstruksjon 23
Bruk av scenario i prototyping Uttrykke foreslåtte eller tenkte situasjoner Blir brukt i designet på ulike måter: Konkrete eksempler på oppgaver som er sentrale for eksisterende utfordringer Negative scenarioer (minus-scenarioer) brukes til å utlede ikke-funksjonelle krav Script som kan brukes (senere) under evaluering av prototyper Vi benytter ofte ekstreme scenarioer (f.eks. dommedagsscenario) for å utvide designrommet (A. Cooper et. al, 2007) 30.09.19 IN1050 Introduksjon til design, bruk og interaksjon Forelesning 6: Design, prototyping og konstruksjon 24
Designeksempel: Lading av nettbrett (3) Utvide den konseptuelle modellen: Løsningen må kunne lade trådløst ved integrasjon i eksisterende møbler Må gi beskjed når nettbrettet lader slik at brukeren ved laderen er aktiv Må kunne gi beskjed når det er ferdig ladet slik at man kan legge den vekk Bør integreres på en måte som ikke forstyrrer eller forhindrer eksisterende aktivitet Designe for brukeren: Jeg ønsker å designe for Berit som er 86 år gammel Hun sliter med reumatisme og ufrivillige skjelvinger i begge hender, presist arbeid er vanskelig Men hun er kognitivt frisk og liker å bruke nettbrettet og har jobbet med datasystemer før Hun er innstilt på å lære nye løsninger, men trenger en interaksjon som støtter henne bedre 30.09.19 IN1050 Introduksjon til design, bruk og interaksjon Forelesning 6: Design, prototyping og konstruksjon 25
Repetisjon: Interaksjonstyper og grensesnitt Vi må bruke begreper vi har lært tidligere når vi skal beskrive de nye systemene vi ser for oss Fem typer interaksjon: Instruerende Konverserende Manipulerende Eksplorerende Responderende På hvilken måte tilfører de ulike typene grensesnitt vi kjenner til innsikt og støtte? WIMP (Windows, Icon, Menu, Pointing device) Shareable Augmented reality Wearable computing Tangible interaction Ubiquitous computing Se flere eksempler på s. 194 (5. utg) / s. 159 (4. utg) 30.09.19 IN1050 Introduksjon til design, bruk og interaksjon Forelesning 6: Design, prototyping og konstruksjon 26
Grensesnittmetaforer Definisjoner: - Grensesnittmetaforer 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) 30.09.19 IN1050 Introduksjon til design, bruk og interaksjon Forelesning 6: Design, prototyping og konstruksjon 27
30.09.19 IN1050 Introduksjon til design, bruk og interaksjon Forelesning 6: Design, prototyping og konstruksjon 28
Designeksempel: Lading av nettbrett (4) Berit kommer hjem fra eldresenteret. Hun er sliten og vil bare sette seg i godstolen og lese avisen på nettbrettet sitt. Fordi hun har et bord ved siden av stolen med en duk med trådløs lader bygget inn, ligger nettbrettet klart og ferdig ladet når hun kommer hjem. Når hun er ferdig bare legger hun fra seg nettbrettet på duken ved siden av stolen og fortsetter dagen. 30.09.19 IN1050 Introduksjon til design, bruk og interaksjon Forelesning 6: Design, prototyping og konstruksjon 29
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 30.09.19 IN1050 Introduksjon til design, bruk og interaksjon Forelesning 6: Design, prototyping og konstruksjon 30
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 3 prototype to designforslag 30.09.19 IN1050 Introduksjon til design, bruk og interaksjon Forelesning 6: Design, prototyping og konstruksjon 31
Dimensjoner: Hva kan vi prototype? Definisjoner: - Dimensjoner Dimensjon Eksempler på variable Utseende Størrelse, farge, form, fasong, tekstur, proporsjon, hardhet, gjennomsiktighet, haptisk, lyd Data Funksjonalitet Interaktivitet Størrelse, type, bruk, personvern, hierarki, organisering Systemets funksjoner og brukernes behov Input, output, feedback, informasjon Romlig struktur Sammensetning av grensesnitt og informasjonssystemer, relasjon mellom elementer, 2D/3D, tangible eller intangible 30.09.19 IN1050 Introduksjon til design, bruk og interaksjon Forelesning 6: Design, prototyping og konstruksjon 32
Dimensjoner: Hva kan vi prototype? 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 30.09.19 IN1050 Introduksjon til design, bruk og interaksjon Forelesning 6: Design, prototyping og konstruksjon 33
Hva kan vi lage prototyper på? Det er vanskelig (og tidkrevende) og skulle lage prototyper som lar oss teste «alt» så noen ganger må vi konsentrere oss om deler av forespeilet interaksjon Ofte prototyper vi først isolerte deler av systemet som en del av å det å omsider skulle forstå helheten Eksempler på hva man bruke som utgangspunkt for tidlig prototyping: Tekniske forhold Arbeidsflyt, oppgavedesign Skjermlayout, informasjonsvisning Interaksjonsforhold Vanskelige, kontroversielle, kritiske områder 30.09.19 IN1050 Introduksjon til design, bruk og interaksjon Forelesning 6: Design, prototyping og konstruksjon 34
Low-fidelity prototyper Definisjoner: - Low-fidelity prototype Low-fidelity prototyper er lavoppløselige forslag til det endelige forespeilede designet 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 Wizard of Oz Wireframing 30.09.19 IN1050 Introduksjon til design, bruk og interaksjon Forelesning 6: Design, prototyping og konstruksjon 35
30.09.19 IN1050 Introduksjon til design, bruk og interaksjon Forelesning 6: Design, prototyping og konstruksjon 36
30.09.19 IN1050 Introduksjon til design, bruk og interaksjon Forelesning 6: Design, prototyping og konstruksjon 37
30.09.19 IN1050 Introduksjon til design, bruk og interaksjon Forelesning 6: Design, prototyping og konstruksjon 38
30.09.19 IN1050 Introduksjon til design, bruk og interaksjon Forelesning 6: Design, prototyping og konstruksjon 39
30.09.19 IN1050 Introduksjon til design, bruk og interaksjon Forelesning 6: Design, prototyping og konstruksjon 40
30.09.19 IN1050 Introduksjon til design, bruk og interaksjon Forelesning 6: Design, prototyping og konstruksjon 41
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 30.09.19 IN1050 Introduksjon til design, bruk og interaksjon Forelesning 6: Design, prototyping og konstruksjon 42
Storyboards (CMU HCI Master's Capstone Project 2007) 30.09.19 IN1050 Introduksjon til design, bruk og interaksjon Forelesning 6: Design, prototyping og konstruksjon 43
30.09.19 IN1050 Introduksjon til design, bruk og interaksjon Forelesning 6: Design, prototyping og konstruksjon 44 ABAKE (IN1060 v18): - Andrea Ulshagen - Andreas Nygård Bergh - Bendik Johann Kroken - Emilie Bauck Dynestøl - Ketil Ellertsen
30.09.19 IN1050 Introduksjon til design, bruk og interaksjon Forelesning 6: Design, prototyping og konstruksjon 45 ABAKE (IN1060 v18): - Andrea Ulshagen - Andreas Nygård Bergh - Bendik Johann Kroken - Emilie Bauck Dynestøl - Ketil Ellertsen
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 30.09.19 IN1050 Introduksjon til design, bruk og interaksjon Forelesning 6: Design, prototyping og konstruksjon 46
Skisser (N. Carlson and J. Bates, 2009) (N. Carlson and H. Emsheimer, 2009) 30.09.19 IN1050 Introduksjon til design, bruk og interaksjon Forelesning 6: Design, prototyping og konstruksjon 47
30.09.19 IN1050 Introduksjon til design, bruk og interaksjon Forelesning 6: Design, prototyping og konstruksjon 48 Reunited (IN1060 v18): - Hanna Dokken - Rhea Toling - Marlene Hasle - Jonas Blårud - Suresh Sapkota
30.09.19 IN1050 Introduksjon til design, bruk og interaksjon Forelesning 6: Design, prototyping og konstruksjon 49
Designeksempel: Lading av nettbrett (5) 30.09.19 IN1050 Introduksjon til design, bruk og interaksjon Forelesning 6: Design, prototyping og konstruksjon 50
Wireframing: online prototypingsverktøy 30.09.19 IN1050 Introduksjon til design, bruk og interaksjon Forelesning 6: Design, prototyping og konstruksjon 51
Designeksempel: Lading av nettbrett (6) 30.09.19 IN1050 Introduksjon til design, bruk og interaksjon Forelesning 6: Design, prototyping og konstruksjon 52
Wizard of Oz Definisjoner: - 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 Wizard of Oz er en måte for oss å simulere deler av systemet for å gi brukeren en mer realistisk opplevelse Hei Tone (S.Greenberg 2005) Talestyrt maskin 30.09.19 IN1050 Introduksjon til design, bruk og interaksjon Forelesning 6: Design, prototyping og konstruksjon 53
30.09.19 IN1050 Introduksjon til design, bruk og interaksjon Forelesning 6: Design, prototyping og konstruksjon 54 ABAKE (IN1060 v18): - Andrea Ulshagen - Andreas Nygård Bergh - Bendik Johann Kroken - Emilie Bauck Dynestøl - Ketil Ellertsen
High-fidelity prototyper Definisjoner: - High-fidelity prototyper High-fidelity prototyper er høyoppløselige prototyper som er veldig like det endelige designet 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 30.09.19 IN1050 Introduksjon til design, bruk og interaksjon Forelesning 6: Design, prototyping og konstruksjon 55
30.09.19 IN1050 Introduksjon til design, bruk og interaksjon Forelesning 6: Design, prototyping og konstruksjon 56 Pentagon (IN1060 v18): - Christopher Kløv Andersen - Steffen Ekeberg Bråten - Steven Hoang Giang Nguyen - ThuThuan Thi Vo - Trần Văn Ngọc Tân
30.09.19 IN1050 Introduksjon til design, bruk og interaksjon Forelesning 6: Design, prototyping og konstruksjon 57 Reunited (IN1060 v18): - Hanna Dokken - Rhea Toling - Marlene Hasle - Jonas Blårud - Suresh Sapkota
30.09.19 IN1050 Introduksjon til design, bruk og interaksjon Forelesning 6: Design, prototyping og konstruksjon 58 Reunited (IN1060 v18): - Hanna Dokken - Rhea Toling - Marlene Hasle - Jonas Blårud - Suresh Sapkota
30.09.19 IN1050 Introduksjon til design, bruk og interaksjon Forelesning 6: Design, prototyping og konstruksjon 59 Protorama (IN1060 v18): - Eivind Freng - Torbjørn Vik Lunde - Tatiana Sogabe - Marianne Bones
30.09.19 IN1050 Introduksjon til design, bruk og interaksjon Forelesning 6: Design, prototyping og konstruksjon 60 Protorama (IN1060 v18): - Eivind Freng - Torbjørn Vik Lunde - Tatiana Sogabe - Marianne Bones
30.09.19 IN1050 Introduksjon til design, bruk og interaksjon Forelesning 6: Design, prototyping og konstruksjon 61 Protorama (IN1060 v18): - Eivind Freng - Torbjørn Vik Lunde - Tatiana Sogabe - Marianne Bones
Designeksempel: Lading av nettbrett (7) 30.09.19 IN1050 Introduksjon til design, bruk og interaksjon Forelesning 6: Design, prototyping og konstruksjon 62
Designeksempel: Lading av nettbrett (8) 30.09.19 IN1050 Introduksjon til design, bruk og interaksjon Forelesning 6: Design, prototyping og konstruksjon 63
30.09.19 IN1050 Introduksjon til design, bruk og interaksjon Forelesning 6: Design, prototyping og konstruksjon 64
30.09.19 IN1050 Introduksjon til design, bruk og interaksjon Forelesning 6: Design, prototyping og konstruksjon 65
30.09.19 IN1050 Introduksjon til design, bruk og interaksjon Forelesning 6: Design, prototyping og konstruksjon 66
30.09.19 IN1050 Introduksjon til design, bruk og interaksjon Forelesning 6: Design, prototyping og konstruksjon 67
30.09.19 IN1050 Introduksjon til design, bruk og interaksjon Forelesning 6: Design, prototyping og konstruksjon 68
30.09.19 IN1050 Introduksjon til design, bruk og interaksjon Forelesning 6: Design, prototyping og konstruksjon 69
30.09.19 IN1050 Introduksjon til design, bruk og interaksjon Forelesning 6: Design, prototyping og konstruksjon 70
30.09.19 IN1050 Introduksjon til design, bruk og interaksjon Forelesning 6: Design, prototyping og konstruksjon 71
30.09.19 IN1050 Introduksjon til design, bruk og interaksjon Forelesning 6: Design, prototyping og konstruksjon 72
30.09.19 IN1050 Introduksjon til design, bruk og interaksjon Forelesning 6: Design, prototyping og konstruksjon 73
30.09.19 IN1050 Introduksjon til design, bruk og interaksjon Forelesning 6: Design, prototyping og konstruksjon 74
30.09.19 IN1050 Introduksjon til design, bruk og interaksjon Forelesning 6: Design, prototyping og konstruksjon 75
30.09.19 IN1050 Introduksjon til design, bruk og interaksjon Forelesning 6: Design, prototyping og konstruksjon 76
30.09.19 IN1050 Introduksjon til design, bruk og interaksjon Forelesning 6: Design, prototyping og konstruksjon 77
30.09.19 IN1050 Introduksjon til design, bruk og interaksjon Forelesning 6: Design, prototyping og konstruksjon 78
30.09.19 IN1050 Introduksjon til design, bruk og interaksjon Forelesning 6: Design, prototyping og konstruksjon 79
30.09.19 IN1050 Introduksjon til design, bruk og interaksjon Forelesning 6: Design, prototyping og konstruksjon 80
30.09.19 IN1050 Introduksjon til design, bruk og interaksjon Forelesning 6: Design, prototyping og konstruksjon 81
30.09.19 IN1050 Introduksjon til design, bruk og interaksjon Forelesning 6: Design, prototyping og konstruksjon 82
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 30.09.19 IN1050 Introduksjon til design, bruk og interaksjon Forelesning 6: Design, prototyping og konstruksjon 83
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) 30.09.19 IN1050 Introduksjon til design, bruk og interaksjon Forelesning 6: Design, prototyping og konstruksjon 84
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. 431 (5. utgave) / s. 395 (4. utgave) 30.09.19 IN1050 Introduksjon til design, bruk og interaksjon Forelesning 6: Design, prototyping og konstruksjon 85
Ulike faser i utviklingen Eksplorativ utvikling Formativ utvikling Idé Skisse Konsept Low-fi Hi-fi Lansering Radikale forandringer Inkrementelle forandringer (S. Wendlandt, 2011) 30.09.19 IN1050 Introduksjon til design, bruk og interaksjon Forelesning 6: Design, prototyping og konstruksjon 86
30.09.19 IN1050 Introduksjon til design, bruk og interaksjon Forelesning 6: Design, prototyping og konstruksjon 87 Reunited (IN1060 v18): - Hanna Dokken - Rhea Toling - Marlene Hasle - Jonas Blårud - Suresh Sapkota
30.09.19 IN1050 Introduksjon til design, bruk og interaksjon Forelesning 6: Design, prototyping og konstruksjon 88 Reunited (IN1060 v18): - Hanna Dokken - Rhea Toling - Marlene Hasle - Jonas Blårud - Suresh Sapkota
Kompromisser Definisjoner: - Horisontal prototype - Vertikal prototype Vi kan som nevnt ikke prototype «alt», så vi må ha en strategi for hva vi vektlegger med vår prototype Sånn sett så sier vi gjerne at alle prototyper involverer kompromisser Eksempler på kompromisser vi må tåle: langsom respons, begrenset funksjonalitet, ikke selvstendig i kontekst etc. Vi har to konkrete 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 30.09.19 IN1050 Introduksjon til design, bruk og interaksjon Forelesning 6: Design, prototyping og konstruksjon 89
Eksempel fra studentarbeid Bakgrunn: Hovedstaden har et bredt tilbud av offentlige bibliotek og bibliotekstjenester. Bibliotekene tilbyr blant annet mulighet for å reservere bøker hjemmefra, som brukerne kan hente i egne hentehyller når de er klare. Mange brukere har dessverre problemer med å bruke denne tjenesten på en effektiv måte og finner systemet uoversiktlig og kaotisk. Vi i Spade forsøker å forenkle og forbedre bruken av hentehyllen. Målgruppe: Primærmålgruppe er nåværende og fremtidige brukere av bibliotekenes hentehyller. De ansatte ved folkebibliotekene er sekundærmålgruppe da løsningen vi søker å utvikle forhåpentligvis vil bidra til at de ansatte får frigjort tid de bruker på å veilede besøkende og heller kan fokusere på andre arbeidsoppgaver. Problemstilling: Hvordan kan vi forbedre hentehyllen slik at den støtter avhenting av bøker på en mer effektiv og presis måte? Spade (IN1060 v18): - Cecilie Seland Nilsen - Filip Larsen - Håkon Kavli - Mari Borgaard Waage - Niels Theissen https://www.uio.no/studier/emner/matnat/ifi/in1060/v18/prosjekter-2018/spade/index.html 30.09.19 IN1050 Introduksjon til design, bruk og interaksjon Forelesning 6: Design, prototyping og konstruksjon 90
30.09.19 IN1050 Introduksjon til design, bruk og interaksjon Forelesning 6: Design, prototyping og konstruksjon 91
30.09.19 IN1050 Introduksjon til design, bruk og interaksjon Forelesning 6: Design, prototyping og konstruksjon 92
30.09.19 IN1050 Introduksjon til design, bruk og interaksjon Forelesning 6: Design, prototyping og konstruksjon 93
30.09.19 IN1050 Introduksjon til design, bruk og interaksjon Forelesning 6: Design, prototyping og konstruksjon 94
30.09.19 IN1050 Introduksjon til design, bruk og interaksjon Forelesning 6: Design, prototyping og konstruksjon 95
30.09.19 IN1050 Introduksjon til design, bruk og interaksjon Forelesning 6: Design, prototyping og konstruksjon 96
30.09.19 IN1050 Introduksjon til design, bruk og interaksjon Forelesning 6: Design, prototyping og konstruksjon 97
30.09.19 IN1050 Introduksjon til design, bruk og interaksjon Forelesning 6: Design, prototyping og konstruksjon 98
30.09.19 IN1050 Introduksjon til design, bruk og interaksjon Forelesning 6: Design, prototyping og konstruksjon 99
30.09.19 IN1050 Introduksjon til design, bruk og interaksjon Forelesning 6: Design, prototyping og konstruksjon 100
30.09.19 IN1050 Introduksjon til design, bruk og interaksjon Forelesning 6: Design, prototyping og konstruksjon 101
30.09.19 IN1050 Introduksjon til design, bruk og interaksjon Forelesning 6: Design, prototyping og konstruksjon 102
30.09.19 IN1050 Introduksjon til design, bruk og interaksjon Forelesning 6: Design, prototyping og konstruksjon 103
30.09.19 IN1050 Introduksjon til design, bruk og interaksjon Forelesning 6: Design, prototyping og konstruksjon 104
30.09.19 IN1050 Introduksjon til design, bruk og interaksjon Forelesning 6: Design, prototyping og konstruksjon 105
30.09.19 IN1050 Introduksjon til design, bruk og interaksjon Forelesning 6: Design, prototyping og konstruksjon 106
30.09.19 IN1050 Introduksjon til design, bruk og interaksjon Forelesning 6: Design, prototyping og konstruksjon 107
Obligatorisk oppgave 3 Formålet med obligen er å designe to prototyper tilpasset brukeren du intervjuet i oblig 2 For hver av prototypene skal du lage følgende: Et scenario som beskriver brukssituasjonen, samt brukeren og deres behov (her skal ikke løsningen du foreslår inngå) 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." 30.09.19 IN1050 Introduksjon til design, bruk og interaksjon Forelesning 6: Design, prototyping og konstruksjon 108
Tips til obligatorisk oppgave 3 Utforsk Vær kreativ og bruk kunnskap du har fra før Bruk teori og begreper 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? 30.09.19 IN1050 Introduksjon til design, bruk og interaksjon Forelesning 6: Design, prototyping og konstruksjon 109
Oppsummering Prototyper brukes til ulike formål i ulike deler av utviklingen Prototyper lar oss utforske og kan senere brukes til å få svar på konkrete spørsmål og antagelser Det finnes mange måter å prototype på, men som regel må vi konsentrere oss om færre detaljer Vi må vurdere passende interaksjonstyper og grensesnitt Vi kan prototype i tidlige og sene faser vi snakker gjerne om low- vs. high-fidelity prototyper All prototyping involverer kompromisser og vi velger gjerne mellom vertikal og horistonal prototyping 30.09.19 IN1050 Introduksjon til design, bruk og interaksjon Forelesning 6: Design, prototyping og konstruksjon 110