Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Small Multiples in the Visual Language of Instructional Designs

Small Multiples in the Visual Language of Instructional Designs

Presentation to LDS Church UX Designers; personal thesis research into how the concept of small multiples (Tufte 1983, 1990, 1997) can be used in creating the visual aesthetic around instruction and experience.

Doug Stringham

March 05, 2014

More Decks by Doug Stringham

Other Decks in Design


  1. Small Multiples in the Visual Language of Instructional Designs

  2. A single image is okay. But that same image, when

    multiplied a number of times, is often irresistible.” Bob Gill
 Graphic Design as a Second Language, p. 14 “
  3. Bede (725) De computo vel loquela per gestum digitorum http://www.thomryng.com/amateurmonk/wp-content/uploads/2012/05/venerablebede1.jpg

  4. ¶ Here foloweth the table of the arte of the

    hande  In which as you may se 1 is expressed by ye lyttle fynger of ye lefte hande closely and harde croked.  2 is declared by lyke bowynge of the weddynge fynger (whiche is the nexte to the lyttell fynger) together with the lytell fynger.  3 is signified by the myddle fynger bowed in lyke maner, with those other two...
  5. 4 is declared by the bowyng of the myddle fynger

    and the rynge fynger, or weddynge fynger, with the other all stretched forth.  5 is represented by the myddle fynger onely bowed.  And 6 by the weddynge fynger only crooked: and this you may marke in these a certayne order.  But now 7, 8, and 9, are expressed with the bowynge of the same fyngers as are 1, 2, and 3, but after an other fourme...
  6. Ugh.

  7. Leupold (1724) Der alten finger rechnung in theatrum arithmetica-geometricum https://fh-zwickau.de/fileadmin/ugroups/ftz/ftz/Personalitaeten/Leupold.jpg

  8. http://edwardtufte.ru/envisioning-information/small-multiples/hands.jpg

  9. More bueno.

  10. What are small multiples?

  11. a holistic (or Gestaltian) visual representation tactic constructed of multiple

    homogeneous units arranged to reveal salient comparisons in data presentation, visualization, and pedagogy.
  12. a holistic (or Gestaltian) visual representation tactic constructed of multiple

    homogeneous units arranged to reveal salient comparisons in data presentation, visualization, and pedagogy.
  13. a series of like images that allow users to see

    comparisons and differences.
  14. Tufte (1983, 1990, 1997) http://digital.uncg.edu/390/jennifer_hutchens/images/tufte.jpg

  15. None
  16. At the heart of quantitative reasoning is a single question:

    Compared to what? “
  17. Small multiple designs, multivariate and data bountiful, answer directly by

    visually enforcing comparisons of changes, of the differences among objects... “
  18. Constancy of design puts the emphasis on changes in data,

    not changes in data frames.” Edward Tufte
 Envisioning Information, p. 67 “
  19. None
  20. minimum visual linguistics = decreased cognitive load data in familiar

    (timeline) and desired (“what do I do on Monday?”) format
  21. teaches adjacency (“What was the weather like before X and

    what will it be like after Y?”) communicates rhetoric: orange and yellow = ?; blues and grays = ?
  22. http://teresco.org/pics/yankees-20080921/scorecards/SCORECARD-yankees-20080921-640.jpg

  23. So what?

  24. instructional design + 
 visual design (small multiples) = 

    targeted pedagogy
  25. Looked at 70 small multiples examples collected over ~10 years

  26. Seven themes (“objectives”) emerged over various design cases.

  27. 1. Define/show the steps of a skill or task.

  28. If I want to define/show the steps of a skill/task

    (“task analysis”), I should consider: “
  29. • that a task(s) is general and (although there is

    left-to-right = chronology), rhetorically neutral • that only one frame of the task should be shown at a time • that one frame = a handful of steps or subtasks
  30. • the relationship of images (closer or further apart) on

    the y-axis • if images overlap, transparency can help distinguish “before,” “now,” and “after”
  31. Design cases

  32. Covers of DK Superguides Swimming, Football, and Tennis. ©2000 Dorling

  33. Visual instructions for how to make spinach ban-chan (original image

    vertical; recomposed here for ease of viewing). ©2011 Amy Kim Kibuishi.
  34. http://thisisnthappiness.com/post/718860901/things-my-father-didnt-teach-me-how-to-tie-a-tie

  35. http://www.nytimes.com/interactive/2014/02/20/sports/olympics/womens-figure-skating.html?_r=1

  36. 2. Define/show ordinal relationships.

  37. If I want to define/show 
 ordinal relationships (the when

    between objects), I should consider: “
  38. • that the ordinal nature of the task is explicitly

    the most important part of what’s being taught • focusing on the step or the task • including an explicit graphical numeral system to clearly explicate between steps
  39. Design cases

  40. Editorial layout from Tennis, “The High Backhand of Caroline Wozniacki,”

    March 2008, p. 52–53. ©2008 Pentagram.
  41. Editorial layout from Tennis, “Hit a Close Stance Forehand,” April

    2008, p. 67. ©2008 Pentagram.
  42. How to install Skype (from http://www.skype.com/intl/en-us/get-skype/on-your-computer/macosx/downloading). ©2010 Skype.

  43. https://www.behance.net/gallery/lithographic-pictograms/4700819

  44. 3. Define/show adjacency and trace.

  45. Trace = dynamic, multi- dimensional patterns of change over time...visible

    contrails of captured experience [over time]. Gibbons, 2006
  46. © James Speed Hensinger/Rex Feat. http://i.dailymail.co.uk/i/pix/2013/06/20/article-2345454-1A6A53C4000005DC-358_964x645.jpg

  47. If I want to define/show adjacency and trace (the where

    between objects), I should consider: “
  48. • that, because of the number of images, the display

    may require several salient static images • the representation should include enough comparative images but be confined to a single view
  49. • that a learner can view all of the frames

    globally, and then locally • that the display should be horizontal (not diagonal or vertical); strategy = comparison and prediction over many frames
  50. Design cases

  51. “Sallie Gardner at a Gallop,” or “The Horse in Motion,”

    Eadweard Muybridge (1878).
  52. Flipbook/image strip of The Hitchhike dance move. Courtesy Clint Hough/sixtiescity.com.

  53. “Juan Marichal, born 1938.” ©1966 Gerald Gooch. Image used with

    permission of the National Portrait Gallery, Smithsonian Institution, Washington, D.C.
  54. Reenvisioned horizontal composition, depicting adjacency. “Juan Marichal, born 1938.”

  55. https://theappendix.net/blog/2012/12/a-nineteenth-century-digital-humanities

  56. 4. Define/show progress and process.

  57. If I want to define/show progress and process (the how

    between objects), I should consider: “
  58. • that steps show causal or derivative relationships: Y comes

    after X • that time is more important than space
  59. • that steps in a process are discrete enough to

    represent many subtasks but not too discrete that comparisons are too vast • that images allow for greatest and preferred comparison by the designer
  60. • that the display should be horizontal (not diagonal or

    vertical); strategy = compare the stopping point of the last frame and the starting point of the next frame
  61. Design cases

  62. Men’s Health magazine layout, “All-Star Power,” four-step workout, June 2010,

    p. 52. ©2010 Men’s Health/Rodale.
  63. http://flowingdata.com/2012/06/29/growth-of-the-basketball-uniform/

  64. US Historical Flags—United States of America. Courtesy Zimand via Creative

    Commons BY-SA 3.0.
  65. None
  66. http:// photos.aaronbarkerphoto graphy.com/Nature/2012- Annual-Eclipse/i-bsTMR7s

  67. “ 5. Define/show 
 rhetorical heterogeneity.”

  68. If I want to define/show rhetorical heterogeneity (any relationship between

    objects), I should consider: “
  69. • although different, objects or images should also belong to

    the same ‘similarity’ or genre so they represent “changes in data” • ‘rhetorical relationship’ might also include size
  70. Design cases

  71. Tableau d’Histoire Naturelle: Annelides, Crustaces, Arachnides, etc. (detail), Henri Duval

    (1834). David Rumsey Map Collection.
  72. “Bread and Better” (detail), Parents, September 2007, page 260. Photography

    by Paula Hible. Reprinted with permission from Parents® magazine. ©2007 Meredith Corporation. All rights reserved.
  73. Rancherito’s takeout menu (detail). ©2010 Rancherito’s.

  74. http://www.patrickmoberg.com/november-4-2008.jpg

  75. http://mlbstyleguides.com/samplechapter/images/SAMPLE%20CHAPTER%20Philadelphia%20Phillies%202012%20Page%2003.jpg

  76. “Year by Year Summary: New York Mets,” MLB Game Worn

    Jerseys of the Double-Knit Era. ©2009 William Henderson.
  77. None
  78. 6. Define/show various steps of a story or narrative.

  79. If I want to define/show the various steps of a

    story or narrative, I should consider: “
  80. • that one frame might represent of many subtasks, steps,

    or scenes in the narrative • although different, objects or images should also belong to the same story or genre so they represent “changes in data”
  81. Design cases

  82. http://www.brainpickings.org/index.php/2012/05/18/100-ideas-that-changed-film/

  83. Storyboard for animated short, “Tara Duncan ‘The 4 Parchments’.” ©2010

    Moonscoop / DQ Entertainment International, with the participation of M6 Métropole Télévision.
  84. http://3.bp.blogspot.com/_6clDkM2fhzc/TKAZ0z76-XI/AAAAAAAADdc/-ph8igseG5k/s1600/wireframe_RE001.jpg

  85. “Che idea, far verde la neve” (“that idea, to make

    green the snow”), magazine layout from IL—Intelligence in Lifestyle, February 2010, pp. 24–25. ©2010 Francesco Franchi.
  86. 7. Create an instructional or informational aesthetic.

  87. If I want to create an instructional or information design

    aesthetic I should consider: “
  88. • that even though objects or image frames may or

    may not compare related concepts, similar sizing and organization = informational feel • that similarly sized, shaped, colored, or semantic objects will benefit from an orderly, navigable configuration
  89. Design cases

  90. Pictorial Dictionary of Eliza Pughe, page 6 (1843; detail). By

    permission of The National Library of Wales.
  91. “The List” from Radar Magazine, September 2008, p. 16–17. ©2008

  92. http://assets.theatlantic.com/static/coma/images/issues/201101/numbers.jpg

  93. pinterest.com/dstringham/ small-multiples

  94. tl;dr

  95. Does y/our work require:

  96. define steps of a task define order (the “when”) define

    adjacency (the “where”) define progress/process (the “how”) define relationship differences define steps in a narrative look informational
  97. Thanks. dstringham@gmail.com
 @stringd Stringham, D. B. (2012). The Efficacy

    of Small Multiples in the Visual Language of Instructional Designs. (Unpublished masters thesis). Brigham Young University, Provo, Utah. Images used herein in the spirit of Fair Use, (§107 to 118, Title 17, US Code). No duplication allowed; where applicable, source indicated. Copyrights belong to their owners.