04 interaction design process-updatedtools for interaction designtools for interaction design •...

43
DESIGN THE PROCESS OF THE PROCESS OF (Chapter 04) THE PROCESS OF THE PROCESS OF INTERACTION DESIGN INTERACTION DESIGN

Upload: others

Post on 06-Jun-2020

12 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: 04 Interaction Design Process-updatedTools for Interaction DesignTools for Interaction Design • Tools support all aspects of the design process: – creati it k t hi i l ti b i t

DESIGN

THE PROCESS OFTHE PROCESS OF(Chapter 04)

THE PROCESS OF THE PROCESS OF INTERACTION DESIGNINTERACTION DESIGN

Page 2: 04 Interaction Design Process-updatedTools for Interaction DesignTools for Interaction Design • Tools support all aspects of the design process: – creati it k t hi i l ti b i t

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

Page 3: 04 Interaction Design Process-updatedTools for Interaction DesignTools for Interaction Design • Tools support all aspects of the design process: – creati it k t hi i l ti b i t

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

Page 4: 04 Interaction Design Process-updatedTools for Interaction DesignTools for Interaction Design • Tools support all aspects of the design process: – creati it k t hi i l ti b i t

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

Page 5: 04 Interaction Design Process-updatedTools for Interaction DesignTools for Interaction Design • Tools support all aspects of the design process: – creati it k t hi i l ti b i t

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

Page 6: 04 Interaction Design Process-updatedTools for Interaction DesignTools for Interaction Design • Tools support all aspects of the design process: – creati it k t hi i l ti b i t

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

Page 7: 04 Interaction Design Process-updatedTools for Interaction DesignTools for Interaction Design • Tools support all aspects of the design process: – creati it k t hi i l ti b i t

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

Page 8: 04 Interaction Design Process-updatedTools for Interaction DesignTools for Interaction Design • Tools support all aspects of the design process: – creati it k t hi i l ti b i t

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

Page 9: 04 Interaction Design Process-updatedTools for Interaction DesignTools for Interaction Design • Tools support all aspects of the design process: – creati it k t hi i l ti b i t

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

Page 10: 04 Interaction Design Process-updatedTools for Interaction DesignTools for Interaction Design • Tools support all aspects of the design process: – creati it k t hi i l ti b i t

Target UsersTarget Users

Page 11: 04 Interaction Design Process-updatedTools for Interaction DesignTools for Interaction Design • Tools support all aspects of the design process: – creati it k t hi i l ti b i t

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

Page 12: 04 Interaction Design Process-updatedTools for Interaction DesignTools for Interaction Design • Tools support all aspects of the design process: – creati it k t hi i l ti b i t

Who are the stakeholders?

Check-out operatorsCheck out operators

• SuppliersL l h• Local shop owners

www.id-book.com

CustomersManagers and owners12

Page 13: 04 Interaction Design Process-updatedTools for Interaction DesignTools for Interaction Design • Tools support all aspects of the design process: – creati it k t hi i l ti b i t

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

Page 14: 04 Interaction Design Process-updatedTools for Interaction DesignTools for Interaction Design • Tools support all aspects of the design process: – creati it k t hi i l ti b i t

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

Page 15: 04 Interaction Design Process-updatedTools for Interaction DesignTools for Interaction Design • Tools support all aspects of the design process: – creati it k t hi i l ti b i t

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

Page 16: 04 Interaction Design Process-updatedTools for Interaction DesignTools for Interaction Design • Tools support all aspects of the design process: – creati it k t hi i l ti b i t

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

Page 17: 04 Interaction Design Process-updatedTools for Interaction DesignTools for Interaction Design • Tools support all aspects of the design process: – creati it k t hi i l ti b i t

The TechBoxThe TechBox

16www.id-book.com

Page 18: 04 Interaction Design Process-updatedTools for Interaction DesignTools for Interaction Design • Tools support all aspects of the design process: – creati it k t hi i l ti b i t

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

Page 19: 04 Interaction Design Process-updatedTools for Interaction DesignTools for Interaction Design • Tools support all aspects of the design process: – creati it k t hi i l ti b i t

Testing prototypes to choose l iamong alternatives

18www.id-book.com

Page 20: 04 Interaction Design Process-updatedTools for Interaction DesignTools for Interaction Design • Tools support all aspects of the design process: – creati it k t hi i l ti b i t

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

Page 21: 04 Interaction Design Process-updatedTools for Interaction DesignTools for Interaction Design • Tools support all aspects of the design process: – creati it k t hi i l ti b i t

