Thu, Nov 21
Documenting user experience
Today's objectives
Understand how to plan and document user flows, both at a conceptual and practical level. Discuss various other UX concepts.
- Review personas assignment
- Next steps
- UX tools, approaches and methodologies: why so many?
Tasks
Practice developing user flow skills.
Presentations
User flow
Agenda
Assignment
Assignment 10
User flow diagram
Create a user flow diagram for the "Citizen Science" project (described in assignment 9).
Consider how much detail you want to provide, and what problem you are trying to solve. Like wireframes, user flow diagrams can work at different levels of detail - high level objectives and tasks all the way to screen-by-screen detail. Choose what level of detail will best help you move to the next stage of the project, which could be a wireframe. (Don't develop a wireframe as part of this assignment.)
Make sure your diagram communicates clearly. Labels and organization are vital. Assume you are presenting this to teammates or client who are not familiar with the process. When in doubt, add explanatory tools - labels, titles, etc.
Name the assignment "assignment-10" and add a link to it from your main index page.
Due Wed, Nov 27, 6:00 PM.
Resources
UX Principles
- Laws of UX
- Laws of UX
- Wireflows
- https://www.nngroup.com/articles/wireflows/
- Journeys vs. flows
- https://www.nngroup.com/articles/user-journeys-vs-user-flows/
"Laws" might be too strong a word, but a good look at some basic UX and UI principles.
A hybrid of wireframes and flow diagrams.
Flow? Journey? When to use what.
Tools and techniques
- Omnigraffle
- A serious (and not cheap) too for drawing complex flow charts and other graphics.
- Figma
- https://www.figma.com/community/file/970968239557865113
User Flow Diagram Template for Figma
Planning and prototyping
- Site planning process
- https://www.printmag.com/editors-picks/phases-of-the-web-design-process/
Tasks for next class
Make sure to prepare for each lecture. If you have questions about code, have your (non-working) code ready to share in class.
For next class:
- You may wish to find a specific tool for designing the user flow diagram - share any results on #assignments.
Professional practice
Being familiar with a range of planning and prototyping tools is vital. Don't forget about paper, whiteboards and other low-tech tools. Nothing is as immediate as picking up a pen and sketching.
Need help?
Contact me - Slack is best.