56
USER EXPERIENCE Demystifying it with Mike Biggs @MetaMikeBiggs

Demystifying User Experience - General Assembly

Embed Size (px)

DESCRIPTION

My introduction to UX evening at General Assembly Sydney.

Citation preview

Page 1: Demystifying User Experience - General Assembly

USER EXPERIENCEDemystifying it with Mike Biggs

@MetaMikeBiggs

Page 2: Demystifying User Experience - General Assembly

A BIT ABOUT ME

2

Mike Biggs

Instigator, Digital Strategist, Product Innovator, Management Consultant, Agilist, Lean UXer….. essentially a T-shaped person.

Places and projects:

▫︎Currently work at ThoughtWorks

▫︎Previously worked in digital agencies, NSW Government, Freelance..

▫︎Clients (past & current) include: CommBank, Vodafone, Macquarie Bank, Perpetual, Toshiba, MTV, VMware, The Rocks/Darling Harbour Precincts, Gatorade…

▫︎ Interesting stuff I’ve done: an Instagram rip-off, Hackathon Mentoring, Smart forms (that’s right, forms are interesting!), Soccer viewing iPad app.

Page 3: Demystifying User Experience - General Assembly

Your experience of tonight is governed by your expectations as

much as what is actually delivered.

3

Page 4: Demystifying User Experience - General Assembly

A BIT ABOUT YOU

4

Tell me about yourselves:

▫︎Developer vs design folk

▫︎Delivery vs business people

▫︎New vs seasoned

Page 5: Demystifying User Experience - General Assembly

WHAT YOU’LL LEARN

5

!

▫︎Understand what we mean when we talk about UX (User Experience)

▫︎Where has it come from? - the need of humans…

▫︎Where it lives

▫︎ The UX process

▫︎What are the deliverables

▫︎ Environments

▫︎What Next?

Page 6: Demystifying User Experience - General Assembly

UX HISTORY

6

1988

Page 7: Demystifying User Experience - General Assembly

UX HISTORY

7

1998

Page 8: Demystifying User Experience - General Assembly

WHAT IS UX?

8

!

ISO 9241-210 Human Centred Design

!

[1] defines user experience as "a person's perceptions and responses that result from the use or anticipated use of a product, system or service".

Page 9: Demystifying User Experience - General Assembly

WHAT IS UX?

9

!

“User experience has broadened into being: every single touchpoint your that forms your business -

your brand.”

-Velvet Onion

Page 10: Demystifying User Experience - General Assembly

WHAT IS UX?

10

Page 11: Demystifying User Experience - General Assembly

WHAT IS UX?

11

Page 12: Demystifying User Experience - General Assembly

WHAT IS UX?

12

Page 13: Demystifying User Experience - General Assembly

WHAT IS UX?

13

Page 14: Demystifying User Experience - General Assembly

WHAT IS UX?

14

Page 15: Demystifying User Experience - General Assembly

So..where does UX live?

15

Page 16: Demystifying User Experience - General Assembly

WHAT IS UX

16

Living in a Silo?

▫︎ An excellent structure for holding knowledge

▫︎ Also excellent at withholding knowledge

▫︎ Ensures UX is done RIGHT

▫︎Does not ensure UX is actually done

▫︎ IS a bottleneck

▫︎Does not address cultural change

▫︎ Commonly found in Waterfall environments

Page 17: Demystifying User Experience - General Assembly

WHAT IS UX

17

Cross functional UX?

▫︎ Everyone’s responsible

▫︎ Can also mean no one’s responsible

▫︎ Potential consistency issues

▫︎Huge cultural advantages

▫︎More common in mature Agile environments

Page 18: Demystifying User Experience - General Assembly

If UX is problem solving,

then a UX designer is a facilitator.

18

Page 19: Demystifying User Experience - General Assembly

What problem are we solving again?

19

Page 20: Demystifying User Experience - General Assembly

20

Page 21: Demystifying User Experience - General Assembly

WHAT IS UX

21

At its heart, UX design aims to solve the problem of usability.

Usability is defined by 5 quality components:

▫︎ Learnability: How easy is it for users to accomplish basic tasks the first time they encounter the design?

▫︎ Efficiency: Once users have learned the design, how quickly can they perform tasks?

▫︎ Memorability: When users return to the design after a period of not using it, how easily can they reestablish proficiency?

▫︎ Errors: How many errors do users make, how severe are these errors, and how easily can they recover from the errors?

▫︎ Satisfaction: How pleasant is it to use the design?

Page 22: Demystifying User Experience - General Assembly

WHAT IS UX

22

Examples: Good and Bad

▫︎ Login Sequence

Page 23: Demystifying User Experience - General Assembly

WHAT IS UX

23

Examples: Good and Bad

▫︎ Affordances / Cognitive load

Page 24: Demystifying User Experience - General Assembly

WHAT IS UX

24

Examples: Good and Bad

▫︎ Memorability / Satisfaction- Microinteractions

Page 25: Demystifying User Experience - General Assembly

WHAT IS UX

25

Examples: Good and Bad

▫︎ Memorability / Satisfaction- Microinteractions

Page 26: Demystifying User Experience - General Assembly

WHAT IS UX

26

Examples: Good and Bad

▫︎ Error Reporting

Page 27: Demystifying User Experience - General Assembly

WHAT IS UX

27

Examples: Good and Bad

▫︎ Persuasive design (copy)

Page 28: Demystifying User Experience - General Assembly

WHAT IS UX

28

Examples: Good and Bad

▫︎ Memorability - Navigation

Page 29: Demystifying User Experience - General Assembly

WHAT IS UX

29

Examples: Good and Bad

▫︎ Cross Channel

Page 30: Demystifying User Experience - General Assembly

WHAT IS UX

