Kognition & Konceptuell design

Transkript

1 Kognition & Konceptuell design

2 Kognition

3 Kognition Ni kommer läsa en hel kurs om kognition i tvåan Därför kommer vi bara skrapa lite på ytan i denna föreläsning Kapitel 3 har en mindre viktig roll i kursboken (för denna kursen) men utgör ändå intressant bakgrundsinformation

4 Termen kognition kommer från det latinska ordet cognitare (att tänka) Kognitionsvetenskap och kognitiv psykologi syftar till att beskriva och förstå hur tänkande går till.

5 Våra hjärnor är fantastiska! Perception Minne Uppmärksamhet Lärande Läsa, tala och lyssna Problemlösning Beslutsfattande

6 Men vi har samtidigt vissa kognitiva begränsningar Vi är anpassade för savannen Maskiner är något relativt nytt i vår omgivning Om för stor mental belastning: Vi hinner inte med Vi gör fel

7

8 Perception Det vi uppfattar är ofta konstruerat av hjärnan själv! Vi är meningssökande.

9 Hur hjärnan organiserar visuell information: Gestaltlagarna

10

11 Multimodal perception Våra sinnen utvecklades inte isolerade från varandra De samarbetar för att göra det lättare för oss att uppfatta omvärlden

12 Experiment: multimodal perception

13 Visuell dominans Synen är det sinne som människan förlitar sig mest på Vid motstridig information tenderar människan att lita främst på den visuella informationen

14

15 Experiment: korttidsminnet

16 Korttidsminnet Begränsningar - Antal enheter (7±2) - Tid (20-30 s) Glömska - Nya enheter aktiveras - Enheter vars aktivitet inte förnyas sjunker undan. Kursboken sid 367

17 Långtidsminnet Obegränsat Glömska - Minnen bleknar - Bortträngning - Interferens: gamla och nya minnen stör varandra

18

19 Experiment Länk

20 Uppmärksamhet Selektiv uppmärksamhet Fokuserad på en uppgift i taget Som ljuskäglan från en ficklampa, perceptuellt tunnelseende

21 Uppmärksamhet Delad uppmärksamhet Flera uppgifter samtidigt Cocktailpartyfenomenet Bla bla bla Robert bla bla bla Hmm?

22 Mentala modeller

23 Mentala modeller Interna konstruktioner av det som manipuleras i den externa världen, så att man kan göra förutsägelser och slutledningar.

24 Experiment: hur fungerar en växellåda?

25

26 Vi låter ofta felaktiga mentala modeller vägleda vårt beteende

27 Mentala modeller är dynamiska Ju mer någon lär sig om ett system och hur det fungerar, desto mer utvecklas hans/hennes mentala modell

28 Donald Normans designprinciper

29 Donald Normans designprinciper

30 Donald Normans designprinciper Affordance Synlighet Mappning Feedback

31 Affordance

32

33 Affordance (afford = is for ) De upplevda egenskaperna hos ett föremål De handlingar något tycks inbjuda till (erbjuda/stödja). Affordance förmedlar starka ledtrådar till hur föremål kan användas.

34 Riktlinjer Synlighet viktig faktor för att förmedla rätt affordance Begränsningar (constraints) kan utnyttjas för att begränsa ett föremåls affordance Forcing functions tvingar användaren att uppfatta en viss sorts affordance

35

36 Tidsinställning på mikrovågsugn

37

38 Synlighet

39 Synlighet Vad man ser och inte ser i ett gränssnitt Vägledning till vad man ska/kan göra Kan klargöra viktiga samband Understödjer den automatiska handlingsnivån

40 Vanliga problem För mycket (ovidkommande) saker syns För få saker syns

41 Riktlinjer Kill your darlings! En funktion en kontroll Utnyttja riktlinjer för layout, färg, ikoner, text, gruppering, etc.

42 Synlighet i digitalkamera Avancerade funktioner göms i ett menysystem

43 Mappning

