Interaction Design Basics

1. Design: Interaction
Design Basics
Preeti Mishra
Course Instructor

2. Introduction
 Interaction design is about creating interventions in
often complex situations using technology of many
kinds including PC software, the web and physical
devices

3. Introduction
 Design involves:
 achieving goals within constraints and trade-off
between these
 understanding the raw materials: computer and human
 accepting limitations of humans and of design
 The design process has several stages and is
iterative and never complete.

4. Introduction
 Interaction starts with getting to know the users and
their context: finding out who they are and what they
are like ...
 talking to them, watching them
 Scenarios are rich design stories, which can be used
and reused throughout design: they help us see what
users will want to do( Persona )
 they give a step-by-step walkthrough of user’s
interactions: including what they see, do and are
thinking

5. Interaction Design
Basic Terms

6. Basic Terms
 Design:
 – Interaction, interventions, goals, constraints
 • the design process
 – what happens when
 •users
 – who they are, what they are like ...
 • scenarios
 – rich stories of design
 • navigation
 – finding your way around a system
 • iteration and prototypes
 – never get it right first time!

7. Basic Terms
 Goals
 Purpose of design that in intended to be produced
 Constraints
 What materials, some standards, cost/ time limitations
 Trade-off
 Choosing which goals/ constraints can be relaxed or
can be given more importance

8. Design: Definition
 what is design?
 achieving goals within constraints
 We already know what are :
 Goals
 Constraints
 Trade-off

9. Golden rule of design
understand your materials

10. Understand Your Materials
 • understand computers
 – limitations, capacities, tools, platforms
 • understand people
 – psychological, social aspects
 – human error
 • and their interaction .

11. Human Errors!!
 accident reports ..
 – air crash, industrial accident, hospital mistake
 – enquiry ... blames ... ‘human error’
 human ‘error’ is normal
 – we know how users behave under stress
 – so design for it!

13. Steps ...
 • requirements
 – what is there and what is wanted ...
 •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

14. Four basic activities
There are four basic activities in Interaction Design:
1. Identifying needs and establishing requirements
2. Developing alternative designs
3. Building interactive versions of the designs
4. Evaluating designs

15. A simple interaction design model
Evaluate
(Re)Design
Identify needs/
establish
requirements
Build an
interactive
version
Final product

16. Some practical issues
•Who are the users?
•What are ‘needs’?
•Where do alternatives come from?
•How do you choose among alternatives?

17. Who are the users?
•Not as obvious as you think:
—those who interact directly with the product
—those who manage direct users
—those who receive output from the product
—those who make the purchasing decision
—those who use competitor’s products ???
•Three categories of user:
—primary: frequent hands-on
—secondary: occasional or via someone else;
—tertiary: affected by its introduction, or will influence its
purchase.
Wider term: stakeholders

18. Who are the users? (cont’d)
•What are their capabilities? Humans vary in
many dimensions!
•Some examples are:
—size of hands may affect the size and
positioning of input buttons;
—motor abilities may affect the suitability of
certain input and output devices;
—height if designing a physical kiosk;
—strength - a child’s toy requires little
strength to operate, but greater strength to
change batteries

19. Who are the stakeholders?
Check-out operators
Customers
Managers and owners
• Suppliers
• Local shop
owners

20. What are ‘needs’?
•Users rarely know what is possible
•Users can’t tell you what they ‘need’ to help them
achieve their goals
•Instead, look at existing tasks:
—their context
—what information do they require?
—who collaborates to achieve the task?
—why is the task achieved the way it is?
•Envisioned tasks:
— can be rooted in existing behaviour
— can be described as future scenarios

21. Where do alternatives come
from?
• Humans stick to what they know works
• But considering alternatives is important to ‘break
out of the box’
• Designers are trained to consider alternatives,
software people generally are not
• How do you generate alternatives?
—‘Flair and creativity’: research & synthesis
—Seek inspiration: look at similar products or look
at very different products

22. Idea Generation
 Brainstorm
 Group vs. Individual Creativity
 More Ideas => More Creative => Better
 Limited Time
 Keep a Record
 The rules
 Be visual.
 Defer judgment.
 Encourage wild ideas.
 Build on the ideas of others.
 Go for quantity.
 Stay focused on the topic

