Tutorial 16 - Review and Commenting

When going through Maqetta's tutorials, it is suggested that you have two side-by-side browser windows open, one showing the tutorial, and the other where you run the application and perform the steps listed in the tutorial.

This tutorial introduces Maqetta review and commenting feature, where an author can share his sketch or prototype with colleagues, who can then provide feedback via forum-style comments and/or on-screen annotations.

1. ⇒ On the main menubar, choose the Create -> Review... command. The following dialog should appear:

Click on the image to enlarge it.

As you can see, the New Review dialog is a 3-pane wizard. In the first pane, you enter general information about the review session.

2. ⇒ Enter "Tutorial review 1" as the title of your review, and enter some text such as "Trying out Maqetta review/commenting tutorial" in the Description field.
We will accept default values for Window Size and Due Date for the time being.
3. ⇒ Click on the "Next" button to go to the Select Review Files pane:

Click on the image to enlarge it.
4. ⇒ Notice the red-colored text in the lower-left corner of the dialog: "No files selected yet"
5. ⇒ Click-select one of the tutorial files you created in previous tutorial sessions (either TutorialSketch.html, TutorialMobile.html or TutorialDesktop.html). Then click on the right arrow icon so that the selected files shows up in the right-side list. Your screen should now look like this:

Click on the image to enlarge it.
Notice that the red-colored comment at the lower-left of the dialog has changed and now says "No reviewers selected yet" because you have now selected at least one file.

Note that you can also add files to the right-side list by double-clicking on the filename from the left-side list.

The current release of Maqetta only supports review/commenting on HTML files that were created in Maqetta. Future releases might allow review/commenting of other file types, such as images, SVG files, source files or themes.
6. ⇒ Click on the "Next" button to go to the Select Reviewers pane:

Click on the image to enlarge it.
7. ⇒ This is the pane where you list the emails of your colleagues that you want to review and provide feedback on your sketch or prototype. For this tutorial, you will only invite yourself: enter your email address into the type-in field and then click the "Add" button:

Click on the image to enlarge it.
Notice that the red-colored comment at the lower-left of the dialog has disappeared because you have now selected at least one file and at least one reviewer.
8. ⇒ Click on the "Publish" button to send review invitations to all of the reviewers (which in this case is just yourself).

What happens next depends on the installation of Maqetta that you are using. If you are running Maqetta at Maqetta.org or off of another server which is email-enabled, then a review invitation email will be sent to your email address.

Subject: Maqetta Review Invitation: Tutorial review 1
john@example.com has invited you to review the page.
Description: Trying out Maqetta review/commenting tutorial
Click on the Review Link below to enter Maqetta's review and commenting module. If you haven't registered yet with Maqetta and/or are not currently logged into Maqetta, you may need to go through a registration and/or sign-in process before you can start reviewing. If so, you may need to click on the Review Link below once to go to the login and/or registration pages, and then once logged in, you may need to click on the Review Link again.

Review Link: http://yourserver/maqetta?reviewDesigner=B&reviewVersion=2012-11-09T22:23:01Z

Reviewers will receive an email invitation, and then can simply click on the link in the email. Maqetta will open up in a browser window, and (after potentially registering and/or logging into the server) the reviewer can start adding review comments to the sketch or prototype.

Note, however, if you are running a local install of Maqetta or running off a server that is not email-enabled, then the review invitation email will not be sent and Maqetta will post a warning dialog, which is OK for the purposes of this tutorial.


Click on the image to enlarge it.
9. ⇒ Note that, after you clicked "Publish", Maqetta has opened a "review editor" so that you can will see the same thing that your reviewers will see when they click on the email link.
10. ⇒ Click on the review editor's close button - - to close the review editor.

1. ⇒ Click on the large "Reviews" icon on the far left of the application to expose the Reviews palette. This palette shows the list of review sessions which either you initiated or to which you have been invited. You should see the review session you just created. Click on the "+" icon to the left of the review session to expand its content so that the HTML file(s) from the review session are visible.

