INF Introduksjon til design, bruk, interaksjon Brukeropplevelser og designprinsipper

Like dokumenter
INF Introduksjon til design, bruk, interaksjon Brukeropplevelser og designprinsipper

IN Introduksjon til design, bruk, interaksjon Designprinsipper

INF Introduksjon til design, bruk, interaksjon Brukeropplevelser og designprinsipper

INF Introduksjon til design, bruk, interaksjon Designprinsipper

INF Introduksjon til design, bruk, interaksjon Designprinsipper

Jacob Nielsens 10 heuristikker. Dansk Guru med 10 Tommelfingerregler en_(usability_consultant)

IN Introduksjon til design, bruk, interaksjon Designprinsipper

Ti egenskaper for å evaluere nettsteders brukskvalitet. Den opplevde kvaliteten til nettstedet

Beat the Competition. Forelesning 17. januar, Utvikling av interaktive nettsteder

INF Introduksjon til design, bruk, interaksjon Brukeropplevelser (UX)

Heuristisk evaluering Ekspertevaluering

INTERAKSJONSDESIGN. Hva er det? Designprinsipper og begreper Alma Culén

Brukskvalitet. Lett å bruke og samtidig nyttig

Enkel og effektiv brukertesting. Ida Aalen LOAD september 2017

Sist oppdatert: 18.november Øvelsesoppgaver til INF1500

Endelig ikke-røyker for Kvinner! (Norwegian Edition)

Repetisjon. Plenum IN1050 Uke 14 Maria og Helle

FIRST LEGO League. Härnösand 2012

Prototyping. Plenumstime Uke 6. Med Maria og Helle

PATIENCE TÅLMODIGHET. Is the ability to wait for something. Det trenger vi når vi må vente på noe

Human Factors relevant ved subsea operasjoner?

Hvor mye teoretisk kunnskap har du tilegnet deg på dette emnet? (1 = ingen, 5 = mye)

E-Learning Design. Speaker Duy Hai Nguyen, HUE Online Lecture

IN Introduksjon til design, bruk, interaksjon Brukeropplevelser (UX)

Den som gjør godt, er av Gud (Multilingual Edition)

Start Here USB *CC * *CC * USB USB

Hvor mye praktisk kunnskap har du tilegnet deg på dette emnet? (1 = ingen, 5 = mye)

Slope-Intercept Formula

Brukergrensesnittdesign

The regulation requires that everyone at NTNU shall have fire drills and fire prevention courses.

USABILITY AND HEURISTICS. Forelesning i Utvikling av interaktive nettsteder 11. Januar 2017

GRUPPE 5 UKE 3 BEHOV & KRAV IN1050

Hvorfor bruker vi designprinsipper?

Unit Relational Algebra 1 1. Relational Algebra 1. Unit 3.3

Design, bruk, interaksjon

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

Trigonometric Substitution

GYRO MED SYKKELHJUL. Forsøk å tippe og vri på hjulet. Hva kjenner du? Hvorfor oppfører hjulet seg slik, og hva er egentlig en gyro?

MMI D1. Kristoffer Dalby

Hvor mye teoretisk kunnskap har du tilegnet deg på dette emnet? (1 = ingen, 5 = mye)

Speed Racer Theme. Theme Music: Cartoon: Charles Schultz / Jef Mallett Peanuts / Frazz. September 9, 2011 Physics 131 Prof. E. F.

Trådløsnett med. Wireless network. MacOSX 10.5 Leopard. with MacOSX 10.5 Leopard

FASMED. Tirsdag 21.april 2015

Han Ola of Han Per: A Norwegian-American Comic Strip/En Norsk-amerikansk tegneserie (Skrifter. Serie B, LXIX)

Hvor mye teoretisk kunnskap har du tilegnet deg på dette emnet? (1 = ingen, 5 = mye)

Oppgave 1a Definer følgende begreper: Nøkkel, supernøkkel og funksjonell avhengighet.

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

