Post

Designing CLIO

An Open-Source Toolkit for Museum Pop-Up Digital Interactives

Joshua Frechette
University of Washington LIS Graduate Program

Dillon Connelly
University of Washington Museology Graduate Program

Introduction

With the increasing prevalence and availability of open-source technologies, museums have been provided with a plethora of low-cost tools to enhance exhibitions and educational programming at their institutions (Langer & Alderman, 2016). While there are tools developed to tackle the digital interactive needs of museums, they often require extensive knowledge of coding to fully utilize.  We aim to rectify this with the creation of CLIO, an open-source toolkit for the creation of digital exhibit kiosks.

The CLIO toolkit is powered by web technologies such as HTML, CSS and JavaScript. Worldwide surveys of developers consistently show that scripting languages like JavaScript are the most commonly understood programming languages worldwide (Ramel, 2018; Stack Overflow Developer Survey, 2019), and museums are more likely to have staff familiar with web technologies than other forms of digital development tools (Price & James, 2018). 

In this paper, we will describe the design and creation of the CLIO toolkit, including a 3D-printed touchscreen kiosk built for the BurkeMobile, a mobile pop-up mini-museum educational program at the Washington State Burke Museum of Natural History and Culture.

What is CLIO?

Project Overview and Background

We chose to name our project “CLIO”, after the Greek muse of history.  Like the muses of old, we hope to inspire new creation and open innovation within the museum sector. 

The CLIO toolkit integrates existing low-cost hardware with open-source web-based software into a toolkit that museums can utilize to create an interactive kiosk. The interface and activities are web-based, allowing them to be used with virtually any display and input system with little to no modification of the underlying code.

Made for mobility, the kiosk offers a modular design that can be configured for use in different environments, such as classrooms, school cafeterias, libraries and community centers. Upon startup, the kiosk boots into “Facilitator Mode”, a graphical user interface that allows program facilitators to customize which “Activities” to display as part of their exhibition. Activities are collected into “Programs”, which can be loaded on-the-fly without the need to change hardware. Activity content is stored locally on the device,allowing the kiosk to be used across multiple exhibits without access to the internet.  After the desired Activities are selected, the kiosk can enter “Exhibit Mode”, which displays the selected Activities as a carousel to be navigated by users.

Activities included in this toolkit range in complexity and customization options. There are simple interactive activities with very little customization, as well as more complex activities that can be extensively customized to assist in the creation of a narrative. Simple interactive games like quizzes, flashcards, and tile matching are included for younger audiences, while other activities like timelines allow older audiences to have a more in-depth informational experience.  Activities can also be tagged by the intended audience and a grouping scheme help keeps them organized.  All activity templates included in the toolkit can be fully customized with new images and descriptions using a plain text editor.   

The kiosks used in pilot testing were constructed using a Raspberry Pi 3B+ computer, official Raspberry Pi 7” touchscreen and consumer 3D printer for a total unit build cost of $125. This low cost and simple hardware configuration allow the kiosk to be assembled and deployed with minimal resources, while offering the flexibility, accessibility and maintainability to engage a variety of audiences in different learning contexts.

Goals

Accessibility

CLIO was designed to create materials surrounding a collection that can be accessed and understood by the broadest possible user base. In practice, this manifests in many different ways; from clarity within the interface and accessibility features, to repairability and maintenance, and the inclusion of open-source technologies that anyone can improve.

When implementing an accessibility feature, it should serve the largest audience possible.  The  interface uses simple controls and established conventions for icons, menus, and user interactions to improve clarity and ease navigation (Reeves, 2015). The CLIO kiosk intentionally utilizes large on-screen controls, which have been shown to create a more accessible user experience (Dickerson, 2018). The kiosk toolkit employs client-side, rather than server-side, technologies eliminating the need for an active internet connection, making the kiosk quicker and more responsive than one limited by Wi-Fi bandwidth (Segue Technologies, 2013). Finally, the kiosk was designed to have a small physical footprint as to not overshadow the physical objects it is contextualizing, in accordance with previous research on digital exhibit elements (Damala, Ruthven, & Hornecker, 2019).

