Handlande, metaforer och interaktionsstilar



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

Föreläsning 7, Interak2on

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

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

Föreläsning 7: Kognition & perception

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

Föreläsning 7: Kognition & perception

Kommandobaserad interaktion

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

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

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?

Boken. Kap Kap 11.3

Kommentarer till MDI tentamen

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

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

Principer för interaktionsdesign

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

Nya Medier. Gränssnitt, Interaktivitet och Digital kod

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

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

Vad utmärker ett bra gränssnitt?

Föreläsning 9: Gränssnittsdesign och webbdesign. Rogers et al. Kapitel 6

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

Föreläsning 2. Operativsystem och programmering

Bakgrund och motivation. Definition av algoritmer Beskrivningssätt Algoritmanalys. Algoritmer. Lars Larsson VT Lars Larsson Algoritmer 1

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

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

TENTAMEN: Design och konstruktion av grafiska gränssnitt DAT215/TIG091

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

Kopiering av objekt i Java

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

Calligra. En allmän inledning. Raphael Langerhorst Jost Schenck Översättare: Stefan Asserhäll

Författare: Juha Söderqvist IT-GUI. Version 1.0. Datum

Teknik, principer, metaforer och modeller Lars Oestreicher

Interaktionsdesign, grundkurs INTERAKTION 1

Kognition crash course

Föreläsning 5 Konceptuell design och designprinciper. Kapitel 8-9 i Stone et al.

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

Föreläsning 8, Design

Användarcentrerad design Interak3on och informa3on


Människa-datorinteraktion och användarcentrerad design

Föreläsning 1 2i1029 / MDI - Människa DatorInteraktion. Vem är jag någonstans? Vad är MDI?

Berättelsen i lärandet och lärandet i berättandet

Designkoncept och gränssnittsmetaforer

PROGRAMMERING. Ämnets syfte. Kurser i ämnet

Människa-datorinteraktion. Innehåll. Forts. Teknik, principer, metaforer och modeller Bengt Sandblad

Wireframe när, vad, hur och varför?

Från Smart TV till Smartare upplevelse Av: Kim Huber och Connie Huanca

Informationsbeteende och förmedling av arkivinformation

Människa-Datorinteraktion

Att läsa: Sharp, Helen, Rogers, Yvonne & Preece, Jenny E. (2007) Interaction design. Wiley. Kapitel 11.

Språket, individen och samhället VT08

TDDC30. Objektorienterad programmering i Java, datastrukturer och algoritmer. Föreläsning 11 Jonas Lindgren, Institutionen för Datavetenskap, LiU

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

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

Några exempel. Principer för design. Vilka problem medför den här designen? Vilken av följande placeringar av piltangenterna är bäst?

En Von Neumann-arkitektur ( Von Neumann-principen i föreläsning 1) innebär:

PROGRAMMERING. Ämnets syfte. Kurser i ämnet

Interaktion 2 STYRDON, PEKDON OCH ANNAN INTERAKTION ATT RÄKNA MED

Föreläsning 6 Konceptuell design och designprinciper. Kapitel 8-9 i Stone et al.

New Media. De nya praktikerna och kontexter för den nya praktiken

Vad påverkar designen?

Designmetodik. Systemering med användarfokus Malin Pongolini

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

Prototyping medium/high fidelity Användarupplevelse Interaktionsflöde och flow Användbarhetsutvärdering - Usability testing Tillgänglighet

Datakurs, grund. Thor Stone Education. Datakurs, grund. (Windows 7) Copyright Torsten Nilsson

Användarstudie utav GRIM på SFI (Svenska För Invandrare)

Datavetenskap. Beteendevetenskap MDI. Design

GRÄNSSNITTSDESIGN. Ämnets syfte. Kurser i ämnet

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

Du fulländar mig! Om synergierna mellan agila metoder och UX. Joakim Holm Adaptiv AB. Erik Hammarström Antrop AB

Frågor och svar till tentamen i Kravhantering

Handbok Minuet. Sandro S. Andrade Översättare: Stefan Asserhäll

Nya Medier. Gränssnitt, Interaktivitet och Digital kod