SJEKKESKOLEN: EN STEG-FOR-STEG GUIDE TIL TILTREKNING AV FANTASTISKE JENTER (NORWEGIAN EDITION) BY ANDREAS GODE VIBBER

EN Skriving for kommunikasjon og tenkning

MANGFOLDSLEDELSE I BYGGENÆRINGEN UTVALGTE FUNN FRA FORSKNINGSRAPPORTEN «FLERKULTURELLE ARBEIDSPLASSER I BYGGENÆRINGEN»

Perpetuum (im)mobile

Bostøttesamling

Interaksjonsdesign Utvikling for og med brukere

Mathematics 114Q Integration Practice Problems SOLUTIONS. = 1 8 (x2 +5x) 8 + C. [u = x 2 +5x] = 1 11 (3 x)11 + C. [u =3 x] = 2 (7x + 9)3/2

Finishing up the report

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

UNIVERSITETET I OSLO

Interaksjonsestetikk og historier

UNIVERSITETET I OSLO ØKONOMISK INSTITUTT

BIBSYS Brukermøte 2011 Live Rasmussen og Andreas Christensen. Alt på et brett? -om pensum på ipad og lesebrett

Exercise 1: Phase Splitter DC Operation

Elektronisk termostat med spareprogram. Lysende LCD display øverst på ovnen for enkel betjening.

// Translation // KLART SVAR «Free-Range Employees»

Information search for the research protocol in IIC/IID

Gjennomgang - prøveeksamen. Plenum IN1050 Maria og Helle

KROPPEN LEDER STRØM. Sett en finger på hvert av kontaktpunktene på modellen. Da får du et lydsignal.

Dynamic Programming Longest Common Subsequence. Class 27

Hvor mye praktisk kunnskap har du tilegnet deg på dette emnet? (1 = ingen, 5 = mye)

M A M M estre A mbisiøs M atematikkundervisning. Novemberkonferansen 2015

Norsk (English below): Guide til anbefalt måte å printe gjennom plotter (Akropolis)

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

UKE 7 Design og prototyping. Plenum IN1050 Julie og Maria

En enkel modell. Hvorfor?

Den som gjør godt, er av Gud (Multilingual Edition)

UNIVERSITETET I OSLO ØKONOMISK INSTITUTT

Økologisk og kulturell dannelse i økonomiutdanningen

Bibliotekundervisningens fremtid nytt fokus på metodikk og digitalisering

case forts. Alternativ 1 Alternativer Sammensetning Objekt-interaktor med valg

Neural Network. Sensors Sorter

Dybdelæring i læreplanfornyelsen

Emnedesign for læring: Et systemperspektiv

INTERACTION WITH AI MODULE 2. Session 2 Asbjørn Følstad, SINTEF

GEO231 Teorier om migrasjon og utvikling

Emneevaluering GEOV272 V17

Bestille trykk av doktoravhandling Ordering printing of PhD Thesis

5 E Lesson: Solving Monohybrid Punnett Squares with Coding

Fagevalueringsrapport FYS Diffraksjonsmetoder og elektronmikroskopi

... Annita Fjuk DESIGN THINKING

Tema. Informasjonsarkitektur Brukervennlighet/Usability Kommunikasjon som treffer målrettet kommunikasjon

PSi Apollo. Technical Presentation

Brukbar branding Veslemøy Holt Tord F Paulsen

SAMPOL115 Emneevaluering høsten 2014

Brukskvalitet TDT4180, vår 2017

Livets slutt i sykehjem pasienters og pårørendes forventninger og erfaringer En syntese av kvalitative studier

TUSEN TAKK! BUTIKKEN MIN! ...alt jeg ber om er.. Maren Finn dette og mer i. ... finn meg på nett! Grafiske lisenser.

TUSEN TAKK! BUTIKKEN MIN! ...alt jeg ber om er.. Maren Finn dette og mer i. ... finn meg på nett! Grafiske lisenser.

UKE 6 Utviklingsprosesser og tjenestedesign. Plenum IN1050 Julie og Maria

