cse 440 introduction to hci
play

CSE 440: Introduction to HCI User Interface Design, Prototyping, and - PowerPoint PPT Presentation

Jan 07, 2023 •435 likes •1.5k views

CSE 440: Introduction to HCI User Interface Design, Prototyping, and Evaluation Lecture 06: James Fogarty Design of Kailey Chan Everyday Things Dhruv Jain Nigini Oliveira Tuesday / Thursday Chris Seeds 12:00 to 1:20 Jihoon Suh Project

  1. Affordances “The affordances of the environment are what it offers animals, what it provides or furnishes, for good or ill.” Gibson, ecological approach to psychology “The term ‘affordance’ refers to the perceived and actual properties of the thing, primarily those fundamental properties that determine just how the thing could possibly be used.” Norman

  2. What’s the Affordance?

  3. Affordances

  4. Affordances Technology affordances are often based in affordances from the physical world

  5. Affordances What is the affordance here? Where does it come from?

  6. Affordances What is the affordance here? Knurling Where does it come from?

  7. Sequential Affordance Acting on a perceptible affordance leads to information indicating new affordances 44

  8. Sequential Affordance Acting on a perceptible affordance leads to information indicating new affordances Now does the door push or pull? 45

  9. Nested Affordances Affordances due to spatial relationships revealing what actions can be done Proximate to, contained in, part of 46

  10. In Other Words An affordance is what a thing communicates about how it can be used, often by its appearance “In general, when the apparent affordances of an artifact matches its intended use, the artifact is easy to operate. When apparent affordances suggest different actions than those for which the object is designed, errors are common.” Gaver Challenges arise if there is a mismatch between implied use versus intended use

  11. False Affordances When there is perceptual information suggesting an implied use that does not exist OK (Just an image of a button, not one that responds)

  12. False Affordances

  13. False Affordances

  14. False Affordances

  15. False Affordances

  16. Hidden Affordances When there is no perceptual information suggesting an actual intended use

  17. Hidden Affordances

  18. Hidden Affordances Logos linking to home is a convention, but not afforded by the page

  19. Confusion of the Term “Note also that affordances are not intrinsic, but depend on the background and culture of users. Most computer-literate user will click on an icon. This is not because they go around pushing pictures in art galleries, but because they have learned that this is an affordance of such objects in a computer domain…” Dix I disagree. Icons do not afford “pushability” or “clickability” by their attributes. They do not give an indication of their intended use, except by convention.

  20. Clarification on Convention “Designers sometimes will say that when they put an icon, cursor, or other target on the screen, they have added an ‘affordance’ to the system. This is a misuse of the concept. … It is wrong to claim that the design of a graphical object on the screen ‘affords clicking.’ … Yes, the object provides a target and it helps the user know where to click and maybe even what to expect in return, but those aren’t affordances, those are conventions, and feedback, and the like. … Don’t confuse affordances with conventions.” Norman

  21. Metaphors Suggest an existing mental model “horseless carriages”, “iron horses”, “wireless” Desktop metaphor Not an attempt to simulate a real desktop Leverages knowledge of files, folders, trash Explains why some windows seem hidden

  22. Metaphors Suggest an existing mental model “horseless carriages”, “iron horses”, “wireless” Desktop metaphor Not an attempt to simulate a real desktop Leverages knowledge of files, folders, trash Explains why some windows seem hidden

  23. Mail Metaphor

  24. Calendar Metaphor

  25. Health Metaphor

  26. Shallow or Inappropriate Metaphors Informs a small range of possibilities, or none at all It is just a Magic Cap menu and a dialog box? What does the living room add? Microsoft Bob

  27. Mixed Metaphors Two or more different metaphors coexist with some supposed relation The desktop metaphor Windows into content Windows are views into Good? Bad? larger content regions Neither? Both? No desktop has windows

  28. Broken Metaphors Are not consistent, do not operate in every circumstance, or do not uphold things consistent with what the metaphor would suggest

  29. Mechanical-Age Metaphors Operate as their mechanical-age counterparts did, not taking advantage of the digital domain to escape the limitations of the original

  30. Dead Metaphors Lost the original imagery of their meaning

  31. Metaphors versus Idioms Idioms rely on shared experience or custom are learned, often early in life are supported or revealed by context become conventions do not rely on metaphors Idiomatic widgets Single click to Hyperlinks (e.g., screen splitter, select, double dragable title bar) click to open

  32. Idioms Star Trek IV: Scotty Uses a Mouse

  33. Idioms Star Trek IV: Scotty Uses a Mouse

  34. Metaphors and Affordances Affordances “jump start” a model for interaction Metaphors “jump start” a model of a system But if designed poorly, both can be damaging Lead to an incorrect model, undermine interaction Can limit designer creativity Can reduce the advantages of software Can be “cute” at the expense of functional

  35. Signifiers “There are trails. There are behaviors. We know how to behave by watching the behavior of others, or if others are not there, by the trails they have left behind.” “I call any physically perceivable cue a signifier, whether it is incidental or deliberate. A social signifier is one that is either created or interpreted by people or society, signifying social activity or appropriate social behavior.” “Social signifiers replace affordances, for they are broader and richer, allowing for accidental signifiers as well as deliberate ones, and even for items that signify by their absence, as the lack of crowds on a train platform. The perceivable part of an affordance is a signifier, and if deliberately placed by a designer, it is a social signifier.” Norman

  36. Visibility Phones How do you put somebody on hold change volume

  37. Visibility

  38. Visibility Changing Ringer Volume Press “Program” Press “6” Set Volume Low - Press “1” Medium - Press “2” High - Press “3” Press “Program”

  39. Visibility Controls available on watch with 3 buttons? Too many and they are not visible Compare to controls on simple car radio Number of controls ≈ Number of functions Controls are labeled and grouped together

  40. Knowledge in the World

  41. Constraints Prevent some actions while allowing others Prevent errors before they can happen Disruptive error messages are a last resort

  42. Constraints

  43. Constraints

  44. Constraints

  45. Constraints Baudisch et al., Snap-And-Go

  46. Constraints Traditional snap location inaccessible inaccessible Snap-And-Go snap location enlarged in motor space only Baudisch et al., Snap-And-Go

  47. Mapping Correspondence between an interface and the corresponding action in ‘the world’ Minimize cognitive steps to transform action into effect, or perception into comprehension (i.e., execution and evaluation)

  48. Very Bad Mapping

  49. Slightly Better Mapping

  50. Good Mapping

  51. Not this Stove

  52. Great Mapping

  53. Mapping

  54. Mapping

  55. Mapping

  56. Mapping

  57. Mapping

  58. Consistency Interfaces should be meaningfully consistent Ubiquitous use of same keys for cut/copy/paste Helps in developing / applying a mental model Types of consistency Internal (i.e., within itself) e.g., same terminology and layout throughout External (i.e., with other applications) e.g., common widget appearance e.g., design patterns common across applications

  59. Is Consistent Always Better? Should “new” & “delete” be in the same place?

  60. Is Consistent Always Better? Should “new” & “delete” be in the same place? New is common, delete is not

  61. Is Consistent Always Better? Original focus on consistency, later design for mobile form

  62. Is Consistency Always Better?

  63. Is Consistency Always Better?