30

Examples: Good and Bad

▫︎ Labelling / IA - Also, Cognitive Load

Page 31: Demystifying User Experience - General Assembly

WHAT IS UX

31

Examples: Good and Bad

▫︎ Cross Channel

Page 32: Demystifying User Experience - General Assembly

Basically..

“Don’t make me think”

-Steve Krug

32

Page 33: Demystifying User Experience - General Assembly

THE UX PROCESS

33

Page 34: Demystifying User Experience - General Assembly

THE UX PROCESS

34

The 5 D’s

▫︎Discover

▫︎Define

▫︎Design

▫︎Develop

▫︎Deliver

Page 35: Demystifying User Experience - General Assembly

THE UX PROCESS

35

The Double Diamond:

Page 36: Demystifying User Experience - General Assembly

THE UX PROCESS

36

The Design Thinking Process:

Page 37: Demystifying User Experience - General Assembly

THE UX PROCESS

37

Discover Stage. Goal: To understand the User and their context.

Main contributor: User Researcher

Methods:

▫︎ Ethnographic research

▫︎ User diaries

▫︎ Interviews

▫︎ Card sort

Outputs:

▫︎ User stories & personas

▫︎ Problem statements

▫︎ Affinity diagrams

▫︎ Semantic Maps

Page 38: Demystifying User Experience - General Assembly

EXAMPLES OF ACTIVITIES DELIVERABLES

38

Ethnographic Research

Page 39: Demystifying User Experience - General Assembly

EXAMPLES OF ACTIVITIES DELIVERABLES

39

Empathy Maps

Page 40: Demystifying User Experience - General Assembly

EXAMPLES OF ACTIVITIES DELIVERABLES

40

Personas

Page 41: Demystifying User Experience - General Assembly

THE UX PROCESS

41

Define Stage. Goal: To define the high level requirements of any design output.

Contributors: Information Architect, Mythical UX Generalist, Project Manager, Product Manager.

Methods:

▫︎ Development of Product Requirements

▫︎ Define Information Architecture including Tree testing

▫︎ Project Plan development

!

Outputs:

▫︎ Product Requirements Document

▫︎ Tree testing report

▫︎ Project Plan

Page 42: Demystifying User Experience - General Assembly

THE UX PROCESS

42

Content Inventories & Sitemapping

Page 43: Demystifying User Experience - General Assembly

THE UX PROCESS

43

Design Stage. Goal: To design artefacts which address the problem as defined.

Contributors: Information Architect & Interaction Designer

Methods:

▫︎ Paper prototyping

▫︎ Digital Wireframing

▫︎ Explicit use of Usability Quality Metrics

▫︎ User Testing

▫︎ Visual Design Concepts

Outputs:

▫︎ Validated prototypes & wireframes

▫︎ Revised sitemap

▫︎ User flows

▫︎ UI designs

▫︎ Brand/ Marketing buy-in re visual design

Page 44: Demystifying User Experience - General Assembly

THE UX PROCESS

44

User Flows

Page 45: Demystifying User Experience - General Assembly

THE UX PROCESS

45

Think ‘views’ not pages

Page 46: Demystifying User Experience - General Assembly

THE UX PROCESS

46

Content Matrix

Page 47: Demystifying User Experience - General Assembly

THE UX PROCESS

47

Content Matrix

Pre Event At Event Post Event

Desktop

Mobile

Page 48: Demystifying User Experience - General Assembly

THE UX PROCESS

48

Paper Prototypes

Page 49: Demystifying User Experience - General Assembly

THE UX PROCESS

49

Wireframes

Page 50: Demystifying User Experience - General Assembly

THE UX PROCESS

50

Develop Stage. Goal: To build software that will deliver the design as intended.

Contributors: Primarily Developers

Methods:

▫︎ Technical Architecture design

▫︎ UML

▫︎ Setup testing environment

▫︎ Release management

!

Outputs:

▫︎ Actual code

▫︎ No ‘UX’ deliverables

!

Page 51: Demystifying User Experience - General Assembly

THE UX PROCESS

51

Deliver Stage. Goal: To release software to market.

Contributors: Primarily Developers

Methods:

▫︎ Test cases

▫︎ Testing

!!

Outputs:

▫︎ Test reports

▫︎ No ‘UX’ deliverables

!

Page 52: Demystifying User Experience - General Assembly

THE UX PROCESS

52

What is this process?

Page 53: Demystifying User Experience - General Assembly

ENVIRONMENTS

53

Environments:

▫︎Waterfall

▫︎ Agile

▫︎ Lean

Page 54: Demystifying User Experience - General Assembly

WHAT’S NEXT

54

Where is UX going?

▫︎ Product Management

▫︎ Service Design

▫︎ Industries/ contexts Where you can go:

▫︎Human Computer Interaction

▫︎ Lean Validation Board

▫︎Designing the organisation

Page 55: Demystifying User Experience - General Assembly

TOOLS & RESOURCES

55

▫︎ mockflow.com < I use this one- cheap, good and you can share wireframes with clients/stakeholders remotely

▫︎ balsamiq.com < popular

▫︎ http://www.optimalworkshop.com/ < A suite of tools for organising your Information Architecture, then testing it. Also includes a tool for rapidly testing early designs/ sketches called Chalkmark. Recommended.

▫︎ loop11.com < allows you to remotely track how a user response to a detailed wireframe or full website design.

▫︎ Human Computer Interaction cousre-https://www.coursera.org/course/hciucsd

▫︎ Lean Validation Board- for Startups and Product development, but is just as useful when addressing UX - https://www.leanstartupmachine.com/validationboard/

Page 56: Demystifying User Experience - General Assembly

THANKSMike Biggs @MetaMikeBiggs ThoughtWorks

56