---
tags: ACIT-2811
---
<style>
.markdown-body h1:first-of-type {
margin-top: 24px;
}
.markdown-body h1 {
margin-top: 64px;
}
.markdown-body h1 + h2 {
margin-top: 32px;
}
.markdown-body h2 {
margin-top: 48px;
}
.markdown-body h3 {
color: goldenrod;
}
.exercise {
font-size: 150%;
font-weight: bold;
color: rgb(227,112,183);
}
.note {
color: red;
}
</style>

# ACIT 2811 - Session 4

### User Flows

User Flows describe the set of steps needed to complete a task within a product. By creating diagrams that illustrate how a user moves through a product, we can identify navigational dead ends, determine (and optimize) the number of steps needed to accomplish a goal, and illustrate the different paths a user can take based on decisions they make on their journey.

User Flow diagrams consist of a small step of symbols used to denote start and end points (circles), actions (rectangles), conditions/decisions (diamonds), and arrows to connect the steps.

<br>
<img src="https://assets.justinmind.com/wp-content/webp-express/webp-images/uploads/2020/08/user-flows-paths-information-architecture.png.webp" style="width:100%; margin:0">
<br>
<br>
<br>

### Wireframes

Wireframes are simplified outlines of the layout, content, and User Interface elements of your product. They allow you to tie together and visually represent all of the research done prior to coding: Information Architecture, User Flows, and User Stories.

Initially, wireframes are _low-fidelity_, meaning that they:
- Contain placeholders for where text and images will ultimately be placed
- Use default fonts
- Do not use color

<br>

These low-fidelity wireframes are ideal for user testing because participants can focus on functionality rather than the visual look and feel of a product.

<span class="exercise" id="ga2">Group Assignment: User Flows and Low Fidelity Wireframes</span>

In your Project Group, create User Flow Diagrams that detail each step (beginning to end) of two selected User Stories created in the previous class. <span class="note">Each diagram must include at least one condition/decision, and show the divergent paths taken based on the outcome.</span>

Additionally, create Low-Fidelity Wireframes in Figma for all the pages necessary for the chosen User Flows. Copy and paste any necessary UI elements, and add any text necessary to provide context.

Note that you do not need to create wireframes for different devices – choose _either_ desktop _or_ mobile for your layouts.

<span class="note">Submit a pdf/image file to the Learning Hub containing your User Flow Diagrams and Low-Fidelity Wireframes before the beginning of the next class.</span>

<!-- ### Further Reading

* [Usability Heuristics](https://www.nngroup.com/articles/ten-usability-heuristics/)
* [User Testing](https://www.nngroup.com/articles/usability-testing-101/) -->

## Tasks To Complete Before Next Class

- [ ] Complete [Group Assignment](#ga2)
<!-- - [ ] Complete the readings listed above under [Further Reading](#Further-Reading) -->