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

The dashed line

The dashed lineThe dashed line

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:

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.

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:

xplane_autoid_epc_web.gif

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

The dashed line

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

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. 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

The dashed line

The dashed lineThe dashed line

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

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.

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

, , , , , , , , , , ,

132 Responses to The dashed line in use

  1. Nicolas 28 September 2006 at 18:52 #

    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.

  2. MK 29 September 2006 at 17:37 #

    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.

  3. IH 29 September 2006 at 21:35 #

    ... and don’t forget the dashed line classic – coupon outlines [with obligatory scissors clip art]!

  4. Ugo 29 September 2006 at 21:43 #

    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

  5. Giusto 30 September 2006 at 0:55 #

    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.

  6. Neale 30 September 2006 at 17:47 #

    Although, the dashed line is nowhere near as flexible as the un-dashed line.

  7. David 30 September 2006 at 23:56 #

    Also there is the dashed line as indication of folded paper, such as in origami instructions.

  8. Scott Smith 1 October 2006 at 1:38 #

    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?

  9. miked 2 October 2006 at 0:37 #

    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!

  10. Matt MWM Moore 2 October 2006 at 2:27 #

    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

  11. nk21 4 October 2006 at 22:01 #

    sorry, an elipses is not a dashed line… it is three periods.

  12. Timo 5 October 2006 at 7:52 #

    An ellipsis is as much a dashed line as it reminds people of dashed lines.

  13. vahakn 5 October 2006 at 12:07 #

    ///////////////////////
    ————————————————
    ==============
    ++++++++++++++++++
    ........................................
    __________________
    ::::::::::::::::::::::::::::::::::::::::
    “”“”“”“”“”“”“”“”“”“”“”“”“””

    flavours

  14. Olmec Sinclair 5 October 2006 at 22:49 #

    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…

  15. Dave Gray 7 October 2006 at 21:57 #

    Timo,

    This is a beautiful and elegant visual essay. Thank you for putting it together; it’s a treat, pure delight!

  16. John Dinger 8 October 2006 at 5:34 #

    Aviation sectional maps take dashed lines to a new level. I believe the cartographer feels he must use every one ever created.

  17. William Becher 14 August 2007 at 18:46 #

    Excellent!!!

  18. James 17 August 2007 at 0:15 #

    Famous ! I love dashes :)

  19. Philip 29 August 2008 at 12:19 #

    OMG, Huge work! Respect from designwar =)

  20. Arnold Aprill 2 January 2009 at 0:43 #

    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

  21. Paul 18 February 2009 at 14:09 #

    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

  22. Paul Anastasiu 11 March 2011 at 11:31 #

    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!

  23. Tatiana 26 September 2012 at 2:36 #

    I’ve just seen a notebook page using only dotted lines instead of solid lines. What are your thoughts on this? Why not just using solid lines? Is that acceptable or simply a poor design choice?
    – - – - – - – - – - – - – - – - – - – - – - – - – -
    – - – - – - – - – - – - – - – - – - – - – - – - – -
    – - – - – - – - – - – - – - – - – - – - – - – - – -
    – - – - – - – - – - – - – - – - – - – - – - – - – -

Trackbacks/Pingbacks

  1. Ikea-d you not | Ghazda - 4 May 2013

    [...] References: Arnell, T. (2006) ‘the dashed line in use’, http://www.nearfield.org/2006/09/the-dashed-line-in-use [...]

  2. Visualisations- the pros and cons | Caroline Leach- Arts 2090 - 7 May 2013

    [...] An empowering quality possessed by visualization is to make invisible concepts visible. This empowers publics intellect as microscopic scientific concepts, and processes such as origami or whether processes tangible and understandable by individuals, and publics as a whole. The seemingly  simplistic dotted line for example allows us to understand movements, step by step instructions such as metalwork, and hidden geometry. These information graphics allows the public to gain greater understanding of the world around them, and the opportunities for knowledge that exist within it. http://www.nearfield.org/2006/09/the-dashed-line-in-use [...]

  3. Visualisation: techniques to make the invisible visible | Estelle Gonzalez - 13 May 2013

    [...] such as arrows or dotted lines are universally used in visualisations to represent meaning. As noted by Timo Arnell, a dotted line can be used to indicate movement, dimension, expectation, etc. Even though I see the [...]

  4. Week 8 – When data becomes emotion | angelatranarts2090 - 13 May 2013

    [...] a visualisation is a visual representation of data. This can be a simple line graph, a diagram (see this reading) or it can be more interativem,complex or visually appealing (a really good website to see examples [...]

  5. If it is not visible does that mean it doesn’t exist? | wekeepinmind - 21 May 2013

    [...]  [online] Arnell, Timo (2006) ‘the dashed line in use’, http://www.nearfield.org/2006/09/the-dashed-line-in-use [...]

  6. ARTS2090 – PUBLICS AND PUBLISHING - 28 May 2013

    [...] Arnell, Timo (2006) ‘the dashed line in use’, http://www.nearfield.org/2006/09/the-dashed-line-in-use [...]

  7. Visualisation | emily smith - 2 June 2013

    [...] Arnell, Timo (2006) ‘the dashed line in use’, < http://www.nearfield.org/2006/09/the-dashed-line-in-use> [...]

  8. week 7 | artstwoohnineoh - 2 June 2013

    [...] Timo, 2006, “The dashed line in use”, Touch, < http://www.nearfield.org/2006/09/the-dashed-line-in-use> [...]

  9. I can see clearly now the…… data is organised? | 20ninety - 4 June 2013

    [...] Arnell, T. (2006) ‘the dashed line in use’,http://www.nearfield.org/2006/09/the-dashed-line-in-use [...]

Leave a Reply