AFFORDANCE CONSTRAINTS FEEDBACK MAPPING

Transkript

1 AFFORDANCE CONSTRAINTS FEEDBACK MAPPING

2 The Design of Everyday Things Don Norman Noen begreper Affordance Constraints Feedback Mapping

3 Affordance Hva slags handling signaliserer en gjenstand? Ting tillater visse handllinger Utformingen sier noe om hvordan tingen kan brukes Dørhåndtaket sier: Trykk meg ned Hammeren sier: Ta tak i meg Cola-flasken sier: Drikk meg Lego-klossen sier Sett oss sammen Relasjon mellom objekt og aktørs fysiske egenskaper

4 Hva er affordance rent psykologisk? Fysisk: Gitt av kroppens og objektets anatomi (hammeren,cola-flasken,...) Kulturelt: Konvensjoner som læres ( Slik gjør vi det her : dørhåndtak som vris eller trykkes ned) Gitt av konteksten/omgivelsene ( Nei, nei, på Mac en gjør en det slik )

5 Grafiske grensesnitt I web-stilen er det en konvensjon at alt som er streket under kan klikkes på og leder til noe annet. Det gir en tillært affordance.! Hva kan trykkes på i dette bildet?! Hva signaliserer disse?! Hva vil skje?!

6 Eksempler på det motsatte (feller) En pappstol som ser ut som den er laget av tre." Stolen sier Sitt på meg, men tåler ikke å bli sittet på.! Ting på kontrollpanel og grafiske vinduer som ser ut som knapper ( Trykk på meg ), men ikke er det! Et aktivt menyinnslag ( Velg meg ) som ikke reagerer!

7 Eksempel: Gerica, journalsystem i bruk i Trondheim kommune Ser ut som om feltet Lab type skal brukes, Falsk affordance

8 Constraints (begrensning) Visse ting lar seg ikke gjøre med et produkt Lego-klosser kan bare settes sammen på visse måter Visse knapper er grået ut og kan ikke trykkes på Dato-felt, som bare tillater tall og punktum Eksempler på det motsatte DOS-prompt som tillater nesten hva som helst

9 Hva er constraints Fysisk: Gitt av produktets utforming Kulturelt: Visse ting gir mening, andre ikke (bruke hammeren som våpen?) Gitt av produktet/omgivelsene: Papir kan skrives på i en sammenheng, brukes til å tenne opp bål i en annen sammenheng.

10 Feedback (tilbakemelding/ reaksjon) En handling skal ALLTID gi feedback Når du trykke en knapp, forandres rammen Når du du knepper en jakke, sier det knepp Når du svinger rattet, kjenner du motstand Når blinklyset slås på, vises det på dashbordet Eksempler på det motsatte Unix: chmod må etterfølges av ls l Prosesser uten tilstandsindikator ( progress bar )

11 Forskjellige typer feedback Visuelle mus-peker, modus-knapp, highlighting Auditive feil-beep, harddisk-lyd, knappe-knepp Taktile varierende motstand, skiftende overflate Feedback fullfører affordance, den erstatter ikke

12 Mapping (overføring) Hvordan tolker brukeren produktet Volumkontroll med knapper over hverandre. Den øverste øker volumet: Opp = mer Volumkontroll med vri-knapp. Med klokka = mer Layout på kontroll tilsvarer layout på apparat Natural mapping Eksempler på det motsatte Under/venstre = opp Stekeovn: 2x2 plater og knappesekvens

13 V.F. V.B. H.B. H.F:!

14 V.F. V.B. H.B. H.F:!

15

16

17 GESTALT

18 Gestaltprinsipper Gestaltprinsippene stammer fra persepsjonspsykologiske forklaringer på hvordan vi sanser og organiserer visuelle inntrykk.

19 Gestalt-prinsipper Gruppering / Nærhet Linje / Kontinuitet Mental komplettering Likhet i form Likhet i farge Forgrunn/Bakgrunn + reversering

20 Gestalt: Gruppering / Nærhet

21 Gruppering/nærhet

22 Gestalt: Linje / Kontinuitet

