Rapid UI Prototyping with Microsoft Expression Blend 3

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.

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.