I’m working on a Silverlight demo LoB application as a part of my bachelor thesis and I made a UI prototype with a couple of screens containing sample data and some basic functionality like navigating through screens, autocomplete boxes, some pop-up windows…

At first, check out the SketchFlow prototype (or just PDF exported document) which I’m going to describe here, to see whether the rest of article is interesting for you.

Download the source code of the project.

Why to do WPF/Silverlight UI prototypes in SketchFlow?

We usually build the software for our customers and therefore we have to check regularly whether our work really meets their expectations.

To avoid reconstruction of the user interface near the end of the development, project teams tends to do UI prototypes. This way we could get the feedback from our managers and customers about the basic design elements like layout, UI components used, data that is shown, etc.

SketchFlow enable to create UI mocks that looks like hand-drawn, but with real XAML elements and C#(or VB) code so there is a great chance, that in the end you can reuse a lot of the XAML code for the real project. Plus you can easily create Sample Data Sources with “lorem ipsum” style data.

To enrich the communication process between you and the customer there are some feedback controls to draw and write notes in the running prototype and then export it.

I will explore the whole process of creating SketchFlow prototype in the next couple sections.

Basic Orientation in SketchFlow Project

Overview of Expression SketchFlow

The most important parts of the environment are SketchStyles assets, that are actually styles applied on dozens of classic UI controls.

Another important tool is SketchFlow Map where you can create connected screens, organize component screens and visually tag them to express some king of grouping.

In the right panel there are by default Properties (of selected component) and Data panels. In Data panel you can create collections of sample data or import data sources from XML files.

In some cases you would like to create some basic animations of the content and this can be done with the animation panel.

If you can’t find some of these panels you can show them by the Window submenu in the Main menu.

Create navigation screen with views as component screens

At first, you should see the first blank screen in your project. You can place there some Sketchy controls to create the user interface on that screen.

SketchFlow Map

This will be the first screen in your project and by clicking on buttons in the SketchFlow map you can create screens that are connected to this screen.

You can also create new screen separately and after that connect the screen to another existing screen.

To create a component screen I recommend to create some basic stuff at the source screen first, place it in some Grid and than raise context menu on that Grid in the Objects and Timeline panel and choose Make into component screen.

Group UI controls into Layout element

Make element into...

Then you can see in Objects and Timeline that the Grid changed to the “NewComponentName” and you can edit its contents and its code-behind in separated files.

In my case I have a TabControl in every screen (Products, Customers…)  and TabItems content is transformed to separate Component screens. I have the navigation of my app as a separate UserControl, to enable placing it in all Screens, but still edit it in one place.

To enable navigtion between the screens from the screen by clicking on some buttons, you have to open the context menu on selected button and choose Navigate To and selected the desired screen. Only screens to which current screen is connected could apper here.

Create Sample Data and bind UI controls to it

You can easily create new collections of sample data, that contains simple/complex properties and sub-collections. After creating a new property you should set the type and some details (size, max length, etc.).

SketchFlow Sample Data

There is also an option to edit pre-generated values and set the count of sample records in a collection.

Image type property should be linked to a directory that contains sample images.

Binding works the same way like in normal WPF/Silverlight project. I recommend to set the DataContext of the LayoutRoot grid to the ProjectDataSource and then just bind ItemsSource properties of ListBoxes, Grids on the screen to sample data collections.

How to create sketchy controls that are not included in default SketchStyles

SketchFlow Apply sketchy resource

There is limited amount of controls that could be drag’n'dropped from the SketchStyles panel.

In my prototype I used AutocompleteBox, DataPicker and maybe some other controls, that should be styled the sketchy way, as well.

A lot of these extra controls are derived or contain some primitive UI controls. AutocompleteBox is derived from standerd TextBox and therefore we can apply TextBox-Sketch resource to it.

In other controls we could at least change the Font to Buxton Sketch and set colors of control to grayscale ones.

Publish the project, Export to Microsoft Word, Manage the Feedback

In the Main menu, you can Package the SketchFlow project and that will export your prototype to a specified folder. Actually the only files you need for publishing on the web or to deliver to customer are Silverlight XAP file and an HTML document that hosts that Silverlight application. Show my published project.

The other interesting function is Export to Microsoft Word, where the SketchFlow generates a Word document with the SketchFlow Map and all the Navigation and Component Screens. Show my exported document saved as PDF.

SketchFlow project Feedback

In the running project, the user can navigate through the left sidebar or by clicking on buttons in screens.

In the left sidebar there is also a Feedback panel where the user can write, draw feedback and then export it and send the exported file to development team.

You as a developer could import/add feedback files from your customers (or managers) via the Feedback panel (on the left from the Objects and Timeline).

Useful links about Expression SketchFlow

In the end, I will share with you some links about SketchFlow I’ve already collected.

How to: Create a sketchy Siverlight GroupBox in Blend/SketchFlow (ondrejsv, 17th January 2010)

How to: Create a new format for sample data in Blend/SketchFlow (ondrejsv, 17th January 2010)

Using SketchFlow to Create Better Prototypes (Simon Guest, 29th April 2009)

Getting in-depth with SketchFlow (Alex Knight, 26th October 2009)

Sketch Flow: From Concept to Production – MIX ‘09 video (Christian Schormann, 20th March 2009)

SketchFlow tutorial

Thanks for reading.

Download the source code of this project.

User experience design is integrated into software development and other forms of application development in order to inform feature requirements and interaction plans based upon the user’s goals. New introduction of software must keep in mind the dynamic pace of technology advancement and the need for change.
The benefits associated with integration of these design principles include:

• Reducing excessive features which miss the needs of the user
• Improving the overall usability of the system
• Expediting design and development through detailed and properly conceived guidelines
• Incorporating business and marketing goals while catering to the user
  [wiki]

Experience design (XD) is the practice of designing products, processes, services, events, and environments with a focus placed on the quality of the user experience and culturally relevant solutions, with less emphasis placed on increasing and improving functionality of the design. [wiki]

Look at a very nice visualization of The Importance of User Experience.

A picture that visualises Rich User Experience (click for full size)