Rapid UI Prototyping with Microsoft Expression Blend 3

Rapid UI Prototyping with Microsoft Expression Blend 3

By Vlad Kofman

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.

table that shows tools per type of mockups
Click here for larger image

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:

The developers
Click here for larger image

The developers

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.

Learning Curve * Small ** Moderate *** Long
Click here for larger image

Learning Curve * Small ** Moderate *** Long

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 beta.

Rapid UI Prototyping with Microsoft Expression Blend 3

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.

Choosing the Type of project to work with in the Microsoft Expression Blend 3
Click here for larger image

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.

Choosing the to View Split Pane or XAML in Microsoft Expression Blend 3
Click here for larger image

Choosing the to View Split Pane or XAML in Microsoft Expression Blend 3

Code Completion in Microsoft Expression Blend 3
Click here for larger image

Code Completion in Microsoft Expression Blend 3

Control widget library in Microsoft Expression Blend 3
Click here for larger image

Control widget library in Microsoft Expression Blend 3

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)

Adding third-party Control widget to the Microsoft Expression Blend 3
Click here for larger image

Adding third-party Control widget to the Microsoft Expression Blend 3
Navigate to the folder where Dev Express is installed and select all DLLs.

Adding third-party Control widget to the Microsoft Expression Blend 3
Click here for larger image

Adding third-party Control widget to the Microsoft Expression Blend 3

After the DLLs are added, you should put them under Project References and now you can also search for the controllers in the Controls library and use it in your projects.

Adding Dev Express Controls in Microsoft Expression Blend 3
Click here for larger image

Adding Dev Express Controls in Microsoft Expression Blend 3

Designing .NET Applications with Microsoft Expression Blend 3 and SketchFlow

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.

SketchFlow Map panel in Blend 3
Click here for larger image

SketchFlow Map panel in Blend 3

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.

Resources

Software Prototyping

http://en.wikipedia.org/wiki/Software_prototyping
http://c2.com/cgi/wiki?GuiPrototypingTools
http://weblogs.asp.net/fmarguerie/archive/2009/02/15/gui-design-and-prototyping-tools.aspx
IRise
Axure
Adobe Flex Catalyst
Serena Prototype Composer
Microsoft Expression Studio
Microsoft Expression Blend 3
OmniGraffle
Stencils for OmniGraffle



Comments

  • There are no comments yet. Be the first to comment!

Leave a Comment
  • Your email address will not be published. All fields are required.

Top White Papers and Webcasts

  • On-demand Event Event Date: September 10, 2014 Modern mobile applications connect systems-of-engagement (mobile apps) with systems-of-record (traditional IT) to deliver new and innovative business value. But the lifecycle for development of mobile apps is also new and different. Emerging trends in mobile development call for faster delivery of incremental features, coupled with feedback from the users of the app "in the wild." This loop of continuous delivery and continuous feedback is how the best mobile …

  • Webinar on September 23, 2014, 2 p.m. ET / 11 a.m. PT Mobile commerce presents an array of opportunities for any business -- from connecting with your customers through mobile apps to enriching operations with mobile enterprise solutions. Join guest speaker, Michael Facemire, Forrester Research, Inc. Principal Analyst, as he discusses the new demands of mobile engagement and how application program interfaces (APIs) play a crucial role. Check out this upcoming webinar to learn about the new set of …

Most Popular Programming Stories

More for Developers

Latest Developer Headlines

RSS Feeds