167
Introduction to UX for Developers Jacques Woodcock @kitportal @jacques_thekit

Introduction to UX for Developers

Embed Size (px)

DESCRIPTION

What do UX specialist and PHP developers have in common? Probably more than you are aware. I will be doing a session covering what UX is, how it's different than UI and how UX is a close cousin to development with plenty of "how to get started" info. So come join us this Oct for a light philosophical discussion on disciplines and how to get start doing UX in your programming life.

Citation preview

Page 1: Introduction to UX for Developers

Introduction to UX for DevelopersJacques Woodcock

@kitportal@jacques_thekit

Page 2: Introduction to UX for Developers

A little about me...

Page 3: Introduction to UX for Developers

- Degree in Design

I started by getting my degree in design...

Page 4: Introduction to UX for Developers

- Degree in Design

- Multimedia Designer

...then started doing multimedia design...

Page 5: Introduction to UX for Developers

- Degree in Design

- Multimedia Designer

- Multimedia Programmer

...then multimedia programming...

Page 6: Introduction to UX for Developers

- Degree in Design

- Multimedia Designer

- Multimedia Programmer

- Coldfusion, Javascript, PHP

...then started learning most web technologies....

Page 7: Introduction to UX for Developers

- Degree in Design

- Multimedia Designer

- Multimedia Programmer

- Coldfusion, Javascript, PHP

- Project Managment

...then on to project management...

Page 8: Introduction to UX for Developers

- Degree in Design

- Multimedia Designer

- Multimedia Programmer

- Coldfusion, Javascript, PHP

- Business Dev, Ops Managment

- Project Managment

...business development and operations management...

Page 9: Introduction to UX for Developers

- Degree in Design

- Multimedia Designer

- Multimedia Programmer

- Coldfusion, Javascript, PHP

- Business Dev, Ops Managment

- Project Managment

- Strategy

... and am now focusing on strategy.

Page 10: Introduction to UX for Developers

Let’s get started

Page 11: Introduction to UX for Developers

What is UX?

Page 12: Introduction to UX for Developers

1st

Page 13: Introduction to UX for Developers

View

It is NOT the View

Page 14: Introduction to UX for Developers

View = UI

(UI = User Interface)

Page 15: Introduction to UX for Developers

UX is

Page 16: Introduction to UX for Developers

Model View Controller+ + + So Much More

Page 17: Introduction to UX for Developers

“UX is the technical study of how users interact with your product.”

Page 18: Introduction to UX for Developers

If I were to order web disciplines into a diagram, it might look like this...

Page 19: Introduction to UX for Developers

Business Strategy

UX

Technical Scope

User Interface

Business Strategy is your base then you build on that with your UX which defines your Technical Scope and is presented with your User Interface.

Page 20: Introduction to UX for Developers

Business Strategy

UX

Technical Scope

User Interface

UX is crucial to defining your technical scope and thus your project.

Page 21: Introduction to UX for Developers

A Quick History

Page 22: Introduction to UX for Developers

Human interaction with technical systems started being studied post WWII

They found that even operators who’s live depended on using a technical system, still ran into human limitations.

Page 23: Introduction to UX for Developers

The 80’s & 90’s

When the computer started dominating the workplace, user-centered design took on a bigger importance.

Page 24: Introduction to UX for Developers

Today

Today, as the discipline has evolved, we look more at the psychological aspects of human interaction as opposed to just the usability of an interface.

Page 25: Introduction to UX for Developers

5 Principles of UXWhitney Hess

Page 26: Introduction to UX for Developers

1. Understand the problem

Whitney Hess

Page 27: Introduction to UX for Developers

1. Understand the problem

2. Don't hurt anyone

Whitney Hess

Page 28: Introduction to UX for Developers

1. Understand the problem

2. Don't hurt anyone

3. Make things simple and intuitive

Whitney Hess

Page 29: Introduction to UX for Developers

1. Understand the problem

2. Don't hurt anyone

3. Make things simple and intuitive

4. Acknowledge the user is not like you.

Whitney Hess

