1. Interaction design
Designing user interfaces for
digital products
David Little, Senior UI Designer, DDH
MA Digital Humanities: Methods and Techniques

2. Overview
1.
2.
3.
4.
5.
Definitions
User-centred design
Design principles for interaction design
Why this is important
Design exercise

3. Whistlestop tour!
•
•
•
•
Huge subject
Can only skim the surface in one hour
General introduction
Suggestions for further reading and study

4. 1. DEFINITIONS
• What is a user interface?
“That part of a computer system with which a user
interacts in order to undertake her tasks and achieve
her goals.”
(Stone, Jarrett et. al., 2001)
• What we interact with when we use any kind of
digital hardware or software. What we may think of
when we think about a digital product.

5. Examples

8. http://www.flickr.com/photos/purecaffeine/3537809738/

9. http://www.flickr.com/photos/macbosse/304314327/

10. Where the UI fits
• Back-end infrastructure: servers, databases
and programming.
• Content (i.e. words and pictures).
• Information architecture: how the content is
organised and navigated.
• User interface: where the user interacts with
the above.

11. Interaction design
“Interaction design is concerned with describing user
behavior and defining how the system will accommodate and
respond to that behavior"
(Jesse James Garrett, 2011)
• Research into the target users of a digital product or
service.
PLUS
• The design of appropriate tools (interfaces) which
enable users to achieve their goals.

12. Research is key
• Design without research is guesswork…
• …or may result in an interface which reflects the
understanding of a product‘s programmers or architects—the
implementation model, not of its users‘ and their mental
model—how they think/expect things to work.
• Users‘ mental models are based on experience and
beliefs, not facts.
Interaction design should be thought of as:
• A process integral to the creation of digital products.
• A group of interrelated activities.
• A mindset.

13. The context of interaction design
• Sits within a larger set of
disciplines/practices, all ultimately
concerned with the interaction of people
with machines.
• Labels can be confusing and describe
overlapping activities and processes which
may be carried out by one or a number of
people.

14. User Experience (UX) design
• Commonplace term in software design and
beyond.
• Totality of users‘ experiences of a product or
service, from its
content, navigation, aesthetics, interactions
or even how quickly it performs or responds
to users‘ interactions.
• Umbrella term for a number of more defined
disciplines.

15. The UX Venn Diagram
Dan Saffer, 2009

16. Human-Computer Interaction (HCI)
• Academic study of the interaction between humans
and machines.
• Computer
science, psychology, linguistics, sociology, anthropolog
y.
• Popularised in the 1980s but with roots in older fields
of ergonomics and human factors: 1900s and earlier.
• Interaction design in our context can be thought of as
the practical implementation of HCI research, methods
and practices.

17. 2. USER-CENTRED DESIGN
• The process of designing software / digital
products around the needs of their users.
“Focus on the user and all else will follow.”
(Google)
• Focuses on: people, their motivations, goals and
behaviours.
• Must be aware of technological constraints but
interaction design is not a technological process.

18. User-centred design
• Involve users at all stages of the design
process.

19. Research
• Various types of research that will take place
during the life cycle of a digital product.
–
–
–
–
Competitive research
Organisational research
User research
Evaluative research
• Large topic: we‘ll mainly concentrate on user
research and evaluative research.
• Erika Hall, Just Enough Research (A Book
Apart, 2013): good introduction.

20. User research
•
•
•
•
•
Finding out about your users!
Who are they?
What are their goals?
How do they achieve them now?
How do they understand things? What is
their mental model?
• What contexts do they operate in?
• Not asking them what they want!

21. Define the problem
• What problem are you trying to solve?
“Describe the ways in which users of smartphones and tablets
use their devices to engage with arts and cultural resources
online”
“How do users of smartphones and tablets currently use their
devices to purchase tickets and pay for online content?”
(Royal Opera House mobile web app project: Royal Opera
House / KCL DDH / POP)
• Question should be well-defined: focus on what you need to
know.

