intro to ux for developers by brenda jin

43
Intro to UX for Developers Brenda Jin @cyberneticlove

Upload: codemotion

Post on 27-Jan-2015

125 views

Category:

Technology


3 download

DESCRIPTION

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.

TRANSCRIPT

Page 1: Intro to UX for Developers by Brenda Jin

Intro to UX for Developers

Brenda Jin

@cyberneticlove

Page 2: Intro to UX for Developers by Brenda Jin

Intro to UX for DevelopersBrenda Jin

User eXperience: how a person feels about, perceives, and

accomplishes an interaction with a computer

@cyberneticlove

Page 3: Intro to UX for Developers by Brenda Jin

Intro to UX for DevelopersBrenda Jin

Overview

1) Background Tools2) Try It - Prototyping3) Try It - Testing4) Additional

Resources

@cyberneticlove

Page 4: Intro to UX for Developers by Brenda Jin

Background Tools

Page 5: Intro to UX for Developers by Brenda Jin

Intro to UX for DevelopersBrenda Jin

UX is a design and communication tool.

@cyberneticlove

Page 6: Intro to UX for Developers by Brenda Jin

Intro to UX for DevelopersBrenda Jin

Humans are wildly diverse.

@cyberneticlove

Page 7: Intro to UX for Developers by Brenda Jin
Page 8: Intro to UX for Developers by Brenda Jin
Page 9: Intro to UX for Developers by Brenda Jin

Intro to UX for DevelopersBrenda Jin

As hackers and builders, we want to disrupt –

@cyberneticlove

Page 10: Intro to UX for Developers by Brenda Jin

Intro to UX for DevelopersBrenda Jin

while providing an intuitive experience.

@cyberneticlove

Page 11: Intro to UX for Developers by Brenda Jin

Intro to UX for DevelopersBrenda Jin

Tool #1: Identifying Needs

@cyberneticlove

Page 12: Intro to UX for Developers by Brenda Jin

Intro to UX for DevelopersBrenda Jin

Finding Needs

• Interview and observe• Pay attention to pain points, places

where extra explanation is needed

@cyberneticlove

Page 13: Intro to UX for Developers by Brenda Jin
Page 14: Intro to UX for Developers by Brenda Jin

Intro to UX for DevelopersBrenda Jin

Tool #2:Set Goals

@cyberneticlove

Page 15: Intro to UX for Developers by Brenda Jin

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

Page 16: Intro to UX for Developers by Brenda Jin

Intro to UX for DevelopersBrenda Jin

Now that we know the problem…

why not build the solution already?

@cyberneticlove

Page 17: Intro to UX for Developers by Brenda Jin

Intro to UX for DevelopersBrenda Jin

Tool#3:Prototyping

@cyberneticlove

Page 18: Intro to UX for Developers by Brenda Jin

Intro to UX for DevelopersBrenda Jin

Prototype: A first or preliminary model of something

@cyberneticlove

Page 19: Intro to UX for Developers by Brenda Jin

Intro to UX for DevelopersBrenda Jin @cyberneticlove

Page 20: Intro to UX for Developers by Brenda Jin

Intro to UX for DevelopersBrenda Jin

“The best way to have a good idea is to have lots of ideas” - Linus Pauling

@cyberneticlove

Page 21: Intro to UX for Developers by Brenda Jin

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

Page 22: Intro to UX for Developers by Brenda Jin

Intro to UX for DevelopersBrenda Jin

Myth:Prototypes are pretty

@cyberneticlove

Page 23: Intro to UX for Developers by Brenda Jin

Intro to UX for DevelopersBrenda Jin

Truth:Prototypes don’t have to be.

@cyberneticlove

Image courtesy of The Verge

Page 24: Intro to UX for Developers by Brenda Jin

Intro to UX for DevelopersBrenda Jin

Myth: Prototypes have lots of features

@cyberneticlove

Page 25: Intro to UX for Developers by Brenda Jin

Intro to UX for DevelopersBrenda Jin

Truth: Prototypes can be quite minimal.

@cyberneticlove

Page 26: Intro to UX for Developers by Brenda Jin

Intro to UX for DevelopersBrenda Jin

Myth:Prototyping is expensive

in time and money

@cyberneticlove

Page 27: Intro to UX for Developers by Brenda Jin

Intro to UX for DevelopersBrenda Jin

Truth: Prototyping saves c4$h

@cyberneticlove

Page 28: Intro to UX for Developers by Brenda Jin

Intro to UX for DevelopersBrenda Jin

Prototypes get almost none of the glory,

but do a lot of the work.

@cyberneticlove

Page 29: Intro to UX for Developers by Brenda Jin

Intro to UX for DevelopersBrenda Jin @cyberneticlove

Paper

Page 30: Intro to UX for Developers by Brenda Jin

Intro to UX for DevelopersBrenda Jin @cyberneticlove

Wizard of Oz

Page 31: Intro to UX for Developers by Brenda Jin

Try It: Prototyping

Page 32: Intro to UX for Developers by Brenda Jin

Intro to UX for Developers

Your turn!

You’re building a new mobile email client. What does the composition

window look like?

Page 33: Intro to UX for Developers by Brenda Jin

Intro to UX for DevelopersBrenda Jin

Your turn again!

Sketch a second prototype that is different from the first.

@cyberneticlove

Page 34: Intro to UX for Developers by Brenda Jin

Intro to UX for DevelopersBrenda Jin

Prototypes are questions, and questions are

the currency of collaboration.

@cyberneticlove

Page 35: Intro to UX for Developers by Brenda Jin

Intro to UX for DevelopersBrenda Jin

The goal of rapid prototyping is rapid feedback.

@cyberneticlove

Page 36: Intro to UX for Developers by Brenda Jin

Intro to UX for DevelopersBrenda Jin

To get feedback, you need to test.

@cyberneticlove

Page 37: Intro to UX for Developers by Brenda Jin

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

Page 38: Intro to UX for Developers by Brenda Jin

Intro to UX for DevelopersBrenda Jin

“When you prototype something and simulate, you get much better decisions for the next step.”

-Hartmut Esslinger

@cyberneticlove

Page 39: Intro to UX for Developers by Brenda Jin

Try It: Testing

Page 40: Intro to UX for Developers by Brenda Jin

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

Page 41: Intro to UX for Developers by Brenda Jin

Intro to UX for DevelopersBrenda Jin

What did you learn?

@cyberneticlove

Page 42: Intro to UX for Developers by Brenda Jin

Additional Resources

Page 43: Intro to UX for Developers by Brenda Jin

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