An accessibility menu is always available on the kiosk screen during Facilitator Mode and Exhibit Mode, allowing both facilitator and user to customize the interface in a variety of ways.  This includes font and paragraph settings, font faces that can improve character recognition for those with disorders like dyslexia (Rello, & Baeza-Yates, 2013), anddifferent high contrast modes assisting those with visual impairment (W3C, 2016). These universal design principles not only allow users to access the kiosk, but create customization and usability options for deploying the kiosk in different programs and environments, a design benefit sometimes referred to as “the curb-cut effect” (Beagley, 2017). 

Community

The keystone of open-source technology is community involvement.  Unlike proprietary technologies developed by private companies, the continued development of open-source code is not limited by budgets and business interests but the need for and use of that code by anyone worldwide. 

As museums explore different ways to engage with and define themselves within communities, it is rare that they think of themselves as part of the global technology community.  Our hope is that CLIO and other projects like it will empower museums to create their own technologies and share these tools as part of the global open-source development community. 

The Toolkit

The CLIO toolkit includes an interface and templates for interactive activities that are built on web technologies, so they can work on any hardware and software that is able to host a web server (figure 1).  Templates for twelve different interactive activities are available (table 1), as well as all necessary software, usage and editing guides, hardware recommendations, and 3D printable files for the kiosk enclosure and mounting system.  Also, provided is a printable brochure to help facilitators get the kiosk setup and into Exhibit Mode.

Figure 1: Toolkit Technologies
The interface and activities are web-based, allowing them to be used with any hardware capable of running a web server and browser.  The CLIO toolkit also includes specifications for utilizing modular open-hardware and quickly producing a usable kiosk.

Table 1: About the interactive activities.
Activities included in this toolkit range in complexity and customization options.

Interface

The kiosk has an interface coded in HTML, CSS and JavaScript that runs as a dedicated web application with no access to the underlying operating system.  Upon startup, the kiosk will enterFacilitator Mode (Figure 2).  This allows facilitators to change which Program is loaded, resume the previously used Activities and add additional Activities they may wish to have as part of their exhibit. Facilitator Mode displays a menu bar tab system relating to core functionalities of the kiosk.

After the desired Activities are selected, the facilitator can enter Exhibit Mode (Figure 3) to temporarily disable further configuration of the kiosk. Exhibit Mode restricts kiosk users to Activities selected by the facilitator. By design, the kiosk must be restarted to return to Facilitator Mode.  

Exhibit Mode displays the Activities selected by the facilitator as a carousel that users can navigate. Tapping on an activity will open it full screen and the user can return home at any time to access other Activities. Additionally, the kiosk will automatically return home after an amount of time without interaction.

Custom code for this project is created using jQuery, an open-source JavaScript library that simplifies the readability of complex JavaScript functions. The interface is loaded dynamically through JavaScript resulting in a more responsive experience than a kiosk web browser that must load individual pages.    

Figure 2: Facilitator Mode
Upon startup, the kiosk allows facilitators to select the Activities they wish to display in Exhibit Mode for their program.

Figure 3: Exhibit Mode
After Activities are selected, Exhibit Mode restricts users to Activities selected by the facilitator. Returning to Facilitator Mode requires a restart of the kiosk.

Activities

Image Comparison

This activity superimposes two images over each other, with a divider that can be dragged to show the visual difference between them (Figure 4). By default, this activity will generate small buttons at the specified coordinates that can be used to open full screen pop-up displays with rich text content.  The buttons can also be hidden, creating customizable hot areas that open the corresponding informational pop-up when touched (figure 5).  You can also choose to enable a ‘hint’ button that will reveal these hot areas to the user if touched (figure 6).  This activity can be used to compare two disparate images, overlay new information on an image, or show different views of the same object. 

Figure 4a: Sockeye Salmon Vs Chinook Salmon ‘Compare Image’ activity.
By default, the tooltips are rendered as small magnifying glass icons.

Figure 4b: Salmon Vs Salmon ‘Compare Image’ activity.
The divider can be dragged to show the visual differences between the two images.

