[PPT] - UX in a Day Thomas Wendt Surrounding Signifiers @thomas_wendt PowerPoint Presentation

SLIDE 1

UX in a Day

Thomas Wendt Surrounding Signifiers @thomas_wendt thomas@srsg.co srsg.co

SLIDE 2

Thomas Wendt Surrounding Signifiers @thomas_wendt

Thomas Wendt

Design Strategy and Research Consultant DBA Surrounding Signifiers Teacher, Speaker, and Writer Background in continental philosophy, psychology, and literary theory Working on a book: designfordasein.com

SLIDE 3

Thomas Wendt Surrounding Signifiers @thomas_wendt

Design for Dasein

Phenomenology for Experience Designers

designfordasein.com

SLIDE 4

Thomas Wendt Surrounding Signifiers @thomas_wendt

Agenda

09:00 - 10:00 Foundations 10:00 - 11:15 Research 11:15 - 11:30 Break 11:30 - 12:15 Usability 12:15 - 01:15 Lunch 01:15 - 02:15 Information Architecture 02:15 - 02:45 Visual Thinking 02:45 - 03:00 Break 03:00 - 04:00 Wireframing and Prototyping 04:00 - 04:30 Q+A

SLIDE 5

Foundations

Thomas Wendt Surrounding Signifiers @thomas_wendt

SLIDE 6

First, what is UX?

Thomas Wendt Surrounding Signifiers @thomas_wendt

SLIDE 7

Thomas Wendt Surrounding Signifiers @thomas_wendt

SLIDE 8

UX is “the design of anything independent of medium or across media, with human experience as an explicit outcome and human engagement as an explicit goal”.

Jesse James Garrett

Thomas Wendt Surrounding Signifiers @thomas_wendt

SLIDE 9

Interaction Design Service Design Visual Design Information Architecture User Research Content Strategy

Practices

Thomas Wendt Surrounding Signifiers @thomas_wendt

SLIDE 10

Psychology Anthropology Sociology Philosophy

But also

Thomas Wendt Surrounding Signifiers @thomas_wendt

SLIDE 11

Experiences vs. Interfaces

Thomas Wendt Surrounding Signifiers @thomas_wendt

SLIDE 12

Science vs. Design

Thomas Wendt Surrounding Signifiers @thomas_wendt

SLIDE 13

Don’t rely on “best practices”

Thomas Wendt Surrounding Signifiers @thomas_wendt

SLIDE 14

Processes

Thomas Wendt Surrounding Signifiers @thomas_wendt

SLIDE 15

Thomas Wendt Surrounding Signifiers @thomas_wendt

Waterfall

SLIDE 16

Discover

5 D’s

Thomas Wendt Surrounding Signifiers @thomas_wendt

SLIDE 17

Discover Define

5 D’s

Thomas Wendt Surrounding Signifiers @thomas_wendt

SLIDE 18

Discover Define Design

5 D’s

Thomas Wendt Surrounding Signifiers @thomas_wendt

SLIDE 19

Discover Define Design Develop

5 D’s

Thomas Wendt Surrounding Signifiers @thomas_wendt

SLIDE 20

Discover Define Design Develop Deliver

5 D’s

Thomas Wendt Surrounding Signifiers @thomas_wendt

SLIDE 21

Thomas Wendt Surrounding Signifiers @thomas_wendt

Lean UX

SLIDE 22

Thomas Wendt Surrounding Signifiers @thomas_wendt

Design Thinking

SLIDE 23

Research

Thomas Wendt Surrounding Signifiers @thomas_wendt

SLIDE 24

Thomas Wendt Surrounding Signifiers @thomas_wendt

SLIDE 25

Qualitative vs. Quantitative

Thomas Wendt Surrounding Signifiers @thomas_wendt

SLIDE 26

Formative vs. Summative

Thomas Wendt Surrounding Signifiers @thomas_wendt

SLIDE 27

Thomas Wendt Surrounding Signifiers @thomas_wendt

SLIDE 28

Methods

Thomas Wendt Surrounding Signifiers @thomas_wendt

SLIDE 29

Types of Research

Thomas Wendt Surrounding Signifiers @thomas_wendt

SLIDE 30

Thomas Wendt Surrounding Signifiers @thomas_wendt

Ethnography

SLIDE 31

Thomas Wendt Surrounding Signifiers @thomas_wendt

Design Ethnography

SLIDE 32

