Presentation is loading. Please wait.

Presentation is loading. Please wait.

Human-Computer Interaction

Similar presentations


Presentation on theme: "Human-Computer Interaction"— Presentation transcript:

1 Human-Computer Interaction
Conceptual Design

2 Affordances Affordance: The perceived and actual properties of an object that determine how it could possibly be used. Knobs are for turning Some affordances are obvious, some learned Glass can be seen through Glass breaks easily Sometimes visual plus physical feedback Floppy disk example Rectangular – can’t insert sideways Tabs on the disk prevent the drive from letting it be fully inserted backwards

3 Affordances Perceived can differ from real affordance
Chair: real affordance Affords sitting Affords standing for changing a lightbulb Affords jamming a door open Chair: false affordance Can be moved, but not if bolted down

4 Affordances in Computer Screen-Based Interfaces
Designer only has control over perceived affordances Display screen, pointing device, selection buttons, keyboard These afford touching, pointing, looking, clicking on the display.

5 Affordances in Computer Screen-Based Interfaces
Most of this affordance is of no value Example: if the display is not touch-sensitive, even though the screen affords touching, touching has no effect. Example: does a graphical object on the screen afford clicking? yes, but the real question is does the user perceive this affordance; does the user recognize that clicking on the icon is a meaningful, useful action?

6 Visual affordances of a scrollbar

7 Mappings Mapping: Relationships between two things
Between controls and their results

8 Mappings For devices, appliances For computer UI design
Natural mappings use constraints and correspondences in the physical world Controls on a stove Controls on a car Radio volume Knob goes left to right to control volume Should also go in and out for front to rear speakers For computer UI design Mapping between controls and their actions on the computer Controls on a digital watch Controls on a word processor program

9 Mapping controls to physical outcomes
back right front left back left front right 24 possibilities, requires: -visible labels -memory arbitrary back front 2 possibilities per side =4 total possibilities paired full mapping

10 Transfer Effects People transfer their expectations from familiar objects to similar new ones positive transfer: previous experience applies to new situation negative transfer: previous experience conflicts with new situation

11 Cultural Associations
Groups of people learn idioms red = danger, green = go But these differ in different places Light switches America: down is off Britain: down is on Faucets America: counter-clockwise is on Britain: counter-clockwise is off

12 Mental Models People have mental models of how things work:
how does your car start? how does an ATM machine work? how does your computer boot? Allows people to make predictions about how things will work

13 Mental Models Mental models built from affordances constraints
mappings positive transfer cultural associations/standards instructions interactions

14 Good Example Scissors affordances: constraints mapping
holes for insertion of fingers blades for cutting constraints big hole for several fingers, small hole for thumb mapping between holes and fingers suggested and constrained by appearance positive transfer learnt when young conceptual model implications clear of how the operating parts work

15 Bad Example Digital Watch affordances contraints and mapping unknown
four push buttons, not clear what they do contraints and mapping unknown no visible relation between buttons and the end-result of their actions negative transfer little association with analog watches cultural standards somewhat standardized functionality, but highly variable conceptual model must be taught; not obvious

16 Digital Watch Redesigned for Affordances (Rachna Dhamija)

17 Digital Watch Redesigned for Affordances (Ping Yee)

18 Interface Metaphors Definition of Metaphor Purpose Problem
application of name or descriptive term to an object to which it is not literally applicable Purpose function as natural models leverages our knowledge of familiar, concrete objects/experiences to understand abstract computer and task concepts Problem metaphor may portray inaccurate or naive conceptual model of the system A presentation tool is like a slide projector

19 Interface Metaphors Use metaphors that matches user's conceptual task
desktop metaphor for office workers paintbrush metaphor for artists... Given a choice, choose the metaphor close to the way the system works Ensure emotional tone is appropriate to users E.g., file deletion metaphors trashcan black hole paper shredder pit bull terrier nuclear disposal unit...

20 Metaphors continued Caveat Common pitfalls metaphors can be overdone!
overly literal unnecessary fidelity excessive interactions overly cute novelty quickly wears off overly restrictive cannot move beyond mismatched does not match user’s task and/or thinking

21 Direct Manipulation Direct Engagement
the feeling of working directly on the task Direct Manipulation An interface that behaves as though the interaction was with a real-world object rather than with an abstract system Central ideas visibility of the objects of interest rapid, reversible, incremental actions manipulation by pointing and moving immediate and continuous display of results Almost always based on a metaphor mapped onto some facet of the real world task semantics

22 Object-Action vs Action-Object
Select object, then do action interface emphasizes 'nouns' (visible objects) rather than 'verbs' (actions) Advantages closer to real world modeless interaction actions always within context of object inappropriate ones can be hidden generic commands the same type of action can be performed on the object eg drag ‘n drop: my.doc move

23 Direct manipulation Representation directly determines what can manipulated

24 Phone list List metaphor Rolodex metaphor

25 Direct Manipulation Xerox Star: pioneered in early '80s, copied by almost everyone simulates desktop with icons in and out baskets file folders and documents calculators printers blank forms for letters and memos small number of generic actions applicable system wide move, copy, delete, show properties, again, undo, help eg same way to move text, documents, etc property sheets pop-up form, alterable by user What you see is what you get (WYSIWYG)

26 Xerox Star continued Star's observers:
objects understood in terms of their visual characteristics affordances, constraints actions understood in terms of their effects on the screen causality intuitively reasonable actions can be performed at any time conceptual model

27 Is direct manipulation the way to go?
Some Disadvantages Ill-suited for abstract operations spell-checker? Tedium manually search large database vs query Task domain may not have adequate physical/visual metaphor Metaphor may be overly-restrictive Solution: Most systems combine direct manipulation and abstractions word processor: WYSIWYG document (direct manipulation) buttons, menus, dialog boxes (abstractions, but direct manipulation “in the small”)

28 Conventional Applications: A Mix

29 Guidelines for Design Provide a good conceptual model
allows users to predict consequences of actions communicated through the image of the system Make things visible relations between user’s intentions, required actions, and results should be sensible consistent meaningful (non-arbitrary) make use of visible affordances, mappings, and constraints remind person of what can be done and how to do it

30 Summary Good Representations Metaphors Direct manipulation
captures essential elements of the event / world deliberately leaves out / mutes the irrelevant appropriate for the person, their task, and their interpretation Metaphors uses our knowledge of the familiar and concrete to represent abstract concepts need not be literal has limitations that must be understood Direct manipulation visibility of the objects of interest rapid, reversible, incremental actions manipulation by pointing and moving immediate and continuous display of results


Download ppt "Human-Computer Interaction"

Similar presentations


Ads by Google