Page 30: Introduction to UX for Developers

1. Understand the problem

2. Don't hurt anyone

3. Make things simple and intuitive

4. Acknowledge the user is not like you

5. Have empathy

Whitney Hess

Page 31: Introduction to UX for Developers

Sound Familiar?

Page 32: Introduction to UX for Developers

1. Understand the problem

2. Don't hurt anyone

3. Make things simple and intuitive

4. Acknowledge the user is not like you

5. Have empathy

Whitney Hess

1, 3, 5... these are similar to principles of development.

Page 33: Introduction to UX for Developers

Expanded to 20Whitney Hess

Page 34: Introduction to UX for Developers

My Favorites?

Here are some of my favorites.

Page 35: Introduction to UX for Developers

Present few choicesMy Favorite Principles

We all know Apple is the king of fewer choices, yet they have the best user experience on the market.

Page 36: Introduction to UX for Developers

Present few choicesMy Favorite Principles

The more choices a person is presented with, the harder it is for them to choose. This is what Barry Schwartz calls The Paradox of Choice. Remove the "nice to haves" and focus instead of the necessary alternatives a person needs to make in order to greatly impact the outcome.

Page 37: Introduction to UX for Developers

Create a visual hierarchy that matches the user's needs

My Favorite Principles

"Visual hierarchy" is a combination of several dimensions to aid in the processing of information, such as color, size, position, contrast, shape, proximity to like items, etc.

Page 38: Introduction to UX for Developers

Provide contextMy Favorite Principles

If what users find when they get to your site/product isn't close to what they predicted, chances are they're going to give up and go elsewhere

Page 39: Introduction to UX for Developers

Use appropriate defaultsMy Favorite Principles

Providing preselected or predetermined options is one of the ways to minimize decisions and increase efficiency. But choose wisely: if you assign the defaults to the wrong options (meaning that the majority of people are forced to change the selection), you'll end up creating more stress and processing time.

Page 40: Introduction to UX for Developers

Make actions reversibleMy Favorite Principles

There is no such thing as a perfect design. No one and nothing can prevent all errors, so you're going to need a contingency plan.

Page 41: Introduction to UX for Developers

Provide feedbackMy Favorite Principles

tell them why they're waiting. Tell them that you're working. Tell them you heard them and offer the next step along their path. Design is not a monologue, it's a conversation.

Page 42: Introduction to UX for Developers

Be consistentMy Favorite Principles

When things don't match up between multiple areas, the experience can feel disjointed, confusing and uncomfortable. People will start to question whether they're misunderstanding the intended meaning or if they missed a key cue.

Page 43: Introduction to UX for Developers

If I were to add 1...

Page 44: Introduction to UX for Developers

Don’t be lazyMy Favorite Principles

In the battle to “just get it launched” you need to place followthrough at the top of the list. These might be your principles, but that don’t mean squat if you don’t apply them.

Page 45: Introduction to UX for Developers

Why is UX not UI?

Page 46: Introduction to UX for Developers

UX defines your features, user flow and product personality.

Page 47: Introduction to UX for Developers

UX: - checking in- sending messages

- tweeting, liking, +1ing- the process to do these tasks

Page 48: Introduction to UX for Developers

UI defines the screen style and layout of those features.

Page 49: Introduction to UX for Developers

UI: - button styles- colors- content size

Page 50: Introduction to UX for Developers

UI == Aesthetic Design

UX == Features and interacting with those features.

Page 51: Introduction to UX for Developers

UX will define what the UI must create through wireframes.

Page 52: Introduction to UX for Developers

ATTENDEE NAME: EVENT: National Conference

Project: The Kit CMSDeliverable: Wireframes | Managers | Event Manager | Manage Attendee Records | View AttendeesBig Heart Design | August 24, 2008

The Kit Logo LOGOUT | MY ACCOUNT | CONTACT US | HELPWELCOME MARTHA TAYLOR!

QUICK PAGE EDIT

PAGE ORDER

SITE FILES

HOME PAGES RELATIONSHIPS MANAGERS

