IN Introduksjon til design, bruk, interaksjon Designprinsipper

IN1050 - Introduksjon til design, bruk, interaksjon Designprinsipper 1. oktober 2019 Institutt for Informatikk, Universitetet i Oslo joshi@ifi.uio.no 01.10.19 IN1050 Introduksjon til design, bruk og interaksjon Forelesning 7: Designprinsipper 1

Dagens forelesning Designprinsipper Seks prinsipper i fokus: Visibility Feedback Constraints Consistency Affordance Mapping To konkrete eksempler: Fire strategier for enkelhet Fem strukturelle prinsipper for visuell persepsjon Obligatorisk oppgave 3 Før prototypen Om prototypen Tips og huskeliste 01.10.19 IN1050 Introduksjon til design, bruk og interaksjon Forelesning 7: Designprinsipper 2

Nøkkelbegreper fra dagens forelesning Designprinsipper s. 21 Visibility s. 25 Feedback s. 28 Constraints s. 33 Consistency s. 36 Affordance s. 39 Mapping s. 42 OBS! OBS! Ikke alle designprinsippene er med i 5. utgaven ta derfor utgangspunkt i lysarkene når dere leser til oblig/eksamen 01.10.19 IN1050 Introduksjon til design, bruk og interaksjon Forelesning 7: Designprinsipper 3

Dagens tema: designprinsipper It is easy to make things hard. It is hard to make things easy. Åpenbart Klikk! Klikk! Klikk! Krever tenking Er det en knapp? Er det dette jeg vil ha? Eller skal jeg lete videre? Men før vi kan snakke om designprinsipper må vi snakke om hvor i designprosessen de kommer inn og da må vi først forstå hvorfor vi trenger designprinsipper i det hele tatt 01.10.19 IN1050 Introduksjon til design, bruk og interaksjon Forelesning 7: Designprinsipper 4

Å lære av det vi gjør strukturering av kunnskap Forskning handler om å strukturere og øke kunnskap og da må vi ha en idé om hvordan vi kan strukturere kunnskap innenfor vårt fagfelt I dette kurset har vi en prosess hvor dere lærer av og om brukere gjennom datainnsamling i oblig 2 og skal designe noe passende for dem i oblig 3 Når vi i oblig 4 skal evaluere om disse foreslåtte løsningene fungerer kan vi se tilbake på hva vi trodde var viktig og validere om det faktisk stemte og basert på hva vi lærer gjennom dette studiet kan vi kanskje ta med oss noe kunnskap til senere studier hvor vi gjentar noe liknende Dette er én måte å lære noe om hva vi bør være opptatt av når vi skal foreslår nye eller alternative løsninger for noen (alt fra én person til alle) Når vi har gjort store og mange studier kan vi analysere etter mønstre, gjennomgående temaer etc. som vi ser gjelder på tvers av tilfeller og dersom vi strukturerer denne kunnskapen på en måte andre kan ha nytte av gjør vi det gjerne som prinsipper, retningslinjer eller standarder 01.10.19 IN1050 Introduksjon til design, bruk og interaksjon Forelesning 7: Designprinsipper 5

Hva kan vi lære av som input til ny/økt kunnskap? Eksempler på hva vi kan lære fra: Brukermedvirkende prosesser (f.eks. UCD) Arbeidet dere gjør i obligene deres Ditt neste studie (f.eks. i IN1060 til våren) Designprosesser uten brukere (f.eks. genius design) Samlet kunnskap i fagfeltet Designteori (f.eks. estetikk) Tidligere studier om mennesker (f.eks. innen psykologi) Lærdom om faktisk bruk og behov over tid (f.eks. statistikk) Men hvordan kan vi gjøre det lettere for designere å operasjonalisere kunnskap i senere prosjekter? prinsipper, retningslinjer eller standarder 01.10.19 IN1050 Introduksjon til design, bruk og interaksjon Forelesning 7: Designprinsipper 6

01.10.19 IN1050 Introduksjon til design, bruk og interaksjon Forelesning 7: Designprinsipper 7

