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

The UX Toolbelt for Developers

Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Carregando em…3
×

Confira estes a seguir

1 de 63 Anúncio

Mais Conteúdo rRelacionado

Diapositivos para si (19)

Semelhante a The UX Toolbelt for Developers (20)

Anúncio

Mais de Sarah Dutkiewicz (20)

Mais recentes (20)

Anúncio

The UX Toolbelt for Developers

  1. 1. The UX Toolbelt for Developers Sarah Dutkiewicz Cleveland Tech Consulting sarah@cletechconsulting.com @sadukie
  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. How These Help Developers Mind 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.
  17. 17. Tools Mind Maps Xmind Freemind Flows Dia Site Maps Balsamiq
  18. 18. Personas
  19. 19. What are personas? Fictional characters based on real users Composites of research Usually presented in 1-2 page documents
  20. 20. Personas José Business Owner Irene Older Resident Sarah Younger Resident
  21. 21. 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?
  22. 22. 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?
  23. 23. 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?
  24. 24. 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.
  25. 25. Features and Requirements Gathering
  26. 26. 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
  27. 27. Gherkin Syntax
  28. 28. Given-When-Then Cadence Consistent wording to describe a scenario Given this known situation When the user does something Then something happens
  29. 29. How These Help Developers Writing 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.
  30. 30. Tools Behat (PHP) SpecFlow (.NET) Cucumber (Ruby, gherkin syntax) Cucumber-JVM (Java, including Android)
  31. 31. Design Draw out your understanding of the problem and your idea on how to solve it
  32. 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. 33. User Flows
  34. 34. User Flows (continued)
  35. 35. Wireframes
  36. 36. Wireframes.org Built in templates Wireframes, flow charts, etc. Runs right in the browser
  37. 37. Lucid Charts
  38. 38. Balsamiq
  39. 39. Pencil
  40. 40. How These Help Developers Wireframes 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.
  41. 41. Tools Balsamiq Mockups Pencil Wireframes.org Lucid Chart
  42. 42. Develop/Implement Write the application or script to solve the problem
  43. 43. 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
  44. 44. Sample Feature File
  45. 45. Generate Step Definitions
  46. 46. Generated Steps
  47. 47. How These Help Developers The 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.
  48. 48. Testing Make sure what you create is working as expected in order to solve the problem
  49. 49. 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
  50. 50. Heatmaps & Analytics
  51. 51. Heatmaps
  52. 52. Google Analytics Track information about visitors including: Time on site Pages visited Location Traffic source Browser usage
  53. 53. Feedburner Used for tracking RSS feed subscriptions Great for tracking people who read blogs in a feed reader
  54. 54. How These Help Developers Heatmaps 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.)
  55. 55. Tools Heat Maps Free Website Heatmap Generator ClickTale CrazyEgg ClickHeat Analytics Google Analytics KissMetrics Feedburner
  56. 56. Evolution/Finalize Run through what’s done and release it and improve upon it
  57. 57. Development is cyclical. Use these tools to improve your productivity and the quality of your work!
  58. 58. Additional Tools and Resources
  59. 59. Additional Tools and Methods in UX Field Research Interviewing User Tests Usability Accessibility Copywriting Graphics Design UI Design
  60. 60. 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
  61. 61. Any questions?

Notas do Editor

  • This talk is being delivered at CodeMash 2015.
  • 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

×