Prototyping with Expression Blend 4

Many developers might have had an experience like this: You want to create an application, but don’t want to spend time writing a rather expansive design for it. You also don’t want it to end up being unusable, because you didn’t spend time thinking about things like a usable GUI.

Of course you can grab a pencil and draw the GUI on paper. These drawings have saved me quite a few times from building complete disasters, but I can imagine that you don’t want to do that, because it’s uncool. (Developers want cool stuff, right?). I have to admit that having the extra options a digital prototype offers is also a good reason not to use pen and paper.

In this article I will show you how you can use Expression Blend to create a prototype for your next application without the use of pen and paper and show you how you can make it interactive so other people can see and try it before you start building it.

A short introduction of SketchFlow

The basis for this article will be Microsoft SketchFlow, which is a feature of Expression Blend that offers a set of project templates and control templates that allow you to create prototypes without writing any code.

The best thing about it, is that it has a standard interface for users to view the prototype in. Users can also use this user interface to provide feedback about the prototype, which they can export and e-mail so you can view the feedback on your computer.

Setting up a basic application

The first step in creating a prototype is to start a new project in Blend 4. You can choose between a Silverlight SketchFlow project or a WPF SketchFlow project.

In the example I will be demonstrating how to build a prototype using a WPF SketchFlow project, but the process will be practically the same for a Silverlight SketchFlow project. I will be pointing out the difference between them, If there are any.

What’s available

Once you’ve created a new project you will get a basic SketchFlow project that contains one screen. On this screen you can draw any control in the toolbox, just as you normally would with a WPF or Silverlight application. There is however one limitation: You can’t use code (This shouldn’t be a major thing with a prototype, right?).

Aside from the fact that you can’t write code there’s also another interesting difference. Instead of the normal control theming you will get a sketchy looking theme. This adds to the feeling of a prototype and should give users the idea that it isn’t a final product, but more like a way to allow them to try things out before you build the application.

The layout of the designer is also altered slightly, to give you a more specific toolset for building the prototype. The following screenshot shows what’s available in the designer.

When you are building a SketchFlow application you will get a panel for SketchFlow animations. You can use this to create storyboard (The real thing, with different panels) animations to demonstrate certain features in the UI. You will also get a screen map panel that will allow you to define the navigation paths available to the user when they interact with the application.

Setting up the screen map

As I mentioned before you can use the screen map panel to define the navigation of your application. Each screen in the application is represented by a small rectangle in the screenmap. You can add new screens to the screenmap by selecting the “Create screen” button at the bottom of the screenmap.

Each screen you add to the screen will also be available as a control that you can design later on. You can double click a screen on the screenmap to open up the designer for that screen.

After you have created several screens, you can add connections between them by dragging lines from one screen to another screen. Alternatively you can hover over a screen and select the “Create a connected screen” option to add a new screen to the map and connect it to the existing screen immediately.

Screens that are connected on the screenmap can be navigated within the SketchFlow player by clicking on a connected screen in the list of available screens. I will show this a littlebit further on in the article. It’s also possible to make this navigation behavior a bit more natural by adding a behavior to controls on a particular screen.

Expression Blend 4 contains a behavior called “NavigateToScreenAction” that you can drop onto a control. After you added the behavior the a control you can select a screen to navigate to and an event that triggers the navigation operation. So for example if you add this behavior to a button, you can make the prototype navigate to another screen when the user clicks the button.

Component screens

Anyone who has worked with user experience models knows that a screen inside a user experience model usually is made up out of a screen component and optionally one or more forms. Expression Blend 4 does not use the term form, but you can do exactly the same thing as you would do when making a user experience model. In Expression Blend 4 however it will be a bit more graphic.

Component screens in Expression Blend 4 are a way of building subscreens. You can add them to the screenmap by selecting the “Create component screen” option or by hovering over an existing screen and selecting the “Create a connected component screen” option. The difference between them is that the latter one automatically connects the component screen to the existing screen. This option also adds the component screen as a user control to the design of the existing screen.

