1. Conceptual Models & Interface Metaphors

2. Objectives By the end of this class, you will be able to… Define conceptual model Identify instances where the user’s model, system image, and design model do not match, and explain why this is important Describe & apply several design guidelines Define “interface metaphor” and choose an appropriate metaphor for a product

3. Affordances Perceived and actual properties of an object that determine how the object could be used. Principles related to affordances: –Visibility –Mapping –Feedbac

6. What do these screen objects afford? If you were a novice user, would you know what to do with them?

7. This is a control panel for a hotel elevator. Push a button? Nothing happens. Now what? www.baddesigns.com

8. How do you start the shower?

11. Which is better?

12. Where do you plug in the mouse? Where do you plug in the keyboard? Do the color coded icons help? From: www.baddesigns.com

13. Better Designs From: www.baddesigns.com

14. Progress indicators

15. Conceptual Models A person’s understanding of how a system operates Depends on the person: –User model – a user’s conceptual model –Design model – a designer’s conceptual model How is the design model conveyed to the user? –Through the system image (interface)

16. Example: Norman’s Fridge Why did he have trouble setting the temperature?

17. Example: Norman’s Fridge User model Design model

18. Example: child’s book Dial 9 Look for 0 Dial 0 Dial 7 Nothing happens!

19. Interface metaphors Interface designed to be similar to some object (usually physical) Idea: exploit user’s existing knowledge

20. Which are universal and which are culturally-specific?

21. Good interface metaphors?

22. Welcome to the future; one without distracting windows and menu bars. The RealPhone is an experiment in user interface design for a new, real-world user interface style... http://homepage.mac.com/bradster/iarchitect/phone.htm

23. The House Metaphor – Microsoft Bob, 1995

28. What makes a good interface metaphor? Not too literal: takes ideas from the physical device that transfer easily to GUIs Doesn’t clutter or complicate the interface unnecessarily

29. Key concepts Make controls visible and make their operation clear. Provide natural mappings between controls and their functions. Provide meaningful feedback so the user knows what action has been performed. Appropriate metaphors can be helpful, but skills do not always transfer.