Automating Diagrams with Visio « Boxes and Arrows. 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. 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. 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. I have tried reproducing this on my own Visio 2007 system, and so far I can't make it fail in the same way. Can either of you share more details about the way the PDF was created, and how large it is - in x and y. 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. The Official website of Israir Airlines. Grab cheap flights to Israel onboard our new fleet of aircrafts with an option to book a hotel and rent a car. 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. 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. Home. 2. 0 Corporate information. What we do. 2. 2 Who we are. Our process. 3. 1 Discovery. Concept. 3. 3 Creation. Implementation. 3. Rollout. 3. 6 Testing. Our clients. 4. 1 Case studies. Web. 4. 1. 2 CD- ROM and kiosks. Print. 4. 2 Client list. Contact information. Locations. 5. 2 Online inquiry form. Inquiry form submitted. 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: “Shape Name”—a unique numerical idea for each node and“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. They are as follows: Shape,”Shape Name”,”Master Name”,”Shape Text”,”Shape. X”,”Shape. Y”,”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. We can export this sheet to a text file of comma- separated values (saved as . Microsoft Visio has been popular diagramming software to visualize processes, systems, and complex information into diagram. Meanwhile, MS Visio allow you different kind of diagram such as entity relationship diagrams, UML. Furk.net is not a file locker and doesn't support filesharing for profit. Edit or change PDF files in Office by updating the original file, or by importing the PDF into an Office file format through a converter. Describes how to export a bill of materials from PDXpert PLM software, process the BOM in Excel, and then import to Visio. Shape file for Boxy Widgets site. Shape. 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. 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 (*. Select file “ex. 1. 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: The “Shape Name”—the unique numerical id you give it. The “Shape Master”—the name of the shape you want to use from the Visio template (Terminator, Processing, Decision, etc.), andthe “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”,”Shape. X”,”Shape. Y”,”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.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. Archives
December 2016
Categories |