23 Gestalt: Mental komplettering

24 Gestalt: Mental komplettering

25 Gestalt: Likhet i form

26 Gestalt: Likhet i farge

27 Likhet i farge

28 Gestalt: Forgrunn/Bakgrunn

29 Gestalt forgrunn/bakgrunn

30 Eksempler Skjematisk framstilling, organisering av brukergrensesnitt

31

32

33

34

35 KONSEPTUELLE OG MENTALE MODELLER

36 Tre modeller av et system Designer/Utvikler: Konseptuell modell Utviklers intensjon Spesifikasjon UML Bruker: Mental modell Det brukeren oppfatter bekreftes/avkreftes System: Teknisk modell Implementasjon UML 1-til-1 kode

37 Konseptuell modell" Hvordan er systemet ment å se ut ifra brukeren? Begrepsapparat Brukerens perspektiv Modeller: Funksjonell forståelse (Hvordan gjør jeg?) Systemforståelse (Hvorfor virker det slik?) Scenariene synliggjør konsekvenser av valg m.h.t. konseptuell modell.

38 Mentale modeller Begrepet mental modell ble først utviklet tidlig på 1940 tallet av Kenneth Craik. : - Small scale model og external reality - Prøve ut mulige handlinger i hodet - Reagere til fremtidige situasjoner før de oppstår - Bruke tidligere erfaring for å takle nåtid og framtid Reagerer i en tryggere og mer kompetent måte til uforutsette hendelser

39 Brukere utvikler mentale modeller av både seg selv, andre, omgivelsene og ting de samspiller med. En mental modell formes vanligvis ved å tolke visuell struktur og synlig oppførsel. Produktets oppførsel læres basert på tidligere erfaring og kunnskap, læring, og praktisk prøving og feiling. (D.Norman)

40 Mentale modeller" Eksempel: Naiv fysikk A. Newtonsk fysikk "(20%)" B. Aristotelisk fysikk (40%)" C. Aristotelisk + luftmotstand (40%)

41 Nivåer av modeller: Funksjonelle modeller: Knowing how " Hva må jeg gjøre for å få til dette? " Funksjonell forståelse" Eksempel: Handle i nettbutikk! Finne varer man ønsker å kjøpe! Velge varene! Fylle ut informasjon (navn,! adresse, visakort)! Trykke på OK-knappen! Få et referansenummer på! skjermen og pr. mail!

42 Nivåer av modeller: Strukturelle modeller: Knowing what " Hva er strukturen til produktet?" Systemforståelse" NOEN GANGER nødvendig for å kunne resonnere." Eksempel: Termostaten" Hva er den underliggende modellen?

43 Termostat: To mulige modeller Modell 1: En termostat er som en komfyr. Skru mot høyre Mer varme Skru mot venstre Mindre varme Modell 2: En termostat kan settes til ønsket temperatur. Termostaten tilpassser temperaturen til ønsket temperatur.

44 Termostat Tem p Ovn Tem p Av/På Ovn Temp i rommet

45 Spesifikk kunnskap (Tekstbehandling i Microsoft Word)! For å forandre font i Word:! Velg teksten! Velg Font menyen! Velg konkret font.!

46 Generisk kunnskap (Tekstbehandling generelt)! For å skrive brev:! Åpne et tomt dokument! Skriv brevet! Lagre på fil! Skriv ut!

47 METAFORER

48 Metaforer: Et blomstrende språk som man vanligvis finner i poesi eller dårlige noveller? Nei! Det meste av vår virkelighetsoppfattelse, våre tanker og vårt språk er bygd på metaforer. Metafor er direkte knyttet til persepsjon og vår forståelse av vår livsverden (Lakoff & Johnson)

49 Metaforer Atomer-er-solsystemer Fenomenet Atomer-er-bølger Metaforer lyser opp, men de gjør også at man mister nattsynet.

50 Metaforer Kraftfulle semantiske verktøy for å overføre både overfladiske og dype likheter mellom kjente og nye situasjoner. McCormack (1985): «Metaforer kommuniserer ikke bare antydninger og ekspisitte meninger, de blir også ikoniske objekter gjennom sammensmelting av sansene» I.A.Richards: Metaforer er... «borrowing between and intercourse of thoughts»

