COGS 121 HCI Programming Studio. Week 03

Transcription

1 COGS 121 HCI Programming Studio Week 03

2 Direct Manipulation

3 Principles of Direct Manipulation 1. Continuous representations of the objects and actions of interest with meaningful visual metaphors. 2. Physical actions or presses of labeled buttons, instead of complex syntax. 3. Rapid, incremental, reversible actions whose effects on the objects of interest are visible immediately. 6-15

4 Examples of Direct-Manipulation Systems Command line vs. display editors and word processors Training times with display editors are much less than line editors Line editors are generally more flexible and powerful The advances of WYSIWYG word processors: Display a full page of text Display of the document in the form that it will appear when the final printing is done Show cursor action Control cursor motion through physically obvious and intuitively natural means Use of labeled icon for actions Display of the results of an action immediately Provide rapid response and display Offer easily reversible actions 6-3

5 Examples of Direct-Manipulation Systems WYSIWYG word processing 6-4

6 Examples of Direct-Manipulation Systems Spreadsheet 6-7

7 Examples of Direct-Manipulation Systems Guitar Hero VideoGame 6-10

8 Continuing evolution of Direct- Manipulation Systems Direct-Manipulation interfaces are being used in a wide range of applications, e.g. management dashboard for a retail store 6-12

9 Interactive Data Visualization? Obama Budget Congressional Influences Parallel Coordinates Cross-Filter

10 How people do things (Hutchins, Hollan, Norman) 1. To get something done, you start with some notion of what is wanted the goal to be achieved 2. Then you do something to the world take action to move yourself or manipulate someone or something 3. Finally, you check to see that your goal was made Human action has two primary aspects Execution: doing something Evaluation: comparison of what happened to what was desired (to our goal) Hutchins, Edwin L., James D. Hollan, and Donald A. Norman. "Direct manipulation interfaces." Human Computer Interaction 1.4 (1985):

11 Execution / Evaluation Action cycle

12 Stages of Execution Goals do not state precisely what to do Where and how to move, what to pick up To lead to actions, goals must be transferred into intentions A goal is something to be achieved An intention is a specific set of actions to get to the goal Yet even intentions are not specific enough to control actions

13 Stages of Execution Example I am reading a book and decide to need more light 1. My goal: get more light 2. Intention: push the switch button on the lamp 3. Action sequence (still a mental event) to satisfy intention: move my body, stretch to reach the switch extend my finger 4. Physical execution: action sequence executed Note that I could satisfy my goal with other intention and action sequences Instead of pushing the switch, ask another person to switch on the light My goal hasn t changed, but the intention and the resulting action sequence have

14 Stages of Evaluation Example I am reading a book and decide to need more light 1. My goal: get more light 2. Intention: push the switch button on the lamp 3. Action sequence (still a mental event) to satisfy intention: move my body, streach to reach the switch extend my finger 4. Physical execution: action sequence executed 5. Perceive whether there is more light in room 6. Decide whether the lamp turned on 7. Decide whether the resulting amount of light is sufficient

15 Seven stages of action 1 for goals, 3 for execution and 3 for evaluation Note: only an approximate model 1. Forming the goal 2. Forming the intention 3. Specifying an action 4. Executing the action 5. Perceiving the state of the world 6. Interpreting the state of the world 7. Evaluating the outcome

16 Seven stages of action

17 Visual Perception

18 Human Perception & Cognition We perceive what we expect Our vision is optimized to see structure We seek and use visual structure Reading is unnatural Our color vision is limited Our peripheral vision is poor

19 We perceive what we expect \ Our perception is biased by: Our experience The context Our goals

20 We perceive what we expect TopHat Question

21 We perceive what we expect We Perceive What We Expect! Page ! Next Back TopHat Question

22 We perceive what we expect We Perceive What We Expect! Page ! Back Next

23 Our Vision is Optimized to See Structure Gestalt Principles of Visual Perception Proximity: occurs when elements are placed close together. They tend to be perceived as a group. Similarity: occurs when objects look similar to one another. People often perceive them as a group or pattern. Continuity: occurs when the eye is compelled to move through one object and continue to another object. Closure: occurs when an object is incomplete or a space is not completely enclosed. If enough of the shape is indicated, people percieve the whole by filling in the missing information Symmetry: occurs when the mind perceives objects as being symmetrical and forming around a center point. It is perceptually pleasing to divide objects into an even number of symmetrical parts. Figure/ground: The eye differentiates an object form its surrounding area. a form, silhouette, or shape is naturrally perceived as figure (object), while the surrounding area is perceived as ground (background). Common fate: occurs when objects are perceived as lines that move along the smoothest path

24 Gestalt Principle: Closure We tend to see whole, closed objects, not collections of fragments Overlapping circles & triangles, not odd fragments

