Intro to UX for Developers
Brenda Jin
@cyberneticlove
Intro to UX for DevelopersBrenda Jin
User eXperience: how a person feels about, perceives, and
accomplishes an interaction with a computer
@cyberneticlove
Intro to UX for DevelopersBrenda Jin
Overview
1) Background Tools2) Try It - Prototyping3) Try It - Testing4) Additional
Resources
@cyberneticlove
Background Tools
Intro to UX for DevelopersBrenda Jin
UX is a design and communication tool.
@cyberneticlove
Intro to UX for DevelopersBrenda Jin
Humans are wildly diverse.
@cyberneticlove
Intro to UX for DevelopersBrenda Jin
As hackers and builders, we want to disrupt –
@cyberneticlove
Intro to UX for DevelopersBrenda Jin
while providing an intuitive experience.
@cyberneticlove
Intro to UX for DevelopersBrenda Jin
Tool #1: Identifying Needs
@cyberneticlove
Intro to UX for DevelopersBrenda Jin
Finding Needs
• Interview and observe• Pay attention to pain points, places
where extra explanation is needed
@cyberneticlove
Intro to UX for DevelopersBrenda Jin
Tool #2:Set Goals
@cyberneticlove
Intro to UX for DevelopersBrenda Jin
Focus on the goal so that you can
• See the forest and the trees• Measure twice, cut once
@cyberneticlove
Intro to UX for DevelopersBrenda Jin
Now that we know the problem…
why not build the solution already?
@cyberneticlove
Intro to UX for DevelopersBrenda Jin
Tool#3:Prototyping
@cyberneticlove
Intro to UX for DevelopersBrenda Jin
Prototype: A first or preliminary model of something
@cyberneticlove
Intro to UX for DevelopersBrenda Jin @cyberneticlove
Intro to UX for DevelopersBrenda Jin
“The best way to have a good idea is to have lots of ideas” - Linus Pauling
@cyberneticlove
Intro to UX for DevelopersBrenda Jin
• The first solution is not necessarily the best
• Debug early, when it matters a lot• Communicate using data and stories
@cyberneticlove
Intro to UX for DevelopersBrenda Jin
Myth:Prototypes are pretty
@cyberneticlove
Intro to UX for DevelopersBrenda Jin
Truth:Prototypes don’t have to be.
@cyberneticlove
Image courtesy of The Verge
Intro to UX for DevelopersBrenda Jin
Myth: Prototypes have lots of features
@cyberneticlove
Intro to UX for DevelopersBrenda Jin
Truth: Prototypes can be quite minimal.
@cyberneticlove
Intro to UX for DevelopersBrenda Jin
Myth:Prototyping is expensive
in time and money
@cyberneticlove
Intro to UX for DevelopersBrenda Jin
Truth: Prototyping saves c4$h
@cyberneticlove
Intro to UX for DevelopersBrenda Jin
Prototypes get almost none of the glory,
but do a lot of the work.
@cyberneticlove
Intro to UX for DevelopersBrenda Jin @cyberneticlove
Paper
Intro to UX for DevelopersBrenda Jin @cyberneticlove
Wizard of Oz
Try It: Prototyping
Intro to UX for Developers
Your turn!
You’re building a new mobile email client. What does the composition
window look like?
Intro to UX for DevelopersBrenda Jin
Your turn again!
Sketch a second prototype that is different from the first.
@cyberneticlove
Intro to UX for DevelopersBrenda Jin
Prototypes are questions, and questions are
the currency of collaboration.
@cyberneticlove
Intro to UX for DevelopersBrenda Jin
The goal of rapid prototyping is rapid feedback.
@cyberneticlove
Intro to UX for DevelopersBrenda Jin
To get feedback, you need to test.
@cyberneticlove
Intro to UX for DevelopersBrenda Jin
Direct Observation• Ask tester to talk through thoughts• Focus on the goal of problem-solving
rather than on your method or interface
• Use data to evolve your product and tell your story
@cyberneticlove
Intro to UX for DevelopersBrenda Jin
“When you prototype something and simulate, you get much better decisions for the next step.”
-Hartmut Esslinger
@cyberneticlove
Try It: Testing
Intro to UX for DevelopersBrenda Jin
Pair up!
Option1: Ask your partner to complete a task with your prototype. Observe.
Option2: Share your prototypes with each other and create a single new prototype that incorporates the best ideas from both.
@cyberneticlove
Intro to UX for DevelopersBrenda Jin
What did you learn?
@cyberneticlove
Additional Resources
Intro to UX for Developers
Additional ResourcesStanford Online Human-Computer Interactionat Coursera.org
Software: Balsamiq, Axure, Indigo Studio, web frameworks
Always cheap and compatible: Paper!
Brenda Jin@cyberneticlove