Recommend

INTRODUCTION INTRODUCTION INTRODUCTION INTRODUCTION INTRODUCTION INTRODUCTION INTRODUCTION

INTRODUCTION INTRODUCTION INTRODUCTION INTRODUCTION INTRODUCTION INTRODUCTION INTRODUCTION

TRAINING COURSE ON SOCIAL PROTECTION & FORMALIZATION TRINIDAD AND TOBAGO MARCH 15, 2017 INTRODUCTION INTRODUCTION INTRODUCTION INTRODUCTION INTRODUCTION INTRODUCTION INTRODUCTION INTRODUCTION Design of the NIS Assistance from the

547 views • 23 slides
INTRODUCTION Introduction 2/42 INTRODUCTION Alternations I am giving bread to the

INTRODUCTION Introduction 2/42 INTRODUCTION Alternations I am giving bread to the

Patterns of variation in the expression of case and agreement Andrs Brny Leiden University Centre for Linguistics 9 November 2019, BaSIS Workshop a.barany@hum.leidenuniv.nl INTRODUCTION Introduction 2/42 INTRODUCTION

1.37k views • 42 slides
Introduction Introduction Introduction Introduction Outline Motivation Failures

Introduction Introduction Introduction Introduction Outline Motivation Failures

Introduction Introduction Introduction Introduction Outline Motivation Failures Definition and concepts Process and product properties Principles SE Approaches Motivation Software and the economy The economies of

1.03k views • 49 slides
Introduction Introduction Introduction Nationwide Cause for Concern 1

Introduction Introduction Introduction Nationwide Cause for Concern 1

