interaction design basics, ch. 5 hci course, fall 2008 · interaction design basics, ch. 5 hci...
TRANSCRIPT
Interaction Design Basics, Ch. 5 HCI Course, Fall 2008
1
1/68
chapter 5
interaction design basics
2/68
chapter 5
interaction design basicsInteraciton design: A sub-discipline of designwhich examines the role of embeddedbehaviors and intelligence in physical and virtual spaces as well as the convergence of physical and digital products.
Sometimes referred to by the acronym "iD," interaction design has developed as a field of study in universities such as MIT, Carnegie-Mellon University, Malmö, etc. http://en.wikipedia.org/wiki/Interaction_Design
3/68
Interaction Design; Overview
1. The design process– what it is, design process
2. Navigation design (web and other systems)- finding your way around a system, 4 golden rules
3. Screen design&layout, e.g. physical controls - grouping, alignment, columns, space
4. Affordances and mappings- what kind of action does a system invite to?
- matching conceptual model with user mental model
5. Iteration and prototyping- never get it right first time!
4/68
what is design?
It is achieving goals within constraints
• goals - purpose– who is it for, why do they want it
• Constraints- materials (cheap-expensive),- platforms (wide-spread, robust)
• trade-offs- materials (price vs. durability),- platforms (popularity vs. safety)
5/68
1. The Design process
what iswanted
analysis
design
implementand deploy
prototype
interviewsethnography
what is therevs.
what is wanted
guidelinesprinciples
dialoguenotations
precisespecification
architecturesdocumentation
help
evaluationheuristics
scenariostask analysis
6/68
Steps …
• requirements– what is there and what is wanted …
• analysis (e.g. task analysis)– ordering and understanding
• design– what to do and how to decide
• iteration and prototyping– getting it right … and finding what is really needed!
• implementation and deployment– making it and getting it out there
Interaction Design Basics, Ch. 5 HCI Course, Fall 2008
2
7/68
2. Navigation design
Most systems offer a navigation function
the systems
info and help management messages
add user remove user
mainscreen
removeuser confirm
add user
8/68
Enabling backwards navigation throughWeb applicationsImproving user experience with the WebflowNavigation Manager FrameworkAn application consists of four pages, B1-B4.
9/68
Backwards Web navigation
To better understand the motivation behind WFNM, look at this example. Imagine a Web application with the navigation described in Figure 1. The application consists of four pages: b1, b2, b3, and b4.
Frameworks like Struts or JavaServer Faces can be configured, typically through an XML configuration file, to manage the forward navigation among these pages. But such frameworkstypically do not handle dynamic backwards navigation.
WebFlow Navigation Managerframework (WFNM) is a server-side navigation history of Web pages
http://www-128.ibm.com/developerworks/web/library/wa-webflow/
10/68
Four golden rules for navigation design;may apply to local and global structures
• knowing where you are• knowing what you can do• knowing where you are going
– or what will happen
• knowing where you’ve been– or what you’ve done
11/68
where you are
shows path through web site hierarchy
web sitetop level category sub-category
this page
live linksto higher
levels12/68
Heatmap-Based Visualization for Navigation of Large Web Pages
Atterer and Lorenzi (2008): A Heatmap-Based Visualization for Navigation Within Large Web Pages. Proc. ACM NordiCHI 2008.
www.heatmapapi.com
Paper: http://www.medien.ifi.lmu.de/pubdb/publications/pub/atterer2008nordichishortheat/atterer2008nordichishortheat.pdf
Interaction Design Basics, Ch. 5 HCI Course, Fall 2008
3
13/68
Navigation of knowledge structuresProject overview of 2D / 3D repr., 2002
Walden's Paths File System Navigator Cheops Hierarchy Browser VR-VIBE
Information Pyramides The Web Book WWW3D The Task Gallery
14/68
Navigation of knowledge structures
Knowledge mapping links:
Walden's PathsFile System NavigatorVR-VIBEInformation PyramidesThe Task Gallery
http://www.csdl.tamu.edu/walden/http://www.sgi.com/fun/freeware/3d_navigator.htmlhttp://www.crg.cs.nott.ac.uk/research/technologies/visualisation/vrvibe/http://www2.iicm.edu/keith/papers/vis97/ipyr.htmlhttp://research.microsoft.com/users/marycz/tg2000.pdf
15/68
KnowledgeMap project (Fjeld et al., 2002)3D representation of textbooks
http://people.ee.ethz.ch/~tdellspe/km/
Inspiration …
and paper sketches
16/68http://people.ee.ethz.ch/~tdellspe/km/
KnowledgeMap project (Fjeld et al., 2002)3D representation of textbooks (->math.)
17/68
3. Screen design and layout
basic principlesgrouping, structure, order
alignmentuse of white space
18/68
basic principles
• ask– what is the user doing?
• think– what information, comparisons, order
• design– form follows function
Interaction Design Basics, Ch. 5 HCI Course, Fall 2008
4
19/68
available tools
• grouping of items• (order of items) • (decoration - fonts, boxes etc.)• alignment of items• white space between items
20/68
grouping and structure
logically together ⇒ physically together
Billing details:NameAddress: …Credit card no
Delivery details:NameAddress: …Delivery time
Order details:item quantity cost/item costsize 10 screws (boxes) 7 3.71 25.97
…… … … …
21/68
alignment - numbers
think purpose!
which is biggest?
532.56179.3
256.31715
73.9481035
3.142497.6256
22/68
alignment - numbers
visually:long number = big number
align decimal pointsor right align integers
627.8651.005763
382.5832502.56
432.9352.0175
652.8756.34
23/68
multiple columns
• scanning across gaps hard:(often hard to avoid with large data base fields)
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
24/68
multiple columns - 2
• use leaders
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
Interaction Design Basics, Ch. 5 HCI Course, Fall 2008
5
25/68
multiple columns - 3
• or greying (vertical too)
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
26/68
sherbert 75toffee 120
chocolate 35fruit gums 27
coconut dreams 85
multiple columns - 4
• or even (with care!) ‘bad’ alignment
27/68
Using white space:space to separate
28/68
Using white space:space to structure
29/68
Using white space:space to highlight
30/68
Example: Physical controlsof a microwave oven
• grouping of items–defrost settings
– type of food
– time to cooktype of food
time to cook
defrost settings
Interaction Design Basics, Ch. 5 HCI Course, Fall 2008
6
31/68
physical controls
• grouping of items
• order of items1) type of heating
2) temperature
3) time to cook
4) start
4
4) start2
2) temperature
3
3) time to cook
11) type of heating
32/68
physical controls
• grouping of items
• order of items
• decoration– different colours
for different functions
– lines around relatedbuttons
different colours for different functions
lines around related buttons (temp up/down)
33/68
physical controls
• grouping of items
• order of items
• decoration
• alignment– centered text in buttons
? easy to scan ?? easy to scan ?
centred text in buttons
34/68
physical controls
• grouping of items
• order of items
• decoration
• alignment
• white space– gaps to aid groupinggaps to aid grouping
35/68
4. Perceptual ecology and affordances(introduced as approach to “Task Analysis”)
• Founded by J. J. Gibson (WWII pilot), applied on technology by D. Norman (80’s)
• ‘ecological optics’• not just retinal image, but ‘ambient optic
array’- depth perception of images/reality
• surfaces• texture gradients
36/68
The ‘visual cliff’
Interaction Design Basics, Ch. 5 HCI Course, Fall 2008
7
37/68
Optic flow field
The optic flow field is described as a two-dimensional motion field, specifying the direction of travel of the observer (O), here parallel to the ground surface.
Gibson proposed that the information waspresent everywhere in the optic flow field(i.e. irrespective of the moving observer'sdirection of gaze).
38/68
Affordances
• No need for cognitive processes to interpret visual input
• End product of perception is not an internal representation of the world, but...
• Detection of affordances• (Not the same as mental model)
39/68
Affordances
• What you can do with it
Sitting onEatingFearClimbable
Tree stumpFruitThunderStairs
AffordanceObject
40/68
D. Norman:
Technologyaffordances
(80’s)
41/68
Technology affordances: e.g. of doors
42/68
Definition of technology affordances
• Perceived and actual properties of things• ‘Fundamental properties that determine
just how the thing could possibly be used’
Question:How can technology affordancesbe designed?
Interaction Design Basics, Ch. 5 HCI Course, Fall 2008
8
43/68
Mappings
Make explicit the relationship between controls and functions
44/68
Mapping: Good or Bad UI Example?
http://www.system-concepts.com/articles/bloopers/article0044.html
45/68
Mapping: Bad UI Example• This picture shows an
oven hob. Which of the controls (numbered 1-4) would you use to light the hob at the back right (arrowed)?
• The answer is number4, yet most peopleguess 2.
• The cause of this design blooper is the mismatch between the user's mental modeland the designer'sconceptual model.
46/68
Mapping: Bad UI Example
• Users tend to hold the following mental model about the way the mapping works:--The top two controls map to the top two gas hobs, and the bottom two controls map to the bottom two gas hobs. So the correct knob is number 2.
• But the designers at Ariston had a different model. In their conceptual model, the mapping works in the following way:--The first knob controls the hob at the back left and then the others follow in an anti-clockwise direction. So the last gas hob in the anti-clockwise sequence(arrowed) is controlled by the last knob (number 4).
47/68
Mapping: Good UI ExampleIt is not easy to map a set of
one-dimensional controlsto a set of two-dimensional objects. To help people use this hob, we would recommendmatching the conceptualmodel to the user'smental model.
The designers couldemphasise this by off-setting controls 1 & 3 slightly to the left, and controls 2 & 4 slightly to the right. The match could be enhancedfurther by including a gap between each pair.
48/68
Constraints (1/3): Physical constraints
The technology/function is designed so that you can only physically interact with it in ways which will result in the intended action
Interaction Design Basics, Ch. 5 HCI Course, Fall 2008
9
49/68
Constraints (2/3): Logical constraints
Exploit people’s common-sense reasoning about the relationships between objects/actions
50/68
Constraints (3/3) : Cultural constraints
Learned arbitrary conventions that are well understood by a community of users
51/68
NTNU, TrondheimAnecdote
Telenor phoned an NTNU professorin Trondheim, who picked up hiscalculator and told how phone keys should be layout
52/68
Affordances and mappings: some issues
• What is directly perceived and what is learned?
• Is perception of an affordance just visual, or does it include auditory and tactile perception?
• How can we reduce cognitive load through designing affordances?
• Don’t we just ‘get used to things’anyway?
53/68
5. Iteration and prototyping
Iteration: Repeating a set or rules or steps over and over. One step is called an iterate.http://www-istp.gsfc.nasa.gov/stargaze/Sgloss.htm
Prototype: Prototypes or prototypical instancescombine the most representative attributes of a category. They are the best examples among the members of a category and serve as benchmarksagainst which the surrounding "poorer" instances are categorizedhttp://en.wikipedia.org/wiki/Prototype
54/68
Why Do We Prototype?
• Get feedback on our design faster– saves money
• Experiment with alternative designs• Fix problems before code is written• Keep the design centered on the user
Interaction Design Basics, Ch. 5 HCI Course, Fall 2008
10
55/68
Fidelity in Prototyping• Fidelity refers to the level of detail• High-fidelity?
– prototypes look like the final product
• Low-fidelity?
– artists renditions with many details missing
56/68
Low-fidelity Sketches / Paper prototypes
57/68
The Basic Materials
• Large, heavy, white paper (11 x 17)• 5x8 in. index cards• Tape, stick glue, correction tape• Pens & markers (many colors & sizes)• Overhead transparencies• Scissors, X-acto knives, etc.
58/68
59/68
Constructing the Model• Set a deadline
– don’t think too long - build it!
• Draw a window frame on large paper• Put different screen regions on cards
– anything that moves, changes, appears/disappears
• Ready response for any user action– e.g., have those pull-down menus already
made
• Use photocopier to make many versions
60/68
Preparing for a Test• Select your users
– understand background of intended users– use a questionnaire to get the people you
need– don’t use friends or family
• Prepare scenarios that are– typical of the product during actual use– make prototype support these (small, yet
broad)
• Practice to avoid “bugs”
Interaction Design Basics, Ch. 5 HCI Course, Fall 2008
11
61/68
Conducting a Test• Four test-subjects (minimum)
– greeter - puts users at ease & gets data– facilitator - only team member who speaks
• gives instructions & encourages thoughts, opinions
– computer - knows application logic & controls it• always simulates the response, w/o explanation
– observers - take notes & recommendations
• Typical session is 1 hour– preparation, the test, debriefing
62/68
Paper prototype of typical forms-filling screen.
Low-fidelity / paper prototyping
63/68
Paper prototype of a tabs-based design.
Low-fidelity / paper prototyping
64/68
Typical set-up of the usability laboratory for a test session with a paper prototype.
Low-fidelity / paper prototyping
65/68
User test of a low-fidelity paper prototype of a website.
Low-fidelity / paper prototyping
66/68
User test of a paper prototype of a device-based interaction (here: a mobile phone).
Low-fidelity / paper prototyping
Interaction Design Basics, Ch. 5 HCI Course, Fall 2008
12
67/68
Testing hardware user interfaces: mockup of a kiosk.
Low-fidelity / paper prototyping
68/68
Rudd, J., Stern, K., and Isensee, S. 1996. Low vs. high-fidelity prototyping debate. interactions 3, 1 (Jan. 1996), 76-85. http://doi.acm.org/10.1145/223500.223514
Yankelovich, N., “Bo” Begole, J., and Tang, J. C. 2000. Sun SharedShell tool. In Proceedings of the 2000 ACM Conference on Computer Supported Cooperative Work(Philadelphia, Pennsylvania, United States).CSCW '00. ACM Press, New York, NY, 351. http://portal.acm.org/citation.cfm?id=358916.361981
Real-life low-fidelity/paper prototyping: