EightShapes is proud to be a gift bag sponsor at UX Week 2007. Our contribution — a mousepad with keyboard shortcuts for one of five popular diagramming applications.
Here’s the cool part: if you got a mousepad for a program you don’t use, you can trade with another conference attendee!
Shy? Haven’t met someone with just the right mousepad? Drop us a line via info [at] eightshapes [dot] com and we can hook you up!
(This post is dedicated to Donna Maurer, who is as committed to the Visio cause as I am.)
At the IA Retreat, Todd Warfel put a great presentation together on making wireframes documents cleaner through the use of grids. His talk was not only useful and engaging, but it led to some really interesting discussions about the use of wireframes in our work.
One thing that came up was including a table of contents at the beginning of wireframes documents. I’m a big fan of tables of contents. They establish an agenda for your presentation and sets participants’ expectations.
Of course, creating a table of contents can be a real pain in the neck, especially with long Visio documents. So, I did a web search to find out if Visio can automate this for me. Of course, it can. This script creates a series of boxes on the first page of your document, where each box contains the name of one page. This script, however, has some shortcomings:
So, I dusted off my scripting chops and made a couple modifications. My version of the script:
The script puts the boxes off to the side (at 14″ on the horizontal axis) so you can easily reposition them without covering anything else on your cover page.
Donna Maurer, Livia Labate, and Rashmi Sinha consistently write insightful commentary and useful advice. You won’t find three more divergent perspectives on the same business. That’s not to say that they disagree with each other. Rather, their approach and style of talking about information architecture and design problems is radically different. Recent highlights:
I’m thoroughly enjoying Tracing Genres Through Organizations. Spinuzzi provides a unique perspective on industry-standard user-centered design best practices and has opened my eyes to a different way of thinking about genre. More on this in a subsequent post, since I’m barely 50 pages in. Spinuzzi, however, uses a few words I’ve never seen before. Here are their definitions:
Taking a mesoscopic view of American society, one can easily see the introduction of new tropes about terrorism that could only result by praxis in a post-9/11 context.
How’d I do?
With my shiny new G4 iBook and iPod Shuffle, I’m ripe for trying podcasting, but it turns out most podcasts suck. (Don’t get me started on the hour-long bluegrass show that was 45 minutes of the host talking to his cat interspersed with a quarter hour of music.) Livia’s got a couple good suggestions and I thoroughly enjoyed listening to “In Our Time” while doing my morning chores today, but I have no idea where to begin. Any suggestions? I’m looking for just about anything smart or funny (especially smart and funny) that’s no more than 30 minutes and that’s something I won’t be able to read online. (One or two people monologuing seems like spoken-blog, and not worth downloading, but you should try to prove me wrong.)
Please, help me out.
I’ve started replacing the words “user experience” in my writing with “design”, a la Todd Warfel, and have been pleased with the result.
If you’re using backgrounds in your Visio documents to represent the skeleton of a screen, give the background generic names for the screen. For example, “Log-in” or “Home Page”. Assign foreground pages names that describe the particular state, like “Anonymous user” or “Default view”. This can get challenging because several screens may need to reflect the same view — several screens may have a “default” for example.
Create a new background with a titleblock on it. The title block should have two fields: screen and view. In each of these text areas insert a field. For screen, use “background page name” and for view use “page name.” On each foreground page, this will create a title block with the appropriate labeling. It’s a small step, but it can help make bookkeeping a little easier.
Obsessed with comics? Me, too. My obsession, however, is creeping into my work. I’m finding more and more references to the genre in my documentation. For example, I have been using thought balloons to represent user needs:
Here’s a quick and easy way to make them.
This shape is in File –> Shapes –> Visio Extras –> Callouts
Once the stencil opens, scroll down until you see the 2-D Word Balloon shape. Drag it do your drawing. This shape will serve as the basis for the thought balloon. We’ll change it by creating a bubbly line pattern. A line pattern is the format for the line: dotted, dashed, double, etc. Visio allows you to create custom line patterns.
Before creating the pattern, however, you should change the corner rounding option for the shape. The corner rounding tool may be in your tool bar. It looks like this:
Select any one of the options. You can play with this later to get the look you want.
If it’s not already showing, display the Drawing Explorer palette. You can do this from the View menu.
The Drawing Explorer contains a list of folders. Right-click on the Line Patterns folder and choose “New Pattern…” In the New Pattern dialog enter the name for the pattern (eg: “thought bubble”) and click OK. The default settings are what we want.
The new pattern now appears in the Line Patterns folder. Right-click the pattern name and choose “Edit Pattern Shape”. This will bring up a new window. It may be a little confusing because it looks like visio has opened a new drawing, but it hasn’t.
Now comes the tricky part. Drawing with the grid turned on may help. Draw four straight lines: one a quarter of an inch, one half an inch, one three quarters of an inch, and one a full inch long. Using the pencil tool, drag the curve control of each line up to form a semi-circle:
Once you have these, assemble them in some random order. Be sure to keep the baseline the same:
Now, select all the semi-circles and join them together. The join command is in Shapes –> Operations. Be sure to choose “Join” and not any of the other commands.
Once you’ve joined the semi-circles together, close this window. Visio will want to know if it should update the pattern and all shapes using the pattern. Click “Yes”.
Select the word balloon shape and choose “Line” from the “Format” menu. In the Format Line dialog box, open the pattern drop-down menu. Scroll to the bottom to find the “thought balloon” pattern and select it. You should also change the line weight to the thickest setting (more on this below).
When you click OK, your shape will have the bubbly line pattern, looking like a thought balloon from a comic book:
The balloon will behave just like the original shape from the stencil, so you can move the “tail” piece around to point in just about any direction.
The thickness of a line using a custom pattern is determined by the setting of the “Scaled” checkbox in the pattern dialog:
If this box is checked, the line pattern will be rendered exactly as drawn. This means that the actual size of the line pattern will be preserved. This can lead to some unexpected results:
On the other hand, this approach is useful if you want precise control over the line pattern. If so, you’ll probably need to draw them small.
If Scaled is NOT checked, then the size of the line is determined by the Line Weight property, per usual. Keep in mind that this controls the overall thickness of the line pattern, not the thickness of the lines IN the pattern. This illustration shows how different line weight settings affect the shape using the same line pattern:
Mai-lan has a great tip on importing Visio drawings into Word and other MS Office applications. I’ve got a little trick I’ve been using to quickly export my drawings into a more common format.
I discovered this trick quite by accident, and it’s so stupid it barely justifies having its own paragraph. If you hit F12, you can save your drawing as another file type. (My favorite these days is PNG.) This will only save out the current page. Since I usually use Visio to draw small illustrations, I don’t want to export the whole page and then crop it in Photoshop. What you can do instead is simply select the shapes you want to export and hit F12. The Save As… function will only save the selected shapes to the new file.
Visio’s Save As… feature has gotten better over the years. When I started using Visio it was in version 4 (pre-Microsoft) and it could only export to PostScript and Illustrator files. Yuck.
DonnaM has been playing with Visio a lot these days. Check out some of her tips and tricks.
What’s Visio’s keyboard shortcut for the text tool? Is that green diamond a vertex or a rotation point? How can I zoom in without moving the mouse? What is the difference between static and dynamic glue anyway?
If these questions plague you, you need the Microsoft Visio 2003 Reference Mousepad, available from greenonions gear at CafePress.
The mousepad has a rubber backing and is machine washable. The reference information includes:
Never forget a Visio keyboard shortcut again! Move around your drawings with ease! Master the one-click zoom! All the information you need is right there, under the palm of your hand.
Four hours seems like a long time. Especially when it’s up to you to fill it. Turns out, it’s not such a long time after all. Although we got through most of my outline for the pre-conference Visio tutorial, I had another hour or so of material.
The participants were great. All had enough experience with Visio to follow along with no problem. They’re questions were really good, and they were kind to their instructor by not calling him out on any of his goof-ups. If you were in the class, please drop me a line (brownorama [by way of] gmail [dot] com) — I’d love to stay in touch.
Based on this experience, when I do my next Visio tutorial, I’ll consider the following changes:
There were some things that worked:
One final tip for public speakers: Drinking ice-cold water will fatigue your voice faster because it tightens up the muscles in your voice box. If the facility only provides ice water, pour yourself two or three glasses of water before you start. Avoid getting any ice in your glass. The water will return to room temperature over the course of the lecture. It tastes gross (to me anyway) but it is better for your voice.
Were you in the class? Have you taken a different Visio class? What worked for you and what didn’t? Post your comments.
