Microsoft Expression Studio 2007

The Expression PM and Designer Team, 2006

Expression Blend is a tool to produce user experiences for the Windows Presentation Framework. It is targeted primarily at designers, not developers.

The Expression Studio is a comprehensive set of tools built by and for creative professionals for the purpose of augmenting the creative process and helping integrate designers and developers into a smooth and efficient workflow. Expression Studio comprises Expression Web for creating standards-based Web sites; Expression Blend for designing rich interactive experiences for Windows®; Expression Design for the design of visual elements for Web and Windows experiences and Expression Media, which provides digital asset management and unifies team workflow across the suite. Expression Web is shipping now, and the full Expression Studio is planned for delivery in the second quarter of 2007.

The rest of this article will focus on the user experience provided by one of the products in the studio–Expression Blend–and how it helps designers and developers build incredible experiences for Windows and other platforms which use a user interface framework we call the Windows Presentation Foundation or simply WPF.

In early 2006, we decided to make significant changes to the user experience for Expression Blend, then known as Expression Interactive Designer. We wanted the experience to be more designer-friendly, easier to use, and, last but certainly not least, we wanted a new fresh look.

Let us discuss a few of the areas of the user interface that we gave particular focus on in the re-design.

Focus on the Art Board

We wanted designers to be able to focus as much as possible on the art board. We wanted to have as little UI as possible on the screen, or at least enable designers to work with a minimized UI if they so chose. We therefore tried to identify the UI elements that are really required for typical tasks, and to give appropriate priorities. Also, we provided for a mechanism that lets almost the entire UI slide away with a single keystroke, leaving the art board with the basic toolbox and popup property inspectors that come into view and vanish on demand.

Blend solves these issues with:

• Timeline on demand. In the old UI, the scene tree and the timeline are one entity. Because the scene tree is really quite important, the timeline is always visible, taking up a lot of screen space even if no animation is being created. In the new UI, the timeline is not visible by default, but comes into view on demand–there always is a small slide-out timeline, and for more complex animations, a separate workspace is provided.
• Multiple workspaces. The new UI provides two workspaces–design and animation. In the design workspace, we focus on the scene tree, properties, and resources, which are all the things commonly needed when creating static designs. You can animate in the design workspace with an on-demand timeline, but in design mode the timeline is narrow, appropriate for transitions with a few keyframes. In the animation workspace, the timeline takes up a good part of your screen width, thus allowing for much better control over animations with many keyframes.
• Single key shortcut to hide the UI. By pressing the Tab key, the UI can be hidden almost entirely, leaving just the toolbox and property editors. Furthermore, the property editors are reduced to pop-up category icons, giving quick and easy access to each property category without taking up the screen space the full-size editor requires.

Property Editing

Getting colors, fonts, strokes, margins and many other properties just right is an essential part of the authoring process. A lot of the user experience in authoring tools of all kinds revolves around property editing. Expression Blend is no exception.

In the new design, we wanted a property editing experience where all properties available for something selected on the art board could be found in one place. We also wanted a rich, interactive editing experience with immediate, continuous feedback and easy access to all of the special WPF property functions such as resources and data binding.

The new property inspector does just that. In a header section, it identifies what is actually selected on the art board, showing name and type of the selection. As WPF controls can have quite a lot of properties, it allows for property filtering–type a few letters in the search box, and only properties with names that contain the letters typed will be displayed.

Below the header, all properties are distributed over a number of categories that can be expanded and collapsed as required. Each category contains the most important properties that belong to that category: less frequently used ones are out of sight, but just a mouse click away in slide-outs at the bottom of the category.

There are many rich property editors in the property inspector. Even simple numeric fields are really interactive sliders–you can just drag over the fields to adjust values, using the screen as a virtual slider area.

Tools and Assets

In Expression Blend, there are many of the tools you would expect in a typical vector graphics application: selection, drawing tools such as pen, freehand or shapes, viewing controls, et cetera. But because WPF also provides a large set of pre-made controls, the ability to extend this set with custom controls and styles, and a powerful mechanism to layout vector graphics and controls in a UI, a normal toolbar wouldn't quite do. The Expression Blend toolbar combines the functions of a traditional toolbar and an asset library in one.

The new toolbar provides the basic selection tools and access to the most important standard controls via normal tool icons with flyouts. When a control is selected from the toolbar, it acts like a drawing tool–or in other words, you can just draw the control on the art board.

There also is an asset tool that gives quick access to a whole lot more: Standard controls, custom controls, user-created new styles and templates, media that is part of the project, and more. You can use assets as drawing tools or via drag-and-drop, and you get searching and other useful functions.

Resources

Resources are a powerful mechanism in WPF. They allow designers to define a set of standard items (relatively simple things such as colors, brushes, sizes, or typography settings, but also complex items such as styles and templates for controls) and then use these defined items rather than literal values all across the project. The benefit is that changing the resource will change all places where the resource is used–a great way to guarantee consistency of a design. In Blend there is a dedicated panel for resource management. You can browse, organize, and edit resources right there, and of course use it to select and apply resources to things on the artboard.

New Look

With Blend, we wanted to dramatically enhance the visual appearance of the interface. We really had two conflicting goals for that: On one hand, we wanted a UI that could be as unobtrusive as possible, a UI that could fade into the background to let the artist focus on the art board, a design that could blend into the background. On the other hand, we wanted a UI that had character, would be immediately recognizable as the Expression UI, allow us to build brand recognition, and be beautiful and elegant. Beyond that, we also wanted to move away from 3D-ish, gel-like looks, as we felt they had become quite overused. And, to add further constraints, in a visual design system UI, there is little scope for colors beyond shades of grey.

A user's first response to software is an emotional one, where its interface is not only judged by how it looks and functions, but by how it feels. Is it inspiring or annoying; cheap or professional? As designers, we understand how sensitive and finicky designers can be about their visual and interactive environments.

The design opportunity for Expression was quite exciting, as we had to create a look not only for Blend, but for an entire suite of professional tools that required a unified user interface. The challenge was defining visual commonality within the wide range of applications in the suite.

Since we wanted to do something entirely different for the interface, we turned to such diverse inspirational sources as stealth fighter jets or 1980s radio design. We wanted to find a look that moved away from current trends, yet still felt contemporary, was useful, and targeted to our audience.

In the low-light settings that many designers prefer, a bright or near-white interface can be visually distracting. Therefore, we chose a darker palette for the default interface that is better suited to the way the audience uses software as well as to their work environment itself. In addition, we restrained the use of color to minimize the chance of a design project being influenced by colors used in the UI itself.

After many design explorations and iterations, we have implemented a design that gives the Expression products a distinct, easy-to-use interface. And we are already playing with many ideas to further streamline the interface and to make it more elegant and forward-thinking in versions to come.