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.

Transcript

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
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 “
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 Kindersley.
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.
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.
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 Pentagram.
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
 pinterest.com/dstringham/small-multiples
 @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.