Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
SlideShare a Scribd company logo
TEACHING UX DESIGN

Internalizing UX
@cwodtke | cwodtke.com
@cwodtke |

cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
Introductions can take up too much time
You still need to know who people are
Share:
• Name (name cards ROCK!)
• One sentence (Or five words) What you want from today)

INTRODUCTIONS
@cwodtke |

cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
1.

List things you want 2. Affinity sort
to cover
Teams
POST ITS (One item 10 minutes sorting
per)
10 minutes free listing Name groupings

Soft skills?
Software?

EXERCISE: DEFINING WHAT
WE’LL TEACH
@cwodtke |

cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
What time does day start/stop?
When is lunch?
When are breaks?
Fill in time slots (30 min increments)
Leave an hour at the start and finish unscheduled.
Fill in agenda with topics
Find a project that can be done across the topics
25 min

EXERCISE:
PLANNING A ONE DAY
“FUNDAMENTALS” CLASS
@cwodtke |

cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
9-10 HOLD
10-10:30
10:30- 11
11-11:30
11:30-12
12-1 LUNCH
1-1:30
1:30-2
2-2:30
2:30-3 BREAK
3-3:30
4-5 HOLD

TEMPLATE
@cwodtke |

cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
Is UX too big?
How did you know what to cut? What to include?

DISCUSS

@cwodtke |

cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
9-10 Hellos, Late ppl, Intro to UX
10-11 Make it Be Good Exercise
11-11:30 Introduce day’s project (Grocery store app), User research
11:30-12 Practice User Research
12-1 LUNCH & Research
1-1:30 Card sort findings, Share
1:30-2:15 IxD (with personas)
2:15-3 IA (with Candy!)
3-3:15 Break
3:15 -4 UI (sketching)
4-5 Presentations, discussion, wrap-up
Presentations take longer than you think

EXAMPLE
@cwodtke |

cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
Start by writing a 20 minute talk
Then expand with exercises, discussion, examples

FRACTAL DESIGN

@cwodtke |

cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
More repetition
Explaining things multiple ways
Redoing same exercise in different context
Practice key skills

TEACH LESS BETTER

@cwodtke |

cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
HOW CAN STUDENTS
INTERNALIZE LEARNING?
@cwodtke |

cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
WHAT ARE MY TEACHING
TOOLS?
@cwodtke |

cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
@cwodtke |

cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
@cwodtke |

cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
34:28-37:25 http://www.criticalcommons.org/Members/fearv/clips/indiegame-the-movie-edmund-mcmillen-discusses
@cwodtke |

cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
Scaffold Learning
•
•
•
•

@cwodtke |

Introduce
Safe practice (exercise)
Applied practice (project)
Practice in new context (new project)

cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
Pick a topic from your day
How will you introduce it– without a lecture!
Design your first exercise
15 minutes

EXERCISE

@cwodtke |

cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
All learning happens here

WALK AROUND

@cwodtke |

cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
Discussion
Diary
Papers
Presentations
Drawings??

REFLECTION

@cwodtke |

cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
DRAW
YOUR
WEEK

@cwodtke |

cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
@cwodtke |

cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
@cwodtke |

cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
@cwodtke |

cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
How will students internalize?
Diary?
Discussion?
Drawing?

EXERCISE: REFLECTION

@cwodtke |

cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
What supporting information is needed to complete exercise?
Decide how you’ll deliver it.
Lecture?
Reading?
Video?
A Play?

EXERCISE: HOW WILL YOU
INTRODUCE THE KNOWLEDGE?
@cwodtke |

cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
Three examples
• Pragmatic
• Compassionate
• Cool

STORYTELLING

@cwodtke |

cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
POV

WHAT I TEACH

@cwodtke |

cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
What was a good learning experience? Why?
What was a bad one? Why?

ESTABLISHING
RULES
@cwodtke |

cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
I tried to teach
Jesse James
Garret's Planes
I had to Simplify
Interaction
Design

User
Research

Information
Architecture
@cwodtke |

cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike

Interface
Design
Make it Be Good Exercise
1. Students are asked to come with a
great user experience and a bad user
experience.
2. Students share why great are great.
As students share, instructor pulls out
heuristics (error prevention, error
recovery, set expectations meet
expectations)
3. Students then share bad user
experiences.
4. Student redesign bad into good

What it Accomplishes
Discuss what is good?
Teaches some heuristics in context
Creates a sense of competency
Creates confidence
Enables passion

OPENING THE CLASS

@cwodtke |

cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
Start talking to users as soon as you can
Scaffolding again:
•
safe (with students)
•
daring (with ppl in building)
•
really scary (strangers)
http://www.slideshare.net/cwodtke/user-research-101

UER

