usability paradigms and principles - uvic.caaalbu/hci/hci_8.pdf · dix chapter 4 direct...
TRANSCRIPT
![Page 1: Usability paradigms and principles - UVic.caaalbu/HCI/HCI_8.pdf · Dix Chapter 4 Direct Manipulation vs Interface Agents (available on the course site) 2 ... 6 Direct manipulation](https://reader033.vdocuments.net/reader033/viewer/2022052723/5f0dd0d47e708231d43c39cb/html5/thumbnails/1.jpg)
1
Usability paradigms and principles
Readings:Dix Chapter 4Direct Manipulation vs Interface Agents (available on the course site)
![Page 2: Usability paradigms and principles - UVic.caaalbu/HCI/HCI_8.pdf · Dix Chapter 4 Direct Manipulation vs Interface Agents (available on the course site) 2 ... 6 Direct manipulation](https://reader033.vdocuments.net/reader033/viewer/2022052723/5f0dd0d47e708231d43c39cb/html5/thumbnails/2.jpg)
2
Announcements
Assignment 2 will be released on June 12 (instead of June 5).Due date: June 26.
![Page 3: Usability paradigms and principles - UVic.caaalbu/HCI/HCI_8.pdf · Dix Chapter 4 Direct Manipulation vs Interface Agents (available on the course site) 2 ... 6 Direct manipulation](https://reader033.vdocuments.net/reader033/viewer/2022052723/5f0dd0d47e708231d43c39cb/html5/thumbnails/3.jpg)
3
Paradigms
Strategies for building interactive systemsDifferent interaction styles are based upon different paradigms
![Page 4: Usability paradigms and principles - UVic.caaalbu/HCI/HCI_8.pdf · Dix Chapter 4 Direct Manipulation vs Interface Agents (available on the course site) 2 ... 6 Direct manipulation](https://reader033.vdocuments.net/reader033/viewer/2022052723/5f0dd0d47e708231d43c39cb/html5/thumbnails/4.jpg)
4
Paradigms for interaction
Direct manipulationthe metaphorinformation visualization
Agent-based interfacesPervasive (ubiquitous computing)Computer supported cooperative work
![Page 5: Usability paradigms and principles - UVic.caaalbu/HCI/HCI_8.pdf · Dix Chapter 4 Direct Manipulation vs Interface Agents (available on the course site) 2 ... 6 Direct manipulation](https://reader033.vdocuments.net/reader033/viewer/2022052723/5f0dd0d47e708231d43c39cb/html5/thumbnails/5.jpg)
5
Direct manipulation
term coined by Ben SchneidermanShneiderman, B., 1983. Direct manipulation: A step beyond programming languages, IEEE Computer 16, 8, (August 1983), 57-69.earlier ideas, e.g., Sketchpad, NLS, already allowed direct manipulation.
![Page 6: Usability paradigms and principles - UVic.caaalbu/HCI/HCI_8.pdf · Dix Chapter 4 Direct Manipulation vs Interface Agents (available on the course site) 2 ... 6 Direct manipulation](https://reader033.vdocuments.net/reader033/viewer/2022052723/5f0dd0d47e708231d43c39cb/html5/thumbnails/6.jpg)
6
Direct manipulation
![Page 7: Usability paradigms and principles - UVic.caaalbu/HCI/HCI_8.pdf · Dix Chapter 4 Direct Manipulation vs Interface Agents (available on the course site) 2 ... 6 Direct manipulation](https://reader033.vdocuments.net/reader033/viewer/2022052723/5f0dd0d47e708231d43c39cb/html5/thumbnails/7.jpg)
7
Direct manipulation
preferred paradigm for graphical user interfaces GUIAlso in other types of UI:
E.g. a spreadsheet allows for operating directly with numbers
The user interacts with the visual representation of the data objectsAdvantages:
Exploits perceptual and motor skillsDepends less on linguistic skills than command-based and menu-form interfaces
![Page 8: Usability paradigms and principles - UVic.caaalbu/HCI/HCI_8.pdf · Dix Chapter 4 Direct Manipulation vs Interface Agents (available on the course site) 2 ... 6 Direct manipulation](https://reader033.vdocuments.net/reader033/viewer/2022052723/5f0dd0d47e708231d43c39cb/html5/thumbnails/8.jpg)
8
Direct Manipulation usually
Involves using the tools provided in the UI- e.g. drawing a rectangle in a
drawing programSome operations are done directly by
manipulating the object itself- e.g. changing the size of a rectangle
by dragging from a drag handleActivating the object changes its visual
appearance; thus feedback is immediate
![Page 9: Usability paradigms and principles - UVic.caaalbu/HCI/HCI_8.pdf · Dix Chapter 4 Direct Manipulation vs Interface Agents (available on the course site) 2 ... 6 Direct manipulation](https://reader033.vdocuments.net/reader033/viewer/2022052723/5f0dd0d47e708231d43c39cb/html5/thumbnails/9.jpg)
9
Direct manipulation: an example
I/O brush: The world as a palette © 2003-2005 MIT Media Lab
-drawing tool to explore colors, textures, and movements found in everyday materials by "picking up" and drawing with them.
-I/O Brush looks like a regular physical paintbrush but has a small video camera with lights and touch sensors embedded inside.
Behaviour:
- Outside of the drawing canvas, the brush can pick up color, texture, and movement of a brushed surface.
- On the canvas, artists can draw with the special "ink" they just picked up from their immediate environment.
http://web.media.mit.edu/~kimiko/iobrush/
![Page 10: Usability paradigms and principles - UVic.caaalbu/HCI/HCI_8.pdf · Dix Chapter 4 Direct Manipulation vs Interface Agents (available on the course site) 2 ... 6 Direct manipulation](https://reader033.vdocuments.net/reader033/viewer/2022052723/5f0dd0d47e708231d43c39cb/html5/thumbnails/10.jpg)
10
The I/O brush
![Page 11: Usability paradigms and principles - UVic.caaalbu/HCI/HCI_8.pdf · Dix Chapter 4 Direct Manipulation vs Interface Agents (available on the course site) 2 ... 6 Direct manipulation](https://reader033.vdocuments.net/reader033/viewer/2022052723/5f0dd0d47e708231d43c39cb/html5/thumbnails/11.jpg)
11
Direct manipulation (cont’d)
Three basic principles (Schneiderman)Continuous visual representation of the visible data objectsPhysical actions or labeled button pressesEffects of actions are rapid, incremental, and reversible
![Page 12: Usability paradigms and principles - UVic.caaalbu/HCI/HCI_8.pdf · Dix Chapter 4 Direct Manipulation vs Interface Agents (available on the course site) 2 ... 6 Direct manipulation](https://reader033.vdocuments.net/reader033/viewer/2022052723/5f0dd0d47e708231d43c39cb/html5/thumbnails/12.jpg)
12
Continuous visual representation
Visual representation of the data objects can be verbal (words) or iconic (pictures)opposite to visualization on command (ex: dir command in DOS) Examples
Icons representing files and folders on your desktopGraphical objects in a drawing editorText in a WYSIWYG editorEmail messages in your inbox
![Page 13: Usability paradigms and principles - UVic.caaalbu/HCI/HCI_8.pdf · Dix Chapter 4 Direct Manipulation vs Interface Agents (available on the course site) 2 ... 6 Direct manipulation](https://reader033.vdocuments.net/reader033/viewer/2022052723/5f0dd0d47e708231d43c39cb/html5/thumbnails/13.jpg)
13
Physical actions and labeled button presses
Physical actions are the most direct kind of actions in direct manipulation:
In standard desktop interfaces: clicking on an object to select itdragging it to move itdragging a selection handle to resize it
Direct manipulation based on physical actions is a central paradigm in virtual reality
![Page 14: Usability paradigms and principles - UVic.caaalbu/HCI/HCI_8.pdf · Dix Chapter 4 Direct Manipulation vs Interface Agents (available on the course site) 2 ... 6 Direct manipulation](https://reader033.vdocuments.net/reader033/viewer/2022052723/5f0dd0d47e708231d43c39cb/html5/thumbnails/14.jpg)
14
Direct manipulation in VR
![Page 15: Usability paradigms and principles - UVic.caaalbu/HCI/HCI_8.pdf · Dix Chapter 4 Direct Manipulation vs Interface Agents (available on the course site) 2 ... 6 Direct manipulation](https://reader033.vdocuments.net/reader033/viewer/2022052723/5f0dd0d47e708231d43c39cb/html5/thumbnails/15.jpg)
15
Direct manipulation: button presses
In standard desktop interfaces, not every interface function can be mapped to a physical action
e.g. converting text to boldface, text alignment etc.
Allow for “command” actions triggered by pressing a button
Is this direct manipulation?
![Page 16: Usability paradigms and principles - UVic.caaalbu/HCI/HCI_8.pdf · Dix Chapter 4 Direct Manipulation vs Interface Agents (available on the course site) 2 ... 6 Direct manipulation](https://reader033.vdocuments.net/reader033/viewer/2022052723/5f0dd0d47e708231d43c39cb/html5/thumbnails/16.jpg)
16
Effects of actions in direct manipulation
Rapid (within 100 ms); why?Incremental (continuous): dragging objects, or manipulating scroll-barReversible: DM should allow to undo the operation
obvious for physical actions (dragging, resizing etc.)Buttons have to be actionable in two states (do/undo)
![Page 17: Usability paradigms and principles - UVic.caaalbu/HCI/HCI_8.pdf · Dix Chapter 4 Direct Manipulation vs Interface Agents (available on the course site) 2 ... 6 Direct manipulation](https://reader033.vdocuments.net/reader033/viewer/2022052723/5f0dd0d47e708231d43c39cb/html5/thumbnails/17.jpg)
17
Direct manipulation cues
AffordancesConstraints Natural mappingVisibilityFeedback
![Page 18: Usability paradigms and principles - UVic.caaalbu/HCI/HCI_8.pdf · Dix Chapter 4 Direct Manipulation vs Interface Agents (available on the course site) 2 ... 6 Direct manipulation](https://reader033.vdocuments.net/reader033/viewer/2022052723/5f0dd0d47e708231d43c39cb/html5/thumbnails/18.jpg)
18
exercise
What are the useful affordances of the folder icon in the Windows interface?What process helps the user understand how the folder widget works?
![Page 19: Usability paradigms and principles - UVic.caaalbu/HCI/HCI_8.pdf · Dix Chapter 4 Direct Manipulation vs Interface Agents (available on the course site) 2 ... 6 Direct manipulation](https://reader033.vdocuments.net/reader033/viewer/2022052723/5f0dd0d47e708231d43c39cb/html5/thumbnails/19.jpg)
19
Metaphors
![Page 20: Usability paradigms and principles - UVic.caaalbu/HCI/HCI_8.pdf · Dix Chapter 4 Direct Manipulation vs Interface Agents (available on the course site) 2 ... 6 Direct manipulation](https://reader033.vdocuments.net/reader033/viewer/2022052723/5f0dd0d47e708231d43c39cb/html5/thumbnails/20.jpg)
20
How to build good conceptual models for GUI design?
Formulating an appropriate conceptual model and assuring that everything else is consistent with it.
Use metaphors (carefully)Find an analogue object in the real world so that you can use the power of the positive transfer
! Not all users may understand the point! They may take the metaphor too literally
and try to do actions that were not intended
![Page 21: Usability paradigms and principles - UVic.caaalbu/HCI/HCI_8.pdf · Dix Chapter 4 Direct Manipulation vs Interface Agents (available on the course site) 2 ... 6 Direct manipulation](https://reader033.vdocuments.net/reader033/viewer/2022052723/5f0dd0d47e708231d43c39cb/html5/thumbnails/21.jpg)
21
Metaphor: example #1
The Macintosh trashcan: good metaphor for deleting files and documentsStretching the trashcan metaphor to include the function of ejecting diskettes:
Drag an image of the diskette to the trashcan to eject it from the computerGood idea or bad?
"I don't want to delete the files on the diskette, I just want the computer to spit it out."
![Page 22: Usability paradigms and principles - UVic.caaalbu/HCI/HCI_8.pdf · Dix Chapter 4 Direct Manipulation vs Interface Agents (available on the course site) 2 ... 6 Direct manipulation](https://reader033.vdocuments.net/reader033/viewer/2022052723/5f0dd0d47e708231d43c39cb/html5/thumbnails/22.jpg)
22
Metaphor: example #2
Slide idea from MIT, Lecture notes on User interface design and implementation
![Page 23: Usability paradigms and principles - UVic.caaalbu/HCI/HCI_8.pdf · Dix Chapter 4 Direct Manipulation vs Interface Agents (available on the course site) 2 ... 6 Direct manipulation](https://reader033.vdocuments.net/reader033/viewer/2022052723/5f0dd0d47e708231d43c39cb/html5/thumbnails/23.jpg)
23
Metaphor: an example (cont’d)
Slide idea from MIT, Lecture notes on User interface design and implementation
![Page 24: Usability paradigms and principles - UVic.caaalbu/HCI/HCI_8.pdf · Dix Chapter 4 Direct Manipulation vs Interface Agents (available on the course site) 2 ... 6 Direct manipulation](https://reader033.vdocuments.net/reader033/viewer/2022052723/5f0dd0d47e708231d43c39cb/html5/thumbnails/24.jpg)
24
Metaphor: an example (cont’d)
Slide idea from MIT, Lecture notes on User interface design and implementation
![Page 25: Usability paradigms and principles - UVic.caaalbu/HCI/HCI_8.pdf · Dix Chapter 4 Direct Manipulation vs Interface Agents (available on the course site) 2 ... 6 Direct manipulation](https://reader033.vdocuments.net/reader033/viewer/2022052723/5f0dd0d47e708231d43c39cb/html5/thumbnails/25.jpg)
25
Lessons learned
interface metaphors can be misused;the presence of a metaphor does not at all guarantee an “intuitive”, or easy-to-learn, user interface. that beautiful graphic design doesn’t equal usability, and that graphic designers can be just as blind to usability problems as programmers can.metaphor is not the only way to build good conceptual models and achieve learnability.
Slide idea from MIT, Lecture notes on User interface design and implementation
![Page 26: Usability paradigms and principles - UVic.caaalbu/HCI/HCI_8.pdf · Dix Chapter 4 Direct Manipulation vs Interface Agents (available on the course site) 2 ... 6 Direct manipulation](https://reader033.vdocuments.net/reader033/viewer/2022052723/5f0dd0d47e708231d43c39cb/html5/thumbnails/26.jpg)
26
Lessons learned (cont’d)
Metaphor selection: one of the first and most important tasks in interface design. But…Good user interface design is not only based on metaphorsMetaphors constrain the conceptual model of the interaction. ‘Magical’ extensions of metaphors (ex. Trashcan) are mostly perceived as counterintuitive.Metaphors don’t usually scale very well
![Page 27: Usability paradigms and principles - UVic.caaalbu/HCI/HCI_8.pdf · Dix Chapter 4 Direct Manipulation vs Interface Agents (available on the course site) 2 ... 6 Direct manipulation](https://reader033.vdocuments.net/reader033/viewer/2022052723/5f0dd0d47e708231d43c39cb/html5/thumbnails/27.jpg)
27
Information visualization
Also based on the direct manipulation paradigm, since the user can manipulate data objects
![Page 28: Usability paradigms and principles - UVic.caaalbu/HCI/HCI_8.pdf · Dix Chapter 4 Direct Manipulation vs Interface Agents (available on the course site) 2 ... 6 Direct manipulation](https://reader033.vdocuments.net/reader033/viewer/2022052723/5f0dd0d47e708231d43c39cb/html5/thumbnails/28.jpg)
28
Information visualization
Interactive information visualization= dynamic queries
Filmfinder
![Page 29: Usability paradigms and principles - UVic.caaalbu/HCI/HCI_8.pdf · Dix Chapter 4 Direct Manipulation vs Interface Agents (available on the course site) 2 ... 6 Direct manipulation](https://reader033.vdocuments.net/reader033/viewer/2022052723/5f0dd0d47e708231d43c39cb/html5/thumbnails/29.jpg)
29
Agent-based interfaces
Software agent=a paradigm for personalized HCI
A software agent knows the individual user’s habits, preferences, and interests
Proactive (takes initiatives)Adaptive (tracking users interests as they change over time)Run autonomously (can act on your behalf while you are doing other things)
![Page 30: Usability paradigms and principles - UVic.caaalbu/HCI/HCI_8.pdf · Dix Chapter 4 Direct Manipulation vs Interface Agents (available on the course site) 2 ... 6 Direct manipulation](https://reader033.vdocuments.net/reader033/viewer/2022052723/5f0dd0d47e708231d43c39cb/html5/thumbnails/30.jpg)
30
Why do we need agents?
The current computer environment is getting more and more complexNumber of tasks to take care of (# of issues to track) are continuously increasingWhenever workload gets to high, there is a point where a person has to delegate.
![Page 31: Usability paradigms and principles - UVic.caaalbu/HCI/HCI_8.pdf · Dix Chapter 4 Direct Manipulation vs Interface Agents (available on the course site) 2 ... 6 Direct manipulation](https://reader033.vdocuments.net/reader033/viewer/2022052723/5f0dd0d47e708231d43c39cb/html5/thumbnails/31.jpg)
31
Agents learn about the userExample of an agent:
Letizia – an agent that assists web browsingNo visible body or character in the interfaceThe user operates a conventional web browserThe agent tracks user behaviour and attempts to
anticipate items of interest
http://agents.www.media.mit.edu/people/lieber/Lieberary/Letizia/Letizia.html
"Letizia Avarez de Toledo has observed that this vast library is useless: rigorously speaking, a single volume would be sufficient, a volume of ordinary format, printed in nine or ten point type, containing an infinite number of infinitely thin leaves." - Jorge Luis Borges, The Library of Babel
![Page 32: Usability paradigms and principles - UVic.caaalbu/HCI/HCI_8.pdf · Dix Chapter 4 Direct Manipulation vs Interface Agents (available on the course site) 2 ... 6 Direct manipulation](https://reader033.vdocuments.net/reader033/viewer/2022052723/5f0dd0d47e708231d43c39cb/html5/thumbnails/32.jpg)
32
Letizia video
http://agents.www.media.mit.edu/people/lieber/Lieberary/Letizia/Letizia.html
![Page 33: Usability paradigms and principles - UVic.caaalbu/HCI/HCI_8.pdf · Dix Chapter 4 Direct Manipulation vs Interface Agents (available on the course site) 2 ... 6 Direct manipulation](https://reader033.vdocuments.net/reader033/viewer/2022052723/5f0dd0d47e708231d43c39cb/html5/thumbnails/33.jpg)
33
What triggers the agent?
Eager – an eager assistant; videoAllan Cypher, Eager: Programming repetitive tasks by example. Proc CHI91Helps with repetitive tasksProblems:
What if the user makes an errorHow can you make Eager stopUsers reluctant to let Eager finish the work
http://www.acypher.com/Publications/CHI91/EagerCHI.html
![Page 34: Usability paradigms and principles - UVic.caaalbu/HCI/HCI_8.pdf · Dix Chapter 4 Direct Manipulation vs Interface Agents (available on the course site) 2 ... 6 Direct manipulation](https://reader033.vdocuments.net/reader033/viewer/2022052723/5f0dd0d47e708231d43c39cb/html5/thumbnails/34.jpg)
34
Interactive assistance in MS Office 97The notion of interactive assistance is OK.
But…
The implementation in MS Office 97 as an animated paperclip is intrusive:
- Always on screen
- Incessant animation is distracting the user from the task; when it “speaks”, you cannot help but listen
- closing it is only temporary; the paperclip reappears when the users accesses the Help menu
- Children love the paperclip
What went wrong in the design of the Office Assistant?
![Page 35: Usability paradigms and principles - UVic.caaalbu/HCI/HCI_8.pdf · Dix Chapter 4 Direct Manipulation vs Interface Agents (available on the course site) 2 ... 6 Direct manipulation](https://reader033.vdocuments.net/reader033/viewer/2022052723/5f0dd0d47e708231d43c39cb/html5/thumbnails/35.jpg)
35
Agent-based interfaces versus direct manipulation
The two paradigms do not exclude each other
“Opponents of agents typically argue that well-designed visualization interfaces are better. […] you still need a well-designed interface when incorporating agents in an application. However, some tasks I may just not want to do myself even if the interface was perfect. If my car had a perfect interface for fixing the engine, I still wouldn’t fix it. I just don’t want to bother with fixing cars. I want someone else to do it.”
Pattie Maes
![Page 36: Usability paradigms and principles - UVic.caaalbu/HCI/HCI_8.pdf · Dix Chapter 4 Direct Manipulation vs Interface Agents (available on the course site) 2 ... 6 Direct manipulation](https://reader033.vdocuments.net/reader033/viewer/2022052723/5f0dd0d47e708231d43c39cb/html5/thumbnails/36.jpg)
36
Human interaction with pervasive computers
Major aspects of pervasive computing:Computing is spread throughout the environmentUsers are mobileInformation appliances are becoming increasingly availableCommunication is made easier
Between individualsBetween individuals and thingsBetween things
![Page 37: Usability paradigms and principles - UVic.caaalbu/HCI/HCI_8.pdf · Dix Chapter 4 Direct Manipulation vs Interface Agents (available on the course site) 2 ... 6 Direct manipulation](https://reader033.vdocuments.net/reader033/viewer/2022052723/5f0dd0d47e708231d43c39cb/html5/thumbnails/37.jpg)
37
A simple scenario for pervasive computing
You walk up to an exercise machine and you wear some sort of identifier, biosensors etc.The exercise machine knows how to train and reward you“Hi Wendy, it’s been two days since you worked out.I think you’re ready to raise the weight by ten pounds. What do you say?”
User-machine dialogueContinuous feedback as the user works out: the machine
encourages the user to pull faster, longer, or slower to get a better workout.
After finishing the workout:“ You’ve had a great workout. Go over to the vending
machine and get yourself a reward”- The exercise machine activates the vending machine.
![Page 38: Usability paradigms and principles - UVic.caaalbu/HCI/HCI_8.pdf · Dix Chapter 4 Direct Manipulation vs Interface Agents (available on the course site) 2 ... 6 Direct manipulation](https://reader033.vdocuments.net/reader033/viewer/2022052723/5f0dd0d47e708231d43c39cb/html5/thumbnails/38.jpg)
38
Ongoing projects on pervasive computing: intelligent environments
MIT House_n project:
Georgia Tech: the Aware home:“Is it possible to create a home environment that is aware of its occupants whereabouts and activities? If we build such a home, how can it provide services to its residents that enhance their quality of life or help them to maintain independence as they age?”
http://www.awarehome.gatech.edu/
http://architecture.mit.edu/house_n/
![Page 39: Usability paradigms and principles - UVic.caaalbu/HCI/HCI_8.pdf · Dix Chapter 4 Direct Manipulation vs Interface Agents (available on the course site) 2 ... 6 Direct manipulation](https://reader033.vdocuments.net/reader033/viewer/2022052723/5f0dd0d47e708231d43c39cb/html5/thumbnails/39.jpg)
39
Computer-supported cooperative work
CSCW removes bias of single user / single computer system
Electronic mail is most prominent success: facilitates collaborations between people in remote locations
Other examples: tele-medicine, tele-presence etc.But also…Small group collaboration when people are in the same place: the Merl Diamond Touch tablea display interface that allows users to maintain eye contact while interacting with the display simultaneously (i.e., without having to take turns).
http://www.merl.com/projects/DiamondTouch/
![Page 40: Usability paradigms and principles - UVic.caaalbu/HCI/HCI_8.pdf · Dix Chapter 4 Direct Manipulation vs Interface Agents (available on the course site) 2 ... 6 Direct manipulation](https://reader033.vdocuments.net/reader033/viewer/2022052723/5f0dd0d47e708231d43c39cb/html5/thumbnails/40.jpg)
40
The MERL Diamond touch table