(RT 20 tischsuper radio, 1961) (MPZ 21 multipress citrus juicer, 1972) (TP 1 radio/phono combination, 1959) (Cylindric T 2 lighter, 1968) (T 1000 world receiver, 1963) (L 450 flat loudspeaker, TG 60 reel-to-reel tape recorder and TS 45 control unit, 1962-64) 01.10.19 IN1050 Introduksjon til design, bruk og interaksjon Forelesning 7: Designprinsipper 19

Designprinsipper Definisjoner: - Designprinsipper Norsk-engelsk Beskrivelse av hva vi bør være opptatt av eller hvordan vi bør utforme et design Gir oss en idé om hva som bør og ikke bør gjøres Hjelper med å se løsningen fra ulike perspektiver Bidrar som oftest til å øke brukervennlighet Derivert fra en kombinasjon av teoretisk og praktisk kunnskap, erfaring og sunn fornuft Det er ikke alltid alle designprinsipper er like viktige, derfor er det viktig å ha en kritisk og reflektert bruk av disse Seks prinsipper står i fokus i dette kurset: Visibility Feedback Constraints Consistency Affordance Mapping (tatt ut av 5. utgaven) 01.10.19 IN1050 Introduksjon til design, bruk og interaksjon Forelesning 7: Designprinsipper 21

Økende allmenngyldighet Prinsipper, retningslinjer og standarder Prinsipper Abstrakte designregler Retningslinjer Råd om hvordan man kan oppnå prinsipper Standarder Konkrete regler (målbare) Retningslinjer (gjerne mer veiledende og generelle) Komplementerer modellering og evaluering Standarder (gjerne formalisert gjennom større organer) Sammenfatter forståelse og best praksis Hjelper med å maksimere brukbarhet Økende autoritet 01.10.19 IN1050 Introduksjon til design, bruk og interaksjon Forelesning 7: Designprinsipper 22

Trafikklys som eksempel Hvorfor har trafikklys en egen posisjon for hver farge? Hvorfor bruker trafikklys rødt for stopp og grønt for klart? Hvorfor er det bilde av en mann som går i den grønne lampen og en mann som står stille i den rød lampen? Hvorfor piper det når vi trykker på knappen? Hvorfor er trafikklys like uansett hvor i verden vi befinner oss? Hvorfor lyser det rødt og gult samtidig, men aldri grønt og gult? 01.10.19 IN1050 Introduksjon til design, bruk og interaksjon Forelesning 7: Designprinsipper 23

Visibility kan jeg se det? Definisjoner: - Visibility If the users can't find it, the function isn't there Bruker kan se status og alle mulige valg videre Bruker blir ikke overveldet eller distrahert av informasjon Bruker forstår bedre hvordan funksjoner fungerer desto mer synlige de er Bruker kan bli forvirret av usynlige og automatiserte funksjoner Eksempler: Lysbryter Knapper i heisen Sensorstyrt håndvask 01.10.19 IN1050 Introduksjon til design, bruk og interaksjon Forelesning 7: Designprinsipper 25

Feedback hva skjer akkurat nå? Definisjoner: - Feedback Bruker opplyses om hva som er blitt gjort og oppnådd hittil slik at han kan fortsette Bruker forstår at input hadde en effekt på systemet Bruker får umiddelbar og synkronisert tilbakemelding Bruker ser progresjon eller status hvis funksjoner er utilgjengelig eller begrenset Eksempler: Heisknapper piper (og lyser) Datamaskiner animerer timeglass mens den tenker Microsoft Word highlighter alle ord som er feilstavet Gjøres typisk med lyd, lys, animasjon, highlighting eller en kombinasjon av flere 01.10.19 IN1050 Introduksjon til design, bruk og interaksjon Forelesning 7: Designprinsipper 28

Constraints hva kan jeg ikke gjøre? Definisjoner: - Constraints Bruker får valgmulighetene sine avgrenset Bruker hindres i å gjøre feil Bruker kan konsentrere seg om det som er (mest) relevant Eksempler: Fysisk: Saks, puslespill, USB-kabel Logisk: høyreklikk-meny, knapper som blir grå/deaktivert Kulturelt: rød trekant for varsel, scrollefelt til høyre 01.10.19 IN1050 Introduksjon til design, bruk og interaksjon Forelesning 7: Designprinsipper 33

