User interface design: definitions, processes and principles

USER INTERFACE DESIGNDefinitions, processes and principles

David Little, User Interface Designer, DDHMA Digital Humanities: Methods and Techniques

OVERVIEW1. Definitions

2. User-centred design (UCD)

3. Design principles

4. Why you should care

5. Design exercise

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.

EXAMPLES

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

http://www.flickr.com/photos/joelanman/4333130522/in/pool-dailyux

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.

USER INTERFACE 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 behaviours and goals of the target users of a digital product or service.

PLUS

• The design of appropriate tools (interfaces) which enable users to achieve their goals.

!• Design without research is guesswork.

• Or may result in an interface which reflects the understanding (mental model) of a product’s programmers or architects, not its users.

UI 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 UI DESIGN• Sits within a larger set of disciplines, 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.

• Interaction Design (IXD) and UI design: subtle differences in definition but will be used interchangeably in this lecture.

USER EXPERIENCE (UX) DESIGN• Commonplace term in software design and beyond.

• A vague term: which part of a digital product isn’t experienced by users?

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

• UI design can be thought of as the practical implementation of HCI research, methods and practices.

2. USER-CENTRED DESIGN (UCD)

• The “U” in UI: USER; the “H” in HCI: HUMAN

“Focus on the user and all else will follow.”(Google)

• Focus on: people, their motivations, goals and behaviours.

• Must be aware of technological constraints but UI design is not a technological process.

USER-CENTRED DESIGN (UCD)• Involve users at all stages of the design process.

RESEARCH• Who are the users?

• How many different types of user are there?

• What do they want to be able to do?

• How do they currently do it?

• Where do they currently do it?

• Where might they want to be able to do it?

• How might they want to be able to do it?

USER GOALS, STRATEGIC GOALS AND 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

USER RESEARCH• 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: INTERVIEWS

• 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 or contextual enquiry.

• Observe users: how they work, their behaviours, what other resources they use.

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

ENGAGING WITH USERS: OTHER METHODS

• Interviews via Skype or Email.

• Online surveys (generally better for quantitative information).

• Existing published information about user behaviours.

WHAT TO ASK• What kind of information: qualitative or quantitative information? 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).

ANALYSIS AND CONCEPTUAL DESIGN

• Analysis will probably take a lot of time!

• Identify trends: what are user goals and how can these be supported—identify by analysing interests and behaviours, stated and unstated goals.

• Use information to create high-level documentation to guide the design, e.g. user stories (statement of user goals by user group) or personas (more in-depth descriptions of “typical” users).

• Conceptual design documentation—wireframes.

DELIVERABLES• User stories: simple statements of overall user goals.

• As a <type of user> I want <a goal> so that <some reason>:

• As an academic historian I want to be able to track ownership and descent of manorial properties (to support my research).

• As a genealogist I want to be able to be able to establish family relationships of the families I am researching so that I can use the information to construct a family history.

• Sketches and wireframes: at this stage a point of discussion with other stakeholders.

PROTOTYPING AND TESTING

• Prototyping: creation of artefacts for testing with users: can be low-fidelity (e.g. paper-based), medium fidelity (e.g. wireframes, static coded web pages) or high fidelity (e.g. functional web pages).

• Feedback from testing the prototypes can be fed back into further iterations of the design.

• Resource intensive but much easier (and cheaper) to address issues and fix usability problems early in the process than later.

COST BENEFIT

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

USABILITY TESTING• 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

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

ITERATIVE DESIGN• Analyse results of testing and feed back into design

• Don’t need many participants to identify main usability problems (around four 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 PRINCIPLES3.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? The simplest interface for the job, but

no simpler!• Which is simpler?

SIMPLICITY• Depends on context of use.• What is the purpose of your product?• What do your users want to do?• Keep to your core functionality

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. As humans we are generally quite good at filling in missing information and this is certainly the case in perception. We fill in the blanks with “incomplete” images. Commonly used in logo design etc.

Proximity: the layout of a navigation menu

Proximity and similarity: Flickr’s top menu bar

Similarity: Icons for Adobe Dreamweaverand Fireworks

Closure: Apple’s logo

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 visible 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

• Conform to established rules.

• 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

Apple’s Podcast app: features an emulatedtape mechanism.

“Real-world” UI metaphors most successful when they allow users to easily form connections between the interface and existing technologies.

What does a tape mechanism mean foryounger users?

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 (that is 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 YOU SHOULD CARE

4.1 Finance4.2 Impact4.3 Ethics

4.1 FINANCE• Cost savings of usability testing.• For commercial organisations, greater usability leads to increased sales and greater competitive advantage.

• For non-profits, “conversion rates” (e.g. transforming a casual user to a signed-up and engaged user) are still important: a resource that addresses the needs of its users is more likely to lead to greater use and (repeated) engagement.

• Justify the use of limited funds.• Reduce support costs.

4.2 IMPACT• Increased user engagement in design can lead to more user-focused resources which in turn can increase a resource’s impact.

• Old Bailey Online: • JISC funded user engagement exercise: resource was not

being well-used by academic community. • Study resulted in creation of sets of tools aimed at

teachers and researchers.

• Impact important consideration when creating funding applications.

• Toolkits for measuring impact of digital resources, e.g. TIDSR: Toolkit for the Impact of Digitised Scholarly Resources (Oxford Internet Institute).

4.3 ETHICS• All resources have users or potential users. • 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.

David [email protected]

http://dilbert.com/strips/comic/2009-03-21/

DESIGN EXERCISE• Suggest up to three changes to the CCED search screen which would assist amateur local historians.

• 5-10 minutes: familiarise yourself with the brief.

• Maximum 25 minutes on the design: sketch!

• 5 minutes: prepare to present.

• 2-3 minutes per group: present your ideas.

• No right or wrong answers.