the ux toolbelt for developers
DESCRIPTION
The UX Toolbelt for Developers, given at Columbus Code Camp on October 11, 2014TRANSCRIPT
The UX Toolbelt for Developers
Sarah DutkiewiczCleveland Tech Consulting
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