O slideshow foi denunciado.
Seu SlideShare está sendo baixado. ×

The UX Toolbelt for Developers

Próximos SlideShares
The Case for the UX Developer
The Case for the UX Developer
Carregando em…3

Confira estes a seguir

1 de 52 Anúncio

Mais Conteúdo rRelacionado

Diapositivos para si (20)

Semelhante a The UX Toolbelt for Developers (20)


Mais de Sarah Dutkiewicz (20)

Mais recentes (20)


The UX Toolbelt for Developers

  1. 1. The UX Toolbelt for Developers Sarah Dutkiewicz Cleveland Tech Consulting sarah@cletechconsulting.com
  2. 2. What is UX?
  3. 3. All About the Users
  4. 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
  5. 5. Image taken from Dan Willis’s UX Umbrella talk
  6. 6. Convenience + Design – Cost = User Experience
  7. 7. 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.
  8. 8. Tying UX to the Software Development Phases
  9. 9. Software Development Phases Analyze Design Develop/Implement Testing Evolution/Finalize
  10. 10. Analyze Understand the problem that needs to be solved
  11. 11. 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
  12. 12. Brainstorming Mind mapping tools
  13. 13. Mind Maps
  14. 14. Site Maps
  15. 15. Site Maps
  16. 16. Tools Mind Maps Xmind Freemind Flows Dia Site Maps Balsamiq
  17. 17. Personas
  18. 18. What are personas? Fictional characters based on real users Composites of research Usually presented in 1-2 page documents
  19. 19. Personas José Business Owner Irene Older Resident Sarah Younger Resident
  20. 20. 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?
  21. 21. 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?
  22. 22. 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?
  23. 23. 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.
  24. 24. Features and Requirements Gathering
  25. 25. 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
  26. 26. Gherkin Syntax
  27. 27. Given-When-Then Cadence Consistent wording to describe a scenario Given this known situation When the user does something Then something happens
  28. 28. Tools Behat (PHP) SpecFlow (.NET) Cucumber (Ruby, gherkin syntax) Cucumber-JVM (Java, including Android)
  29. 29. Design Draw out your understanding of the problem and your idea on how to solve it
  30. 30. 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
  31. 31. User Flows
  32. 32. Wireframes
  33. 33. Wireframes.org Built in templates Wireframes, flow charts, etc. Runs right in the browser
  34. 34. Balsamiq
  35. 35. Pencil
  36. 36. Tools Balsamiq Mockups Pencil Wireframes.org
  37. 37. Develop/Implement Write the application or script to solve the problem
  38. 38. 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
  39. 39. Testing Make sure what you create is working as expected in order to solve the problem
  40. 40. 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
  41. 41. Heatmaps & Analytics
  42. 42. Heatmaps
  43. 43. Google Analytics Track information about visitors including: Time on site Pages visited Location Traffic source Browser usage
  44. 44. Feedburner Used for tracking RSS feed subscriptions Great for tracking people who read blogs in a feed reader
  45. 45. Tools Heat Maps Free Website Heatmap Generator ClickTale CrazyEgg ClickHeat Analytics Google Analytics KissMetrics Feedburner
  46. 46. Evolution/Finalize Run through what’s done and release it and improve upon it
  47. 47. Development is cyclical. Use these tools to improve your productivity and the quality of your work!
  48. 48. Additional Tools and Resources
  49. 49. Additional Tools and Methods in UX Field Research Interviewing User Tests Usability Accessibility Copywriting Graphics Design UI Design
  50. 50. 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

Notas do Editor

  • More convenience for the user plus visually appealing
  • Mind map created with FreeMind
  • 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
  • Flowchart created in Dia; screenshot of DimSum
  • Flower ipsum generated at http://floweripsum.com/
  • Taken from: http://img.blogsolute.com/heatmap-.jpg