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

INF1500 - Introduksjon til design, bruk, interaksjon Brukeropplevelser (UX) 18. oktober 2016 Institutt for Informatikk, Universitetet i Oslo joshi@ifi.uio.no INF1500 Introduksjon til design, bruk, interaksjon Brukeropplevelser (UX) 1 18.10.16

Resten av semesteret Etter i dag er det kun 2,5 ordinære pensumforelesninger + 3 gjesteforelesninger Etter oblig 2 har vi vært gjennom den aller største og tyngste delen av pensum Har du kommet deg hit klarer du også resten! Mandag 28. november blir det gjesteforelesning og sosial avslutning i 5. etg med pepperkaker og gløgg INF1500 Introduksjon til design, bruk, interaksjon Brukeropplevelser (UX) 2 18.10.16

Oversikt Brukeropplevelser Hva er brukeropplevelser og hva påvirker brukeropplevelser? Elementer i brukeropplevelser Brukeropplevelsesmål Flow Gamification Representasjon Mental modell Affinity diagram Midtveisevaluering Emosjonell design Modell for emosjonell design De tre planene ved oppførsel Fortsatt mest praktiske oppgaver på gruppetimen denne uken derfor veldig viktig å delta! Husk innlevering av obligatorisk oppgave 2 på søndag! INF1500 Introduksjon til design, bruk, interaksjon Brukeropplevelser (UX) 3 18.10.16

Nøkkelbegreper fra dagens forelesning Brukeropplevelse s. 6 Flow s. 17 Domene s. 19 Gamification s. 20 Representasjon s. 21 Mental modell s. 21 Implementert modell s. 21 Representert modell s. 21 Brukeropplevelsesmål s. 23 Affinity diagram s. 27 (også gjennomgått på forelesning 20. september 2016) Emosjonell design s. 31 Visceral s. 34 Behavioral s. 34 Reflective s. 34 INF1500 Introduksjon til design, bruk, interaksjon Brukeropplevelser (UX) 4 18.10.16

Brukeropplevelser (UX) INF1500 Introduksjon til design, bruk, interaksjon Brukeropplevelser (UX) 5 18.10.16

Definisjoner: - Brukeropplevelser Brukeropplevelser User experience (UX) En brukers helhetsopplevelse ved bruken av et system eller et produkt For brukere er ofte brukeropplevelsen = systemet 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 Kapittel 5 handler om den emosjonelle siden ved design INF1500 Introduksjon til design, bruk, interaksjon Brukeropplevelser (UX) 6 18.10.16

UX-designer Flere og flere interaksjonsdesignere ender opp med tittelen «UX-designer» Jobber med hvordan brukere føler og opplever interaksjon med produkter eller tjenester Ofte uklare grenser mellom interaksjonsdesigner, tjenestedesigner, UX-designer etc. Eksempler på elementer ved det å kjøpe en nylansert skjorte som en UX-designer kan jobbe med: E-post fra selskapet som annonserer ny kolleksjon Annonsering i sosiale medier Detaljene på nettsiden Utseende i butikkens vindu Reklame og profilering Skilt og utseende på butikken Musikk og belysning inne i butikken Kundeservice Tilgjengelighet på produkter Prøverommet Den faktiske skjorten Bruken og signaleffekten av skjorten INF1500 Introduksjon til design, bruk, interaksjon Brukeropplevelser (UX) 7 18.10.16

INF1500 Introduksjon til design, bruk, interaksjon Brukeropplevelser (UX) 8 18.10.16

Brukeropplevelser Historisk sett har HCI fokusert mye på design av effektive og flittige systemer brukervennlighet Brukervennlighet handler om grensesnittets brukervennlighet og hvor raskt eller bra man kan løse oppgaver (effectiveness & efficiency) Vi kan derfor ikke bruke tradisjonelle måleenheter eller skalaer når vi jobber med brukeropplevelser Vi ønsker å designe løsninger som frembringer spesifikke følelser eller reaksjoner Vi må derfor ta innover oss alle faktorer som påvirker brukeropplevelsen når vi designer: Hva mer enn brukervennlighet påvirker brukeropplevelser? Hvordan kan vi forstå situasjonen fra brukerens side? INF1500 Introduksjon til design, bruk, interaksjon Brukeropplevelser (UX) 10 18.10.16

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 (UX) 11 18.10.16

