Automating Diagrams with Visio

by:   |  Posted on

We have all heard the adage, “Good, Fast, Cheap: Pick any two (you can’t have all three).” The saying might generally be true of the work we produce as designers of information-use environments. Try to test the saying against one of the deliverables we might create—a high-fidelity interface prototype, for example—and see if you can disprove it. You can produce beautiful prototypes in Illustrator, but it will cost you time and money. You can do rough prototypes quickly and cheaply by hand, but the end result won’t look as polished as the Illustrator version.

Turnaround time can be relatively quick if you push your tools to perform for you. Site maps and user flow diagrams are good candidates for automation.

My approach to producing deliverables is to falsify the truism. I do the demanding intellectual work first and then force the tools to succumb to my need to produce seemingly speedy deliverables. The illusion of speed happens because you do the hard work up front—planning, analyzing and documenting your work in doing content inventories, designing user flow, etc. When it is time to realize that work in a document, the turnaround time can be relatively quick if you push your tools to perform for you. In this article I illustrate one method for producing diagrams quickly using software.

The process overview

We probably do most of our intellectual work in preparing deliverables before ever touching a drawing program. When the elements of the information architecture and user experience are defined, we are often expected to produce a polished document to visually represent the information. We can take a semi-automated approach to produce some of these documents using software. Site maps and user flow diagrams are good candidates.

The process I propose assumes that you’ve spent grueling hours doing the work of preparing your content inventory or sketching your user flow diagrams and now want to render your boxes and arrows for presentation. The next step in the process is to take the data produced in that intellectual work and prepare it for use in a diagramming application.

I will illustrate a process that relies on text files exported from Excel and uses Visio to transform those text files into diagrams. You can also use a database management system for this process, but details about using a DBMS are out of the scope of this article.

The steps to be covered in this process

  • Identify and document your nodes
    • For site maps, identify nodes in a content inventory, hierarchically arranged
    • For flowcharts, sketch and identify shapes and connectors
  • Document nodal connections
    • Indicate how parent nodes explicitly link to child nodes
  • Prepare text file for importing to a drawing program
    • Prepare a “shapes” file in Excel or with a text editor
    • Prepare a “links” file in Excel or with a text editor
      • If using Excel, export files to comma- or tab-separated file (saved as .csv or .txt)
    • Combine shapes and links files into one text file for importing into Visio
  • Open/Import and auto-diagram
    • Open the text file in Visio
  • Modify the diagram
    • Manipulate the diagram shapes for clarity and apply any cosmetic changes

Creating site maps or content architecture diagrams

We spend a good deal of time working with content to produce documents that help clarify the scope of data contained in websites. Key to the work of information architecture is the production of documents that list the site contents hierarchically (content audits or inventories) or diagrams that depict the site structure visually (site maps). The content inventory is the starting point in defining our information architecture. Graphic designers and technical people often use these documents in system and design specifications.

Step 1: Identify and document nodes in a content inventory

The process of specifying new data or auditing existing data to be included in a site helps to clarify the next steps in organizing that data for presentation. The inventory of data is often used to produce taxonomies or categories of access points. These access points usually inform the navigation and interface design.

Inventoried content is often categorized as a hierarchy of nodes (categories and subcategories, branches and leaves). A high-level extraction of the top-level nodes, perhaps even several levels deep, might give a good idea of the site structure.

To illustrate how to prepare your text files, consider this portion of a hierarchy for a hypothetical company website.

Content hierarchy for boxywidgets site

  • 1.0 Home
  • 2.0 Corporate information
    • 2.1 What we do
    • 2.2 Who we are
  • 3.0 Our process
    • 3.1 Discovery
    • 3.2 Concept
    • 3.3 Creation
    • 3.4 Implementation
    • 3.5 Rollout
    • 3.6 Testing
  • 4.0 Our clients
    • 4.1 Case studies
      • 4.1.1 Web
      • 4.1.2 CD-ROM and kiosks
      • 4.1.3 Print
    • 4.2 Client list
  • 5.0 Contact information
    • 5.1 Locations
    • 5.2 Online inquiry form
      • 5.2.1 Inquiry form submitted
      • 5.2.2 Inquiry form error

