Home
%3CLINGO-SUB%20id%3D%22lingo-sub-237338%22%20slang%3D%22en-US%22%3EThe%20Office%20Fluent%20UI%20in%20the%20Visio%202010%20Technical%20Preview%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-237338%22%20slang%3D%22en-US%22%3E%0A%20%26lt%3Bmeta%20http-equiv%3D%22Content-Type%22%20content%3D%22text%2Fhtml%3B%20charset%3DUTF-8%22%20%2F%26gt%3B%3CSTRONG%3E%20First%20published%20on%20MSDN%20on%20Aug%2C%2012%202009%20%3C%2FSTRONG%3E%20%3CBR%20%2F%3E%3CP%3EThe%20Visio%202010%20user%20interface%20has%20been%20completely%20revamped%20this%20release%20based%20on%20the%20Office%20Fluent%20or%20%E2%80%9CRibbon%E2%80%9D%20UI.%20The%20Office%20Fluent%20UI%20represents%20a%20dramatic%20departure%20from%20the%20overloaded%20menu%20and%20toolbar%20design%20model%20of%20previous%20Visio%20releases.%20Visio%E2%80%99s%20extensive%20capabilities%20are%20now%20organized%20into%20logical%2C%20easy%20to%20find%20groups%20that%20help%20you%20%3CI%3Eaccomplish%20tasks%20%3C%2FI%3E%3CI%3Eefficiently%20%3C%2FI%3Erather%20than%20choosing%20features.%3C%2FP%3E%0A%20%20%3CP%3EThere%20are%20several%20design%20elements%20that%20comprise%20the%20Office%20Fluent%20UI.%3C%2FP%3E%0A%20%20%3CP%3EThe%20%3CB%3ERibbon%20%3C%2FB%3Ereplaces%20menus%20and%20toolbars%20as%20the%20place%20to%20find%20functionality%20organized%20to%20help%20you%20accomplish%20tasks.%20You%E2%80%99ll%20find%20the%20many%20features%20that%20Visio%202010%20has%20in%20common%20with%20other%20Office%20applications%20on%20Ribbon%20tabs%20of%20the%20same%20name.%3C%2FP%3E%0A%20%20%3CP%3EHere%E2%80%99s%20a%20brief%20breakdown%20of%20each%20of%20the%20core%20tabs%20across%20the%20Visio%202010%20Ribbon.%3C%2FP%3E%0A%20%20%3CP%3EThe%20Home%20tab%20contains%20the%20most%20common%20and%20frequently%20used%20drawing%20tasks%20and%20tools%3A%20cut%2Fcopy%2Fpaste%20from%20the%20clipboard%2C%20formatting%20text%20and%20shapes%2C%20drawing%20tools%2C%20and%20shape%20arrangement.%3C%2FP%3E%0A%20%20%3CP%3E%3CA%20href%3D%22https%3A%2F%2Fmsdnshared.blob.core.windows.net%2Fmedia%2FTNBlogsFS%2FBlogFileStorage%2Fblogs_msdn%2Fvisio%2FWindowsLiveWriter%2FTheOfficeFluentUIintheVisio2010Technical_8BAB%2Fimage_2.png%22%20target%3D%22_blank%22%20rel%3D%22nofollow%20noopener%20noreferrer%20noopener%20noreferrer%22%3E%20%3CIMG%20src%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F43851iB48409BFF7E191BF%22%20%2F%3E%20%3C%2FA%3E%3C%2FP%3E%0A%20%20%3CP%3E%3CI%3E%20%3C%2FI%3E%3C%2FP%3E%0A%20%20%3CP%3EThe%20Insert%20tab%20is%20where%20you%20introduce%20new%20elements%20into%20a%20drawing%3A%20pages%2C%20pictures%2C%20clip%20art%2C%20CAD%20drawings%2C%20as%20well%20as%20new%20Container%20and%20Callout%20shapes.%3C%2FP%3E%0A%20%20%3CP%3E%3CA%20href%3D%22https%3A%2F%2Fmsdnshared.blob.core.windows.net%2Fmedia%2FTNBlogsFS%2FBlogFileStorage%2Fblogs_msdn%2Fvisio%2FWindowsLiveWriter%2FTheOfficeFluentUIintheVisio2010Technical_8BAB%2Fimage_4.png%22%20target%3D%22_blank%22%20rel%3D%22nofollow%20noopener%20noreferrer%20noopener%20noreferrer%22%3E%20%3CIMG%20src%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F43852iB4B69CB51DD04E46%22%20%2F%3E%20%3C%2FA%3E%3C%2FP%3E%0A%20%20%3CP%3EThe%20Design%20tab%20includes%20everything%20you%20might%20change%20for%20an%20entire%20page%3A%20page%20orientation%20and%20size%2C%20themes%2C%20backgrounds%2C%20borders%20and%20title%20blocks%2C%20layout%20commands%2C%20and%20connector%20styles.%3C%2FP%3E%0A%20%20%3CP%3E%3CA%20href%3D%22https%3A%2F%2Fmsdnshared.blob.core.windows.net%2Fmedia%2FTNBlogsFS%2FBlogFileStorage%2Fblogs_msdn%2Fvisio%2FWindowsLiveWriter%2FTheOfficeFluentUIintheVisio2010Technical_8BAB%2Fimage_6.png%22%20target%3D%22_blank%22%20rel%3D%22nofollow%20noopener%20noreferrer%20noopener%20noreferrer%22%3E%20%3CIMG%20src%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F43853i8E27134886B94603%22%20%2F%3E%20%3C%2FA%3E%3C%2FP%3E%0A%20%20%3CP%3EThe%20Data%20tab%20provides%20everything%20you%20need%20for%20linking%20external%20data%20to%20drawings%20and%20shapes%2C%20displaying%20that%20data%20with%20data%20graphics%2C%20and%20generating%20legends%20to%20show%20the%20meaning%20of%20data%20graphics.%3C%2FP%3E%0A%20%20%3CP%3E%3CA%20href%3D%22https%3A%2F%2Fmsdnshared.blob.core.windows.net%2Fmedia%2FTNBlogsFS%2FBlogFileStorage%2Fblogs_msdn%2Fvisio%2FWindowsLiveWriter%2FTheOfficeFluentUIintheVisio2010Technical_8BAB%2Fimage_8.png%22%20target%3D%22_blank%22%20rel%3D%22nofollow%20noopener%20noreferrer%20noopener%20noreferrer%22%3E%20%3CIMG%20src%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F43854i6A2A80DD1D2A45A4%22%20%2F%3E%20%3C%2FA%3E%3C%2FP%3E%0A%20%20%3CP%3EThe%20Process%20tab%20includes%20functionality%20focused%20on%20the%20creation%20of%20business%20process%20diagrams%3A%20simplified%20creation%20of%20subprocesses%2C%20validation%20of%20diagrams%20based%20upon%20defined%20rules%2C%20import%20and%20export%20of%20SharePoint%20workflows.%3C%2FP%3E%0A%20%20%3CP%3E%3CA%20href%3D%22https%3A%2F%2Fmsdnshared.blob.core.windows.net%2Fmedia%2FTNBlogsFS%2FBlogFileStorage%2Fblogs_msdn%2Fvisio%2FWindowsLiveWriter%2FTheOfficeFluentUIintheVisio2010Technical_8BAB%2Fimage_10.png%22%20target%3D%22_blank%22%20rel%3D%22nofollow%20noopener%20noreferrer%20noopener%20noreferrer%22%3E%20%3CIMG%20src%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F43855i89175ABF77929F41%22%20%2F%3E%20%3C%2FA%3E%3C%2FP%3E%0A%20%20%3CP%3EThe%20Review%20tab%20includes%20proofing%20and%20language%20tools%20as%20well%20as%20functionality%20for%20inserting%20and%20managing%20comments%20and%20other%20markup%20when%20reviewing%20diagrams.%3C%2FP%3E%0A%20%20%3CP%3E%3CA%20href%3D%22https%3A%2F%2Fmsdnshared.blob.core.windows.net%2Fmedia%2FTNBlogsFS%2FBlogFileStorage%2Fblogs_msdn%2Fvisio%2FWindowsLiveWriter%2FTheOfficeFluentUIintheVisio2010Technical_8BAB%2Fimage_12.png%22%20target%3D%22_blank%22%20rel%3D%22nofollow%20noopener%20noreferrer%20noopener%20noreferrer%22%3E%20%3CIMG%20src%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F43856i18D794DD0839872E%22%20%2F%3E%20%3C%2FA%3E%3C%2FP%3E%0A%20%20%3CP%3EThe%20View%20tab%20is%20where%20all%20drawing%20and%20visual%20aids%20that%20assist%20diagram%20creation%2C%20such%20as%20rulers%2C%20grid%2C%20AutoConnect%2C%20and%20Dynamic%20Grid%20are%20turned%20on%20or%20off.%3C%2FP%3E%0A%20%20%3CP%3E%3CA%20href%3D%22https%3A%2F%2Fmsdnshared.blob.core.windows.net%2Fmedia%2FTNBlogsFS%2FBlogFileStorage%2Fblogs_msdn%2Fvisio%2FWindowsLiveWriter%2FTheOfficeFluentUIintheVisio2010Technical_8BAB%2Fimage_14.png%22%20target%3D%22_blank%22%20rel%3D%22nofollow%20noopener%20noreferrer%20noopener%20noreferrer%22%3E%20%3CIMG%20src%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F43857iC8D10630506DFAE5%22%20%2F%3E%20%3C%2FA%3E%3C%2FP%3E%0A%20%20%3CP%3EAt%20the%20bottom%20of%20the%20application%20window%20is%20the%20new%20%3CB%3EStatus%20Bar%20%3C%2FB%3E.%20The%20right%20side%20of%20the%20Status%20Bar%20includes%20convenient%20controls%20for%20quickly%20adjusting%20the%20zoom%20level%20of%20the%20Visio%20drawing%2C%20switching%20into%20Full%20Screen%20mode%2C%20or%20switching%20between%20open%20drawings.%3C%2FP%3E%0A%20%20%3CP%3E%3CA%20href%3D%22https%3A%2F%2Fmsdnshared.blob.core.windows.net%2Fmedia%2FTNBlogsFS%2FBlogFileStorage%2Fblogs_msdn%2Fvisio%2FWindowsLiveWriter%2FTheOfficeFluentUIintheVisio2010Technical_8BAB%2Fimage_16.png%22%20target%3D%22_blank%22%20rel%3D%22nofollow%20noopener%20noreferrer%20noopener%20noreferrer%22%3E%20%3CIMG%20src%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F43858i7761577D5DF9621C%22%20%2F%3E%20%3C%2FA%3E%3C%2FP%3E%0A%20%20%3CP%3EThe%20left%20side%20of%20the%20Status%20Bar%20includes%20status%20items%20related%20to%20what%20you%E2%80%99re%20working%20with.%20Beyond%20merely%20showing%20status%2C%20these%20items%20help%20you%20take%20actions.%20For%20example%2C%20if%20you%20need%20to%20set%20the%20width%20of%20a%20shape%2C%20simply%20select%20it%20and%20click%20on%20the%20Width%20status%20item.%20The%20Size%20%26amp%3B%20Position%20window%20is%20opened%20with%20the%20Width%20value%20already%20selected.%3C%2FP%3E%0A%20%20%3CP%3E%3CA%20href%3D%22https%3A%2F%2Fmsdnshared.blob.core.windows.net%2Fmedia%2FTNBlogsFS%2FBlogFileStorage%2Fblogs_msdn%2Fvisio%2FWindowsLiveWriter%2FTheOfficeFluentUIintheVisio2010Technical_8BAB%2Fimage_18.png%22%20target%3D%22_blank%22%20rel%3D%22nofollow%20noopener%20noreferrer%20noopener%20noreferrer%22%3E%20%3CIMG%20src%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F43859i2BD94DE6FAB221A9%22%20%2F%3E%20%3C%2FA%3E%3C%2FP%3E%0A%20%20%3CP%3EIn%20the%20upper%20left%20corner%20of%20the%20application%20window%20is%20the%20%3CSTRONG%3EQuick%20Access%20Toolbar%20%3C%2FSTRONG%3E%2C%20into%20which%20you%20can%20add%20the%20commands%20you%20use%20most%20frequently%2C%20eliminating%20the%20need%20to%20switch%20to%20the%20Ribbon%20tab%20on%20which%20they%20are%20located%20while%20creating%20diagrams.%3C%2FP%3E%0A%20%20%3CP%3E%3CA%20href%3D%22https%3A%2F%2Fmsdnshared.blob.core.windows.net%2Fmedia%2FTNBlogsFS%2FBlogFileStorage%2Fblogs_msdn%2Fvisio%2FWindowsLiveWriter%2FTheOfficeFluentUIintheVisio2010Technical_8BAB%2Fimage_20.png%22%20target%3D%22_blank%22%20rel%3D%22nofollow%20noopener%20noreferrer%20noopener%20noreferrer%22%3E%20%3CIMG%20src%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F43860i57D36FE9F794B6F0%22%20%2F%3E%20%3C%2FA%3E%3C%2FP%3E%0A%20%20%3CP%3EThis%20post%20is%20merely%20an%20overview%20of%20the%20primary%20Office%20Fluent%20design%20elements%20you%E2%80%99ll%20see%20in%20Visio%202010%20Technical%20Preview.%20Stay%20tuned%20for%20future%20posts%20that%20will%20explore%20the%20new%20design%20in%20greater%20detail.%3C%2FP%3E%0A%20%20%3CP%3EWe're%20interested%20in%20your%20feedback%20on%20the%20new%20Office%20Fluent%20UI%20design%20in%20Visio%202010%20Technical%20Preview%2C%20so%20use%20the%20%3CA%20href%3D%22http%3A%2F%2Fblogs.technet.com%2Foffice2010%2Farchive%2F2009%2F07%2F15%2Ftell-us-what-you-think-about-office-2010-technical-preview.aspx%22%20target%3D%22_blank%22%20rel%3D%22nofollow%20noopener%20noreferrer%20noopener%20noreferrer%22%3ESend%20a%20Smile%20feedback%20tool%20%3C%2FA%3Eor%20comment%20on%20the%20blog%20to%20let%20us%20know%20what%20you%20think.%3C%2FP%3E%0A%20%0A%3C%2FLINGO-BODY%3E%3CLINGO-TEASER%20id%3D%22lingo-teaser-237338%22%20slang%3D%22en-US%22%3EFirst%20published%20on%20MSDN%20on%20Aug%2C%2012%202009%20The%20Visio%202010%20user%20interface%20has%20been%20completely%20revamped%20this%20release%20based%20on%20the%20Office%20Fluent%20or%20%E2%80%9CRibbon%E2%80%9D%20UI.%3C%2FLINGO-TEASER%3E%3CLINGO-LABS%20id%3D%22lingo-labs-237338%22%20slang%3D%22en-US%22%3E%3CLINGO-LABEL%3Eall%20posts%3C%2FLINGO-LABEL%3E%3CLINGO-LABEL%3Evisio%202010%3C%2FLINGO-LABEL%3E%3C%2FLINGO-LABS%3E
Microsoft
First published on MSDN on Aug, 12 2009

