Visio has long been regarded by interaction designers and information architects as an essential tool in their work. Many software wireframes (aka software mockups) are built using Visio, and they can range from mobile software, interactive web sites, to enterprise application software.
In the past, Visio included a set of Windows XP stencils for such work. For Visio 2010, we decided to refresh those stencils by providing a brand new set of Wireframe shapes that are generic and not specific to the operating system. The intent is to offer the UX community with medium-fidelity UI shapes and icons that can be used to create wireframes for general software design for a wide variety of platforms (e.g. mobile, internet, windows). As an example, see the following mockup of Microsoft Internet Explorer and the homepage of Microsoft.com using the new Wireframe shapes (mockup is on the left, and the actual software is on the right):
This new set of shapes not only allows easier creation of wireframes, but offer many customization options to meet specific design needs. Let’s further examine what Wireframe shapes are included in Visio 2010 and what functionalities are added to make building wireframes easier.
UI Dialogs, Controls, Toolbars and Icons
First, to create a Wireframe Diagram, go to New > Software and Database > Wireframe Diagram:
Similar to previous Windows XP UI shapes, Visio 2010 offer UI shapes for building dialogs, controls, and toolbars. What’s new however is the addition of common UI icons for Windows, web, and multimedia applications. Here is the full set of Wireframe shapes that is included:
Resizable and Configurable
Customizing wireframe UI components are easier than ever. Most Wireframe shapes are resizable and offer options to customize the visuals. For example, a button is a common control and has configurable state options through the right-mouse action menu:
Working with Themes and Formatting
Unlike previous Windows XP UI shapes, the new Wireframe shapes also allow users to customize the look of the UI elements through Themes or formatting. With Themes, users can easily customize color and effects schemes that can be applied to all UI components easily. Moreover, individual controls can be formatted to indicate highlight or indicate different UI states. As an example, the diagram below shows what the wireframes looks as default (no Themes applied), and with Themes applied:
Controls as Containers and Lists
With the introduction of Containers (see earlier blog post for more details), Wireframe shapes such as Dialog form, Application form, and Panel are built as Containers to “contain” any control that is placed inside it. By being a Container, when you move a Dialog form, all controls contained inside it will also move with it.
Also, Wireframe controls such as Tree Control, Drop-down Menus, List Box are shapes to utilize the new list feature, similar to Cross-functional Flowcharts and Data Graphic Legends. Lists allow users to easily add new element to be contained in a List shape through a blue arrow, as demonstrated below in a Drop-down Menu control:
As a result, users no longer need to add shapes through multiple drag-drop or copy-paste operations. Instead, the blue arrow allows for a super quick way to add a lot of UI components while properly aligning and arranging the items at the same time.
We are excited to bring users a brand new set of Wireframe shapes that offer greater versatility and broader application. Please use the Send a Smile feedback tool or comment on this post if you have feedback on the Wireframe shapes.
Business Process Modeling Notation (BPMN) is a standard maintained by the Object Management Group which gives businesses the ability to understand their business processes using a graphical notation and to communicate these processes in a uniform manner. The basic BPMN shapes are similar to traditional flowcharting shapes, which makes modeling in BPMN easy for new users. For advanced users, the BPMN standard contains a large number of detailed shapes—more specialized versions of the basic shapes—which are useful when modeling complex interactions or precise behaviors within a process.
Companies have told us that they would like to enforce a standardized notation, like BPMN, within their organization to ensure that processes are graphically expressed in a consistent manner. Based on this feedback, we introduced the following support for BPMN in Visio 2010.
You can find the BPMN Diagram template under the Flowchart category on the New tab of the Backstage View.
The BPMN Diagram template contains five stencils of BPMN shapes: the BPMN Basic Shapes, BPMN Events, BPMN Activities, BPMN Gateways and BPMN Connecting Objects stencils.
For new BPMN users, all the basic BPMN shapes are located on the BPMN Basic Shapes stencil. For more advanced users, additional BPMN shapes can be derived from the basic shapes or taken from the other BPMN stencils.
You can derive a more specialized shape from a basic shape by right-clicking on the shape. The menu below shows how you would change a Task to a Standard Loop Task or a Multi-Instance Loop Task. Each of these shapes have different graphical symbols to distinguish them and different BPMN properties, or attributes, associated with them.
Notice the BPMN Attributes… option located at the bottom of the above menu. This option launches the Shape Data window which displays the shape’s BPMN attributes, properties specified by the BPMN standard. This gives advanced BPMN users to option to edit the complete set of BPMN attributes associated with a shape.
The BPMN Diagram template and shapes take advantage of many of the new Visio 2010 features. You will notice that the ease of use and flowcharting improvements in Visio 2010 make it easy to build visually-appealing BPMN diagrams. Below, we focus on some of the other Visio 2010 features that you will encounter when using the BPMN template and shapes.
The BPMN standard contains a large number of rules about the visual, structural and semantic properties of a diagram: these rules must be satisfied in order to comply with the standard. The standard documentation is long and it is hard for new users to understand its intricacies. We use Diagram Validation to help users ensure that their BPMN diagrams are visually conformant with the standard.
The BPMN Diagram template includes validation rules based on the BPMN 1.2 standard. This means that you can use the Check Diagram button on the Process tab to check for visual issues with your BPMN diagram. After you validate your diagram, any issues are listed in an Issues window.
To easily find shapes with issues, you can click on an issue and the corresponding shape will be selected. Once you fix the issues, you can check the diagram again to confirm that there are no longer any problems. This makes it much easier to create a BPMN-compliant diagram.
Expanded Sub-Process and Group shapes in the BPMN template are Containers. This means you can take advantage of all the built-in container logic. For example, when you move an Expanded Sub-Process, all the member shapes move automatically. In addition, when you select an Expanded Sub-Process or Group, you see the containers contextual tab, which gives you the ability to further customize these shapes.
The Text Annotation shape in the BPMN template is a Callout. A callout points at or references another shape, which we call the “target” of the callout. When a target shape is moved, copied or deleted, any callouts attached to the shape will be moved, copied or deleted too. Thus callouts stay with their target shapes, though you can reposition the callout to any offset from its target.
The Pool /Lane shape in the BPMN template allows you to add a Pool or Lane shape to your diagram. This shape is based on our Cross-functional Flowchart (CFF) shape, which means that Pools and Lanes are easy to manipulate using CFF functionality. For example, to add more lanes, you can mouse along the edge of the cross-functional flowchart to where you want to add the lane and a blue arrow will appear. Click on the blue arrow and voila, you have a new lane!
The BPMN template combines a large number of new Visio 2010 features to make building BPMN-compliant diagrams easier. Both new and advanced BPMN users will benefit from the depth of functionality available while using this template.
We are interested in your feedback on the new BPMN functionality. You can use the Send a Smile feedback tool or comment on the blog to let us know what you think.
In Visio 2010, we’ve made it easier to align and space shapes to make your diagrams look neat and organized. In a previous post we covered our new layout improvements that help clean up existing diagrams. In this post, we’re going to cover how improvements in Visio’s Dynamic Grid can help you drag a single shape and more easily position it in relation to other shapes on the page.
The Dynamic Grid is turned on by default for most diagram templates. You can turn it on or off by toggling the checkbox in the View tab:
To see the Dynamic Grid in action, simply drop a shape next to another shape and notice the orange lines that automatically appear:
In the example above, Visio detected that the selected shape matched the centerline of a nearby shape. If the shapes were of different sizes, Visio would attempt to align the shapes based on edge boundaries such as the top, bottom, left, or right edges of shapes in addition to the centerline:
Note that the Dynamic Grid only aligns the same edge boundaries of shapes. For example, a top edge of a shape will snap to the top edge of another shape, but not to the bottom edge of another shape.
The Dynamic Grid also displays orange line segments when evenly spaced shapes are found close to each other. This is useful for easily placing shapes in equal distances from one another. Simply drop a shape next to other evenly spaced shapes to see these line segments in action:
The Dynamic Grid scans both horizontally and vertically when displaying feedback. This allows you to easily position shapes in relation to many surrounding shapes:
When either an alignment or spacing relationship is found between shapes, Visio will gently snap the shape you have selected to an invisible grid. This snapping behavior makes it easy to grab a shape using the mouse and position it next to other shapes.
To help position shapes within a page, the Dynamic Grid also supports margins around pages. You can snap to page margins by simply dragging a shape towards the top, bottom, left or right margins of a page. If the page is completely empty, you can also snap to the center of the page.
To help position shapes within a container, the Dynamic Grid also supports container margins and centerlines. You can snap to containers, such as swimlanes, by simply dragging a shape around the container margin or in the center of the container:
We hope you enjoy using the new Dynamic Grid feature and we’re interested in your feedback. You can use the Send a Smile feedback tool or comment on the blog to let us know what you think.
One of the goals of the Visio 2010 release is to make it easier to create attractive, presentation-quality diagrams. Previously on this blog, we have discussed our improvements to backgrounds, layout, routing, and themes. Visio 2010 also features improvements to the default look of many templates, as well as over 500 newly designed shapes. Below are a few highlights of these changes.
Many Visio 2010 templates feature a new, consistent set of default line, font, and shadow properties that help make diagrams look more modern. Here is an example comparing part of a Visio 2007 flowchart with a Visio 2010 flowchart:
In addition to these general enhancements, below are some specific templates we made significant changes to.
The Landmark Shapes stencil in the Directional Map template has around 30 newly designed shapes. Here are a few:
The Workflow Shapes template also has around 30 newly designed shapes. Here are a few:
Here is a calendar created in Visio 2010, with our newly designed calendar and icon shapes:
Visio 2010’s timeline shapes have a sleek new look. Here is an example:
The above are just a few examples. Here is a more comprehensive list of stencils and templates with new or updated shapes:
We are interested in your feedback on these visual updates. You can use the Send a Smile feedback tool or comment on the blog to let us know what you think.
In this post, we’ll talk about the improvements we’ve made in Visio 2010 to make it easier to work with multi-page documents. With these changes, Visio provides more control when you copy and paste shapes between pages, as well as more efficient page tab management and navigation.
The biggest change with copy/paste is that if you copy shapes from one page and paste them to another, the shapes will paste to exactly the same location as on the first page. In prior versions of Visio, the shapes would always paste to the center of the window. This change makes it easier to make an identical copy of a page or to create a multi-page document that has incremental changes between pages. For example, you might have a series of flowcharts that begin with the same set of steps or a storyboard that walks through a UI design.
If you want the pasted shapes to go to a certain location on a page, rather than to the position they were copied from, you can right-click on the page at the location you want them to be placed, and choose “Paste” in the right-mouse menu. The shapes will paste to the spot where you right-clicked:
We’ve made several improvements to the page tabs to make them easier to use and more consistent with the sheet tabs in Microsoft Excel.
First, there is a new Insert Page button at the end of the page tabs, which lets you quickly add a series of pages to the end of the page tab order:
If you right-click on a page tab and choose Insert Page, the new page is inserted immediately after the page tab you right-clicked on, rather than at the end of the tab order. So you can insert the page where you want it, rather than having to add the new page at the end before dragging it to the desired location:
Since the settings in the Page Setup dialog box apply to the currently active page, we’ve added the Page Setup command to the page tab’s right-mouse menu to provide quick access to that page’s settings:
Pages in Visio can be either foreground or background pages. Foreground pages are the pages you build your diagram on. Background pages have special behaviors and are intended as a place to put objects that you want to appear on multiple foreground pages. To help you distinguish between background and foreground pages, the names on background page tabs are italicized as a hint that they are different:
Right-clicking on the forward/backward navigation buttons to the left of the page tabs brings up a menu of all of the pages in the document, so you can move quickly from one page to another:
Finally, if you want to make all the pages in your document the same orientation or size, you can apply the same setting to all of them at once, instead of having to set it for one page at a time. Click on the Orientation or Size buttons on the Design tab in the ribbon, and then right-click on the setting you want in the menu. Choose to apply it to all the pages in your document or only the current page:
All of these improvements were in direct response to feedback we heard from customers, so please continue providing us with more great feedback. Drop us a comment on the blog or use the Send a Smile feature in the Visio 2010 Beta to let us know what you think.
Windows 7 is here, and it makes it easier to find and work with your favorite applications. This post details the work we did in Visio 2010 to take advantage of new Windows 7 features, to make working with Visio documents even easier.
The new Windows 7 taskbar presents a unified interface for launching and switching between applications and documents within them. With Windows 7 and Visio 2010, it is now easier to work with multiple Visio documents at the same time.
We received lots of feedback on the Technical Preview asking for the ability to preview open Visio documents as multiple taskbar items. We listened, and now in the Visio 2010 Beta you can see previews of each Visio document directly from the taskbar, similar to Word and PowerPoint:
By clicking on a thumbnail, you can switch directly to a specific Visio document. If you hover over a thumbnail, Windows shows you a full-size preview of what that window looks like, through a feature called Aero Peek. With Visio 2010 and Windows 7, working with multiple documents at the same time is simple.
For more on the Windows 7 task bar, see this blog post on the Engineering Windows 7 Blog.
Another common request we receive is to enable Visio documents to be edited on separate monitors, similar to Word and PowerPoint. While Visio still displays multiple documents in the same application window, there is a workaround to enable dual display support: launch two instances of Visio.
You can do this in Windows 7 by launching Visio, and then right clicking the Visio icon and clicking on the “Microsoft Visio 2010” item. This will launch a second instance of Visio.
Now that you have two instances running, move one instance of Visio to your second monitor. You can then open two separate files in two separate windows. Even though you’re running two instances of Visio, they are both represented by the same icon in the Windows 7 taskbar, so it’s easy to switch between documents.
If you have a touch-enabled device, Windows 7 allows you to interact with your PC with your fingers. This feature, called Windows Touch, brings a set of gestures to the operating system that can be used in the OS and several applications.
We’ve integrated support for several Windows Touch gestures in Visio 2010:
The above scenarios work directly on the drawing surface, and in full screen mode! Check out the video below to see multi touch in action! (Note: there is no audio).
As seen in the video, we have also integrated the same touch support in the Visio Viewer and in Outlook 2010 preview mode. If you receive a Visio diagram as an attachment, you can use these touch gestures to navigate the diagram directly in Outlook 2010. Click here for more information about Windows Touch
As usual, feel free to drop us a comment on the blog or use the Send a Smile feature in the Visio 2010 Beta to let us know what you think.
Some of you have recently noticed that your install of the Visio Viewer isn’t working – this is by design and can easily be fixed. Microsoft has recently released Security Bulletin MS09-55 through Windows Update which deactivates Visio Viewers 2002, 2003 and 2007 because of a security issue. With this fix we are retiring Visio Viewer 2002 as well as Visio Viewer 2003. To get your viewer installation back into a working state you have 2 options:
The patching discussed in method #2 can also be done through Windows Update but may involve multiples runs of Windows Updates to download the relevant patches – downloading these patches directly is the most efficient way of getting the Viewer back into action.
If you have more questions about patching your viewer installation, feel free to leave a comment on our blog.
In this post, we’ll be covering improvements to the ShapeSheet in Visio 2010 that make it easier for shape developers to create and modify existing Visio shapes.
For those who don’t know, Visio shapes are more complex than they may seem at first; behind each shape is a ShapeSheet (you can get more details here and here if you're unfamiliar with the ShapeSheet). In Visio 2010, you can access a shape's ShapeSheet by selecting the shape in question and clicking the "Show ShapeSheet" button on the Developer tab. If you don’t have the Developer tab up already, learn how to turn it here. Once you’re in ShapeSheet mode you’ll see the following user interface:
As you navigate through the updated ShapeSheet experience you’ll quickly stumble on our improvements. In the ShapeSheet editing window (1 above), Visio 2010 now facilitates user input with a new feature called ShapeSheet Formula AutoComplete. The ShapeSheet user interface has also been simplified considerably by the creation of the ShapeSheet Contextual Tab (2 above) to facilitate common ShapeSheet actions.
Let’s take a deeper look into each improvement.
One key features of the ShapeSheet is that it enables Visio shape developers to create a dependency between one shape property (also known as a ShapeSheet cell) and another through a formula. For example a shape developer can set height = 2 * width.
To this day, to become a proficient shape designer, you had to memorize all 345 cell names, 17 row names, 40 section names and the syntax to 181 ShapeSheet functions – not an easy task! Visio 2010 however makes your life much easier by introducing a new feature called ShapeSheet Formula AutoComplete. This feature helps you compose ShapeSheet formulas by:
1. Providing a context-sensitive list of ShapeSheet formula keywords as you type. All ShapeSheet functions, section names, row names and most** cell names are accessible via ShapeSheet Formula AutoComplete (**Visio doesn’t surface cells in non-named rows such as the “X1” or “Y1” rows in the Geometry section). As you compose a formula in a cell, Visio scrolls a list of keywords that are appropriate for the current context and selects the keyword that most closely matches what you're typing.
Take a look below to see ShapeSheet Formula AutoComplete in action. As you type “P-R-O”, the list of keywords scrolls to the “Prop” section name which also gets selected as Visio’s best guess. After auto-completing the section name by using “.”, Visio replaces the keyword list with one that makes sense in this new context, in this case the shape data item “CostOfShape”.
Also notice that Visio helps you locate the keyword you’re looking for by sorting them alphabetically and tagging them with one of the icons below depending on what type of keyword it is.
2. Providing a quick input mechanism for ShapeSheet formula elements. Once you've typed enough letters to uniquely identify a ShapeSheet keyword, you can simply hit "Enter" or "Tab" to complete the keyword. Depending on context, the ",", ".", "!", “*”, “+”, “-”, “/”, “[”, “(“ and “)” symbols will also do the trick.
3. Providing a definition of the ShapeSheet items. If you're not sure of the definition of a ShapeSheet keyword, a tool tip appears next to the currently selected keyword in the AutoComplete list with a definition for it. For example, below, is a definition for the PATHSEGMENT function, one of the new ShapeSheet functions in Visio 2010.
4. ShapeSheet function parameter browsing. As you compose a ShapeSheet function, the function signature appears above the cell in a tooltip. The bolding in the tooltip changes as you progress through a function’s arguments.
5. ShapeSheet formula parenthesis matching. As you close a parenthesis pair with a ")" character, ShapeSheet Formula AutoComplete will highlight the matching open-parenthesis in red.
ShapeSheet Formula AutoComplete is available in the following textboxes, dialogs and windows throughout Visio 2010:
The ShapeShee Formula AutoComplete feature can be toggled off through one of these entry points:
Apart from ShapeSheet Formula AutoComplete, the ShapeSheet has gotten a facelift thanks to the Fluent UI – all ShapeSheet related commands are now in one place. Take a look at the ShapeSheet contextual tab below.
In more detail:
Toggle the “formula” view of the ShapeSheet – all cell formulas are shown.
Toggle the “value” view of the ShapeSheet – all cell results are shown.
Surfaces the “View Sections” dialog which lets you show or hide ShapeSheet sections.
Surfaces the “Style Explorer” pane that lets you view and edit styles in the current drawing.
Adds optional sections of your choice to the currently selected ShapeSheet.
Deletes the optional section you have currently selected.
Adds a row to the optional section you have currently selected.
Deletes a row from the optional section you have currently selected.
Surfaces the “Edit Formula Dialog”, seen below, which gives you more room to enter long equations as well as the possibility of adding carriage returns to your formulas to improve legibility. As you can see below, ShapeSheet Formula AutoComplete is still active in this dialog.
Note that you can also open this dialog by using the “ctrl+e” key combination.
Adds a ShapeData row to the currently selected ShapeSheet.
Adds a Hyperlink row to the currently selected ShapeSheet.
Adds an Action Row to the currently selected “Actions” section.
Toggles the visibility of the “Formula Tracing” window.
List in the “formula tracing” window all the cells the currently selected cell depends on.
List in the “formula tracing” window all the cells that depend on the the currently selected cell.
Jumps to the previous cell in the formula tracing history.
Jumps to the next cell in the formula tracing history.
Using the Fluent UI, Visio can now enable and disable interactively the ShapeSheet operations that you can take against a particular cell while you're editing it; this removes some of the right-click menu hunting you may have done in the past.
The final change we’ve made to the ShapeSheet experience in Visio 2010, is to enable shape designers to open one ShapeSheet window per shape instead of re-using the same window for all shapes, the latter behavior being the default in previous releases of Visio.
Download Visio 2010 Beta and start building shapes with the 2010 ShapeSheet -- we're interested in hearing what you think of Visio's new and improved ShapeSheet experience. You can send us your feedback by either commenting on this blog post or sending us information via Send a Smile.