I’ve had trouble justifying my excitement about this intricate visual detail, so I thought it would be good to collect a bunch of examples from over fifty years of information design history, to show it as a powerful visual element in ubicomp situations.

Even though the dashed line has emerged from a designer’s shorthand and from the limitations of monotone printing techniques, it has a clear and simple visual magic, the ability to express something three- or four-dimensional in two dimensions.

The dashed line as hidden geometry

Examples from Open Here: The Art of Instructional Design, Paul Mijksenaar, Piet Westendorp, 1999.

The dashed line as movement

The line is used to indicate temporal positions:

Examples from Open Here: The Art of Instructional Design, Paul Mijksenaar, Piet Westendorp, 1999.

The dashed line as paths

Very similar to the representations of movement, but the line is used as the path itself:

Examples from Open Here: The Art of Instructional Design, Paul Mijksenaar, Piet Westendorp, 1999.

A more modern image showing an overview of Auto ID RFID supply chain management, by Xplane:

Colin Ware defines dashed, dotted or wavy lines as linking lines:

“A linking line between entities represents some kind of relationship between them. A line linking closed contours can have different colours or other graphical qualities such as waviness, and this effectively represents an attribute or type of relationship.”

From the perceptual syntax of diagrams in Information Visualisation: Perception for Design, Colin Ware, 1999.

The dashed line as expectation

I’ve spoken to some people that have made an association between the dashed line and an ellipsis. This example is taken from the Mac OS X interface, conventionally used to indicate that the action will be followed by another action.

The dashed line as ephemeral material

Examples from Open Here: The Art of Instructional Design, Paul Mijksenaar, Piet Westendorp, 1999.

The dashed line as border or seams

A table of commonly used conventions from Information Graphics, Robert Harris, 1996.

Other examples

This is an example of dashed lines in information design from The Visual Display of Quantitative Information, Edward Tufte, 1983. I get the sense that Tufte prefers a simple, solid line, considering the overuse of patterns a form of chart-junk:

And lastly, an interesting thought from a conversation with Dave Gray, of Xplane and Communication nation:

“I think of lines: double-line, solid, dashed, dotted Similar to typeface conventions such as black, bold, regular, light. It’s a matter of emphasis. The thicker and more solid the line, the stronger the emphasis. A dotted line usually does not indicate “cut here” unless it is combined with a scissors icon. I think that trying to make a direct connection between the dashed line and what it represents may be a red herring. Think of a map, for example: Whether type is bold, all caps, or light relates directly to the designer’s decisions about emphasis, but I am not sure it relates so directly to the subject matter. There are a few direct correlations of this type: for example, type representing water is usually set in italic. I like your use of the dashed line – it is clear that they serve as a guide and invitation to “place things there”.”

Related things:

1. The dashed line I can trace my enthusiasm for the dashed line back......
2. Wireless in the world An ongoing Touch theme is about making invisible wireless technologies......
3. Images of touch interfaces I’m happy to say that with great contributions from Nicolas......