Building a StackOverflow inspired Knowledge Exchange - Sitemap and wireframes with Expression Blend 3 and SketchFlow Part 4

In this article we will take a look at some team collaboration aspects of SketchFlow in the form of getting feedback from the users of our prototype. Then we will build a reusable component for our header and navigation controls that all of the screens in our project can use.

The Stack Overflow Inspired Knowledge Exchange Series

TOC Checkout the project homepage of this series to follow our journey from the creation of the famous StackOverFlow website.

Introduction

In the previous article we created our first SketchFlow project. We discussed how to get our project up and running by creating a site map. Then we created some initial design aspects to create the header of our site. Next we took a look at what SketchFlow has to offer in the way of working with the prototype by running our project in the SketchFlow player.

In this article we will take a look at some team collaboration aspects of SketchFlow in the form of getting feedback from the users of our prototype. Then we will build a reusable component for our header and navigation controls that all of the screens in our project can use. Once we have a header throughout our entire project we will then implement navigation in our top and primary navigation buttons. Then we will create the guts of a couple of pages to show how easy it is to quickly mock up a page. And finally we will discuss managing the various states of a page with SketchFlow's state management tools.

Getting Feedback

Now that we have gotten this far I think it would be a good time to mention some other aspects of SketchFlow that are useful while building a prototype. Mainly I am referring to the collaboration aspects of SketchFlow. To see this hit F5 and run the site in your browser window. While in the browser window you will see a feedback window in the lower left corner. In the feedback window you can leave text based notes or you can draw directly on the screen. Each set of feedback is specific to the screen that you are looking at. Once you have left feedback you can then save it out to a feedback file (by clicking the folder in the upper right of the feedback panel) and send it to the creator of the prototype.

When you have received a feedback file you can then load it into your Expression IDE. Do this by clicking on the plus sign in the upper right of the feedback panel in SketchFlow. Then in the open file dialog box you can locate the .feedback file.

Once you have a feedback file loaded you can then see the feedback for a given screen. If you don't see the ink in your feedback (in my case the big red arrow) you can click the light bulb in the upper right of the feedback panel to show ink.

Another good way to further enhance collaboration is with annotations. An annotation is like a sticky note that the designer can leave for the reviewers or users of a prototype. To leave an annotation go to the tools menu and select create annotation. Then you can fill in your remarks. Once you have created an annotation hit F5 and run your project again. Once you have loaded your project you won't initially see an annotations. Mouse over the chat bubble in the feedback window to show or hide annotations. This won't fully expand the annotation but instead will show where an annotation is on the screen. From there you can choose to expand the annotation by clicking on it.

This may lead you to wonder how you share a prototype with someone. There are a few ways for you to do this. You can deploy your prototype as a normal website for all to see. Or you can package it up as a Silverlight application which can be redistributed to your users. Setting up the website is as simple as creating a new website in IIS and copying all of the required files to its root directory. Then you might want to set the TestPage.html file as your sites default file. To export the prototype to a packaged Silverlight application go to the file menu and select Package SketchFlow project.

I am saving my package to the desktop. Once the package is created I will have a folder with the same name as my project created with all the required files inside of it. Running the package is as simple as opening the TestPage.html file.

Creating a reusable component

Now that we have seen how to create our sitemap, some UI elements, and the ability to collaborate with others, we now need to further the capabilities of our prototype. The first thing that we want to take a look at is how to create reusable components. The first thing that we need to tackle is our top level and primary navigation. Let's get that to show on the top of each of our pages. To do this we will select all the items that we want to show in our header. Then we can right click on one of them and choose to make them into a component screen.

This will open the Make Into Component Screen dialog box. I called mine Header. There is an option to create a copy, but we don't want to do that. We want our selection to be replaced with our new Header component.

Once you do this you will then see a green Header component show up in your SketchFlow Map.

