Interaction Design Basics, Ch. 5 HCI Course, Fall 2006
1
1/67
chapter 5
interaction design basics
2/67
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/67
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/67
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/67
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/67
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 2006
2
7/67
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/67
Enabling backwards navigation throughWeb applicationsImproving user experience with the WebflowNavigation Manager FrameworkAn application consists of four pages, B1-B4.
9/67
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/67
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/67
where you are
shows path through web site hierarchy
web sitetop level category sub-category
this page
live linksto higher
levels12/67
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
Interaction Design Basics, Ch. 5 HCI Course, Fall 2006
3
13/67
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
14/67
KnowledgeMap project (Fjeld et al., 2002)3D representation of textbooks
http://people.ee.ethz.ch/~tdellspe/km/
Inspiration …
and paper sketches
15/67http://people.ee.ethz.ch/~tdellspe/km/
KnowledgeMap project (Fjeld et al., 2002)3D representation of textbooks (->math.)
16/67
3. Screen design and layout
basic principlesgrouping, structure, order
alignmentuse of white space
17/67
basic principles
• ask– what is the user doing?
• think– what information, comparisons, order
• design– form follows function
18/67
available tools
• grouping of items• (order of items) • (decoration - fonts, boxes etc.)• alignment of items• white space between items
Interaction Design Basics, Ch. 5 HCI Course, Fall 2006
4
19/67
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
…… … … …
20/67
alignment - numbers
think purpose!
which is biggest?
532.56179.3
256.31715
73.9481035
3.142497.6256
21/67
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
22/67
multiple columns
• scanning across gaps hard:(often hard to avoid with large data base fields)
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
23/67
multiple columns - 2
• use leaders
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
24/67
multiple columns - 3
• or greying (vertical too)
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
Interaction Design Basics, Ch. 5 HCI Course, Fall 2006
5
25/67
sherbert 75toffee 120
chocolate 35fruit gums 27
coconut dreams 85
multiple columns - 4
• or even (with care!) ‘bad’ alignment
26/67
Using white space:space to separate
27/67
Using white space:space to structure
28/67
Using white space:space to highlight
29/67
Example: Physical controlsof a microwave oven
• grouping of items–defrost settings
– type of food
– time to cooktype of food
time to cook
defrost settings
30/67
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
Interaction Design Basics, Ch. 5 HCI Course, Fall 2006
6
31/67
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)
32/67
physical controls
• grouping of items
• order of items
• decoration
• alignment– centered text in buttons
? easy to scan ?? easy to scan ?
centred text in buttons
33/67
physical controls
• grouping of items
• order of items
• decoration
• alignment
• white space– gaps to aid groupinggaps to aid grouping
34/67
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
35/67
The ‘visual cliff’
36/67
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).
Interaction Design Basics, Ch. 5 HCI Course, Fall 2006
7
37/67
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)
38/67
Affordances
• What you can do with it
Sitting onEatingFearClimbable
Tree stumpFruitThunderStairs
AffordanceObject
39/67
D. Norman:
Technologyaffordances
(80’s)
40/67
Technology affordances: e.g. of doors
41/67
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?
42/67
Mappings
Make explicit the relationship between controls and functions
Interaction Design Basics, Ch. 5 HCI Course, Fall 2006
8
43/67
Mapping: Good or Bad UI Example?
http://www.system-concepts.com/articles/bloopers/article0044.html
44/67
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.
45/67
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).
46/67
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.
47/67
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
48/67
Constraints (2/3): Logical constraints
Exploit people’s common-sense reasoning about the relationships between objects/actions
Interaction Design Basics, Ch. 5 HCI Course, Fall 2006
9
49/67
Constraints (3/3) : Cultural constraints
Learned arbitrary conventions that are well understood by a community of users
50/67
NTNU, TrondheimAnecdote
Telenor phoned an NTNU professorin Trondheim, who picked up hiscalculator and told how phone keys should be layout
51/67
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?
52/67
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
53/67
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
54/67
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
Interaction Design Basics, Ch. 5 HCI Course, Fall 2006
10
55/67
Low-fidelity Sketches / Paper prototypes
56/67
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.
57/67 58/67
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
59/67
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”
60/67
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
Interaction Design Basics, Ch. 5 HCI Course, Fall 2006
11
61/67
Paper prototype of typical forms-filling screen.
Low-fidelity / paper prototyping
62/67
Paper prototype of a tabs-based design.
Low-fidelity / paper prototyping
63/67
Typical set-up of the usability laboratory for a test session with a paper prototype.
Low-fidelity / paper prototyping
64/67
User test of a low-fidelity paper prototype of a website.
Low-fidelity / paper prototyping
65/67
User test of a paper prototype of a device-based interaction (here: a mobile phone).
Low-fidelity / paper prototyping
66/67
Testing hardware user interfaces: mockup of a kiosk.
Low-fidelity / paper prototyping
Interaction Design Basics, Ch. 5 HCI Course, Fall 2006
12
67/67
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.
Paper: http://portal.acm.org/citation.cfm?id=358916.361981
Real-life low-fidelity/paper prototyping:
Top Related