SketchFlow is User Interface prototyping software included with Microsoft Expression Blend.  The tool is used to build simi-functional user interfaces to be reviewed by both team members and by end users (or clients).

This article will discuss how a “reviewer” (you) can create and submit feedback to the “author” of the SketchFlow User Interface prototype.  The article will walk the “reviewer” through the steps they may take and the tools at their disposal to present their feedback to the “author”.

When you, the “reviewer”, are asked to comment on a SketchFlow User Interface Prototype, you will be sent a URL that links you to the page.  This will load a Silverlight application to allow you to view and navigate within the Prototype as well as give your feedback.

You may also play with the prototype discussed in this article here: http://208.44.217.6/LeavingFeedback/.

Site Map

The first place you should look is at the Site Map by clicking the Map tab.  This will give you a view of all the pages in the Prototype and how they link to each other.

From within the Map tab, you may zoom and navigate through the Site Map with your mouse.

Navigation

There are many ways to Navigate through the application (as you can see by all the Orange arrows below).

To move between screens, you can:

• Click the buttons directly on the page, like the Submit button above
• Double click on any page in the Site Map to go directly to that page
• Any pages linked directly to this page will appear in the Navigate tab.  You may click them directly to go to the page.
• There is a browser address bar control in the very top left.  This allows you to go backwards, forwards, and return to the home page.

Using the Prototype

The prototype is semi-functional.  Meaning that many controls will work as you expect, yet it is not connected to any backend database.  This still gives you the opportunity to get a general idea of the feel of the site. More importantly, it gives you the opportunity to navigate throughout the site, ensuring that screens flow together smoothly and users will never be stranded anywhere.

“Author” Annotations

Back to the Feedback tab, you will notice a series of buttons.  Let’s start with the Annotations button.  The “Author” has the opportunity to annotate throughout each page.  Displaying these annotations can be toggled by the Show or hide annotations button.  When turned on, the annotation will appear as a yellow sticky note with the author’s initials as the title.

The “Author” should leave these on almost every page, adding additional details about the intent of the page that could not be conveyed properly in a User Interface alone.

Clicking the annotation on the screen will expand it to show the note the “Author” left you.  Clicking the dark yellow bar on the annotation again will collapse it.

Feedback

Textual feedback can be left by clicking in the bottom left box.  Each feedback is specific to the page it is left on.  I recommend you number your feedback; this will come into play on the next screen.

The Pen tool works just like MSPaint.  Click the tool, choose your color and size, and draw away.  Remember where I said on the last screen to number your feedback?  Well if you’re anything like me you’re going to have a hard time trying to write words with your mouse that people will be able to read (see my example below).  By numbering your feedback, you can match it to your drawing to make it easier to get your point across.

The next tool in the list is the highlighter.  It does exactly what you expect.

The final tool in the list is an eraser.   Yep – you guessed it.  :)

Sending your feedback to the “Author”

Once you have given your feedback on all the pages of the site, select the folder icon and choose to Export Feedback…

A new window will appear where you can type in your information.  This allows the “Author” to know who is providing the feedback.

A save window will appear.  Name your feedback and save the file to your computer.

Now just email that file to the “Author”.

The “Author” can integrate your file into his project and turn on a layer that shows each person’s feedback.  The “Author” can then make the necessary adjustments and post a new version of the project.

Conclusion

The feedback system built into SketchFlow is a great asset, enough so that it has caused me to switch to SketchFlow as my primary Wire Framing application.

If you have any questions about leaving feedback in SketchFlow, please don’t hesitate to email jbourg@wddinc.com and ask!

Thanks for reading and leaving feedback.