Improve the User Experience with Dialog Maps

Modeling a user interface architecture reveals errors and improvements early on

Karl Wiegers
The Startup
Published in
8 min readDec 14, 2019

--

A portion of a dialog map representing a user interface, with with pages shown in rectangles and arrows showing navigation pathways from one page to another.
Graphic by author

Many books provide guidance on how to create effective user interface displays, a vital aspect of the user’s experience with a software application. But a user often must navigate through a series of screens to perform a task. Making that flow sequence logical and efficient also is an important part of the user experience.

I’m a big fan of analysis modeling, drawing diagrams that visually represent various aspects of a software system and its requirements. One of my favorite models is the dialog map, which provides a convenient way to represent, validate, and improve how a user navigates through a user interface.

What’s a Dialog Map?

A dialog map illustrates the architecture of a user interface design. It depicts the dialog elements in the system and navigation links among them, but it doesn’t show detailed screen layouts (Figure 1).

A user interface (UI) can be regarded as a series of state changes. Only one dialog element — web page, menu, workspace, dialog box, line prompt, or touch screen display — is active for user input at any given time. The user can navigate to certain other dialog elements based on the action he takes at the active dialog element and the system’s state at the time.

In formal terms, a dialog map is a way to model a user interface in the form of a state-transition diagram. More simply, it’s a set of boxes and arrows that show how the user can move around in a system to accomplish a task. Similar modeling techniques are called a navigation map or user interface flow.

Dialog maps are related to storyboards, which also include a short description of each screen’s purpose and perhaps a screen sketch. You can think of a dialog map as a high-level model of the UI and a set of storyboards as a low-level model.

Just as in ordinary state-transition diagrams, the dialog map shows each dialog element as a state (rectangle) and each allowed navigation option as a transition (arrow). The conditions that trigger a UI navigation are shown as a text label on each transition arrow. There are several types of trigger…

--

--

Karl Wiegers
The Startup

Author of 14 books, mostly on software. PhD in organic chemistry. Guitars, wine, and military history fill the voids. karlwiegers.com and processimpact.com