23. How do you choose among
alternatives?
• Evaluation with users or with peers e.g. prototypes
• Technical feasibility: some not possible
• Quality thresholds: Usability goals lead to usability
criteria (set early and checked regularly)
—safety: how safe?
—utility: which functions are superfluous?
—effectiveness: appropriate support? task coverage,
information available
—efficiency: performance measurements

24. Design Approaches

25. Few Types of Interaction
Designs
 User- centered design
 ƒParticipatory design
 Scenario Based design
 Navigation Design
 ƒScreen Design, Layout, Dialog Design
 Iteration and Prototyping

26. User Centered Design

27. User Centered Design
 Developers working with target users
 Think of the world in users’ terms
 Identify usability and user experience goals
 Understanding work process
 Not technology- centered /feature driven

28. Why User Centered Design
 Nearly 25% of all applications projects fail. Why?
 􀂄 overrun budgets & management pulls the plug
 􀂄 others complete, but are too hard to learn/use
 􀂄 Solution is user- cantered design. Why?
 􀂄 easier to learn & use products sell better
 􀂄 can help keep a product on/ahead of schedule
 􀂄 training costs reduced

29. Norman’s Philosophy
 Norman (1988) advocated user-centred design as a
philosophy of putting users and usability ahead of aesthetics.
 He proposed following seven principles:
 1. Use knowledge both in-the-world and in-the-head
 2. Simplify task structure
 3. Bridge gulfs of execution and evaluation
 4. Get mappings right
 5. Exploit constraints
 6. Design for error
 7. When all else fails, standardize

30. Know your Stakeholders
 Who are the users of the document?
 What are the users’ tasks and goals?
 What are the users’ experience levels with the document,
and documents like it?
 What functions do the users need from the document?
 What information might the users need, and in what form
do they need it?
 How do users think the document should work?
 What are the extreme environments?
 Is the user multitasking?
 Does the interface utilize different inputs modes such as
touching, spoken, gestures, or orientation?

31. Elements of
User Centered Design
 Visibility
 Visibility helps the user construct a mental model of the
document.
 Models help the user predict the effect(s) of their actions while
using the document.
 Important elements (such as those that aid navigation) should be
emphatic.
 Users should be able to tell from a glance what they can and
cannot do with the document.

32. Options for text font are clearly visible along with
other alternatives

33. Elements of
User Centered Design
 Accessibility
 Users should be able to find information quickly and easily
throughout the document, regardless of its length.
 Users should be offered various ways to find information (such as
navigational elements, search functions, table of contents, clearly
labelled sections, page numbers, colour-coding, etc.).
 Navigational elements should be consistent with the genre of the
document. ‘Chunking’ is a useful strategy that involves breaking
information into small pieces that can be organized into some
type meaningful order or hierarchy.
 The ability to skim the document allows users to find their piece of
information by scanning rather than reading. Bold and italic words
are often used.

34. Options chunked over logical groups

35. Elements of
User Centered Design Legibility
 Text should be easy to read:
Through analysis of the rhetorical
situation, the designer should be
able to determine a useful font
style.
 Ornamental fonts and text in all
capital letters are hard to read, but
italics and bolding can be helpful
when used correctly.
 Large or small body text is also
hard to read. (Screen size of 10-12
pixel sans serif and 12-16 pixel
serif is recommended.)

36. Legibility
 Choose a common font
with recognizable
letterforms for large
bodies of text
 Use a font size of at least
10-14 points
 Present blocks of texts in
column; don’t let text
span the entire length of
the screen on a wide
screen display
 Choose text and
background colours with
a high luminance contrast

37. To do..
 Find difference between legibility and readability !!
 Read the paper:
http://superawesomegood.com/wp-
content/uploads/2012/02/SKellyTGregory-
Typography.pdf

38. Elements of
User Centered Design
 Language
 Depending on the rhetorical situation, certain types of language
are needed.
 Short sentences are helpful, as are well-written texts used in
explanations and similar bulk-text situations.
 Unless the situation calls for it, jargon or technical terms should