22. Finding users
• How do you find users?
– An existing user base.
– An organisation‘s own information (e.g.
marketing, focus groups, audience profiles): what are
they willing to share?
– Academic projects: project team contacts and
knowledge.
• If you have limited resources?
– Friends, family, colleagues.
– Mailing lists.
– Social media.

23. Engaging with users
• Need to be pragmatic: what are your constraints
(time, financial). User research takes time and you may need
to recompense people for their time.
• If you have time: face-to-face, one-to-one interviews in user‘s
―natural environment‖: ethnography.
• Observe users: how they work, their behaviours, what other
resources they use: contextual enquiry.
• What users do and what they say they actually do may well
be different (c.f. Jakob Nielsen‘s First Rule of Usability).
• Unstated goals, domain language.

24. Other ways to do user research
• Interviews via Skype or Email.
• Online surveys (generally better for
quantitative information).
• Existing published information about user
behaviours.
• Oh, and never use focus groups!

25. What to ask?
• What kind of information: qualitative or quantitative information?
– Qualitative: descriptive, less structured data.
– Quantitative: numerical, measurable, statistical.
– At initial stages of research qualitative information may be more useful.
•
Ask non-judgmental and non-leading questions.
• Don‘t ask questions that are too open-ended (what is of relevance to
the project given its constraints?)
• For more information:
– Box and Bowles, Undercover User Experience Design (2010)
– Kuniavsky, Observing the User Experience: A Practitioner's Guide to
User Research (2003).
– ‗Getting people to talk: an ethnography and interviewing primer‘:
vimeo.com/1269848

26. Analysis
• Best done in a group to avoid bias.
• Methodologies for research and analysis
– Lazar et. al., Research Methods in HumanComputer Interaction (Wiley, 2010)
• Formal methodologies, e.g. Grounded Theory
(coding / categorisation of information).
• Less formal: identify patterns in your data
using post-its and whiteboards.
• Identify user
goals, priorities, motivations, tasks etc.

27. Constraints
• What are the strategic goals (―business goals‖) of
the product you are creating; what were you
funded to do?
• Tensions between strategic goals and user goals:
how will this be managed?
• What constraints do you have:
–
–
–
–
Financial
Time
Technology
People

28. Applying the insights: personas
• Identify your users
– Personas
– User stories
• Personas: archetypal users / composites
based on the data you‘ve gathered.
• Allows us to empathise with users: what do
they want / need?
• Helps us to move away from decisions based
on personal preference (―I like‖, ―I think we
should…‖)

30. Applying the insights: user stories
• Less time-intensive than personas: high level descriptions of
user goals.
• As a <type of user> I want <a goal> so that <some reason>:
As a learner, I want to access contextual materials about
performances, including plot synopses and audio/visual content
in order to deepen my knowledge of the performance.
As a transacter, I want to be able to choose seats and book
tickets via the app in a way that is sympathetic to the device I am
using.

31. Applying the insights: deliverables
• Other key deliverables (or documentation)
– Interface sketches (pen and paper)
– Wireframes (static schematic diagrams of an
interface)
– Prototypes: interactive prototypes (e.g.
HTML/CSS)
– Best tool for the job: communicate ideas for
discussion with team members and evaluation
with users.
– Think stories and ideas, not tools. Be pragmatic.

32. Sketches

33. Wireframes

34. Prototypes

35. Prototyping and testing
• Prototypes take more time to create than sketches or
wireframes but are interactive—best for testing
interactions and user flows etc.
• Concentrate on key functionality you want to test.
Rough, functional, easy to change (or dispose of).
• Feedback from testing the prototypes can be fed back
into further iterations of the design.
• May be resource intensive but much easier (and
cheaper) to address issues and fix usability problems
early in the process than later.

