SlideShare une entreprise Scribd logo
1  sur  74
Télécharger pour lire hors ligne
Interaction design
Designing user interfaces for
digital products
David Little, Senior UI Designer, DDH
MA Digital Humanities: Methods and Techniques
Overview
1.
2.
3.
4.
5.

Definitions
User-centred design
Design principles for interaction design
Why this is important
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
Interaction design: desiging user interfaces for digital products
Interaction design: desiging user interfaces for digital products
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, 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.
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 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.
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…‖)
Interaction design: desiging user interfaces for digital products
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-toface 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
3.2
3.3
3.4
3.5
3.6

Simplicity
Structure
Visibility
Consistency
Tolerance
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?
Interaction design: desiging user interfaces for digital products
Interaction design: desiging user interfaces for digital products
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 Dreamweaver
and Fireworks
Closure: in logo design

Closure: in icons

Evernote reminder
icon

Suitcase icon: Font
Awesome icon set

Apple Mail icon
on iPhone iOS7
Grids: an established tool from graphic design
for imposing order on information
Interaction design: desiging user interfaces for digital products
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 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.
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 a
hex 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.
Interaction design: desiging user interfaces for digital products
Interaction design: desiging user interfaces for digital products
Interaction design: desiging user interfaces for digital products
Interaction design: desiging user interfaces for digital products
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

Contenu connexe

Tendances

What Is Interaction Design
What Is Interaction DesignWhat Is Interaction Design
What Is Interaction DesignGraeme Smith
 
Basic Principles of Interface design
Basic Principles of Interface designBasic Principles of Interface design
Basic Principles of Interface designZdeněk Lanc
 
Demystifying Information Architecture
Demystifying Information ArchitectureDemystifying Information Architecture
Demystifying Information ArchitecturePatrick Kennedy
 
Jeff Johnson: Psych 101: The Psychological Basis for UI Design Rules
Jeff Johnson: Psych 101: The Psychological Basis for UI Design RulesJeff Johnson: Psych 101: The Psychological Basis for UI Design Rules
Jeff Johnson: Psych 101: The Psychological Basis for UI Design Rulesguest45d695
 
Information Architecture. Card Sorting
Information Architecture. Card SortingInformation Architecture. Card Sorting
Information Architecture. Card SortingDCU_MPIUA
 
User Centered Design: Interviews & Surveys.
User Centered Design: Interviews & Surveys. User Centered Design: Interviews & Surveys.
User Centered Design: Interviews & Surveys. DCU_MPIUA
 
Chapter 9 id2e_slides
Chapter 9 id2e_slidesChapter 9 id2e_slides
Chapter 9 id2e_slidesoopscrash1
 
User profiles. Personas
User profiles. PersonasUser profiles. Personas
User profiles. PersonasDCU_MPIUA
 
Module 2nd USER INTERFACE DESIGN (15CS832) - VTU
Module 2nd USER INTERFACE DESIGN (15CS832) - VTUModule 2nd USER INTERFACE DESIGN (15CS832) - VTU
Module 2nd USER INTERFACE DESIGN (15CS832) - VTUSachin Gowda
 
User Interface Design Chapter 2 Galiz
User Interface Design Chapter 2 GalizUser Interface Design Chapter 2 Galiz
User Interface Design Chapter 2 GalizLatesh Malik
 
Usability & Design Principles
Usability & Design PrinciplesUsability & Design Principles
Usability & Design PrinciplesClaus Medvesek
 
Design Principles
Design PrinciplesDesign Principles
Design PrinciplesDavid Gelb
 
Interaction design and cognitive aspects
Interaction design and cognitive aspects Interaction design and cognitive aspects
Interaction design and cognitive aspects Andres Baravalle
 
6 Rules of User Interface Design
6 Rules of User Interface Design6 Rules of User Interface Design
6 Rules of User Interface DesignDeepak Sahni
 
Siblings or Step Siblings? Common Connections Between Technical Communication...
Siblings or Step Siblings? Common Connections Between Technical Communication...Siblings or Step Siblings? Common Connections Between Technical Communication...
Siblings or Step Siblings? Common Connections Between Technical Communication...Chris LaRoche
 
User Interface Design @iRajLal
User Interface Design @iRajLalUser Interface Design @iRajLal
User Interface Design @iRajLalRaj Lal
 

Tendances (20)

What Is Interaction Design
What Is Interaction DesignWhat Is Interaction Design
What Is Interaction Design
 
User-Centered Design
User-Centered DesignUser-Centered Design
User-Centered Design
 
Basic Principles of Interface design
Basic Principles of Interface designBasic Principles of Interface design
Basic Principles of Interface design
 
Demystifying Information Architecture
Demystifying Information ArchitectureDemystifying Information Architecture
Demystifying Information Architecture
 
Jeff Johnson: Psych 101: The Psychological Basis for UI Design Rules
Jeff Johnson: Psych 101: The Psychological Basis for UI Design RulesJeff Johnson: Psych 101: The Psychological Basis for UI Design Rules
Jeff Johnson: Psych 101: The Psychological Basis for UI Design Rules
 
