the ux toolbelt for developers
TRANSCRIPT
![Page 2: The UX Toolbelt for Developers](https://reader030.vdocument.in/reader030/viewer/2022020307/55a78a771a28ab266e8b457e/html5/thumbnails/2.jpg)
What is UX?
![Page 3: The UX Toolbelt for Developers](https://reader030.vdocument.in/reader030/viewer/2022020307/55a78a771a28ab266e8b457e/html5/thumbnails/3.jpg)
All About the Users
![Page 4: The UX Toolbelt for Developers](https://reader030.vdocument.in/reader030/viewer/2022020307/55a78a771a28ab266e8b457e/html5/thumbnails/4.jpg)
The Breadth of UX
According to ISO, UX encompasses the following – before, during, and after use:
• Emotions
• Beliefs
• Preferences
• Perceptions
• Physical responses
• Psychological responses
![Page 7: The UX Toolbelt for Developers](https://reader030.vdocument.in/reader030/viewer/2022020307/55a78a771a28ab266e8b457e/html5/thumbnails/7.jpg)
Convenience + Design – Cost =
User Experience
![Page 8: The UX Toolbelt for Developers](https://reader030.vdocument.in/reader030/viewer/2022020307/55a78a771a28ab266e8b457e/html5/thumbnails/8.jpg)
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.
![Page 9: The UX Toolbelt for Developers](https://reader030.vdocument.in/reader030/viewer/2022020307/55a78a771a28ab266e8b457e/html5/thumbnails/9.jpg)
Tying UX to the Software Development Phases
![Page 10: The UX Toolbelt for Developers](https://reader030.vdocument.in/reader030/viewer/2022020307/55a78a771a28ab266e8b457e/html5/thumbnails/10.jpg)
Software Development PhasesAnalyze
Design
Develop/Implement
Testing
Evolution/Finalize
![Page 11: The UX Toolbelt for Developers](https://reader030.vdocument.in/reader030/viewer/2022020307/55a78a771a28ab266e8b457e/html5/thumbnails/11.jpg)
AnalyzeUnderstand the problem that needs to be solved
![Page 12: The UX Toolbelt for Developers](https://reader030.vdocument.in/reader030/viewer/2022020307/55a78a771a28ab266e8b457e/html5/thumbnails/12.jpg)
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
![Page 13: The UX Toolbelt for Developers](https://reader030.vdocument.in/reader030/viewer/2022020307/55a78a771a28ab266e8b457e/html5/thumbnails/13.jpg)
BrainstormingMind mapping tools
![Page 14: The UX Toolbelt for Developers](https://reader030.vdocument.in/reader030/viewer/2022020307/55a78a771a28ab266e8b457e/html5/thumbnails/14.jpg)
Mind Maps
![Page 15: The UX Toolbelt for Developers](https://reader030.vdocument.in/reader030/viewer/2022020307/55a78a771a28ab266e8b457e/html5/thumbnails/15.jpg)
![Page 16: The UX Toolbelt for Developers](https://reader030.vdocument.in/reader030/viewer/2022020307/55a78a771a28ab266e8b457e/html5/thumbnails/16.jpg)
Site Maps
![Page 17: The UX Toolbelt for Developers](https://reader030.vdocument.in/reader030/viewer/2022020307/55a78a771a28ab266e8b457e/html5/thumbnails/17.jpg)
Site Maps
![Page 18: The UX Toolbelt for Developers](https://reader030.vdocument.in/reader030/viewer/2022020307/55a78a771a28ab266e8b457e/html5/thumbnails/18.jpg)
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.
![Page 19: The UX Toolbelt for Developers](https://reader030.vdocument.in/reader030/viewer/2022020307/55a78a771a28ab266e8b457e/html5/thumbnails/19.jpg)
ToolsMind Maps
Xmind
Freemind
Flows
Dia
Site Maps
Balsamiq
![Page 20: The UX Toolbelt for Developers](https://reader030.vdocument.in/reader030/viewer/2022020307/55a78a771a28ab266e8b457e/html5/thumbnails/20.jpg)
Personas
![Page 21: The UX Toolbelt for Developers](https://reader030.vdocument.in/reader030/viewer/2022020307/55a78a771a28ab266e8b457e/html5/thumbnails/21.jpg)
What are personas?Fictional characters based on real users
Composites of research
Usually presented in 1-2 page documents
![Page 22: The UX Toolbelt for Developers](https://reader030.vdocument.in/reader030/viewer/2022020307/55a78a771a28ab266e8b457e/html5/thumbnails/22.jpg)
Personas
José
Business Owner
Irene
Older Resident
Sarah
Younger Resident
![Page 23: The UX Toolbelt for Developers](https://reader030.vdocument.in/reader030/viewer/2022020307/55a78a771a28ab266e8b457e/html5/thumbnails/23.jpg)
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?
![Page 24: The UX Toolbelt for Developers](https://reader030.vdocument.in/reader030/viewer/2022020307/55a78a771a28ab266e8b457e/html5/thumbnails/24.jpg)
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?
![Page 25: The UX Toolbelt for Developers](https://reader030.vdocument.in/reader030/viewer/2022020307/55a78a771a28ab266e8b457e/html5/thumbnails/25.jpg)
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?
![Page 26: The UX Toolbelt for Developers](https://reader030.vdocument.in/reader030/viewer/2022020307/55a78a771a28ab266e8b457e/html5/thumbnails/26.jpg)
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.
![Page 27: The UX Toolbelt for Developers](https://reader030.vdocument.in/reader030/viewer/2022020307/55a78a771a28ab266e8b457e/html5/thumbnails/27.jpg)
Features and Requirements Gathering
![Page 28: The UX Toolbelt for Developers](https://reader030.vdocument.in/reader030/viewer/2022020307/55a78a771a28ab266e8b457e/html5/thumbnails/28.jpg)
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
![Page 29: The UX Toolbelt for Developers](https://reader030.vdocument.in/reader030/viewer/2022020307/55a78a771a28ab266e8b457e/html5/thumbnails/29.jpg)
Gherkin Syntax
![Page 30: The UX Toolbelt for Developers](https://reader030.vdocument.in/reader030/viewer/2022020307/55a78a771a28ab266e8b457e/html5/thumbnails/30.jpg)
Given-When-Then CadenceConsistent wording to describe a scenario
Given this known situation
When the user does something
Then something happens
![Page 31: The UX Toolbelt for Developers](https://reader030.vdocument.in/reader030/viewer/2022020307/55a78a771a28ab266e8b457e/html5/thumbnails/31.jpg)
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.
![Page 32: The UX Toolbelt for Developers](https://reader030.vdocument.in/reader030/viewer/2022020307/55a78a771a28ab266e8b457e/html5/thumbnails/32.jpg)
ToolsBehat (PHP)
SpecFlow (.NET)
Cucumber (Ruby, gherkin syntax)
Cucumber-JVM (Java, including Android)
![Page 33: The UX Toolbelt for Developers](https://reader030.vdocument.in/reader030/viewer/2022020307/55a78a771a28ab266e8b457e/html5/thumbnails/33.jpg)
DesignDraw out your understanding of the problem and your idea on how to solve it
![Page 34: The UX Toolbelt for Developers](https://reader030.vdocument.in/reader030/viewer/2022020307/55a78a771a28ab266e8b457e/html5/thumbnails/34.jpg)
Designing a solutionThings that need designing…
User interfacesInteraction designAccessibility experiencesPrototypingProcesses
Tools that we can use as devs include…Balsamiq MockupsWireframes.orgPencilDia
![Page 35: The UX Toolbelt for Developers](https://reader030.vdocument.in/reader030/viewer/2022020307/55a78a771a28ab266e8b457e/html5/thumbnails/35.jpg)
User Flows
![Page 36: The UX Toolbelt for Developers](https://reader030.vdocument.in/reader030/viewer/2022020307/55a78a771a28ab266e8b457e/html5/thumbnails/36.jpg)
User Flows (continued)
![Page 37: The UX Toolbelt for Developers](https://reader030.vdocument.in/reader030/viewer/2022020307/55a78a771a28ab266e8b457e/html5/thumbnails/37.jpg)
Wireframes
![Page 38: The UX Toolbelt for Developers](https://reader030.vdocument.in/reader030/viewer/2022020307/55a78a771a28ab266e8b457e/html5/thumbnails/38.jpg)
Wireframes.orgBuilt in templates
Wireframes, flow charts, etc.
Runs right in the browser
![Page 39: The UX Toolbelt for Developers](https://reader030.vdocument.in/reader030/viewer/2022020307/55a78a771a28ab266e8b457e/html5/thumbnails/39.jpg)
Lucid Charts
![Page 40: The UX Toolbelt for Developers](https://reader030.vdocument.in/reader030/viewer/2022020307/55a78a771a28ab266e8b457e/html5/thumbnails/40.jpg)
Balsamiq
![Page 41: The UX Toolbelt for Developers](https://reader030.vdocument.in/reader030/viewer/2022020307/55a78a771a28ab266e8b457e/html5/thumbnails/41.jpg)
Pencil
![Page 42: The UX Toolbelt for Developers](https://reader030.vdocument.in/reader030/viewer/2022020307/55a78a771a28ab266e8b457e/html5/thumbnails/42.jpg)
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.
![Page 43: The UX Toolbelt for Developers](https://reader030.vdocument.in/reader030/viewer/2022020307/55a78a771a28ab266e8b457e/html5/thumbnails/43.jpg)
ToolsBalsamiq Mockups
Pencil
Wireframes.org
Lucid Chart
![Page 44: The UX Toolbelt for Developers](https://reader030.vdocument.in/reader030/viewer/2022020307/55a78a771a28ab266e8b457e/html5/thumbnails/44.jpg)
Develop/ImplementWrite the application or script to solve the problem
![Page 45: The UX Toolbelt for Developers](https://reader030.vdocument.in/reader030/viewer/2022020307/55a78a771a28ab266e8b457e/html5/thumbnails/45.jpg)
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
![Page 46: The UX Toolbelt for Developers](https://reader030.vdocument.in/reader030/viewer/2022020307/55a78a771a28ab266e8b457e/html5/thumbnails/46.jpg)
Sample Feature File
![Page 47: The UX Toolbelt for Developers](https://reader030.vdocument.in/reader030/viewer/2022020307/55a78a771a28ab266e8b457e/html5/thumbnails/47.jpg)
Generate Step Definitions
![Page 48: The UX Toolbelt for Developers](https://reader030.vdocument.in/reader030/viewer/2022020307/55a78a771a28ab266e8b457e/html5/thumbnails/48.jpg)
Generated Steps
![Page 49: The UX Toolbelt for Developers](https://reader030.vdocument.in/reader030/viewer/2022020307/55a78a771a28ab266e8b457e/html5/thumbnails/49.jpg)
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.
![Page 50: The UX Toolbelt for Developers](https://reader030.vdocument.in/reader030/viewer/2022020307/55a78a771a28ab266e8b457e/html5/thumbnails/50.jpg)
TestingMake sure what you create is working as expected in order to solve the problem
![Page 51: The UX Toolbelt for Developers](https://reader030.vdocument.in/reader030/viewer/2022020307/55a78a771a28ab266e8b457e/html5/thumbnails/51.jpg)
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
![Page 52: The UX Toolbelt for Developers](https://reader030.vdocument.in/reader030/viewer/2022020307/55a78a771a28ab266e8b457e/html5/thumbnails/52.jpg)
Heatmaps & Analytics
![Page 53: The UX Toolbelt for Developers](https://reader030.vdocument.in/reader030/viewer/2022020307/55a78a771a28ab266e8b457e/html5/thumbnails/53.jpg)
Heatmaps
![Page 54: The UX Toolbelt for Developers](https://reader030.vdocument.in/reader030/viewer/2022020307/55a78a771a28ab266e8b457e/html5/thumbnails/54.jpg)
Google AnalyticsTrack information about visitors including:
Time on site
Pages visited
Location
Traffic source
Browser usage
![Page 55: The UX Toolbelt for Developers](https://reader030.vdocument.in/reader030/viewer/2022020307/55a78a771a28ab266e8b457e/html5/thumbnails/55.jpg)
FeedburnerUsed for tracking RSS feed subscriptions
Great for tracking people who read blogs in a feed reader
![Page 56: The UX Toolbelt for Developers](https://reader030.vdocument.in/reader030/viewer/2022020307/55a78a771a28ab266e8b457e/html5/thumbnails/56.jpg)
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.)
![Page 57: The UX Toolbelt for Developers](https://reader030.vdocument.in/reader030/viewer/2022020307/55a78a771a28ab266e8b457e/html5/thumbnails/57.jpg)
ToolsHeat Maps
Free Website Heatmap Generator
ClickTale
CrazyEgg
ClickHeat
Analytics
Google Analytics
KissMetrics
Feedburner
![Page 58: The UX Toolbelt for Developers](https://reader030.vdocument.in/reader030/viewer/2022020307/55a78a771a28ab266e8b457e/html5/thumbnails/58.jpg)
Evolution/FinalizeRun through what’s done and release it and improve upon it
![Page 59: The UX Toolbelt for Developers](https://reader030.vdocument.in/reader030/viewer/2022020307/55a78a771a28ab266e8b457e/html5/thumbnails/59.jpg)
Development is cyclical. Use these tools to improve your productivity and the quality of your work!
![Page 60: The UX Toolbelt for Developers](https://reader030.vdocument.in/reader030/viewer/2022020307/55a78a771a28ab266e8b457e/html5/thumbnails/60.jpg)
Additional Tools and Resources
![Page 61: The UX Toolbelt for Developers](https://reader030.vdocument.in/reader030/viewer/2022020307/55a78a771a28ab266e8b457e/html5/thumbnails/61.jpg)
Additional Tools and Methods in UXField Research
Interviewing
User Tests
Usability
Accessibility
Copywriting
Graphics Design
UI Design
![Page 62: The UX Toolbelt for Developers](https://reader030.vdocument.in/reader030/viewer/2022020307/55a78a771a28ab266e8b457e/html5/thumbnails/62.jpg)
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
![Page 63: The UX Toolbelt for Developers](https://reader030.vdocument.in/reader030/viewer/2022020307/55a78a771a28ab266e8b457e/html5/thumbnails/63.jpg)
Any questions?