IxD in PracticeIxD in Practice

Page 22: 04 Interaction Design Process-updatedTools for Interaction DesignTools for Interaction Design • Tools support all aspects of the design process: – creati it k t hi i l ti b i t

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

Page 23: 04 Interaction Design Process-updatedTools for Interaction DesignTools for Interaction Design • Tools support all aspects of the design process: – creati it k t hi i l ti b i t

Agile UX TechniquesAgile UX Techniques

• AgileUXAgileUX

G l D i S i t• Google Design Sprint

• Lean UX

www.id-book.com 22

Page 24: 04 Interaction Design Process-updatedTools for Interaction DesignTools for Interaction Design • Tools support all aspects of the design process: – creati it k t hi i l ti b i t

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

Page 25: 04 Interaction Design Process-updatedTools for Interaction DesignTools for Interaction Design • Tools support all aspects of the design process: – creati it k t hi i l ti b i t

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

Page 26: 04 Interaction Design Process-updatedTools for Interaction DesignTools for Interaction Design • Tools support all aspects of the design process: – creati it k t hi i l ti b i t

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

Page 27: 04 Interaction Design Process-updatedTools for Interaction DesignTools for Interaction Design • Tools support all aspects of the design process: – creati it k t hi i l ti b i t

Parallel tracks approach to AgileUXpp g

www.id-book.com 26

Page 28: 04 Interaction Design Process-updatedTools for Interaction DesignTools for Interaction Design • Tools support all aspects of the design process: – creati it k t hi i l ti b i t

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

Page 29: 04 Interaction Design Process-updatedTools for Interaction DesignTools for Interaction Design • Tools support all aspects of the design process: – creati it k t hi i l ti b i t

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

Page 30: 04 Interaction Design Process-updatedTools for Interaction DesignTools for Interaction Design • Tools support all aspects of the design process: – creati it k t hi i l ti b i t

Documentation: how polished?p

www.id-book.com 29

Page 31: 04 Interaction Design Process-updatedTools for Interaction DesignTools for Interaction Design • Tools support all aspects of the design process: – creati it k t hi i l ti b i t

Documentation: how polished?p

www.id-book.com 30

Page 32: 04 Interaction Design Process-updatedTools for Interaction DesignTools for Interaction Design • Tools support all aspects of the design process: – creati it k t hi i l ti b i t

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

Page 33: 04 Interaction Design Process-updatedTools for Interaction DesignTools for Interaction Design • Tools support all aspects of the design process: – creati it k t hi i l ti b i t

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

Page 34: 04 Interaction Design Process-updatedTools for Interaction DesignTools for Interaction Design • Tools support all aspects of the design process: – creati it k t hi i l ti b i t

‘tailored’ design sprinttailored design sprint

www.id-book.com 33

Page 35: 04 Interaction Design Process-updatedTools for Interaction DesignTools for Interaction Design • Tools support all aspects of the design process: – creati it k t hi i l ti b i t

www.id-book.com 34

Page 36: 04 Interaction Design Process-updatedTools for Interaction DesignTools for Interaction Design • Tools support all aspects of the design process: – creati it k t hi i l ti b i t

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

Page 37: 04 Interaction Design Process-updatedTools for Interaction DesignTools for Interaction Design • Tools support all aspects of the design process: – creati it k t hi i l ti b i t

Design Patterns

Insert Figure 12.5 (a)

www.id-book.com 36

Page 38: 04 Interaction Design Process-updatedTools for Interaction DesignTools for Interaction Design • Tools support all aspects of the design process: – creati it k t hi i l ti b i t

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

Page 39: 04 Interaction Design Process-updatedTools for Interaction DesignTools for Interaction Design • Tools support all aspects of the design process: – creati it k t hi i l ti b i t

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

Page 40: 04 Interaction Design Process-updatedTools for Interaction DesignTools for Interaction Design • Tools support all aspects of the design process: – creati it k t hi i l ti b i t

Open Source ResourcesOpen Source Resources

www.id-book.com 39

Page 41: 04 Interaction Design Process-updatedTools for Interaction DesignTools for Interaction Design • Tools support all aspects of the design process: – creati it k t hi i l ti b i t

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

Page 42: 04 Interaction Design Process-updatedTools for Interaction DesignTools for Interaction Design • Tools support all aspects of the design process: – creati it k t hi i l ti b i t

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

Page 43: 04 Interaction Design Process-updatedTools for Interaction DesignTools for Interaction Design • Tools support all aspects of the design process: – creati it k t hi i l ti b i t

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