Interface Design Diagrams

by Luke Wroblewski February 18, 2004

Planning is an essential part of the interface design process. Not only can a plan keep you on track, it can also allow you communicate your ideas to others and provide an excellent reference when it comes time to make design decisions. As a result, it’s a good idea to visualize your plans in the form of diagrams. Though they are called many different things, interface design diagrams can most frequently be described as:

Structure diagrams

(also known as Site Maps, Site Schematics, Organization Diagrams, and Tree Diagrams) “Site Maps are an abstract representation of the content organization and, to a degree, the navigation of a site.” –Anthony Hand A structure diagram provides a macro (big picture) view of the information space of a Web site or application. It not only presents all the content found in the system (scope), but also the relationships between content (organization).

Process flow diagrams

(also known as Interaction Flows, Task Flows, and Worklflow Analysis Diagrams) “Task flow diagramming -where specific tasks are divided into the basic task step” -User-Centered Requirements Handbook Flow diagrams represent actions within an information space and highlight the options available to users at each step of the process. In other words, flow diagrams illustrate how users move through the content laid out in structure diagrams.

Wireframes

“Graphical inventories of information, navigation, and the interactive elements on a page.” Though not technically diagrams, wireframes present the information and functionality required to support the user at each step of a flow. They can be combined with flow diagrams to illustrate a process with relevant screen layouts.

Architecture diagrams

(also known as System Diagrams) Though architecture diagrams are more concerned with the technical construction of interactive systems, they will frequently illustrate how and where a “back-end” system interacts with a front-end interface.

Some examples of interface design diagrams can be found at Dynamic Diagrams and by reading Web Site Planning Diagrams (PDF) from Mapping Web Sites by Paul Kahn and Krzysztof Lenk.