Dagens tema: Eksempel Klisjéer (mønstre) Tommelfingerregler

Compello Fakturagodkjenning Versjon 10 Software as a service. Tilgang til ny modulen Regnskapsføring

Transkript:

INF1500 - Introduksjon til design, bruk, interaksjon Brukeropplevelser og designprinsipper 7. oktober 2013 Institutt for Informatikk, Universitetet i Oslo joshi@ifi.uio.no INF1500 Introduksjon til design, bruk, interaksjon Brukeropplevelser og designprinsipper 1 07.10.13

Konkurranse geirmuns 31,5 chrisye 28 kajakst 26 mettesu 25 aasms 24 andkrist 23 stiako 21 henrihan 21 Sist oppdatert på fredag Gjennomsnittet på quizene har økt til 6,4 av 15 poeng To poeng for å delta på midtveisevaluering i dag «Konkurranse i konkurransen» nærmer seg PS. Hvor nøye har du lest konkurransearket? Prøv igjen stiasorh 20 eriklar 18 nielsl 18 sirids 17 huybn 17 INF1500 Introduksjon til design, bruk, interaksjon Brukeropplevelser og designprinsipper 2 07.10.13

Dagens tema 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? (J. Putorti, 2012) INF1500 Introduksjon til design, bruk, interaksjon Brukeropplevelser og designprinsipper 3 07.10.13

Oversikt over dagens forelesning Brukeropplevelser Hva er brukeropplevelser? Hva påvirker brukeropplevelser? Hvilke mål har vi på brukeropplevelser? Midtveisevaluering Designprinsipper og strategier Seks prinsipper i fokus Andre prinsipper Fire strategier Obligatorisk oppgave 2 Formål Hva skal gjøres? Hva skal leveres? Før prototypen Om prototypen Tips og huskeliste INF1500 Introduksjon til design, bruk, interaksjon Brukeropplevelser og designprinsipper 4 07.10.13

Brukeropplevelser User experience (UX) En brukers helhetsopplevelse ved bruken av et system eller et produkt Man kan ikke designe en brukeropplevelse, man kan kun designe for brukeropplevelser Ulike brukere med ulike preferanser, mål og forventninger Ulike brukskontekster og brukssituasjoner Ulike nivåer av kompetanse og ferdighet hos brukere Vi kan bare designe for brukeropplevelser INF1500 Introduksjon til design, bruk, interaksjon Brukeropplevelser og designprinsipper 5 07.10.13

Brukeropplevelser Vi kan ikke bruke tradisjonelle måleenheter eller skalaer Brukervennlighet handler om grensesnittets brukervennlighet og hvor raskt eller bra man kan løse oppgaver (effectiveness & efficiency) Vi må ta innover oss alle faktorer som påvirker brukeropplevelsen når vi designer Hva mer enn brukervennlighet påvirker brukeropplevelser? INF1500 Introduksjon til design, bruk, interaksjon Brukeropplevelser og designprinsipper 6 07.10.13

Hva påvirker brukeropplevelser? Brukbarhet Menneskelige faktorer Design Utstyr HCI Brukeropplevelse (UX) Tilgjengelighet Markedsføring Ergonomi Systemets ytelse INF1500 Introduksjon til design, bruk, interaksjon Brukeropplevelser og designprinsipper 7 07.10.13

Brukerens ferdighetsnivå Hvordan påvirker en brukers ferdighetsnivå brukeropplevelsen av systemet? Vanskelig å design for flere ferdighetsnivåer samtidig Eksperter krever rask kontroll og feedback Systemet avbrytes oftere av eksperter Nybegynnere krever stødig og begripelig kontroll og feedback Nybegynnere avbrytes oftere av systemet Novice Intermediate Expert Ferdighetsnivå Ferdighetsnivå Ferdighetsnivå Tid Tid Tid INF1500 Introduksjon til design, bruk, interaksjon Brukeropplevelser og designprinsipper 8 07.10.13

