Want to create a relevant product and viable business model? Or just kill it at the next hackathon or paired programming night?
Join this hands-on session to learn about tools that will help you innovate and communicate better with internal and external stakeholders.
Geared especially towards developers, this talk focuses on how you can maximize a user-based approach in product development cycles to debug early with high return on investment using simple and low-cost techniques.
2. Intro to UX for Developers
Brenda Jin
User eXperience: how a person feels
about, perceives, and accomplishes
an interaction with a computer
@cyberneticlove
3. Intro to UX for Developers
Brenda Jin
Overview
1) Background Tools
2) Try It - Prototyping
3) Try It - Testing
4) Additional Resources
@cyberneticlove
5. Intro to UX for Developers
Brenda Jin
UX is a design and
communication tool.
@cyberneticlove
6. Intro to UX for Developers
Brenda Jin
Humans are wildly diverse.
@cyberneticlove
7.
8.
9. Intro to UX for Developers
Brenda Jin
As hackers and builders,
we want to disrupt –
@cyberneticlove
10. Intro to UX for Developers
Brenda Jin
while providing an intuitive experience.
@cyberneticlove
11. Intro to UX for Developers
Brenda Jin
Tool #1:
Identifying Needs
@cyberneticlove
12. Intro to UX for Developers
Brenda Jin
Finding Needs
• Interview and observe
• Pay attention to pain points, places where
extra explanation is needed
@cyberneticlove
13.
14. Intro to UX for Developers
Brenda Jin
Tool #2:
Set Goals
@cyberneticlove
15. Intro to UX for Developers
Brenda Jin
Focus on the goal so that you can
• See the forest and the trees
• Measure twice, cut once
@cyberneticlove
16. Intro to UX for Developers
Brenda Jin
Now that we know the problem…
why not build the solution already?
@cyberneticlove
17. Intro to UX for Developers
Brenda Jin
Tool#3:
Prototyping
@cyberneticlove
18. Intro to UX for Developers
Brenda Jin
Prototype: A first or preliminary
model of something
@cyberneticlove
19. Intro to UX for Developers
Brenda Jin @cyberneticlove
20. Intro to UX for Developers
Brenda Jin
“The best way to have a good
idea is to have lots of ideas”
- Linus Pauling
@cyberneticlove
21. Intro to UX for Developers
Brenda Jin
• The first solution is not necessarily the best
• Debug early, when it matters a lot
• Communicate using data and stories
@cyberneticlove
22. Intro to UX for Developers
Brenda Jin
Myth:
Prototypes are pretty
@cyberneticlove
23. Intro to UX for Developers
Brenda Jin
Truth:
Prototypes don’t have to be.
@cyberneticlove
Image courtesy of The Verge
24. Intro to UX for Developers
Brenda Jin
Myth: Prototypes have lots of features
@cyberneticlove
25. Intro to UX for Developers
Brenda Jin
Truth: Prototypes can be quite minimal.
@cyberneticlove
26. Intro to UX for Developers
Brenda Jin
Myth:
Prototyping is expensive
in time and money
@cyberneticlove
27. Intro to UX for Developers
Brenda Jin @cyberneticlove
28. Intro to UX for Developers
Brenda Jin
Prototypes get almost
none of the glory,
but do a lot of the work.
@cyberneticlove
29. Intro to UX for Developers
Brenda Jin @cyberneticlove
Paper
30. Intro to UX for Developers
Brenda Jin @cyberneticlove
Wizard of Oz
32. Intro to UX for Developers
Your turn!
You’re building a new mobile email client.
What does the composition window look
like?
33. Intro to UX for Developers
Brenda Jin
Your turn again!
Sketch a second prototype that is different
from the first.
@cyberneticlove
34. Intro to UX for Developers
Brenda Jin
Prototypes are questions,
and questions are
the currency of collaboration.
@cyberneticlove
35. Intro to UX for Developers
Brenda Jin
The goal of
rapid prototyping
is rapid feedback.
@cyberneticlove
36. Intro to UX for Developers
Brenda Jin
To get feedback,
you need to test.
@cyberneticlove
37. Intro to UX for Developers
Brenda 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
38. Intro to UX for Developers
Brenda Jin
“When you prototype something and
simulate, you get much better decisions for
the next step.”
-HartmutEsslinger
@cyberneticlove
40. Intro to UX for Developers
Brenda 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
41. Intro to UX for Developers
Brenda Jin
What did you learn?
@cyberneticlove
43. Intro to UX for Developers
Additional Resources
Stanford Online Human-Computer Interaction
at Coursera.org
Software: Balsamiq, Axure, Indigo Studio, web frameworks
Always cheap and compatible: Paper!
Brenda Jin
@cyberneticlove
Hinweis der Redaktion
not an object or an artifactphysical materials up to youthinking tool - critically examine current problems and discover viable solutions that are culturally and contextually appropriateUse these tools at:Hack nights and hackathonsInternal MeetingsExternal Pitches
evolutionary strength - diverse needs and problems - diverse solutions. diverse throughout time - our habits and expectations change according to context.
today
1996from a single viewpoint - hard to predict the outcomesalumni event
We want to innovate, and we want to disrupt
In the meantime, we also want to create excellent and intuitive experiences and viable business models.How can we do this?We can accomplish this by thinking about our users from the beginning to the end.
Every good story has a conflict. And every hack has a story. articulate the problem you are trying to solve.
6th slide of 18-Slide Pitch Just Landed PaymentStartup Dwolla $16.5 Million Series C roundhttp://www.businessinsider.com/18-slide-pitch-deck-lands-payment-startup-dwolla-165-million-2013-4?op=1
Using your need finding researchset a goal against which to measure your solution
That question brings us to our next tool…
Especially effective as Early exploration tools
founders of quantum chemistry molecular biology.
As you narrow down your product, major changes become more and more expensiveHigh ROI
test specific aspects of your design, like look and feel, flow, or practicality. sometimes advantage to test using rougher sketcheshttp://www.theverge.com/2013/2/22/4013406/i-used-google-glass-its-the-future-with-monthly-updates
Revisable, Disposable1996, Palm introduced Palm Pilot - 1st successful Personal Digital Assistants (PDAs)Jeff Hawkins inventor: “Would I actually carry it with me and use it?” - Later: Can we build it this small? https://docs.google.com/file/d/0B0QztbuDlKs_NzBjYWNiOGQtNmQyNi00OWE2LWI2YzktN2Y3YTEzM2VjYTNj/edit?hl=en_US
Inexpensive compared to the execution of the final productsave you the expense of late revisions to your productThe Wii U GamePadIdeally, make big changes early.http://www.gameinformer.com/b/news/archive/2012/12/07/nintendo-shows-off-its-wii-u-prototype.aspxhttp://iwataasks.nintendo.com/interviews/#/wiiu/nintendo-land/0/0
think through a lot of problemsSo Users don’t have to
Easy to reviseCheapFlexibleIt’s clearly not an appGive an example of how I’ve used this at a pair programming night
Especially useful when the technology you envision is not yet available or costly to set up
Make sure you have pen and paper
Spend 1 minute using the sticky to sketch a prototype.
1 minute
Scott Klemmer, Stanford
Test your hypotheses. See how your prototype measures up against the goal.
Work out bugs before you start buildingA handful of people will get you the majority of bugs
Don’t over-instructPay attention to breakdowns and pain pointsAvoid questions like ‘Did you like it?’Ask questions like: ‘How challenging was it to complete task x?’
Frogdesign, Apple Computer in the 1980s http://www.frogdesign.com/
What problems did you face and solve?Unknown unknowns?