25 Gestalt Principle: Symmetry We tend to see simple figures rather than complex ones E.g., two overlapping diamonds; not other, more complex combinations

26 We Seek & Use Structure We Seek & Use Structure! Structured information is easier to perceive You are booked on United flight 237, which departs from Auckland at 2:30pm and arrives at San Francisco at 11:40am Tuesday 15 Oct Flight: United 237, Auckland San Francisco Flight: United 237, Auckland San Francisco Depart: Depart: 14:30 2:30pm Tue 15 Tue Oct 15 Oct Arrive: 11:40am Tue 15 Oct Arrive: 11:40 Tue 15 Oct

27 We Seek & Use Structure Visual hierarchy gets people to goal faster 20

28 Reading is Unnatural We re pre-wired for language Brain learns language easily in childhood Nearly everyone learns a language We are not pre-wired for reading Brain has no special facility for reading Learning reading is like learning other skills: writing, arithmetic, reading music, kung fu Many people never learn to read well, or at all

29 TopHat Attendance

30 Gestalt Principles TopHat Question

31 Colors Color is a powerful (visual) communication medium shapes our perception, interpretation and memory or what we see it can enhance the effectiveness of a message likewise, it may impair it Human color perception has both strengths and limitations vision optimized to detect contrast (edges) not absolute brightness our ability to distinguish colors depends on how colors are presented color-blindness the user s display and the environmental conditions affect color perception

32 Vision is Optimized for Edge Contrast, Not Brightness Opponent color process (subtractions) make our visual system much more sensitive to differences in color and brightness (edge contrast) than to absolute brightness levels Compare the two circles: are they the same? they are exactly the same (the size and the color shade) demonstrates insensitivity to absolute brightness

33 Vision is Optimized for Edge Contrast, Not Brightness Insensitivity to brightness and sensitivity to contrast by E. H. Adelson The squares marked A and B are the same gray. We see B as white because it is shaded by the cylinder! (check with an eyedropper) TopHat Question

34 Ability to Discriminate Colors Depends on how Colors are Presented Even our ability to detect color differences is limited Three presentation factors affect our ability to distinguish colors from each other A. Paleness: The paler (less saturated) two colors are, the harder is to tell them apart B. Color patch size: The smaller or thinner objects are, the harder it is to distinguish their colors C. Separation: The more separated color patches are, the more difficult it is to distinguish their colors, especially if the separation is great enough to require eye motion between patches

35 Our Color Vision is Limited A lot of people have color-blindness Approximately 8% of male and around 0.5% female population suffer some form of color-blindness E.g., colors that would be hard for red-green colorblind people to distinguish

36 Color-blindness Being color-blind does not mean seeing grey or black and white It means that one or more color subtraction channels do not function normally It becomes difficult to distinguish certain pairs of colors The most common type of colorblindness is red/green This means that your boss or even worse your investor is potentially affected normal color vision (1% of male population) (6% of male population) (1% of male population)

37 Opponent Colors Separate strong opponent colors placing opponent colors right next to or on top of each other causes a disturbing flickering sensation

38 Our Peripheral Vision is Poor

39 Our Peripheral Vision is Poor, so Common methods of getting seen Information where users are looking Near the error Use red for errors Use error symbol Heavy artillery: use with parsimony Popup in error dialog box Audio: beep Flash or wiggle briefly (not continuously)

40 Our Peripheral Vision is Poor, so Common methods of getting seen Information where users are looking Near the error Use red for errors Use error symbol Heavy artillery: use with parsimony Popup in error dialog box Audio: beep Flash or wiggle briefly (not continuously)

41 Exploiting Human Perceptual Facilities Use the eye for pattern recognition; people are good at scanning recognizing remembering images Graphical elements facilitate comparisons via length shape orientation texture Animation shows changes across time Color helps make distinctions Aesthetics make the process appealing

42 Interface-Building Tools Visual Thinking and Icons An icon is an image, picture, or symbol representing a concept Icon-specific guidelines Represent the object or action in a familiar manner Limit the number of different icons Make icons stand out from the background Consider three-dimensional icons Ensure a selected icon is visible from unselected icons Design the movement animation Add detailed information Explore combinations of icons to create new objects or actions 6-16

43 Next Steps Technical Lecture: Thu 4/14 -Data Mining, Data Processing and Data Modeling + Assignment 2 bootstrapping Technical Discussions (required), Fri 4/15 -Troubleshooting with Assignment 2 -Quiz on Week 2 Content Readings (required) - Shneiderman (Designing the User Interface) - Chapter 5 - Johnson (Designing With the Mind in Mind) - Chapter 1, 2, 3, 4, 5 Next Lecture: Tue 4/19 -The Art of Web and Visual Desing Now: Interactive Activity -Gestalt and Perception