Representasjon Vi må huske på forskjellen mellom en mental modell og en implementert modell Måten en løsning faktisk fungerer på er den implementerte modellen Brukeren tar i bruk systemet med utgangspunkt i sin mentale modell Måten vi presenterer en løsning på ovenfor en bruker er den representerte modellen Vi bør alltid velge en representasjon som ligger tett på brukeren sin mentale modell (A. Cooper et. al, 2007) INF1500 Introduksjon til design, bruk, interaksjon Brukeropplevelser og designprinsipper 9 07.10.13

Det gjelder å forstå brukeren Vi må skille mellom oppgaven som skal løses og brukeren som løser oppgaven. Husk igjen at målsetninger oftest er personlige Forstår vi egentlig hva brukeren vil ha? Eksempel med banksansatt og toget Vi må ikke glemme de som faktisk ønsker den «gode, gamle telefonen» Stor, robust, tydelig fyiske knapper, strippet for unødvendige funksjoner, få interaksjoner Hvorfor fokuserer vi kun på det folk ikke får til? Vi forsøker å dekke for mangler. Men hvorfor ikke fokusere på det de faktisk kan? INF1500 Introduksjon til design, bruk, interaksjon Brukeropplevelser og designprinsipper 10 07.10.13

Flow En tilstand hvor en bruker er så engasjert og involvert i en aktivitet at tiden forsvinner Flow Typisk sett i spillbransjen: vanskeligere nivåer/brett og utvikling av utfordringer Etterstrebes av designere http://www.boxesandarrows.com/view/flow-mastery-and INF1500 Introduksjon til design, bruk, interaksjon Brukeropplevelser og designprinsipper 11 07.10.13

Gamification «the use of game design elements in non-game contexts» (Deterding et al, 2011) Gamification er en teknikk som utnytter mennesker naturlige konkurranseinstinkt Vi ønsker å basere oss på konkurranseelementer oppnåelse, status, ledere, medaljer, poeng, nivåer etc. Brukes også svært mye i reklame og annonser for å drive markedsføring skattejakter, finn-og-vinn, besøk alle våre butikker for rabatter etc. (Victor Manrique - www.epicwinblog.net, 2013) INF1500 Introduksjon til design, bruk, interaksjon Brukeropplevelser og designprinsipper 12 07.10.13

Mål på brukeropplevelser Brukeropplevelsesmål omhandler hvordan en bruker opplever bruken av et system fra deres perspektiv, mens brukerbarhetsmål angir hvor produktivt et system er i et eget perspektiv Er det en konflikt mellom disse to settene med mål? Brukbarhetsmål Effektivitet (effectiveness) Flittighet (efficiency) Trygghet Nyttighet Lærbarhet Memorerbarhet Se resten av tabellen på s. 23 i boka (3. utgave) Brukeropplevelsesmål Ønskelige aspekter: + Tilfredshet + Underholdende + Engasjement + Behaglighet + Fornøyelighet + Spennende + Utfordrende + Hjelpsomhet + Motiverende Uønskelige aspekter: - Kjedsomhet - Barnslighet - Forvirrende - Irriterende - Frustrerende - Fornærmende - Nedlatende INF1500 Introduksjon til design, bruk, interaksjon Brukeropplevelser og designprinsipper 13 07.10.13

Hva vil vi unngå? Eksempler på typiske brukeropplevelser vi ofte hører om som vi vil unngå: «Programmet får meg til å føle meg dum» «Det er systemet sin skyld at jeg gjorde så store feil» «Jeg synes det krever alt for mye innsats for å operere det effektivt» «Det gir meg ingen engasjerende og underholdende erfaring» INF1500 Introduksjon til design, bruk, interaksjon Brukeropplevelser og designprinsipper 14 07.10.13