51 Fordeler og ulemper... Fordelen: evne til å initiere dannelsen av en brukbar mental modell av grensesnittet. Ulempe: Lakoff & Johnson (1980) observerer at metaforer ikke innebærer komplett mapping av hver konkret detalj på et objekt eller en situasjon over på et annet. Metaforene fremhever enkelte egenskaper og undertrykker andre. Metafor Objekt

52 Desktop metaforen

53 Metaforen blir virkeligheten Grensesnittet på skjermen ser ut som en arbeidsflate med mapper, og filer og en søppelbøtte nede i hjørnet. Resultatet er at brukeren lærer seg å bruke metaforen, ikke produktet. Brukeren danner seg funksjonelle mentale modeller av metaforen fremfor strukturelle modeller av systemet.

54 Dagligdagse metaforer

55 Hva mener vi når... Vi sier at våre synspunkter uttrykker en holdning? (Kroppsholdning?) Hva er forresten et synspunkt?

56 Eller hva med måten vi snakker om tid på? Vi sparer den, bruker den opp, har for mye eller for lite av den og den renner ut mellom fingrene våre som sand.vi gir noen av vår tid eller lever på lånt tid. Eller tiden ble spist opp av uvesentligheter Vi sammenligner den med penger, vann, og sand og mat Primære opplevelser av mengde

57 Eksempel: Argumentasjon tilsvarer krig! Argumenter har forskjellige sider. Synspunkter kan forsvares eller angripes. Vi kan samle våre argumenter for å forsvare en stilling. sider, forsvar, angrep, stilling, er alle metaforer for kinestetiske opplevelser (opplevelser av kroppen i bevegelse)

58 Metaforer i språket --> språk i grensesnittet Eksempel: Danske bibliotekarer: Det var i den databasen Jeg tok det ut Det er er ikke her Konklusjon: Romlige metaforer for å beskrive informasjon Forslag til språkbruk i grensesnittet: Bruk romlige begreper i kommandoer og menyer.

59 Valg av metaforer Bruk metaforer som samsvarer med brukerens konseptuelle oppgaver Skrivebordsmetafor for sekretærer Malemetafor for designere... Velg metaforer som er representerer systemets virkemåte Forsikre om at metaforen ikke sender ut uriktige følelsesmessige signaler F.eks. slette fil Søppelbøtte? Papirkurv? (Kaste bestilling?) Fjern bestilling

60 Marble Answering Machine (Bishop, RCA)

61 mediablocks (Ullmer, MIT)

62 Using IButtons for images

63

64 Augmenting the devices

65 Augmenting the devices

66 Augmenting the devices

67 RF Smartcards

68 Containment:! Metaphors found The image is in the IButton (one image).! The IButton stores images as a stack (many images, FIFO)! Reference:! The IButton is a reference to an image (technologically correct)! Trigger:! The IButton triggers an action (portable push-button)! The IButton triggers an action for the image it stores/is.! Power! The IButton turns the device on/off.! Magnet:! The IButton sucks up the image. It is a magnet.!

69 Finding:! The role of metaphor in TUIs The users of the containment metaphor continued using this metaphor even when told that it was wrong.! Theory:! That is similar to GUI metaphors like the desktop metaphor.! We know the full story, but prefer the short version as long as it works.! Consequence:! Users will accept metaphors also when they know the mechanics that create the illusion.! This is good news.!

70 PERSONAS OG SCENARIER

71 for bestemte brukere med bestemte mål i bestemte omgivelser PERSONAS SCENARIER

72 PERSONAS

73 Personas (eks.: South Park & Simpsons)

74