Information Architecture. Card Sorting
Information Architecture. Card SortingInformation Architecture. Card Sorting
Information Architecture. Card Sorting
 
User Centered Design: Interviews & Surveys.
User Centered Design: Interviews & Surveys. User Centered Design: Interviews & Surveys.
User Centered Design: Interviews & Surveys.
 
Chapter 9 id2e_slides
Chapter 9 id2e_slidesChapter 9 id2e_slides
Chapter 9 id2e_slides
 
User profiles. Personas
User profiles. PersonasUser profiles. Personas
User profiles. Personas
 
Contextual Inquiry
Contextual InquiryContextual Inquiry
Contextual Inquiry
 
Module 2nd USER INTERFACE DESIGN (15CS832) - VTU
Module 2nd USER INTERFACE DESIGN (15CS832) - VTUModule 2nd USER INTERFACE DESIGN (15CS832) - VTU
Module 2nd USER INTERFACE DESIGN (15CS832) - VTU
 
User Interface Design Chapter 2 Galiz
User Interface Design Chapter 2 GalizUser Interface Design Chapter 2 Galiz
User Interface Design Chapter 2 Galiz
 
Usability & Design Principles
Usability & Design PrinciplesUsability & Design Principles
Usability & Design Principles
 
Design Principles
Design PrinciplesDesign Principles
Design Principles
 
Interaction design and cognitive aspects
Interaction design and cognitive aspects Interaction design and cognitive aspects
Interaction design and cognitive aspects
 
6 Rules of User Interface Design
6 Rules of User Interface Design6 Rules of User Interface Design
6 Rules of User Interface Design
 
Siblings or Step Siblings? Common Connections Between Technical Communication...
Siblings or Step Siblings? Common Connections Between Technical Communication...Siblings or Step Siblings? Common Connections Between Technical Communication...
Siblings or Step Siblings? Common Connections Between Technical Communication...
 
Module 1
Module 1Module 1
Module 1
 
User Interface Design @iRajLal
User Interface Design @iRajLalUser Interface Design @iRajLal
User Interface Design @iRajLal
 
Accessibility and ucd
Accessibility and ucdAccessibility and ucd
Accessibility and ucd
 

Similaire à Interaction design: desiging user interfaces for digital products

User Interface Design: Definitions, Processes and Principles
User Interface Design: Definitions, Processes and PrinciplesUser Interface Design: Definitions, Processes and Principles
User Interface Design: Definitions, Processes and PrinciplesMoodLabs
 
Usability Workshop, 11-8-2012
Usability Workshop, 11-8-2012Usability Workshop, 11-8-2012
Usability Workshop, 11-8-2012Samantha Bailey
 
UXPA 2023: UX Fracking: Using Mixed Methods to Extract Hidden Insights
UXPA 2023: UX Fracking: Using Mixed Methods to Extract Hidden InsightsUXPA 2023: UX Fracking: Using Mixed Methods to Extract Hidden Insights
UXPA 2023: UX Fracking: Using Mixed Methods to Extract Hidden InsightsUXPA International
 
UX Workshop at Startit@KBC
UX Workshop at Startit@KBCUX Workshop at Startit@KBC
UX Workshop at Startit@KBCUXprobe
 
Intro to UX Design
Intro to UX DesignIntro to UX Design
Intro to UX Designjayyearley
 
Design process interaction design basics
Design process interaction design basicsDesign process interaction design basics
Design process interaction design basicsPreeti Mishra
 
Introduction to HCI (UCC)
Introduction to HCI (UCC)Introduction to HCI (UCC)
Introduction to HCI (UCC)apppsych
 
Requirements Engineering for the Humanities
Requirements Engineering for the HumanitiesRequirements Engineering for the Humanities
Requirements Engineering for the HumanitiesShawn Day
 
Psychology Human Computer Interaction
Psychology Human Computer InteractionPsychology Human Computer Interaction
Psychology Human Computer InteractionSeta Wicaksana
 
Human computer interaction Semester 1
Human computer interaction Semester 1Human computer interaction Semester 1
Human computer interaction Semester 1HARISA MARDIANA
 
Aect2018 workshop-v6ij-compressed
Aect2018 workshop-v6ij-compressedAect2018 workshop-v6ij-compressed
Aect2018 workshop-v6ij-compressedIsa Jahnke
 
Conducting User Research
Conducting User ResearchConducting User Research
Conducting User ResearchJeremy Horn
 
Introduction to User-Centered Design
Introduction to User-Centered DesignIntroduction to User-Centered Design
Introduction to User-Centered DesignAllison Bloodworth
 
Advanced Methods for User Evaluation in Enterprise AR
Advanced Methods for User Evaluation in Enterprise ARAdvanced Methods for User Evaluation in Enterprise AR
Advanced Methods for User Evaluation in Enterprise ARMark Billinghurst
 