Elementer av brukeropplevelser Konkret Fullførelse (J. J. Garrett, 2000) Visuell design: Grafisk utforming av av elementer i grensesnittet. The look in look-and-feel. Visuell design Grensesnittdesign: Som i tradisjonell HCI: design av grensesnitt for å tilrettelegge for brukerinteraksjon med systemets funksjonalitet. Informasjonsdesign: Design og utforming av presentasjonen av informasjon for å tilrettelegge for forståelse. Grensesnittdesign Informasjonsdesign Navigasjonsdesign Navigasjonsdesign: Design av elementer i grensesnittet for å tilrettelegge for enkel bevegelse gjennom informasjonsarkitekturen. Interaksjonsdesign: Utvikling av applikasjonsflyt for å tilrettelegge brukeroppgaver. Definisjon av hvordan bruker interagerer med systemets funksjonalitet. Interaksjonsdesign Informasjonsarkitektur tid Informasjonsarkitektur: Strukturelt design av informasjon for å tilrettelegge for intuitiv tilgang til innhold. Funksjonelle spesifikasjoner: Detaljerte beskrivelser av funksjonalitet systemet må ha for å imøtekomme brukerens behov. Funksjonelle spesifikasjoner Innholdskrav Innholdskrav: Definisjon av innhold som er nødvendig for å imøtekomme brukerens behov. Brukers behov: Eksternt deriverte mål for systemet: identifisert gjennom brukerundersøkelser, etnografi etc. Brukers behov Systemets formål Systemets formål: Business, kreativitet or andre internt deriverte mål for systemet. Oppgaveorientert Abstrakt Oppfattelse Informasjonsorientert INF1500 Introduksjon til design, bruk, interaksjon Brukeropplevelser og designprinsipper 15 07.10.13

Hvorfor ser trafikklys ut som de gjør? 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? INF1500 Introduksjon til design, bruk, interaksjon Brukeropplevelser og designprinsipper 16 07.10.13

Prinsipper, retningslinjer og standarder Prinsipper Abstrakte designregler Retningslinjer Råd om hvordan man kan oppnå prinsipper Standarder Konkrete regler (målbare) Komplementerer modellering og evaluering Sammenfatter forståelse og best praksis Hjelper med å maksimere brukbarhet Økende allmenngyldighet Retningslinjer Økende autoritet Standarder INF1500 Introduksjon til design, bruk, interaksjon Brukeropplevelser og designprinsipper 17 07.10.13

Designprinsipper Norsk-engelsk Gir oss en idé om hva som bør og ikke bør gjøres Hjelper med å se løsningen fra ulike perspektiver Bidrar til å øke brukervennlighet Derivert fra en kombinasjon av teori kunnskap, erfaring og sunn fornuft Seks prinsipper står i fokus i dette kurset: Visibility Feedback Constraints Consistency Affordance Mapping INF1500 Introduksjon til design, bruk, interaksjon Brukeropplevelser og designprinsipper 18 07.10.13

Visibility kan jeg se det? 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 INF1500 Introduksjon til design, bruk, interaksjon Brukeropplevelser og designprinsipper 19 07.10.13

Visibility kan jeg se det? http://img.diytrade.com/cdimg/573160/3915473/0/1183625152/automatic_faucet.jpg INF1500 Introduksjon til design, bruk, interaksjon Brukeropplevelser og designprinsipper 20 07.10.13

Feedback hva gjør det nå? 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 INF1500 Introduksjon til design, bruk, interaksjon Brukeropplevelser og designprinsipper 21 07.10.13

Feedback hva gjør det nå? https://9f5168dd-a-62cb3a1a-s-sites.googlegroups.com/site/designstudies2011/design-principles-examples/visibility/picture%20011.jpg INF1500 Introduksjon til design, bruk, interaksjon Brukeropplevelser og designprinsipper 22 07.10.13

Constraints hva kan jeg ikke gjøre? 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 INF1500 Introduksjon til design, bruk, interaksjon Brukeropplevelser og designprinsipper 23 07.10.13

