Kognition & Konceptuell design. Kognition 9/17/2014

Relevanta dokument
Boken. Kap Kap 11.3

Kognition & Konceptuell design

Kognition crash course

Grundläggande teori för användargränssni3, del 1

Kognition & Konceptuell design

Tre kursblock. av användargränssnitt. Inledningsvis. Hittills. Dags att fylla på med det som saknas! Människa dator interaktion Del 1. 1.

Människans förmåga kognition. Fö5. Kursinnehåll. Kognition och e-hälsa. ETIF20 E-hälsa. MEN kanske extra viktigt om man riktar sig till en

förmågor är begränsade. Hur kan vi Ok, vi vet att människans kognitiva underlättar interaktionen?

Designkoncept och gränssnittsmetaforer

Kommandobaserad interaktion

Föreläsning 7: Kognition & perception

Interaktionsdesign. Användbarhet ISO Usability goals. Interaktionsdesign, grundkurs (7,5 HP) Sammanfattande föreläsning

Människa-Datorinteraktion

Interaktionsteknik. Föreläsning 6, Kognition perception. Översikt. Vad händer i medvetandet?

Föreläsning 6: Kognition och perception. Rogers et al. Kapitel 3

Efterlysning! Kognitiv design 1. Mitt mål för er med idag. Idag. Mål. Vad exakt är problemet?

Föreläsning 7: Kognition & perception

Föreläsning 7 Mentala modeller, metaforer och emotionell interaktion. Kapitel 5 (3) i Rogers et al.

Föreläsning 7 Handlande, metaforer och interaktionsstilar. Kapitel i Stone et al.

Föreläsning 7, Interak2on

Interaktionsdesign, grundkurs INTERAKTION 1

Kognition. Kognition, interaktion och användare. Överblick - kognition. Data-information-kunskap. Nivåer av kognition. Dä ä bar å åk.

Vad utmärker ett bra gränssnitt?

1. (3p) Inom MDI-området framhåller man att människor lär sig via metaforer. Hur menar man att detta går till?

Introduktion till människa datorinteraktion och interaktionsdesign

Boken. Kapitel 10. Kapitel 11. Kap Ej Kap 10.7, det tar vi senare Resten, läs själva

Kognitiv psykologi. Kognitiv psykologi. Kognitiv psykologi. Kognitiv psykologi. Kognitiv psykologi. Kognitiv psykologi

Interaktionsdesign och användbarhet Personas. Paper prototyping. » Metod för representation av användaren. » Metod för konceptutveckling

Design och Prototyping

Några av fenomenen kommer vi att titta/uppleva i helklass och andra kognitiva problem kommer ni att få bekanta er med gruppvis.

Kognitiv psykologi. Kognitiv psykologi. Kognitiv psykologi. Kognitiv psykologi. Kognitiv psykologi. Kognitiv psykologi

Interaktionsdesign (7,5 HP)

Boken. OBS! Konkret interaktion är inte bokens starka sida. OBS! Jag har skrivit fel kapitel i kursprogrammet Uppdaterad version kommer.

Barns lek och lärande i perspektivet av förskolans verksamhetsutveckling

DH2622 MDI-fk Introduktion till kursen & ämnet. MDI på KTH. Kursen i sitt sammanhang

Interaktionsdesign, grundkurs (7,5 HP)

Vad är en prototyp? En prototyp är en manifestation av ett designförslag som man kan interagera med på något sätt.

SUDOA vt-03 Föreläsningsdatum: MDI - fördjupning

Föreläsning 8, Design

Principer för interaktionsdesign

Förstå hjärnan, skapa bättre webbplatser

Några av fenomenen kommer vi att titta/uppleva i helklass och andra kognitiva problem kommer ni att få bekanta er med gruppvis.

Människan och Tekniken. Fö 3 Människan och tekniken. Perception. Visuell perception

Neural bas för kognition

Datainsamling. Daniel Bosk. data.tex :33:45Z danbos

Föreläsning i webbdesign. Interak*onsdesign. Rune Körnefors. Medieteknik Rune Körnefors rune.kornefors@lnu.se

Föreläsning 3: Mer om utvärdering, Inspektionsmetoder kan man utvärdera utan användare?

Vad är kognition? Kognition relation till förväntningar. Kognition, interaktion och användare. Översikt. Kognition

Föreläsning 3 Användare, uppgift och omgivning. Kapitel 3-4 i Stone et al.

Föreläsning 1: Interaktionsteknik, Introduktion. Att läsa: Kapitel 1-2 i Rogers et al.: Interaction design

IC1007 Människa-dator interaktion: Principer och Design 7,5 hp

Psykologi del 1 Christina von Dorrien Vice President Interaction Design & Usability. Perception. Psykologi - delar

Interaktionsdesign, grundkurs (7,5 HP)

Reflektioner kring designprocessen av Intellitic

Designmetodik. Systemering med användarfokus Malin Pongolini

Kognition, interaktion och användare. Översikt. Kognition. Henrik Artman. Introduktion till kognitionsvetenskap

Några av fenomenen kommer vi att titta/uppleva i helklass och andra kognitiva problem kommer ni att få bekanta er med gruppvis.

Interaktionsdesign, grundkurs (7,5 HP) Johanna Persson

Nya Medier. Gränssnitt, Interaktivitet och Digital kod

PROJEKTUPPGIFT MAM061. Hem

Förra gången. Kognitiv design 2. Mina mål för er idag. Idag. En illustra+on Kognition i huvudet och i världen

Introduktion till programmering

Grundläggande teori för användargränssnitt,del 2