Flexible, adaptive Rich, targeted information Easy to understand, difficult to execute

Interviews

Thomas Wendt Surrounding Signifiers @thomas_wendt

SLIDE 33

This is the hardest part Write out participant traits Find out where they spend time Hire a recruiter

Finding Participants

Thomas Wendt Surrounding Signifiers @thomas_wendt

SLIDE 34

“We say that we ‘conduct’ a conversation, but the more genuine a conversation is, the less its conduct lies within the will of either partner. Thus a genuine conversation is never the one that we wanted to conduct.”

Hans-Georg Gadamer

SLIDE 35

Record if possible (buy a Livescribe pen) Remain as “natural” as you can Pair up if possible Ease the transition

Conducting Interviews

Thomas Wendt Surrounding Signifiers @thomas_wendt

SLIDE 36

Write a discussion guide Beware of priming, leading questions Probe behavior, not intention

Conducting Interviews

Thomas Wendt Surrounding Signifiers @thomas_wendt

SLIDE 37

Keep people talking “Tell me more about that” “What do you mean by…” “Help me understand better..”

Conducting Interviews

Thomas Wendt Surrounding Signifiers @thomas_wendt

SLIDE 38

But also embrace awkward silences …

Conducting Interviews

Thomas Wendt Surrounding Signifiers @thomas_wendt

SLIDE 39

05 min 10 min 05 min

Activity

Thomas Wendt Surrounding Signifiers @thomas_wendt

Brainstorm questions (individual) Pair up, interview your partner Discussion

Online shopping interview.

SLIDE 40

People have no idea what they want It’s your job to interpret what they say

Interpretation

Thomas Wendt Surrounding Signifiers @thomas_wendt

SLIDE 41

Research Deliverables

Thomas Wendt Surrounding Signifiers @thomas_wendt

SLIDE 42

Archetype that represents a group of people Based on research results Communicates findings

Personas

Thomas Wendt Surrounding Signifiers @thomas_wendt

SLIDE 43

SLIDE 44

Keep design teams focused on real people Remember, they’re just a framework

Personas

Thomas Wendt Surrounding Signifiers @thomas_wendt

SLIDE 45

Goals/needs Traits Pain points Scenarios

Components

Thomas Wendt Surrounding Signifiers @thomas_wendt

SLIDE 46

They can be artificial/abstract/fictitious They don’t have opinions They can’t talk back, answer questions, or give feedback

Challenges

Thomas Wendt Surrounding Signifiers @thomas_wendt

SLIDE 47

Break

Thomas Wendt Surrounding Signifiers @thomas_wendt

SLIDE 48

Usability

Thomas Wendt Surrounding Signifiers @thomas_wendt

SLIDE 49

What is it?

Thomas Wendt Surrounding Signifiers @thomas_wendt

SLIDE 50

Lab-based

highly formalized
controlled environment
artificial

Methods

Thomas Wendt Surrounding Signifiers @thomas_wendt

SLIDE 51

Cafe testing

unstructured
public
good for quick validation
recruitment demographic needs

to be broad

Methods

Thomas Wendt Surrounding Signifiers @thomas_wendt

SLIDE 52

Remote testing

good for increasing geographical

sampling without travel

Methods

Thomas Wendt Surrounding Signifiers @thomas_wendt

SLIDE 53

Unmoderated testing

via companies like

usertesting.com

you give them a prototype and

some tasks, they facilitate the tests

Methods

Thomas Wendt Surrounding Signifiers @thomas_wendt

SLIDE 54

Face to face

recommended
provide users with tasks; observe

as they interact with the prototype

Methods

Thomas Wendt Surrounding Signifiers @thomas_wendt

SLIDE 55

Create task scenarios

determine the key tasks a user

needs to accomplish

frame tasks as goals
don’t prompt the solution

Facilitating Sessions

Thomas Wendt Surrounding Signifiers @thomas_wendt

SLIDE 56

Example: Chase bank home page: “Imagine you need to check your checking account balance. Show me how you would do that.”

Facilitating Sessions

Thomas Wendt Surrounding Signifiers @thomas_wendt

SLIDE 57

Similar to research, remain neutral and keep the conversation “natural” Always tell users you are testing the design, not their individual skill

Facilitating Sessions

Thomas Wendt Surrounding Signifiers @thomas_wendt

SLIDE 58

Asking users what they “like” Asking users to predict the future Leading people

Things to Avoid