LOGOUT | MY ACCOUNT | CONTACT US | HELP WELCOME MARTHA TAYLOR!The Kit Logo

NEW PAGE

MANAGE ATTENDEE RECORDS KIT NEWS

News headlines #1News headlines #2News headlines #3News headlines #4News headlines #5

Attendee Status Actions

Matt Carlisle

Jacques Woodcock

Paid

Unpaid

View | Mark as Unpaid | Delete

View | Mark as Paid | Delete

GO

<< Back | National Conference Attendee Report

PRINT ATTENDEE RECORD

UX will direct with a wireframe. Here is an example of a wireframe for a user interface.

Page 53: Introduction to UX for Developers

UI will convert the wireframe into an interface.

Page 54: Introduction to UX for Developers

UI specialist will be a member on a UX team.

Page 55: Introduction to UX for Developers

UX & Developers are cousins

Page 56: Introduction to UX for Developers

Both try to solve a problem.

Page 57: Introduction to UX for Developers

Both break a system down to basic tasks.

Page 58: Introduction to UX for Developers

Both describes how a function interfaces with the overall system.

Page 59: Introduction to UX for Developers

Both plan for input and output.

Page 60: Introduction to UX for Developers

Shared Goals; Different Focus

Page 61: Introduction to UX for Developers

Developers think of what's best for the system

Page 62: Introduction to UX for Developers

UX thinks of what's best for the user

Page 63: Introduction to UX for Developers

Developer: “Is the process an efficient use of resources?”UX: “Is the process efficient for the user?”

Page 64: Introduction to UX for Developers

Example

Let’s look at the focus of those questions in an example.

Page 65: Introduction to UX for Developers

Example: Remote

Let’s look at the remote.

Page 66: Introduction to UX for Developers

Devs:

Want to make sure all functionality is assessable to the user, typically in one menu.

Page 67: Introduction to UX for Developers

Devs:

Which leaves you with this.

Page 68: Introduction to UX for Developers

UX:

UX designers understand the principles of user interaction.

Page 69: Introduction to UX for Developers

UX:

UX will deliver a product like this.

Page 70: Introduction to UX for Developers

Not the same level of functionality,but a mountain of difference in usability.

Page 71: Introduction to UX for Developers

Disciplines can be broken down to 3 areas.

Page 72: Introduction to UX for Developers

1Guiding principles

Page 73: Introduction to UX for Developers

1Guiding principles 2 Processes

Page 74: Introduction to UX for Developers

3 Tools1Guiding principles 2 Processes

Page 75: Introduction to UX for Developers

1Guiding principlesUX

Dev

UX and Dev share similar principles, as we discussed.

Page 76: Introduction to UX for Developers

UX

Dev2 Processes

- Listen- Ask questions- Define a goal- Define milestones

They even start with a similar process.

Page 77: Introduction to UX for Developers

1Guiding principles 2 Processes

UX Processes

Dev Processes

It’s halfway through the process that they split.

Page 78: Introduction to UX for Developers

1Guiding principles 2 Processes

UX Processes >

Dev Processes > Technical Scope

User Flow

UX starts to focus on the user flow while devs start to focus on the technical scope.

Page 79: Introduction to UX for Developers

UX: User Flow

Dev: Technical Scope

Project

Good projects have both

Page 80: Introduction to UX for Developers

UX: User Flow

Dev: Technical Scope

Project

, and they communicate.

Page 81: Introduction to UX for Developers

UX: User Flow

Dev: Technical Scope

Project

User flow should define the technical scope.

Page 82: Introduction to UX for Developers

UX: User Flow

Dev: Technical Scope

Project

Technical scope should not influence the user flow...

Page 83: Introduction to UX for Developers

UX: User Flow

Dev: Technical Scope

Project

...beyond technical limitations.

Page 84: Introduction to UX for Developers

Why?

Page 85: Introduction to UX for Developers

We build for users.

Average users will trade functionality for usability.

Page 86: Introduction to UX for Developers

You have to know your users.

Page 87: Introduction to UX for Developers

Great UX specialist understand development.