Consistency hvor har jeg sett det før? Definisjoner: - Consistency Bruker ser og anvender like operasjoner og elementer når like oppgaver skal løses Bruker forstår, anvender og lærer lettere dersom like konsepter representeres likt Bruker kan enkelt overføre gammel kunnskap til ny kontekst Eksempler: Estetisk: Biler Funksjonelt: Trafikklys Internt: Turskilt i Marka Eksternt: Menyknapper i Mac OS X 01.10.19 IN1050 Introduksjon til design, bruk og interaksjon Forelesning 7: Designprinsipper 36

Affordance hvordan bruker jeg det? Definisjoner: - Affordance Affordance beskriver hvordan et objekts attributter gir brukeren inntrykk av hvordan man kan interagere med det Bruker får indirekte hint om hvordan noe brukes og graden av forståelse åpner opp muligheter hva bruker kan gjøre Affordance defineres ikke bare hva noe signaliserer (signifiers), men også hvordan brukeren forstår det (perceived affordance) (les mer om signifiers og affordance av Norman, Gibson etc. i tilleggspensum ved interesse) Eksempler: Knapper kan trykkes og et volumhjul kan vris Ikoner kan klikkes Hull i en saks til fingre eller knagger for å henge opp noe 01.10.19 IN1050 Introduksjon til design, bruk og interaksjon Forelesning 7: Designprinsipper 39

Mapping hva skjer når jeg gjør noe? Definisjoner: - Mapping Bruker forstår sammenhengen mellom en funksjon og effekten den har på noe/verden Bruker slipper å memorere hvilken effekt en funksjon har fordi de skjønner det Bruker unngår unødvendig frustrasjon Eksempler: Komfyrens plassering av knapper og hjul Dokumentet scroller oppover når vi trykker på tastaturet 01.10.19 IN1050 Introduksjon til design, bruk og interaksjon Forelesning 7: Designprinsipper 42

Vi ønsker gjerne å kombinere flere prinsipper 01.10.19 IN1050 Introduksjon til design, bruk og interaksjon Forelesning 7: Designprinsipper 44

Eksempler på populære retningslinjer og prinsipper Donald Norman: 7 principles of design The Psychology Of Everyday Things Basic Books, 1998. ISBN 978-0465067091 Ben Shneiderman: 8 golen rules of usability design Designing the User Interface: Strategies for Effective Human-Computer Interaction, 5/E Addison-Wesley, 2009. ISBN 978-0321537355 Jakob Nielsen: 10 usability heuristics Ten Usability Heuristics useit.com, 2005. ISSN 1548-5552 01.10.19 IN1050 Introduksjon til design, bruk og interaksjon Forelesning 7: Designprinsipper 45

Donald Normans syv prinsipper: Seven principles for transforming difficult tasks into simple ones 1. Use both knowledge in the world and knowledge in the head 2. Simplify the structure of tasks 3. Make things visible 4. Get the mappings right 5. Exploit the power of constraints, both natural and artificial 6. Design for error 7. When all else fails, standardize 01.10.19 IN1050 Introduksjon til design, bruk og interaksjon Forelesning 7: Designprinsipper 46

Ben Shneidermans åtte gylne regler: 1. Strive for consistency 2. Enable frequent users to use shortcuts 3. Offer error prevention and simple error handling 4. Design dialogs to yield closure 5. Offer error prevention and simple error handling 6. Permit easy reversal of actions 7. Support internal locus of control 8. Reduce short-term memory load 01.10.19 IN1050 Introduksjon til design, bruk og interaksjon Forelesning 7: Designprinsipper 47

Jakob Nielsens ti heuristikker: 1. Visibility of system status 2. Match between system and the real world 3. User control and freedom 4. Consistency and standards 5. Error prevention 6. Recognition rather than recall 7. Flexibility and efficiency of use 8. Aesthetic and minimalist design 9. Help users recognize, diagnose, and recover from errors 10. Help and documentation 01.10.19 IN1050 Introduksjon til design, bruk og interaksjon Forelesning 7: Designprinsipper 48