@cwodtke |

cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
Classification
Natural organization fails
Task based
Synonyms
Thesauri (relational-upsell)
Tags
http://www.slideshare.net/cwodtke/information-architecture-fundamentals

IA

@cwodtke |

cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
Body storming
Goal directed design
Persona/scenarios/task analysis/use cases
http://www.slideshare.net/cwodtke/interaction-design-and-goal-driven-designusing-personas

IXD

@cwodtke |

cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
Understanding
• Layout
• Objects
• Type
• Color
• Line
• Hierarchy
• Relationships

Use
• Affordances
• HUD
• Feedback
• Modes
• Input
• Navigation

INTERFACE
http://www.slideshare.net/cwodtke/designingthe-interface-for-use

@cwodtke |

cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
UX Glue
• Conceptual Models
• Top tens
• Competitive analysis
http://www.slideshare.net/cwodtke/conceptual-models-mental-models

Discuss: what’s useful,
but isn’t usually covered?
@cwodtke |

cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
Critiques can get out of control
Treat a critique like a secret santa; Everyone draws names they give feedback to
Everyone gives 3 keeps and 3 changes to the person.

CRITIQUE
@cwodtke |

cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
Scary & Hard Parts

@cwodtke |

cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
Seek first to understand, then to be understood

TEACHING WHAT YOU
DON’T KNOW
@cwodtke |

cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
Discuss: Can you teach someone else’s slides?

MAKING THE CURRICULUM
YOURS
@cwodtke |

cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
Discuss

CONFLICT ON TEAMS

@cwodtke |

cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
Discussion: Should we throw people out?

HOPELESS STUDENTS

@cwodtke |

cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
HIDDEN BIASES
STEREOTYPE THREAT
@cwodtke |

cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
Practicalities

@cwodtke |

cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
SPACE

@cwodtke |

cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
EQUIPMENT

@cwodtke |

cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
Postits?
Pens? Sharpies bleed through: avoid!
Whiteboards?
Gator boards?

MATERIALS

@cwodtke |

cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
You
Showtime!

@cwodtke |

cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
Energy: WW pose
The gift pose
Self care
Prep
Clothing-as-story

YOU ARE THE UI
@cwodtke |

cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
Do 3 keeps and changes each time after you teach
Update slides the next day with your changes

KEEP GROWING

@cwodtke |

cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
Make your sense of fun infectious!
Laugh at yourself!
Love your students!

TREAT TEACHING LIKE A DAY
IN PARADISE
@cwodtke |

cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
@cwodtke | www.eleganthack.com | www.slideshare.net/cwodtke

QUESTIONS?

@cwodtke |

cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike

More Related Content