Elementer i brukeropplevelser The most basic reason for considering joy of use is the humanistic view that enjoyment is fundamental to life Hassenzahl, Beu, and Burmester Brukeropplevelser omfavner tre hovedfaktorer: Det vi opplever grunnet brukbarhetsfaktorer (usability) Det vi opplever grunnet nyttighetsfaktorer (usefullness) Det vi opplever grunnet emosjonelle faktorer INF1500 Introduksjon til design, bruk, interaksjon Brukeropplevelser (UX) 12 18.10.16

tid Elementer av brukeropplevelser (J. J. Garrett, 2000) Konkret Fullførelse 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. Informasjonsdesign Grensesnittdesign 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 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 (UX) 13 18.10.16

Hvem jobber med UX? Som med tjenestedesign så starter forståelsen av brukeropplevelsen før faktisk bruk, og slutter etter faktisk bruk Vanskelig å håndheve, operasjonalisere, og ta eierskap av brukeropplevelsesrutiner og ansvar i en organisasjon Dette skyldes at brukeropplevelser må dekkes av et helt team med ulike roller Ofte kan én person dekke flere roller, men rollene må tydeliggjøres Eksempel på ulike roller som alle jobber med UX INF1500 Introduksjon til design, bruk, interaksjon Brukeropplevelser (UX) 14 18.10.16

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? Ulike personer vil ha behov for ulike ting Vi må ikke glemme de som faktisk ønsker den «gode, gamle, klumpete telefonen» Stor, robust, tydelig fysiske 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 (UX) 15 18.10.16

Ferdighetsnivå Ferdighetsnivå Ferdighetsnivå 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 Tid Tid Tid INF1500 Introduksjon til design, bruk, interaksjon Brukeropplevelser (UX) 16 18.10.16

Definisjoner: - Flow 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 (UX) 17 18.10.16

Å forstå kompleksiteten INF1500 Introduksjon til design, bruk, interaksjon Brukeropplevelser (UX) 18 18.10.16

Definisjoner: - Domene Domene Vi designer ofte for spesifikke brukskontekster hvor god innsikt krever domenekunnskap For å skape gode brukeropplevelser må vi enten sette oss inn i domenet eller hente inn domeneeksperter Ofte er ikke løsninger overførbare mellom domener Domene et felt eller omfang av en bestemt kunnskap eller aktivitet Domenekunnskap kunnskap innenfor et bestemt domene Domeneekspert en ekspert innenfor et gitt domene INF1500 Introduksjon til design, bruk, interaksjon Brukeropplevelser (UX) 19 18.10.16

Gamification Definisjoner: - 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 (UX) 20 18.10.16

Representasjon Definisjoner: - Representasjon - Mental modell - Implementert modell - Representert modell 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 (UX) 21 18.10.16

Mental modell går begge veier Både brukeren og designerer bringer sin mentale modell inn i interaksjonen En designer bringer sin forståelse av konteksten inn i systemet han/hun designer det er ikke alltid det stemmer En konseptuell modell presenterer designerens mentale modell hva systemer er, hvordan det er organisert, hva det gjør og hvordan det virker Både brukeren og designerer bringer sin mentale modell inn i interaksjonen For designeren er det viktig å forstå konteksten for å forstå brukernes mentale modell INF1500 Introduksjon til design, bruk, interaksjon Brukeropplevelser (UX) 22 18.10.16