Figure 5: Who’s Eating Who? ‘Compare Image’ activity.
Hot areas can be configured to open full screen informational pop-ups when touched. In this example, dragging the slider over the image reveals the food web connecting different animals in an ecosystem.

Figure 6: Spot The Difference ‘Compare Image’ activity. 
A button can be enabled that allows users to reveal hot areas. These hot areas are invisible until the “eye” reveal button is pressed, highlighting the differences between the two images.

Timeline

This activity allows users tomove through a timeline with each slide containing an image and rich text.  The timescale, number of dates, and date format are all customizable, allowing for the creation of micro or macro scale timelines (figure 7).

Figure 7a: Contemporary ‘Timeline’ activity.  

Figure 7b: Deep Time ‘Timeline’ activity.  

Tile Match

Designed to draw connections between two sets of objects, images, or ideas, these tiles can be customized to use text or an image (figure 8).  One tile from each side can be selected at a time and a matching pair displays a full screen pop-up with customizable text to provide further information to the user about their answer.

Figure 8: Where Do I Live? ‘Tile Match’ activity.  When customizing the activity, program facilitators can select which tile in the left group matches with which tile on the right. 

Objects

Objects from museum collections can be listed, each with a title, subtitle, description and image (figure 9).  Tapping on an object will open it in a full screen pop-up that can be scrolled through to show additional images of the object, if available, as well as a description (figure 10).  Zooming in will hide the description, allowing the user to pan around a full screen image.  This activity is designed to draw connections between a museum's “home” collections and the objects on display in outreach programming.

Figure 9: Back at the Burke ‘Object’ activity.  This activity is designed to highlight objects from the museum’s “home” collection that are related to objects in the pop-up exhibition.

Figure 10: Back at the Burke ‘Object’ activity.  

Slideshow

This activity allows users to navigate through a slideshow, with optional “basement” slides.  Each slide is individually customizable, including the title, content and background, which can be either a color, image or video (figure 11).  A slide can have as many basement slides as desired, which exist “beneath” that slide and allows users to navigate down to see additional information (figure 12).

Figure 11: Salmon Life Cycle ‘Slideshow’ activity.  

Figure 12: Salmon Life Cycle ‘Slideshow’ activity. 
Basement slides exist beneath slides so users can navigate down to read more in-depth information about the slide they have selected.

Flashcards

This activity displays flashcards that, when tapped, will pull up a brief description (figure 13).  Each flash card can be configured with additional content that will open up in a fullscreen informational popup.

Figure 13a: Sage Grouse ‘Flashcards’ activity. 

Figure 13b: Sage Grouse ‘Flashcards’ activity. 

Image Gallery

A collection of images can be combined into a gallery that the user can look through, with brief descriptions for each image (figure 14).

Figure 14: Bobcats ‘Image Gallery’ activity. 

True or False Quiz

Though the template is called “True or False Quiz,” the activity can be customized to prompt users to select from any binary set of choices (figure 15).  The buttons can be configured with the desired wording, or left blank (figure 16).  Each time the user answers, they are shown a full screen prompt with a configurable response (figure 17).  Depending on their answer, the buttons allow them to retry the question or move on to the next one (figure 18).

Figure 15: Animal Tracks ‘True or False Quiz’ activity. 

Figure 16: Animal Tracks ‘True or False Quiz’ activity.
Button text can be configured with different wording or left blank.

Figure 17: Animal Tracks ‘True or False Quiz’ activity.
Correct answers show the response that was configured, as well as a button to move to the next question.

Figure 18: Animal Tracks ‘True or False Quiz’ activity.
Incorrect answers also show individually customized responses and allows users to move to the next question or try again.

Visual Thinking

This inquiry-based learning activity (Wolpert-Gawron, 2016)can be used to highlight an image and provide a prompt so that the user can learn more about the things they find most interesting (figure 19).

Figure 19: Migrating Shrew ‘Visual Thinking’ activity. 

Play Video

This activity plays an MP4 video and can be configured to disable the audio or control bar (figure 20).  Without speakers, this activity can be used to play short animated infographic videos.

Figure 20: Nocturnal Predators ‘Play Video’ activity.

3D Render

