The UX Toolbelt for Developers
Download as PPTX, PDF3 likes1,327 views
The document discusses user experience (UX) design and how it relates to the software development process. It describes UX tools that can be used during each development phase, including mind maps, site maps, personas, user flows, wireframes, heatmaps and analytics. The goal is to involve UX design principles at every step to develop software that meets users' needs and provides a positive experience.
The UX Toolbelt for Developers
- 1. The UX Toolbelt for Developers Sarah Dutkiewicz Cleveland Tech Consulting sarah@cletechconsulting.com
- 2. What is UX?
- 3. All About the Users
- 4. The Breadth of UX According to ISO, UX encompasses the following – before, during, and after use: • Emotions • Beliefs • Preferences • Perceptions • Physical responses • Psychological responses
- 6. Image taken from Dan Willis’s UX Umbrella talk
- 7. Convenience + Design – Cost = User Experience
- 8. 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.
- 9. Tying UX to the Software Development Phases
- 10. Software Development Phases Analyze Design Develop/Implement Testing Evolution/Finalize
- 11. Analyze Understand the problem that needs to be solved
- 12. 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
- 13. Brainstorming Mind mapping tools
- 14. Mind Maps
- 16. Site Maps
- 17. Site Maps
- 18. Tools Mind Maps Xmind Freemind Flows Dia Site Maps Balsamiq
- 19. Personas
- 20. What are personas? Fictional characters based on real users Composites of research Usually presented in 1-2 page documents
- 21. Personas José Business Owner Irene Older Resident Sarah Younger Resident
- 22. 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?
- 23. Irene Older 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?
- 24. Sarah Younger 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?
- 25. 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.
- 26. Features and Requirements Gathering
- 27. 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
- 28. Gherkin Syntax
- 29. Given-When-Then Cadence Consistent wording to describe a scenario Given this known situation When the user does something Then something happens
- 30. Tools Behat (PHP) SpecFlow (.NET) Cucumber (Ruby, gherkin syntax) Cucumber-JVM (Java, including Android)
- 31. Design Draw out your understanding of the problem and your idea on how to solve it
- 32. 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
- 33. User Flows
- 34. Wireframes
- 35. Wireframes.org Built in templates Wireframes, flow charts, etc. Runs right in the browser
- 36. Balsamiq
- 37. Pencil
- 38. Tools Balsamiq Mockups Pencil Wireframes.org
- 39. Develop/Implement Write the application or script to solve the problem
- 40. 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
- 41. Testing Make sure what you create is working as expected in order to solve the problem
- 42. 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
- 44. Heatmaps
- 45. Google Analytics Track information about visitors including: Time on site Pages visited Location Traffic source Browser usage
- 46. Feedburner Used for tracking RSS feed subscriptions Great for tracking people who read blogs in a feed reader
- 47. Tools Heat Maps Free Website Heatmap Generator ClickTale CrazyEgg ClickHeat Analytics Google Analytics KissMetrics Feedburner
- 48. Evolution/Finalize Run through what’s done and release it and improve upon it
- 49. Development is cyclical. Use these tools to improve your productivity and the quality of your work!
- 50. Additional Tools and Resources
- 51. Additional Tools and Methods in UX Field Research Interviewing User Tests Usability Accessibility Copywriting Graphics Design UI Design
- 52. 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
Editor's Notes
- #8: More convenience for the user plus visually appealing
- #15: Mind map created with FreeMind
- #23: Image taken from: https://www.flickr.com/photos/guilhermekardel/4064824615/in/photolist-kUQ7DB-7cchK2-7WGuwA-9cHrbZ-75U2ij-2h5Qpv-cG5GsY-8FzoGX-8kVJTD-3e4dFT-faHtZH-a75Q9P-ow2G3n-efMq41-8C7F1p-4pz6mJ-jRi63g-efFxsp-jRjBD5-jRi6BH-7oHkRF-efFzRT-pDRiS-efFxSt-7neq9q-fDcwUw-65Mwk4-TiHJy-8TTmJ6-dW9WNe-7oHkQD-4CtMuU-dpqZno-faXKF5-7QGu1F-fqG5iB-ax5ctn-fbwyzM-ax5cwK-4KgyKU-4BgVV8-akHMWx-5kJWbG-5zQbCZ-cRZTg7-4RLswS-7d5PVK-5zUNxS-9Tm4L-faHu9M
- #34: Flowchart created in Dia; screenshot of DimSum
- #38: Flower ipsum generated at http://floweripsum.com/
- #45: Taken from: http://img.blogsolute.com/heatmap-.jpg