36. Evaluative research: usability
testing
•
What is usability?
“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.”
International Organization for Standardization (ISO): ISO 9241-11
•
Or, how easy is it for your users to complete a task or set of tasks on your prototype?
•
Doesn‘t require a lab or expensive equipment.
•
One-to-one testing of a prototype with a user. A facilitator gives a participant a number of
tasks to work through on the interface and asks them to ―think aloud‖ their decisions.
•
Make notes on the user‘s behaviour and, if possible, use screen recording software to
record the user‘s decisions, voice and facial expression.
•
Demo usability test by Steve Krug (author of small, accessible books on usability testing):
www.youtube.com/watch?v=QckIzHC99Xc

37. Iterative design
• Analyse results of testing and feed back into design.
• Don‘t need many participants to identify main usability problems
(around four-five should be fine).
• Steve Krug: short, accessible books on running usability testing:
Don’t Make Me Think! and Rocket Surgery Made Easy.
• How many tests should you run? It depends. Usually defined by
project constraints (unless you‘re Google who once famously tested
41 shades of blue to see which performed better!).
• Remote usability testing software: an alternative to running face-toface tests, but usually better for gathering quantitative information.

38. UCD: summary
• A mindset: gives a voice to the user
throughout the design and build process.
• Iterative: design, test, design, test etc.
• Be pragmatic. You will always have
constraints.
• One round of testing is better than none.
• Testing one user is 100% better than
testing none (but more is better!).

39. 3. DESIGN PRINCIPLES
3.1
3.2
3.3
3.4
3.5
3.6
Simplicity
Structure
Visibility
Consistency
Tolerance
Feedback

40. 3.1 Simplicity
• A user interface should be kept as simple as
possible for users in order that they can
achieve their goals.
• What is simplicity? Can be hard to define.
– Reduce unnecessary complexity in the interface.
– ―Keep things as simple as possible, but no
simpler‖ (Einstein … maybe).
– Goals, tasks and context.
– Language: does the UI ―speak‖ the user‘s
language—is its terminology understandable?

41. Which is simpler?

44. It depends…
• …on user context.
• What they want to achieve.
• Mobile presents fewer options. But what if
you want to do more than just see the
immediate forecast?

45. 3.2 Structure
• Ensure that the interface is clearly laid out, well
organised and controls are easily identifiable.
• ―Gestalt laws of perception‖:
– Proximity. When elements are grouped
together, people perceive them as being related.
– Similarity. Elements that look similar are perceived as
being related.
– Closure. We fill in the blanks with ―incomplete‖
images. Commonly used in logo and icon design.

46. Proximity: the layout of a
navigation menu

47. Proximity and similarity: Flickr‘s top menu bar
Similarity: Icons for Adobe Dreamweaver
and Fireworks

48. Closure: in logo design
Closure: in icons
Evernote reminder
icon
Suitcase icon: Font
Awesome icon set
Apple Mail icon
on iPhone iOS7

49. Grids: an established tool from graphic design
for imposing order on information

51. 3.3 Visibility
• Visibility can be thought as ensuring that interface
controls that need to be accessed by the user are
as clear and visible to the user as possible.
• It ties in with the idea of ―affordance‖, popularised
by the design thinker and writer Don Norman:
“The perceived and actual properties of the
thing, primarily those fundamental properties that
determine just how the thing could possibly be
used.”
(Don Norman, 1988)

52. • Affordance: ―this is for doing that‖.
Underlined text on a web page is for clicking

53. The ―home‖ button on an iPhone is for pressing

54. • Use of appropriate metaphors can also promote
visibility. Sometimes metaphors come from a preexisting technology, e.g.:
The Gmail icon: resembles a ―traditional‖ envelope
• At its most extreme this can result in
―skeuomorphism‖: incorporating elements in the UI
from a previous technology that serve no purpose
other than being decorative.

55. Skeuomorphism vs ―flat‖ design
• Trends in UI design: skeuomorphic or flat?
• Skeuomorphic: make interface elements
look like existing or older technologies.
• Flat: plain, functional. Clearer?
• Which one is better? Not about
aesthetics, about what‘s best for your
users (beware trends!)

56. Apple‘s podcast app: iOS6
(skeuomorphic)
Apple‘s podcast app: iOS7
(flat)

