Prototyping in HCI at Chapman

Feb 18, 2020

Tools

There are a great amount of tools for prototyping and user testing. This tutorial is focused on Figma and Maze.

Figma (https://www.figma.com/) is an in-browser prototyping tool that offers powerful functionality for creating designs and for collaboration. Like Google Drive, team members can be added to a project and everyone can edit it or add comments.

Maze (https://maze.design/) integrates with Figma and other prototyping tools to create remote user tests. You can ask specific questions and see where people clicked on your app.

Creating features

Consider the main things that your app will do. These are your main screens and should be based on the card sorting exercise. This is how you will create your horizontal prototype.

To design in Figma, begin by selecting the Frame tool under “Region Tools” in the upper left corner. Once you select the Frame tool, the menu on the right of the window should show size options (i.e. iPhone 8, iPad mini, etc.). Make sure all of your screens are in a Frame and that they are all the same size.

After creating frames, you can begin designing by using the Shape tools to create things like buttons. Figma is a very powerful design and wireframing tool, search on https://help.figma.com/ if you’re not sure how to do something.

The goal of creating a prototype is to be able to test the concept and usability of your app; you are not trying to make the perfect design. To help you save time, there are places you may find free UI kits, such as https://www.figmafreebies.com/, where you can copy-and-paste things like buttons and keyboards.

Functionality

To be able to do in-depth testing, you may have to add functionality by creating a vertical prototype. This will include screens in-between your features that allows it to work.

Once you are done designing, you can add functionality to make links between frames, giving the appearance of a live app.

In the menu to the right of the screen, select “Prototyping” at the top. Now when you click on a shape, a circle should appear on its right edge. Click and drag this circle to a different frame. See how your interactions work by clicking on the “play” button in the top right corner.

For an in-person user test, you can use this play screen Figma.

User testing

A user test can be used to confirm your assumptions, show how successful your digital affordances are, and gather insight into users’ expectations. During a test you give a user a task, pay close attention to how they complete it, and ask follow-up questions. For the tasks, consider what the most important functions of your app are or what areas in it might seem confusing.

To create a remote user test, you can upload your link from Figma. Go to https://maze.design/ and follow the site’s instructions for “Where to find your public Figma URL.” When you add your link, you can start to create your project.

You can add “blocks” and start with a Mission block. This is where you assign a task to the person taking the test. Use the description to explain the goal that they need to accomplish. Under “Expected Path(s)” you select what screens you expect them to navigate to.

You can also add a variety of other blocks for questions and context.

Once you’re done creating your project, click “Start Testing” in the upper right corner and start sharing the link. Maze allows you to gather great data for your prototype, both quantitative and qualitative. The mission blocks show you heatmaps (where people click the most), misclicks, and different paths, giving you clear indicators of the success of your design.

As you analyze this information, it’s easy to return to Figma and make adjustments. Once you do this, you can return to your Maze project and, as long as the link is the same, create a new test to send out.

Happy prototyping!