Introduction Introduction Introduction Nationwide Cause for Concern 1 https://www.cdc.gov/std/stats17/infographic.htm Introduction Epidemiology in Western Colorado CPHE Surveillance Data Report, May 2018 Chlamydia Epidemiology in Western

977 views • 39 slides
DAQ introduction Purpose of this talk : (1) Introduction for those who have not been in every

DAQ introduction Purpose of this talk : (1) Introduction for those who have not been in every

DAQ introduction Purpose of this talk : (1) Introduction for those who have not been in every meeting (2) Some ideas of diagrams for section 7.1 (Introduction) of TP. Giles Barr 25 Jan 2018, Pembroke College On DUNE, the reality is there is a

474 views • 10 slides
INTRODUCTION cf. Schneider, Chapter 1 INTRODUCTION THEY ARE OUT TO GET YOU INTRODUCTION WHAT

INTRODUCTION cf. Schneider, Chapter 1 INTRODUCTION THEY ARE OUT TO GET YOU INTRODUCTION WHAT

ADVANCED COMPUTER SECURITY INTRODUCTION cf. Schneider, Chapter 1 INTRODUCTION THEY ARE OUT TO GET YOU INTRODUCTION WHAT IS SECURITY? A systems security policies describe What the system is supposed to do Store and provide access

479 views • 16 slides
Overview Introduction to SMIL Introduction to W3C and XML Introduction to SMIL

Overview Introduction to SMIL Introduction to W3C and XML Introduction to SMIL

Overview Introduction to SMIL Introduction to W3C and XML Introduction to SMIL Writing a SMIL file Adding Media Objects Martin Halvey Clipping media files January 2008 Timing and Synchronising Layout World Wide

387 views • 14 slides
14 Introduction Introduction Bad guys can put malware into Example: hosts

14 Introduction Introduction Bad guys can put malware into Example: hosts

Introduction Introduction source Encapsulation ISO/OSI reference model message M application segment H t H t M transport network datagram H n H n H t M presentation: allow applications to frame link H l H n H t M interpret

583 views • 4 slides
Previous Lecture Introduction to SMIL 2 Introduction to W3C and XML Introduction to SMIL

Previous Lecture Introduction to SMIL 2 Introduction to W3C and XML Introduction to SMIL

Previous Lecture Introduction to SMIL 2 Introduction to W3C and XML Introduction to SMIL Writing a SMIL file Adding Media Objects Martin Halvey Clipping media files January 2008 Timing and Synchronising Layout

322 views • 8 slides
Lecture 1 Andreas Habegger Introduction Zynq Introduction Zynq Introduction Zynq PS vs. PL

Lecture 1 Andreas Habegger Introduction Zynq Introduction Zynq Introduction Zynq PS vs. PL

Introduction Zynq Lecture 1 Andreas Habegger Introduction Zynq Introduction Zynq Introduction Zynq PS vs. PL Processing System Processor Peripherals Data Buses AXI Bus Conclusion BTE5380 - Embedded Systems Octobre 2014 Andreas Habegger

1.81k views • 30 slides
2018.06 01 SMILE5 Introduction S E 5 02 Alpha Cloud M I L 03 Company Introduction 04

2018.06 01 SMILE5 Introduction S E 5 02 Alpha Cloud M I L 03 Company Introduction 04

2018.06 01 SMILE5 Introduction S E 5 02 Alpha Cloud M I L 03 Company Introduction 04 Project References S E 5 PART.1 SMILE5 Introduction M I L Introduction STORION-SMILE5 Residential Energy Storage System Inverter 5kW Output Input

1.06k views • 25 slides
Introduction to CICS Course introduction Course introduction What is CICS? What is an

Introduction to CICS Course introduction Course introduction What is CICS? What is an

Introduction to CICS Course introduction Course introduction What is CICS? What is an application server? Why use an application server? Course introduction Services provided by CICS How CICS applications are defined Scaling CICS to meet

1.84k views • 146 slides
Network Visualization Introduction Presented by Shahed Introduction Introduction Basic

Network Visualization Introduction Presented by Shahed Introduction Introduction Basic

Network Visualization Introduction Presented by Shahed Introduction Introduction Basic building blocks Node Links (relationship between nodes) Spatial information Network data

584 views • 9 slides
Introduction Introduction (1) Main argument of the paper: universities are not only

Introduction Introduction (1) Main argument of the paper: universities are not only

Le jugement des pairs comme outil de management des universits Peer-review as a management tool Christine Musselin (CSO, Sciences Po et CNRS) Avril 2013, Lirrsistible ascension du capitalisme acadmique Introduction Introduction (1)

