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:
- 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,......
- 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).......
- 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......
- Immaterials: the ghost in the field This video is about exploring the spatial qualities of RFID, visualised through an RFID probe, long exposure photography and animation. It features Timo Arnall of the Touch project and Jack Schulze of BERG. The......
- Immaterials: light painting WiFi “The complex technologies the networked city relies upon to produce its effects remain distressingly opaque, even to those exposed to them on a daily basis.” – Adam Greenfield (2009) Immaterials: light painting WiFi film......
This is really sound Timo; you should go further and develop those insights in a book “in the mood for dashed lines” or sth. And I am dead serious, there is a lot to draw from you discuss here (and a niche that Tufte did not seem to have tackled ;) ).
Specifically, I am intrigued by dashed lines in real space (leading people to a certain trails) with different levels of spaces between the lines; and of course the relation between dashed lines and elephant paths.
What about dashed lines as scalpel lines?
I’d love to see dashed lines on the back of my computer with the curious part that I cannot see (position of the wifi card, the hard drive and the Ram): the stuff I may need to change and that I have to no cue about their positions.
I love these examples you’ve posted. The dashed line is indeed (erm) dashing!
My pal Rob Cruickshank tells me to remind you of the dashed lines used to indicate direction of a gaze in comic books. Not done as often these days, more of a vintage comic thing.
... and don’t forget the dashed line classic – coupon outlines [with obligatory scissors clip art]!
Great topic, funny how we forget how that dashed line is seen avery day for every and any thing almost.
another example, following MK’s comment, in comic books, the speech bubble is not solid but dashed to indicate thoughts or soomeone talking under his breath.
U
Looking to the environment in which we navigate … dashed lines are also paths to follow. They can get us to the appropriate wing of the hospital (some dashed some solid) and they keep us in our lanes while driving.
Thanks for this great post.
Although, the dashed line is nowhere near as flexible as the un-dashed line.
Also there is the dashed line as indication of folded paper, such as in origami instructions.
Excellent Timo. Also, don’t forget the classic comic book convention of the dashed line as the line of sight between the main character’s eyes and the object he/she is looking at. It always seemed to be used in the sense of suddenly having observed a desired target (a good looking girl across the street, a hidden bomb, money, food, etc).
Interesting that often now the “observer” is omitted from pictograms, with only the focal object in view. Does this say something about context?
In autocad the dashed line is also called a “phantom line” and it is used to indicate a range of motion or multiple positions i.e. complete arc of a door in a plan view of a house.
Great article, keep it up!
I think I’m up ut to a few billion dots…..
I use them in almost all of my artwork and design.
Thanks for such an informative and entertaining piece.
.............................................
Keep it perforated YO!
_Matt
sorry, an elipses is not a dashed line… it is three periods.
An ellipsis is as much a dashed line as it reminds people of dashed lines.
///////////////////////
————————————————
==============
++++++++++++++++++
........................................
__________________
::::::::::::::::::::::::::::::::::::::::
“”“”“”“”“”“”“”“”“”“”“”“”“””
flavours
Long live the lovely dotted line. I work in web design and I often find myself using deashed lines to help break up a page without adding too much weight. Also, we have a dashed line running along the middle of the road, something to follow, a boundry, taking us to new places…
Timo,
This is a beautiful and elegant visual essay. Thank you for putting it together; it’s a treat, pure delight!
Aviation sectional maps take dashed lines to a new level. I believe the cartographer feels he must use every one ever created.
Excellent!!!
Famous ! I love dashes :)
OMG, Huge work! Respect from designwar =)
Great work! Here is another use:
The dashed line as indicator of cuts of meat
this essay is heavily referenced in my own blogpost on the same subject:
http://www.citizenpowered.org/content/dotted-line
A good example of the dotted line as a key information element used to indicate an expected repsonse to a conditon or set of circumstances is found in aircraft manuals, where many precise combinations of circumstances and corresponding actions are printed or displayed in the “Challenge/Response” format, e,g,
MAX FLT TIME…............................................................................5 HOURS
loving this article, thank you so much for sharing
i needed some reference regarding the use of dashed lines in webdesign, and this gave me some really good inspiration
thank you, quality article right there!