Page 88: Introduction to UX for Developers

Efficient UX specialist have coding knowledge.

Page 89: Introduction to UX for Developers

UX specialist prototype.

Page 90: Introduction to UX for Developers

UX specialist prototype. Papered process flows

Some present papered process flows.

Page 91: Introduction to UX for Developers

UX specialist prototype.

AJAX/JQuery

Some prototype in AJAX/JQuery

Page 92: Introduction to UX for Developers

UX specialist prototype.

AJAX/JQuery

HTML/CSS

HTML/CSS

Page 93: Introduction to UX for Developers

UX specialist prototype.

AJAX/JQuery

HTML/CSS

PHP

and even PHP

Page 94: Introduction to UX for Developers

Great UX specialist write prototypes that can be pushed to developers for final production.

Page 95: Introduction to UX for Developers

Use prototypes to streamline development.

AJAX/JQuery

HTML/CSS

PHP

Development Environment

You can even use these prototypes to streamline the development process.

Page 96: Introduction to UX for Developers

How do I get started?

Page 97: Introduction to UX for Developers

1st

Page 98: Introduction to UX for Developers

Change Mindset

Page 99: Introduction to UX for Developers

How can I organize these features to create an efficient system?

From

Page 100: Introduction to UX for Developers

How can I organize these features for an efficient user experience?

To

Page 101: Introduction to UX for Developers

2nd

Page 102: Introduction to UX for Developers

Interact with REAL users

Take them out for coffee, lunch, or just chat on the phone.

Page 103: Introduction to UX for Developers

KNOW YOUR USERS!

Page 104: Introduction to UX for Developers

3rd

Page 105: Introduction to UX for Developers

PrototypeSketch, build, test, adjust, repeat

Sketch

Build

Test

Adjust

Page 106: Introduction to UX for Developers

PrototypeSketch - Paper

Here is a user flow I did for a process for users to take content from the system, get a short url and pass it to the social sphere. Bottom right is a rough UI and the bottom left is a rough data scheme.

Page 107: Introduction to UX for Developers

PrototypeSketch - Paper

Here is an interface sketch, the first is the overall interface, the top right is the interface when interaction is initiated and the last is the new user interface that gets shown.

Page 108: Introduction to UX for Developers

PrototypeSketch - Wireframe

Next you wireframe. Here is the social process’s interface.

Page 109: Introduction to UX for Developers

PrototypeBuild

Here is the user sketch built out. The top is the default state, the next is the interface after the new function has been initiated.

Page 110: Introduction to UX for Developers

PrototypeBuild

Here is the new screen they are presented with to complete their process.

Page 111: Introduction to UX for Developers

PrototypeTesting

- Focus Groups- Screen Capturing- Eye Tracking- Heat Mapping- Analytics

Testing can be done with any of the above.

Page 112: Introduction to UX for Developers

PrototypeTesting: Focus Groups

A focus group involves encouraging an invited group of participants to share their thoughts, feelings, attitudes and ideas on a certain subject, feature or user flow.

Page 113: Introduction to UX for Developers

PrototypeTesting: Focus Groups

- Prepare agenda

Start by preparing an agenda.

Page 114: Introduction to UX for Developers

PrototypeTesting: Focus Groups

- Prepare agenda- Invite 1 to 6 target users

Next invite 1 to 6 target users, depending on the agenda. 1 works better for them interacting with website and 6 is best for a Q&A.

Page 115: Introduction to UX for Developers

PrototypeTesting: Focus Groups

- Prepare agenda- Invite 1 to 6 target users- Meet in quiet room

You want to be able to hear each other.

Page 116: Introduction to UX for Developers

PrototypeTesting: Focus Groups

- Prepare agenda- Invite 1 to 6 target users- Meet in quiet room- Record session

You must record, either video or audio, video if they are interacting. This allows you to reference back and justifies any changes in strategy.

Page 117: Introduction to UX for Developers

PrototypeTesting: Focus Groups

- Prepare agenda- Invite 1 to 6 target users- Meet in quiet room- Record session- Ask them to walk through, or walk them through tasks

