As technology has matured, our approach for design has evolved from command line to graphical interfaces. In the document Design for Desktop Touch and the Ultrabook™, we covered how the new touch input requires us to be aware of and design software for these new usage patterns. What does the designer need to consider when designing for the Ultrabook desktop?
- Touchable: This is where the controls are sized large enough to function appropriately in a touch only environment, which research has shown to be a minimum of 23 x 23 pixels (6 mm) and have sufficient room between controls to prevent accidental selection.
- Touch-enabled: Most frequently used controls are at least 40x40 pixels (10 mm), and the standard relevant gestures of touch targets are supported such as panning, pinch and zoom, and rotation. Basic multi-touch manipulations are implemented and behave as expected.
- Touch-optimized: The content has been revisited to minimize clutter and maximize user experience. Tasks are performed using controls strategically placed in easy-to-access areas on the screen. Higher level interaction features like inertia and momentum are used to make the interface come to life.
With the introduction of Touch and the unique way it is integrated on these new computers, the opportunity to design naturally intuitive interfaces for this powerful configuration requires a new mindset as well as the right tools for the job. From touch gestures and manipulations to designing how the interface responds means working in a design first environment. The question is what tools work best?
Microsoft has been a development tools company long before it was an Operating System company. It prides itself on having some of the best developer-focused people in the industry. As Visual Studio* has grown and matured, additional roles have been included like Architect, Database Manager, Tester, Project Manager, and Designer. But as so often happens, the fact that a role has been added, doesn’t necessarily mean that the experience is best for the person filling that role. With that in mind, Microsoft took a hard look at the Designer role and has been working on the Expression Suite of tools, specifically targeted to let Designers work in the way they traditionally have and not try to make them fit into developer tools.
In this article we’ll explore some of the tools that you can use to design great touch experiences for the desktop and how to build reusable assets as part of the process. Specifically we will look at the Expression suite of tools for building applications that are responsive to the environments in which they run. The key is to identify how you work and pick the tools that make the most sense.
Designer and Developer workflow
The big question facing application teams is how to make the transition and communication between developers and designers as easy as possible. In many cases the developer is the defacto designer and may have little or no formal training in the field, but will apply what they’ve learned about interface design to their development projects.
When a formal design role is included in a project team, the person who fills that role has the unique challenge of communicating their design intent to the developer who implements it. The tools available to designers include things like the Adobe toolset (Photoshop*, Illustrator*, etc.) and other design tools that fit their work patterns. Often the challenge comes when the developer takes those assets and interprets them into code. Difficulty in creating a graphic that mirrors a picture of a control can lead to a loss of fidelity between what the designer had in mind and what the developer delivers.
If the designer and developer could work with the same files and design assets, then what the designer intended could be fully realized. This is the beauty of markup languages like XAML.
Since the release of .NET 3.0 the Windows Presentation Foundation (WPF) incorporates an open design markup language called XAML (Extended Application Markup Language). The markup file is compiled as a partial class that can be paired with a code behind file to implement behaviors and business logic, but doesn’t require it. The XAML language is expressive and declarative in the sense that from the markup one cannot only create an interface but specify interactions, data bindings, and behaviors without writing any C#, VB, or other code. While the ultimate file format is XML, the design tools and developer tools can both read and use the XML file to work with both vector and raster (or bitmap) graphics.
The markup language has the added benefit of being XML based as opposed to binary. This means that it is open to tooling as opposed to only being editable in the tool that created it. While an overview of XAML is outside the scope here, what is important to understand is that in includes controls and containers that can be used to lay out an adaptive interface and include transformations and storyboards for animations and response to mouse as well as touch manipulations and gestures.
Blend is a designer tool that provides a customizable workspace in which to work with both vector and bitmap (raster) graphics. One of the great features is that it works with the same project and solution structure that Visual Studio (the developer tool) uses. So instead of working with copies or representations of the design assets that the developer uses to build the application, the designer is using the same files.
Blend is included both as a standalone product as well as part of a suite of products aimed for the designer. I use the Preview version of Blend for Visual Studio 2012 and Sketchflow, which includes not only tools for building Windows* Store (aka Metro) apps in HTML or XAML, but also support for WPF and Silverlight*.
You can download Blend from here: http://www.microsoft.com/en-us/download/details.aspx?id=30702. Full documentation for getting started with Blend can be found at: http://msdn.microsoft.com/library/windows/apps/jj129478, but I will cover the salient items that will help you get started quickly with the tool.
Get started…the templates
Starting Blend brings up a splash screen where you can start out by either creating new projects, opening existing or recent projects, or exploring the samples. This screen is optional but serves as a starting place. There are several categories of projects that can be created including Windows Store apps in HTML, XAML, WPF, and Silverlight. Each category then includes a number of templates that can give you a starting place with much of the infrastructure already in place.
Blend is comprised of a collection of what are referred to as Artboards and pinable Pallets that provide access to the various tools, properties, and the organization of the application being worked with. These can be arranged to suit your working style and saved as customized workspaces. By default you have 2 workspaces, Design Workspace and an Animation, but you can save your settings to add more by simply going to the Window menu and saving the current workspace. Use the CTRL+F11 to iterate thru the workspaces.
The Artboard is a work surface that renders the current design in a way that lets the designer see the application. It provides pages or tabs for active documents and includes a rendering mode, split mode, and a code-only view. Additionally at the top of the page is a breadcrumb that lets you switch between editing the full document or a template within the document.
Some key things to know about working with Blend is that there are keyboard shortcuts that make the tool much easier to navigate and use. These include (in no special order of importance):
- Pressing the Spacebar enables panning mode, where the mouse cursor turns to a hand and you can move around the artboard.
- The Scrollwheel on the Mouse, by default, will zoom the workspace, which if you’re familiar with Visual Studio can be confusing. You can change the behavior to be triggered by CTRL + Scrollwheel in the Tools | Options menu. If you do that, the Scrollwheel by itself will scroll up and down, Shift + Scrollwheel will move left and right.
- F4 hides or shows all panels
- The toolbox has several tools that all have keys associated with them that you can discover by hovering over the particular control. Some that are worth knowing are:
- V – Selection mode, where clicking a control repeatedly drills into the components and containers of controls
- A – Direct Selection, which selects the lowest level control
- H – Panning tool, which switches the default mode to be the same as pressing and holding the space bar to temporarily enter panning mode
- CTRL+Tab iterates thru the active documents
The panels on the sides of the screen can be customized to the work style and tastes of the designer. They can be dragged between areas of the screen and optionally pinned or unpinned to make visible or hide away the clutter. The default design workspace includes panels visible on the left and right sides of the screen including the Project panel, which shows the files that comprise the active project, an Objects and Timeline panel, which shows a hierarchical structure of the objects on the artboard (also allows you to show or hide items to make it easier to select and work with specific controls), and the properties panel where you can manipulate the values of the various properties of the currently selected control.
Other panels include Assets that are an inclusive list of controls available for use, Triggers that allow the currently selected control to be used to start an action, and States that allow you to define a different appearance when your application is in a specific state. The Resources panel provides access to the dictionary of styles that can be defined and applied to controls on the page, and the Data panel is where the designer can create and work with sample data or real classes and use binding to associate with control properties.
The animation workspace is a different layout that displays triggers, states, and timelines for behaviors and storyboards that comprise the graphical response your application displays in response to usage. A red recording button is displayed in the top left of the artboard when capturing values.
The designer can select items from the Objects and Timelines window, then specify a trigger or a state to associate some action with, and then define behaviors or animations that should occur in response.
The Objects and Timeline panel doubles as the place where controls can be included in a storyboard animation. Animations in Blend are accomplished by defining an end state, where controls can be moved, sized, and changed as needed.
A starting state can also be defined, but if it isn’t, the animated object will go from its present state towards the end state according to the storybook, regardless of where it starts. That means that if a control is midway thru an animation when a new storyboard is triggered, instead of completing the current storyboard first or resetting to the beginning, the control will continue to animate towards it’s end state.
The resulting XAML that is created as a result of this is stored in the XAML file’s resource section. While you can design to close approximation using the graphical interface, for exact and specific controls you can edit the XAML by switching to code view. For example, it’s unlikely you will require values that are specific to 3-digit precision, as shown here:
<EasingDoubleKeyFrame KeyTime="0" Value="359.662"/>
<EasingDoubleKeyFrame KeyTime="0:0:1" Value="720.206"/>
<EasingDoubleKeyFrame KeyTime="0:0:1.3" Value="359.662"/>
Build and Run
At any time the designer can test their work from within Blend by going to the Project menu and clicking Build (CTRL+SHIFT+B) and/or Run (F5). Blend will compile the project and deploy it to the local machine where it can be tested.
One challenge for designing applications is creating prototypes. In Blend 4.0 Microsoft introduced a tool specifically for this called Sketchflow, which allows the designer to rapidly lay out screens, navigation, animations and work with data to create a rapid prototype that can be used and shared with stakeholders to get feedback and move the design process forward. Features of Sketchflow include:
Rapid Prototyping. When creating a Sketchflow project you have a navigation window that allows you to create screens quickly, even sharing common elements like navigation controls or other componentry that should be on all screens. The project creates XAML files for each screen and shared component.
Import. If you have existing design assets you’d like to include or use as a basis for the prototype, you can import them from a variety of sources including Adobe Illustrator and Photoshop. The content, including layers and naming that may have been used in the original assets, is opened in Blend and converted to XAML.
You can also import from PowerPoint*, where each slide is imported as a separate page. The content of the pages is brought in as bitmap graphics, so you won’t be able to edit the content as if it were vector artwork and text.
Sketchflow Styles. When creating a prototype, it is easy to get buried in minutia, which is why they included a set of styles for text and controls that appear to be “Sketchy.” This takes the focus off the specific font or colors and gives more focus to the content of a given screen. These are applied to the page by use of the styling feature of XAML and can be easily removed or replaced when a specific look is determined.
Sketchflow Player. After a prototype has been built locally it can be compiled into a running application and packaged with a player that allows the application to be run with functioning navigation, animations, and storyboards. The player also provides the ability to capture feedback, both textually and ink, and to save it either as a standalone XML file or upload it to a SharePoint site.
The feedback can then be loaded into Blend and iterated thru to incorporate the suggested changes. The feedback becomes part of the project and can help provide insight as to why design decisions were made.
In order to address the challenge of creating accurate documentation of a project, Expression Blend + Sketchflow includes the ability to export the application pages to either a Word document, SharePoint*, or as images. All pages of the application, including the screen navigation map and any composite pages, are exported. This makes creating an accurate and complete document of all the points of interaction easy and fast.
Sketchflow is currently available for WPF and Silverlight projects and is a powerful tool for prototyping that will save time and effort to collaborate and deliver a solution. It is included as part of the Expression 4 Suite, and as a Preview for Blend 5 and Visual Studio 2012.
As a design tool, Visual Studio works with the same file, project, and solution formats as Expression Blend and is a great companion tool that is tuned for developers and code. It incorporates the same design surface as Blend’s XAML rendering engine as well as the property explorer.
It’s greatest strength is in working with code, but it still can be used to edit and work with XAML and HTML resources that make up a project. It works with the same file formats as Blend, so the workflow between designers and developers doesn’t require conversion or interpretation of intent. The design files in XAML serve as code files for the developer.Summary
Designing for the Windows 8 desktop takes advantage of the huge ecosystem of tools that has been and continues to be available to designers. Expression Blend and Sketchflow work with the same file formats as the developer cousin Visual Studio, which simplifies the workflow between the two. Sketchflow for WPF applications make it easy to rapidly prototype and iterate thru design concepts and provides facilities for incorporating existing assets and generating documentation.