04 interaction design process-updatedtools for interaction designtools for interaction design •...
TRANSCRIPT
DESIGN
THE PROCESS OFTHE PROCESS OF(Chapter 04)
THE PROCESS OF THE PROCESS OF INTERACTION DESIGNINTERACTION DESIGN
OverviewOverview• What is involved in Interaction Design?
– Importance of involving users– Degrees of user involvement– What is a user-centered approach?
– Four basic activities
• Some practical issuesSome practical issues– Who are the users?– What are ‘needs’?
Where do alternatives come from?– Where do alternatives come from?– How to choose among alternatives?
– How to integrate interaction design activities in other lifecycle models?models?
www.id-book.com 2
What is involved in Interaction D i ?Design?
• It is a process:– a goal-directed problem solving activity informed by
intended use, target domain, materials, cost, and feasibilitya creative activity– a creative activity
– a decision-making activity to balance trade-offs
• Generating alternatives and choosing between them is key
• Four approaches: user-centered design, activity-centered design, systems design, and genius design
www.id-book.com 3
Importance of involving usersImportance of involving users• Expectation management
– Realistic expectations – No surprises, no disappointments– Timely training– Communication, but no hype
• Ownership– Make the users active stakeholders– More likely to forgive or accept problems– Can make a big difference to acceptance and
success of product
www.id-book.com
success of product
4
Degrees of user involvementDegrees of user involvement• Member of the design team
– Full time: constant input, but lose touch with users– Part time: patchy input, and very stressful– Short term: inconsistent across project lifeShort term: inconsistent across project life– Long term: consistent, but lose touch with users
• Newsletters and other dissemination devices– Reach wider selection of users– Need communication both ways– Need communication both ways
• User involvement after product is released
www.id-book.com
• Combination of these approaches5
What is a user-centered approach?What is a user centered approach?User-centered approach is based on:pp
– Early focus on users and tasks: directly studying cognitive, behavioral, anthropomorphic & attitudinal characteristics
– Empirical measurement: users’ reactions andEmpirical measurement: users reactions and performance to scenarios, manuals, simulations & prototypes are observed, recorded and analysed
– Iterative design: when problems are found in user testing, fix them and carry out more tests
www.id-book.com 6
Four basic activities in Interaction Design
1. Identifying needs and Establishing requirements
2. Designing alternatives design
3. Building interactive versions of the designs(Prototyping)
4. Evaluating designs
www.id-book.com 7
A simple interaction design lifecycle model
Exemplifies a user-centered design approach
Identify the people who will use the product, what they will use it for, and under what conditions they will use it.
Identify conceptual model, task analysis, user analysis that must be met for the product to
ideally through usability testing with actual users is important as quality testing is to good software d l tbe successful. development.
Alternative
This part of the process may be done inThis part of the process may be done in stages, building from a rough concept (prototype) to a complete design
Some practical issuesp• Who are the users?
• What do we mean by ‘needs’?
• How to generate alternatives
• How to choose among alternatives
• How to integrate interaction design activities with other lifecycle models?
www.id-book.com
activities with other lifecycle models?9
Target UsersTarget Users
Who are the users/stakeholders?Who are the users/stakeholders?
• Not as obvious as you think:– those who interact directly with the product
– those who manage direct users
– those who receive output from the product
– those who make the purchasing decision
those who use competitor’s products– those who use competitor s products
• Three categories of user (Eason, 1987): i f t h d– primary: frequent hands-on
– secondary: occasional or via someone else
– tertiary: affected by its introduction or will influence its purchase
www.id-book.com
– tertiary: affected by its introduction, or will influence its purchase
11
Who are the stakeholders?
Check-out operatorsCheck out operators
• SuppliersL l h• Local shop owners
www.id-book.com
CustomersManagers and owners12
What do we mean by ‘needs’?y• Users rarely know what is possible
U ’ ll h h ‘ d’ h l h• Users can’t tell you what they ‘need’ to help them achieve their goals
• Instead look at existing tasks:• Instead, look at existing tasks:– their context
– what information do they require?what information do they require?
– who collaborates to achieve the task?
– why is the task achieved the way it is?
• Envisioned tasks:– can be rooted in existing behaviour
– can be described as future scenarios13www.id-book.com
How to generate alternativesHow to generate alternatives• Humans stick to what they know works
• But considering alternatives is important to ‘break out of the box’
• Designers are trained to consider alternatives, software people generally are not
• How do you generate alternatives?
— ‘Flair and creativity’: research and synthesis— Flair and creativity : research and synthesis
— Seek inspiration: look at similar products or look at very different products
14www.id-book.com
IDEO TechBoxIDEO TechBox• Library, database and website all-in-oneLibrary, database and website all in one
• Contains physical gizmos for inspiration
15www.id-book.com
1
Slide 15
1 These images are no longer on ideo-com. Can we keep them on here? If not then please paste in Figure 9.4Helen Sharp, 1/17/2015
The TechBoxThe TechBox
16www.id-book.com
How to choose among alternatives• Evaluation with users or with peers, e.g. prototypes
• Technical feasibility: some not possibley p
• Quality thresholds: Usability goals lead to usability criteria set early on and check regularly
– safety: how safe?– utility: which functions are superfluous? – effectiveness: appropriate support? task coverage,
information available– efficiency: performance measurementsy p– learnability: is the time taken to learn a function acceptable
to the users?– memorability: can infrequent users remember how tomemorability: can infrequent users remember how to
achieve their goal?17www.id-book.com
Testing prototypes to choose l iamong alternatives
18www.id-book.com
How to integrate interaction design i h d lin other models
• Integrating interaction design activities in lifecycle models from other disciplines needs careful planning
• Several software engineering lifecycle models have been considered
• Integrating with agile software development is promising– it stresses the importance of iteration– it champions early and regular feedback– it handles emergent requirements
it aims to strike a balance between flexibility and structure– it aims to strike a balance between flexibility and structure
19www.id-book.com
IxD in PracticeIxD in Practice
Agile developmentAgile development• Short (one to three week) timeboxes of
it ti d l t ( i t it ti l )iterative development (sprint, iteration, cycle)
• Early and repeated customer/user feedbackEarly and repeated customer/user feedback
• Re-prioritisation of work based on customer/user so that emergent requirements can be handled
• Many approaches, e.g. eXtreme Programming (XP), Scrum, DSDM(XP), Scrum, DSDM
www.id-book.com 21
Agile UX TechniquesAgile UX Techniques
• AgileUXAgileUX
G l D i S i t• Google Design Sprint
• Lean UX
www.id-book.com 22
AgileUXAgileUX• Integrates techniques from interaction design and Agile software
development
• AgileUX requires a change of mindset
• In Agile, as implementation proceeds:g , p p
– requirements are elaborated – requirements are re-prioritised
• All techniques in UX are still relevant but when and how much needs re-thinking
– focus on product not design as deliverablefocus on product, not design, as deliverable – cross-functional teams
• Three practical areas: user research, aligning work practices, documentationdocumentation
www.id-book.com 23
User researchUser research• Aims to characterise users through data
collection and analysiscollection and analysis
• Agile’s timeboxing approach does not support long periods of user researchlong periods of user research
• User evaluations and some detailed work can be fitted within a timeboxbe fitted within a timebox
• Some user research can be performed in it ti 0 ( ) b f i l t ti t titeration 0 (zero), before implementation starts
• Ongoing programme of user research
www.id-book.com 24
Aligning work practicesAligning work practices• Designing a complete product upfront causes
problems beca se of re prioritisationproblems because of re-prioritisation
• Some upfront work is needed (technical and p (UX)
• Use a parallel tracks approach:• Use a parallel tracks approach:– create product vision before development starts
do design work one iteration ahead of– do design work one iteration ahead of development
– some teams work two iterations aheadsome teams work two iterations ahead
www.id-book.com 25
Parallel tracks approach to AgileUXpp g
www.id-book.com 26
Aligning work practicesAligning work practices• Advantages of parallel tracks approach:
– no design time wasted on features not implemented
usability testing and contextual inquiry could be done– usability testing and contextual inquiry could be done on the same customer visit, saving time
timely feedback on the designs was received from– timely feedback on the designs was received from developers and customers
Agile flexibility supports schedule changes if a– Agile flexibility supports schedule changes if a problem is found
P ll l t k i l d• Parallel tracks is commonly usedwww.id-book.com 27
DocumentationDocumentation• Most common communication approach for UX
designersdesigners• Agile discourages this kind of communication, in
favour of discussion• Only use documentation where needed. Ask:
– Who will read it?Who will read it?– Who will use it?– What is the minimum needed?at s t e u eeded– Is there duplication anywhere?– How polished does it need to be?p
www.id-book.com 28
Documentation: how polished?p
www.id-book.com 29
Documentation: how polished?p
www.id-book.com 30
Lean UXLean UX• Making assumptions - typical
questions might include:Wh ?– Who are our users?
– What is the product used for?– When is it used?– What situations is it used in?What situations is it used in?– What will be the most important
functionality?– What’s the biggest risk to product
delivery?delivery?
• Testing out the assumptions by creating hypothesesAn example:We believe that enabling people to save their progress at any time is essential for smartphone users. This will achieve a higher level of sign up completions We will have demonstrated this when we can measure an
https://www.interaction-design.org/literature/article/a-simple-introduction-to-lean-ux 31
completions. We will have demonstrated this when we can measure an improvement of the current completion rate of 20%.
Google Design SprintGoogle Design Sprint• Make revisions based on the first sprint and then re-iterate the last
two phases (at a minimum). However, if the idea isn’t gaining the i h h h d b d f h b k dtraction that what had been expected; move further back and re-
iterate from there.• Read further here: Make UX Design Process Agile Using Google’s
Methodologygy
• The 5 phases of Google’s Design Sprint:
https://designsprintkit.withgoogle.com/methodology/overview 32
‘tailored’ design sprinttailored design sprint
www.id-book.com 33
www.id-book.com 34
Design PatternsDesign Patterns• Capture design experience:
– a solution to a problem in a context– can be instantiated in many ways: generative
• Patterns may be individual, in languages, in catalogues, galleries or libraries
• Patterns often are associated with software components, e.g. Github or platform websites
• Carousel pattern as example:
www.id-book.com 35
Design Patterns
Insert Figure 12.5 (a)
www.id-book.com 36
Design PatternsDesign Patterns• Capture design experience, but that doesn’t
il d d inecessarily mean good design: – anti-patterns: don’t do it this way!
d k tt d lib t t i k– dark patterns: deliberate tricks
www.id-book.com 37
Open Source ResourcesOpen Source Resources
• Components frameworks systems• Components, frameworks, systems available free of charge
• Community-driven
• Available for interaction design:– design pattern librariesdesign pattern libraries
– Bootstrap framework
www.id-book.com 38
Open Source ResourcesOpen Source Resources
www.id-book.com 39
Tools for Interaction DesignTools for Interaction Design• Tools support all aspects of the design process:
ti it k t hi i l ti b i t i lib h– creativity, sketching, simulation, brainstorming, library search, mindmapping, video capture
• Tools integrate together to speed up prototypingTools integrate together to speed up prototyping
• Interactive wireframes or mockups can be produced using, e.g. g– Balsamiq© – Axure©
• Higher fidelity prototype can be produced by linking interactive wireframe to design pattern library with software components
www.id-book.com 40
SummarySummaryFour basic activities in the design process
1. Establishing requirements2. Designing alternatives3 P i3. Prototyping4. Evaluating
User-centered design rests on three principles1. Early focus on users and tasksy2. Empirical measurement using quantifiable &
measurable usability criteria3. Iterative design
41www.id-book.com
SummarySummary• AgileUX refers to approaches that integrate UX design
and agile developmentand agile development – it requires a change in mindset by designers and developers
– requirements are repeatedly re-prioritised, which aims to avoid wasted q p y peffort
– UX design activities need rethinking: when, how much, and how to take forward
• Alternatives to AgileUX: Google Design Sprint Lean UX• Alternatives to AgileUX: Google Design Sprint, Lean UX
• Design patterns present a solution to a problem in a context
• Open source resources, e.g. on Github, make development of standard applications easier and quicker
• A range of automated tools to support interaction design in practice is available
www.id-book.com 42