75 Alan Cooper (fra Sagent s head of product marketing took me on a tour of a half-dozen or so of their intended clients. One of them was a financial analyst for a large university. One was a marketing analyst for a software firm. Some were computer savvy and some were not. I asked them openended questions to learn about their jobs and what they were trying to achieve by studying these large quantities of data. Even though the variation among the users was dramatic, a clear pattern emerged after just a few interviews. The users fell into three distinct groups, clearly differentiated by their goals, tasks, and skill levels.

76 Cooper: Personas So I created Chuck, Cynthia, and Rob. These three were the first true, Goal-Directed, personas. At the next group meeting, I presented my designs from the points of view of Chuck, Cynthia, and Rob instead of from my own. From then on, I always presented design work using one of the personas, and eventually even the Sagent engineers began to talk about what Cynthia would do or whether Chuck could understand some dialog box.

77

78

79

80

81 Segmenteringsmodell, fordeling på abonnenter Ung og Den Mobile Midt i 12 uetablert 25 Etablerende 35 familie 55 livet/ Eldre x % x% x% x% x% Skoleelev x % Ung i jobb x% Student x % x % Ung og karrierefokusert x % x % Sosialiserende Basisbruker x% x % Karriere- og multibruker Aktiv fritid Nøktern med balanse jobb/fritid x % Golden oldies x % Trygg alderdom Inaktive brukere*: x % x % x % x % Fra: Harald Stegavik, Telenor Mobil.

82 Personas Velg målgruppe(r) for produktet Hvert segment er representert ved en person. Bruk disse personene, og ikke brukere generelt under utvikling. Vurder om personene dere har valgt ville brukt funksjonene. Fra: Harald Stegavik, Telenor Mobil.

83 Eksempel: Kivio (Open source project)

84 SCENARIER

85 Å fortelle en historie visuelt (Egypt 3000 f.kr ) Narmers palett viser antagelig slaget der Egypts første farao Narmer forener Øvre og Nedre Egypt. 63 cm, relieff i sten. Egyptiske museet i Kairo.

86 Å fortelle en historie visuelt (ca ) Olav den hellige før, under og etter slaget på Stiklestad. Olavsfrontalet, tidlig 1300 tall, Nidarosdome n, Trondheim.

87 Storyboards (Eks. Flintstones ca. 1960)

88 Storyboard - Fortell en historie

89 Scenarier og storyboards Scenariebygging Storyboards.?!

90 Konkret tenkning Kommunisere gjennom konkrete skjermbilder/skisser De fleste brukere forstår ikke våre abstraksjoner Gjennom konkrete eksempler blir det lettere å tenke Gjenbruk av skissemateriale i dokumentasjon og brukerveiledning

91 Scenario, Storyboard Hvem Hva Hvor Når

92 Storyboard Serie med bilder Beskrivende tekst Av hvordan ting gjøres i dag Av hvordan ting kan gjøres i fremtiden

93 Storyboard Tekst og bilde kan være utgangspunkt for ideskissing Legg til tegninger og tekst som beskriver: Nye funksjoner Nye produkter Nye grensesnitt Nye handlinger Overflødige gamle handlinger

94 Scenarier som utgangspunkt for brukbarhetstesting

95 Scenarie for testing av mobil EPJ/kurve 1. Vaktskifte Kl Forrige sykepleier gir rapport til sykepleier (ca 5 min) 2. Previsitt Kl : Sykepleier og lege. 2 stk. PC med Doculive. En til hver. 3 stk. kurvemapper. Informasjon. Gjøre seg kjent med pasientene hver for seg. (5-10 min.) Previsitt. 5 min. pr. pasient (totalt 15 min.) 3. Visitt_ Maks min. 3 stk. pasienter. 4. Dokumentasjon / Medisinering (delvis parallelt). Lege dokumenterer på previsittrommet. Sykepleier administrerer medisiner (venter på papirkurven) Ca 10 min

96

97

98

99

100

101

102

103

104

105

106

107

108

109 Video for scenarier Grunner til å lage videoscenarier For å vise en teknologisk ide / konsept. Eks: Knowledge Navigator, HAL 9000 For å vise praktisk bruk Ivrea eksemplene For å demonstrere en teknologi MIT Medialab Ren reklame Telenor framtidens hus Humor / refleksjon Helpdesk i middelalderen Som del av drama/film Eks. Minority Report Problem: Graden av realisme Teknologisk realisme Realisme i forhold til bruk