Thomas Wendt Surrounding Signifiers @thomas_wendt

SLIDE 59

Notes, possibly a report Design recommendations

Outputs

Thomas Wendt Surrounding Signifiers @thomas_wendt

SLIDE 60

05 min 10 min 05 min

Activity

Thomas Wendt Surrounding Signifiers @thomas_wendt

Create a list of tasks for Noble Desktop Pair up, test your partner Discussion

Run a mock test

SLIDE 61

Lunch

Thomas Wendt Surrounding Signifiers @thomas_wendt

SLIDE 62

Information Architecture

Thomas Wendt Surrounding Signifiers @thomas_wendt

SLIDE 63

The structural design of shared information environments. Meaning Meaning Meaning

Definition

Thomas Wendt Surrounding Signifiers @thomas_wendt

SLIDE 64

Thomas Wendt Surrounding Signifiers @thomas_wendt

SLIDE 65

http://vimeo.com/8866160

Video Time

Thomas Wendt Surrounding Signifiers @thomas_wendt

SLIDE 66

Maps how meaning is organized and how parts interact AKA concept model

Ontology

Thomas Wendt Surrounding Signifiers @thomas_wendt

SLIDE 67

Ontology

Thomas Wendt Surrounding Signifiers @thomas_wendt

SLIDE 68

Ontology

Thomas Wendt Surrounding Signifiers @thomas_wendt

SLIDE 69

05 min 05 min

Activity

Thomas Wendt Surrounding Signifiers @thomas_wendt

List the components Draw the model

Create an ontology for “friendship”

SLIDE 70

Maps categories Establishes hierarchy or heterarchy

Taxonomy

Thomas Wendt Surrounding Signifiers @thomas_wendt

SLIDE 71

Taxonomy

Thomas Wendt Surrounding Signifiers @thomas_wendt

SLIDE 72

How individual pieces of data interact with one another Includes both synchronized actions (designs) and improvisation (emergence)

Choreography

Thomas Wendt Surrounding Signifiers @thomas_wendt

SLIDE 73

Heuristics

Lovingly stolen from Abby Covert

Thomas Wendt Surrounding Signifiers @thomas_wendt

SLIDE 74

Can users easily locate that which they are seeking? Are there multiple ways available to access things? Is information formatted with results in mind?

Findability

Thomas Wendt Surrounding Signifiers @thomas_wendt

SLIDE 75

Can it be used via all expected channels and devices? Does it meet the levels of accessibility compliance to be considerate of those users with disabilities

Accessibility

Thomas Wendt Surrounding Signifiers @thomas_wendt

SLIDE 76

Is the path to task completion obvious and free of distraction? Is the target demographic’s grade and reading level being considered? Would a user find it easy to describe?

Clarity

Thomas Wendt Surrounding Signifiers @thomas_wendt

SLIDE 77

How is messaging used throughout? Is messaging effective for the tasks and contexts being supported? Does the navigation and messaging help establish a sense of place that is consistent and orienting across channels, contexts and tasks?

Communicative

Thomas Wendt Surrounding Signifiers @thomas_wendt

SLIDE 78

Is it usable? Are users able to complete the tasks that they set out to without massive frustration or abandon? Does it serve new users as well as loyal users in ways that satisfy their needs uniquely?

Useful

Thomas Wendt Surrounding Signifiers @thomas_wendt

SLIDE 79

Is the design appropriate to the context of use and audience? Do you use restraint with promotional content? Is it easy to verify your credentials?

Credibility

Thomas Wendt Surrounding Signifiers @thomas_wendt

SLIDE 80

Are tasks and information a user would reasonably want to accomplish available? Are features offered to allow the user to tailor information or functionality to their context?

Control

Thomas Wendt Surrounding Signifiers @thomas_wendt

SLIDE 81

Is it desirable to the target user? Can a user easily describe the value? How is success being measured? Does it improve customer satisfaction?

Value

Thomas Wendt Surrounding Signifiers @thomas_wendt

SLIDE 82

Is it memorable? Is it easy to recount? Does it behave consistently enough to be predictable?

Learnability

Thomas Wendt Surrounding Signifiers @thomas_wendt

SLIDE 83

How are user expectations not just met but exceeded? What are you providing that is unexpected? What can you take that is now ordinary and make extraordinary?

Delight

Thomas Wendt Surrounding Signifiers @thomas_wendt

SLIDE 84

Deliverables