not be used. Many writers will choose to use active voice, verbs
(instead of noun strings or nominal's), and simple sentence
structure.

40. Usability

41. Introduction
 Usability is the ease of use and learnability of a human-
made object.
 The object of use can be a software application, website,
book, tool, machine, process, or anything a human
interacts with.

42. Who does the job??
 A usability study may be conducted as a primary job
function by a usability analyst or as a secondary job
function by designers, technical writers, marketing
personnel, and others.
 It is widely used in consumer electronics, communication,
and knowledge transfer objects (such as a cookbook, a
document or online help) and mechanical objects such as
a door handle or a hammer.

43. Usability Includes
 Usability includes
 methods of measuring usability, such as needs analysis
 and the study of the principles behind an object's perceived
efficiency or elegance.
 In human-computer interaction and computer science,
usability studies the elegance and clarity with which the
interaction with a computer program or a web site is
designed.
 Usability differs from user satisfaction and user
experience because usability also considers usefulness.

44. Definition
 "The extent to which a product can be used by
specified users to achieve specified goals with
effectiveness, efficiency, and satisfaction in a
specified context of use.
 " The word "usability" also refers to methods for
improving ease-of-use during the design
process.

45. To do..
 Difference between usability and user experience
 ISO Definition: Usability is concerned with the “effectiveness,
efficiency and satisfaction with which specified users achieve
specified goals in particular environments” (ISO 9241-11) [1]
whilst user experience is concerned with “all aspects of the
user’s experience when interacting with the product, service,
environment or facility”
 Refer to: http://usabilitygeek.com/the-difference-
between-usability-and-user-experience/

46. Scenario Based
Design

47. Scenario??
 what will users want to do?
 step-by-step walkthrough
 – what can they see (sketches, screen
shots)
 – what do they do (keyboard, mouse
etc.)
 – what are they thinking?
 use and reuse throughout design

48. Scenarios are..
 stories for design
 communicate with others
 validate other models
 understand dynamics
 linearity
 time is linear - our lives are linear
 but don’t show alternatives

49. Use Scenario to
 communicate with others
 designers, clients, users
 validate other models
 ‘play’ it against other models
 express dynamics
 screenshots – appearance
 scenario – behaviour

50. Explore the Depths
 explore interaction
 what happens when
 explore cognition
 what are the users thinking
 explore architecture
 what is happening inside

51. Linearity
 Scenarios – one linear path through system
 Pros:
 life and time are linear
 easy to understand (stories and narrative are natural)
 concrete (errors less likely)
 Cons:
 no choice, no branches, no special conditions
 miss the unintended
 So:
 use several scenarios
 use several methods

52. Example of Scenario
 Scenario for purchasing an airline ticket
 Teena wants to fly to Czechoslovakia next Thursday,
returning on the last flight on Friday. She wants to
know how much this would cost, and whether it would
be cheaper to take a different flight back. She is not
quite sure how Czechoslovakia is spelt on the
computer. When she has found the right flight, she
wants to confirm the purchase with a credit card.

53. Participatory Design

54. Introduction
 Participatory design (PD) is a set of theories, practices, and
studies related to end users as full participants in activities
 The field of participatory design grew out of work beginning
in the early 1970s in Norway, when computer professionals
worked with members of the Iron and Metalworkers Union to
enable the workers to have more influence on the design
and introduction of computer systems into the workplace.

55. How to proceed??
 Typical methods:
 brainstorming
 storyboarding
 workshops
 pencil and paper exercises
 Like ethnography, makes users feel valued and
encourages them to “own” the products.

56. Measuring Participation
 four dimensions along which participation by users
could be measured:
 1. Directness of interaction with the designers
 2. Length of involvement in the design process
 3. Scope of participation in the overall system being
designed
 4. Degree of control over the design decisions

57. Navigation Design

58. Basics
 Golden rules — the Where3-What of navigation:
 Where you are
 Where you’re going (or what will happen)
 Where you’ve been (or what has been done)
 What you can do now

59. where you are – breadcrumbs
shows path through web site hierarchy
web site
top level category sub-category
this page
live links
to higher
levels

60. Levels of Structure
 Different levels of structure, according to domain:
 app: widgets; screens; application; environment
 web: HTML; page layout; site; browser+www
 device: controls; physical layout; modes; real
world

61. Example

62. Screen design and layout
basic principles
grouping, structure, order
alignment
use of white space

63. basic principles
ask
 what is the user doing?
think
 what information, comparisons, order
design
 form follows function

64. available tools
grouping of items
order of items
decoration - fonts, boxes etc.
alignment of items
white space between items

65. grouping and structure
logically together  physically together
Billing details:
Name
Address: …
Credit card no
Delivery details:
Name
Address: …
Delivery time
Order details:
item quantity cost/item cost
size 10 screws (boxes) 7 3.71 25.97
…… … … …

66. order of groups and items
 think! - what is natural order
 should match screen order!
 use boxes, space etc.
 set up tabbing right!
 instructions
 beware the cake recipie syndrome!
… mix milk and flour, add the fruit
after beating them

67. decoration
 use boxes to group logical items
 use fonts for emphasis, headings
 but not too many!!
ABCDEFGHIJKLM
NOPQRSTUVWXYZ

68. alignment - text
 you read from left to right (English and
European)
 align left hand side
Willy Wonka and the Chocolate Factory
Winston Churchill - A Biography
Wizard of Oz
Xena - Warrior Princess
Willy Wonka and the Chocolate Factory
Winston Churchill - A Biography
Wizard of Oz
Xena - Warrior Princess
fine for special effects but hard
to scan
boring but
readable!

69. alignment - names
 Usually scanning for surnames
 make it easy!
Alan Dix
Janet Finlay
Gregory Abowd
Russell Beale
Alan Dix
Janet Finlay
Gregory Abowd
Russell Beale
Dix , Alan
Finlay, Janet
Abowd, Gregory
Beale, Russell
 


70. alignment - numbers
think purpose!
which is biggest?
532.56
179.3
256.317
15
73.948
1035
3.142
497.6256

71. alignment - numbers
visually:
long number = big number
align decimal points
or right align integers
627.865
1.005763
382.583
2502.56
432.935
2.0175
652.87
56.34

72. multiple columns
 scanning across gaps hard:
(often hard to avoid with large data base fields)
sherbert 75
toffee 120
chocolate 35
fruit gums 27
coconut dreams 85

73. multiple columns - 2
 use leaders
sherbert 75
toffee 120
chocolate 35
fruit gums 27
coconut dreams 85

74. multiple columns - 3
 or greying (vertical too)
sherbert 75
toffee 120
chocolate 35
fruit gums 27
coconut dreams 85

75. sherbert 75
toffee 120
chocolate 35
fruit gums 27
coconut dreams 85
multiple columns - 4
 or even (with care!) ‘bad’ alignment

76. space to separate

77. space to structure

78. space to highlight

79. Example
physical controls
 grouping of items
 defrost settings
 type of food
 time to cook
type of food
time to cook
defrost settings

80. physical controls
 grouping of items
 order of items
 decoration
 alignment
 centered text in buttons
? easy to scan ?
? easy to scan ?
centred text in buttons

81. physical controls
 grouping of items
 order of items
 decoration
 alignment
 white space
 gaps to aid groupinggaps to aid grouping

82. aesthetics and utility
(you already know this)
 aesthetically pleasing designs
 increase user satisfaction and improve productivity
 beauty and utility may conflict
 mixed up visual styles  easy to distinguish
 clean design – little differentiation  confusing
 backgrounds behind text
… good to look at, but hard to read
 but can work together
 e.g. the design of the counter
 in consumer products – key differentiator (e.g. iMac)

83. colour and 3D
(you already know this)
 both often used very badly!
 colour
 older monitors limited palette
 colour over used because ‘it is there’
 beware colour blind!
 use sparingly to reinforce other information
 3D effects
 good for physical information and some graphs
 but if over used …
e.g. text in perspective!! 3D pie charts

84. bad use of colour
(you already know this)
 over use - without very good reason (e.g. kids’ site)
 colour blindness
 poor use of contrast
 do adjust your set!
 adjust your monitor to greys only
 can you still read your screen?

85. across countries and cultures
 localisation & internationalisation
 changing interfaces for particular cultures/languages
 globalisation
 try to choose symbols etc. that work everywhere
 simply change language?
 use ‘resource’ database instead of literal text
… but changes sizes, left-right order etc.
 deeper issues
 cultural assumptions and values
 meanings of symbols
e.g tick and cross … +ve and -ve in some cultures
… but … mean the same thing (mark this) in others

86. Iteration and prototyping
getting better …
… and starting well

87. prototyping
 you never get it right first time
 if at first you don’t succeed …
prototype evaluatedesign
re-design
done!
OK?

88. pitfalls of prototyping
 moving little by little … but to where
1. need a good start point
2. need to understand what is wrong

89. End of Unit-3
Design Process: Interaction Design Basics

90. Mapping to Course Outcome
 This unit worked towards partial achievement of
Course Outcome 3