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”.”
Technorati Tags: graphic design, visualisation, information design, instructional design, graphic language, touch, graphics,
Feed
[...] examples of the dashed line in use, and the various visual meanings of the dashed line. [...]
[...] [...]
[...] 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 [...]
[...] 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. [...]
[...] [kottke] Uses of the dashed line in various instructional diagrams over 50 years. [...]
[...] A bunch of examples of the use of the dashed line from over fifty years of information design history. [...]
[...] 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. [...]
[...] The dashed line in use · Touch (tags: design illustration visualization diagrams information communication reference) [...]
[...] 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. [...]
[...] 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. [...]
[...] 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) [...]
[...] 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. [...]
[...] 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. [...]
[...] Un article surprenant et assez pertinent sur l’histoire et la fonction du trait pointillé. [...]
[...] 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. [...]
[...] 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.” [...]
[...] The dashed line in use · Touch —Cool illustrations [...]
[...] 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.” [...]
[...] 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. [...]
[...] 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 [...]
[...] The dashed line in use · Touch (tags: information visualization design selected) [...]