Conceptual Models & Interface Metaphors

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

Affordances

• Perceived and actual properties of an object that determine how the object could be used.

• Principles related to affordances:– Visibility– Mapping– Feedbac

What do these screen objects afford?

If you were a novice user, would you know what to do with them?

• This is a control panel for a hotel elevator.

• Push a button? Nothing happens. Now what?

www.baddesigns.com

How do you start the shower?

Which is better?

• Where do you plug in the mouse?

• Where do you plug in the keyboard?

• Do the color coded icons help?

From: www.baddesigns.com

Better Designs

From: www.baddesigns.com

Progress indicators

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)

Example: Norman’s Fridge

Why did he have trouble setting the temperature?

Example: Norman’s Fridge

User model Design model

Example: child’s book

• Dial 9• Look for 0• Dial 0• Dial 7

• Nothing happens!

Interface metaphors

• Interface designed to be similar to some object (usually physical)

• Idea: exploit user’s existing knowledge

Which are universal and which are culturally-specific?

Good interface metaphors?

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

The House Metaphor – Microsoft Bob, 1995

The House Metaphor – Microsoft Bob, 1995

The House Metaphor – Microsoft Bob, 1995

The House Metaphor – Microsoft Bob, 1995

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

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.