{"id":1004,"date":"2018-08-18T05:37:24","date_gmt":"2018-08-18T05:37:24","guid":{"rendered":"http:\/\/www.mnemonic.studio\/memo\/?p=1004"},"modified":"2018-09-21T23:39:31","modified_gmt":"2018-09-21T23:39:31","slug":"prototyping-digital-exhibits-part-1","status":"publish","type":"post","link":"http:\/\/www.mnemonic.studio\/memo\/prototyping-digital-exhibits-part-1\/","title":{"rendered":"Prototyping Digital Exhibits, Part 1"},"content":{"rendered":"<h4>Five ways multimedia prototyping can help developers build more effective, usable, and engaging exhibitions.<\/h4>\n<p><!--more--><\/p>\n<hr\/>\n<p>Prototyping is a standard operating procedure in many exhibition development scenarios. A new exhibit rarely makes it into the galleries without thorough testing, to ensure that it appeals to visitors, is robust and intuitive, and meets its educational goals.<\/p>\n<p>When it comes to multimedia experiences within exhibitions, however, this process often falls by the wayside &#8211; usually for lack of resources (human and otherwise).<\/p>\n<p>I&#8217;m a big proponent of digital prototyping, and have found it to be a crucial step in developing successful multimedia experiences. Here are 5 ways it can provide insights and help make exhibits great:<\/p>\n<hr\/>\n<h4>Getting on the Same Page<\/h4>\n<p>Sometimes complex ideas for digital interactives are challenging to communicate, or even to understand. I worked on an exhibition once with math based content; the client provided a written description of their intent, my team provided a written proposal, we all had multiple meetings and phone calls, and when my team eventually presented a prototype a few months into the process, we realized that we hadn&#8217;t been talking about the same thing&#8230; at all. <\/p>\n<figure id=\"attachment_1013\" aria-describedby=\"caption-attachment-1013\" style=\"width: 320px\" class=\"wp-caption alignright\"><a href=\"http:\/\/www.mnemonic.studio\/memo\/wp-content\/uploads\/2018\/08\/rubiks4.png\" class=\"fancybox\" rel=\"fb\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.mnemonic.studio\/memo\/wp-content\/uploads\/2018\/08\/rubiks4-320x180.png\" alt=\"Tessellation Table Prototype\" width=\"320\" height=\"180\" class=\"size-thumbnail wp-image-1013\" srcset=\"http:\/\/www.mnemonic.studio\/memo\/wp-content\/uploads\/2018\/08\/rubiks4-320x180.png 320w, http:\/\/www.mnemonic.studio\/memo\/wp-content\/uploads\/2018\/08\/rubiks4-640x360.png 640w, http:\/\/www.mnemonic.studio\/memo\/wp-content\/uploads\/2018\/08\/rubiks4-768x432.png 768w, http:\/\/www.mnemonic.studio\/memo\/wp-content\/uploads\/2018\/08\/rubiks4-1024x576.png 1024w, http:\/\/www.mnemonic.studio\/memo\/wp-content\/uploads\/2018\/08\/rubiks4-470x264.png 470w, http:\/\/www.mnemonic.studio\/memo\/wp-content\/uploads\/2018\/08\/rubiks4-285x160.png 285w, http:\/\/www.mnemonic.studio\/memo\/wp-content\/uploads\/2018\/08\/rubiks4.png 1280w\" sizes=\"auto, (max-width: 320px) 100vw, 320px\" \/><\/a><figcaption id=\"caption-attachment-1013\" class=\"wp-caption-text\">Prototype of Tessellation Table, <br \/>Beyond Rubik&#8217;s Cube<\/figcaption><\/figure>\n<p>The prototype was an important tool that let our teams work toward a common understanding and build our ideas together; without it we would have discovered our miscommunications very late in the development process. (It all worked out in the end.)<\/p>\n<p>This isn&#8217;t necessarily a common situation, but it exemplifies the challenges of communicating multimedia experiences simply through words. What constitutes a &#8216;fun&#8217; game? What makes for an &#8216;engaging&#8217; interface? These kinds of subjective assessments can be nebulous when presented in words, but an actual digital prototype, even a simple one, can align team members on goals and expectations.<\/p>\n<hr\/>\n<h4>Mitigating Risk<\/h4>\n<p>Sometimes developing a digital exhibit can be a little frightening &#8211; because it&#8217;s &#8216;complicated.&#8217; You may be working with new or custom technology, or building something that pushes the limits of what computers are capable of. You may have an idea for a game or simulation that risks being too convoluted to pull off successfully.<\/p>\n<p>A few years ago, I worked on the design and development of exhibits for the National Museum of Mathematics; in this case, every exhibit was complicated, either because of new technology integration, complex math algorithms, or intense calculations that risked slowing our computers to a crawl. In prototyping these experiences before the design and production phases of the project had even begun, our team was able to resolve many of the project&#8217;s biggest challenges and identify and isolate those that remained. <\/p>\n<p>By starting off with the riskiest technical challenges, these &#8220;Proof of Concept&#8221; prototypes helped us budget and allocate resources more effectively, and freed our team to focus on designing intuitive interfaces and engaging experiences.<\/p>\n<hr\/>\n<h4>Designing for Humans<\/h4>\n<p>It&#8217;s often said that a visitor needs to be engaged with a digital exhibit within seconds or they&#8217;ll choose to move along (how many seconds is subject to debate). If said exhibit is at all confusing or frustrating to use, most visitors won&#8217;t stick around to learn its quirks. <\/p>\n<figure id=\"attachment_1022\" aria-describedby=\"caption-attachment-1022\" style=\"width: 320px\" class=\"wp-caption alignleft\"><a href=\"http:\/\/www.mnemonic.studio\/memo\/wp-content\/uploads\/2018\/08\/molecule_proto.jpg\" class=\"fancybox\" rel=\"fb\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.mnemonic.studio\/memo\/wp-content\/uploads\/2018\/08\/molecule_proto-320x180.jpg\" alt=\"Molecule Magic Prototype\" width=\"320\" height=\"180\" class=\"size-thumbnail wp-image-1022\" srcset=\"http:\/\/www.mnemonic.studio\/memo\/wp-content\/uploads\/2018\/08\/molecule_proto-320x180.jpg 320w, http:\/\/www.mnemonic.studio\/memo\/wp-content\/uploads\/2018\/08\/molecule_proto-640x360.jpg 640w, http:\/\/www.mnemonic.studio\/memo\/wp-content\/uploads\/2018\/08\/molecule_proto-768x432.jpg 768w, http:\/\/www.mnemonic.studio\/memo\/wp-content\/uploads\/2018\/08\/molecule_proto-1024x576.jpg 1024w, http:\/\/www.mnemonic.studio\/memo\/wp-content\/uploads\/2018\/08\/molecule_proto-470x264.jpg 470w, http:\/\/www.mnemonic.studio\/memo\/wp-content\/uploads\/2018\/08\/molecule_proto-285x160.jpg 285w, http:\/\/www.mnemonic.studio\/memo\/wp-content\/uploads\/2018\/08\/molecule_proto.jpg 1280w\" sizes=\"auto, (max-width: 320px) 100vw, 320px\" \/><\/a><figcaption id=\"caption-attachment-1022\" class=\"wp-caption-text\">Prototype of Molecule Magic, <br \/>Liberty Science Center<\/figcaption><\/figure>\n<p>Prototyping is one of the best ways to assess the usability of a multimedia exhibit. Watching visitors (or staff unfamiliar with the project) try to decipher navigation, gameplay, and other modes of interaction can be a humbling experience for the design team, but it provides the insight to make necessary improvements. <\/p>\n<p>Tweaking interface elements like size, color, language, and layout can make a huge difference in successfully leading visitors through a digital experience. Prototyping can also help developers assess how much &#8216;handholding&#8217; is needed for complex experiences: can visitors figure it out on their own, or should some form of guidance or instruction be incorporated into the exhibit?<\/p>\n<hr\/>\n<h4>Visualizing Scale<\/h4>\n<p>When developing hands-on exhibits for science centers and children&#8217;s museums, it&#8217;s common for designers to build full-scale mockups out of plywood or even cardboard; this helps make sure everything is readable, reachable, and accessible to visitors.<\/p>\n<p>For digital exhibits, full-size mockups &#8211; even using paper or masking tape &#8211; can help the development team understand the scale of a media installation. This can likewise inform interface development, as designers place content and interactive elements in such a way to make them physically accessible and intuitively located. This is particularly important for large scale or non-traditional media installations; a button in the corner of a designer&#8217;s laptop screen may become impossible to reach when scaled up to wall or tabletop size.<\/p>\n<p>For multi-user experiences, this kind of prototyping can help designers optimize each user&#8217;s personal space. A few years ago I was part of a team developing a multitouch table application for the Caguas Science Center in Puerto Rico. We knew we needed a good amount of throughput, but didn&#8217;t want to crowd visitors together too uncomfortably. A simple graphic mockup of the app, viewed on a comparably-sized display, helped us intuitively find a &#8216;sweet spot&#8217; for the interface&#8217;s scale and layout.<\/p>\n<hr\/>\n<h4>Wrangling Content<\/h4>\n<p>In earlier times, digital exhibits often became a dumping ground for unedited content. Since anything that didn&#8217;t fit into a label or graphic panel could easily be presented digitally, curators could take up all the &#8216;virtual&#8217; space they needed for deep content dives. <\/p>\n<figure id=\"attachment_1010\" aria-describedby=\"caption-attachment-1010\" style=\"width: 320px\" class=\"wp-caption alignright\"><a href=\"http:\/\/www.mnemonic.studio\/memo\/wp-content\/uploads\/2018\/08\/fifteen.png\" class=\"fancybox\" rel=\"fb\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.mnemonic.studio\/memo\/wp-content\/uploads\/2018\/08\/fifteen-320x180.png\" alt=\"\" width=\"320\" height=\"180\" class=\"size-thumbnail wp-image-1010\" srcset=\"http:\/\/www.mnemonic.studio\/memo\/wp-content\/uploads\/2018\/08\/fifteen-320x180.png 320w, http:\/\/www.mnemonic.studio\/memo\/wp-content\/uploads\/2018\/08\/fifteen-640x360.png 640w, http:\/\/www.mnemonic.studio\/memo\/wp-content\/uploads\/2018\/08\/fifteen-768x432.png 768w, http:\/\/www.mnemonic.studio\/memo\/wp-content\/uploads\/2018\/08\/fifteen-1024x576.png 1024w, http:\/\/www.mnemonic.studio\/memo\/wp-content\/uploads\/2018\/08\/fifteen-470x264.png 470w, http:\/\/www.mnemonic.studio\/memo\/wp-content\/uploads\/2018\/08\/fifteen-1295x728.png 1295w, http:\/\/www.mnemonic.studio\/memo\/wp-content\/uploads\/2018\/08\/fifteen-285x160.png 285w, http:\/\/www.mnemonic.studio\/memo\/wp-content\/uploads\/2018\/08\/fifteen.png 1716w\" sizes=\"auto, (max-width: 320px) 100vw, 320px\" \/><\/a><figcaption id=\"caption-attachment-1010\" class=\"wp-caption-text\">Prototype of Finding Fifteen, MoMath<\/figcaption><\/figure>\n<p>But &#8216;more&#8217; is not necessarily better when it comes to engaging visitors; today, we&#8217;re smarter about this, and our ubiquitous mobile devices (for better or worse) remove any real obligation to provide comprehensive content through multimedia.<\/p>\n<p>Digital prototypes provide an easy way to see how content &#8216;feels&#8217;: how much is too much, and at what point does the user become overwhelmed? What typography choices provide the needed balance between legibility and density? When built on a parallel schedule with label writing and other content development, these prototypes can also help developers allocate what content goes where &#8211; graphic vs media &#8211; for maximum impact.<\/p>\n<hr\/>\n<p>This all sounds great in theory, of course, but how can a team with limited resources make multimedia prototypes? In <a href=\"http:\/\/www.mnemonic.studio\/memo\/prototyping-digital-exhibits-part-2\/\" rel=\"noopener\" target=\"_blank\">part 2<\/a>, I&#8217;ll take a look at some inexpensive tools and techniques &#8211; both high-tech and low-tech &#8211; that teams can use to test, visualize, and experiment with their digital exhibit ideas.<figcaption class=\"wp-caption-text\" style=\"outline: none; text-align:left;\">Header image: Prototype of Dynamic Wall, MoMath<\/figcaption>\n<div class=\"tkss-post-share icons \"><div class=\"single-soc-share-link\"><a href=\"https:\/\/www.facebook.com\/sharer\/sharer.php?u=http:\/\/www.mnemonic.studio\/memo\/prototyping-digital-exhibits-part-1\/\" title=\"Share on Facebook\" target=\"_blank\"><span>Facebook<\/span><i class=\"icon-facebook\"><\/i><\/a><\/div><div class=\"single-soc-share-link\"><a href=\"https:\/\/twitter.com\/home?status=Check%20out%20this%20article:%20Prototyping Digital Exhibits, Part 1%20-%20http:\/\/www.mnemonic.studio\/memo\/prototyping-digital-exhibits-part-1\/\" title=\"Share on Twitter\" target=\"_blank\"><span>Twitter<\/span><i class=\"icon-twitter\"><\/i><\/a><\/div><div class=\"single-soc-share-link\"><a href=\"https:\/\/plus.google.com\/share?url=http:\/\/www.mnemonic.studio\/memo\/prototyping-digital-exhibits-part-1\/\" title=\"Share on Google\" target=\"_blank\"><span>Google<\/span><i class=\"icon-google\"><\/i><\/a><\/div><div class=\"single-soc-share-link\"><a href=\"mailto:?Subject=Prototyping Digital Exhibits, Part 1&Body=I%20saw%20this%20and%20thought%20of%20you!%20http:\/\/www.mnemonic.studio\/memo\/prototyping-digital-exhibits-part-1\/\" title=\"Share on Mail\" target=\"_blank\"><span>Mail<\/span><i class=\"icon-mail\"><\/i><\/a><\/div><div class=\"single-soc-share-link\"><a href=\"http:\/\/www.linkedin.com\/shareArticle?mini=true&url=http:\/\/www.mnemonic.studio\/memo\/prototyping-digital-exhibits-part-1\/\" title=\"Share on Linkedin\" target=\"_blank\"><span>Linkedin<\/span><i class=\"icon-linkedin\"><\/i><\/a><\/div><div class=\"single-soc-share-link\"><a href=\"https:\/\/pinterest.com\/pin\/create\/button\/?url=http:\/\/www.mnemonic.studio\/memo\/prototyping-digital-exhibits-part-1\/&media=http:\/\/www.mnemonic.studio\/memo\/wp-content\/uploads\/2018\/08\/dywa_edit.jpg&description=Prototyping Digital Exhibits, Part 1\" title=\"Share on Pinterest\" target=\"_blank\"><span>Pinterest<\/span><i class=\"icon-pinterest\"><\/i><\/a><\/div><\/div>","protected":false},"excerpt":{"rendered":"<p>Five ways multimedia prototyping can help developers build more effective, usable, and engaging exhibitions. FacebookTwitterGoogleMailLinkedinPinterest<\/p>\n","protected":false},"author":1,"featured_media":1014,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_exactmetrics_skip_tracking":false,"_exactmetrics_sitenote_active":false,"_exactmetrics_sitenote_note":"","_exactmetrics_sitenote_category":0,"footnotes":""},"categories":[27],"tags":[30,11,65,51,36],"class_list":["post-1004","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-memorandum","tag-best-practices","tag-exhibition","tag-prototyping","tag-technology","tag-ux"],"_links":{"self":[{"href":"http:\/\/www.mnemonic.studio\/memo\/wp-json\/wp\/v2\/posts\/1004","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.mnemonic.studio\/memo\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.mnemonic.studio\/memo\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.mnemonic.studio\/memo\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.mnemonic.studio\/memo\/wp-json\/wp\/v2\/comments?post=1004"}],"version-history":[{"count":10,"href":"http:\/\/www.mnemonic.studio\/memo\/wp-json\/wp\/v2\/posts\/1004\/revisions"}],"predecessor-version":[{"id":1173,"href":"http:\/\/www.mnemonic.studio\/memo\/wp-json\/wp\/v2\/posts\/1004\/revisions\/1173"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/www.mnemonic.studio\/memo\/wp-json\/wp\/v2\/media\/1014"}],"wp:attachment":[{"href":"http:\/\/www.mnemonic.studio\/memo\/wp-json\/wp\/v2\/media?parent=1004"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.mnemonic.studio\/memo\/wp-json\/wp\/v2\/categories?post=1004"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.mnemonic.studio\/memo\/wp-json\/wp\/v2\/tags?post=1004"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}