A poster in your pocket: The challenge of delivering rich interactive visual explanations to mobile devices for an undergraduate medical curriculum

Here we describe the development of a reusable, flexible template that allows the creation of interactive visual explanations for mobile platforms that use overview and detail panels in scalable vector graphic (hereinafter SVG) format to provide focus plus context and to link to ancillary content. Posters allow illustration and exploration of complex visuals and ideas and the relationships between them in a fashion that permits students to focus on one of a large number of ideas in detail while maintaining context with the rest of the domain. This type of activity is particularly hard to achieve within the limited screen real estate available in the mobile environment. A simple layout was created to support the core activity of a minimum viable product for exploring the graphic and text elements thus maximizing the space available for these key elements, lessening cognitive burden and the potential for user error. The main interaction is to move a slider over a overview map in order to access detailed content. Tapping flagged areas on both the map and detail panels brings up ancillary content. In-browser pixel-perfect collision detection which allows for finely tuned access to relevant detailed content based on user interaction was implemented using SVGs to link graphic elements to this extra content. An inline tour of the necessarily spartan interface was added as tooltips, which rely on the hover interaction, are not supported by mobile touch-based interfaces.