44 Typisk korridorkökspis

45 Mappning Relationen mellan någon egenskap hos ett föremål och dess funktion Naturlig mappning: att dra fördel av fysiska analogier, kulturella standarder och generella biologiska förhållanden för att stödja en enkel, omedelbar och entydig förståelse.

46 Naturlig mappning fysiska analogier

47 Naturlig mappning kulturella standarder

48 Naturlig mappning biologiska förhållanden

49

50 Feedback

51

52 Feedback Att återkoppla information till användaren om vilka handlingar som gjorts och vad resultatet blivit.

53 Feedback vid filborttagning

54 Ljudfeedback Critical stop Notify

55 Konceptuell design

56 Boken Kap Kap 11.3

57 Konceptuell design är helt grundläggande inom interaktionsdesign kan upplevas som abstrakt och svårt att förstå förstås bäst genom att man utforskar och upplever denna designnivå på olika sätt

58 Konceptuella modeller

59 Konceptuell modell A high-level description of how a system is organized and operates Enables designers to straighten out their thinking before they start laying our their widgets

60 Mentala och konceptuella modeller Designerns konceptuella modell Användargränssnitt Användarens mentala modell System

61 Fallstudie: SJs tågdörrar

62 Designerns konceptuella modell Tågdörren öppnas med en fotocell Tågdörr

63 Designerns konceptuella modell...men det är bättre att folk tror att de ska trycka på en knapp i stället! Användargränssnitt Tågdörr

64 Användarens mentala modell Användargränssnitt En knapp! Jag trycker på den så öppnas dörren! Tågdörr

65 Användarens mentala modell Användargränssnitt En knapp! Jag trycker på den så öppnas dörren! Tågdörr

66 Ibland reagerar inte fotocellen Huh? Jag trycker men inget händer? Gör jag fel? Är dörren trasig? Användargränssnitt Tågdörr

67 Diskussion: Vad hade varit en bättre konceptuell modell för tågdörren?

68 Detta är en dörr som öppnas med en handgest

69 En närmare titt på denna konceptuella modell Användaren kan använda redan existerande mentala modeller från interaktion med vattenkranar, handtorkar etc. Den är transparent => Användaren kan byta strategi om dörren inte reagerar (t ex vifta närmare fotocellen)

70 Donald Normans kylskåp Donald Norman, The Design of Everyday Things, sid

71

72 Vilken konceptuell modell erbjuder detta användargränsnitt? Kylskåpet har två separata kylsystem som båda kan kontrolleras med var sitt reglage.

73 Användarens mentala modell

74 Designerns konceptuella modell

75 En mycket välkänd konceptuella modell Att använda en dator är som att arbeta på kontor.

76 Microsoft Bob: En alternativ konceptuell modell

77 Nintendo Wii En konceptuell modell som bygger på TV-konceptet

78 Diskussion På vilken konceptuell modell bygger de flesta webbutiker?

79 Huvudkomponenterna i en konceptuell modell Metaforer (t ex bokmärken) Koncepten som användaren kommer interagera med (t ex spara, organisera) Inbördes förhållanden mellan dessa koncept (t ex hur viktig en handling är jämfört med en annan) Kopplingen mellan koncepten och den användarupplevelse produkten är tänkt att stödja

80 Metaforer

81

82 Vad är en metafor? Inom litteraturen: Min ros, jag älskar dig! Inom interaktionsdesing: konceptuella metaforer

83 Definition Mappning mellan två kognitiva domäner, en källdomän och en måldomän Källdomän Metafor Måldomän

84 Time Machine (Mac OS X)

85 imoodjournal (ios)

86 Varför metaforer? Används i användargränssnitt för att underlätta för användaren att förstå måldomänen. Kunskap, erfarenheter och begrepp från källdomänen används för att organisera innehållet i måldomänen. En väl utformad metafor erbjuder användaren en god konceptuell modell.

87 Problem med metaforer i användargränssnitt

