Interaction design

Designing user interfaces for digital products

David Little, Senior UI Designer, DDHMA Digital Humanities: Methods and Techniques

Overview

1. Definitions2. User-centred design3. Design principles for interaction

design4. Why this is important5. Design exercise

Whistlestop tour!

• Huge subject• Can only skim the surface in one

hour• General introduction• Suggestions for further reading and

study

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.

Examples

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

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

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.

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.

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.

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.

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.

The UX Venn Diagram

Dan Saffer, 2009

Human-Computer Interaction (HCI)

• Academic study of the interaction between humans and machines.

• Computer science, psychology, linguistics, sociology, anthropology.

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

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.

User-centred design

• Involve users at all stages of the design process.

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.

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!

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.

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.

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.

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!

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

Analysis

• Best done in a group to avoid bias.• Methodologies for research and analysis– Lazar et. al., Research Methods in Human-

Computer 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.

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

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…”)

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.

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.

Sketches

Wireframes

Prototypes

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.

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

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-to-face tests, but usually better for gathering quantitative information.

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!).

3. DESIGN PRINCIPLES

3.1 Simplicity3.2 Structure3.3 Visibility3.4 Consistency3.5 Tolerance3.6 Feedback

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?

Which is simpler?

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?

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.

Proximity: the layout of a navigation menu

Proximity and similarity: Flickr’s top menu bar

Similarity: Icons for Adobe Dreamweaverand Fireworks

Closure: in logo design

Closure: in icons

Evernote remindericon

Suitcase icon: FontAwesome icon set Apple Mail icon

on iPhone iOS7

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

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)

• Affordance: “this is for doing that”.

Underlined text on a web page is for clicking

The “home” button on an iPhone is for pressing

• Use of appropriate metaphors can also promote visibility. Sometimes metaphors come from a pre-existing technology, e.g.:

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

The Gmail icon: resembles a “traditional” envelope

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!)

Apple’s podcast app: iOS6(skeuomorphic)

Apple’s podcast app: iOS7(flat)

3.4 Consistency

• “People see what they expect to see.”• Recognition over recall.• Consistency across a product or set of products.

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.

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

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).

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.

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

4. WHY THIS IS IMPORTANT

• Finance• Impact• Ethics

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

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.

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.

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).

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.

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.

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