View
369
Download
1
Category
Preview:
Citation preview
The UX Toolbelt for Developers
Sarah DutkiewiczCleveland Tech Consulting
sarah@cletechconsulting.com@sadukie
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
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 PhasesAnalyze
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
How These Help DevelopersMind maps allow the developers and business to lay out the scope of an application.
They also allow developers to see possible growth of an application that may not have been originally anticipated. Brainstorming with others can lead to other ideas coming up.
Site maps help web developers to see the layout of a website and can serve as a checklist of the progress of site development.
ToolsMind 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
Irene
Older Resident
Sarah
Younger 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 DevelopersAssigning 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
FeaturesDuring 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 CadenceConsistent wording to describe a scenario
Given this known situation
When the user does something
Then something happens
How These Help DevelopersWriting features in English bridges the gap between business and tech teams.
These scenarios cover the use cases for the app, defining points to be tested.
The feature files map down to code, which means that the developers can use these for automated testing.
ToolsBehat (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 solutionThings that need designing…
User interfacesInteraction designAccessibility experiencesPrototypingProcesses
Tools that we can use as devs include…Balsamiq MockupsWireframes.orgPencilDia
User Flows
User Flows (continued)
Wireframes
Wireframes.orgBuilt in templates
Wireframes, flow charts, etc.
Runs right in the browser
Lucid Charts
Balsamiq
Pencil
How These Help DevelopersWireframes help developers see possible UI layout and designs, making it easier to conceptualize the app. They also help the business see these as well.
User Flows help the developers understand the process that they are improving or developing. This also helps the business to see their process and identify pain points.
ToolsBalsamiq Mockups
Pencil
Wireframes.org
Lucid Chart
Develop/ImplementWrite the application or script to solve the problem
Things to consider in developmentWe 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
Sample Feature File
Generate Step Definitions
Generated Steps
How These Help DevelopersThe steps in the feature file help the developers to see the process of how the app is getting used.
Having the code documented in feature files allows the developers to write as little code as possible to get the job done.
TestingMake sure what you create is working as expected in order to solve the problem
Things to see in testingTest 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 AnalyticsTrack information about visitors including:
Time on site
Pages visited
Location
Traffic source
Browser usage
FeedburnerUsed for tracking RSS feed subscriptions
Great for tracking people who read blogs in a feed reader
How These Help DevelopersHeatmaps help developers see what parts of their UIs are getting used the most. This can help them identify problem spots or possibly suggest layout improvements.
Analytics can help them identify their end users’ environments, allowing them to develop appropriate experiences that scale well to the various environments.
- Including different browser types
- Including different platforms (phones, tablets, laptops, televisions, etc.)
ToolsHeat 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 UXField Research
Interviewing
User Tests
Usability
Accessibility
Copywriting
Graphics Design
UI Design
Additional ResourcesAll 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
Any questions?
Recommended