Definisjoner: - Brukeropplevelsesmål 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 Brukeropplevelsesmål Effektivitet (effectiveness) Flittighet (efficiency) Trygghet Nyttighet Lærbarhet Memorerbarhet Se resten av tabellen i boka på s. 23 (3. utgave) / s. 22 (4. utgave) Ønskelige aspekter: + Tilfredshet + Underholdende + Engasjement + Behaglighet + Fornøyelighet + Spennende + Utfordrende + Hjelpsomhet + Motiverende Uønskelige aspekter: - Kjedsomhet - Barnslighet - Forvirrende - Irriterende - Frustrerende - Fornærmende - Nedlatende Ikke uttømmende liste, kun eksempler INF1500 Introduksjon til design, bruk, interaksjon Brukeropplevelser (UX) 23 18.10.16

Tre måter å «fange» brukeropplevelser på Samle på artefakter Artefakter er fysiske eller elektroniske enheter som brukerne oppretter, henter, bruker eller refererer til under oppgaveløsning Billetter, bestillingsskjemaer, kvitteringer, regninger, utstyr, verktøy etc. Bilder og oppbevaring av slike artefakter er veldig nyttige i å forstå oppgaveflyt og arbeidsrutiner Intervjue og observere etter brukeropplevelse Contextual inquiry er en måte å samle inn informasjon om brukeropplevelser holder ikke bare å spørre «hva trenger du?» Notater av sitater, eksempler, hendelser, (fortolkninger) dette gjøres uavhengig av lyd- eller videoopptak av intervjuer og observasjoner Bruk av artefakter og reelle brukssituasjoner som en del av intervju og observasjon Se etter opplevelse i dataen både før og etter analysen Før man begynner utviklingen må man passe på at man identifiserer hvert punkt i rådataen med et nummer i analysen må alle konklusjoner kunne spores tilbake For transkripsjon kan man bruke linjenummer, for videoopptak kan man bruke tidsstempel eller frame-nummer, og for notater kan man bruke et nummereringssystem INF1500 Introduksjon til design, bruk, interaksjon Brukeropplevelser (UX) 24 18.10.16

Affinity diagram Definisjoner: - Affinity diagram Affinity diagram er en teknikk som lar oss organisere og gruppere innsikt og utfordringer fra konteksten vår Formålet med et slikt diagram er å visualisere data på en måte som gjør det lett å gruppere og filtrere data Brukes også etter brainstorming og idédugnader for å samle tanker og se relasjoner mellom dem Man forsøker å bygge et hierarki over utfordringer og temaer INF1500 Introduksjon til design, bruk, interaksjon Brukeropplevelser (UX) 27 18.10.16

Å måle brukeroppleveler For å måle abstrakte brukeropplevelser må vi finne metrikker Metrikker er kvantifiserbare størrelser vi kan måle objektivt Måles gjennom tester, observasjon og gjennomganger Før vi kan etablere metrikker må vi definere brukbarhetsmål Typiske metrikker er tid, hastighet, antall feil etc. INF1500 Introduksjon til design, bruk, interaksjon Brukeropplevelser (UX) 29 18.10.16

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» Dette er noe dere enkelt kan beskrive i den obligatoriske oppgaven! INF1500 Introduksjon til design, bruk, interaksjon Brukeropplevelser (UX) 30 18.10.16

Definisjoner: - Emosjonell design Den emosjonelle siden av brukeropplevelsen Normalt er vi på jakt etter positiv respons fra brukere når vi designer: brukervennlig, komfortabel, tilfredshet Men vi må også kunne lage løsninger som frembringer spesifikke type emosjonell respons Vi kan også være opptatt av å lage løsninger som støtter oppfatning av ulike typer emosjoner Emosjonell design omhandler frembringelse og oppfattelse av emosjoner gjennom designet og brukeropplevelsen INF1500 Introduksjon til design, bruk, interaksjon Brukeropplevelser (UX) 31 18.10.16

