What is an interface? How many different types of interfaces can you think of?
-
Upload
lionel-carson -
Category
Documents
-
view
213 -
download
0
Transcript of What is an interface? How many different types of interfaces can you think of?
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