Page 118: Introduction to UX for Developers

PrototypeTesting: Focus Groups

- Prepare agenda- Invite 1 to 6 target users- Meet in quiet room- Record session- Ask them to walk through, or walk them through tasks- Document feedback

Documenting feedback should be highlights as you have a recording to reference back to for details.

Page 119: Introduction to UX for Developers

PrototypeTesting: Eye Tracking

“Eye tracking is the process of measuring either the point of gaze ("where we are looking") or the motion of an eye relative to the head.”

Page 120: Introduction to UX for Developers

PrototypeTesting: Eye Tracking

This works by placing a camera on top of the user’s computer.

Page 121: Introduction to UX for Developers

PrototypeTesting: Eye Tracking

It then beam infrared light out that is in turn reflected back by the human eye.

Page 122: Introduction to UX for Developers

PrototypeTesting: Eye Tracking

In the end, you can pinpoint where the user’s eyes move to.

Page 123: Introduction to UX for Developers

PrototypeTesting: Screen Capturing

Screen capturing allows you to see exactly what your users are doing on your site, down to all sporadic mouse movements, by recording their complete session.

Page 124: Introduction to UX for Developers

PrototypeTesting: Screen Capturing

I love this tool.

Page 125: Introduction to UX for Developers

PrototypeTesting: Screen Capturing

Demo

Can’t embed demo. Sorry.

Page 126: Introduction to UX for Developers

PrototypeTesting: Screen Capturing

Some providers:User Flyhttp://userfly.com

ExactoStatshttp://exactostats.com/

ClickTalehttp://www.clicktale.com/

Some providers of Screen Capturing.

Page 127: Introduction to UX for Developers

PrototypeTesting: Heat Mapping

“A heat map is an easy way to understand what users do on your site. It’s a visual representation showing you where people click and what users do.”

Page 128: Introduction to UX for Developers

PrototypeTesting: Heat Mapping

Many software solutions for making heat maps.

Page 129: Introduction to UX for Developers

PrototypeTesting: Heat Mapping

Most are based off of user click patterns.

Page 130: Introduction to UX for Developers

PrototypeTesting: Heat Mapping

Notice the colors

Page 131: Introduction to UX for Developers

PrototypeTesting: Heat Mapping

Cool colors are few clicks

Page 132: Introduction to UX for Developers

PrototypeTesting: Heat Mapping

Warm colors are most clicked

here you will see most people use this page to login.

Page 133: Introduction to UX for Developers

PrototypeTesting: Heat Mapping

Some providers:Crazy Egghttp://www.crazyegg.com/

Omniturehttp://www.omniture.com/en/

Clickdestinyhttp://www.clickdensity.com/

Google Analyticshttps://www.google.com/analytics/

And many others

Google actually only gives you the percentage of clicks per link, but that’s still useful.

Page 134: Introduction to UX for Developers

PrototypeTesting: Analytics

We all know what analytics are, but do we understand how they help usability?

Page 135: Introduction to UX for Developers

PrototypeTesting: Analytics

First, they clarify what works in your UI.

Page 136: Introduction to UX for Developers

PrototypeTesting: Analytics

Next, they justify your content, or justify removing some of your content.

Page 137: Introduction to UX for Developers

PrototypeTesting: Analytics

Lastly, they can tell you if your user flow is working.

Page 138: Introduction to UX for Developers

PrototypeTesting: Analytics

There are many names for this, funnels, goals, paths. I like conversion as it implies your user flow is taking a user from the start to your desired destination.

Page 139: Introduction to UX for Developers

PrototypeTesting: Analytics

This works by tracking how your user comes in, where they go and where they end up.

It’s easy when you have a finite task, such as share a photo. You can tell how your conversion is doing by how many photos are being shared. Still, it’s good to know how your users come in and then find the share function.

Page 140: Introduction to UX for Developers

PrototypeTesting: Analytics

So you have your site.

Home

About Login Sign Up Support

Team Share

Service

Blog

Post 1

Post 2