This activity allows the user to select between a list of objects to load into the frame (figure 21).  Each object can have a customizable rich text description that is opened in a full screen pop-up.  This activity can render 3D object files saved in .stl format.

Figure 21: Skulls ‘3D Render’ activity. 

Rich Text with Narration

This activity can be used to provide the user with rich text.  Audio playback can also be included, such as an interview, narration or other form of voiceover, or disabled altogether (figure 22).

Figure 22: North American Bobcat 'Rich Text with Narration’ activity. 

Software

PHP and Python are utilized in interactions that require commands to be sent to the underlying operating system, such as changing display brightness.  All PHP and Python scripts used in the pilot test with Raspberry 3B+ hardware are included in the toolkit.  Additionally, the toolkit includes a flashable SD card image that comes with all necessary software, files and scripts, allowing the toolkit to be used “plug-and-play” style on a Raspberry Pi.

Hardware

The toolkit is designed to be hardware- and resolution-independent so that it can be used with any compatible computer, display and input device. Web-based technologies are widely supported by most operating systems through the use of a web browser, allowing institutions with smaller technology budgets to repurpose hardwaresuch as unused and secondhand computers.

Pilot Testing of CLIO

Overview

A prototype version of a CLIO exhibit kiosk is currently being pilot tested as part of a pop-up educational outreach program through the Washington State Burke Museum of Natural History and Culture. Three kiosks are being created for the Burke Museum’s Education department.  One kiosk will be integrated into a mobile pop-up exhibit about interconnected ecological networks in spring and summer of 2020.  Two additional kiosks are being fabricated for Burke Education to customize with activities for future inclusion in programming.

The project is being designed and evaluated using established frameworks for the design and evaluation of digital museum interactives (Dubois, Bortolaso, Bach, Duranthon, & Marmont, 2011).  Evaluation will use the MUSETECH museum technology evaluation framework (Damala, Ruthven, & Hornecker, 2019), with evaluation research being conducted to assess the impact of the kiosk on the museum professionals using the kiosk, program participants using the kiosk, and the Burke Museum as an institution. 