Impact the UX of Your Website with Contextual Inquiry
Impact the UX of Your Website with Contextual InquiryImpact the UX of Your Website with Contextual Inquiry
Impact the UX of Your Website with Contextual InquiryRachel Vacek
 
Designing Globally, Thinking Locally: An Argument for Design Workflow Virtual...
Designing Globally, Thinking Locally: An Argument for Design Workflow Virtual...Designing Globally, Thinking Locally: An Argument for Design Workflow Virtual...
Designing Globally, Thinking Locally: An Argument for Design Workflow Virtual...Guiseppe Getto
 
Designing Useful and Usable Augmented Reality Experiences
Designing Useful and Usable Augmented Reality Experiences Designing Useful and Usable Augmented Reality Experiences
Designing Useful and Usable Augmented Reality Experiences Yan Xu
 

Similaire à Interaction design: desiging user interfaces for digital products (20)

User Interface Design: Definitions, Processes and Principles
User Interface Design: Definitions, Processes and PrinciplesUser Interface Design: Definitions, Processes and Principles
User Interface Design: Definitions, Processes and Principles
 
Usability Workshop, 11-8-2012
Usability Workshop, 11-8-2012Usability Workshop, 11-8-2012
Usability Workshop, 11-8-2012
 
UXPA 2023: UX Fracking: Using Mixed Methods to Extract Hidden Insights
UXPA 2023: UX Fracking: Using Mixed Methods to Extract Hidden InsightsUXPA 2023: UX Fracking: Using Mixed Methods to Extract Hidden Insights
UXPA 2023: UX Fracking: Using Mixed Methods to Extract Hidden Insights
 
UX Workshop at Startit@KBC
UX Workshop at Startit@KBCUX Workshop at Startit@KBC
UX Workshop at Startit@KBC
 
Intro to UX Design
Intro to UX DesignIntro to UX Design
Intro to UX Design
 
Design process interaction design basics
Design process interaction design basicsDesign process interaction design basics
Design process interaction design basics
 
Introduction to HCI (UCC)
Introduction to HCI (UCC)Introduction to HCI (UCC)
Introduction to HCI (UCC)
 
Requirements Engineering for the Humanities
Requirements Engineering for the HumanitiesRequirements Engineering for the Humanities
Requirements Engineering for the Humanities
 
Psychology Human Computer Interaction
Psychology Human Computer InteractionPsychology Human Computer Interaction
Psychology Human Computer Interaction
 
Human computer interaction Semester 1
Human computer interaction Semester 1Human computer interaction Semester 1
Human computer interaction Semester 1
 
Aect 2018 workshop
Aect 2018 workshopAect 2018 workshop
Aect 2018 workshop
 
Aect2018 workshop-v6ij-compressed
Aect2018 workshop-v6ij-compressedAect2018 workshop-v6ij-compressed
Aect2018 workshop-v6ij-compressed
 
Conducting User Research
Conducting User ResearchConducting User Research
Conducting User Research
 
Introduction to User-Centered Design
Introduction to User-Centered DesignIntroduction to User-Centered Design
Introduction to User-Centered Design
 
Advanced Methods for User Evaluation in Enterprise AR
Advanced Methods for User Evaluation in Enterprise ARAdvanced Methods for User Evaluation in Enterprise AR
Advanced Methods for User Evaluation in Enterprise AR
 
Impact the UX of Your Website with Contextual Inquiry
Impact the UX of Your Website with Contextual InquiryImpact the UX of Your Website with Contextual Inquiry
Impact the UX of Your Website with Contextual Inquiry
 
HCI_01.ppt
HCI_01.pptHCI_01.ppt
HCI_01.ppt
 
Designing Globally, Thinking Locally: An Argument for Design Workflow Virtual...
Designing Globally, Thinking Locally: An Argument for Design Workflow Virtual...Designing Globally, Thinking Locally: An Argument for Design Workflow Virtual...
Designing Globally, Thinking Locally: An Argument for Design Workflow Virtual...
 
UCIDesign.ppt
UCIDesign.pptUCIDesign.ppt
UCIDesign.ppt
 
Designing Useful and Usable Augmented Reality Experiences
Designing Useful and Usable Augmented Reality Experiences Designing Useful and Usable Augmented Reality Experiences
Designing Useful and Usable Augmented Reality Experiences
 

Dernier

Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comjakyjhon00
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillCre8iveskill
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...khushisharma298853
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxb2kshani34
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024Alan Dix
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtTeeFusion
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before ConstructionResDraft
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfHctorFranciscoSnchez1
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxHasan S
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsBlock Party
 
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfsaidbilgen
 
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Amil baba
 
Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxSamKuruvilla5
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLkenzukiri
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTThink 360 Studio
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024mikailaoh
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazineRivanEleraki
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Ed Orozco
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Ted Drake
 

Dernier (19)

Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.com
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkill
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptx
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy Shirt
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before Construction
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdf
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teams
 
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
 
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
 
Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptx
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPT
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazine
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
 

Interaction design: desiging user interfaces for digital products

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