pathways to a positive learner experience
TRANSCRIPT
Pathways to a Positive Learner Experience
Danielle Cooley @dgcooley 30 October 2015
1
We’ll talk about:
2
Defining the damn thing
The power of iteration
A design iteration technique
An evaluation iteration technique
ATD Learn STL 2015 Pathways to a Positive Learner Experience @dgcooley
So – Learner Experience?
3
User Experience (UX)
Instructional Design
(ID)
Learner Experience
(LXD)
Modified from hOp://extensionengine.com/lxd-‐‑10-‐‑things-‐‑to-‐‑know-‐‑about-‐‑learner-‐‑experience-‐‑design
ATD Learn STL 2015 Pathways to a Positive Learner Experience @dgcooley
4
What is UX?
ATD Learn STL 2015 Pathways to a Positive Learner Experience @dgcooley
5 Google Image Search – 11 July 2015
ATD Learn STL 2015 Pathways to a Positive Learner Experience @dgcooley
ATD Learn STL 2015 Pathways to a Positive Learner Experience @dgcooley
6
7
ISO 9241
The effectiveness, efficiency, and satisfaction with which specified users
achieve specified goals in particular environments.
ATD Learn STL 2015 Pathways to a Positive Learner Experience @dgcooley
8
Visual Design
Interaction Design
Information Architecture
Content Strategy
User Research
ATD Learn STL 2015 Pathways to a Positive Learner Experience @dgcooley
9
Visual Design
Interaction Design
Information Architecture
Content Strategy
User Research
ATD Learn STL 2015 Pathways to a Positive Learner Experience @dgcooley
ATD Learn STL 2015 Pathways to a Positive Learner Experience @dgcooley
10
Visual Design
Interaction Design
Information Architecture
Content Strategy
User Research
• Who will use the product? • Any disabilities? • What incomes, ages, and education levels? • What are their pain points? End goals?
11
Visual Design
Interaction Design
Information Architecture
Content Strategy
User Research
ATD Learn STL 2015 Pathways to a Positive Learner Experience @dgcooley
• What features and functions are necessary? • What pages do we need? • Any photos? Videos? Copy? Product reviews? • Who will create this content? Govern it?
12
Visual Design
Interaction Design
Information Architecture
Content Strategy
User Research
ATD Learn STL 2015 Pathways to a Positive Learner Experience @dgcooley
• What is the best navigation structure? • How should individual screens be laid out?
13
Visual Design
Interaction Design
Information Architecture
Content Strategy
User Research
ATD Learn STL 2015 Pathways to a Positive Learner Experience @dgcooley
• Which controls should be used for navigation? Selections? Actions? • Dropdowns vs. checkboxes? • What about microinteractions?
14
Visual Design
Interaction Design
Information Architecture
Content Strategy
User Research
ATD Learn STL 2015 Pathways to a Positive Learner Experience @dgcooley
• What color scheme is most appropriate? • What about typography? • Will there be any iconography? What style?
Visual Design
Interaction Design
Information Architecture
Content Strategy
User Research 15
ATD Learn STL 2015 Pathways to a Positive Learner Experience @dgcooley
ATD Learn STL 2015 Pathways to a Positive Learner Experience @dgcooley
16
Iteration
17
ATD Learn STL 2015 Pathways to a Positive Learner Experience @dgcooley
18
ATD Learn STL 2015 Pathways to a Positive Learner Experience @dgcooley
19
ATD Learn STL 2015 Pathways to a Positive Learner Experience @dgcooley
Design Studio: Peregrine Edition
Peregrine falcon image via flickr user mikebaird 20
ATD Learn STL 2015 Pathways to a Positive Learner Experience @dgcooley
Iterative = good.
Fast = good.
Iterative AND fast?
21
ATD Learn STL 2015 Pathways to a Positive Learner Experience @dgcooley
Design Studio • 6-8 drawings • 5 minutes to draw • 2 minutes to present • 3 minutes to critique
• Then team up. As pairs, do it again. (Add an extra minute or so to presentation & critique for each iteration.)
• Lather, rinse, repeat, until you can’t pair up anymore.
22
ATD Learn STL 2015 Pathways to a Positive Learner Experience @dgcooley
Design Studio • 6-8 4-6 drawings • 5 4 minutes to draw • 2 1 minutes to present • 3 2 minutes to critique
• Then team up. As pairs, do it again. (Add an extra minute 30 seconds or so to presentation & critique for each iteration.)
• Lather, rinse, repeat, until you can’t pair up anymore.
23
Peregrine Edition
NOTE! We’ve shortened the process only because our time today is so short. In real life, do the full version.
ATD Learn STL 2015 Pathways to a Positive Learner Experience @dgcooley
The Rules
Sketching • Always start with the persona &
requirements.
• Strive for quantity. • Use only enough detail to convey
the idea.
• Defer judgment.
• Use your imagination.
• Seek new combinations.
• Have FUN!
Critiquing • Focus on how the design does or
does not fit the scenario or persona. (Your own likes/dislikes don’t matter.)
• Ask clarifying questions as needed.
• Presenters, try to clarify without being defensive.
• Save suggestions for your next sketching cycle.
24
ATD Learn STL 2015 Pathways to a Positive Learner Experience @dgcooley
Warmup
25
Straight Line Circle Triangle Square
Arrow Cloud Rectangle Face
ATD Learn STL 2015 Pathways to a Positive Learner Experience @dgcooley
Mom’s Recipes
26
Mom is in her 60s and is a great baker – and she has dozens of recipes that she has perfected over the years that wants to pass on to her grandsons. A recent flood in the basement almost destroyed her cherished recipe book. After carefully drying out each page, she can still read them but no one else could decipher it. She needs to rewrite them all down. Can you help my Mom?
Mom’s Pain Points: - She doesn’t like typing - Intimidated by “technology stuff” - Too many instructions for things
Mom Likes: - Keeping things easy - Following recipes exactly - Having things printed if she can - Telling stories about baking
ATD Learn STL 2015 Pathways to a Positive Learner Experience @dgcooley
27
GO! Sack race starting line image via flickr user jiggot
ATD Learn STL 2015 Pathways to a Positive Learner Experience @dgcooley
Review
28
IMPORTANT: Were this ‘real’ we would need to leave today with specific marching orders on what we need to build.
ü Identify and discuss common themes, patterns, components that emerged.
ü Prioritize features ü Discuss / document
open questions and assumptions.
ü Note and collect these along with sketches generated.
ATD Learn STL 2015 Pathways to a Positive Learner Experience @dgcooley
So we have a design… ATD Learn STL 2015 Pathways to a Positive Learner Experience @dgcooley
29
Evaluate it! ATD Learn STL 2015 Pathways to a Positive Learner Experience @dgcooley
30
(There are lots of ways to do this!)
About the 3x3 Method • ~ 2-‐‑3 low-‐‑fidelity prototypes (clickable wireframes,
typically), each expressing a unique approach to the solution, are created.
• Each prototype is ~ 3 screens deep and reflects the same key tasks.
• The prototypes are then iteratively usability tested and refined.
• The result is a single high-‐‑level conceptual model of the solution’s UI.
• Directly observing end users in this ma=er helps ensure the final product will be accepted and adopted.
ATD Learn STL 2015 Pathways to a Positive Learner Experience @dgcooley
31
ATD Learn STL 2015 Pathways to a Positive Learner Experience @dgcooley
32
Pre-‐‑testing
Day 1 Day 2 Day 3 Day 4 Day 5 Post-‐‑testing
Develop-‐‑ment of 2-‐‑3 prototypes
Participant recruiting Logistics planning
Three represen-‐‑tative end users evaluate the prototypes
Prototypes are refined and usually narrowed to fewer versions
Three represen-‐‑tative end users evaluate the prototypes
Prototypes are refined and usually narrowed to fewer versions
Three represen-‐‑tative end users evaluate the prototypes
Prototype is refined a final time to add polish & annotation
ATD Learn STL 2015 Pathways to a Positive Learner Experience @dgcooley
33
Pre-‐‑testing
Day 1 Day 2 Day 3 Day 4 Day 5 Post-‐‑testing
Develop-‐‑ment of 2-‐‑3 prototypes
Participant recruiting Logistics planning
Three represen-‐‑tative end users evaluate the prototypes
Prototypes are refined and usually narrowed to fewer versions
Three represen-‐‑tative end users evaluate the prototypes
Prototypes are refined and usually narrowed to fewer versions
Three represen-‐‑tative end users evaluate the prototypes
Prototype is refined a final time to add polish & annotation
Be quiet! ATD Learn STL 2015 Pathways to a Positive Learner Experience @dgcooley
34
ATD Learn STL 2015 Pathways to a Positive Learner Experience @dgcooley
35
Check your biases.
36
Practice.
Practice.
Practice.
ATD Learn STL 2015 Pathways to a Positive Learner Experience @dgcooley
37
ATD Learn STL 2015 Pathways to a Positive Learner Experience @dgcooley
38
About Me ATD Learn STL 2015 Pathways to a Positive Learner Experience @dgcooley
39
@dgcooley
15 years as a UX Specialist BE, Biomedical & Electrical Engineering Vanderbilt University MS, Human Factors in Information Design Bentley University
hOp://linkedin.com/in/dgcooley
Selected Work
40
ATD Learn STL 2015 Pathways to a Positive Learner Experience @dgcooley