Constraints hva kan jeg ikke gjøre? http://2.bp.blogspot.com/_wk6yfu36juo/s9a_knr_tzi/aaaaaaaabsu/wmys8h6ybig/s1600/img_6586-742371.jpg INF1500 Introduksjon til design, bruk, interaksjon Brukeropplevelser og designprinsipper 24 07.10.13

Consistency hvor har jeg sett det før? 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 (Mercedes Benz) Funksjonelt: Trafikklys Internt: Turskilt i Marka Eksternt: Menyknapper i Mac OS X INF1500 Introduksjon til design, bruk, interaksjon Brukeropplevelser og designprinsipper 25 07.10.13

Consistency hvor har jeg sett det før? http://www.zeigen.com/shortcuts/content/save.gif INF1500 Introduksjon til design, bruk, interaksjon Brukeropplevelser og designprinsipper 26 07.10.13

Affordance hvordan bruker jeg det? Bruker forstår hvordan noe fungerer ved hjelp av objektets attributter Bruker får indirekte hint om hvordan noe brukes Eksempler: Knapper kan trykkes og et volumhjul kan vris Ikoner kan klikkes Hull i en saks til fingre eller knagger for å henge opp noe INF1500 Introduksjon til design, bruk, interaksjon Brukeropplevelser og designprinsipper 27 07.10.13

Affordance hvordan bruker jeg det? https://sites.google.com/site/designstudies2011/design-principles-examples INF1500 Introduksjon til design, bruk, interaksjon Brukeropplevelser og designprinsipper 28 07.10.13

Mapping hvor er jeg og hvor kan jeg gå? Bruker forstår sammenhengen mellom en funksjon og effekten den har på noe/verden Bruker slipper å memorere hvilken effekt en funksjon har Bruker unngår unødvendig frustrasjon Eksempler: Komfyrens plassering av knapper og hjul Dokumentet scroller oppover når vi trykker på tastaturet INF1500 Introduksjon til design, bruk, interaksjon Brukeropplevelser og designprinsipper 29 07.10.13

Mapping hvor er jeg og hvor kan jeg gå? http://www.usabilitypost.com/2010/11/17/the-design-of-everyday-things/ INF1500 Introduksjon til design, bruk, interaksjon Brukeropplevelser og designprinsipper 30 07.10.13

Godt design kombinerer flere prinsipper https://sites.google.com/site/designstudies2011/design-principles-examples?offset=10 INF1500 Introduksjon til design, bruk, interaksjon Brukeropplevelser og designprinsipper 31 07.10.13

Retningslinjer 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 INF1500 Introduksjon til design, bruk, interaksjon Brukeropplevelser og designprinsipper 32 07.10.13

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 INF1500 Introduksjon til design, bruk, interaksjon Brukeropplevelser og designprinsipper 33 07.10.13

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 INF1500 Introduksjon til design, bruk, interaksjon Brukeropplevelser og designprinsipper 34 07.10.13

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 INF1500 Introduksjon til design, bruk, interaksjon Brukeropplevelser og designprinsipper 35 07.10.13

70 ting å tenke på: (B. A. Myers, 1999) 1) Things that look different should act different. 2) If it is not needed, it's not needed. 3) The information for the decision needs to be there when the decision is needed. 4) The user should control the system. The system shouldn't control the user. The user is the boss, and the system should show it. 5) The idea is to empower the user, not speed up the system. 6) Don't overload the user's buffers. 7) Keep it simple. 8) Things that look the same should act the same. 9) The user should be able to do what the user wants to do. 10) Every action should have a reaction. 11) Everything in its place, and a place for everything. 12) Let people shape the system to themselves, and paint it with their own personality. 13) Error messages should actually mean something to the user, and tell the user how to fix the problem. 14) The best journey is the one with the fewest steps. Shorten the distance between the user and their goal. 15) Everyone makes mistakes, so every mistake should be fixable. 16) The more you do something, the easier it should be to do. 17) Cute is not a good adjective for systems. 18) Keep it neat. Keep it organized. 19) Consistency, consistency, consistency. 20) The user should always know what is happening. 21) Minimize the need for a mighty memory. 22) Know they user, and YOU are not thy user. 23) If I made an error, at least let me finish my thought before I have to fix it. 24) Design for regular people and the real world. 25) Eliminate unnecessary decisions, and illuminate the rest. 26) You should always know how to find out what to do next. 27) If I made an error, let me know about it before I get into REAL trouble. 28) Even experts are novices at some point. Provide help. 29) Provide a way to bail out and start over. 30) Don't let people accidentally shoot themselves. 31) Color is information. 32) The user should be in a good mood when done. 33) The fault is not in thyself, but in thy system. 34) To know the system is to love it. 35) Deliver a model and stick to it. INF1500 Introduksjon til design, bruk, interaksjon Brukeropplevelser og designprinsipper 36 07.10.13