To konkrete eksempler på designprinsipper: 1. Fire strategier for enkelthet Giles Colbornes 2. Fem strukturelle prinsipper for visiuell persepsjon Jeff Johnson Dette er ikke fasiter vær kritisk, husk at det er lov å være uenig, men vi må være i stand til å reflektere og argumentere 01.10.19 IN1050 Introduksjon til design, bruk og interaksjon Forelesning 7: Designprinsipper 49

Fire strategier for enkelthet Basert på fire strategier fra Giles Colbornes bok «Simple and Usable» Fokuserer på enkle og brukervennlige løsninger Bruker fjernkontrollen for en DVD-spiller som et konkret eksempel De fire prinsippene: Fjern Organiser Skjul Forflytt 01.10.19 IN1050 Introduksjon til design, bruk og interaksjon Forelesning 7: Designprinsipper 50

Vårt utgangspunkt On/Off Quick OSD (On-screen display menu) FL Select (Change the display on DVD player) Open/Close (Eject DVD) Advanced Disc Review (Review playlist) AV Enhancer (Adjust audio and video) Repeat (Repeat play) Multi Re-Master (Improve audio quality) Numeric Keypad Depth Enhancer (Reduce picture noise ) Manual Skip (Skip 30 seconds forward) Quick Replay (Skip back a few seconds) Cancel Skip Forward Skip Back Slow Forward Slow Back Stop Pause Play Direct Navigator/Top Menu (Main menu) Play List/Menu (Show a disk menu or play list) Functions (Change on-screen menu) Return (Return to previous menu) Up Arrow Down Arrow Left Arrow Right Arrow Enter Subtitle Audio (Change soundtracks) Angle/Page (Change angle/advance still pictures Setup (Quick setup menu) Play Mode (All/group/random play) Play Speed (Change play speed) Zoom Group (Selects groups of items to play) 01.10.19 IN1050 Introduksjon til design, bruk og interaksjon Forelesning 7: Designprinsipper 51

Fjern Denne strategien handler om å fjerne distraksjoner og fokusere på det essensielle Fokus på hva som er verdifullt for brukeren Konsentrere seg om det som er en brukers hovedopplevelse Levere løsninger som eliminerer frustrasjon og angst Disponere ressurser slik at løsningen leverer verdi fremfor kjedelige tjenester, irrelevant tekst og bestikkelser Bygge løsningen slik at den imøtekommer brukerens mål Fjerne elementer som distraherer og belaster brukeren: feilmeldinger, unødvendige valg, visuelt rot etc. Fjern alle unødvendige knapper slik at vi kun sitter igjen med det essensielle 01.10.19 IN1050 Introduksjon til design, bruk og interaksjon Forelesning 7: Designprinsipper 52

Organiser Denne strategien handler om å organisere frem et enklere grensesnitt Ta utgangspunkt i «chunking» Organiser elementer i håndterbare blokker I stedet for 50 menyvalg, bruk heller 5 menyer med 10 undervalg Husk Miller s law om at vi kun kan holde 7 ± 2 objekter i korttidshukommelsen Kartlegg brukers oppførsel og organiser med utgangspunkt i deres handlingsmønster Alfabetisk sortering er ikke nødvendigvis en god løsning Ta utgangspunkt i tid og sted - en tidslinje hjelper med å forstå bruk Gode kategorier har «harde kanter», dvs. ingen duplikater Bruk rutenett, størrelser, farger, plasseringer, fargekoder etc. til å underbygge organiseringen Organiser knappene i grupper som gir mer mening for brukeren. 01.10.19 IN1050 Introduksjon til design, bruk og interaksjon Forelesning 7: Designprinsipper 53

Skjul Denne strategien handler om å skjule elementer (midlertidig eller permanent) for brukeren Identifiser hvilke elementer som brukes ofte og mindre ofte, og bruk det som utgangspunkt Unngå tilpasningsvennlige systemer Et godt grensesnitt behøver ikke å tilpasses En løsning som tillater tilpasning antar at brukeren klarer å lage gode og effektive grensesnitt på egenhånd Gradvis avsløring lar brukeren fokusere på det essensielle og utvide om nødvendig Bruk ledetråder og hint (mouseover, alt-tekst, ikoner) til å antyde hva som er skjult Å skjule noe fungerer bare så lenge en bruker ikke behøver å lete etter det "If the user can't find it, it doesn't exist" Skjul de minst brukte knappene bak en luke så de ikke forstyrrer brukeren. 01.10.19 IN1050 Introduksjon til design, bruk og interaksjon Forelesning 7: Designprinsipper 54

Forflytt Denne strategien handler om å forflytte roller over på andre enheter Før vi flytter over noe av «ansvaret» på andre enheter må vi huske at enheten fortsatt må gjøre det den signaliserer at den skal gjøre Bruk den mest egnede enheten til å utføre en oppgave Forflytt det mest individuelle over til brukerens hode Identifiser hva brukere gjør bedre enn maskiner og vica-versa Forsterk en brukeropplevelse ved å la datamaskinen ta over det "frustrerende" La brukeren dirigere og la maskinen guide La bruker oppføre seg naturlig, men hjelp med å strukturere data Design løsninger for «åpne opplevelser» Lag en enkel fjernkontroll med få elementer og forflytt resten av styringen over til en on-screen meny på TVen. 01.10.19 IN1050 Introduksjon til design, bruk og interaksjon Forelesning 7: Designprinsipper 55

Fem strukturelle prinsipper Hentet fra Jeff Johnsons «Designing with the mind in mind» (kapittel 2) Følger den tyske tradisjonen på studier om menneskelig syn og holisme «Gestalt principles of visual perception» De fem prinsippene: Nærhet Likhet Kontinuitet Kompletthet Symmetri 01.10.19 IN1050 Introduksjon til design, bruk og interaksjon Forelesning 7: Designprinsipper 56

Nærhet (proximity) Den relative avstanden mellom objekter påvirker vår oppfatning av hvorvidt og hvordan objektene er organisert i undergrupper Objekter som er nære hverandre fremstår som gruppert Benyttes ofte for å vise kategorier, grupperinger, blokker uten å måtte bruke distinkte skilletegn 01.10.19 IN1050 Introduksjon til design, bruk og interaksjon Forelesning 7: Designprinsipper 57

Likhet (Similarity) Gjenstanders likhet kan benyttes for å gi oss en idé om at enkelte objekter er adskilt fra resten Objekter som ligner på hverandre kan f.eks. fremstå som gruppert mens alt annet oppfattes som likeverdig Vi kan bruke farger, størrelser, former etc. for å adskille objekter fra hverandre 01.10.19 IN1050 Introduksjon til design, bruk og interaksjon Forelesning 7: Designprinsipper 58

Kontinuitet (Continuity) Vårt visuelle system har en tendens til å rette opp i tvetydighet eller fylle inn manglende data Vår visuelle persepsjon forsøker å oppfatte kontinuerlige former fremfor oppdelte bruddstykker Kan ofte få oss til å se ting annerledes enn de egentlig er fordi hjernen kobler sammen løse stykker 01.10.19 IN1050 Introduksjon til design, bruk og interaksjon Forelesning 7: Designprinsipper 59

Kompletthet (Closure) (Tett knyttet opp mot prinsippet om kontinuitet) Vårt visuelle system forsøker å lukke åpne figurer slik at de kan oppfattes som hele objekter Muliggjøre bruken av "negative space", dvs. tolke blanke områder som objekter Kan ofte få oss til å se ting annerledes enn de egentlig er fordi hjernen vår fyller ut ufullstendige former 01.10.19 IN1050 Introduksjon til design, bruk og interaksjon Forelesning 7: Designprinsipper 60

Symmetri (Symmetry) Vi forsøker å tolke komplekse elementer på en måte som reduserer kompleksiteten Elementer som har rom for å tolkes på ulike måter blir organiseres og tolkes av synes vårt på den måten som gir enklest og mest symmetriske komponenter Muliggjør 3D-illusjoner i flate 2D-tegninger 01.10.19 IN1050 Introduksjon til design, bruk og interaksjon Forelesning 7: Designprinsipper 61

Oblig 3: Repetisjon av designprinsipper Designprinsipper beskriver hva vi bør være opptatt av eller hvordan vi bør utforme et design Gir oss en idé om hva som bør og ikke bør gjøres Hjelper med å se løsningen fra ulike perspektiver Hvilke muligheter har vi til å tilpasse designet til brukeren? Bidrar som oftest til å øke brukervennlighet På hvilken måte kan jeg skape en bedre mulighet for interaksjon for akkurat denne brukeren? Det er ikke alltid alle designprinsipper er like viktige, derfor er det viktig å ha en kritisk og reflektert bruk av disse i den obligatoriske oppgaven Dette er de seks designprinsippene du kan bringe med deg inn i oppgaven: Visibility Feedback Constraints Consistency Affordance Mapping Du trenger absolutt ikke bruke alle bruk heller tid på å reflektere over noen få som passer best til ditt case Om du føler det passer bedre kan du velge noe fra de to eksemplene (fire strategier for enkelhet eller fem strukturelle prinsipper for visuell persepsjon) 01.10.19 IN1050 Introduksjon til design, bruk og interaksjon Forelesning 7: Designprinsipper 62

Obligatorisk oppgave 3 Formålet er å gi studentene trening i prototyping Fristen er søndag 20. oktober innen kl. 23.59 Devilry åpnes for innlevering av oblig 3 ca. en ukes tid i forveien Hva skal gjøres? Hva skal leveres? Før prototypene Om prototypene Tips og huskeliste 01.10.19 IN1050 Introduksjon til design, bruk og interaksjon Forelesning 7: Designprinsipper 63

Før prototypene Formålet med prototypene hvilken problemstilling skal løses? med utgangspunkt i en målsetning bør prototypene adressere problemet og oppnå målsetningen Persona hvem er bruker (holdning, bakgrunn, bruksfrekvens, erfaring etc.)? med tanke på målsetning bør personen du designer for gjenspeile en påtenkt bruker Behov og krav hvilke behov hos brukeren stiller krav til systemet? (oblig 2) med tanke på målsetning bør kravene du stiller til prototypene du foreslår gjenspeile behovene Scenario i hvilken setting skjer problemet? med tanke på målsetningen bør scenarioet fortelle om problemet, ikke løsning 01.10.19 IN1050 Introduksjon til design, bruk og interaksjon Forelesning 7: Designprinsipper 64

Om prototypene Konseptuell modell overordnet beskrivelse av prototypene (se s. 18 i lysarkene fra forelesning 6) Funksjoner, funksjoners relasjon, presentasjon av informasjon Prototypene oppløsning og kompromisser Low eller high fidelity? Horisontale eller vertikale prototyper? Utforming beskrivelse av prototypenes interaksjon og grensesnitt Interaksjonstyper? Grensesnittyper? Grensesnittmetaforer? Designprinsipper beskrivelse av de viktigste prinsippene for dine prototyper Hvorfor var de valgte prinsippene viktig? Hvordan har de blitt brukt i utformingen av prototypen? Alle valg må begrunnes! 01.10.19 IN1050 Introduksjon til design, bruk og interaksjon Forelesning 7: Designprinsipper 65

Tips Dersom du føler utgangspunktet fra obligatorisk oppgave 2 er dårlig, bruk fantasien og forsøk å se etter muligheter mellom linjene på det som ble sagt (og snakk gjerne med gruppelærer om du føler du står helt fast) Sørg for at du har brukers behov i fokus hele veien Bruk relevante begreper og pensum til å begrunne og utforme designvalg hele veien Lag gjerne prototyper av andre ting enn papir (kan leveres som bilde, video etc.) Denne obligen er lur å diskutere flere ganger underveis med gruppelærer for input og forslag Trenger du veiledning i gruppe eller alene? Hør med din gruppelærer! 01.10.19 IN1050 Introduksjon til design, bruk og interaksjon Forelesning 7: Designprinsipper 66

Husk! Ikke skriv og forklar oppå selve prototypen deres, men heller før eller etter bruk så mange sider dere vil All tekst og bilder skal leveres som ett PDF-dokument (alt annet må omleveres og dere bruker da opp et forsøk) Evt. vedlegg/lenker/filmer kan legges ved i Devilry eller lenkes til i besvarelsen Inkluder navn og brukernavn i dokumentet og filnavnet Ha en god og ryddig struktur for lesbarhet få med sidetall, overskrifter, evt. referanser, innholdsfortegnelse 01.10.19 IN1050 Introduksjon til design, bruk og interaksjon Forelesning 7: Designprinsipper 67