you can ux too: avoiding the programmer's user interface @ nephp 2013

39
You Can UX Too: Avoiding the Programmer's User Interface Eryn O'Neil Northeast PHP – Boston (Cambridge!), MA August 16, 2013

Upload: eryn-oneil

Post on 10-May-2015

2.052 views

Category:

Technology


0 download

TRANSCRIPT

Page 1: You Can UX Too: Avoiding the Programmer's User Interface @ NEPHP 2013

You Can UX Too:Avoiding the Programmer's

User Interface

Eryn O'NeilNortheast PHP – Boston (Cambridge!), MA

August 16, 2013

Page 2: You Can UX Too: Avoiding the Programmer's User Interface @ NEPHP 2013

Hi, I'm Eryn.

Page 3: You Can UX Too: Avoiding the Programmer's User Interface @ NEPHP 2013

I make websites.

Page 4: You Can UX Too: Avoiding the Programmer's User Interface @ NEPHP 2013

I'm not a UX professional.

Page 5: You Can UX Too: Avoiding the Programmer's User Interface @ NEPHP 2013

Why me?

Page 6: You Can UX Too: Avoiding the Programmer's User Interface @ NEPHP 2013

Because programmers need to care–deeply–about the interfaces they write.

Why me?

Page 7: You Can UX Too: Avoiding the Programmer's User Interface @ NEPHP 2013

Front End

vs.

Back End

Page 8: You Can UX Too: Avoiding the Programmer's User Interface @ NEPHP 2013
Page 9: You Can UX Too: Avoiding the Programmer's User Interface @ NEPHP 2013

Today, we'll talk about:

● Practical ways to make your UX experience better

● How to work with the UX professional in your life

● Why you should care!

Page 10: You Can UX Too: Avoiding the Programmer's User Interface @ NEPHP 2013

What is the “programmer's interface”

anyway?

Page 11: You Can UX Too: Avoiding the Programmer's User Interface @ NEPHP 2013
Page 12: You Can UX Too: Avoiding the Programmer's User Interface @ NEPHP 2013
Page 13: You Can UX Too: Avoiding the Programmer's User Interface @ NEPHP 2013
Page 14: You Can UX Too: Avoiding the Programmer's User Interface @ NEPHP 2013
Page 15: You Can UX Too: Avoiding the Programmer's User Interface @ NEPHP 2013

Why care?

Page 16: You Can UX Too: Avoiding the Programmer's User Interface @ NEPHP 2013

The best software happens when everyone on the team feels ownership of the user

interface.

Page 17: You Can UX Too: Avoiding the Programmer's User Interface @ NEPHP 2013

How can we do better?

Page 18: You Can UX Too: Avoiding the Programmer's User Interface @ NEPHP 2013

How can we do better?

The programmer's interface happens when you try to design

an interface at the same time that you're writing it.

Page 19: You Can UX Too: Avoiding the Programmer's User Interface @ NEPHP 2013

How can we do better?

UX First.

Page 20: You Can UX Too: Avoiding the Programmer's User Interface @ NEPHP 2013

How can we do better?

UX First.

And third... and fifth...

Page 21: You Can UX Too: Avoiding the Programmer's User Interface @ NEPHP 2013

How can we do better?

User-Centered Design

“A process in which the needs, wants, and limitations of end users of

a product are given extensive attention at each stage of the design

process.”

Wikipedia, “User-Centered Design” http://en.wikipedia.org/wiki/User-centered_design

Page 22: You Can UX Too: Avoiding the Programmer's User Interface @ NEPHP 2013

How can we do better?

User-Centered Design

Page 23: You Can UX Too: Avoiding the Programmer's User Interface @ NEPHP 2013

There is no one true universal UX.

Facebook:● Universal

● Human

● Clean

● Consistent

● Useful

● Fast

● Transparent

HTC One:● Make it Mine

● Stay Close

● Discover the Unexpected

Luke Wroblewski, “Developing Design Principles”, http://www.lukew.com/ff/entry.asp?854

Page 24: You Can UX Too: Avoiding the Programmer's User Interface @ NEPHP 2013

How can we do better?

Don't Reinvent the Wheel.

Page 25: You Can UX Too: Avoiding the Programmer's User Interface @ NEPHP 2013

How can we do better?

Pattern match.

Page 26: You Can UX Too: Avoiding the Programmer's User Interface @ NEPHP 2013

Pattern Match Usefully.

Page 27: You Can UX Too: Avoiding the Programmer's User Interface @ NEPHP 2013

Pattern Match Usefully.

Llama

Lemon

Lemur

Orange

Olive

Orangutan

Ocelot

Licorice

Octopus

Labrador

Lollipop

Lynx

Page 28: You Can UX Too: Avoiding the Programmer's User Interface @ NEPHP 2013

Pattern Match Usefully.

Llama

Lynx

Lemur

Ocelot

Labrador

Orangutan

Olive

Licorice

Octopus

Orange

Lollipop

Lemon

Page 29: You Can UX Too: Avoiding the Programmer's User Interface @ NEPHP 2013

How can we do better?

Protect your users.

Page 30: You Can UX Too: Avoiding the Programmer's User Interface @ NEPHP 2013

How can we do better?

Don't expect people to read.

Page 31: You Can UX Too: Avoiding the Programmer's User Interface @ NEPHP 2013

How can we do better?

Avoid Surprising Behavior.

Page 32: You Can UX Too: Avoiding the Programmer's User Interface @ NEPHP 2013

How can we do better?

Watch people use your software.

Page 33: You Can UX Too: Avoiding the Programmer's User Interface @ NEPHP 2013

How can we do better?

Watch people use your software.

...and believe your users.

Page 34: You Can UX Too: Avoiding the Programmer's User Interface @ NEPHP 2013

How can we work better with the UX professionals in our lives?

Page 35: You Can UX Too: Avoiding the Programmer's User Interface @ NEPHP 2013

The developer's job is to think about how the implementation

will affect the UX.

Page 36: You Can UX Too: Avoiding the Programmer's User Interface @ NEPHP 2013

How can we work with UX pros?

“Yes, But.”

Page 37: You Can UX Too: Avoiding the Programmer's User Interface @ NEPHP 2013

How can we work with UX pros?

Know your limits. Defer.

Page 38: You Can UX Too: Avoiding the Programmer's User Interface @ NEPHP 2013

How can we work with UX pros?

Know your limits. Defer.

(Don't have UX people? Usertesting.com)

Page 39: You Can UX Too: Avoiding the Programmer's User Interface @ NEPHP 2013

Thanks!