
In a recent training session on Visio, I explained the benefits of using Backgrounds when building wireframes. Much like the slide master in PowerPoint, making an edit on your Background will be reflected in all foreground pages whose properties have been set up to leverage that Background. A time saver (make changes in one place instead of on each page) and ensures consistency in object placement across pages.
Here's where the Background falls short. If you're planning on building out your Visio wireframes into clickable prototypes for usability testing, Visio doesn't publish hyperlinks you've built into your Background. Why? Visio publishes Foreground pages and Foreground pages show Background elements almost as a sub-layer or image, not as individual elements on the page. And unfortunately, we typically use Backgrounds for universal elements such as global navigation, footer/utility links, search...objects that are constant across all pages, but that must be clicked on during usability testing.
You have two solutions:
1. When it's time to build your clickable prototype, build your hyperlinks into your Background page, group your Background objects and paste them into each Foreground page, sending the Background object to the back so that your Foreground elements still appear in the front of the canvas. Clearly a work-around.
2. If you know you'll eventually be building out wireframes into clickable prototypes (which we typically know at project inception), don't use Backgrounds when you begin wireframing. Instead, use Document Stencils. File > Shapes > Show Document Stencil or Alt+F+E+D for those of you who love shortcuts. Here's how it works. Build an object for your page. Drag it into your document stencil and name it. As you wireframe other pages, drag the shapes you've built and added to your document stencil onto new pages. If at any point, there's an edit to make to the object, make the change in the document stencil - not on each individual instances of that shape. When you save the change to the document stencil, that change will be reflected across all pages using that object. This is also true for hyperlinks. As long as you've draged the object from the document stencil onto your page, any/all edits will be instantly reflected for that object across all pages.
When not to use document stencils: If you're not going to be building clickable prototypes from your wireframes, I still recommend using Backgrounds. With backgrounds, you set up your elements in one place, and the design of that page (and placement of objects) is applied to all applicable foregrounds. With document stencils, you have to paste in the elements you want (e.g., global nav bar) into each page and you'll also need to do some tweaking to ensure consistent alignment across pages.
Consider this: If you've created your wireframes from the get-go using document stencils, you only have to add hyperlinks to the objects in the document stencil and they will be applied to all instances of that object in your file. A great time saver when building a clickable prototype.
Don't forget: you must still create individual elements for hyperlinks. Creating a long line of text to serve as your global navigation tabs will not work if you're trying to make each link a unique hyperlink. A draw back that Visio will hopefully fix down the line.
Thanks KV
Comments
Sat, 02.08.2008 08:49
Thanks a lot for the help! This technique is really nice.
Wed, 16.07.2008 04:20
Nice article about placing and choosing right matter while desiging a web page.
Sat, 21.06.2008 14:10
very nice
Tue, 03.06.2008 05:13
Hi, Regarding Method #3: You can get rid of the long dashed focus border that shows in Firefox by adding 'overflow: [...]
Tue, 29.04.2008 17:45
Thank you for the assistance. It worked perfectly.
Mon, 31.03.2008 09:38
Ditto what Anna said. Each time a Project Mgr or a biz owner asks me, "when are we doing user testing"? They are [...]
Thu, 27.03.2008 16:35
Your points on the idea that you're testing a site, not the user, are well taken. But I think "user testing" can be [...]
Thu, 27.03.2008 13:18
Thanks for the great stencil. Could I talk you into applying a license to the stencil like from Creative Commons or [...]