Learn how to prototype web and mobile apps

How to review a shared prototype

When you select the prototype (by clicking on its name) in the prototypes page of your online account, or in the prototype link in an invitation email, you will be taken to the page below, which is used to browse and review a prototype.

Review a shared prototype online

At the top of the page, you will find the Prototype controls:

1) Prototype and current screen name.

2) Highlight interactive areas: click this button to make interactive elements flash. You can also use the dropdown to look for a specific kind of event (click, double click, etc…).

3) Comment mode switch: switch it ON to make comments on the prototype and OFF in order to navigate it.

4) Open right panel: click this icon in order to open the right panel.

5) User profile: click here to change your profile picture or the name other users will see when you add a comment.

6) Screens list: this is the list of the prototype’s screens. Click on a screen name to navigate directly to it.

7) Mobile device simulator controls: these controls are only visible when the prototype is a mobile app prototype. If you click on “Rotate“, the simulator will rotate from a landscape to portrait display and then revert back to its original display. The “Gestures” drop down allows you to select which gesture you want to use (one finger, two finger pinch or two finger rotate). Finally, the Zoom lets you modify the size of the simulator.

Review a shared prototype online

When you switch on the Comment mode (1), you will be able to make comments on the prototype. The red “bubble” indicates the number of comments that have already been made on the prototype.

In order to comment on a prototype, just click anywhere within the prototype display. The comment dialog box (2) will pop up. You will then be able to write a comment, as well as attach a file. Click ADD to save the comment.

If you want to see a comment, click on any green circle on the prototype that contains a number (3). If the corresponding comment is not in the current screen the prototype will navigate to the appropriate one. When you open an existing comment, you will be able to see who added it and at what time/date (4). You can also reply to a comment (5). If you are the comment author you may edit or delete it as well.

Next tutorial> How to integrate prototypes with usability testing tools

Account Management – FAQs


Related tutorials: