lecture 13. affordance & uaf

Download Lecture 13. affordance & uaf

Post on 23-Jan-2015

301 views

Category:

Education

3 download

Embed Size (px)

DESCRIPTION

 

TRANSCRIPT

  • 1. Lecture 13 Affordance & UAF UX Theory / IIT 2014 Spring Class hours : Monday 4 pm 7 pm 2nd June

2. Exercise13-1: Formative UX Inspection of Your System Goal To gain experience in writing effective benchmark tasks and measurable UX targets. Activities Unless you have another prototype, use the paper prototype you built in the previous exercise. If your paper prototype is not suitable for an effective exercise in UX inspection, select an application or appropriate Website as the target of your inspection. Perform a UX inspection as described in Chapter 13. If you are working with a team, use the team approach described in Chapter 13. Deliverables : A list of UX problems identified by your UX inspection. Schedule : An hour and a half. Lecture #13 IIT_UX Theory 2 3. AFFORDANCES DEMYSTIFIED Textbook Chapter 20. Lecture #13 IIT_UX Theory 3 4. WHAT ARE AFFORDANCES? The Concept of Affordance In HCI design, where we focus on helping the user, an affordance is something that helps a user do something. In interaction design, affordances are characteristics of user interface objects and interaction design features that help users perform tasks. Lecture #13 IIT_UX Theory 4 5. WHAT ARE AFFORDANCES? Definitions of the Different Kinds of Affordance (Hartson, 2003) Cognitive affordances help users with their cognitive actions: thinking, deciding, learning, remembering, and knowing about things. Physical affordances help users with their physical actions: clicking, touching, pointing, gesturing, and moving things. Sensory affordances help users with their sensory actions: seeing, hearing, and feeling (and tasting and smelling) things. Functional affordances help users do real work (and play) and get things done, to use the system to do work. Lecture #13 IIT_UX Theory 5 6. A LITTLE BACKGROUND Who invented the concept of affordances? Norman did introduce the concept to HCI (1990) The concept itself goes back at least as far as James J. Gibson (1977, 1979) Gibson is a perceptual psychologist who took an ecological approach to perception, meaning he studied the relationship between a living being and its environment, in particular what the environment offers or affords the animal. In his ecological view, affordance is reckoned with respect to the animal/user, which is part of the affordance relationship. Lecture #13 IIT_UX Theory 6 7. A LITTLE BACKGROUND And after Gaver(1991) sees affordances in design as a way of focusing on strengths and weaknesses of technologies with respect to the possibilities they offer to people who use them. He extends the concepts by showing how complex actions can be described in terms of groups of affordances, sequential in time and/or nested in space, showing how affordances can be revealed over time, with successive user actions, for example, in the multiple actions of a hierarchical drop-down menu. McGrenere and Ho (2000) may think design of cognitive affordances is acknowledged to be about design for the cognitive part of usability, ease of use in the form of learnability for new and intermittent users Lecture #13 IIT_UX Theory 7 8. FOUR KINDS OF AFFORDANCES IN UX DESIGN Cognitive Affordance Cognitive affordance is a design feature that helps, aids, supports, facilitates, or enables thinking, learning, understanding, and knowing about something. Cognitive affordances play starring roles in interaction design, especially for less experienced users who need help with understanding and learning. Symbol of an icon The form of a clear and concise button label Feed forward : semantics or meaning of user interface artifacts. Feedback helping a user know what happened after a button click. helps users in knowing whether the course of interaction has been successful so far. Lecture #13 IIT_UX Theory 8 9. FOUR KINDS OF AFFORDANCES IN UX DESIGN Physical Affordance Physical affordance is a design feature that helps, aids, supports, facilitates, or enables doing something physically. Adequate size and easy-to-access location could be physical affordance features of an interface button design enabling users to click easily on the button. Fitts law (Fitts, 1954; MacKenzie, 1992), physical disabilities and limitations, and physical characteristics of interaction devices and interaction techniques. Lecture #13 IIT_UX Theory 9 = + log 2 (1 + ) 10. FOUR KINDS OF AFFORDANCES IN UX DESIGN Sensory Affordance Sensory affordance is a design feature that helps, aids, supports, facilitates, or enables user in sensing (e.g., seeing, hearing, feeling) something. Sensory affordance is associated with the sense-ability characteristics of user interface artifacts, especially when it is used to help the user sense (e.g., see) cognitive affordances and physical affordances. noticeability, discernability, legibility (in the case of text), and audibility (in the case of sound) of features or devices associated with visual, auditory, haptic/tactile, or other sensations. Lecture #13 IIT_UX Theory 10 11. FOUR KINDS OF AFFORDANCES IN UX DESIGN Sensory Affordance (continued) Why do we call it sensory affordance and not perceptual affordance? In the general context of psychology, the concepts of sensing and perception are intertwined. To avoid this association, we use the term sensing instead of perception because it excludes the component of cognition usually associated with perception (Hochberg, 1964). This allows us to separate the concepts of sensory and cognitive affordance into mostly non-overlapping meanings. Lecture #13 IIT_UX Theory 11 12. FOUR KINDS OF AFFORDANCES IN UX DESIGN Functional Affordance Functional affordances connect physical user actions to invoke system, or back end, functionality. Functional affordances link usability or UX to usefulness and add purpose for physical affordance. They are about higher level user enablement in the work domain and add meaning and goal orientation to design discussions. an affordance helps or aids the user in doing something. We use the term functional affordance to denote this kind of higher level user enablement in the work domain. Lecture #13 IIT_UX Theory 12 13. FOUR KINDS OF AFFORDANCES IN UX DESIGN Lecture #13 IIT_UX Theory 13 Cognitive affordance Design feature that helps users in knowing Something A button label that helps users know what will happen if they click on it Physical affordance Design feature that helps users in doing a physical action in the interface A button that is large enough so that users can click on it accurately Sensory affordance Design feature that helps users sense something (especially cognitive affordances and physical affordances) A label font size large enough to be discerned Functional affordance Design feature that helps users accomplish work (i.e., usefulness of a system function) The internal system ability to sort a series of numbers (invoked by users clicking on the Sort button) Table 20-1 Summary of affordance types 14. AFFORDANCES IN INTERACTION DESIGN Communication and Cultural Conventions Cognitive Affordance as Information in the World Affordance RolesAn Alliance in Design Lecture #13 IIT_UX Theory 14 15. FALSE COGNITIVE AFFORDANCES MISINFORM AND MISLEAD Lecture #13 IIT_UX Theory 15 Figure 20-1 A door with a confusing sign containing conflicting cognitive affordances. 16. FALSE COGNITIVE AFFORDANCES MISINFORM AND MISLEAD Lecture #13 IIT_UX Theory 16 Figure 20-2 False cognitive affordances in a form letter that looks like an affordance to cut. 17. FALSE COGNITIVE AFFORDANCES MISINFORM AND MISLEAD Lecture #13 IIT_UX Theory 17 Figure 20-3 False cognitive affordances in a menu bar with links that look like buttons. 18. FALSE COGNITIVE AFFORDANCES MISINFORM AND MISLEAD Lecture #13 IIT_UX Theory 18 Figure 20-4 Radio switch with mixed affordances. 19. FALSE COGNITIVE AFFORDANCES MISINFORM AND MISLEAD Lecture #13 IIT_UX Theory 19 Figure 20-5 Useless dial marks between power settings on a microwave. 20. USER-CREATED AFFORDANCES AS A WAKE-UP CALL TO DESIGNERS Lecture #13 IIT_UX Theory 20 Figure 20-6 Misdirection in a cognitive affordance. 21. USER-CREATED AFFORDANCES AS A WAKE-UP CALL TO DESIGNERS Lecture #13 IIT_UX Theory 21 Figure 20-7 Glass door with a user added cognitive affordance (arrow) indicating proper operation. 22. USER-CREATED AFFORDANCES AS A WAKE-UP CALL TO DESIGNERS Lecture #13 IIT_UX Theory 22 Figure 20-8 A user-created cognitive affordance explaining copier darkness settings. 23. USER-CREATED AFFORDANCES AS A WAKE-UP CALL TO DESIGNERS Lecture #13 IIT_UX Theory 23 Figure 20-9 A user-made automobile cup-holder artifact, used with permission from Roundel magazine, BMW Car Club of America, Inc. (Howarth, 2002). 24. USER-CREATED AFFORDANCES AS A WAKE-UP CALL TO DESIGNERS Lecture #13 IIT_UX Theory 24 Figure 20-10 A user-created cognitive affordance to help users know how to insert blank letterhead stationery. 25. EMOTIONAL AFFORDANCES Lecture #13 IIT_UX Theory 25 Figure 20-11 A user-created cognitive affordance added to a roadside sign; see arrow on post to left of the sign. 26. EMOTIONAL AFFORDANCES Affordances that help lead users to a positive emotional response. This means features or design elements that make an emotional connection with the user. These will include design features that connect to our subconscious and intuitive appreciation of fun, aesthetics, and challenges to growth. This new kind of affordance plays well into the original Gibson ecological view of affordances that are about the relationship between a living being and its environment. This is just what we are talking about with respect to emotional impact, especially phenomenological aspects. Gibsons affordances are about values and meanings that can be perceived directly in the environment. Lecture #13 IIT_UX Theory 26 27. EMOTIONAL AFFORDANCES Emotional Impact Emotional impact is the affective co