Visio Use at Microsoft: New Product User Interface Design for Program Managers
Among other things, Program Managers at Microsoft design the user interface experience for the next generation of product. We work with our graphic designers determine the goals, color, font, and common design elements for screens, but in many groups PMs put together the actual screen design that get pushed through usability tests, design reviews, coding, and finally into production. Most of us don’t have a whole lot of experience in higher end graphics design applications like Photoshop. Paint is a wonderful application for many purposes but when you’re cutting and pasting, changing font, and working with gradient background, it’s slow and painful.
Many Program Managers are now using Visio to build their screen prototypes and final design. The entire Office division (Word, PowerPoint, Excel, Outlook, OneNote, Visio, Project, Publisher, SharePoint, InfoPath, FrontPage and Visio) as well as Longhorn PMs use different Visio “toolkits”, which are Visio stencils containing shapes that represent elements of common design. No code in these toolkits – these are Visio shapes on stencils. Since this involves new product design, I can’t provide any screenshots but I can talk about why we use the Visio stencils as well as how.
Visio isn’t a full-fledged graphics designer application like Photoshop or Illustrator, which is a good thing for Program Managers who are more interested in defining and updating usable prototypes than coming up with beautiful designs (we have a designer organization for that). Program Managers are also likely to be familiar with Visio from flowcharting. Visio has several important features for putting together and updating screen prototypes:
- Drag-and-drop elements: You can have individual shapes that represent common screen elements like OK buttons or the standard Passport login screen that are easy to drag from a stencil and drop onto a prototype.
- Element organization: We use shapes for application frames. We can then drag a shape like an Office task pane on top of the application frame. We can add shapes like selection boxes and new text boxes. All of the elements can be reorganized using the mouse to drag shapes around. It’s easy to use standard Visio functionality to send shapes to back, group them together to move as a selection, and add/delete.
- Text support: If you’re changing text or text formatting on user interface or mocking up user entries, using a text box that can be moved around or updating text on a Visio shape is quick and easy.
- Layers: Visio also has layer support in case you wanted to work with multiple layers.
- Hyperlinks: You can add a hyperlink to a shape without using code. This makes it easy to develop more "real" online prototypes for usability testing.
The server applications like SharePoint and Project have different shapes on their stencils than the product-specific application frame shape used by the client apps. The server stencils offer one or more standard “background” shapes that represent a page on a portal or a standard form. The user drags the portal page, which is a JPG or some other image, onto the Visio page and uses that as the application frame.
The user then selects shapes from the stencil, like drop-down lists and search textboxes to position appropriately on the application frame page or the portal page. Some examples from the Office client application stencil are a shape for progress bars, selection boxes, and hyperlink icons. Many of these shapes are based on the Windows XP stencil that Visio Professional ships.
For those of you out there who want to do their own toolkits, you’ll end up doing the following:
Create a new stencil for your application prototypes
Create a screenshot of your “background” pages to use as application frame pages or your base portal page (optional).
Either use the Windows XP shapes or create your own. The easiest way to start your own stencil with all the XP shapes is to right-click on the title of the stencil and save the stencil under a different name. You can also right-click on shapes in the stencil and copy to another read/write stencil. You can create your own shapes from scratch or modify the existing Windows XP shape by right-clicking on the shape and selecting the Edit Master option. (You can only do this on your own stencil, not directly on the read-only Windows XP stencils).
-- Mai-lan
This posting is provided "AS IS" with no warranties, and confers no rights