How to Teach UX Design

  • 1. TEACHING UX DESIGN Internalizing UX @cwodtke | cwodtke.com @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  • 2. Introductions can take up too much time You still need to know who people are Share: • Name (name cards ROCK!) • One sentence (Or five words) What you want from today) INTRODUCTIONS @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  • 3. 1. List things you want 2. Affinity sort to cover Teams POST ITS (One item 10 minutes sorting per) 10 minutes free listing Name groupings Soft skills? Software? EXERCISE: DEFINING WHAT WE’LL TEACH @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  • 4. What time does day start/stop? When is lunch? When are breaks? Fill in time slots (30 min increments) Leave an hour at the start and finish unscheduled. Fill in agenda with topics Find a project that can be done across the topics 25 min EXERCISE: PLANNING A ONE DAY “FUNDAMENTALS” CLASS @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  • 5. 9-10 HOLD 10-10:30 10:30- 11 11-11:30 11:30-12 12-1 LUNCH 1-1:30 1:30-2 2-2:30 2:30-3 BREAK 3-3:30 4-5 HOLD TEMPLATE @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  • 6. Is UX too big? How did you know what to cut? What to include? DISCUSS @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  • 7. 9-10 Hellos, Late ppl, Intro to UX 10-11 Make it Be Good Exercise 11-11:30 Introduce day’s project (Grocery store app), User research 11:30-12 Practice User Research 12-1 LUNCH & Research 1-1:30 Card sort findings, Share 1:30-2:15 IxD (with personas) 2:15-3 IA (with Candy!) 3-3:15 Break 3:15 -4 UI (sketching) 4-5 Presentations, discussion, wrap-up Presentations take longer than you think EXAMPLE @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  • 8. Start by writing a 20 minute talk Then expand with exercises, discussion, examples FRACTAL DESIGN @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  • 9. More repetition Explaining things multiple ways Redoing same exercise in different context Practice key skills TEACH LESS BETTER @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  • 10. HOW CAN STUDENTS INTERNALIZE LEARNING? @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  • 11. WHAT ARE MY TEACHING TOOLS? @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  • 12. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  • 13. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  • 15. Scaffold Learning • • • • @cwodtke | Introduce Safe practice (exercise) Applied practice (project) Practice in new context (new project) cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  • 16. Pick a topic from your day How will you introduce it– without a lecture! Design your first exercise 15 minutes EXERCISE @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  • 17. All learning happens here WALK AROUND @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  • 18. Discussion Diary Papers Presentations Drawings?? REFLECTION @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  • 19. DRAW YOUR WEEK @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  • 20. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  • 21. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  • 22. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  • 23. How will students internalize? Diary? Discussion? Drawing? EXERCISE: REFLECTION @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  • 24. What supporting information is needed to complete exercise? Decide how you’ll deliver it. Lecture? Reading? Video? A Play? EXERCISE: HOW WILL YOU INTRODUCE THE KNOWLEDGE? @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  • 25. Three examples • Pragmatic • Compassionate • Cool STORYTELLING @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  • 26. POV WHAT I TEACH @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  • 27. What was a good learning experience? Why? What was a bad one? Why? ESTABLISHING RULES @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  • 28. I tried to teach Jesse James Garret's Planes I had to Simplify Interaction Design User Research Information Architecture @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike Interface Design
  • 29. Make it Be Good Exercise 1. Students are asked to come with a great user experience and a bad user experience. 2. Students share why great are great. As students share, instructor pulls out heuristics (error prevention, error recovery, set expectations meet expectations) 3. Students then share bad user experiences. 4. Student redesign bad into good What it Accomplishes Discuss what is good? Teaches some heuristics in context Creates a sense of competency Creates confidence Enables passion OPENING THE CLASS @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  • 30. Start talking to users as soon as you can Scaffolding again: • safe (with students) • daring (with ppl in building) • really scary (strangers) http://www.slideshare.net/cwodtke/user-research-101 UER @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  • 31. Classification Natural organization fails Task based Synonyms Thesauri (relational-upsell) Tags http://www.slideshare.net/cwodtke/information-architecture-fundamentals IA @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  • 32. Body storming Goal directed design Persona/scenarios/task analysis/use cases http://www.slideshare.net/cwodtke/interaction-design-and-goal-driven-designusing-personas IXD @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  • 33. Understanding • Layout • Objects • Type • Color • Line • Hierarchy • Relationships Use • Affordances • HUD • Feedback • Modes • Input • Navigation INTERFACE http://www.slideshare.net/cwodtke/designingthe-interface-for-use @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  • 34. UX Glue • Conceptual Models • Top tens • Competitive analysis http://www.slideshare.net/cwodtke/conceptual-models-mental-models Discuss: what’s useful, but isn’t usually covered? @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  • 35. Critiques can get out of control Treat a critique like a secret santa; Everyone draws names they give feedback to Everyone gives 3 keeps and 3 changes to the person. CRITIQUE @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  • 36. Scary & Hard Parts @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  • 37. Seek first to understand, then to be understood TEACHING WHAT YOU DON’T KNOW @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  • 38. Discuss: Can you teach someone else’s slides? MAKING THE CURRICULUM YOURS @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  • 39. Discuss CONFLICT ON TEAMS @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  • 40. Discussion: Should we throw people out? HOPELESS STUDENTS @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  • 41. HIDDEN BIASES STEREOTYPE THREAT @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  • 42. Practicalities @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  • 43. SPACE @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  • 44. EQUIPMENT @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  • 45. Postits? Pens? Sharpies bleed through: avoid! Whiteboards? Gator boards? MATERIALS @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  • 46. You Showtime! @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  • 47. Energy: WW pose The gift pose Self care Prep Clothing-as-story YOU ARE THE UI @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  • 48. Do 3 keeps and changes each time after you teach Update slides the next day with your changes KEEP GROWING @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  • 49. Make your sense of fun infectious! Laugh at yourself! Love your students! TREAT TEACHING LIKE A DAY IN PARADISE @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  • 50. @cwodtke | www.eleganthack.com | www.slideshare.net/cwodtke QUESTIONS? @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike

Editor's Notes

  1. Model introductions here
  2. See what I just did here
  3. Example project: design an website for a grocery store
  4. Learning tools
  5. Different class compostions
  6. http://www.slideshare.net/cwodtke/introduction-to-user-expereince
  7. This an exercise I call “Make it Be Good”1. Students are asked to come with a great user experience and a bad user experience. 2. Students share why great are great. As students share, instructor pulls out heuristics (error prevention, error recovery, set expectations meet expectations)3. Students then share bad user experiences. 4. Student redesign bad into good
  8. See http://en.wikipedia.org/wiki/Stereotype_threat