Improve the User Experience with Dialog Maps
Modeling a user interface architecture reveals errors and improvements early on
--
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…