Click on the image to enlarge it.
2. ⇒ Double-click on the HTML file (e.g., TutorialSketch.html) to open the review editor for that file. Your screen should look something like this:

Click on the image to enlarge it.

Note the various parts of review editors:

• The center of the screen contains the sketch or prototype on which the author is requesting feedback.
• The yellow bar at the top reminds reviewers that the HTML page shown on the canvas is a live application that actually runs, and that the review can interact with the page either by using the mouse and keyboard on the canvas. They can also switch between application states or mobile views using the Scenes palette. (We'll try these features out subsequently in this tutorial.)
• The Comments palette at the top is where reviewers can provide textual feedback and/or graphical annotations on the canvas.
• The Scenes palette allows reviewers to step through any of the HTML page's custom application states and/or mobile views.

Reviewers can interact with the HTML page in two ways:

• They can actually run the application directly on the canvas (e.g., click on buttons).
• They can switch states and mobile views in the Scenes palette.

1. ⇒ Try interacting with the application directly on the canvas. If your review session is TutorialSketch.html, click on the "Show dialog" button, the radio buttons and the Close box. Notice how the application is actually running. But also notice that as you click on things on the canvas, the eyeball in the Scenes palette changes.
Maqetta's review/commenting feature makes sure that the canvas and the Scenes palette reflect the same value for current application state.
2. ⇒ Now click on different states (or mobile views) in the Scenes palette. Notice that the canvas changes as you walk through the various states (or mobile views).

Now we will add some review comments and annotations.

1. ⇒ In the Scenes palette, make sure that the initial state or mobile view is showing. (For TutorialSketch.html, that would be the Background state).
2. ⇒ Click on the "+" icon at the top of the Comments palette. The Comments palette should look like this:

Click on the image to enlarge it.
3. ⇒ Enter "Nice UI!" as the Subject and "but a little sparse" in the Comment area. Then click "Submit". Your screen should look like this:
A review comment is not added to the review until the user clicks "Submit".

Your screen should now look like this:


Click on the image to enlarge it.

Note the following things:

• Each comment shows the reviewer who submitted the comment.
• Comments (and annotations) are color-coded. Each reviewer gets his own color.
4. ⇒ Click on the "+" icon again at the top of the Comments palette. For Subject, enter "What do these two buttons do?". (Don't click Submit yet.)
5. ⇒ Click on the arrow icon on the toolbar just above the "Subject" line. Go to the canvas and drag out an arrow that goes from the middle of the canvas to the "Second button" button. Then click on the rectangle icon on the same toolbar and drag out a rectangle that surrounds both the "Second button" button and the "Third button" button. Finally, click on the text icon on the same toolbar. Drag out a rectangle about 70px by 70px at the bottom of the arrow. In the text box, enter "what are these for?" Your canvas should look something like this:

Click on the image to enlarge it.
6. ⇒ Now click on the Submit button.

1. ⇒ In the Scenes palette, click on the "Show image" state. The Rectangle with its children (e.g., Line, Text, RadioButtons, Close icon and Image) should become visible.
2. ⇒ Click on the "+" icon again at the top of the Comments palette. For Subject, enter "Nice clouds!". Click on the arrow icon above the Subject line, then drag out an arrow that points at the clouds on the image. Click on the Circle icon above the Subject line and drag out a circle around the clouds on the image. Click Submit.

Click on the image to enlarge it.
3. ⇒ In the Scenes palette, click on the "Show map" state. The map should be visible now.
4. ⇒ Click on the "+" icon again at the top of the Comments palette. For Subject, enter "I like Italy". Click on the arrow icon above the Subject line, then drag out an arrow that points at the map of Italy. Click Submit.

Click on the image to enlarge it.
5. ⇒ In the Scenes palette, alternately click on "Background", "Show image" and "Show map". Notice that the annonations are tied to specific states and are only visible in a particular state.

Previous / Next