This example shows all the available nodes in a small site. All that Visio will need is a listing of the nodes that we want to diagram.
This list is comprised of:

  1. “Shape Name”—a unique numerical idea for each node and
  2. “Shape Text”—a label for the node. If this data is coming from a more complete content audit document, you should extract only the id and label for this exercise. This is fairly simple to do in Excel if you copy the data to a new sheet and remove the unwanted columns.

Visio accepts a number of other values in the file you import. They are as follows:

Shape,”Shape Name”,”Master Name”,”Shape Text”,”ShapeX”,”ShapeY”,”Width”,”Height”,”Property”

For our task, we are interested in the “Shape Name” and “Shape Text” values. We can simply skip all of the fields following “Shape Text”, but must include blank values using empty quotes (“”) for any fields that we are skipping before the last field. In this case, we use empty quotes for “Master Name” because we’re only using boxes in this diagram. The first value in each line is always the word “Shape” to indicate to Visio that this is the definition for a shape it will draw.

If you are authoring these files in Excel, you can create the first column for the “Shape” value and auto-fill all of your rows with the value “Shape”. The second column will hold your “Shape Name” values. The third column will be a placeholder for the empty “Master Name” field. The fourth column will hold your “Shape Text” labels.

Our sample Excel file would look like this:

Excel sheet with stripped down content inventory

Excel sheet with stripped down content inventory

We can export this sheet to a text file of comma-separated values (saved as .csv) and the resulting file for the content hierarchy will look like this:


; shapes.csv
; Shape file for Boxy Widgets site
Shape,"1.0","","Home"
Shape,"2.0","","Corporate information"
Shape,"2.1","","What we do"
Shape,"2.2","","Who we are"
Shape,"3.0","","Our process"
Shape,"3.1","","Discovery"
Shape,"3.2","","Concept"
Shape,"3.3","","Creative"
Shape,"3.4","","Implementation"
Shape,"3.5","","Rollout"
Shape,"3.6","","Testing"
Shape,"4.0","","Our clients"
Shape,"4.1","","Case studies"
Shape,"4.1.1","","Web"
Shape,"4.1.2","","CD-ROM and kiosks"
Shape,"4.1.3","","Print"
Shape,"4.2","","Client list"
Shape,"5.0","","Contact information"
Shape,"5.1","","Locations"
Shape,"5.2","","Online inquiry form"
Shape,"5.2.1","","Inquiry form submitted"
Shape,"5.2.2","","Inquiry form error"

Any line that is preceded by a semicolon (;) is ignored as a comment. I added comments in the first two lines to indicate what this file is used for. The next file we want to create is the file that shows relationships between nodes.

Step 2: Document nodal connections

The list we created above is a hierarchical listing of nodes, so the numbers and position in the list already indicate relationships. However, Visio requires that we explicitly reiterate the relationships by indicating child-parent connections following the format below.

Link,”Link Name”,”Master Name”,”Link Text”,”From Shape (or Connector) Name”,”To Shape (or Connector) Name”

We only need the “From Shape” and “To Shape” values for this file. The first value in each line is always the word “Link” to indicate to Visio that this is how the shape identified in the “From Shape” field will link to a shape in the “To Shape” field. Our link file for the example above would look like this.


; links.csv
; Link file for Boxy Widgets site
Link,"","","","1.0","2.0" ; Link the "Home" to "Corporate information"
Link,"","","","1.0","3.0"
Link,"","","","1.0","4.0"
Link,"","","","1.0","5.0"
Link,"","","","2.0","2.1" ; Link "Corporate information" to child "What we do"
Link,"","","","2.0","2.2"
Link,"","","","3.0","3.1"
Link,"","","","3.0","3.2"
Link,"","","","3.0","3.3"
Link,"","","","3.0","3.4"
Link,"","","","3.0","3.5"
Link,"","","","3.0","3.6"
Link,"","","","4.0","4.1"
Link,"","","","4.1","4.1.1"
Link,"","","","4.1","4.1.2"
Link,"","","","4.1","4.1.3"
Link,"","","","4.0","4.2"
Link,"","","","5.0","5.1"
Link,"","","","5.0","5.2"
Link,"","","","5.2","5.2.1"
Link,"","","","5.2","5.2.2"

