---
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;
}
.lg {
color: gray;
font-size: 120%;
}
.heuristic {
color: green;
}
.ux-laws {
display: grid;
grid: auto / 1fr 1fr;
column-gap: 10px;
}
input:checked + span {
text-decoration: line-through
}
</style>

# ACIT 2811 - Session 5

### Usability Heuristics

A Usability Heuristic is a rule-of-thumb that helps designers solve a problem quickly and efficiently.

For example: imagine you are designing a website and need to make a decision about where to put the link for users to log in. Instead of conducting user research and considering every possible scenario - each with their own potential benefit and drawback - use a heuristic:

<span class="lg">Follow platform and industry standards (a.k.a. <span class="heuristic">Consistency and Standards</span>)</span>

If we follow industry standards, we know to place the log in link at the top right-hand corner of the page where users are accustomed to seeing it, and we have quickly solved the problem.

The Neilsen Norman Group defines 9 other Usability Heuristics:

<span class="lg heuristic">Visibility of system status</span>
Communicate and provide feedback quickly, clearly, and regularly to users

<span class="lg heuristic">Match between system and the real world</span>
Use natural language, and logically order information and user interface elements

<span class="lg heuristic">User control and freedom</span>
Give users an easy way to cancel or redo any action

<span class="lg heuristic">Error Prevention</span>
Prevent user errors by providing good defaults and constraints

<span class="lg heuristic">Recognition rather than recall</span>
Minimize memorization by making information visible

<span class="lg heuristic">Flexibility and efficiency of use</span>
Allow for customization, personalization, and shortcuts

<span class="lg heuristic">Aesthetic and minimalist design</span>
Don't distract users from their goals with unnecessary information/design

<span class="lg heuristic">Help users recognize, diagnose, and recover from errors</span>
Use conventions for error messages, avoid technical jargon, and offer solutions

<span class="lg heuristic">Help and documentation</span>
If necessary, provide helpful (and searchable) information when it is needed

### User Testing

User Testing - asking a user to perform tasks in a user interface and recording their actions and feedback - helps identify:

1. Problems with the interface and/or user flow
2. Opportunities for improvement in the design
3. User behaviours and preferences

Thursday you will have an opportunity to conduct user testing in order to potentially refine and improve your product.

<span class="exercise" id="ga3">In-Class Group Assignment: User Testing</span>

Begin by writing down your two user flows in the form of a prompt for a test subject. For example:

<i>"You have a final exam coming up. Please show me how you would check your calendar for the date and time of your exam"</i>

or

<i>"Please show me how you would find a low-calorie meal and add it to your cart"</i>

Once you have your prompts defined, spend some time going over the usability heuristics above and identify <b>all the heuristics</b> that apply to your existing prototype.

For each heuristic that you identify, write minimum of 1-2 sentences explaining how your design/re-design satisfies this heuristic. For example: <span class="heuristic">Flexibility and Efficiency of Use</span> has been improved by allowing users to filter out all the calendar events unrelated to their course.

In addition, familiarize yourself with the [Laws of UX](https://lawsofux.com/) and see if there are any last-minute usability improvements that can be made. In particular, focus on the following laws:

<div class="ux-laws">





</div>

Finally, prepare the necessary wireframes for each user flow by exporting each step as its own .pdf file. Once your wireframes have been approved by your instructor, they will be printed out on paper so that they can be viewed one at a time by a user.

Once your prompts are defined and your paper wireframes are ready, we will begin assigning users to come to your group for as many rounds as possible of user testing.

For each round of testing, one member of your group must assume the role of <i>Facilitator</i> (asking prompt, replacing paper screens as necessary) and at least one other member must assume the role of <i>Researcher</i> (recording feedback from the user, observing and documenting user behaviours/mistakes).

All of the observations you make over the several rounds of testing must be included as part of your submission.

<span class="note">For this group assignment, submit a pdf file to the Learning Hub containing your prompts, sentence(s) on heuristic(s), and observations. Additionally, zip up and submit your exported .pdf wireframes for user testing.</span>

### Ground Rules for User Testing

1. The facilitator must not influence the user, or tell them what to do. A facilitator simply provides the necessary wireframes and prompt, and answers user questions if necessary
2. The user must verbally indicate what they are doing at each step, and inform the facilitator when they a) feel they have completed the task or b) feel that they are stuck and cannot continue
3. The user must also 'perform' any necessary actions on the paper wireframe, e.g. touch the link they want to click
4. The researcher(s) must record the name of the user, and unbiased observations of all user behaviours, successful and unsuccessful.

Each round of user testing will last approximately 15 minutes. Once a round is complete, users will return to their groups and roles will be re-assigned before continuing on to the next round. Each member of the group must perform at least two different roles. If you are in a group of 3, you may need to perform a role multiple times.

### Further Reading

* [Intro to Color Theory](https://www.colorsexplained.com/color-theory/)
* [Typography Primer](https://creativecloud.adobe.com/discover/article/typography-101-a-crash-course-of-terms-to-know)

## Tasks To Complete Before Next Class

- [ ] Complete the readings listed above under [Further Reading](#Further-Reading)

Quiz (Thursday) on the Learning Hub will be based on todays material