The dashed line in use

In previous work I have advocated for the use of “dashed lines”:http://www.elasticspace.com/2005/11/graphic-language-for-touch, “my paper for Mobile HCI 2006 [pdf]”:http://www.hcilab.org/events/mirw2006/pdf/mirw2006_proceedings.pdf represents Touch-based interactions with dashed lines, and work on “ubicomp iconography”:http://www.nearfield.org/2006/09/everyware-icons-visualising-ubicomp-situations uses the dashed line to represent borders, or “seams”:http://www.mrl.nottingham.ac.uk/var/uploads/ChalmersTech2003.pdf.

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.

h3. The dashed line as hidden geometry

The dashed line

The dashed lineThe dashed line

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

h3. The dashed line as movement

The line is used to indicate temporal positions:

The dashed line

The dashed lineThe dashed lineThe dashed lineThe dashed lineThe dashed lineThe dashed line

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

h3. The dashed line as paths

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

The dashed line

The dashed lineThe dashed lineThe dashed lineThe dashed lineThe dashed lineThe dashed line

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”:http://www.xplane.com/clients/autoid/:

xplane_autoid_epc_web.gif

Colin Ware defines dashed, dotted or wavy lines as _linking lines_:

bq. “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.”

The dashed line

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

h3. The dashed line as expectation

Ellipsis from Mac OS X interface

I’ve spoken to some people that have made an association between the dashed line and an “ellipsis”:http://en.wikipedia.org/wiki/Ellipsis. This example is taken from the “Mac OS X interface”:http://developer.apple.com/documentation/UserExperience/Conceptual/OSXHIGuidelines/XHIGText/chapter_13_section_3.html#//apple_ref/doc/uid/TP30000365-TPXREF126, conventionally used to indicate that the action will be followed by another action.

h3. The dashed line as ephemeral material

The dashed line

The dashed lineThe dashed line

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

h3. The dashed line as border or seams

map_symbols_web.gif

orienteering_symbols.gif

map_symbols_web2.gif

mapsymb.jpg

The dashed line

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

h3. Other examples

The dashed line

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:

The dashed line

And lastly, an interesting thought from a conversation with Dave Gray, of “Xplane”:http://www.xplane.com and “Communication nation”:http://communicationnation.blogspot.com/:

bq. “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”.”

, , , , , , , , , , ,