SketchFlow - Tools for Prototyping Interactive Applications

• Download source - 1.28 MB

The entire article is based on the awesome SketchFlow video from Mix09 where Christian Schormann presents some really cool things about SketchFlow.

Introduction

It is almost true in today's world that great design is an important factor for great products. Historically the software industry hasn't really put much emphasis on the early stages of the design process.

In order to create a great design, certain great processes help a lot and it is especially very helpful to have ways to effectively explore, communicate and evaluate design ideas fast and efficiently.

Sketching at later stage of the design process and prototyping are wonderful techniques to explore a multitude of ideas. The software industry has become very complicated especially in the sense that it has become highly dynamic. Over the past year, the degree of dynamic interaction of software has grown quite a lot, demands of users have grown and it is very difficult to meaningfully sketch dynamic interactivity with traditional design tools.

Many of the design tools that we are using today have really been conceived for production purposes. Mainly their aim is to create a final asset with polished quality rather than quick informal sketches.

SketchFlow is the product which will help you and guide you from the design process in the very first step to final production. SketchFlow is informal and quick and it enables you to sketch plentiful ideas for dynamic interaction in a cost effective manner. SketchFlow also solves the idea of evolution of rough sketch of your design and to evolve it into a living and breathing prototype that can be as real as it needs to be conveying your idea, your inspiration.

SketchFlow Goals

SketchFlow in Expression Blend is a great tool for creating a dynamic prototype for:

• Quickly experimenting with dynamic UX fast, plentiful, disposable and inexpensive
• Bringing hand-drawn sketches or digitally created sketches to life in dynamic prototypes
• Communicating design intent to other stakeholders in the process
• Collecting and evaluating stakeholder feedback
• Creating design specifications documentation
• Providing immediate business value: Delivering compelling proposals to clients quickly and cost effectively

Communications and feedback gathering is probably quite underappreciated in the whole process of prototyping. Creating prototypes are sketching, interactive, collaborative and group activities. Creating software design is a multidisciplinary activity. So communicating a design idea is very important.

Many of us create designs when we are not really paid at the initial design stage. In a corporate setting, we have a product proposal that has not been approved yet, so it is very important to quickly create a prototype. The prototype should advertise an idea which can make people excited about the idea and advertise what we want to do in an effective manner which brings immediate business value that is important.

So let’s build a simple prototype using SketchFlow!

Setting Up Your Workspace

When you open Expression Blend, the following default screen will appear for the first time. Click on the new project link:

Next, you will be presented with a dialog box that contains a number of options:

Name your project as PrototypeStart and click OK button. SketchFlow allow us to create Silverlight as well as a WPF application. At this point, you will probably have a workspace that looks similar to this:

Let’s go up to the Window menu and select the item in the menu entitled Save as New Workspace… Select a name for the workspace as SketchFlow and save it.

The Artboard

The top portion of the screen is the Artboard. This screen is where you actually import and work with sketches of create elements from scratch using controls and drawing tools available in SketchFlow.

The SketchFlow Map

The next portion of the screen below the Artboard that takes up the most space is the SketchFlow Map:

Mouse over on the blue labelled screen and you should see a panel appear below it. You can create new screens or new screens connected to existing screens. Now, you spend some time with the flow canvas and see if you can get your screens and connectors to look like this:

Adding Content to a Navigation Flow

Let’s go to the Start screen and draw using the sketching tools and also drag out labels to get the screens to look like this:

Let’s go to the welcome screen. Put a title on the left upper corner. Put a background image for the welcome screen:

Blend allows us to access plenty of controls (WPF/Silverlight) to use in a SketchFlow project. To see the list of items, go to the Asset view from the tool menu. In this prototype, we will be using those assets that are available under the SketchFlow category. These assets have a sketch style, but it has the same functionality as any normal control like button, textbox, listbox, etc.

Sharing Your Work and Getting Feedback

Sharing and getting feedback on your work in the early stages of conceptualization is a critical part of design project. SketchFlow makes it extremely easy to share your dynamic prototypes and get feedback on them.

See below for how your application looks in runtime with the SketchFlow player:

Feedback Panel

You can create feedback simply by inking tools, you can also create feedback by typing text. You can save the feedback and send it to the designer. Then the designer can start work on the feedback by simply importing the feedback file into the SketchFlow Project.

Animation

In SketchFlow, you can use animation to demo what different interactions in your app will look like. SketchFlow Animation allows you to quickly create animations that can simulate advanced interactivity quickly.

For example, in Bindings page if the user clicks on the View Cart button, we want to display a Cart List window and clicking on the Live Chat button, we want to open Live chat window.

Animation in SketchFlow is based on a system build into Expression Blend called the Visual State Manager. What we need to do is very simple. We just need to create a state and within that create the frame and associate them with the specific button so that when the user will click on the button, the specific frame should come to the top of the screen with a little bit of animation effect.  

Design Documentation

At any point of time, if you are making a prototype, SketchFlow allows you to create Design Documentation. You can go to the file menu and select Export to Microsoft Word.

After you've selected the appropriate settings, your document is created. The document will create a table of contents, show the flow for the application and provide a collection of figures and runtime annotations that have been embedded in the SketchFlow project.

Summary

In this article, we worked with all the basic feature of SketchFlow and learned how to create dynamic prototypes quickly and interactively.