En modell for emosjoner og oppførsel (1) Modellen beskriver hvordan oppførsel stammer fra ulike deler av hjernen vår Vi kan reagere på instinktive lave nivåer i hjernen...og vi kan bruke hjernen til å reflektere Og vår hverdagslige oppførsel ligger et sted midt i mellom Modellen demonstrerer evolusjon og den biologiske opprinnelsen til hjernen vår Encellede organismer mer komplekse dyr virveldyr pattedyr primater (mennesker) Beskrevet i kapittel 5 INF1500 Introduksjon til design, bruk, interaksjon Brukeropplevelser (UX) 33 18.10.16

En modell for emosjoner og oppførsel (2) Definisjoner: - Visceral - Behavioral - Reflective Visceral Biologiske instinktive reflekser Raske beslutninger basert på hva som er bra/dårlig eller trygt/farlig Sender signaler rett til musklene Kan påvirkes og forsterkes av lagene over Behavioral På dette planet foregår det meste av menneskelig oppførsel Ikke et bevisst plan (vi kan kjøre bil og tenke på noe annet samtidig) Kan påvirke/forsterke laget under og bli påvirket/forsterket av laget over Reflective Beskriver evnen til å jobbe med tanker og refleksjoner Har ikke direkte kontroll over sensorisk input eller kontroll over oppførsel Overvåker, reflekterer og påvirker oppførsel INF1500 Introduksjon til design, bruk, interaksjon Brukeropplevelser (UX) 34 18.10.16

Et eksempel på hvordan vi reagerer Vi plasserer en tallerken med mat bak et gjerde hvordan reagerer man på de ulike nivåene? En høne blir sannsynligvis stående og stirre på maten for alltid, ute av stand til å komme seg forbi gjerdet Handler på det laveste plan. Faste rutiner hvor hjernen tolker verden og reagerer deretter. En hund ville sannsynligvis klart å løpe rundt gjerdet og få tak i maten En mer kraftig hjerne som kan analysere situasjoner og endre oppførsel. Et menneske kan både gå rundt, men også reflektere rundt opplevelsen, lære av den, og dele den med andre Det høyeste planet lar oss tenke rundt situasjonen, gir rom for bevisste tanker, kunnskapsgenerering etc. INF1500 Introduksjon til design, bruk, interaksjon Brukeropplevelser (UX) 35 18.10.16

Overføring av dette tilbake til mennesket Kjøre berg-og-dalbane Visceral: Vi reagerer på fritt fall, høye hastigheter og høyde Kutte mat med en god kniv og et god skjærebrett Behavioral: Vi gleder oss over å bruke et verktøy med god teknikk. Følelsen av å få til noe godt. Vurdere et vakkert stykke kunst Reflective: Vår vurdering og forståelse krever tolkning og analyse Disse planene samspiller og konkurrerer: En berg-og-dalbane gir glede på et grunnleggende plan gjennom adrenalinrush...men det gir også glede i etterkant av å føle mestring, tøffhet og mulighet til å dele med andre En kamp mellom visceral angst og reflective glede Helt til man prøver én gang og bestemmer seg for å aldri gjøre det igjen INF1500 Introduksjon til design, bruk, interaksjon Brukeropplevelser (UX) 36 18.10.16

Hva kan vi lære av denne modellen? Vår emosjonelle tilstand forandrer våre tanker og oppførsel Når vi er redde eller sinte har vi begrenset fokus og kroppen reagerer med å spenne muskler og svette I en situasjon som dette er vi mindre tolerante og tålmodige Når vi er glad eller oppspilt er vi mindre fokusert og kroppen slapper av Mer sannsynlig at vi overser mindre problemer og rom for at vi kan være mer kreative Vi kan utnytte dette i designprosessen ved å spille på ulike emosjonelle tilstander Visceral: utseende og attraktivitet appellerer til vår magefølelse Behavioral: glede og effektivitet appellerer til vår jakt etter brukbarhet og prestasjon Reflective: selvbilde og utvikling appellerer til vårt selvbilde, minner, identitet, personlig glede INF1500 Introduksjon til design, bruk, interaksjon Brukeropplevelser (UX) 37 18.10.16