70 ting å tenke på: (B. A. Myers, 1999) 36) Follow platform conventions. 37) Make it hard for people to make errors. 38) The system status (i.e., what's going on should always be visible. 39) Accommodate individual differences among users through automatic adaptation or user tailoring of the interface. 40) Make it easy for a beginner to become an expert. 41) No you can't just explain it in the manual. 42) Provide user documentation that is easy to search, focused on the user's task, lists concrete steps to be carried out, and is not too large. 43) The system should speak the users' language, following real-world conventions. 44) Instructions for use of a system should be visible or easily retrievable. 45) What does marketing think it wants? Ok, now how do we show them they're wrong? 46) What does management think it wants? Ok, now how do we show them they're wrong? 47) Allow users to tailor frequent actions. 48) Users don't know what they want, and users can't always say what they know. 49) Roll the videotape. 50) Common sense is an uncommon commodity. 51) Make objects, actions, and options visible. 52) Data drives good design. 53) Help users develop a conceptual representation of the structure of the system. 54) Minimize the amount of information a user must maintain in short-term memory. 55) It's a jungle. Be careful out there. 56) People should not have to remember information across a dialogue. 57) Make it impossible to make errors that will get the user into REAL trouble. 58) Dialogues should not contain information that is irrelevant or rarely needed. 59) Testing, testing, testing. 60) Keep the user mental workload within acceptable limits. 61) Minimize the amount of information recoding that is necessary. 62) Minimize the difference in dialogue both within and across interfaces. 63) An ounce of good design is worth a pound of technical support. 64) Provide the user with feedback and error-correction capabilities. 65) So how is this better than what the competition is doing? 66) Provide good error messages that are expressed in plain language, precisely indicate the probem, and constructively suggest a solution. 67) Whadya mean, they're not all computer scientists? 68) Support undo and redo. 69) Different words, situations, or actions should result in different things happening. 70) The best user interface is one the user doesn't notice. INF1500 Introduksjon til design, bruk, interaksjon Brukeropplevelser og designprinsipper 37 07.10.13

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 INF1500 Introduksjon til design, bruk, interaksjon Brukeropplevelser og designprinsipper 38 07.10.13

Dette er utgangspunktet 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) INF1500 Introduksjon til design, bruk, interaksjon Brukeropplevelser og designprinsipper 39 07.10.13

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. INF1500 Introduksjon til design, bruk, interaksjon Brukeropplevelser og designprinsipper 40 07.10.13

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 Organiser knappene i grupper som gir mer mening for brukeren. 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 INF1500 Introduksjon til design, bruk, interaksjon Brukeropplevelser og designprinsipper 41 07.10.13

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 Skjul de minst brukte knappene bak en luke så de ikke forstyrrer brukeren. "If the user can't find it, it doesn't exist". INF1500 Introduksjon til design, bruk, interaksjon Brukeropplevelser og designprinsipper 42 07.10.13

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 Eksempel med løpeprogrammer Se igjen eksempel med begrensninger med mobile enheter (lysark XX) 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" Lag en enkel fjernkontroll med få elementer og forflytt resten av styringen over til en on-screen meny på TVen. La brukeren dirigere og la maskinen guide La bruker oppføre seg naturlig, men hjelp med å strukturere data Design løsninger for «åpne opplevelser» - eksempel med kniv og piano INF1500 Introduksjon til design, bruk, interaksjon Brukeropplevelser og designprinsipper 43 07.10.13

