Building Interactivity: A Study of Anatomy

Case Study for Building Interactivity in Web Apps

This article focuses on creating interactivity in a complex subject - human anatomy. The app we highlight below was developed for Elsevier, Body Spectrum © 2014.

Developing interactivity requires many features coming together with an effective user interface. Often, this type of development depends on creative and technical elements working in tandem - an interdisciplinary approach. Below we highlight several of the key features of Body Spectrum as a demonstration of the integrated technical capabilities.

Many Layers Working Together

A core concept in interactivity is that there are many layers to and within an application. In this study below, there is an overall menu (to the left) and the working screen (to the right). Within the menu screens, a user can access different types of anatomy (from cell structure to muscular), a glossary of definitions, and a help screen. Within the working screen, a user can manipulate many components, or layers within the subject (as selected from the menu).

This layering concept allows a user to move backward and forward in a self-exploratory manner. There is not one defined path for the user, rather the user can manipulate the layers within the app as needed.

Intuitive Controls

Some applications define a specific user journey, however; in these types of interactive apps, a user may not use the journey you specify. Therefore, it is important to create intuitive controls that allow a user to quickly understand how the app functions and be able to navigate successfully through it.

Additionally, for most web apps and eLearning platforms, user manuals and formal training are relics of the past. Developing intuitive controls then primarily stems from defining the use case for the app - what is the primary purpose of what this app is intended to do?

For this particular app, we want the user (a student) to be able to "learn by doing", that is self-explore human anatomy.

There are multiple controls in our study below - everything from selecting a color for highlighting specific components of the subject, to zooming in and out, to navigating to different screens as needed.

Depth of Exploration

In complex subjects, there are often multiple categories and sub-categories that you may want a user to explore. Additionally, there may be different ways or modes of this exploration.

In our study below, we have not only enabled the user to define the subject by category and sub-category, but also select a "study mode" or a "quiz mode". In the study mode, the user is free to click on the subject and highlight with various colors and effects. In quick mode, the user must identify the particular highlighted area with multiple choice or fill-in-the-blank.

Learning Through Visual and Tactical Exploration

The end result is a dynamic app that breaks down a complex subject into logical parts and applies a diverse set of interactivity that allows the user to self-explore. This type of learning environment is a highly effective study tool, especially for users who enjoy a more hands-on approach.

About this Case Study 
Client: Elsevier Science 
Type: Body Spectrum Application