The Visio 2010 user interface has been completely revamped this release based on the Office Fluent or “Ribbon” UI. The Office Fluent UI represents a dramatic departure from the overloaded menu and toolbar design model of previous Visio releases. Visio’s extensive capabilities are now organized into logical, easy to find groups that help you accomplish tasks efficiently rather than choosing features.

There are several design elements that comprise the Office Fluent UI.

The Ribbon replaces menus and toolbars as the place to find functionality organized to help you accomplish tasks. You’ll find the many features that Visio 2010 has in common with other Office applications on Ribbon tabs of the same name.

Here’s a brief breakdown of each of the core tabs across the Visio 2010 Ribbon.

The Home tab contains the most common and frequently used drawing tasks and tools: cut/copy/paste from the clipboard, formatting text and shapes, drawing tools, and shape arrangement.

The Insert tab is where you introduce new elements into a drawing: pages, pictures, clip art, CAD drawings, as well as new Container and Callout shapes.

The Design tab includes everything you might change for an entire page: page orientation and size, themes, backgrounds, borders and title blocks, layout commands, and connector styles.

The Data tab provides everything you need for linking external data to drawings and shapes, displaying that data with data graphics, and generating legends to show the meaning of data graphics.

The Process tab includes functionality focused on the creation of business process diagrams: simplified creation of subprocesses, validation of diagrams based upon defined rules, import and export of SharePoint workflows.

The Review tab includes proofing and language tools as well as functionality for inserting and managing comments and other markup when reviewing diagrams.

The View tab is where all drawing and visual aids that assist diagram creation, such as rulers, grid, AutoConnect, and Dynamic Grid are turned on or off.

At the bottom of the application window is the new Status Bar . The right side of the Status Bar includes convenient controls for quickly adjusting the zoom level of the Visio drawing, switching into Full Screen mode, or switching between open drawings.

The left side of the Status Bar includes status items related to what you’re working with. Beyond merely showing status, these items help you take actions. For example, if you need to set the width of a shape, simply select it and click on the Width status item. The Size & Position window is opened with the Width value already selected.

In the upper left corner of the application window is the Quick Access Toolbar , into which you can add the commands you use most frequently, eliminating the need to switch to the Ribbon tab on which they are located while creating diagrams.

This post is merely an overview of the primary Office Fluent design elements you’ll see in Visio 2010 Technical Preview. Stay tuned for future posts that will explore the new design in greater detail.

We're interested in your feedback on the new Office Fluent UI design in Visio 2010 Technical Preview, so use the Send a Smile feedback tool or comment on the blog to let us know what you think.