Step 3: Diagram in Visio

We now take the two text files created above and merge them into one file that we are going to save as “ex1_visio_import.csv”. Now we are ready to open the file in Visio using the steps below.

  • File > Open (open dialog window appears)
    • Files of type: Text Files (*.txt,*.csv)
    • Select file “ex1_visio_import.csv”
    • Click Open (File Converter dialog window appears)
  • Visio File Converter dialog window
    • Field Separator: ,
    • Text delimiter: ""
    • Comment character: ;
    • Click OK

The end result is a diagram that needs a good deal of clean up. You can move the boxes around and play with colors to produce a more readable diagram.

Automatically generated site map (click to enlarge)

Cleaned up site map (click to enlarge)

 

Of course if you don’t want to see your diagram in the hideous colors that Visio gives you to work with, you can copy the diagram and paste into Illustrator where you can make it more presentable and pleasant to look at.

Creating user flow diagrams

While I think it’s rather nifty to create site maps using Visio, I have to admit that what I really prefer to create in Visio are flowcharts.

Flowcharts can be used to help the team understand how users might interact with your system. Interactions such as registration or e-commerce transactions may best be planned using flowcharts. They are also used in diagramming system logic for applications. These documents are often developed with technical people and serve to assist technical staff and graphic designers.

The process for doing flowcharts in Visio is the same as the process shown above for site maps, except we will also be introducing values to specify which shapes to use. We also have to tell Visio which stencils to get the shapes from by specifying a template. With flowcharts, there is less need to move your shapes around once you’ve imported them into Visio. I hardly ever touch the colors and fonts. I view flowcharts as utilitarian documents that are meant to illustrate system logic, so I prefer to show them in grayscale and prefer the linear top-to-bottom presentation, connecting pages with connector symbols when necessary.

To get you started I will illustrate how to use the process shown above to diagram a very simple flowchart. Since you are now familiar with the file preparation, I’m just going to define the fields that can be included for the node and link sections and then show you the files combined in one import file.

Step 1: Document nodes in flowchart

Flowcharting does not lend itself to listing shapes in a hierarchical list the way site maps do. The best approach is probably to first draw your flowchart on paper and number the shapes in the chart. You can then take each numbered shape and add it to your text file. All that Visio really needs to create your flowchart are a few required fields:

  1. The “Shape Name”—the unique numerical id you give it
  2. The “Shape Master”—the name of the shape you want to use from the Visio template (Terminator, Processing, Decision, etc.), and
  3. the “Shape Text”—the label for the shape.

Visio will also accept a number of other values in the file you import. The order of fields should appear as follows:

Shape,”Shape Name”,”Master Name”,”Shape Text”,”ShapeX”,”ShapeY”,”Width”,”Height”

The first value in each line is always the word “Shape” to indicate to Visio that this is the definition for a shape it will draw. We can simply leave off all the values following Shape Text, but we must include blank values using empty quotes (“”) for any values that we are skipping before the last value. If we don’t want to specify shape size and position, we can just skip the last four fields. I’m going to do that for this example.

Step 2: Document nodal connections

Since you have a sketch of your flowchart it should be fairly easy for you to create a list of the links between shapes.
Visio will expect at the very least that you include:

  1. “Master Name”, the name of the connector you will use
  2. “From Shape (or Connector) Name”, the numerical idea or “Shape Name” from the shape list, 2) “To Shape (or Connector) Name”.

The first value in each line is always the word “Link” to indicate to Visio that this is how the shape identified in the “From Shape” value will link to a shape in the “To Shape” value. There are some additional fields that you can use including “Link Text”, a field for a text value that can appear over the connector lines. For our example, we’re going to skip the extra fields and indicate them with empty quotes. The order of fields should appear as follows:

Link,”Link Name”,”Master Name”,”Link Text”,”From Shape (or Connector) Name”,”To Shape (or Connector) Name”

Step 3: Diagram in Visio