Inledning. Vad är ett datorprogram, egentligen? Olika språk. Problemlösning och algoritmer. 1DV433 Strukturerad programmering med C Mats Loock

Vilken skillnad gör det var du placerar det? Prova båda.

Nyheterna i Visma Tendsign 4.0

SMD084 lp människa/datorinteraktion. Del II Programmeringens matematiska grunder. Del I - Lektionsplanering. Del II Lektionsplanering

Introduktion till programmering och Python Grundkurs i programmering med Python

Små förändringar. Stora resultat.

Lite info först. Kom ihåg! Deadline på lab1 på onsdag. Övning 2 på onsdag: gör en kalender för olika slags användare

Portfolio Johan Brink

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

Symmetry: Bortsett från menyn har innehållet av sidan viss symmetri när det kommer till videoklippen som är upplagda på sidan.

LÄRARHANDLEDNING TILLGÄNGLIGA WEBBSIDOR

Oppositionsprotokoll-DD143x

Föreläsning 1: Intro till kursen och programmering

Grafiska användargränssnitt i Java

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


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

Grafiska användargränssnitt

Användarcentrerad design Structure plane (tredje nivån)

Objektorienterad programmering med Java Swing: Händelser, lyssnare och applets


Implementering - teori och tillämpning inom hälso- och sjukvård

Operativsystem och användargränssnitt

Föreläsning 2. Objektorienterad analys och design. Analys: att modellera världen. Design: att strukturera program.

Transkript:

Föreläsning 6 080909 Handlande, metaforer och interaktionsstilar Kapitel 10-11 i Stone et al. Människa-Dator Interaktion Institutionen för Datavetenskap Erik Billing MDI 1

Föreläsning 6 080909 Human Action Cycle Målformulering Formulera uppgifter Planera handlingar Utförande Jämföra det som hände med det önskade Tolka konsekvenser Betrakta handlandet Fysisk aktivitet Institutionen för Datavetenskap 2 MDI 2

Målformulering Ändra storlek på en bild Verktyg: Photoshop express Institutionen för Datavetenskap 3

Målformulering Har användaren tillräckliga kunskaper för att kunna formulera målet? Exempelvis: Skapa ett färghistogram över bilden Vet användaren vad ett histogram är Vet användaren hur det beräknas, vilka attribut det har osv Lösning Dokumentation och träning Guider Institutionen för Datavetenskap 4

Formulera uppgifter Har användarna tillräckliga kunskaper för att kunna bryta ned uppgiften i delar? Ladda upp bilden till PS Express Öppna bilden Ändra storlek Spara ändringar Ladda hem bilden från PS Express Lösning Synliggör möjligheter Avgränsa möjligheter till användarens kunskaper Gränssnittet kan komma med förslag Börja med att ladda upp en bild! Institutionen för Datavetenskap 5

Planera handlingar Liknar uppgiftsformulering men på lägre nivå Exempel: Ladda upp en bild Hitta någon knapp i gränssnittet för att ladda upp Välja bilden från hårddisken (eller annan källa) Hur/Var sparas bilden i PS Express? Institutionen för Datavetenskap 6

Utförande Institutionen för Datavetenskap 7

Utförande Stämmer systemets funktioner med de användaren förväntar sig? Affordance och Visibility Stämmer användarens mentala modell? Hur komplex måste modellen vara? Stödjer systemet att användaren skapar en (enkel) mental modell? Institutionen för Datavetenskap 8

Betrakta handlandet Kan användaren se vilket tillstånd systemet befinner sig i? Har bilden laddats upp? Var finns den? Får användaren feedback? Hur lång tid tar det innan feedback? Institutionen för Datavetenskap 9

Är feedbacken tillräckligt eller för detaljerad? Förstår användaren feedbacken? Institutionen för Datavetenskap 10

Jämföra resultat Institutionen för Datavetenskap 11

Jämföra resultat Feedback på längre sikt Hur väl har uppgiften utförts Fick man exakt det resultat man ville Fins det bättre sätt att utföra uppgiften I vilken utsträckning kan användaren lära av den utförda uppgiften? Institutionen för Datavetenskap 12