Introduktion till kursen Människadatorinteraktion Maria Redström Patricija Jaksetic CR&T

Studiestrategier för dig som är visuell

Innehåll. Styrdon (ej i boken) Fitts lag (sidan ) Natural user interfaces. Kap 6.2.9, , Kap

Vad utmärker ett bra användargränssnitt?

Spel som interaktiva berättelser

Föreläsning 4, Användbarhet, prototyper

Alde Värmesystem. Författare: Lynn Wallander E-post: Datum:

Föreläsning 9: Gränssnitt och webbdesign

Projekt: Utveckling av ett användargränssnitt

Interaktion 1. Dagens föreläsning. Interaktionsmodeller

Dagens föreläsning. Interaktionsmodeller Typer av användargränssnitt Översikt, orientering, navigering Felhantering

Manual - Inläsningstjänsts App (ios för iphone och ipad)

Enskild skriftlig uppgift

PROJEKTUPPGIFT MAMN25. Hem

Reflekterande Design. Materialet utan egenskaper. God Design. Grundbegrepp. Introduktion till Design. Introduktion till Design

Summering: Workshop 14/3-19

Kognition. 11 september 2002

MDI - Människa - datorinteraktion "The Design of Everyday Things" av Donald Norman. Utformning av vardagsprylar

Föreläsning 10: Gränssnitt och webbdesign

Min syn på koncepthantering generering och utvärdering

Design av användargränssnitt. Processen snarare än produkten

Föreläsning 12 Inspektionsmetoder. Rogers et al. Kapitel 15

Studier med barn, fördelar. Kognitiv utveckling. Upplägg. Många aspekter. Generella aspekter. Barndomens kognitiva utveckling

Föreläsning 6 Tillgänglighet, modell för handlande, metaforer och interak9onss9lar. Kapitel i kursboken

Fö 8. Sammanfattande föreläsning MAMN25

Patricija Jaksetic Erik Wistrand. Psykologi del 2 - kognition. Förra gången pratade vi om perception...

Sammanfattning av modulen modeller och representationer Hur går jag vidare?

Fastställa mål. Daniel Bosk. goals.tex :33:45Z danbos

Inledande programmering med C# (1DV402) Introduktion till programmering

Granskning av gränssnitt. Mattias Arvola

Vad vi pratade om förra gången. Fast med andra ord

Konverteringsskola Del 3: Vad är användbarhet?

Manual - Inläsningstjänsts App (Android)

Projekt: Utveckling av ett användargränssnitt


Kognitiv psykologi. Kognition / Tänkande. Tänkande

Mentala modeller. Maria Söderberg Kungliga Tekniska Högskolan Götgatan 78, Stockholm

Transkript:

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

Våra hjärnor är fantastiska! Perception Minne Uppmärksamhet Lärande Läsa, tala och lyssna Problemlösning Beslutsfattande 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 2

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 3

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 4

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 5

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 6

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

Uppmärksamhet Delad uppmärksamhet Flera uppgifter samtidigt Cocktailpartyfenomenet 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. 8

Experiment: hur fungerar en växellåda? Vi låter ofta felaktiga mentala modeller vägleda vårt beteende 9

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 10

Donald Normans designprinciper Affordance Synlighet Mappning Feedback Affordance 11

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 12

Tidsinställning på mikrovågsugn Synlighet 13

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

Synlighet i digitalkamera Avancerade funktioner göms i ett menysystem Mappning Typisk korridorkökspis 15

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 16

Naturlig mappning biologiska förhållanden Feedback 17

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

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 19

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 20

Mentala och konceptuella modeller Designerns mentala modell Systemets konceptuella modell Användargränssnitt Användarens mentala modell System 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åtsasknapp istället så att de för in handen under fotocellen! Låtsasknapp Dörr 21

Användaren ser knappen och sluter sig till att dörren öppnas genom att man trycker på den En knapp! Jag trycker på den så öppnas dörren! Låtsasknapp Dörr Ibland reagerar dock inte fotocellen Huh? Jag trycker men inget händer? Gör jag fel? Är dörren trasig? Låtsasknapp Dörr Varför inte erbjuda en mer korrekt konceptuell modell från början? Detta är en dörr med fotocell som öppnas med en gest. 22

Donald Normans kylskåp Donald Norman, The Design of Everyday Things, sid. 13 17 Vilken konceptuell modell erbjuder detta användargränsnitt? Kylskåpet har två separata kylsystem som båda kan kontrolleras med var sitt reglage. 23

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ärsomattarbetapåkontor. 24

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

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 26

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 Källdomän Metafor Måldomä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. 27

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 28

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

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 byggapåmetaforerfören 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? 30

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 31

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

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

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. Förslag på litteratur Johnson & Henderson (2002). Conceptual Models: Begin by Designing What to Design. Interactions 9(1), pp. 25 32. Tillgänglig online: http://dl.acm.org/citation.cfm?id=503366 Rogers, Sharp & Preece (2011). Interaction Design: beyond humancomputer interaction, 3rd ed. Kap 2.1 2.4 Kap 11.3 Winogard (1996). Design of the Conceptual Model: An interview with David Liddle. I Bringing Design to Software. Tillgänglig online: http://hci.stanford.edu/publications/bds/2 liddle.html Gaver & Martin (2000). Alternatives: Exploring Information Appliances through Conceptual Design Proposals. CHI '00 Proceedings of the SIGCHI conference on Human Factors in Computing Systems, Pages 209 216. Tillgänglig online. http://dl.acm.org/citation.cfm?id=332433 34