The dashed line in use

In previous work I have advocated for the use of dashed lines, my paper for Mobile HCI 2006 [pdf] represents Touch-based interactions with dashed lines, and work on ubicomp iconography uses the dashed line to represent borders, or seams.

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 to this poster in Norway. The poster advertises the multiple ways of submitting your tax return: via SMS, internet or post. Something resonated here,......
2. From ubicomp to service design Mike Kuniavsky presented at ETech 2009 on the Dotted-Line World on the links between ubiquitous computing and service design, where subscription-based services are based on everyday objects. (I’m a big fan of dotted or......
3. Wireless in the world An ongoing Touch theme is about making invisible wireless technologies visible, in order to better understand and communicate with and about them (see a Graphic Language for RFID, Dashed lines and Fictional radio spaces).......
4. Images of touch interfaces I’m happy to say that with great contributions from Nicolas Nova, Matt Jones and many others, the pool of images of ‘touch interfaces’ on Flickr is growing nicely. I originally asked for contributions in......
5. A graphic language for RFID This is a design brief, one of many themes that the Touch project is investigating. RFID is being used for an increasing number of interactions with everyday infrastructures. From travelcards, keyless entry, passports and......