At the conclusion of our pilot test, all the designs, code, and evaluation data for the CLIO toolkit will be made available through an online software repository and on the CLIO project website (http://www.cliomuseums.org).

Activity Configuration

Activities are stored on the kiosk within JSON (JavaScript Object Notation) files.  This file format allows data to be saved in a way that is easily readable and writable by both humans and computers. Creating new activities from a template in the toolkit is as simple as editing a few points of data, which can be completed using a JSON editor (figure 24) or plain text editor (figure 25).  

Paragraph and text formatting is stored within these JSON files using a lightweight markup language, closely based on BBCode.  This allows formatting information, such as bold or underlined text, to be stored within a plain text format.  For example, storing “[b]Example[/b]” within a JSON configuration file would be rendered by the interface as bold, i.e. Example.  This markup system currently supports paragraphs; headings; subheadings; bold, italic, underline,  and strikethrough text; ordered, unordered and nested lists; images and image sets; and quote blocks.

Figure 24: Who’s Eating Who? ‘Compare Image’ Activity
An example configuration file as viewed through an online JSON editor.

Figure 25: Who’s Eating Who? ‘Compare Image’ Activity
An example configuration file as viewed through a standard plain text editor.

Software

The kiosk prototype uses a Debian Linux distribution known as DietPi as the operating system and runs a Chromium browser operating in kiosk mode.

Hardware

The CLIO kiosk prototype is designed to have a mobile and modular form factor. All hardware is easily replaceable in the event of hardware damage or failure.  It is constructed using off-the-shelf parts and will not require soldering.  Raspberry Pi hardware facilitates easy cloning of the kiosk system, allowing the institution to create additional kiosks as demand dictates.

For the pilot test, all required parts were fabricated using a Creality CR-10 Mini.  This includes a case, articulating arm, clamp and bumper-style screen protector (table 2).  To improve the products longevity, we purchased standard metal M5 Hex bolts instead of printing them.  Overall, the total cost per kiosk, including electronics, hardware, and filament is $125 (table 3).  The final kiosk utilizes many designs that are available through online repositories under permissive licenses (figure 23).

Table 2: Estimates for print time and required filament.  Times may vary based on printer model and print settings. Above are estimates for the Creality CR-10 Mini.

Table 3: Total unit cost per individual kiosk including electronics, hardware, and filament.

Figure 23a: Our design uses a clamp to attach to tables, bookshelves and other similar surfaces.

Figure 23b: Kiosk starts in Facilitator Mode to allow Activities to be selected.

Figure 23c: After Activities are selected, the kiosk can be placed in Exhibit Mode.

Figure 23d: Users can navigate into an Activity using the carousel and return home at any time.

Figure 23e: The kiosk is easy to take apart and components are easily replaced.

The Future of CLIO

The CLIO toolkit is open-source, so any museum or organization can use and customize the toolkit free of charge.  As such, we hope the CLIO toolkit empowers museum professionals to create their own digital content for both in-house and outreach programming. The versatile nature of this toolkit, combined with the power of 3D printing technology, allows the toolkit package to be customized into form factors other than an exhibit kiosk. CLIO could be used to create a tablet that is carried by a patron through the museum using an internal battery pack, laptop, wall-mounted kiosk, or as a display integrated into an immersive exhibit environment. The pilot phase of this project has shown that the creation and customization of open-source tools is not only possible, but feasible for museums of all sizes.  When considering the future of CLIO, the possibilities for future projects and research are limitless.

Accessibility

While already designed for accessibility, there will always be further improvements that can be made.  Inclusion of headphones or on-board speakers would improve accessibility for a wide range of audiences.  Not only would it improve multimedia playback, but open avenues for accessibility like interface feedback and Activities that better utilize video and audio assets.   Testing would need to be completed to reduce the ambient noise generated by these exhibits.

Content

Activity customization currently only requires editing text files, but further tools would more easily allow those without coding knowledge to access the toolkit.  Designing a web-based platform with a graphical user interface for Activity creation and customization would allow facilitators to create Activities and preview how they would behave on a kiosk.  Implementing a user-friendly content creation system opens up a wide range of options, such as the inclusion of language support and improved rich text markup.  Additional Activities are also being explored for inclusion within the collection.

Easily the most important part of utilizing open-source and open-access materials is to credit the original content creators.  Along with a content creation wizard, we would like to improve the implementation of content attributions to be sure that credit is given where credit is due.

Community

Tools like CLIO are only as good as the community that interacts with them.  Sharing information and seeking community input is a large part of the power of open-source tool sets. In order to help foster a vibrant and active CLIO community, we would like to create a web blog and online community to facilitate the inclusion of open-source technologies into museums and related institutions.  Additionally, this community-focused website could be used to host an online version of the CLIO content creator, as well as forums, guides and a repository for additional activity types.

Static Museum Context

The current toolkit is designed for and tested in a pop-up programming environment, but future work with CLIO could investigate ways to further integrate this toolkit into a static museum context.  Possibilities include a kiosk within a gallery to supplement curated exhibit content or for use as an evaluation data gathering kiosk.  Additionally, utilizing an open-source NFC/RFID toolkit could potentially add a tactile level of interaction to the kiosk, where visitors are invited to hold an RFID-embedded object to a scanner and tap a button on the kiosk to pull up related activities.  

Technical Improvements

CLIO is currently designed to be hardware-independent, but future versions of CLIO could take deeper advantage of the Raspberry Pi hardware through further integration of open-source Python tool sets.  Allowing the interface to control system level functions, such as enabling or disabling internet connectivity or utilizing the Raspberry Pi’s customizable GPIO inputs, could provide a secure way to implement features like wireless content updates or Arduino-powered motorized exhibit triggers.  

Acknowledgements

This project would not have been possible without the financial support of the University of Washington Resilience Lab’s Compassion Seed Grant and the University of Washington Museology Graduate Program’s paid internship pilot. Funding student research and projects fosters innovation and we have been incredibly lucky to have these support options available as we developed CLIO.  We also wish to thank Katharine Canning and Pamela Maldonado from the Burke Museum of Natural History and Culture’s Education department for their mentorship and partnership over the last year as we‘ve developed CLIO.  

A  Listed below are the open-source hardware and software tools used to create CLIO (tables 4 - 8).  

Table 4: Hardware was sourced through two community-driven manufacturers and distributors.

Table 5: Some 3D parts were designed or modified for this project, while others were sourced through online repositories.  Sources for parts that were not custom designed for the toolkit are listed in the table above.

Table 6: All software used for this project is available through the Debian package manager.

Table 7: The interface is rendered dynamically using client-side technologies.

Table 8: Similar to the interface, Activities are rendered dynamically through JavaScript.

The CLIO Team

Dillon Connelly is a museum studies graduate student at the University of Washington studying the effects of open-access and open-source technology in museums through a lens of equity and access.  Joshua Frechette is a designer and developer that believes that accessibility is about more than just function, but is itself a way of creating community collaboration.

Bibliography

Beagley, L. “Curb Cut Thinking: An Argument for Universal Design”. Published January 4, 2017. Consulted February 15, 2020. https://ui.asu.edu/blog/curb-cut-thinking

Damala, A., & Ruthven, I., & Hornecker, E. “The MUSETECH Companion : Navigating the Matrix”. Published January 2019. Consulted February 15, 2020. https://www.semanticscholar.org/paper/The-MUSETECH-Companion-%3A-Navigating-the-Matrix-Damala-Ruthven/1b2f4976105a4491469d321da9036f3bfa2087f2

Dickerson, Z. (2018). “Size matters! Accessibility and Touch Targets.” Last updated April 4, 2018. Consulted February 15, 2020. https://medium.com/@zacdicko/size-matters-accessibility-and-touch-targets-56e942adc0cc

Dubois, E., Bortolaso, C., Bach, C., Duranthon, F., & Blanquer-Maumont, A. “Design and Evaluation of Mixed Interactive Museographic Exhibits”. Published October 2011.  Consulted February 15, 2020. https://www.researchgate.net/publication/259714620_Design_and_Evaluation_of_Mixed_Interactive_Museographic_Exhibits

Langer, M. & Alderman, J. "Open hardware belongs in your museum." MW2016: Museums and the Web 2016. Published January 15, 2016. Consulted December 27, 2019. https://mw2016.museumsandtheweb.com/paper/open-hardware-belongs-in-your-museum/

Price, K. & James, D. "Structuring for digital success: A global survey of how museums and other cultural organizations resource, fund, and structure their digital teams and activity." MW18: MW 2018. Published January 31, 2018. Consulted December 29, 2019. https://mw18.mwconf.org/paper/structuring-for-digital-success-a-global-survey-of-how-museums-and-other-cultural-organisations-resource-fund-and-structure-their-digital-teams-and-activity/

Ramel, D. (2018). “Developer Economics Survey: Data Science, Machine Learning Are Most-Wanted Skills.” Retrieved December 29, 2019, from https://adtmag.com/articles/2018/09/24/developer-economics-survey.aspx.

Reeves, J. (2015). “Making Simple Ideas Simpler.” Last updated March 31, 2015. Consulted February 15, 2020. https://www.uxbooth.com/articles/making-simple-ideas-simpler/

Rello, L., & Baeza-Yates, R. “Good Fonts for Dyslexia”. Published 2013. Consulted February 15, 2020. http://dyslexiahelp.umich.edu/sites/default/files/good_fonts_for_dyslexia_study.pdf

Segue Technologies. (2013). “Client-Side vs. Server-Side Code: What’s the Difference?” Last updated May 1, 2013. Consulted February 15, 2020. https://www.seguetech.com/client-server-side-code/

Stack Overflow Developer Survey 2019. (2019). Retrieved December 29, 2019. Consulted February 15, 2020. https://insights.stackoverflow.com/survey/2019.

W3C. “Accessibility Requirements for People with Low Vision”. Published March 17, 2016. Consulted February 15, 2020. https://www.w3.org/TR/low-vision-needs/#text-contrast

Wolpert-Gawron, H. “What the Heck Is Inquiry-Based Learning?” Published on August 11, 2016. Consulted February 15, 2020.