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