IN Introduksjon til design, bruk, interaksjon Design, prototyping og konstruksjon

Like dokumenter
INF Introduksjon til design, bruk, interaksjon Design, prototyping og konstruksjon

INF Introduksjon til design, bruk, interaksjon Design, prototyping og konstruksjon

INF Introduksjon til design, bruk, interaksjon Design, prototyping og konstruksjon

INF Introduksjon til design, bruk, interaksjon Design, prototyping og konstruksjon

INF Introduksjon til design, bruk, interaksjon Design, prototyping og konstruksjon

Design, protoyping og konstruksjon. INF 1500; introduksjon 9l design, bruk og interaksjon 4 oktober 2010

Prototyping. Plenumstime Uke 6. Med Maria og Helle

UKE 7 Design og prototyping. Plenum IN1050 Julie og Maria

Notater: INF1510. Veronika Heimsbakk 20. mai 2015

INF1500 Høst 2015 Magnus Li Martine Rolid Leonardsen. Design og prototyping

Design, bruk, interaksjon

Sist oppdatert: 18.november Øvelsesoppgaver til INF1500

INF1500 Høst 2015 Magnus Li Martine Rolid Leonardsen. Evaluering

Repetisjon. Plenum IN1050 Uke 14 Maria og Helle

Prototyping og kommunikasjon med brukere

inf 1510: å lage skisser og prototyper

VELKOMMEN. UKE 1: Introduksjon Plenum IN1050. Julie og Maria

Prototyping. TDT4180, vår Yngve Dahl IDI, NTNU NTNU

VELKOMMEN. Til plenumstime i IN1050. Med Maria og Helle

UNIVERSITETET I OSLO

in1060: hva & hvorfor prototyping? Tone Bratteteig

Evaluering vol. 1. Plenum IN1050 Uke 11 Maria og Helle

UNIVERSITETET I OSLO

Reunited. Hanna Dokken, Rhea Toling, Marlene Hasle, Suresh Sapkota & Jonas Blårud. Teknisk rapport. IN Bruksorientert design.

UNIVERSITETET I OSLO

Introduksjon til kurset

INF Introduksjon til design, bruk, interaksjon Introduksjon

SKISSER OG PROTOTYPER

HCI, Interaksjon, grensesnitt og kontekst. Intervju, spørsmålstyper og observasjon

Inf1510: Oppsummering. Rune Rosseland

INF Introduksjon til design, bruk, interaksjon Evaluering, del 2

Prototyping. Håkon Tolsby Håkon Tolsby

Prototyping av brukergrensensitt

UNIVERSITETET I OSLO

Gjennomgang - prøveeksamen. Plenum IN1050 Maria og Helle

Kvalitetskrav til løsninger

Brukersentert design Kapittel 3 i Shneiderman

INF Introduksjon til design, bruk, interaksjon Evaluering del 2

Repetisjon 1 Overordnet oppsummering av prosess og metode til og med prototyping.

UKE 6 Utviklingsprosesser og tjenestedesign. Plenum IN1050 Julie og Maria

Obligatorisk oppgave 0

GRUPPE 5 UKE 2 IN1050

Introduksjon til kurset

INF1500 Høst 2016 Magnus Li Martine Rolid Leonardsen EVALUERING / DECIDE

GRUPPE 5, UKE 11 EVALUERING IN1050

Stikkordene her peker på at musikk kan skapes og deles på mange ulike måter, i mange ulike situasjoner, av mange ulike mennesker.

INF Introduksjon til design, bruk, interaksjon Evaluering, del 1

Hjernetrim. Hva er det?

Project AWESOM-O 2011

Forflytning. oblig 2 : INF h oktober 2012

UNIVERSITETET I OSLO

Notat om sekvens av handlinger mellom menneske og maskin

Informasjonsarkitektur og Prototyping

Temaer for obligatoriske oppgaver

