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

Technorati Tags: , , , , , , ,

Trackbacks

  1. « with coffee spoons 30 Sep 2006

    [...] examples of the dashed line in use, and the various visual meanings of the dashed line.   [...]

  2. Stiplede linjer kompendium at Webmercial.dk 30 Sep 2006

    [...] [...]

  3. pristina.org | everything design » Sobre o uso de linhas pontilhadas no design 01 Oct 2006

    [...] Interessante o artigo sobre o uso diferenciado de linhas pontilhadas no design. Clique na imagem abaixo para ler mais. Add to: document.write(“Del.icio.us”) | Digg it | RawSugar | Slashdot | Y! MyWeb [...]

  4. Isprekidane linije života moga « o nekim stvarima govoreći 01 Oct 2006

    [...] Kao srednjoškolac uvek sam se patio sa prostornim prikazivanjem stvarnosti u projektovanju i tehničkom crtanju. Hajde, de, uvek precrtam ja vidljive površine i linije, ali one koje su zaklonjene, smerove kretanja ili putanje, nikao. To su ove što su nacrtane isprekidanim linijama. [...]

  5. cafedave.net » Blog Archive » the dashed line 03 Oct 2006

    [...] [kottke] Uses of the dashed line in various instructional diagrams over 50 years. [...]

  6. Dot Dot Dot Dash Dash Dash « Publication Design 04 Oct 2006

    [...] A bunch of examples of the use of the dashed line from over fifty years of information design history.  [...]

  7. Furballs 05 Oct 2006

    [...] All the above is a lead in to my latest discovery on the web, a page by Timo dedicated to the dashed line, of which ellipsis are a family member. 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. [...]

  8. Nordic Design Blog » links for 2006-10-08 08 Oct 2006

    [...] The dashed line in use · Touch (tags: design illustration visualization diagrams information communication reference)                [...]

  9. Nordic Design Blog » Touch: The dashed line in use 22 Oct 2006

    [...] Touch is a research project looking at the intersections between the digital and the physical. Its aim is to explore and develop new uses for RFID, NFC and mobile technology in areas such as retail, public services, social and personal communication. [...]

  10. notes » Blog Archive » The Dashed Line in Use 04 Nov 2006

    [...] Timo Arnall is doing a research project that involves researching the use of the dashed line. Touch is a research project looking at the intersections between the digital and the physical. Its aim is to explore and develop new uses for RFID, NFC and mobile technology in areas such as retail, public services, social and personal communication. [...]

  11. ArchiSpass » Blog Archive » Dashed Line 05 Nov 2006

    [...] Jeder Planer benuetzt Sie mehrmals pro Tag, aber den Hintergrund ueberlegt man sich dabei nicht unbedingt. Um diese Luecke zu schliessen, gibt es auf TOUCH einen Artikel mit, wie sollte es auch anders sein, ein paar Illustrationen(wie zb diese hier) [...]

  12. no sense of place :: links for 2006-09-30 17 Nov 2006

    [...] The dashed line in use · Touch 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 (tags: visualization design) Filed in Del.icio.us on September 30th, 2006. [...]

  13. El Hombre Que Comía Diccionarios » Blog Archive » I Am Here As You Are Here As You Are Me and We Are All Together 06 Jan 2007

    [...] Timo también ha recopilado, en este excelente artículo para Touch (háganme caso, este blog vale su peso en oro), un buen puñado de usos de las líneas discontinuas en el diseño que también merece la pena leer. [...]

  14. Martin L’Allier » Blog Archive » Le trait pointillé en détail 03 Aug 2007

    [...] Un article surprenant et assez pertinent sur l’histoire et la fonction du trait pointillé. [...]

  15. Nachlese Juli 2007- Die Seiten des Monats » Allgemeines 13 Aug 2007

    [...] The dashed line in use In Grafikdesign gibt es mehr Ansatzmöglichkeiten für die gestrichelte Linie, als Sie vielleicht vermuten. Dieser Beitrag präsentiert die meisten davon. [...]

  16. Best of July 2007 | Best of the Month 13 Aug 2007

    [...] The dashed line in use Graphic design offers more approaches and design solutions with dashed lines then you probably think it does. This article presents many of them. “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.” [...]

  17. Links for 8/13/07 [my NetNewsWire tabs] 14 Aug 2007

    [...] The dashed line in use · Touch —Cool illustrations [...]

  18. lost node » Blog Archive » Best of July 2007 22 Aug 2007

    [...] The dashed line in use Graphic design offers more approaches and design solutions with dashed lines than you probably think it does. This article presents many of them. “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.” [...]

  19. Web 2.0 Blog » Blog Archive » Nachlese Juli 2007- Die Seiten des Monats - aus dem Blog:Dr. Web Weblog[Quelle] 01 Sep 2007

    [...] The dashed line in use In Grafikdesign gibt es mehr Ansatzmöglichkeiten für die gestrichelte Linie, als Sie vielleicht vermuten. Dieser Beitrag präsentiert die meisten davon. [...]

  20. Webbkoll - back from the dead at Webbkoll 07 Nov 2007

    [...] grafik: En streckad linje (via Digg: Design http://www.digg.com) http://www.nearfield.org/2006/09/the-dashed-line-in-use Exempel på allt som en streckad linje kan användas [...]

  21. » links for 2007-11-21 21 Nov 2007

    [...] The dashed line in use · Touch (tags: information visualization design selected) [...]

Comments

  1. Nicolas 28 September 2006

    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

    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

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

  4. Ugo 29 September 2006

    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

    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

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

  7. David 30 September 2006

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

  8. Scott Smith 1 October 2006

    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

    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

    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

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

  12. Timo 5 October 2006

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

  13. vahakn 5 October 2006

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

    flavours

  14. Olmec Sinclair 5 October 2006

    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

    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

    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

    Excellent!!!

  18. James 17 August 2007

    Famous ! I love dashes :)

Leave a reply

Comments are moderated, and may take a while to appear.