Now you can choose to link your component to your other pages by mouse hovering your component and selecting Insert a Component Screen. I did this for all of our pages. Once you have linked this component to all of your pages you will notice that the map is becoming cluttered with lines connecting everything. The makers of SketchFlow must have known that this would happen. They provided you with a couple of buttons to help you with this issue. They live in the bottom of the SketchFlow Map panel and are called "Show Component connections dimmed" and "Show Navigation connections dimmed".

Wiring up navigation

We now have a header on all of our pages. If you run the project you will see that you can use the Navigate panel to the left to move through each page. You will also notice two other aspects of our project, when you get to a page that is not the home page, the navigate panel is empty. Also you will see that none of our buttons work. They don't actually take you anywhere! Let's fix that now.

We are going to address this issue quickly by opening up our Header component. Then right click on a button and at the bottom of the context menu you will see Navigate To. In the Navigate To menu you will see all the screens that we have created. For each button choose the appropriate screen. The Questions button should link to the Questions screen and so on. Then run your application to see if your navigation works. Well...that was easy!

Filling in the details of a page

Mocking up a page with what you currently know is quite easy for 90% of the time. You simply add buttons and text to create the page. You may need to modify the background color of an area, or insert an image to add some required detail. It took me a minute or two to mock up StackOverflow's login page.

With this knowledge you can now mock up just about every page in the StackOverflow site to create a pretty much fully functional prototype. There are some cases however where a static screen just doesn't describe all of what is going on in a screen. To address those scenarios we will have to take a look at animation.

Creating states with animation

Let's take a look at StackOverflow's "ask a question" page. In this page we have the default layout. This shows a field to name the question, a WYSIWYG field to add the meat of the question, a field to add tags, etc. However, something really special happens after you have filled in the title of the question. A box appears listing all of the possible matches for the question you are asking. To capture this state change for this page we will need to look at the States window in SketchFlow (Windows->States).

Before we get too worried about states though mock up the default "ask a question" page as that is the first step to creating states. Here is the default view of the "Ask a Question" screen looks before we start playing with it.

Once you have mocked up that page we can then create a state group by clicking the "Add state group" icon in the upper right of the states panel. Name that state group "AskAQuestion". Then add a state to that group by clicking the "Add state" icon and name that state "Default". The default state will be the page in its current form. Then add one more state and call it "AfterQuestionTitleIsFilledIn". Once we have this we can modify the current layout however we wish and the new state will be recorded for us.

Once you have a couple of states defined in your page you will then need to worry how to connect user interaction with the state you defined. In most sites you might have a page with a button that does something. The something is the key to the state change. But with StackOverflow they are causing a state change when you tab away from a field. I have not yet found a way to trigger a state change simply by tabbing away from a question! (if you know how please leave a comment!) In this case I use a dirty hack in the form of a button in the place of a text field. They look the same in the editor short of the color change on mouse over.

Making sure that you are in the pre state change (or default state) you can right click on a button and select the Activate State option at the bottom of the menu. The select the state that you want to activate on that screen. Then run your project and view the results. Once you have states that can be toggled take a look around in your states panel. Notice that you also have transition effects in there. There is a default transition for all states in a group. There are also custom states that can be defined as you move from one state to another. This is not really appropriate here but might be elsewhere.

Design Documentation

A very nice aspect of using SketchFlow to generate your prototype with is that it is able to generate a good deal of design documentation for you automatically. To export the documentation go to the File and choose export to MS Word.

Once SketchFlow is done exporting the documentation you will end up with a pile of documentation. In this documentation you will find a table of contents (including pages for states), a table of figures, a flow map, and screen shots of every screen as well as any components that you created. See the attached PDF for a better idea of what is created.

Summary

In this article we took a look at some team collaboration aspects of SketchFlow in the form of getting feedback from the users of our prototype. Then we built a reusable component for our header and navigation controls that all of the screens in our project can use. Once we had a header throughout our entire project we then implemented a navigation in our top and primary navigation buttons. Then we created the guts of a couple of pages to show how easy it was to quickly mock up a page. And finally we discussed managing the various states of a page with SketchFlow's state management tools.