What is an interface?

• How many different types of interfaces can you think of?

Command linealvarado@turing [5:46pm] ~/courses3 > mkdir cs121

alvarado@turing [5:46pm] ~/courses 4 > echo "CS121 is fun!"CS121 is fun! alvarado@turing [5:46pm] ~/courses 5 > cat "CS121 is fun"cat: cannot open CS121 is fun alvarado@turing [5:46pm] ~/courses 6 > man cat alvarado@turing [5:47pm] ~/courses 7 > echo "CS121 is fun!" > fun.txt alvarado@turing [5:48pm] ~/courses 8 > cat fun.txtCS121 is fun!

Pointing Devices

Desktop GUIS and applications

Web Applications

3D Desktops

Mobile Devices

Pen-based Interaction

Haptic Interfaces

http://www.sensable.com/products-haptic-devices.htm

Interactive Workspaces

Display Walls

Tabletop interaction

Tangible Computing

DataTiles

http://www.csl.sony.co.jp/person/rekimoto/datatile/http://tangible.media.mit.edu/index.php

Tangible Media GroupMIT Media Lab

Wearable Computers

Ambient Information

Voice and Multimodal Interaction

Embodied Interaction

Virtual Reality

Sensing Affect

Galvanic SkinResponse

(GSR) rings and bracelet

What do they all have in common?

They all require careful interface design and

evaluation

Norman's design principles

The Design of Everyday Things

That looks dangerous…

Design principles

• Generalizable abstractions for thinking about different aspects of design

• The do’s and don’ts of interaction design

• What to provide and what not to provide at the interface

• Derived from a mix of theory-based knowledge, experience and common-sense

Conceptual Models

• People always apply mental models of how things should work:– How do you drive a car?– How does an ATM work?

• A good design attempts to match the user’s conceptual model of how things should work

• Of course, design also influences the user’s conceptual model

Conceptual Models

Images from The Design of Everyday Things

Conveying a Conceptual Model:Norman's Design Principles

• Visibility

• Mapping

• Feedback

• Affordances

http://kwc.org/blog/archives/2005/2005-05-15.affordances_of_a_sevenfoot_egg.html

"What are the affordances of a 7-foot egg?"

Visibility

• Water control for a shower • How does it work?

From: www.baddesigns.com

"I used to have that awful shower controller where you pull down on the nozzle to turn it on. I had to tell every guest how to do it, and when we sold our house, we got a call from the new owners about 5 days later asking how to turn on the shower. They had been taking baths for 5 days! Unbelievable." - BL

Feedback

• Sending information back to the user about what has been done

• Includes sound, highlighting, animation and combinations of these

– e.g. when screen button clicked on provides sound or red highlight feedback:

“ccclichhk”

Mapping

• Relationship between controls and their movements and the results in the world

• Example: Balance and Fade in a car stereo

More on Mapping

Which controls go with which rings (burners)?

A B C D

Why is this a better design?

Consistency

• Design interfaces to have similar operations and use similar elements for similar tasks

• For example:– always use ctrl key plus first initial of the command

for an operation – ctrl+C, ctrl+S, ctrl+O

• Main benefit is consistent interfaces are easier to learn and use

When consistency breaks down

• E.g., more than one command starting with the same letter– e.g. save, spelling, select, style

• What to do?

• Problems with this solution?

Internal and external consistency

• Internal consistency– Behavior within an application – Difficult to achieve with complex interfaces

• External consistency – Behaviour across applications– Somewhat rare, but can you think of examples?

Keypad numbers layout

• A case of external inconsistency

1 2 3

4 5 6

7 8 9

7 8 9

1 2 3

4 5 6

0 0

(a) phones, remote controls (b) calculators, computer keypads

Affordances: to give a clue

• Affordances: The perceived and actual properties of an object that signal how the object can be used (from The Design of Everyday Things)

Physical Affordances

Physical Affordances

What do the Zune wheel and the door handle have in common?

Virtual Affordances

Click Me Click Me

"Quiz"Name(s):

Note the perceivedaffordances inthis interface.Are there anythat are missing?Misleading?

What are the affordances…

"What are the affordances of a 7-foot egg?"

• Cell phone design analysis