57. 3.4 Consistency
• ―People see what they expect to see.‖
• Recognition over recall.
• Consistency across a product or set of products.

58. 3.5 Tolerance
• Well designed software should try to prevent
users from making errors in the first place but
is inevitable that mistakes will happen. A
tolerant UI is a forgiving UI and lets users
recover from mistakes they have made.
• Mistakes may take many forms, e.g. an
accidentally discarded email draft, a
formatting mistake in a Word processor or an
incorrectly filled form field.

59. Tolerant: the colour picker in Photoshop: only allows me to enter six digits for a
hex colour code (red, green and blue number pairs).

60. Intolerant: the colour picker in Illustrator: allows me to enter more
than six digits and then presents me with an annoying error
message (also note the inconsistency across products).

61. 3.6 Feedback
• How the UI communicates with the user after she
has carried out an interaction.
• Feedback may be visual, auditory or even haptic
(communicated via touch):
– The success message that appears after a web form
has been submitted.
– The whooshing sounds as an SMS is sent from an
iPhone.
– The sense of a Wii controller vibrating when
simulating a machine gun being fired on Call of Duty.

62. Nielsen‘s heuristics
•
Jakob Nielsen‘s ten heuristics (guidelines!) for creating usable interfaces
(1999):
•
•
•
•
•
•
•
•
•
•
Visibility of system status
Match between system and the real world
User control and freedom
Consistency and standards
Error prevention
Recognition rather than recall
Flexibility and efficiency of use
Aesthetic and minimalist design
Help users recognise, diagnose and recover from errors
Help and documentation
http://www.useit.com/papers/heuristic/heuristic_list.html

63. 4. WHY THIS IS IMPORTANT
• Finance
• Impact
• Ethics

64. Finance
• ROI: Return on Investment
• Spending time and money on the user experience
will provide benefits in the longer term:
– Increased sales
– Competitive advantage
– Increased ―conversion rates‖: users taking the actions
you want them to: purchasing a product, becoming a
signed-up engaged user (e.g. of an educational
resource)
– Reduce support / training costs
– Reduce (re)-development costs
– Justify the use of limited funds

65. Cost saving of usability testing
―The rule of thumb in many usability-aware
organizations is that the cost-benefit ratio for
usability is $1:$10-$100. Once a system is in
development, correcting a problem costs 10
times as much as fixing the same problem in
design. If the system has been released, it
costs 100 times as much relative to fixing in
design.‖
T. Gilb (1998) quoted on the Usability
Professionals Association (UPA) website.

66. Impact
• Impact important consideration in
awarding of research funding
– Impact on academia: advances in
―understanding, methods, theory and
application‖ (Research Councils UK)
– Wider impact on society and economy
• Digital resources: investing in UX can
increase impact.

67. Impact: example
• Old Bailey Online
– www.oldbaileyonline.org
• JISC-funded user engagement exercise:
resource was not being well-used by
academic community.
• Results of exercise: creation of sets of tools
aimed at teachers and researchers.
• Toolkits for measuring impact of digital
resources, e.g. TIDSR: Toolkit for the Impact
of Digitised Scholarly Resources (Oxford
Internet Institute).

68. Ethics
• All digital products have users or potential
users.
• (In non-profit sector): users may battle with a
difficult UI if your resource is unique enough
but why should they?
• Jef Raskin, The Humane Interface (2000):
laws of interface design:
– A computer shall not harm your work or, through
inactivity, allow your work to come to harm.
– A computer shall not waste your time or require
you to do more work than is strictly necessary.

69. Finally…
• There are plenty of terrible user
experiences already, don‘t add to them.
• Engage with users and follow established
design processes and principles.
• Start noticing the good and bad user
experiences you encounter every day.

74. Design exercise
• Suggest design changes to the current CCED search
screen to make usable by amateur local historians
―As an amateur local historian I want to easily be able to
discover biographical information about individuals who
lived in my local area between certain dates.”
•
•
•
•
5-10 mins: read brief
25 mins: sketch!
5 mins: prepare to present
Group presentations: justify your decisions