Norman s modell Designmodell Designer Användarens modell Användare Dokmentation System Systembild Norman & Draper, 1986 Institutionen för Datavetenskap 13 Donald Norman har beskrivit det här i en enkel bild. (Obs, fel i boken) Den som designar systemet har en (mer eller mindre informerad) modell av systemet. Den omsätts så småningom till en bild/representation som systemet visar upp för användaren. Det är viktigt att denna bild visar upp systemet påett riktigt sätt (avspeglar designerns modell), men naturligtvis ocksåkopplar till de föreställningar som användaren har. 13

Designmodell Den modell designern har Förståelse av systemets funktionalitet och syfte Teknologi & implementation Kontext Förståelse för användarens behov Vad ska synliggöras Exempel PS Express Client/Server Måste användaren förstå att programmet jobbar mot en server? Institutionen för Datavetenskap 14

Systembild Systemet så som det presenteras för användaren Mediering av funktioner Mediering av systemets tillstånd Inkluderar även dokumentation, träning mm Institutionen för Datavetenskap 15

Användarmodell Omfattar alla aspekter av systemet användaren utnytjar Konsekvent met verkligheten Modellen begränsar vad användaren kan göra Modellen behöver inte omfatta det användaren inte är intresserad av Exempel Vad händer när man gasar? Mamma viste inte vad kopplingen gjorde Spara filer på peppar Var finns peppar? Institutionen för Datavetenskap 16

Förmedla användarmodellen Förenkla den modell som presenteras för användarna. Även om systemet är komplicerat kan det räcka med en enkel användarmodell. Förklara den modell som presenteras för användarna. Dvs dokumentera/illustrera. Använd metaforer och analogier. Metafor - bildligt uttryck Analogi - motsvarighet, likhet, parallell Institutionen för Datavetenskap 17 Vi måste alltsåöverbrygga det gap som finns mellan problem och lösning, mellan krav och behov och ett färdigt fysiskt system. Hur ska det färdigställas för att uppfylla krav och tillgodose behov?

Norman s modell Användartester Designmodell Designer Användarens modell Användare Dokmentation System Systembild Institutionen för Datavetenskap 18 Donald Norman har beskrivit det här i en enkel bild. (Obs, fel i boken) Den som designar systemet har en (mer eller mindre informerad) modell av systemet. Den omsätts så småningom till en bild/representation som systemet visar upp för användaren. Det är viktigt att denna bild visar upp systemet påett riktigt sätt (avspeglar designerns modell), men naturligtvis ocksåkopplar till de föreställningar som användaren har. 18

Metaforer i gränssnitt Likheter med fysiskt objekt, även egenskaper t. ex. skrivbordsmetaforen Handlingar eller objekt Fler exempel Nätet E-post Mappar Webbshopping Institutionen för Datavetenskap 19 Exploit user s familiar knowledge, helping them to understand the unfamiliar Conjures up the essence of the unfamiliar activity, enabling users to leverage of this to understand more aspects of the unfamiliar functionality i webben är det ju strukturen man vill förklara genom liknelsen. 19

Fördelar med metaforer Underlättar inlärning Ger snabb förståelse för nya företeelser Lättare att bygga vidare på känt koncept än att skapa ett helt nytt Hjälper användare att förstå den underliggande konceptuella modellen Bidrar till terminologi Kan fungera som inspiration i designsituationer Institutionen för Datavetenskap 20 20

Problem med metaforer Kan bryta mot konventioner och kulturella regler papperskorgen på skrivbordet Användarens förståelse för systemet kan begränsas till metaforen Metaforen måste vara analog med systemets verkliga struktor för att fungera riktigt bra Papperskorgen på flera hårddiskar Kan gå emot designprinciper Dålig design förs över i onödan Miniräknaren Institutionen för Datavetenskap 21 Exempel!!! metaforerförklararsällanheladen framtagnaföreteelsen, kan begränsa kanledatill design somendastbliren efterapningavett fysiskt objekt, miniräknare Ettnumeraklassisktexempeldär man tycksha struntati metaforen är macens papperskorg Ordbehandlare som skrivmaskin, var finns det skrivna? På papperet eller skärmen? Näe, i burken.

