Kognition & Konceptuell design

Kognition

• 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.

• Perception • Minne • Uppmärksamhet • Lärande • Läsa, tala och lyssna • Problemlösning • Beslutsfattande

Våra hjärnor är fantastiska!

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

Perception Det vi uppfattar är ofta konstruerat av hjärnan

själv! Vi är meningssökande.

Hur hjärnan organiserar visuell information: Gestaltlagarna

Gestalt lagarna: Kontinuitet

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

Experiment: multimodal perception

http://www.youtube.com/watch?v=jtsfidRq2tw

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

Experiment Korttidsminnet Titta på bilderna i 20 sekunder,

memorera vad du ser

Skriv ned så många saker från bilderna som möjligt

Experiment… Facit

Korttidsminnet

• Begränsningar - Antal enheter (7±2) - Tid (20-30 s) • Glömska - Nya enheter aktiveras - Enheter vars aktivitet inte förnyas

sjunker undan.

Långtidsminnet

• Obegränsat • Glömska - Minnen bleknar - Bortträngning - Interferens: gamla och nya minnen

stör varandra

Experiment

Länk

Uppmärksamhet

• Selektiv uppmärksamhet – Fokuserad på en uppgift i taget – Som ljuskäglan från en ficklampa, ”perceptuellt

tunnelseende”

• Delad uppmärksamhet Flera uppgifter samtidigt Cocktailpartyfenomenet

Uppmärksamhet

Bla bla bla Robert bla

bla bla

Hmm?

Mentala modeller

Mentala modeller

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

Experiment: hur fungerar en växellåda?

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

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

Donald Normans designprinciper

Donald Normans designprinciper

Donald Normans designprinciper

– Affordance – Synlighet – Mappning – Feedback

Affordance

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.

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

Tidsinställning på mikrovågsugn

Synlighet

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

Vanliga problem

• För mycket (ovidkommande) saker syns

• För få saker syns

Riktlinjer

• ”Kill your darlings!” • En funktion – en

kontroll • Utnyttja riktlinjer för

layout, färg, ikoner, text, gruppering, etc.

Synlighet i digitalkamera

Avancerade funktioner ”göms” i ett menysystem

Mappning

Typisk korridorkökspis

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.

Naturlig mappning – fysiska analogier

Naturlig mappning – kulturella standarder

Naturlig mappning – biologiska förhållanden

Feedback

Feedback

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

Feedback vid filborttagning

Ljudfeedback

”Critical stop” ”Notify”

Konceptuell design

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

Konceptuella modeller

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”

Mentala modeller

• Internal representations of reality that allow us to interact with the world

• Incomplete representations of reality

Mentala och konceptuella modeller

Användar-gränssnitt

Designerns mentala modell

System

Användarens mentala modell

Systemets konceptuella

modell

SJ:s tågdörrar

Vi utformar en dörr som öppnas med en fotocell!

...men folk begriper sig inte på fotoceller så vi gör en låtsas-knapp istället så

att de för in handen under

fotocellen !

Låtsasknapp

Dörr

Användaren ser knappen och sluter sig till att dörren öppnas genom att man trycker på den

Låtsasknapp

Dörr

En knapp! Jag trycker på den så öppnas dörren!

Ibland reagerar dock inte fotocellen…

Låtsasknapp

Dörr

Huh? Jag trycker men

inget händer? Gör jag fel? Är dörren trasig?

“Detta är en dörr med fotocell som öppnas med en gest.”

Varför inte erbjuda en mer korrekt konceptuell modell från början?

Donald Normans kylskåp

Donald Norman, The Design of Everyday Things, sid. 13-17

“Kylskåpet har två separata kylsystem som båda kan kontrolleras med var sitt reglage.”

Vilken konceptuell modell erbjuder detta användargränsnitt?

Användarens mentala modell

Designerns mentala modell (av hur detta kylskåp bör fungera)

Den mest kända konceptuella modellen

“Att använda en dator är som att arbeta på kontor.”

Microsoft Bob: En alternativ konceptuell modell

http://www.youtube.com/watch?v=xflQN-csX8M

Nintendo Wii

• En konceptuell modell som bygger på TV-konceptet

Diskussion

• På vilken konceptuell modell bygger de flesta webbutiker?

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

Metaforer

Vad är en metafor?

Inom litteraturen: ”Min ros, jag älskar dig!” Inom interaktionsdesign: konceptuella metaforer

Definition

Mappning mellan två kognitiva domäner, en källdomän och en måldomän

Metafor Måldomän Källdomän

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.

Problem med metaforer i användargränssnitt

Gammal källdomän

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

Aktiverar olämplig bakgrundskunskap i användarens mentala modell

Hjälper inte användaren att hitta tjänster som är datorspecifika

• Hur gör man en sökning i en

bokhylla?

Riskerar att bryta konventioner och kulturella regler

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.

Begränsar fantasin hos designers att komma på nya konceptuella modeller

Skrivbordsmetaforen

är nästan 40 år gammal!

... men ändå så kommer användargränssnitt förmodligen

bygga på metaforer för en lång tid framöver.

Ö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?

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

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?

Övning

• Utvärdering av metafor till en delad reseplaneringstjänst

• Metafor: en tryckt resebroschyr

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.

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.

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.

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

• Ja.

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.

Konceptuell design i projektet

• Systemets övergripande struktur • Systemets konceptuella modell • Metaforer • 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.

Tips från coachen

• Börja med en djupdykning i datan från användarstudien. Försök leva dig in i deras 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.