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
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
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!
12.
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
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.
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.
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/
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.
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
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
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
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