Begränsningar Naturliga begränsningar Fysiska system har alltid naturliga begränsningar Gula lappar kan inte påminna Virtuella system måste införa begränsningar En virtuell lapp på skrivbordet skulle tekniskt sett kunna påminna vid en viss tid. Kulturella begränsningar Man diskar med en diskborste, inte med en disktrasa! Institutionen för Datavetenskap 22

Föreläsning 6 080909 Interaktionsstilar, historiskt Omkopplare Assembler Högnivåspråk Kommandospråk Grafiska användargränssnitt På väg mot VR i 3D MDI Institutionen för Datavetenskap 23 För att få perspektiv på det här med interaktionsstilar ska vi titta lite historiskt på hur man gjort. I början ingen skarp gräns mellan programmering och interaktion assembler -inc mov add osv. Betydligt mer komplicerat att programmera GUI Inmatning via pappersremsor, hålkort 23

Föreläsning 6 080909 Interaktionsstilar Kan delas in i: kommandospråk menyer frågor och svar formulärifyllning naturligt språk direktmanipulation gester MDI Institutionen för Datavetenskap 24 Här kan man ocksådela in stilarna i olika kategorier utifrån olika aspekter och hur de faktiskt realiseras. kopplat till nivåerna tidigare såkan man designa dessa för olika in/utmatningsdon. 24

Föreläsning 6 080909 Att välja interaktionsstil Hur ska systemets funktionalitet realiseras och implementeras? Val av sätt att konkretisera designen beror av uppgift, sammanhang, utrustning MDI Institutionen för Datavetenskap 25 25

Föreläsning 6 080909 Direktmanipulation Kontinuerlig representation av aktuellt objekt Snabba reversibla operationer vars inverkan på objektet omedelbart blir synlig Komplex kommandospråkssyntax byts ut mot direktmanipulation av aktuellt objekt genom knapptryckningar eller andra fysiska handlingar Användare upplever att de har kontroll Snabb inlärning Ben Shneiderman, 1982 MDI Institutionen för Datavetenskap 26 När DM kom var det ett stort genombrott i interaktionssammanhang. Plötsligt upplevde många användare att det var lätt att använda datorer. Många forskare frågade sig varför. 26

Föreläsning 6 080909 Förklaringar till DM Rutkowski: The user is able to apply intellect directly to the task; the tool itself seems to disappear Normans exekverings- och evalueringsgap Direkthet och avstånd Psykologiska teorier MDI Institutionen för Datavetenskap 27 I många sammanhang har människor lättare för att förståkomma ihåg, jobba med spatiala representationer., Psykologiska teorier, t ex att man har lättare att komma ihåg det man ser, även tidigare erfarenheter som man bygger vidare på. Dra kasserade dokument till papperskorgen. OAI-modellen, det som visas i gränssnittet ligger nära själva problemet eller uppgiften. Består av objekt och handlingar kopplade till objekten. Normans gap och direkthet kommer mer om. 27

Föreläsning 6 080909 Exekverings- och evalueringsgapen Exekveringsgapet syftar på att man inte alltid kan hitta lämpliga redskap i användargränssnittet vilka passar in på de mål man vill uppnå. Man frågar sig hur ska jag kunna utföra (exekvera) det jag vill. Evalueringsgapet syftar på hur enkelt man kan avgöra om det som utförts (exekverats) uppfyller de mål man vill uppnå. MDI Institutionen för Datavetenskap 28 OH på Normans illustration 28

Föreläsning 6 080909 Ikoner Avbildar Symboliserar Kompletteras med text Gester Bygger på metafor MDI Institutionen för Datavetenskap 29 En del av att minska dessa avstånd handlar om att göra ikoner begripliga. Bygger ju ofta påen metafor. 29

Föreläsning 6 080909 Virtuella miljöer DM i 3D För att simulera svåra situationer Farligt Dyrt Upplevelser, känsla Kräver utrustning Gester i 3D Institutionen för Datavetenskap 30 30

