Periodic Table of the Elements
Note
This article discusses an exploratory sample we’ve created in the Mixed Reality Design Labs, a place where we share our learnings about and suggestions for mixed reality app development. Our design-related articles and code will evolve as we make new discoveries.
Note
This sample app was designed for HoloLens 1st gen. See Periodic Table of the Elements 2.0 for HoloLens 2 version.
Periodic Table of the Elements is an open-source sample app from Microsoft's Mixed Reality Design Labs. Learn how to lay out an array of objects in 3D space with various surface types using an Object collection. Also learn how to create interactable objects that respond to standard inputs from HoloLens. You can use this project's components to create your own mixed reality app experience.
Demo video
Recorded with HoloLens 2 using Mixed Reality Capture
About the app
Periodic Table of the Elements visualizes the chemical elements and each of their properties in a 3D space. It incorporates the basic interactions of HoloLens such as gaze and air tap. Users can learn about the elements with animated 3D models. They can visually understand an element's electron shell and its nucleus - which is composed of protons and neutrons.
Background
After I first experienced HoloLens, I knew I wanted to experiment with a periodic table app in mixed reality. Since each element has many data points that are displayed with text, I thought it would be great subject matter for exploring typographic composition in a 3D space. Giving users the chance to visualize the element's electron model was another interesting part of this project.
Design
For the default view of the periodic table, I imagined three-dimensional boxes that would contain the electron model of each element. The surface of each box would be translucent so that the user could get a rough idea of the element's volume. With gaze and air tap, the user could open up a detailed view of each element. To make the transition between table view and detail view smooth and natural, I made it similar to the physical interaction of a box opening in real life.
Design sketches
In detail view, I wanted to visualize the information of each element with beautifully rendered text in 3D space. The animated 3D electron model is displayed in the center area and can be viewed from different angles.
Interaction prototypes
The user can change the surface type by air tapping the buttons on the bottom of the table - they can switch between plane, cylinder, sphere, and scatter.
Common controls and patterns used in this app
Interactable object (button)
Interactable object is an object, which can respond to basic HoloLens inputs. It's provided as a prefab/script, which you can easily apply to any object. For example, you can make a coffee cup in your scene interactable and respond to inputs such as gaze, air tap, navigation, and manipulation gestures. Learn more
Object collection
Object collection is an object, which helps you lay out multiple objects in various shapes. It supports plane, cylinder, sphere, and scatter. You can configure additional properties such as radius, number of rows and the spacing. Learn more
Technical details
You can find scripts and prefabs for the Periodic Table of the Elements app on the Mixed Reality Design Labs GitHub.
Porting story for HoloLens 2
Read the story on how Periodic Table of the Elements app was updated with HoloLens 2's instinctual interactions.
Periodic Table of the Elements 2.0
About the author
 |
Yoon Park UX Designer @Microsoft |