Kognition & Konceptuell design...konceptuella modell •Användaren kan använda redan existerande...
Transcript of Kognition & Konceptuell design...konceptuella modell •Användaren kan använda redan existerande...
![Page 1: Kognition & Konceptuell design...konceptuella modell •Användaren kan använda redan existerande mentala modeller från interaktion med vattenkranar, handtorkar etc. •Den är transparent](https://reader033.fdocuments.net/reader033/viewer/2022051207/602ba94f506a821b57154eda/html5/thumbnails/1.jpg)
Kognition & Konceptuell design
![Page 2: Kognition & Konceptuell design...konceptuella modell •Användaren kan använda redan existerande mentala modeller från interaktion med vattenkranar, handtorkar etc. •Den är transparent](https://reader033.fdocuments.net/reader033/viewer/2022051207/602ba94f506a821b57154eda/html5/thumbnails/2.jpg)
Kognition
![Page 3: Kognition & Konceptuell design...konceptuella modell •Användaren kan använda redan existerande mentala modeller från interaktion med vattenkranar, handtorkar etc. •Den är transparent](https://reader033.fdocuments.net/reader033/viewer/2022051207/602ba94f506a821b57154eda/html5/thumbnails/3.jpg)
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
![Page 4: Kognition & Konceptuell design...konceptuella modell •Användaren kan använda redan existerande mentala modeller från interaktion med vattenkranar, handtorkar etc. •Den är transparent](https://reader033.fdocuments.net/reader033/viewer/2022051207/602ba94f506a821b57154eda/html5/thumbnails/4.jpg)
• Termen kognition kommer från det latinska ordet cognitare (att tänka)
• Kognitionsvetenskap och kognitivpsykologi syftar till att beskriva ochförstå hur tänkande går till.
![Page 5: Kognition & Konceptuell design...konceptuella modell •Användaren kan använda redan existerande mentala modeller från interaktion med vattenkranar, handtorkar etc. •Den är transparent](https://reader033.fdocuments.net/reader033/viewer/2022051207/602ba94f506a821b57154eda/html5/thumbnails/5.jpg)
• Perception
• Minne
• Uppmärksamhet
• Lärande
• Läsa, tala och lyssna
• Problemlösning
• Beslutsfattande
Våra hjärnor är fantastiska!
![Page 6: Kognition & Konceptuell design...konceptuella modell •Användaren kan använda redan existerande mentala modeller från interaktion med vattenkranar, handtorkar etc. •Den är transparent](https://reader033.fdocuments.net/reader033/viewer/2022051207/602ba94f506a821b57154eda/html5/thumbnails/6.jpg)
Men vi har samtidigt vissa kognitivabegränsningar…
• Vi är “anpassade för savannen”
• Maskiner är något relativt nytt i våromgivning
• Om för stor mental belastning:
– Vi hinner inte med
– Vi gör fel
![Page 7: Kognition & Konceptuell design...konceptuella modell •Användaren kan använda redan existerande mentala modeller från interaktion med vattenkranar, handtorkar etc. •Den är transparent](https://reader033.fdocuments.net/reader033/viewer/2022051207/602ba94f506a821b57154eda/html5/thumbnails/7.jpg)
![Page 8: Kognition & Konceptuell design...konceptuella modell •Användaren kan använda redan existerande mentala modeller från interaktion med vattenkranar, handtorkar etc. •Den är transparent](https://reader033.fdocuments.net/reader033/viewer/2022051207/602ba94f506a821b57154eda/html5/thumbnails/8.jpg)
Perception
Det vi uppfattar är ofta konstruerat av hjärnan själv! Vi är meningssökande.
![Page 9: Kognition & Konceptuell design...konceptuella modell •Användaren kan använda redan existerande mentala modeller från interaktion med vattenkranar, handtorkar etc. •Den är transparent](https://reader033.fdocuments.net/reader033/viewer/2022051207/602ba94f506a821b57154eda/html5/thumbnails/9.jpg)
Hur hjärnan organiserar visuell information: Gestaltlagarna
![Page 10: Kognition & Konceptuell design...konceptuella modell •Användaren kan använda redan existerande mentala modeller från interaktion med vattenkranar, handtorkar etc. •Den är transparent](https://reader033.fdocuments.net/reader033/viewer/2022051207/602ba94f506a821b57154eda/html5/thumbnails/10.jpg)
![Page 11: Kognition & Konceptuell design...konceptuella modell •Användaren kan använda redan existerande mentala modeller från interaktion med vattenkranar, handtorkar etc. •Den är transparent](https://reader033.fdocuments.net/reader033/viewer/2022051207/602ba94f506a821b57154eda/html5/thumbnails/11.jpg)
Multimodal perception
• Våra sinnen utvecklades inte isolerade frånvarandra
• De samarbetar för att göra det lättare för ossatt uppfatta omvärlden
![Page 12: Kognition & Konceptuell design...konceptuella modell •Användaren kan använda redan existerande mentala modeller från interaktion med vattenkranar, handtorkar etc. •Den är transparent](https://reader033.fdocuments.net/reader033/viewer/2022051207/602ba94f506a821b57154eda/html5/thumbnails/12.jpg)
Experiment: multimodal perception
http://www.youtube.com/watch?v=jtsfidRq2tw
![Page 13: Kognition & Konceptuell design...konceptuella modell •Användaren kan använda redan existerande mentala modeller från interaktion med vattenkranar, handtorkar etc. •Den är transparent](https://reader033.fdocuments.net/reader033/viewer/2022051207/602ba94f506a821b57154eda/html5/thumbnails/13.jpg)
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
![Page 14: Kognition & Konceptuell design...konceptuella modell •Användaren kan använda redan existerande mentala modeller från interaktion med vattenkranar, handtorkar etc. •Den är transparent](https://reader033.fdocuments.net/reader033/viewer/2022051207/602ba94f506a821b57154eda/html5/thumbnails/14.jpg)
![Page 15: Kognition & Konceptuell design...konceptuella modell •Användaren kan använda redan existerande mentala modeller från interaktion med vattenkranar, handtorkar etc. •Den är transparent](https://reader033.fdocuments.net/reader033/viewer/2022051207/602ba94f506a821b57154eda/html5/thumbnails/15.jpg)
Experiment: korttidsminnet
![Page 16: Kognition & Konceptuell design...konceptuella modell •Användaren kan använda redan existerande mentala modeller från interaktion med vattenkranar, handtorkar etc. •Den är transparent](https://reader033.fdocuments.net/reader033/viewer/2022051207/602ba94f506a821b57154eda/html5/thumbnails/16.jpg)
Korttidsminnet
• Begränsningar
- Antal enheter (7±2)
- Tid (20-30 s)
• Glömska
- Nya enheter aktiveras
- Enheter vars aktivitet inte förnyassjunker undan.
Kursboken sid 367
![Page 17: Kognition & Konceptuell design...konceptuella modell •Användaren kan använda redan existerande mentala modeller från interaktion med vattenkranar, handtorkar etc. •Den är transparent](https://reader033.fdocuments.net/reader033/viewer/2022051207/602ba94f506a821b57154eda/html5/thumbnails/17.jpg)
Långtidsminnet
• Obegränsat
• Glömska
- Minnen bleknar
- Bortträngning
- Interferens: gamla och nya minnen stör varandra
![Page 18: Kognition & Konceptuell design...konceptuella modell •Användaren kan använda redan existerande mentala modeller från interaktion med vattenkranar, handtorkar etc. •Den är transparent](https://reader033.fdocuments.net/reader033/viewer/2022051207/602ba94f506a821b57154eda/html5/thumbnails/18.jpg)
![Page 20: Kognition & Konceptuell design...konceptuella modell •Användaren kan använda redan existerande mentala modeller från interaktion med vattenkranar, handtorkar etc. •Den är transparent](https://reader033.fdocuments.net/reader033/viewer/2022051207/602ba94f506a821b57154eda/html5/thumbnails/20.jpg)
Uppmärksamhet
• Selektiv uppmärksamhet
– Fokuserad på en uppgift i taget
– Som ljuskäglan från en
ficklampa, ”perceptuellt tunnelseende”
![Page 21: Kognition & Konceptuell design...konceptuella modell •Användaren kan använda redan existerande mentala modeller från interaktion med vattenkranar, handtorkar etc. •Den är transparent](https://reader033.fdocuments.net/reader033/viewer/2022051207/602ba94f506a821b57154eda/html5/thumbnails/21.jpg)
• Delad uppmärksamhet Flera uppgifter samtidigt
Cocktailpartyfenomenet
Uppmärksamhet
Bla bla blaRobert bla
bla bla
Hmm?
![Page 22: Kognition & Konceptuell design...konceptuella modell •Användaren kan använda redan existerande mentala modeller från interaktion med vattenkranar, handtorkar etc. •Den är transparent](https://reader033.fdocuments.net/reader033/viewer/2022051207/602ba94f506a821b57154eda/html5/thumbnails/22.jpg)
Mentala modeller
![Page 23: Kognition & Konceptuell design...konceptuella modell •Användaren kan använda redan existerande mentala modeller från interaktion med vattenkranar, handtorkar etc. •Den är transparent](https://reader033.fdocuments.net/reader033/viewer/2022051207/602ba94f506a821b57154eda/html5/thumbnails/23.jpg)
Mentala modeller
• Interna konstruktioner av det som manipuleras i den externa världen, så att man kan göra förutsägelser och slutledningar.
![Page 24: Kognition & Konceptuell design...konceptuella modell •Användaren kan använda redan existerande mentala modeller från interaktion med vattenkranar, handtorkar etc. •Den är transparent](https://reader033.fdocuments.net/reader033/viewer/2022051207/602ba94f506a821b57154eda/html5/thumbnails/24.jpg)
Experiment: hur fungerar en växellåda?
![Page 25: Kognition & Konceptuell design...konceptuella modell •Användaren kan använda redan existerande mentala modeller från interaktion med vattenkranar, handtorkar etc. •Den är transparent](https://reader033.fdocuments.net/reader033/viewer/2022051207/602ba94f506a821b57154eda/html5/thumbnails/25.jpg)
![Page 26: Kognition & Konceptuell design...konceptuella modell •Användaren kan använda redan existerande mentala modeller från interaktion med vattenkranar, handtorkar etc. •Den är transparent](https://reader033.fdocuments.net/reader033/viewer/2022051207/602ba94f506a821b57154eda/html5/thumbnails/26.jpg)
Vi låter ofta felaktiga mentala modeller vägleda vårt beteende
![Page 27: Kognition & Konceptuell design...konceptuella modell •Användaren kan använda redan existerande mentala modeller från interaktion med vattenkranar, handtorkar etc. •Den är transparent](https://reader033.fdocuments.net/reader033/viewer/2022051207/602ba94f506a821b57154eda/html5/thumbnails/27.jpg)
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
![Page 28: Kognition & Konceptuell design...konceptuella modell •Användaren kan använda redan existerande mentala modeller från interaktion med vattenkranar, handtorkar etc. •Den är transparent](https://reader033.fdocuments.net/reader033/viewer/2022051207/602ba94f506a821b57154eda/html5/thumbnails/28.jpg)
Donald Normans designprinciper
![Page 29: Kognition & Konceptuell design...konceptuella modell •Användaren kan använda redan existerande mentala modeller från interaktion med vattenkranar, handtorkar etc. •Den är transparent](https://reader033.fdocuments.net/reader033/viewer/2022051207/602ba94f506a821b57154eda/html5/thumbnails/29.jpg)
Donald Normans designprinciper
![Page 30: Kognition & Konceptuell design...konceptuella modell •Användaren kan använda redan existerande mentala modeller från interaktion med vattenkranar, handtorkar etc. •Den är transparent](https://reader033.fdocuments.net/reader033/viewer/2022051207/602ba94f506a821b57154eda/html5/thumbnails/30.jpg)
Donald Normans designprinciper
–Affordance
– Synlighet
–Mappning
– Feedback
![Page 31: Kognition & Konceptuell design...konceptuella modell •Användaren kan använda redan existerande mentala modeller från interaktion med vattenkranar, handtorkar etc. •Den är transparent](https://reader033.fdocuments.net/reader033/viewer/2022051207/602ba94f506a821b57154eda/html5/thumbnails/31.jpg)
Affordance
![Page 32: Kognition & Konceptuell design...konceptuella modell •Användaren kan använda redan existerande mentala modeller från interaktion med vattenkranar, handtorkar etc. •Den är transparent](https://reader033.fdocuments.net/reader033/viewer/2022051207/602ba94f506a821b57154eda/html5/thumbnails/32.jpg)
![Page 33: Kognition & Konceptuell design...konceptuella modell •Användaren kan använda redan existerande mentala modeller från interaktion med vattenkranar, handtorkar etc. •Den är transparent](https://reader033.fdocuments.net/reader033/viewer/2022051207/602ba94f506a821b57154eda/html5/thumbnails/33.jpg)
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.
![Page 34: Kognition & Konceptuell design...konceptuella modell •Användaren kan använda redan existerande mentala modeller från interaktion med vattenkranar, handtorkar etc. •Den är transparent](https://reader033.fdocuments.net/reader033/viewer/2022051207/602ba94f506a821b57154eda/html5/thumbnails/34.jpg)
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
![Page 35: Kognition & Konceptuell design...konceptuella modell •Användaren kan använda redan existerande mentala modeller från interaktion med vattenkranar, handtorkar etc. •Den är transparent](https://reader033.fdocuments.net/reader033/viewer/2022051207/602ba94f506a821b57154eda/html5/thumbnails/35.jpg)
![Page 36: Kognition & Konceptuell design...konceptuella modell •Användaren kan använda redan existerande mentala modeller från interaktion med vattenkranar, handtorkar etc. •Den är transparent](https://reader033.fdocuments.net/reader033/viewer/2022051207/602ba94f506a821b57154eda/html5/thumbnails/36.jpg)
Tidsinställning på mikrovågsugn
![Page 37: Kognition & Konceptuell design...konceptuella modell •Användaren kan använda redan existerande mentala modeller från interaktion med vattenkranar, handtorkar etc. •Den är transparent](https://reader033.fdocuments.net/reader033/viewer/2022051207/602ba94f506a821b57154eda/html5/thumbnails/37.jpg)
![Page 38: Kognition & Konceptuell design...konceptuella modell •Användaren kan använda redan existerande mentala modeller från interaktion med vattenkranar, handtorkar etc. •Den är transparent](https://reader033.fdocuments.net/reader033/viewer/2022051207/602ba94f506a821b57154eda/html5/thumbnails/38.jpg)
Synlighet
![Page 39: Kognition & Konceptuell design...konceptuella modell •Användaren kan använda redan existerande mentala modeller från interaktion med vattenkranar, handtorkar etc. •Den är transparent](https://reader033.fdocuments.net/reader033/viewer/2022051207/602ba94f506a821b57154eda/html5/thumbnails/39.jpg)
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
![Page 40: Kognition & Konceptuell design...konceptuella modell •Användaren kan använda redan existerande mentala modeller från interaktion med vattenkranar, handtorkar etc. •Den är transparent](https://reader033.fdocuments.net/reader033/viewer/2022051207/602ba94f506a821b57154eda/html5/thumbnails/40.jpg)
Vanliga problem
• För mycket (ovidkommande) saker syns
• För få saker syns
![Page 41: Kognition & Konceptuell design...konceptuella modell •Användaren kan använda redan existerande mentala modeller från interaktion med vattenkranar, handtorkar etc. •Den är transparent](https://reader033.fdocuments.net/reader033/viewer/2022051207/602ba94f506a821b57154eda/html5/thumbnails/41.jpg)
Riktlinjer
• ”Kill your darlings!”
• En funktion – en kontroll
• Utnyttja riktlinjer för layout, färg, ikoner, text, gruppering, etc.
![Page 42: Kognition & Konceptuell design...konceptuella modell •Användaren kan använda redan existerande mentala modeller från interaktion med vattenkranar, handtorkar etc. •Den är transparent](https://reader033.fdocuments.net/reader033/viewer/2022051207/602ba94f506a821b57154eda/html5/thumbnails/42.jpg)
Synlighet i digitalkamera
Avancerade funktioner ”göms” i ett menysystem
![Page 43: Kognition & Konceptuell design...konceptuella modell •Användaren kan använda redan existerande mentala modeller från interaktion med vattenkranar, handtorkar etc. •Den är transparent](https://reader033.fdocuments.net/reader033/viewer/2022051207/602ba94f506a821b57154eda/html5/thumbnails/43.jpg)
Mappning
![Page 44: Kognition & Konceptuell design...konceptuella modell •Användaren kan använda redan existerande mentala modeller från interaktion med vattenkranar, handtorkar etc. •Den är transparent](https://reader033.fdocuments.net/reader033/viewer/2022051207/602ba94f506a821b57154eda/html5/thumbnails/44.jpg)
Typisk korridorkökspis
![Page 45: Kognition & Konceptuell design...konceptuella modell •Användaren kan använda redan existerande mentala modeller från interaktion med vattenkranar, handtorkar etc. •Den är transparent](https://reader033.fdocuments.net/reader033/viewer/2022051207/602ba94f506a821b57154eda/html5/thumbnails/45.jpg)
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.
![Page 46: Kognition & Konceptuell design...konceptuella modell •Användaren kan använda redan existerande mentala modeller från interaktion med vattenkranar, handtorkar etc. •Den är transparent](https://reader033.fdocuments.net/reader033/viewer/2022051207/602ba94f506a821b57154eda/html5/thumbnails/46.jpg)
Naturlig mappning – fysiska analogier
![Page 47: Kognition & Konceptuell design...konceptuella modell •Användaren kan använda redan existerande mentala modeller från interaktion med vattenkranar, handtorkar etc. •Den är transparent](https://reader033.fdocuments.net/reader033/viewer/2022051207/602ba94f506a821b57154eda/html5/thumbnails/47.jpg)
Naturlig mappning – kulturella standarder
![Page 48: Kognition & Konceptuell design...konceptuella modell •Användaren kan använda redan existerande mentala modeller från interaktion med vattenkranar, handtorkar etc. •Den är transparent](https://reader033.fdocuments.net/reader033/viewer/2022051207/602ba94f506a821b57154eda/html5/thumbnails/48.jpg)
Naturlig mappning – biologiska förhållanden
![Page 49: Kognition & Konceptuell design...konceptuella modell •Användaren kan använda redan existerande mentala modeller från interaktion med vattenkranar, handtorkar etc. •Den är transparent](https://reader033.fdocuments.net/reader033/viewer/2022051207/602ba94f506a821b57154eda/html5/thumbnails/49.jpg)
![Page 50: Kognition & Konceptuell design...konceptuella modell •Användaren kan använda redan existerande mentala modeller från interaktion med vattenkranar, handtorkar etc. •Den är transparent](https://reader033.fdocuments.net/reader033/viewer/2022051207/602ba94f506a821b57154eda/html5/thumbnails/50.jpg)
Feedback
![Page 51: Kognition & Konceptuell design...konceptuella modell •Användaren kan använda redan existerande mentala modeller från interaktion med vattenkranar, handtorkar etc. •Den är transparent](https://reader033.fdocuments.net/reader033/viewer/2022051207/602ba94f506a821b57154eda/html5/thumbnails/51.jpg)
![Page 52: Kognition & Konceptuell design...konceptuella modell •Användaren kan använda redan existerande mentala modeller från interaktion med vattenkranar, handtorkar etc. •Den är transparent](https://reader033.fdocuments.net/reader033/viewer/2022051207/602ba94f506a821b57154eda/html5/thumbnails/52.jpg)
Feedback
Att återkoppla information till användaren om vilka handlingar som gjorts och vad resultatet blivit.
![Page 53: Kognition & Konceptuell design...konceptuella modell •Användaren kan använda redan existerande mentala modeller från interaktion med vattenkranar, handtorkar etc. •Den är transparent](https://reader033.fdocuments.net/reader033/viewer/2022051207/602ba94f506a821b57154eda/html5/thumbnails/53.jpg)
Feedback vid filborttagning
![Page 54: Kognition & Konceptuell design...konceptuella modell •Användaren kan använda redan existerande mentala modeller från interaktion med vattenkranar, handtorkar etc. •Den är transparent](https://reader033.fdocuments.net/reader033/viewer/2022051207/602ba94f506a821b57154eda/html5/thumbnails/54.jpg)
Ljudfeedback
”Critical stop” ”Notify”
![Page 55: Kognition & Konceptuell design...konceptuella modell •Användaren kan använda redan existerande mentala modeller från interaktion med vattenkranar, handtorkar etc. •Den är transparent](https://reader033.fdocuments.net/reader033/viewer/2022051207/602ba94f506a821b57154eda/html5/thumbnails/55.jpg)
Konceptuell design
![Page 56: Kognition & Konceptuell design...konceptuella modell •Användaren kan använda redan existerande mentala modeller från interaktion med vattenkranar, handtorkar etc. •Den är transparent](https://reader033.fdocuments.net/reader033/viewer/2022051207/602ba94f506a821b57154eda/html5/thumbnails/56.jpg)
Boken
• Kap 2.1-2.4
• Kap 11.3
![Page 57: Kognition & Konceptuell design...konceptuella modell •Användaren kan använda redan existerande mentala modeller från interaktion med vattenkranar, handtorkar etc. •Den är transparent](https://reader033.fdocuments.net/reader033/viewer/2022051207/602ba94f506a821b57154eda/html5/thumbnails/57.jpg)
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
![Page 58: Kognition & Konceptuell design...konceptuella modell •Användaren kan använda redan existerande mentala modeller från interaktion med vattenkranar, handtorkar etc. •Den är transparent](https://reader033.fdocuments.net/reader033/viewer/2022051207/602ba94f506a821b57154eda/html5/thumbnails/58.jpg)
Konceptuella modeller
![Page 59: Kognition & Konceptuell design...konceptuella modell •Användaren kan använda redan existerande mentala modeller från interaktion med vattenkranar, handtorkar etc. •Den är transparent](https://reader033.fdocuments.net/reader033/viewer/2022051207/602ba94f506a821b57154eda/html5/thumbnails/59.jpg)
Konceptuell modell
• ”A high-level description of how a system is organized and operates”
• ”Enables designers to straighten out theirthinking before they start laying our theirwidgets”
![Page 60: Kognition & Konceptuell design...konceptuella modell •Användaren kan använda redan existerande mentala modeller från interaktion med vattenkranar, handtorkar etc. •Den är transparent](https://reader033.fdocuments.net/reader033/viewer/2022051207/602ba94f506a821b57154eda/html5/thumbnails/60.jpg)
Mentala och konceptuella modeller
Designernskonceptuella
modell
System
Användarensmentalamodell
Användar-gränssnitt
![Page 61: Kognition & Konceptuell design...konceptuella modell •Användaren kan använda redan existerande mentala modeller från interaktion med vattenkranar, handtorkar etc. •Den är transparent](https://reader033.fdocuments.net/reader033/viewer/2022051207/602ba94f506a821b57154eda/html5/thumbnails/61.jpg)
Fallstudie: SJs tågdörrar
![Page 62: Kognition & Konceptuell design...konceptuella modell •Användaren kan använda redan existerande mentala modeller från interaktion med vattenkranar, handtorkar etc. •Den är transparent](https://reader033.fdocuments.net/reader033/viewer/2022051207/602ba94f506a821b57154eda/html5/thumbnails/62.jpg)
Tågdörrenöppnas med en fotocell…
Tågdörr
Designerns konceptuella modell
![Page 63: Kognition & Konceptuell design...konceptuella modell •Användaren kan använda redan existerande mentala modeller från interaktion med vattenkranar, handtorkar etc. •Den är transparent](https://reader033.fdocuments.net/reader033/viewer/2022051207/602ba94f506a821b57154eda/html5/thumbnails/63.jpg)
Designerns konceptuella modell
...men det ärbättre att folk tror att de skatrycka på en
knapp i stället!
Tågdörr
Användar-gränssnitt
![Page 64: Kognition & Konceptuell design...konceptuella modell •Användaren kan använda redan existerande mentala modeller från interaktion med vattenkranar, handtorkar etc. •Den är transparent](https://reader033.fdocuments.net/reader033/viewer/2022051207/602ba94f506a821b57154eda/html5/thumbnails/64.jpg)
Användarens mentala modell
Tågdörr
Användar-gränssnitt
En knapp! Jag trycker på den såöppnas dörren!
![Page 65: Kognition & Konceptuell design...konceptuella modell •Användaren kan använda redan existerande mentala modeller från interaktion med vattenkranar, handtorkar etc. •Den är transparent](https://reader033.fdocuments.net/reader033/viewer/2022051207/602ba94f506a821b57154eda/html5/thumbnails/65.jpg)
Användarens mentala modell
Tågdörr
Användar-gränssnitt
En knapp! Jag trycker på den såöppnas dörren!
![Page 66: Kognition & Konceptuell design...konceptuella modell •Användaren kan använda redan existerande mentala modeller från interaktion med vattenkranar, handtorkar etc. •Den är transparent](https://reader033.fdocuments.net/reader033/viewer/2022051207/602ba94f506a821b57154eda/html5/thumbnails/66.jpg)
Ibland reagerar inte fotocellen…
Tågdörr
Användar-gränssnitt
Huh? Jag trycker men
inget händer? Gör jag fel? Ärdörren trasig?
![Page 67: Kognition & Konceptuell design...konceptuella modell •Användaren kan använda redan existerande mentala modeller från interaktion med vattenkranar, handtorkar etc. •Den är transparent](https://reader033.fdocuments.net/reader033/viewer/2022051207/602ba94f506a821b57154eda/html5/thumbnails/67.jpg)
Diskussion: Vad hade varit en bättrekonceptuell modell för tågdörren?
![Page 68: Kognition & Konceptuell design...konceptuella modell •Användaren kan använda redan existerande mentala modeller från interaktion med vattenkranar, handtorkar etc. •Den är transparent](https://reader033.fdocuments.net/reader033/viewer/2022051207/602ba94f506a821b57154eda/html5/thumbnails/68.jpg)
”Detta är en dörr som öppnasmed en handgest”
![Page 69: Kognition & Konceptuell design...konceptuella modell •Användaren kan använda redan existerande mentala modeller från interaktion med vattenkranar, handtorkar etc. •Den är transparent](https://reader033.fdocuments.net/reader033/viewer/2022051207/602ba94f506a821b57154eda/html5/thumbnails/69.jpg)
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)
![Page 70: Kognition & Konceptuell design...konceptuella modell •Användaren kan använda redan existerande mentala modeller från interaktion med vattenkranar, handtorkar etc. •Den är transparent](https://reader033.fdocuments.net/reader033/viewer/2022051207/602ba94f506a821b57154eda/html5/thumbnails/70.jpg)
Donald Normans kylskåp
Donald Norman, The Design of
Everyday Things, sid. 13-17
![Page 71: Kognition & Konceptuell design...konceptuella modell •Användaren kan använda redan existerande mentala modeller från interaktion med vattenkranar, handtorkar etc. •Den är transparent](https://reader033.fdocuments.net/reader033/viewer/2022051207/602ba94f506a821b57154eda/html5/thumbnails/71.jpg)
![Page 72: Kognition & Konceptuell design...konceptuella modell •Användaren kan använda redan existerande mentala modeller från interaktion med vattenkranar, handtorkar etc. •Den är transparent](https://reader033.fdocuments.net/reader033/viewer/2022051207/602ba94f506a821b57154eda/html5/thumbnails/72.jpg)
Vilken konceptuell modell erbjuderdetta användargränsnitt?
“Kylskåpet hartvå separata
kylsystem sombåda kan
kontrollerasmed var sitt
reglage.”
![Page 73: Kognition & Konceptuell design...konceptuella modell •Användaren kan använda redan existerande mentala modeller från interaktion med vattenkranar, handtorkar etc. •Den är transparent](https://reader033.fdocuments.net/reader033/viewer/2022051207/602ba94f506a821b57154eda/html5/thumbnails/73.jpg)
Användarens mentala modell
![Page 74: Kognition & Konceptuell design...konceptuella modell •Användaren kan använda redan existerande mentala modeller från interaktion med vattenkranar, handtorkar etc. •Den är transparent](https://reader033.fdocuments.net/reader033/viewer/2022051207/602ba94f506a821b57154eda/html5/thumbnails/74.jpg)
Designerns konceptuella modell
![Page 75: Kognition & Konceptuell design...konceptuella modell •Användaren kan använda redan existerande mentala modeller från interaktion med vattenkranar, handtorkar etc. •Den är transparent](https://reader033.fdocuments.net/reader033/viewer/2022051207/602ba94f506a821b57154eda/html5/thumbnails/75.jpg)
En mycket välkändkonceptuella modell
“Att använda en dator är som att arbeta på kontor.”
![Page 76: Kognition & Konceptuell design...konceptuella modell •Användaren kan använda redan existerande mentala modeller från interaktion med vattenkranar, handtorkar etc. •Den är transparent](https://reader033.fdocuments.net/reader033/viewer/2022051207/602ba94f506a821b57154eda/html5/thumbnails/76.jpg)
Microsoft Bob: En alternativ konceptuell modell
http://www.youtube.com/watch?v=xflQN-csX8M
![Page 77: Kognition & Konceptuell design...konceptuella modell •Användaren kan använda redan existerande mentala modeller från interaktion med vattenkranar, handtorkar etc. •Den är transparent](https://reader033.fdocuments.net/reader033/viewer/2022051207/602ba94f506a821b57154eda/html5/thumbnails/77.jpg)
Nintendo Wii
• En konceptuell modell som bygger på TV-konceptet
![Page 78: Kognition & Konceptuell design...konceptuella modell •Användaren kan använda redan existerande mentala modeller från interaktion med vattenkranar, handtorkar etc. •Den är transparent](https://reader033.fdocuments.net/reader033/viewer/2022051207/602ba94f506a821b57154eda/html5/thumbnails/78.jpg)
Diskussion
• På vilken konceptuell modell bygger de flestawebbutiker?
![Page 79: Kognition & Konceptuell design...konceptuella modell •Användaren kan använda redan existerande mentala modeller från interaktion med vattenkranar, handtorkar etc. •Den är transparent](https://reader033.fdocuments.net/reader033/viewer/2022051207/602ba94f506a821b57154eda/html5/thumbnails/79.jpg)
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
![Page 80: Kognition & Konceptuell design...konceptuella modell •Användaren kan använda redan existerande mentala modeller från interaktion med vattenkranar, handtorkar etc. •Den är transparent](https://reader033.fdocuments.net/reader033/viewer/2022051207/602ba94f506a821b57154eda/html5/thumbnails/80.jpg)
Metaforer
![Page 81: Kognition & Konceptuell design...konceptuella modell •Användaren kan använda redan existerande mentala modeller från interaktion med vattenkranar, handtorkar etc. •Den är transparent](https://reader033.fdocuments.net/reader033/viewer/2022051207/602ba94f506a821b57154eda/html5/thumbnails/81.jpg)
![Page 82: Kognition & Konceptuell design...konceptuella modell •Användaren kan använda redan existerande mentala modeller från interaktion med vattenkranar, handtorkar etc. •Den är transparent](https://reader033.fdocuments.net/reader033/viewer/2022051207/602ba94f506a821b57154eda/html5/thumbnails/82.jpg)
Vad är en metafor?
Inom litteraturen: ”Min ros, jag älskar dig!”
Inom interaktionsdesing: konceptuella metaforer
![Page 83: Kognition & Konceptuell design...konceptuella modell •Användaren kan använda redan existerande mentala modeller från interaktion med vattenkranar, handtorkar etc. •Den är transparent](https://reader033.fdocuments.net/reader033/viewer/2022051207/602ba94f506a821b57154eda/html5/thumbnails/83.jpg)
Definition
Mappning mellan två kognitiva domäner, en källdomän och en måldomän
Metafor MåldomänKälldomän
![Page 84: Kognition & Konceptuell design...konceptuella modell •Användaren kan använda redan existerande mentala modeller från interaktion med vattenkranar, handtorkar etc. •Den är transparent](https://reader033.fdocuments.net/reader033/viewer/2022051207/602ba94f506a821b57154eda/html5/thumbnails/84.jpg)
Time Machine (Mac OS X)
![Page 85: Kognition & Konceptuell design...konceptuella modell •Användaren kan använda redan existerande mentala modeller från interaktion med vattenkranar, handtorkar etc. •Den är transparent](https://reader033.fdocuments.net/reader033/viewer/2022051207/602ba94f506a821b57154eda/html5/thumbnails/85.jpg)
iMoodJournal (iOS)
![Page 86: Kognition & Konceptuell design...konceptuella modell •Användaren kan använda redan existerande mentala modeller från interaktion med vattenkranar, handtorkar etc. •Den är transparent](https://reader033.fdocuments.net/reader033/viewer/2022051207/602ba94f506a821b57154eda/html5/thumbnails/86.jpg)
Varför metaforer?
Används i användargränssnitt för attunderlätta för användaren att förståmåldomänen.
Kunskap, erfarenheter och begrepp frånkälldomänen används för att organiserainnehållet i måldomänen.
En väl utformad metafor erbjuder användarenen god konceptuell modell.
![Page 87: Kognition & Konceptuell design...konceptuella modell •Användaren kan använda redan existerande mentala modeller från interaktion med vattenkranar, handtorkar etc. •Den är transparent](https://reader033.fdocuments.net/reader033/viewer/2022051207/602ba94f506a821b57154eda/html5/thumbnails/87.jpg)
Problem med metaforer i användargränssnitt
![Page 88: Kognition & Konceptuell design...konceptuella modell •Användaren kan använda redan existerande mentala modeller från interaktion med vattenkranar, handtorkar etc. •Den är transparent](https://reader033.fdocuments.net/reader033/viewer/2022051207/602ba94f506a821b57154eda/html5/thumbnails/88.jpg)
Gammal källdomän
En metafor som bygger på en gammal källdomän aktiverar lite eller ingen förkunskap hos yngre användare
![Page 89: Kognition & Konceptuell design...konceptuella modell •Användaren kan använda redan existerande mentala modeller från interaktion med vattenkranar, handtorkar etc. •Den är transparent](https://reader033.fdocuments.net/reader033/viewer/2022051207/602ba94f506a821b57154eda/html5/thumbnails/89.jpg)
Aktiverar olämplig bakgrundskunskap i användarens mentala modell
![Page 90: Kognition & Konceptuell design...konceptuella modell •Användaren kan använda redan existerande mentala modeller från interaktion med vattenkranar, handtorkar etc. •Den är transparent](https://reader033.fdocuments.net/reader033/viewer/2022051207/602ba94f506a821b57154eda/html5/thumbnails/90.jpg)
Hjälper inte användaren att hittatjänster som är datorspecifika
• Hur gör man en sökning i en bokhylla?
![Page 91: Kognition & Konceptuell design...konceptuella modell •Användaren kan använda redan existerande mentala modeller från interaktion med vattenkranar, handtorkar etc. •Den är transparent](https://reader033.fdocuments.net/reader033/viewer/2022051207/602ba94f506a821b57154eda/html5/thumbnails/91.jpg)
Riskerar att bryta konventioner och kulturella regler
![Page 92: Kognition & Konceptuell design...konceptuella modell •Användaren kan använda redan existerande mentala modeller från interaktion med vattenkranar, handtorkar etc. •Den är transparent](https://reader033.fdocuments.net/reader033/viewer/2022051207/602ba94f506a821b57154eda/html5/thumbnails/92.jpg)
De lider av den fysiskavärldens begränsningar
• Vad händer när bokhyllan blir full?
• Det går snabbare att hitta rätt bok med en lista.
![Page 93: Kognition & Konceptuell design...konceptuella modell •Användaren kan använda redan existerande mentala modeller från interaktion med vattenkranar, handtorkar etc. •Den är transparent](https://reader033.fdocuments.net/reader033/viewer/2022051207/602ba94f506a821b57154eda/html5/thumbnails/93.jpg)
Begränsar fantasin hos designers attkomma på nya konceptuella modeller
Skrivbordsmetaforen är nästan 40 år gammal!
![Page 94: Kognition & Konceptuell design...konceptuella modell •Användaren kan använda redan existerande mentala modeller från interaktion med vattenkranar, handtorkar etc. •Den är transparent](https://reader033.fdocuments.net/reader033/viewer/2022051207/602ba94f506a821b57154eda/html5/thumbnails/94.jpg)
... men ändå så kommeranvändargränssnitt förmodligen
bygga på metaforer för en lång tidframöver.
![Page 95: Kognition & Konceptuell design...konceptuella modell •Användaren kan använda redan existerande mentala modeller från interaktion med vattenkranar, handtorkar etc. •Den är transparent](https://reader033.fdocuments.net/reader033/viewer/2022051207/602ba94f506a821b57154eda/html5/thumbnails/95.jpg)
Ö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?
![Page 96: Kognition & Konceptuell design...konceptuella modell •Användaren kan använda redan existerande mentala modeller från interaktion med vattenkranar, handtorkar etc. •Den är transparent](https://reader033.fdocuments.net/reader033/viewer/2022051207/602ba94f506a821b57154eda/html5/thumbnails/96.jpg)
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
![Page 97: Kognition & Konceptuell design...konceptuella modell •Användaren kan använda redan existerande mentala modeller från interaktion med vattenkranar, handtorkar etc. •Den är transparent](https://reader033.fdocuments.net/reader033/viewer/2022051207/602ba94f506a821b57154eda/html5/thumbnails/97.jpg)
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?
![Page 98: Kognition & Konceptuell design...konceptuella modell •Användaren kan använda redan existerande mentala modeller från interaktion med vattenkranar, handtorkar etc. •Den är transparent](https://reader033.fdocuments.net/reader033/viewer/2022051207/602ba94f506a821b57154eda/html5/thumbnails/98.jpg)
Övning
• Utvärdering av metafor till en delad reseplaneringstjänst
• Metafor: en tryckt resebroschyr
![Page 99: Kognition & Konceptuell design...konceptuella modell •Användaren kan använda redan existerande mentala modeller från interaktion med vattenkranar, handtorkar etc. •Den är transparent](https://reader033.fdocuments.net/reader033/viewer/2022051207/602ba94f506a821b57154eda/html5/thumbnails/99.jpg)
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.
![Page 100: Kognition & Konceptuell design...konceptuella modell •Användaren kan använda redan existerande mentala modeller från interaktion med vattenkranar, handtorkar etc. •Den är transparent](https://reader033.fdocuments.net/reader033/viewer/2022051207/602ba94f506a821b57154eda/html5/thumbnails/100.jpg)
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.
![Page 101: Kognition & Konceptuell design...konceptuella modell •Användaren kan använda redan existerande mentala modeller från interaktion med vattenkranar, handtorkar etc. •Den är transparent](https://reader033.fdocuments.net/reader033/viewer/2022051207/602ba94f506a821b57154eda/html5/thumbnails/101.jpg)
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.
![Page 102: Kognition & Konceptuell design...konceptuella modell •Användaren kan använda redan existerande mentala modeller från interaktion med vattenkranar, handtorkar etc. •Den är transparent](https://reader033.fdocuments.net/reader033/viewer/2022051207/602ba94f506a821b57154eda/html5/thumbnails/102.jpg)
4. Kommer din publik att förstå metaforen?
• Ja.
![Page 103: Kognition & Konceptuell design...konceptuella modell •Användaren kan använda redan existerande mentala modeller från interaktion med vattenkranar, handtorkar etc. •Den är transparent](https://reader033.fdocuments.net/reader033/viewer/2022051207/602ba94f506a821b57154eda/html5/thumbnails/103.jpg)
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.
![Page 104: Kognition & Konceptuell design...konceptuella modell •Användaren kan använda redan existerande mentala modeller från interaktion med vattenkranar, handtorkar etc. •Den är transparent](https://reader033.fdocuments.net/reader033/viewer/2022051207/602ba94f506a821b57154eda/html5/thumbnails/104.jpg)
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.
![Page 105: Kognition & Konceptuell design...konceptuella modell •Användaren kan använda redan existerande mentala modeller från interaktion med vattenkranar, handtorkar etc. •Den är transparent](https://reader033.fdocuments.net/reader033/viewer/2022051207/602ba94f506a821b57154eda/html5/thumbnails/105.jpg)
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!