Thomas Wendt Surrounding Signifiers @thomas_wendt

SLIDE 85

Site Maps

Thomas Wendt Surrounding Signifiers @thomas_wendt

SLIDE 86

Content Inventories

Thomas Wendt Surrounding Signifiers @thomas_wendt

SLIDE 87

User Flows

Thomas Wendt Surrounding Signifiers @thomas_wendt

SLIDE 88

Visual Thinking

Thomas Wendt Surrounding Signifiers @thomas_wendt

SLIDE 89

Why sketch?

Thomas Wendt Surrounding Signifiers @thomas_wendt

SLIDE 90

It’s quick, cheap, and disposable Like many things in UX design, it’s more about the activity than the artifact Thinking requires the mind and body

Sketching

Thomas Wendt Surrounding Signifiers @thomas_wendt

SLIDE 91

Sketching is not about beauty The fidelity of your sketches should match the fidelity of your thinking

Sketching

Thomas Wendt Surrounding Signifiers @thomas_wendt

SLIDE 92

05 min 10 min

Activity

Thomas Wendt Surrounding Signifiers @thomas_wendt

List the steps Sketch

Sketch a storyboard for how you get to work

SLIDE 93

Break

Thomas Wendt Surrounding Signifiers @thomas_wendt

SLIDE 94

Wireframing and Prototpying

Thomas Wendt Surrounding Signifiers @thomas_wendt

SLIDE 95

What is a wireframe?

Thomas Wendt Surrounding Signifiers @thomas_wendt

SLIDE 96

Schematic diagrams designed for communication They represent the types of content and how they function Communicate functionality to developers and high level layout to visual designers

What is a Wireframe?

Thomas Wendt Surrounding Signifiers @thomas_wendt

SLIDE 97

The communicate things like

structure
navigation
information hierarchy
interactions

What is a Wireframe?

Thomas Wendt Surrounding Signifiers @thomas_wendt

SLIDE 98

SLIDE 99

Everyone has their own style But there are some standard conventions (which you’ll see on the following slides) The key is to understand the audience

How to Create Them

Thomas Wendt Surrounding Signifiers @thomas_wendt

SLIDE 100

Types of Wireframes

Thomas Wendt Surrounding Signifiers @thomas_wendt

SLIDE 101

Block Diagrams

Thomas Wendt Surrounding Signifiers @thomas_wendt

t y rd

ct % e nt

SLIDE 102

Hand Sketches

Thomas Wendt Surrounding Signifiers @thomas_wendt

SLIDE 103

Detailed and Annotated

Thomas Wendt Surrounding Signifiers @thomas_wendt

SLIDE 104

Responsive

Thomas Wendt Surrounding Signifiers @thomas_wendt

SLIDE 105

Be clear about your objective before you start Functional over pretty Try to avoid color or images Justify every element’s existence

Some Tips

Thomas Wendt Surrounding Signifiers @thomas_wendt

SLIDE 106

https://www.youtube.com/watch? v=RjIDHTyY1zM

Video

Thomas Wendt Surrounding Signifiers @thomas_wendt

SLIDE 107

Prototyping

Thomas Wendt Surrounding Signifiers @thomas_wendt

SLIDE 108

What is a prototype and why create one?

Thomas Wendt Surrounding Signifiers @thomas_wendt

SLIDE 109

Early versions designed for learning.

Prototypes

Thomas Wendt Surrounding Signifiers @thomas_wendt

SLIDE 110

Paper Prototypes

Thomas Wendt Surrounding Signifiers @thomas_wendt

SLIDE 111

Keynote

Thomas Wendt Surrounding Signifiers @thomas_wendt

SLIDE 112

Balsamiq

Thomas Wendt Surrounding Signifiers @thomas_wendt

SLIDE 113

https://www.youtube.com/watch? v=szr0ezLyQHY

Video

Thomas Wendt Surrounding Signifiers @thomas_wendt

SLIDE 114

Q+A

Thomas Wendt Surrounding Signifiers @thomas_wendt

SLIDE 115

Thomas Wendt srsg.co thomas@srsg.co @thomas_wendt

Thanks!

Thomas Wendt Surrounding Signifiers @thomas_wendt

Just Enough Research - Erika Hall Interviewing Users - Steve Portigal Design of Everyday Things - Don Norman 101 Design Methods - Vijay Kumar Change by Design - Tim Brown Most titles from Rosenfeld Media UX Magazine UX Booth