The UX Toolbelt for Developers

The UX Toolbelt for Developers

Sarah DutkiewiczCleveland Tech Consulting

sarah@cletechconsulting.com

What is UX?

All About the Users

The Breadth of UX

According to ISO, UX encompasses the following – before, during, and after use:• Emotions• Beliefs• Preferences• Perceptions• Physical responses• Psychological responses

Image taken from Dan Willis’s UX Umbrella talk

Convenience + Design – Cost =

User Experience

Why should developers care? Without users, our software has no reason to exist.

More happy users means better chance of getting them to recommend our software to others.

While designers can make things look visually appealing, at the end of the day, if the functionality is awful, people will get frustrated and stop using a product.

Tying UX to the Software Development Phases

Software Development Phases Analyze

Design

Develop/Implement

Testing

Evolution/Finalize

AnalyzeUnderstand the problem that needs to be solved

To Analyze…. Figure out the content of the problem and how to tackle it

Get a better understand of the end users through user research and interviewing

Brainstorming ideas on the problem

Gathering requirements in terms everyone understands

BrainstormingMind mapping tools

Mind Maps

Site Maps

Site Maps

Tools Mind Maps

Xmind

Freemind

Flows

Dia

Site Maps

Balsamiq

Personas

What are personas? Fictional characters based on real users

Composites of research

Usually presented in 1-2 page documents

Personas

JoséBusiness Owner

IreneOlder

Resident

SarahYounger Resident

JoséBusiness Owner

What are the city’s demographics? Are they appropriate for me to bring my business there? What incentives do they have for businesses? Are there good networking or community opportunities for promoting my business?

IreneOlder Resident

Are there any senior programs for me to participate in? What doctors and hospitals are there? Are there parks or places for me to walk?

SarahYounger Resident

Where can I learn about the local school system? Are there any summer recreation programs for my kids to participate in when they’re older? How safe is the city for my kids to play in? What’s the diversity like of the residents in the city? Are there parks for my kids to play in? Will they be safe there?

How These Help Developers Assigning personas to screens helps us to make sure the functionality is designed appropriately.

Sometimes, developers become empathetic with the personas, putting themselves in the personas’ positions. This helps them to realize flows easier.

Features and Requirements Gathering

Features During brainstorming, break a project into features.

Use the features to help write the code and determine tests.

Write the features in English with gherkin. Consistency Works on multiple platforms

Gherkin Syntax

Given-When-Then Cadence Consistent wording to describe a scenario

Given this known situation

When the user does something

Then something happens

Tools Behat (PHP)

SpecFlow (.NET)

Cucumber (Ruby, gherkin syntax)

Cucumber-JVM (Java, including Android)

DesignDraw out your understanding of the problem and your idea on how to solve it

Designing a solution Things that need designing… User interfaces Interaction design Accessibility experiences Prototyping Processes

Tools that we can use as devs include… Balsamiq Mockups Wireframes.org Pencil Dia

User Flows

Wireframes

Wireframes.org Built in templates

Wireframes, flow charts, etc.

Runs right in the browser

Balsamiq

Pencil

Tools Balsamiq Mockups

Pencil

Wireframes.org

Develop/ImplementWrite the application or script to solve the problem

Things to consider in development We want as few clicks and as little thinking as possible

If everything is set up well, you can take a TDD approach. Using the gherkin from the “gathering requirements” stage Transition by writing a failing test for a feature Then make the test pass with the appropriate code

Keep it simple and easy to use

TestingMake sure what you create is working as expected in order to solve the problem

Things to see in testing Test to make sure the code is covering all the features – can be done in automated testing

Have users test and report issues – exploratory testing

Use focus groups to help test the app, and use heat maps and analytics to see how people are using the app

Heatmaps & Analytics

Heatmaps

Google Analytics Track information about visitors including:

Time on site Pages visited Location Traffic source Browser usage

Feedburner Used for tracking RSS feed subscriptions

Great for tracking people who read blogs in a feed reader

Tools Heat Maps

Free Website Heatmap Generator

ClickTale

CrazyEgg

ClickHeat

Analytics

Google Analytics

KissMetrics

Feedburner

Evolution/FinalizeRun through what’s done and release it and improve upon it

Development is cyclical. Use these tools to improve your productivity and the quality of your work!

Additional Tools and Resources

Additional Tools and Methods in UX Field Research

Interviewing

User Tests

Usability

Accessibility

Copywriting

Graphics Design

UI Design

Additional Resources All About UX

UX for the masses - 25 great free UX tools

MSDN - Windows UX Design Principles

OS X Human Interface Guidelines

Mobile UX and Mobile UI guidelines: The 2014 Collection

UX is not UI

The Secret to Designing an Intuitive UX