Oppsummering: En brukers helhetsopplevelse ved bruken av et system eller et produkt Vi kan bare designe for brukeropplevelser Mange faktorer påvirker brukeropplevelsen, deriblant ferdighetsnivå Vi har egne mål på brukeropplevelse som skiller seg fra mål på brukbarhet Designprinsipper hjelper oss med utformingen av et system Ulike designprinsipper og strategier tar for seg ulike aspekter ved brukeropplevelsen Det finnes populære retningslinjer som også kan brukes for veiledning INF1500 Introduksjon til design, bruk, interaksjon Brukeropplevelser og designprinsipper 44 07.10.13

Obligatorisk oppgave 2 Formålet er å gi studentene trening i prototyping Fristen er 18. oktober innen kl. 16.00 Innlevering i Devilry som med obligatoriske oppgave 1 Hva skal gjøres? Hva skal leveres? Før prototypen Om prototypen Tips og huskeliste INF1500 Introduksjon til design, bruk, interaksjon Brukeropplevelser og designprinsipper 45 07.10.13

Før prototypen Formålet med prototypen hvilken problemstilling skal løses? I forhold til målsetning bør denne problemstillingen løse målsetningen din Persona hvem er bruker (holdning, bakgrunn, bruksfrekvens, erfaring etc.)? I forhold til målsetningen bør personen reflektere en påtenkt bruker Behov og krav hvilke behov hos brukeren stiller krav til systemet? (oblig 1) I forhold til målsetningen bør kravene gjenspeile behovene Scenario hvilken oppgave skal utføres og i hvilken setting? I forhold til målsetningen bør scenarioet fortelle om en mulig løsning (Oppgaveanalyse) hvilke oppgaver fokuseres på? INF1500 Introduksjon til design, bruk, interaksjon Brukeropplevelser og designprinsipper 46 07.10.13

Om prototypen Konseptuell modell beskrivelse av det foreslåtte systemet Funksjoner, funksjoners relasjon, presentasjon av informasjon Metodikk valg av utviklingsmodell, oppløsning og kompromisser Low eller high fidelity? Horisontal eller vertikal prototype? Utforming beskrivelse av prototypens interaksjon og grensesnitt Interaksjonstype? Grensesnittype? Grensesnittmetaforer? Designprinsipper beskrivelse av de viktigste prinsippene Hvorfor var de valgte prinsippene viktig? Hvordan har de blitt brukt i utformingen av prototypen? Alle valg må begrunnes! INF1500 Introduksjon til design, bruk, interaksjon Brukeropplevelser og designprinsipper 47 07.10.13

Tips Dersom utgangspunktet fra obligatorisk oppgave 1 er dårlig, begynn på nytt Sørg for at du har brukers behov i fokus hele veien Bruk teori til å begrunne og utforme designvalg hele veien Lag gjerne prototyper av andre ting enn papir (kan leveres som bilde, video etc.) Spør din gruppelærer dersom du er usikker på noe (inf1500-x@ifi.uio.no) Orakel? Hør med din gruppelærer! INF1500 Introduksjon til design, bruk, interaksjon Brukeropplevelser og designprinsipper 48 07.10.13

Husk! Ikke skriv og forklar oppå selve prototypen deres, men heller før eller etter All tekst skal leveres som ett PDF-dokument (alt annet må omleveres) Evt. vedlegg/lenker/filmer kan legges ved i Devilry eller lenkes til i besvarelsen Inkluder navn og brukernavn i dokumentet Få med sidetall, overskrifter, referanser, innholdsfortegnelse INF1500 Introduksjon til design, bruk, interaksjon Brukeropplevelser og designprinsipper 49 07.10.13