Storyboard animations

Screens and component screens in SketchFlow aren’t static. You can add animations to them either by adding a storyboard or by using storyboard animations. The last options is unique to SketchFlow.

A storyboard animation is different from a normal animation in that you can show different stages of the screen more easily using storyboard animations. When you create a new storyboard animation you will get a new filmstrip at the top of the screen that contains the current state of the screen. Expression Blend will also enable recording at this stage so everything you do will be animated when the storyboard animation is played.

All you need to do, to make an animation that shows several states of the user interface is to add multiple states to the storyboard animation. Each state before the last state of the animation will be displayed a preconfigured period of time that you can set in the textbox that is displayed when you hover over the state. It’s also possible to specify an easing function that is used when switching between states.

You can make use of the PlaySketchFlowAnimationAction behavior to trigger the created storyboard animation when a specific event occurs on a control. This is similar to what you can do when you attach the NavigateToScreenAction to a button.

Gathering feedback

One other important aspect of prototyping is the process of gathering feedback about your prototype. Gathering feedback helps you improve on your work by incorporating suggestions of others.

Creating a review package

The process of gathering feedback starts by sending the prototype to potential users. When you are done creating a prototype you can use the “Package SketchFlow Project” option in the file menu to grab all the parts of the project and place them in a directory so you can zip them up for shipment.

Packaging a project creates a new directory with a runnable version of the prototype and all the runtime assemblies needed by SketchFlow.

Leaving feedback for the developer

After users have received the package containing the prototype they can start it and begin reviewing it. The prototype is completely interactive, so they can click buttons and navigate around.

The user can use the prototype to check out your ideas and see if you’re moving in the right direction with things. When he sees something in the prototype that isn’t correct or allows for improvement the user can mark it using any of the tools available in the review box that can be found in the bottom-left corner of the screen.

The user can either type in a comment or draw using the ink annotation tools. There’s even an option to show or hide the annotations that were made earlier.

To switch between screens the user can either make a selection on the left or click a button and hope for the best (He might be lucky, maybe you have hooked up behavior to some of the buttons).

Exporting feedback

Finally when the user is done reviewing the prototype he can select the folder icon in the bottom-left part of the screen and choose export feedback to export the feedback provided to disk.

This will create a feedback file that can be e-mailed to you so you can incorporate it into the prototype.

Combining the feedback of several users

When you have received feedback from your user base and want to take a closer look at it so you can improve the design, you can choose to add the feedback to the designer by importing the files received from the users into Expression Blend.

Before you can see the feedback of your users you will need to open up the Feedback panel in Expression Blend 4. This panel can be find among the other panels in the Window menu.

To import feedback received from a user you need to click the plus sign and select a file to import into Expression Blend 4. Once imported it will be added to the list of feedback files in the screens project and show up in the feedback panel.

The important thing to keep in mind is that feedback doesn’t show up in the feedback panel if there isn’t feedback for the specific screen that you’re working on in the center panel. A good method to see if there’s feedback on a particular screen, is to take a look at the screenmap. Screens with feedback will have a lightbulb attached to them.

Expression Blend will automatically show the feedback items in the feedback panel when you open a screen that has feedback items attached to it. If there are any ink annotations they will be shown on the control itself. You can disable this behavior by clicking the eye icon in the feedback panel.

The cool thing about the feedback mechanism is that fact that you can make several versions of the prototype. Feedback items will be linked to a specific iteration, so you can show or hide items from previous iterations. This allows for a process where you can go over a screen several times before converting it into a real screen for the final application.

Conclusion

Using SketchFlow you can focus on the prototype and make it interactive so users can see what’s going to happen when they work with the GUI, while still providing the right amount of agility to build it fast and cheap.

You can send the prototype out to multiple people, so you can gather all the feedback and combine it to get the best

For me there’s just one down-side: It still doesn’t beat the speed of a pen on paper or a marker on the whiteboard at my office. However if you’re serious about prototyping and need feedback from your users I suggest you try it out.