The Case for the UX Developer
1 like997 views
The document discusses the importance of user experience (UX) in software development, emphasizing that understanding users' needs and expectations is crucial for creating functional and appealing products. It covers the role of personas, feature gathering, wireframes, and analytics in designing software that resonates with users. Additionally, it highlights various tools and resources that can assist developers in improving UX through research, testing, and design consistency.
The Case for the UX Developer
- 1. The Case for the UX Developer Sarah DutkiewiczCleveland Tech Consultingsarah@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.
- 10. All About the Users
- 11. Taken from What comes after usability? (Kathy Sierra)
- 12. Questions to Think About Who are our users? What types of users will we have? What are our users expecting to get out of this software? What does this need to do in order to meet the users’ expectations? How can we design this so that it’s easy for the user to accomplish their goals?
- 13. XKCD 773 –University Website
- 14. Personas
- 15. What are personas? Fictional characters based on real users Composites of research Usually presented in 1-2 page documents
- 16. Personas José Business Owner Irene Older Resident Sarah Younger Resident
- 17. 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?
- 18. 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?
- 19. 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?
- 20. How These Help Developers Assigning personas to screens helps us to make sure the functionalityis designed appropriately. Sometimes, developers become empatheticwith the personas, putting themselves in the personas’ positions. This helps them to realize flows easier.
- 21. Features and Requirements Gathering
- 22. 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
- 23. Gherkin Syntax
- 24. Given-When-Then Cadence Consistent wording to describe a scenario Giventhis known situation Whenthe user does something Thensomething happens
- 25. How These Help Developers Consistency –we love this! English words map to programming language tests.
- 26. Tools Behat (PHP) SpecFlow (.NET) Cucumber (Ruby, gherkin syntax) Cucumber-JVM (Java, including Android)
- 27. Wireframes
- 28. Wireframes.org Built in templates Wireframes, flow charts, etc. Runs right in the browser
- 29. Balsamiq
- 30. Pencil
- 31. How These Help Developers Allows rapid sketching of visuals to help communicate ideas better Allows clients to sketch out their vision in times when the developer cannot picture it
- 32. Tools Balsamiq Mockups Pencil Wireframes.org
- 33. User Flows, Mind Maps, and Site Maps
- 34. User Flows
- 35. Mind Maps
- 36. Site Maps
- 37. Site Maps
- 38. How These Help Developers Plan a website site map to gauge the scope of the website. Useful for seeing how to organize features for releases. Helps to see how the users plan on incorporating the software into their routines.
- 39. Tools Mind Maps Xmind Freemind Flows Dia Site Maps Balsamiq
- 41. Heatmaps
- 42. Google Analytics Track information about visitors including: Time on site Pages visited Location Traffic source Browser usage
- 43. Feedburner Used for tracking RSS feed subscriptions Great for tracking people who read blogs in a feed reader
- 44. How These Help Developers Identifies how the site is getting used Identifies types of environments the site is being visited Identifies who is reading in a feed reader
- 45. Tools Heat Maps Free Website HeatmapGenerator ClickTale CrazyEgg ClickHeat Analytics Google Analytics KissMetrics Feedburner
- 46. Additional Tools and Resources
- 47. Additional Tools and Methods in UX Field Research Interviewing User Tests Usability Accessibility Copywriting Graphics Design UI Design
- 48. Additional Resources All About UXUX for the masses -25 great free UX toolsMSDN -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