interaction design: desiging user interfaces for digital products
DESCRIPTION
Introductory lecture on Interaction Design, given to MA Digital Humanities students at King's College, London on 19 November 2013.TRANSCRIPT
![Page 1: Interaction design: desiging user interfaces for digital products](https://reader030.vdocument.in/reader030/viewer/2022012916/54c744e74a7959da198b45d2/html5/thumbnails/1.jpg)
Interaction design
Designing user interfaces for digital products
David Little, Senior UI Designer, DDHMA Digital Humanities: Methods and Techniques
![Page 2: Interaction design: desiging user interfaces for digital products](https://reader030.vdocument.in/reader030/viewer/2022012916/54c744e74a7959da198b45d2/html5/thumbnails/2.jpg)
Overview
1. Definitions2. User-centred design3. Design principles for interaction
design4. Why this is important5. Design exercise
![Page 3: Interaction design: desiging user interfaces for digital products](https://reader030.vdocument.in/reader030/viewer/2022012916/54c744e74a7959da198b45d2/html5/thumbnails/3.jpg)
Whistlestop tour!
• Huge subject• Can only skim the surface in one
hour• General introduction• Suggestions for further reading and
study
![Page 4: Interaction design: desiging user interfaces for digital products](https://reader030.vdocument.in/reader030/viewer/2022012916/54c744e74a7959da198b45d2/html5/thumbnails/4.jpg)
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.
![Page 5: Interaction design: desiging user interfaces for digital products](https://reader030.vdocument.in/reader030/viewer/2022012916/54c744e74a7959da198b45d2/html5/thumbnails/5.jpg)
Examples
![Page 6: Interaction design: desiging user interfaces for digital products](https://reader030.vdocument.in/reader030/viewer/2022012916/54c744e74a7959da198b45d2/html5/thumbnails/6.jpg)
![Page 7: Interaction design: desiging user interfaces for digital products](https://reader030.vdocument.in/reader030/viewer/2022012916/54c744e74a7959da198b45d2/html5/thumbnails/7.jpg)
![Page 8: Interaction design: desiging user interfaces for digital products](https://reader030.vdocument.in/reader030/viewer/2022012916/54c744e74a7959da198b45d2/html5/thumbnails/8.jpg)
http://www.flickr.com/photos/purecaffeine/3537809738/
![Page 9: Interaction design: desiging user interfaces for digital products](https://reader030.vdocument.in/reader030/viewer/2022012916/54c744e74a7959da198b45d2/html5/thumbnails/9.jpg)
http://www.flickr.com/photos/macbosse/304314327/
![Page 10: Interaction design: desiging user interfaces for digital products](https://reader030.vdocument.in/reader030/viewer/2022012916/54c744e74a7959da198b45d2/html5/thumbnails/10.jpg)
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.
![Page 11: Interaction design: desiging user interfaces for digital products](https://reader030.vdocument.in/reader030/viewer/2022012916/54c744e74a7959da198b45d2/html5/thumbnails/11.jpg)
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.
![Page 12: Interaction design: desiging user interfaces for digital products](https://reader030.vdocument.in/reader030/viewer/2022012916/54c744e74a7959da198b45d2/html5/thumbnails/12.jpg)
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.
![Page 13: Interaction design: desiging user interfaces for digital products](https://reader030.vdocument.in/reader030/viewer/2022012916/54c744e74a7959da198b45d2/html5/thumbnails/13.jpg)
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.
![Page 14: Interaction design: desiging user interfaces for digital products](https://reader030.vdocument.in/reader030/viewer/2022012916/54c744e74a7959da198b45d2/html5/thumbnails/14.jpg)
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.
![Page 15: Interaction design: desiging user interfaces for digital products](https://reader030.vdocument.in/reader030/viewer/2022012916/54c744e74a7959da198b45d2/html5/thumbnails/15.jpg)
The UX Venn Diagram
Dan Saffer, 2009
![Page 16: Interaction design: desiging user interfaces for digital products](https://reader030.vdocument.in/reader030/viewer/2022012916/54c744e74a7959da198b45d2/html5/thumbnails/16.jpg)
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.
![Page 17: Interaction design: desiging user interfaces for digital products](https://reader030.vdocument.in/reader030/viewer/2022012916/54c744e74a7959da198b45d2/html5/thumbnails/17.jpg)
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.
![Page 18: Interaction design: desiging user interfaces for digital products](https://reader030.vdocument.in/reader030/viewer/2022012916/54c744e74a7959da198b45d2/html5/thumbnails/18.jpg)
User-centred design
• Involve users at all stages of the design process.
![Page 19: Interaction design: desiging user interfaces for digital products](https://reader030.vdocument.in/reader030/viewer/2022012916/54c744e74a7959da198b45d2/html5/thumbnails/19.jpg)
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.
![Page 20: Interaction design: desiging user interfaces for digital products](https://reader030.vdocument.in/reader030/viewer/2022012916/54c744e74a7959da198b45d2/html5/thumbnails/20.jpg)
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!
![Page 21: Interaction design: desiging user interfaces for digital products](https://reader030.vdocument.in/reader030/viewer/2022012916/54c744e74a7959da198b45d2/html5/thumbnails/21.jpg)
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.
![Page 22: Interaction design: desiging user interfaces for digital products](https://reader030.vdocument.in/reader030/viewer/2022012916/54c744e74a7959da198b45d2/html5/thumbnails/22.jpg)
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.
![Page 23: Interaction design: desiging user interfaces for digital products](https://reader030.vdocument.in/reader030/viewer/2022012916/54c744e74a7959da198b45d2/html5/thumbnails/23.jpg)
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.
![Page 24: Interaction design: desiging user interfaces for digital products](https://reader030.vdocument.in/reader030/viewer/2022012916/54c744e74a7959da198b45d2/html5/thumbnails/24.jpg)
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!
![Page 25: Interaction design: desiging user interfaces for digital products](https://reader030.vdocument.in/reader030/viewer/2022012916/54c744e74a7959da198b45d2/html5/thumbnails/25.jpg)
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
![Page 26: Interaction design: desiging user interfaces for digital products](https://reader030.vdocument.in/reader030/viewer/2022012916/54c744e74a7959da198b45d2/html5/thumbnails/26.jpg)
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.
![Page 27: Interaction design: desiging user interfaces for digital products](https://reader030.vdocument.in/reader030/viewer/2022012916/54c744e74a7959da198b45d2/html5/thumbnails/27.jpg)
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
![Page 28: Interaction design: desiging user interfaces for digital products](https://reader030.vdocument.in/reader030/viewer/2022012916/54c744e74a7959da198b45d2/html5/thumbnails/28.jpg)
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…”)
![Page 29: Interaction design: desiging user interfaces for digital products](https://reader030.vdocument.in/reader030/viewer/2022012916/54c744e74a7959da198b45d2/html5/thumbnails/29.jpg)
![Page 30: Interaction design: desiging user interfaces for digital products](https://reader030.vdocument.in/reader030/viewer/2022012916/54c744e74a7959da198b45d2/html5/thumbnails/30.jpg)
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.
![Page 31: Interaction design: desiging user interfaces for digital products](https://reader030.vdocument.in/reader030/viewer/2022012916/54c744e74a7959da198b45d2/html5/thumbnails/31.jpg)
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.
![Page 32: Interaction design: desiging user interfaces for digital products](https://reader030.vdocument.in/reader030/viewer/2022012916/54c744e74a7959da198b45d2/html5/thumbnails/32.jpg)
Sketches
![Page 33: Interaction design: desiging user interfaces for digital products](https://reader030.vdocument.in/reader030/viewer/2022012916/54c744e74a7959da198b45d2/html5/thumbnails/33.jpg)
Wireframes
![Page 34: Interaction design: desiging user interfaces for digital products](https://reader030.vdocument.in/reader030/viewer/2022012916/54c744e74a7959da198b45d2/html5/thumbnails/34.jpg)
Prototypes
![Page 35: Interaction design: desiging user interfaces for digital products](https://reader030.vdocument.in/reader030/viewer/2022012916/54c744e74a7959da198b45d2/html5/thumbnails/35.jpg)
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.
![Page 36: Interaction design: desiging user interfaces for digital products](https://reader030.vdocument.in/reader030/viewer/2022012916/54c744e74a7959da198b45d2/html5/thumbnails/36.jpg)
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
![Page 37: Interaction design: desiging user interfaces for digital products](https://reader030.vdocument.in/reader030/viewer/2022012916/54c744e74a7959da198b45d2/html5/thumbnails/37.jpg)
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.
![Page 38: Interaction design: desiging user interfaces for digital products](https://reader030.vdocument.in/reader030/viewer/2022012916/54c744e74a7959da198b45d2/html5/thumbnails/38.jpg)
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!).
![Page 39: Interaction design: desiging user interfaces for digital products](https://reader030.vdocument.in/reader030/viewer/2022012916/54c744e74a7959da198b45d2/html5/thumbnails/39.jpg)
3. DESIGN PRINCIPLES
3.1 Simplicity3.2 Structure3.3 Visibility3.4 Consistency3.5 Tolerance3.6 Feedback
![Page 40: Interaction design: desiging user interfaces for digital products](https://reader030.vdocument.in/reader030/viewer/2022012916/54c744e74a7959da198b45d2/html5/thumbnails/40.jpg)
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?
![Page 41: Interaction design: desiging user interfaces for digital products](https://reader030.vdocument.in/reader030/viewer/2022012916/54c744e74a7959da198b45d2/html5/thumbnails/41.jpg)
Which is simpler?
![Page 42: Interaction design: desiging user interfaces for digital products](https://reader030.vdocument.in/reader030/viewer/2022012916/54c744e74a7959da198b45d2/html5/thumbnails/42.jpg)
![Page 43: Interaction design: desiging user interfaces for digital products](https://reader030.vdocument.in/reader030/viewer/2022012916/54c744e74a7959da198b45d2/html5/thumbnails/43.jpg)
![Page 44: Interaction design: desiging user interfaces for digital products](https://reader030.vdocument.in/reader030/viewer/2022012916/54c744e74a7959da198b45d2/html5/thumbnails/44.jpg)
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?
![Page 45: Interaction design: desiging user interfaces for digital products](https://reader030.vdocument.in/reader030/viewer/2022012916/54c744e74a7959da198b45d2/html5/thumbnails/45.jpg)
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.
![Page 46: Interaction design: desiging user interfaces for digital products](https://reader030.vdocument.in/reader030/viewer/2022012916/54c744e74a7959da198b45d2/html5/thumbnails/46.jpg)
Proximity: the layout of a navigation menu
![Page 47: Interaction design: desiging user interfaces for digital products](https://reader030.vdocument.in/reader030/viewer/2022012916/54c744e74a7959da198b45d2/html5/thumbnails/47.jpg)
Proximity and similarity: Flickr’s top menu bar
Similarity: Icons for Adobe Dreamweaverand Fireworks
![Page 48: Interaction design: desiging user interfaces for digital products](https://reader030.vdocument.in/reader030/viewer/2022012916/54c744e74a7959da198b45d2/html5/thumbnails/48.jpg)
Closure: in logo design
Closure: in icons
Evernote remindericon
Suitcase icon: FontAwesome icon set Apple Mail icon
on iPhone iOS7
![Page 49: Interaction design: desiging user interfaces for digital products](https://reader030.vdocument.in/reader030/viewer/2022012916/54c744e74a7959da198b45d2/html5/thumbnails/49.jpg)
Grids: an established tool from graphic design for imposing order on information
![Page 50: Interaction design: desiging user interfaces for digital products](https://reader030.vdocument.in/reader030/viewer/2022012916/54c744e74a7959da198b45d2/html5/thumbnails/50.jpg)
![Page 51: Interaction design: desiging user interfaces for digital products](https://reader030.vdocument.in/reader030/viewer/2022012916/54c744e74a7959da198b45d2/html5/thumbnails/51.jpg)
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)
![Page 52: Interaction design: desiging user interfaces for digital products](https://reader030.vdocument.in/reader030/viewer/2022012916/54c744e74a7959da198b45d2/html5/thumbnails/52.jpg)
• Affordance: “this is for doing that”.
Underlined text on a web page is for clicking
![Page 53: Interaction design: desiging user interfaces for digital products](https://reader030.vdocument.in/reader030/viewer/2022012916/54c744e74a7959da198b45d2/html5/thumbnails/53.jpg)
The “home” button on an iPhone is for pressing
![Page 54: Interaction design: desiging user interfaces for digital products](https://reader030.vdocument.in/reader030/viewer/2022012916/54c744e74a7959da198b45d2/html5/thumbnails/54.jpg)
• 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
![Page 55: Interaction design: desiging user interfaces for digital products](https://reader030.vdocument.in/reader030/viewer/2022012916/54c744e74a7959da198b45d2/html5/thumbnails/55.jpg)
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!)
![Page 56: Interaction design: desiging user interfaces for digital products](https://reader030.vdocument.in/reader030/viewer/2022012916/54c744e74a7959da198b45d2/html5/thumbnails/56.jpg)
Apple’s podcast app: iOS6(skeuomorphic)
Apple’s podcast app: iOS7(flat)
![Page 57: Interaction design: desiging user interfaces for digital products](https://reader030.vdocument.in/reader030/viewer/2022012916/54c744e74a7959da198b45d2/html5/thumbnails/57.jpg)
3.4 Consistency
• “People see what they expect to see.”• Recognition over recall.• Consistency across a product or set of products.
![Page 58: Interaction design: desiging user interfaces for digital products](https://reader030.vdocument.in/reader030/viewer/2022012916/54c744e74a7959da198b45d2/html5/thumbnails/58.jpg)
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.
![Page 59: Interaction design: desiging user interfaces for digital products](https://reader030.vdocument.in/reader030/viewer/2022012916/54c744e74a7959da198b45d2/html5/thumbnails/59.jpg)
Tolerant: the colour picker in Photoshop: only allows me to enter six digits for ahex colour code (red, green and blue number pairs).
![Page 60: Interaction design: desiging user interfaces for digital products](https://reader030.vdocument.in/reader030/viewer/2022012916/54c744e74a7959da198b45d2/html5/thumbnails/60.jpg)
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).
![Page 61: Interaction design: desiging user interfaces for digital products](https://reader030.vdocument.in/reader030/viewer/2022012916/54c744e74a7959da198b45d2/html5/thumbnails/61.jpg)
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.
![Page 62: Interaction design: desiging user interfaces for digital products](https://reader030.vdocument.in/reader030/viewer/2022012916/54c744e74a7959da198b45d2/html5/thumbnails/62.jpg)
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
![Page 63: Interaction design: desiging user interfaces for digital products](https://reader030.vdocument.in/reader030/viewer/2022012916/54c744e74a7959da198b45d2/html5/thumbnails/63.jpg)
4. WHY THIS IS IMPORTANT
• Finance• Impact• Ethics
![Page 64: Interaction design: desiging user interfaces for digital products](https://reader030.vdocument.in/reader030/viewer/2022012916/54c744e74a7959da198b45d2/html5/thumbnails/64.jpg)
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
![Page 65: Interaction design: desiging user interfaces for digital products](https://reader030.vdocument.in/reader030/viewer/2022012916/54c744e74a7959da198b45d2/html5/thumbnails/65.jpg)
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.
![Page 66: Interaction design: desiging user interfaces for digital products](https://reader030.vdocument.in/reader030/viewer/2022012916/54c744e74a7959da198b45d2/html5/thumbnails/66.jpg)
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.
![Page 67: Interaction design: desiging user interfaces for digital products](https://reader030.vdocument.in/reader030/viewer/2022012916/54c744e74a7959da198b45d2/html5/thumbnails/67.jpg)
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).
![Page 68: Interaction design: desiging user interfaces for digital products](https://reader030.vdocument.in/reader030/viewer/2022012916/54c744e74a7959da198b45d2/html5/thumbnails/68.jpg)
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.
![Page 69: Interaction design: desiging user interfaces for digital products](https://reader030.vdocument.in/reader030/viewer/2022012916/54c744e74a7959da198b45d2/html5/thumbnails/69.jpg)
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.
![Page 70: Interaction design: desiging user interfaces for digital products](https://reader030.vdocument.in/reader030/viewer/2022012916/54c744e74a7959da198b45d2/html5/thumbnails/70.jpg)
![Page 71: Interaction design: desiging user interfaces for digital products](https://reader030.vdocument.in/reader030/viewer/2022012916/54c744e74a7959da198b45d2/html5/thumbnails/71.jpg)
![Page 72: Interaction design: desiging user interfaces for digital products](https://reader030.vdocument.in/reader030/viewer/2022012916/54c744e74a7959da198b45d2/html5/thumbnails/72.jpg)
![Page 73: Interaction design: desiging user interfaces for digital products](https://reader030.vdocument.in/reader030/viewer/2022012916/54c744e74a7959da198b45d2/html5/thumbnails/73.jpg)
![Page 74: Interaction design: desiging user interfaces for digital products](https://reader030.vdocument.in/reader030/viewer/2022012916/54c744e74a7959da198b45d2/html5/thumbnails/74.jpg)
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