Using SketchFlow for Windows Phone Prototyping

[As an exception on this blog this post is in English because this is of interest to a broader audience]

[UPDATE 16 June 2011 – A better, more advanced, project template has been released by the Blend product team. See my newer blogpost.]

[UPDATE 31 March 2011 – Project template was updated with a minor fix (PhoneUI background transparent)
Installation instructions are modified with new download. You can also download the new version here.]

SketchFlow, which is part of Expression Blend, is a very powerful way to prototype your applications. By using SketchFlow in Blend and the SketchFlow Player for the customer it is so much easier to communicate about the functionality and the experience of an application in the prototyping phase of a project. And the prototype can be a solid base for further development all the way to production.

Out of the box SketchFlow can only be used for WPF or Silverlight. Windows Phone is not (yet) supported. But it can be as useful for phone apps as well. I was inspired by Episode 48 and Episode 49 of Silverlight TV on Channel9, where Janete Perez showed how to use SketchFlow for Windows Phone prototyping. But to me there were too many user actions required to get started.

To solve that problem with the current version of Blend, I have created a project template for prototyping Windows Phone applications with SketchFlow using the Silverlight engine. This provides a quick start for prototyping phone applications.

Once the project template is installed Blend will show an option to create a Windows Phone SketchFlow Application. As usual you can provide a name for your project. The template only supports C#, but this not used in prototypes most of the time. So don’t let that alarm or frighten you, especially when you’re a designer.

When the project is created you see a SketchFlow Map with a number of items on it.

There are three component screens (green) which contain standard elements and behavior for the phone’s start menu, the phone UI (hardware frame) and an application bar. These components can be used by other screens. The PhoneUI is normally used by every screen in the prototype. This component also contains handling for the Back button (navigate back) and the Menu button (navigate to Start Screen) on the phone.

For the start of the complete prototype I have chosen to show the typical Windows Phone start screen (Start Screen in gray on the map), where the user can start the application (the App Start Screen).

The blue items are all application screens. Three are defined by default in the project template: a start screen, an information screen and a settings screen. The three screens are just blank screens with some commenting notes on it, all set up to help you get started prototyping. The App Start Screen has an application bar with two buttons to navigate to the App Info Screen or the App Settings Screen.

How to install the template

Blend supports per user project templates besides it’s own templates. To keep that installation clean the description below installs the project templates in the user directory. Blend will automatically pick up that template.

To install the project template follow these steps:

1. Download WindowsPhonePrototyping.Templates.V1.1.Blend4.zip.
2. When on Windows Vista or Windows 7, unblock the zip-files to mark it safe.
   To do this, right click the zip-file and select properties. In the properties dialog click the Unblock button.
   
   
   
3. Right click on the zip file and select Extract All.
4. Select your "My Documents" folder as the target for the extraction.
   On Windows 7, it is c:\users\[username]\Documents.
5. Press the Extract button. Confirm that you want to merge the folders.

How to start with the template

To start using the template with SketchFlow you need Expression Blend with SketchFlow installed on your machine. To start with a prototype based on the template follow these steps:

1. Start Expression Blend.
2. Select File, New Project …
3. Under the Project Types open the Windows Phone branch and select SketchFlow.
4. In the list of projects select Windows Phone SketchFlow Application
5. Type the name for your project in the Name field and press OK.

You probably want to create more screens from here. New screens are always created with a default size as defined in the Options menu of Blend. To make sure that new screens have the same size as the other phone screens you can set that default to 583 pixels width by 1124 pixels height. This can also be done by right click in the SketchFlow Map on Start Screen and select Set as Default Navigation Screen Size. But be aware that this is the new default for all screens created in Blend. Of course you can always remove that default or reset it. Another option is to set the size of each new created screen by hand. To do that, set the size of the top-level object [UserControl] to 583x1124.

Once you created a screen you can add the PhoneUI but simply dragging the PhoneUI component in the SketchFlow Map to your new created screen.

Running the prototype

Because the project template is based on the SketchFlow template for Silverlight, a Silverlight application will start with the SketchFlow player containing your phone prototype. As the standard size of all the screens is 583x1124 it will not fit your monitor most of the time. Just use the zoom slider on the left hand side to zoom out to see to complete phone.

And now what?

Now it’s up to you to start prototyping. This can be done for instance by scanning drawings and fit them in the PhoneUI. You can even make parts of the drawing interactive. Or you can use the Sketch-style controls SketchFlow offers to build a UI.

Janete pointed to a great set of extra “tools” for prototyping, called Mockup controls. This is a set of sketch-style controls that are easy to use to build prototypes. For instance there is a login control containing a username and password field and some buttons. To get these controls read the blogpost of the Blend team to copy them from Blend OR go to Codeplex to have an easy install of the mockup library.

The current list of how to’s:

• How to add an application bar with buttons to your screen
• How to add a panorama view

So, stay tuned … and let me know what you think of the template