what is an interface? how many different types of interfaces can you think of?
TRANSCRIPT
![Page 1: What is an interface? How many different types of interfaces can you think of?](https://reader036.vdocuments.site/reader036/viewer/2022062801/56649e855503460f94b8767f/html5/thumbnails/1.jpg)
What is an interface?
• How many different types of interfaces can you think of?
![Page 2: What is an interface? How many different types of interfaces can you think of?](https://reader036.vdocuments.site/reader036/viewer/2022062801/56649e855503460f94b8767f/html5/thumbnails/2.jpg)
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!
![Page 3: What is an interface? How many different types of interfaces can you think of?](https://reader036.vdocuments.site/reader036/viewer/2022062801/56649e855503460f94b8767f/html5/thumbnails/3.jpg)
Pointing Devices
![Page 4: What is an interface? How many different types of interfaces can you think of?](https://reader036.vdocuments.site/reader036/viewer/2022062801/56649e855503460f94b8767f/html5/thumbnails/4.jpg)
Desktop GUIS and applications
![Page 5: What is an interface? How many different types of interfaces can you think of?](https://reader036.vdocuments.site/reader036/viewer/2022062801/56649e855503460f94b8767f/html5/thumbnails/5.jpg)
Web Applications
![Page 6: What is an interface? How many different types of interfaces can you think of?](https://reader036.vdocuments.site/reader036/viewer/2022062801/56649e855503460f94b8767f/html5/thumbnails/6.jpg)
3D Desktops
![Page 7: What is an interface? How many different types of interfaces can you think of?](https://reader036.vdocuments.site/reader036/viewer/2022062801/56649e855503460f94b8767f/html5/thumbnails/7.jpg)
Mobile Devices
![Page 8: What is an interface? How many different types of interfaces can you think of?](https://reader036.vdocuments.site/reader036/viewer/2022062801/56649e855503460f94b8767f/html5/thumbnails/8.jpg)
Pen-based Interaction
![Page 9: What is an interface? How many different types of interfaces can you think of?](https://reader036.vdocuments.site/reader036/viewer/2022062801/56649e855503460f94b8767f/html5/thumbnails/9.jpg)
Haptic Interfaces
http://www.sensable.com/products-haptic-devices.htm
![Page 10: What is an interface? How many different types of interfaces can you think of?](https://reader036.vdocuments.site/reader036/viewer/2022062801/56649e855503460f94b8767f/html5/thumbnails/10.jpg)
Interactive Workspaces
![Page 11: What is an interface? How many different types of interfaces can you think of?](https://reader036.vdocuments.site/reader036/viewer/2022062801/56649e855503460f94b8767f/html5/thumbnails/11.jpg)
Display Walls
![Page 12: What is an interface? How many different types of interfaces can you think of?](https://reader036.vdocuments.site/reader036/viewer/2022062801/56649e855503460f94b8767f/html5/thumbnails/12.jpg)
Tabletop interaction
![Page 13: What is an interface? How many different types of interfaces can you think of?](https://reader036.vdocuments.site/reader036/viewer/2022062801/56649e855503460f94b8767f/html5/thumbnails/13.jpg)
Tangible Computing
DataTiles
http://www.csl.sony.co.jp/person/rekimoto/datatile/http://tangible.media.mit.edu/index.php
Tangible Media GroupMIT Media Lab
![Page 14: What is an interface? How many different types of interfaces can you think of?](https://reader036.vdocuments.site/reader036/viewer/2022062801/56649e855503460f94b8767f/html5/thumbnails/14.jpg)
Wearable Computers
![Page 15: What is an interface? How many different types of interfaces can you think of?](https://reader036.vdocuments.site/reader036/viewer/2022062801/56649e855503460f94b8767f/html5/thumbnails/15.jpg)
Ambient Information
![Page 16: What is an interface? How many different types of interfaces can you think of?](https://reader036.vdocuments.site/reader036/viewer/2022062801/56649e855503460f94b8767f/html5/thumbnails/16.jpg)
Voice and Multimodal Interaction
![Page 17: What is an interface? How many different types of interfaces can you think of?](https://reader036.vdocuments.site/reader036/viewer/2022062801/56649e855503460f94b8767f/html5/thumbnails/17.jpg)
Embodied Interaction
![Page 18: What is an interface? How many different types of interfaces can you think of?](https://reader036.vdocuments.site/reader036/viewer/2022062801/56649e855503460f94b8767f/html5/thumbnails/18.jpg)
Virtual Reality
![Page 19: What is an interface? How many different types of interfaces can you think of?](https://reader036.vdocuments.site/reader036/viewer/2022062801/56649e855503460f94b8767f/html5/thumbnails/19.jpg)
Sensing Affect
Galvanic SkinResponse
(GSR) rings and bracelet
![Page 20: What is an interface? How many different types of interfaces can you think of?](https://reader036.vdocuments.site/reader036/viewer/2022062801/56649e855503460f94b8767f/html5/thumbnails/20.jpg)
What do they all have in common?
They all require careful interface design and
evaluation
Norman's design principles
![Page 21: What is an interface? How many different types of interfaces can you think of?](https://reader036.vdocuments.site/reader036/viewer/2022062801/56649e855503460f94b8767f/html5/thumbnails/21.jpg)
The Design of Everyday Things
That looks dangerous…
![Page 22: What is an interface? How many different types of interfaces can you think of?](https://reader036.vdocuments.site/reader036/viewer/2022062801/56649e855503460f94b8767f/html5/thumbnails/22.jpg)
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
![Page 23: What is an interface? How many different types of interfaces can you think of?](https://reader036.vdocuments.site/reader036/viewer/2022062801/56649e855503460f94b8767f/html5/thumbnails/23.jpg)
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
![Page 24: What is an interface? How many different types of interfaces can you think of?](https://reader036.vdocuments.site/reader036/viewer/2022062801/56649e855503460f94b8767f/html5/thumbnails/24.jpg)
Conceptual Models
Images from The Design of Everyday Things
![Page 25: What is an interface? How many different types of interfaces can you think of?](https://reader036.vdocuments.site/reader036/viewer/2022062801/56649e855503460f94b8767f/html5/thumbnails/25.jpg)
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?"
![Page 26: What is an interface? How many different types of interfaces can you think of?](https://reader036.vdocuments.site/reader036/viewer/2022062801/56649e855503460f94b8767f/html5/thumbnails/26.jpg)
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
![Page 27: What is an interface? How many different types of interfaces can you think of?](https://reader036.vdocuments.site/reader036/viewer/2022062801/56649e855503460f94b8767f/html5/thumbnails/27.jpg)
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”
![Page 28: What is an interface? How many different types of interfaces can you think of?](https://reader036.vdocuments.site/reader036/viewer/2022062801/56649e855503460f94b8767f/html5/thumbnails/28.jpg)
Mapping
• Relationship between controls and their movements and the results in the world
• Example: Balance and Fade in a car stereo
![Page 29: What is an interface? How many different types of interfaces can you think of?](https://reader036.vdocuments.site/reader036/viewer/2022062801/56649e855503460f94b8767f/html5/thumbnails/29.jpg)
More on Mapping
Which controls go with which rings (burners)?
A B C D
![Page 30: What is an interface? How many different types of interfaces can you think of?](https://reader036.vdocuments.site/reader036/viewer/2022062801/56649e855503460f94b8767f/html5/thumbnails/30.jpg)
Why is this a better design?
![Page 31: What is an interface? How many different types of interfaces can you think of?](https://reader036.vdocuments.site/reader036/viewer/2022062801/56649e855503460f94b8767f/html5/thumbnails/31.jpg)
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
![Page 32: What is an interface? How many different types of interfaces can you think of?](https://reader036.vdocuments.site/reader036/viewer/2022062801/56649e855503460f94b8767f/html5/thumbnails/32.jpg)
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?
![Page 33: What is an interface? How many different types of interfaces can you think of?](https://reader036.vdocuments.site/reader036/viewer/2022062801/56649e855503460f94b8767f/html5/thumbnails/33.jpg)
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?
![Page 34: What is an interface? How many different types of interfaces can you think of?](https://reader036.vdocuments.site/reader036/viewer/2022062801/56649e855503460f94b8767f/html5/thumbnails/34.jpg)
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
![Page 35: What is an interface? How many different types of interfaces can you think of?](https://reader036.vdocuments.site/reader036/viewer/2022062801/56649e855503460f94b8767f/html5/thumbnails/35.jpg)
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)
![Page 36: What is an interface? How many different types of interfaces can you think of?](https://reader036.vdocuments.site/reader036/viewer/2022062801/56649e855503460f94b8767f/html5/thumbnails/36.jpg)
Physical Affordances
![Page 37: What is an interface? How many different types of interfaces can you think of?](https://reader036.vdocuments.site/reader036/viewer/2022062801/56649e855503460f94b8767f/html5/thumbnails/37.jpg)
Physical Affordances
What do the Zune wheel and the door handle have in common?
![Page 38: What is an interface? How many different types of interfaces can you think of?](https://reader036.vdocuments.site/reader036/viewer/2022062801/56649e855503460f94b8767f/html5/thumbnails/38.jpg)
Virtual Affordances
Click Me Click Me
![Page 39: What is an interface? How many different types of interfaces can you think of?](https://reader036.vdocuments.site/reader036/viewer/2022062801/56649e855503460f94b8767f/html5/thumbnails/39.jpg)
"Quiz"Name(s):
Note the perceivedaffordances inthis interface.Are there anythat are missing?Misleading?
![Page 40: What is an interface? How many different types of interfaces can you think of?](https://reader036.vdocuments.site/reader036/viewer/2022062801/56649e855503460f94b8767f/html5/thumbnails/40.jpg)
What are the affordances…
"What are the affordances of a 7-foot egg?"
![Page 41: What is an interface? How many different types of interfaces can you think of?](https://reader036.vdocuments.site/reader036/viewer/2022062801/56649e855503460f94b8767f/html5/thumbnails/41.jpg)
• Cell phone design analysis