Page 141: Introduction to UX for Developers

PrototypeTesting: Analytics

You define a successful conversion follows this path.

Home

About Login Sign Up Support

Team Share

Service

Blog

Post 1

Post 2

Page 142: Introduction to UX for Developers

PrototypeTesting: Analytics

With analytics, you find that users follow this path.

Home

About Login Sign Up Support

Team Share

Service

Blog

Post 1

Post 2

Page 143: Introduction to UX for Developers

PrototypeTesting: Analytics

There’s something wrong with your user experience.

So you...

Page 144: Introduction to UX for Developers

Sketch

Build

Test

Adjust

PrototypeAdjusting

Adjust

Page 145: Introduction to UX for Developers

Repeat

Page 146: Introduction to UX for Developers

To Sum Up

Page 147: Introduction to UX for Developers

UX != UI

Page 148: Introduction to UX for Developers

UX

UI

UX owns UI

Page 149: Introduction to UX for Developers

UX like Development

Page 150: Introduction to UX for Developers

UX like DevelopmentShared goals, different focus

Page 151: Introduction to UX for Developers

UX == Development

In the case of prototyping.

Page 152: Introduction to UX for Developers

Get Started

Page 153: Introduction to UX for Developers

Get StartedChange Mindset

Page 154: Introduction to UX for Developers

Get StartedChange Mindset

Interact with REAL users

Know your users!!!

Page 155: Introduction to UX for Developers

Get StartedChange Mindset

Interact with REAL users

Sketch, build, test, adjust, repeat

Page 156: Introduction to UX for Developers

One last thing

Page 157: Introduction to UX for Developers

Pay attention to design.

Okay, I know a lot of developers are going to scrum by this word, but trust me, it’s okay. We’re not going to talk color palates, nor shading.

Page 158: Introduction to UX for Developers

Pay attention to design.

You may not be a designer, but you have opinions on design, and that’s okay. So quickly...

Page 159: Introduction to UX for Developers

Design

Design covers a wide variety of definitions and skills. It can be one of the most misleading disciplines out there.

Page 160: Introduction to UX for Developers

Design == Creativity

Most people think design equals creativity.

Page 161: Introduction to UX for Developers

Design == Creativity

They are wrong. I know so many people who are good with UX design that have no ability to “design.”

Page 162: Introduction to UX for Developers

Design is simply the structuring of elements into a pleasing, or usable, product for the target audience to consume.

Design is simply the structuring of elements into a pleasing, or usable, product for a target audience to consume.

Page 163: Introduction to UX for Developers

Design is simply the structuring of elements into a pleasing, or usable, product for the target audience to consume.

Don’t get me wrong. Art is something totally different than design. There’s emotion, thought, pain, love and so much more that goes into art.

Page 164: Introduction to UX for Developers

Design

But we are talking design.

Page 165: Introduction to UX for Developers

UX Design

And more specially UX design.

Page 166: Introduction to UX for Developers

Sketch

Build

Test

Adjust∞

You piece together a user experience from what’s proven to work for the user by getting to know the user, testing your product, adjusting your offering and repeating. ∞

Page 167: Introduction to UX for Developers

Pek Pongpaethttp://uxmag.com/design/user-experience-for-developers

Whitney Hesshttp://www.uxmag.com/design/guiding-principles-for-ux-designers

Justin Davishttp://www.maderalabs.com/blog/five-things-every-developer-should-understand-about-ux/

#more-1051

Everett McKay http://www.uxdesignedge.com/2010/03/getting-started-in-interaction-design/

David Leggetthttp://www.uxbooth.com/blog/top-29-free-ux-tools-and-extensions/

Focus Groupshttp://www.webcredible.co.uk/user-friendly-resources/web-usability/focus-groups.shtml

29 Free Toolshttp://www.uxbooth.com/blog/top-29-free-ux-tools-and-extensions/

Dr. Tobias Komischke http://blogs.infragistics.com/pixel8/media/p/95683.aspx

References

@kitportal@jacques_thekit

Introduction to UX for Developers Jacques Woodcock