in1060: bruksorientert design Helle Heiestad Marte Rimer Anna So:ie Schei

Notat om sekvens av handlinger mellom menneske og maskin

Inf 1510: Bruksorientert design

Sist oppdatert: 10.november Ukesoppgaver til INF1500 (Uke 1-13)

BRUKERSENTRERTE metoder i innovasjon av IT-systemer

INF1500 Høst 2015 Magnus Li Martine Rolid Leonardsen. Designprinsipper

INF Introduksjon til design, bruk, interaksjon Introduksjon

INF Introduksjon til design, bruk, interaksjon Kapittel 3 bruk og brukere

Forskningsmetoder i menneske-maskin interaksjon (MMI)

Diskusjonsoppgaver Hvilke fordeler oppnår man ved analytisk evaluering sammenliknet med andre tilnærminger?

Temaer for obligatoriske oppgaver

Design og dokumentasjon

GJENNOMGANG UKESOPPGAVER 9 TESTING

Velkommen! I dag. Viktige beskjeder. Studieadministrasjonen. IN Høst Siri Moe Jensen Geir Kjetil Sandve Henrik Hillestad

UKE 2 Forstå bruk/ datainnsamling. Plenum IN1050 Julie og Maria

Universitet i Oslo INF1510 Bruksorientert design Obligatorisk oppgave 2 Vår 2012 PROSJEKT GREENFORMATICS

INF1510: Obligatorisk oppgave 2: prosjektforslag

Teknisk rapport. IN Bruksorientert design. boks

Hvorfor bruker vi designprinsipper?

Children s search on web

Model Driven Architecture (MDA) Interpretasjon og kritikk

Fag: kunst & håndverk Årstrinn: 10. Skoleår: 2018/2019. Uke Emne Kompetansemål Grunnleggende ferdigheter Vurderingsform M S L R D

Smidig utvikling med Balsamiq

inf 1510: bruksorientert design

GRUPPE 5 UKE 3 BEHOV & KRAV IN1050

Sandefjordskolen ÅRSPLAN I KUNST OG HÅNDVERK 10. TRINN

Utviklingsprosesser. INF 1500; introduksjon 9l design, bruk og interaksjon 27 september 2010

GJENNOMGANG UKESOPPGAVER 2 PROSESSMODELLER OG SMIDIG PROGRAMVAREUTVIKLIG

in1060: Hva er en god rapport og video? Tone Bratteteig & Inger Helene Howells Engebretsen & Anna So6ie Schei

DRI 2001 Systemutviklingsarbeidet et overblikk Forelesning

Usability aspects. Interaksjonsdesign - Prosess

inf 1510: bruksorientert design intro våren 2012

IN Introduksjon til design, bruk, interaksjon Velkommen til IN1050

UKE 3 Krav og behov. Plenum IN1050 Julie og Maria

INF Introduksjon til design, bruk, interaksjon Evaluering del 2

Begrepslæring og underveisvurdering i utforskende aktiviteter. Berit Haug og Marianne Ødegaard Naturfagkonferansen, Oslo

INF1510 Obligatorisk oppgave 2 Prosjektforslag

Brukergrensesnittdesign

Hensikten med denne delen av kurset. Objektets egenskaper. Objektorientering hva er det? Best practises ved programvareutvikling. Kravspesifikasjonen

MMI-sammendrag fra eksamener

Kreativitet i brukerundersøkelser: Personas and beyond

ÅRSPLAN I KUNST OG HÅNDVERK TRINN BREIVIKBOTN SKOLE

inf 1510: å lage ideer og visjoner

ÅRSPLAN I KUNST OG HÅNDVERK TRINN BREIVIKBOTN SKOLE

DRI2001 Offentlige nettsteder. Litt om systemutvikling Torsdag 24 aug Arild Jansen, AFIN, UiO

Kravhåndtering. INF1050: Gjennomgang, uke 03

Transkript:

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