Now that we know what shapes to include and how to link them, let’s look at the combined import file we would create for this simple example. We need to indicate to Visio the stencil to reference when looking for shapes identified in our “Master Name” field. So begin the first line with the keyword “Template”, followed by a comma and the name of the Visio stencil file. Stencil templates are the Visio files followed by the extension .vst. You can get the names of stencil templates and stencil files by browsing in your Visio Solutions folder (usually located in “C:Program filesVisioSolutionsFlowchart”) In this example we’ll use the flowchart template “Audit Diagram.vst”, which includes the “Audit” and the “Connectors and Callouts” stencils.

Here is the import file for our example:


; ex2_visio_import.csv
Template, "Audit Diagram.vst"

Shape,"1","Terminator","Start",,,,,,,
Shape,"2","I/O","Some kind of input",,,,,,,
Shape,"3","Decision","Test the input",,,,,,,
Shape,"4","Display","Display true message",,,,,,,
Shape,"5","Display","Display false message",,,,,,,

Link,,"Next",,"1","2"
Link,,"Next",,"2","3"
Link,,"Result",,"3","4"
Link,,"No result",,"3","5"

We can save this file and open in Visio using the following steps:

  • File > Open (open dialog window appears)
    • Files of type: Text Files (*.txt,*.csv)
    • Select file “ex2_visio_import.csv”
    • Click Open (File Converter dialog window appears)
  • Visio File Converter dialog window
    • Field Separator: ,
    • Text delimiter: “”
    • Comment character: ;
    • Click OK
Automatically generated flowchartAutomatically generated flowchart

Summary

That’s all there is to it. You now have a simple process for generating diagrams in Visio from text files. It won’t make the intellectual work of preparing content inventories or user flow specifications much easier, but it may buy you some time when it comes to rendering that information in a drawing application.

If you work in an organization where you are expected to make modifications to your deliverables quickly, you might value this process. This process will help you make modifications a bit more quickly to those specifications you’ve spent hard hours on, so you can impress your colleagues and clients with how efficient you are.

For more information


Michael Angeles is an information specialist and site developer at Lucent Technologies, Bell Laboratories in the Information Solutions department. He maintains a weblog of information architecture news at http://www.iaslash.org.

Bringing Your Personas to Life in Real Life

by:   |  Posted on

You read about personas in “The Inmates are Running the Asylum.” You know that using them improves your interactive designs and helps get your coworkers on the same boat. You did your ethnographic research, created a useful persona set and are ready to start designing for the needs of your personas. But first you have to document and share your personas with your colleagues.

When presenting, talking about your personas, or referring to them in writing, communicate as though they are real people, people that you know. Express it like you are talking about a friend.

The way you communicate the personas and present your deliverables is key to ensuring consistency of vision. Without that consistency, you’ll spend far too much time arguing with your colleagues about who your users are rather than how to meet their needs. Let’s start with a review of what we know about personas, and why they are useful. Continue reading Bringing Your Personas to Life in Real Life

Learning from the “Powers of Ten”

by:   |  Posted on

Charles and Ray Eames.

To most designers, the Eames name brings to mind rows and rows of molded plywood chairs and Herman Miller furniture of the 1950s. But the Eameses were more than just designers of furniture, they were masters of exploration and experimentation into the realm of experience.

The Eameses used many media to model experience and ideas. The model was a key tool in their design process. The model allowed them to walk through an experience and offered a way to visualize the possibilities and the layers of meaning. One of the modeling tools they used quite frequently was film.

Powers of Ten still
Powers of Ten still
Powers of Ten still
Powers of Ten still
Powers of Ten still
Powers of Ten still
© Lucia Eames
Eames Office

Stills from the final “Powers of Ten” film.
Click to enlarge.

Throughout their career, they made over 120 short films.1 They ranged in topic from the world of Franklin and Jefferson to advanced mathematical explanations to the scientific exploration of scale in the “Powers of Ten.” The exploration into film helped them explore an idea, work out the presentation and the layers of information and understand a process or theory. The Eameses often carried an idea through multiple versions in order to find the right approach to a problem.

On the Eames Office website, Lucia Dewey Eames writes:

“A film could be a model, not simply a presentation of an idea, but a way of working it out. Looking back at the way the office worked, there is a constant sense that the best way to understand a process was to carry it all the way through. For example, in the creation of the project that became the film “Powers of Ten,” first came a test known as “Truck Test,” then the production of “Rough Sketch” (8 minutes; color, 1968), which was a model of the idea of the journey in spatial scale. Only by carrying the idea all the way through could one see the right way to approach the problem. And, indeed, the final version of “Powers of Ten” (9 minutes; color, 1977) has quite a few differences. But both films are models in a more important sense: they are models of the idea of scale. Because such Eames models managed to capture the essence of the problem, they were in fact quite satisfying in their own right.”2

In an interview in ISdesigNET magazine, Charles and Ray’s grandson, Eames Demetrious says:

“There may be a tendency to assume the films are a charming footnote: Furniture designers making films. But that is not how it was, not how Charles and Ray saw it at all. For them, the films were an intrinsic part of the process.”3

“The Powers of Ten,” perhaps their most successful film, is one such model into the nature of scale. The first version, developed in 1968 for the annual meeting of the Commission on College Physics, went under the title, “A Rough Sketch for a Proposed Film Dealing with the Powers of Ten and the Relative Size of the Universe.” (8 minutes; color, 1968). In 1977, with the help of Philip Morrison, professor of physics at MIT, they updated and refined the work under the new title, “The Powers of Ten: A Film Dealing with the Relative Size of Things in the Universe and the Effect of Adding Another Zero” (9 minutes; color, 1977). The film sought to visualize the relative size relationships of elements through space and time and expose what happens when you add another zero to the equation.

“The ‘Powers of Ten’ also represents a way of thinking—of seeing the interrelatedness of all things in our universe. It is about math, science and physics, about art, music and literature. It is about how we live, how scale operates in our lives and how seeing and understanding our world from the next largest or next smallest vantage point broadens our perspective and deepens our understanding.”4
—Powers of Ten website

Series of Sketches for the Films
Chart plotting sequences of “Powers of Ten”
Storyboard sketch 1
Storyboard sketch 2
Storyboard sketch 3
Storyboard sketch 4

The film starts by showing an image of a sleeping man at one meter square (100) and gradually pulls back, moving ten times away for every ten seconds of time that passes, eventually reaching the edge of the universe (1025). The camera then zooms forward, into the sleeping man’s hand, finally reaching the inside of an atom (10-18).

Rough Sketch still
Rough Sketch still
Rough Sketch still
Rough Sketch still
© Lucia Eames
Eames Office

Stills from the “Rough Sketch.”
Click to enlarge.

The exploration of information presentation in the “Rough Sketch” and in the final “Powers of Ten,” speaks to the value of models that the Eameses used to explain their ideas about information organization and presentation. The imagery explores both size relationships and time. It explores the visual relationships of elements and developing patterns that emerge at different scales. The control panel (in the “Rough Sketch”) that is always present on the screen visualizes another six levels of information at its peak.

The combination of imagery and the control panels explores the nature of simultaneous presentation of information. The Eameses push the boundaries of what can be taken in and understood at any one time, they play with the notion of information overload and information absorption. The 1968 version (“Rough Sketch”) explores more levels of simultaneous information than the 1977 final version, in which the panel display is reduced to its most essential information and relocated for better comprehension and retention.

Sponsored by IBM, the film was one of the many efforts that the Eameses worked on to bring science, technology and art together in a way the average person could understand.

“Eames approached the problem in universal terms (to please the ten-year-old as well as the nuclear physicist) and, as in designing a chair, sought to find what was most common to their experience. Sophisticated scientific data was not the denominator (although the film had to handle such matters with complete accuracy to maintain credibility), but it was the inchoate ‘gut feeling’ of new physics which even the most jaded scientist, as Eames says ‘had never quite seen in this way before.’”5

Although more than 20 years old, the series of films offers lessons on successful presentation and explorations of layered information. The information problems explored through film, by the Eameses, are really no different than many of the problems facing information architects today. Studying the Eames’ work and their processes may yield effective processes for today’s IA. Using different media and methods in prototyping and modeling of ideas, as well as presenting layers of information in a way that is simple and elegant, the Eameses succeeded in their original goals:

“The sketch should, Eames decided, appeal to a ten-year-old as well as a physicist; it should contain a ‘gut feeling’ about dimensions in time and space as well as a sound theoretical approach to those dimensions.”6

For more information: View All End Notes