Visio Use at Microsoft: New Product User Interface Design for Program Managers

  • Article

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:

  1. Create a new stencil for your application prototypes

  2. Create a screenshot of your “background” pages to use as application frame pages or your base portal page (optional).

  3. 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

Comments

  • Anonymous
    January 31, 2005
    We use Visio extensively to create screen mock-ups as part of our FRD. Very helpful and quick to create screens.
  • Anonymous
    January 31, 2005
    So I guess the obvious question is, Are these stencils available for the unwashed masses?

    John...
  • Anonymous
    January 31, 2005
    No, as you might imagine, since the stencils are used for the next generation of MS product, they won't be posted for external use. I wanted to talk about the UI toolkits we use internally to give folks an example of what they could do for their products (like what AK.NET talks about in the other feedback to this post).

    Thanks,
    Mai-lan
  • Anonymous
    February 02, 2005
    I've found the stencils that come with 2k3 for UI design are clunky and very hard to use. Panels refuse to resize to fill a form without zooming in 200%, wizards won't resize no matter what (even after turning off shape protections), yadda yadda. I guess I'm spoiled from using VS' designer. If Visio's shapes worked more like VS' designer, I'd be more inclined to design UI's in Visio. Now, it's more efficient for me to create them in VS. Not just because it's easier, but also because you can pass the executable on for approval, and once everyone is agreed that the UI is perfected, you already have the framework for the program constructed.
  • Anonymous
    February 03, 2005
    In our Product Management group, I use Visio extensively to mock-up screens. I agree about the VS designer comment previously, but I would really like to see more templates in Visio for this purpose. I struggle with creating hundreds of screens representing the many "states" of the application being developed. As the design changes, all the screens I've mocked up previously must be updated to reflect the changes. I know we would pay good money to have a more powerful mock-up tool that's something in between Visio and VS designer. I think this could be a whole community of PM and development posting UI stencils, ideas for more efficient mockup processes, etc. Any links or resources people have would be greatly appreciated!!
  • Anonymous
    February 03, 2005
    Related question: often our graphics designers will provide graphical headers and toolbar icon graphics, that I then need to include in Visio as part of the screen mockups for our Web apps. When I paste these into Visio, however, they are not crisp, loking blurry instead.

    Also, when I have alot of screen elements (Visio stencils and graphics in combination) the screen often re-paints itself as I try to take a screenshot to paste into our Requirements doc. Any suggestions?
  • Anonymous
    February 18, 2005
    If anyone is interested, I have been contacted by a Visio solution developer who has said that they could help out with customer requests to develop custom shapes for designing user interfaces. Contact me through the comments form on this blog if you want me to hook you up with vendor.

    Thanks,
    Mai-lan
  • Anonymous
    February 23, 2005
    Thanks for the concepts Mai-lan. I wish that MSFT would make some standardized templates available to fellow PM's.
  • Anonymous
    August 09, 2006
    In this post, Mai-lan talks about how we use Visio to build mockups of the UI for new features. Of course,...
  • Anonymous
    June 19, 2009
    PingBack from http://debtsolutionsnow.info/story.php?id=8876