88 Gammal källdomän En metafor som bygger på en gammal källdomän aktiverar lite eller ingen förkunskap hos yngre användare

89 Aktiverar olämplig bakgrundskunskap i användarens mentala modell

90 Hjälper inte användaren att hitta tjänster som är datorspecifika Hur gör man en sökning i en bokhylla?

91 Riskerar att bryta konventioner och kulturella regler

92 De lider av den fysiska världens begränsningar Vad händer när bokhyllan blir full? Det går snabbare att hitta rätt bok med en lista.

93 Begränsar fantasin hos designers att komma på nya konceptuella modeller Skrivbordsmetaforen är nästan 40 år gammal!

94 ... men ändå så kommer användargränssnitt förmodligen bygga på metaforer för en lång tid framöver.

95 Övning Ni ska utforma ett datorprogram för att lära 6-åringar matematik Vilken/vilka metaforer väljer ni till programmets användargränssnitt?

96 En strukturerad process för att välja bra metaforer 1. Förstå vad produkten/tjänster ska kunna göra 2. Förstå vilka delar av produkten/tjänsten som är komplicerade och/eller kritiska 3. Generera metaforer Leta efter metaforer i användarnas beskrivningar Metaforer som redan används inom tillämpningsområdet

97 Fem frågor vid utvärdering av metaforer 1. Hur mycket struktur tillhandahåller metaforen? En bra metafor ska tillhandahålla struktur och helst känd struktur. 2. Hur mycket av metaforen är relevant för problemet? 3. Är metaforen enkel att representera? 4. Kommer din publik att förstå metaforen? 5. Hur utbyggbar är metaforen? Besitter den extra aspekter som kan komma till användning senare?

98 Övning Utvärdering av metafor till en delad reseplaneringstjänst Metafor: en tryckt resebroschyr

99 1. Hur mycket struktur tillhandahåller metaforen? Den tillför struktur som är baserad på den kända pappersbaserade broschyren. Detta är en bok och har därför sidor, ett omslag, någon typ av bindning för att hålla ihop sidorna, ett index och en innehållsförteckning.

100 2. Hur mycket av metaforen är relevant för problemet? Uppgifter om boende, tillgängliga faciliteter, karta över området och stödjande illustrationer är relevanta för reseplaneraren så innehållet i broschyren är relevant. Broschyrens fysiska struktur, t.ex. bladvändning, är mindre relevant. Reseplaneraren kan vara mer flexibel än broschyren och bör inte försöka efterlikna dess bokkaraktär. Slutligen trycks broschyren kanske en gång om året och kan inte hållas uppdaterad med de senaste ändringarna medan reseplaneraren bör kunna erbjuda den mest aktuella informationen.

101 3. Är metaforen enkel att representera? Ja. Semesterinformation kan vara en uppsättning broschyrliknande sidor. Observera att detta inte är detsamma som att säga att navigering genom sidorna ska vara begränsad till sidvändning.

102 4. Kommer din publik att förstå metaforen? Ja.

103 5. Hur utbyggbar är metaforen? Funktionaliteten hos en pappersbaserad broschyr är tämligen begränsad. Men den är också en bok och vi skulle kunna låna funktioner från e-böcker (som också är kända föremål för de flesta i vår publik), så ja, den är utbyggbar.

104 Konceptuell design i projektet Systemets konceptuella modell (metaforer, koncept etc.) Gruppering av tjänster i naturliga grupper Språkbruk/terminologi På denna nivå ska ni börja utforska designrymden, dvs. ni ska arbeta med flera olika alternativa lösningar (parallell design), genom att varje gruppmedlem tar fram var sitt designkoncept.

105 Tips från coachen Börja med en djupdykning i datan från användarstudien. Försök leva dig in i användarnas situation! Använd skisser, scenarios och storyboards för att utforska designrymden! Använd card sorting method för att skapa naturliga grupper! Beskriv INTE din konceptuella design i termer av hårdvara/mjukvara!