Figure 1. The DoGo Map in action
A DoGo map is a lightweight tool that provides an overview of the information architecture (IA) of a website or system. By blending a site map with a flowchart, a DoGo map creates an efficient way for the team to maintain a high-level understanding of how the system fits together. Using this tool (shown in Figure 1), the UX designer can invite other team members to understand how and where a new feature or piece of content fits into a system. It also provides a simple structure for a development team to collaborate on a system’s IA. This collaboration enables the UX designer to get his or her ideas into the world without a lot of heavy documentation.
How It Works
Figure 2. Node template
Each node in the DoGo map specifies both the actions supported on the page or view (for example, What a user can Do) and where the user can/will go from that page (Where a user can Go) (Figure 2). This, combined with one special fork-shaped symbol to support user flow, provides a lightweight method for designing and testing a site before detailed designs and prototypes are created.
Index cards are used to document each node of a DoGo map, where the nodes represent a page or view within a system. The index card contains five important pieces of information:
- Name: descriptive label for the node (screen/page)
- Reference Number: quick reference for a node
- Input Fields: important form fields
- Do: actions for the screen
- Go: neighbors, or where you can go from this node
Figure 3. Example of Home node from weather.com
The name of the node is most often a noun that summarizes the collection of data or actions presented on the screen.
The reference number is used as a handle to easily connect one node to another. Typically, the nodes are numbered sequentially, but order doesn’t actually matter because as the map changes, new cards will be introduced and the order becomes useless. What is important is consistency and ensuring that the reference numbers aren’t duplicated, as this helps prevent confusion later on.
As you design the system, consider what a user will want to do on a given screen. Write these actions in the “Do” section of the card, preferably as a concise verb-noun statement (for example, “Enter location info” or “View message detail”). In the “Input Fields” section at the top of the card, write the form fields that will be required to support the actions listed in the “Do” section. Also consider where a user will want to go from this screen, and write these neighbors and their reference numbers under the “Go” section (Figure 3).
Consider a simple Authentication page. Users can sign-in with a user name and password. They can also go to screens to recover their password, sign-up for the service, or to screens to sign-in with Facebook or Google. This is illustrated in Figure 4.
Figure 4. Example of a simple Product Detail node
If the value of a field determines the neighbor that will be viewed next, use a fork-shaped symbol to specify the field and value that direct the next view (Figure 5). Continuing the Authentication example, if you want to add a feature to lock an account after a certain number of tries, adding the fork symbol that indicates the user will go to a Retry screen until the number of tries has been exceeded, and then they will be presented with the Account Locked screen.
Figure 5. Process flow branch symbol
A card labeled “Common” is used to capture all of the form fields, actions, and neighbors that a user would want on most (or all) of the screens in a system. For example, a search feature that sits in the primary navigation of a site would have the field parameter of “search term,” the action of “search” in the Do section, and the neighbor of “search results” listed in the Go section. There is no need to note this common set of functionality on every card, so this would be captured on the “Common” card.
Consider the Home page example in Figure 3. Much of the functionality on this node is common across all of weather.com. Rather than writing these entries on all nodes in the whole map, the common entries are noted on the common card (Figure 6).
Figure 6. Common node card
Once you have the Common card and a set of nodes, you can attach them to a whiteboard and draw lines to connect all of the cards referenced in their respective “Go” sections. User scenarios can then be run through the map to test the overall flow of the system.
When a team has a dedicated war room, the map can hang on a wall throughout a project. Otherwise, the reference numbers on the cards provide a nice way to quickly recreate the map on a whiteboard. As features are added, you can add elements to existing cards, add new cards, throw cards out, and rework the map.
How to Create a DoGo Map
Follow the directions below to develop an initial DoGo Map of your system. When you finish, test your map by running a few user scenarios through it. As you do, you may find yourself crossing things out, reworking flows, and throwing cards out entirely. Keep testing the flow until you are satisfied that the map reflects the general flow of the system. Then use this map as an invitation to a conversation with your team. (The example below is from Weather.com).
Gather your materials
Get a package of notecards and a pen. While the size of the notecards doesn’t matter directly to the technique, 4” x 6” (10cm x 15cm) cards are a good size. To create the map, it is helpful—but not essential—to have a large whiteboard handy.
Create the cards
Figure 7. Create the Common card.
Create the Common card by labeling a card in the upper left corner as “Common.” Use a unique reference number on the card in the top right corner. I usually number this card with a 0 (zero) (Figure 7).
Figure 8. Create a page card
Set up a page card by taking another card that will represent a page or view in your system. Name the card in the top left corner. Write a unique reference number on the card in the top right corner. Down the left side of the card, place a heading for “Do” and “Go.”
Figure 9. Filling out the page card
Fill out the page card by writing the actions the user will perform under the “Do” heading. Note any significant data entry fields that will support the actions. Under the “Go” heading, write the names and reference numbers of neighbor pages to which users can navigate from the current page. Add common elements to the Common card (Figure 9).
Figure 10. Repeat and update cards.
Create a card for each of the pages identified under the “Go” headings of the first card, and repeat until all cards have been completed (Figure 10).
Figure 11. Update existing cards.
As each card is filled out, be sure to update existing cards with new ideas and data fields that need to be captured. Continue to add to the Common card as needed. Use a minus (-) symbol with the Common card reference (Figure 11).
Draw the map
Figure 12. Draw the map.
Draw the map by attaching the cards to a whiteboard and draw lines to connect all of the cards referenced in their respective “Go” sections. Cards with a large number of arrows may be candidates for the Common card (Figure 12).
If you consider the information architecture a vital artifact of a system design, consider building and maintaining a DoGo map—it can help keep your system well organized and on track.
Retrieved from https://oldmagazine.uxpa.org/creating-a-dogo-map/
Comments are closed.