590 views • 28 slides
Introduction Introduction to storage and to storage and filesystems filesystems Introduction

Introduction Introduction to storage and to storage and filesystems filesystems Introduction

Moreno Baricevic Gilberto Daz Axel Kohlmeyer Stefano Cozzini ULA ICTP CNR-IOM DEMOCRITOS Merida, VENEZUELA Trieste, ITALY Trieste, ITALY Introduction Introduction to storage and to storage and filesystems filesystems Introduction

1.19k views • 51 slides
JABLOTRON JA-100 introduction November 2011 Introduction Todays goals First introduction of

JABLOTRON JA-100 introduction November 2011 Introduction Todays goals First introduction of

JABLOTRON JA-100 introduction November 2011 Introduction Todays goals First introduction of the brand new JA-100 alarm system Visions Basic architecture System components Setting Help us with final validations You are the FIRST ones

1.69k views • 111 slides
1 Introduction Introduction Communication System Baseband an adjective that describes

1 Introduction Introduction Communication System Baseband an adjective that describes

Introduction Introduction Physical Layer Mobile network Global ISP Provides the means to transmit bits Basic Concepts of from sender to receiver, Data Transmission Defines the mechanical, electrical, and Home network timing

463 views • 7 slides
Welcome! Todays Agenda: Topic Introduction Course Introduction Team Practical

Welcome! Todays Agenda: Topic Introduction Course Introduction Team Practical

INFOGR Computer Graphics Jacco Bikker - April-July 2015 - Lecture 1: Introduction Welcome! Todays Agenda: Topic Introduction Course Introduction Team Practical Details Assignments Field Study State of

869 views • 62 slides
Introduction (00) RNDr. Martin Madaras, PhD. madaras@skeletex.xyz Introduction Introduction

Introduction (00) RNDr. Martin Madaras, PhD. madaras@skeletex.xyz Introduction Introduction

Virtual and Augmented Reality Introduction (00) RNDr. Martin Madaras, PhD. madaras@skeletex.xyz Introduction Introduction Who am I? What do I do here? 2 About me Short research bio: - 2014 - finished PhD at FMFI UK - 2014 2016 -

1.3k views • 39 slides
PRESENTATION The Introduction What is the Introduction ? The introduction prepares the audience

PRESENTATION The Introduction What is the Introduction ? The introduction prepares the audience

PRESENTATION The Introduction What is the Introduction ? The introduction prepares the audience for your presentation. It tells them what your presentation is about, why it is important, and finally, what to listen for in your speech. Get the

505 views • 3 slides
How to make a presentation with L A T EX? Introduction to L A T EX Introduction to Beamer

How to make a presentation with L A T EX? Introduction to L A T EX Introduction to Beamer

Introduction to Beamer Hafida Benhidour How to make a presentation with L A T EX? Introduction to L A T EX Introduction to Beamer Introduction to Beamer Hafida Benhidour Department of computer science King Saud University November

732 views • 49 slides
Shenzhen Cuilu jewelry Co., Ltd was founded in 1996 and its a large private enterprise

Shenzhen Cuilu jewelry Co., Ltd was founded in 1996 and its a large private enterprise

Introduction Introduction - - Brief Brief Introduction Introduction of of Cuilu Cuilu Group Group Introduction Introduction - - Brief Brief Introduction Introduction of of Cuilu Cuilu Group Group Shenzhen Cuilu jewelry Co., Ltd

147 views • 14 slides
Introduction to ICS- -214 214 Introduction to ICS Official Unit / Incident Log - A V-C-N.org

Introduction to ICS- -214 214 Introduction to ICS Official Unit / Incident Log - A V-C-N.org

V olunteer C ommunications N etwork (V-C-N.org) Introduction to ICS- -214 214 Introduction to ICS Official Unit / Incident Log - A V-C-N.org Academy Course - 2012-02.24-2208 262: Introduction to ICS-214 : V-C-N.org : Slide: 1 V olunteer C

735 views • 34 slides
Introduction to ICS- -214 214 Introduction to ICS Official Unit / Incident Log - A V-C-N.org

Introduction to ICS- -214 214 Introduction to ICS Official Unit / Incident Log - A V-C-N.org

V olunteer C ommunications N etwork (V-C-N.org) Introduction to ICS- -214 214 Introduction to ICS Official Unit / Incident Log - A V-C-N.org Academy Course - 2012-02.24-2208 262: Introduction to ICS-214 : V-C-N.org : Slide: 1 V olunteer C

558 views • 18 slides

More recommend