Prototyping 101: User Research

Introduction

This article is a part of Prototyping 101 workshops and provides materials to follow workshops.

In this part, we will work on empathising with potential users through creating Persona, Goals and Task Scenarios.

User Research

Try to find data about potential users on the Internet, use sources such as Statistic Norway, Eurostat, etc.

Help questions:

1. Who are the users?
2. Can the design depend on language?
3. Can she/he easily reach all buttons?
4. Can design depend on colour coded information?
5. In which conditions the app will be used?
6. What devices could be expected?
7. Would all of the users’ attention be on the application or will they use the app while performing other activity?

Persona & The Persona Spectrum

Persona is a portrait of your users. Your team is trying to predict the skills, characteristics, problems of the potential users. Some of the design decisions should be a result of empathising with the representation of your users — Personas.

Microsoft Team, which works with Inclusive Design, has prepared Support Cards to help designers to empathize with their application potential users. These Support Cards focuses on:

• Physical Context
• Social Context
• Temporary/Situational Limit
• Role of Technology
• Example of mismatch
• Conditions
• The Persona Spectrum

Task: Based on the Support Cards, identify the relevant design challenges among the categories below, create Personas that include all the identified challenges.

Figure 1: Inclusive A Microsoft Design Toolkit Support Cards: Source: https://www.microsoft.com/design/inclusive/

Figure 2: Inclusive A Microsoft Design Toolkit Support Cards:Source: https://www.microsoft.com/design/inclusive/

You can create Personas in preferable Design Tool such as Figma/Adobe XD or simply edit Resume Template available in Microsoft Word.

Example of Persona with focus on Support Cards. Template adapted from https://www.figma.com/resources/assets/user-persona-template/

Task Scenarios

This task will prepare you to create a design with a thought of completing the user goal and future evaluation of your design.

Now your group should define three main goals of your users and create task scenarios.

Task: Prepare goals

Marieke McCloskey member of the Nielsen Norman Group prepared a guide to Goals ad Task Scenarios which we will follow during the workshops:

“Before you can write the task scenarios used in testing, you have to come up with a list of general user goals that visitors to your site (or application) may have. Ask yourself: What are the most important things that every user must be able to accomplish on the site?

For example, nngroup.com users must be able to accomplish 3 main goals:

1. Find articles on a specific topic
2. Sign up for UX Week seminars
3. Learn about our consulting services”

Task: Prepare Task Scenarios

The Nielsen Norman Group advice that Task Scenarios should be realistic, actionable and avoid being too descriptive or giving the clue how to solve the task.

“A task scenario is the action that you ask the participant to take on the tested interface. For example, a task scenario could be:

You’re planning a vacation to New York City, March 3 − March 14. You need to buy both airfare and hotel. Go to the American Airlines site and jetBlue Airlines site and see who has the best deals.

Task scenarios need to provide context so users engage with the interface and pretend to perform business or personal tasks as if they were at home or in the office.”

More examples of Task Scenarios:

Realistics tasks:

“User goal: Browse product offerings and purchase an item.
Poor task: Purchase a pair of orange Nike running shoes.
Better task: Buy a pair of shoes for less than $40.”

Notice that an example of “poor task” defines details such as colour (orange), brand (Nike) and type (running) which might not be natural for the user on which you will be testing the design.

Actionable tasks:

“User goal: Find movie and show times.
Poor task: You want to see a movie Sunday afternoon. Go to www.fandango.com and tell me where you’d click next.
Better task: Use www.fandago.com to find a movie you’d be interested in seeing on Sunday afternoon”

Tasks without clues:

“User goal: Look up grades.
Poor task: You want to see the results of your midterm exams. Go to the website, sign in, and tell me where you would click to get your transcript.
Better task: Look up the results of your midterm exams.”

Useful links from the presentation:

• Accessible colour examples: http://clrs.cc/a11y/
• Colour contrast checker: https://webaim.org/resources/contrastchecker/
• https://medium.com/@aniWeyn/prototyping101-wireframes-in-figma-54297215d693
• 10 Usability Heuristics https://www.nngroup.com/articles/ten-usability-heuristics/
• www.figma.com
• https://www.adobe.com/pl/products/xd.html
• https://hadron.app/
• https://www.modulz.app/