Rapid UI Prototyping with Microsoft Expression Blend 3

In today's environment prototyping your UI can be paramount.
This article will show users how to use the Microsoft
Expression Blend 3 prototyping tool and discuss the differences
between static, interactive and convertible prototypes.

Introduction

In the modern enterprise world with the ever-growing complexity of software applications and requirements, presenting ideas visually can be a challenge. In this article I will talk about rapid UI prototyping tools that can help in clarifying business requirements and creating solid presentation of the business ideas and processes. They can also reduce application time to production and simplify development cycle. I will cover several tools currently available on the market, and what types of prototyping they can do, and then dive deeper with concrete examples for the .NET framework (C#, ASP and WPF technologies) with the Microsoft Expression Blend 3 product. These tools are a new bread of mockup tools created with both designers and developers in mind. They facilitate rapid evolvement of ideas and solidification of concepts as well as experimentation with dynamic user experiences.

The prototyping of any software project can be categorized into two types: prototyping of application workflow and prototyping of the user interfaces. The first type can be used to define the user interaction with the system, use-cases, business and validation rules, as well as application interaction with other systems or flow of information or processes*. The second type is used in wireframing of the screens. Both of these design and prototyping types are fundamentally important to the large enterprise projects, but are cumbersome to implement without the proper tools. To address this, several vendors developed prototyping tools that can be used for project workflow design and the screen mockups. These tools are meant to be used by designers, business analysts, and developers. The end result can be shown to the project stakeholders and business decision makers.

* The internal system processes can also be managed and designed by BMP or Business Process Management software solutions, which is a whole topic in itself and is outside the scope of this article. See appendix for examples of project workflow mapping in MS-SketchFlow and Serena Prototype Composer

Enterprise project and software prototyping

Assuming that all the business requirements are gathered, when designers start to mockup application screens depending on which tool they use, the end result can either be static or interactive. Compared to static screens, interactive prototype is a step closer to giving the business users a feel of what the final application will look and function like. Any graphic tool, like Adobe Photoshop, can be used to make static screens or storyboard flow or the screens, but a more sophisticated tool, like Asure or Microsoft SketchFlow, needs to be used to add events or behaviors to onscreen elements mimicking how the final product will work. However, after the prototype is complete the developers will have to recreate all the screens and functionality in whatever technology the project is done.

Here is the table that shows tools per type of mockups they are meant to do. In the case of screen design the tools can be used for applications developed in any technology or development environment.

There are several shortcomings with this approach, though. First, the prototyping tool can allow designers to create something that the developers may not be able to create or something that may be too time-consuming or costly to do. For instance generic prototyping tool may simulate a chart with zoom functionality, but if the API used for the project does not support zoom, it may be costly to add. The second shortcoming is that entire prototype will have to be recreated in a specific technology, which will require developers to become designers when time comes to creating all the user screens and formatting. This process is often error prone, especially in the large projects with offshore teams, and can often cause loss of precision put in by the designers of the UI prototype. Lastly, if there are any changes in project scope, changes again would have to be made separately in the prototype and in the actual code.

The disconnect between the prototype and the development environment or technology API can result in something like this:

Convertible Prototypes

There are several tools on the market that try to bridge this gap between UI design/prototype and the actual development of the project. They can be used to create interactive mockups that can then be converted into working applications by the developers. This shortens the development cycle, as all the screens are already done, and allows users to keep all the features put in by the designers. In addition any changes to the screens can be done once, per any new changes in the project scope. The table below shows the tools per specific technology. They can be used by designers or business analysts to create interactive prototypes without writing a single line of code and then converted into working applications by the development team by adding logic to the UI screens.

Tools like Adobe Catalyst* and Microsoft Expression Blend are more advanced then the generic prototype tools, in terms of functionality, but are not necessarily more complex to use. They all have a learning curve, but since they are geared towards designers, they incorporate most common elements from the popular design tools, like Adobe Photoshop. Other tools, like Adobe Dreamweaver or Flex builder, are designed with developers in mind, and may be more burdensome to use by the designers or business analysts.

* at the time of this writing the Adobe Catalyst is in beta.

Prototyping for .NET Technology - Microsoft Expression Blend 3

If your project is based on .NET technologies, such as desktop applications based on Windows Presentation Foundation (WPF) 3.5 with Service Pack 1 (SP1), ClickOnce deployment apps or web applications based on Silverlight 3, you can benefit from prototypes developed with Microsoft Expression Blend 3. This tool is part of the Microsoft Expression Studio, which also includes SketchFlow 3 used for project workflow designs and Expression Web 3 used for web page creation, (similar to Adobe Dreamweaver) and several other tools. Expression Blend 3 provides full support for application UI prototyping, interactivity through behaviors, Silverlight 3 functionality, and on-the-fly data generation for interactive prototyping. Using Expression Blend 3, designers can make applications that can then be opened in Visual Studio 2008 and worked on by the development team. Under the hood, the UI screens are defined in XAML, which Visual Studio can understand.

Figure 1: Choosing the Type of project to work with in the Microsoft Expression Blend 3

This tool allows designers to import artwork and convert it into interactive components in the application, for instance a custom looking textbox or slider. The tool also supports import Adobe Photoshop and Adobe Illustrator, while retaining layers, shapes and text elements. The interactivity can be added by using "behaviors', which are added to on screen objects without writing any code. All of the features of the interactive prototype will be preserved when the project is opened for development in the MS Visual Studio.

The tool has very robust code editing features as well, for designers who are inclined to look under the hood, or for developers who want to make changes to the prototype inside of the Blend 3. The editor supports XAML, C#, and Visual Basic code with IntelliSense (syntax completion), auto-formatting, brace matching, function summary and event handler creation. Similar to Adobe Dreamweaver, the Blend 3 code editor can be opened in Split view, and will reflect changes in real-time to the screen and code.

The tool comes with an extensive library of visual controls (or widgets). After the control, such as panel or grid are placed on the screen, designers can change the properties. For instance make a gradient color as a background color. These properties will also be preserved when the prototype is moved into the development environment. Blend 3 also comes with an array of different effects and behaviors which can be applied to the controls for dynamic prototypes. Under the hood these effects and behaviors will be translated/defined in XAML and should be preserved when the project is opened in the Visual Studio.

Adding a third party component to Microsoft Expression Blend

In addition to the standard library of controls, such as panels, grids, tabs and buttons, Expression Blend allows developers and designers to import third party controls. The tool can also create new controls and convert or "skin" existing controls. For instance designers can import an image of a button and then make a real button out of that image.

So let's look at how a new control is imported. In the example, I'll import a popular Dev Express library of grid controls for C# and Silverlight applications.

First you need to create a new project, and then add reference DLLs to it. This can be done by right clicking on the project References. Next, navigate and select Dev Express DLLs (Dev Express should be installed separately on the system)

In addition to the individual screen design, Blend 3 comes with functionality to design project screen flows. It is possible to create relationships between screens and even create component screens shared by several connected screens. This built-in functionality is called SketchFlow. The SketchFlow prototypes are part of the Blend 3 project and can be as simple or as complex as necessary. For example, a prototype can be a rough sketch with notes, a linear sequence of slides with a few notes that demonstrates a workflow drawn on the artboard, or a complex graph, outlined in the SketchFlow Map panel, that includes reusable elements on a single screen, and navigation between screens (navigation connections). SketchFlow/Blend 3 prototypes are real Windows Presentation Foundation (WPF) or Microsoft Silverlight applications. Designers can build a prototype project, run it, and then navigate through the prototype, even if the skeleton screens are not fully done.

After the flow prototype is done the entire project can be exported to Visual Studio to be finished by the development team.

Appendix

Microsoft SketchFlow, bundled with Microsoft Expression Blend 3, can model the navigation and composition of an application. It can also collect feedback by using annotations, import Microsoft Office PowerPoint files, and images created in Adobe Photoshop. You can:

create storyboards and trigger their playback

create working interactive controls

use data binding to automatically display data or modify the state of your user interface

interactively create, apply and edit data templates

Project workflow mapping with Serena Prototype Composer

Conclusion

In this article I have discussed prototyping tools for UI and project workflow. All of these tools are incredibly useful in presenting, defining and finalizing ideas for the software projects. But please note that if the users are only looking for mocking up interactive UI without the ability to reuse the prototype in the development, then prototyping tools like iRise or Axure are a great fit. They are technology independent, which means they can mockup any application. If however there is a need to sketch out a conceptual application and then reuse it in the development environment, then depending on the language/technology a different tool should be used. For Adobe Flex its Catalyst, for .NET its Blend 3 and for Web applications it can be Dreamweaver or other HTML editing tools.

It will be interesting to see how these tools will evolve further and what other technologies these tools will support.

Advertiser Disclosure:
Some of the products that appear on this site are from companies from which QuinStreet receives compensation. This compensation may impact how and where products appear on this site including, for example, the order in which they appear. QuinStreet does not include all companies or all types of products available in the marketplace.