Föreläsning 6 080909 Naturligt språk Alla kan det, ingen inlärning Tekniskt inte perfekt Kräver mycket domänkunskap hos båda parter Tal får inte förutsätta att man måste hålla saker i minnet Feedback och visualisering Vill vi diskutera med en maskin? MDI Institutionen för Datavetenskap 31 Vi anknyter till detta senare idag också. 31

Föreläsning 6 080909 Uttrycksfulla gränssnitt Färg, ikoner, ljud, grafik, animationer används för att göra gränssnitt tilltalande Detta kan påverka användbarheten i ett gränssnitt man kan stå ut med en hel del om resultatet är estetiskt MDI Institutionen för Datavetenskap 32 32

Föreläsning 6 080909 MDI Institutionen för Datavetenskap 33 33

Föreläsning 6 080909 Estetik kontra användbarhet Designideal Det enkla, stilrena Inte bara funktionalitet och användbarhet som påverkar MDI Institutionen för Datavetenskap 34 Designideal Det enkla, stilrena: otaliga dörrexempel, badrum, min bildörr! Norman kanlåtakritisktill detestetiska. Detjag trorhanvillsägaärattestetikräcker inte. Men förden skull börman intehoppaöverdetestetiska. 34

Föreläsning 6 080909 Ska datorer säga ursäkta? Reeves & Naas (1996) anser det Datorer ska ta efter etikettsregler Är användare lika förlåtande mot datorer som mot människor? Kan man förvänta sig att datorn försöker bättra sig? Hur bör meddelanden se ut? MDI Institutionen för Datavetenskap 35 Should computers say they re sorry? Reeves and Naas (1996) argue that computers should be made to apologize Should emulate human etiquette Would users be as forgiving of computers saying sorry as people are of each other when saying sorry? How sincere would they think the computer was being? For example, after a system crash: I m really sorry I crashed. I ll try not to do it again How else should computers communicate with users? 35

Föreläsning 6 080909 Antropomorfism Att föreställa sig mänskliga egenskaper hos ickemänskliga företeelser Vanligt i t ex reklam Förekomst i användargränssnitt ger reaktion på oss människor MDI Institutionen för Datavetenskap 36 t ex bilar, djur, kopieringsapparater Kellog s corn flakes Men hurreagerar vi? Tony the tiger, Frosties. 36

Föreläsning 6 080909 Vad föredrar vi? Ej korrekt. Försök igen. MDI Institutionen för Datavetenskap 37 37

Föreläsning 6 080909 Stöd för antropomorfism Reeves & Naas har visat att smicker i datorbaserat undervisningsstöd har en positiv påverkan Elever var mer benägna att fortsätta med sådana meddelanden MDI Institutionen för Datavetenskap 38 38

Föreläsning 6 080909 Kritik av antropomorfism Människor känner sig frustrerade och dumma Man gillar inte när figurer på skärmen pekar finger åt en Många föredrar en mer opersonlig stil Anses mindre trovärdigt och fråntar användare ansvar (Quintanar, 1982) MDI Institutionen för Datavetenskap 39 39

Föreläsning 6 080909 Agenter Syfte: fånga uppmärksamhet signalera trovärdighet inspirera annat... MDI Institutionen för Datavetenskap 40 Exemplet fråga Eva påtelia.se, antagligen valt för att fånga uppmärksamhet och att ge ett trovärdigt intryck. Finns här dygnet runt signalerar samtidigt att det INTE är kvinnan på bilden som man frågar. 40

Föreläsning 6 080909 Resultat Människor vill ha kontroll Datorn är ett verktyg MDI Institutionen för Datavetenskap 41 Brenda Laurels exempel på uppslagsverk, berättare, guider Problem: -vi vill ha kontrollen, vill jag ha hjälp ber jag om den, om råd. -Vi är sannolikt inte så förutsägbara i vårt handlande. 41

Representationsrymder Rumslig representation (Var?) Fysisk/verklig parallell Temporal representation (När?) Andra representationsrymder Kategoribaserade - tex. färg, form Hierarkiska representationer Träd Mängdbaserade representationer Institutionen för Datavetenskap 42 Förklaring till fysisk/verklig parallell -dvs finns det ett objekt i den fysiska/verkliga världen som det passar bra att använda, gör dådet!