Check out my new blog at

Friday, March 14, 2008

User Interface Prototyping in Microsoft Visio 2007

I have been a Visio user for years, years and more years, back before it was a Microsoft product.  In fact, when I was at Microsoft I worked with Visio to do some Microsoft Project integration (you all know that Visio does Gantt charts and other project management graphics).  I remember a meeting at their headquarters.  The manager on the Visio side was running late.  He came running in, got out a can of chewing tobacco, took a huge dip of it, and said something to effect of "what can I do for Microsoft today?".  Funny guy...

But I digress.

I am doing a bunch of things these days, including working on 360° PMCA™ and continuing to work our Microsoft Project 2003 to 2007 migration.  Busy busy.  By the way, to type 360° PMCA™ really fast, you do this

3-6-0-alt 0176-P-M-C-A-alt 0153. 

Knowing the key codes to commonly used symbols is really handy.  But I digress again.

Part of our 2007 migration includes porting (read: rewriting) some line-of-business applications to SharePoint 2007.  These are legacy (read: painfully old and hard to use) applications.  I am taking the functional requirements these legacy applications represent and recasting them completely.

Part of the effort requires doing some user interface prototype.  I like Visio for this very much.  I start with a screen shot of a blank Project 2007 Web Access page.  I use Snag-It for screen captures and I absolutely love it:


imageimageNext, create a Visio document from the Windows XP User Interface Template.  The Shapes are sort of useful, especially hijacking the tab body shape and tab shape to use as nice looking panels.  I will show you that in a minute.

Next thing is to insert a new page into your Visio document.  Select the Background option button, as seen below.


Then I paste the blank PWA screen shot into the background page.  Obviously, this will serve as the background for my user interface prototypes.

On the background I place the elements of the user interface that will be common across all screens.  My my case, it is a toolstrip panel with a help link and a working area panel.  Also, in the upper right corner you will notice a semitransparent rectangle.  I use this as a title area which you will see later.  Here is what it looks like now:


Those panels are actually tab control shapes re-purposed as a panel, which you can see in the Shapes Tool to the right, enclosed in the red square. Once the common UI elements are arranged on the background, you can insert another page into the Visio document and choose your background page to serve as the canvas for doing your prototyping.

Before I get too much further, let me take a moment to plug my absolute favorite icon designer, Mark James of the UK.  His free Silk collection is beautiful.

Click the image below to see the whole collection.


Okay, now that we got that little plug out of the way...

imageVisio has some really cool features called Snap and Glue, plus the grid and connection points that can help tremendously when building certain kinds of diagrams.  For UI prototyping, I turn almost all of this off, so Visio snaps only to guides and shape geometry and glues only to guides.

I turn off the grid, connection points, leaving just the ruler and guides present.

Next I create some guides that frame the background UI elements (do this on the background page and the guides will be present on all pages that use that background).  The the video below to see how this is done.

Now, with my background, common UI elements, and guides setup, I can begin prototyping my user interface.

The UI I am working on happens to have some panels, which I lay down first and then protect them from selection so I can start the work of fleshing out the panels.


Below is a sample of a fictitious user interface (unfortunately, the real work I am doing is proprietary so I cannot share it).




Anonymous said...

Wow that was unusual. I just wrote an really long comment but after I
clicked submit my comment didn't show up. Grrrr... well I'm
not writing all that over again. Regardless, just wanted to say fantastic blog!

My weblog

Anonymous said...

For newest news you have to pay a quick visit web and on web I found this web site as a most excellent website
for newest updates.

Have a look at my page :: seborrheic Dermatitis face


Content on this site is provided "AS IS" with no warranties and confers no rights. Additionally, all content on this site is my own personal opinion and does not represent my employer's view in any way.