interaction design basics, ch. 5 hci course, fall 2008 · interaction design basics, ch. 5 hci...

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


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


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


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



5

25/68


• or greying (vertical too)


26/68

sherbert 75toffee 120

chocolate 35fruit gums 27

coconut dreams 85


• 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


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


• 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


• order of items

• decoration

• alignment– centered text in buttons

? easy to scan ?? easy to scan ?

centred text in buttons

34/68

physical controls


• 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’


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?


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


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


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”


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.


64/68

Typical set-up of the usability laboratory for a test session with a paper prototype.


65/68

User test of a low-fidelity paper prototype of a website.


66/68

User test of a paper prototype of a device-based interaction (here: a mobile phone).



12

67/68

Testing hardware user interfaces: mockup of a kiosk.


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:

interaction design basics, ch. 5 hci course, fall 2008 · interaction design basics, ch. 5 hci...

Documents