Ted McDonald

Interaction designer
Incoming intern at NASA JPL

  • My Role
  • UX Design
  • UI Design
  • Front-End Code
  • Team
  • Ted McDonald
  • Project
  • Duration: 2 weeks
  • Class Project

Periodic Table of Elements

I built a responsive periodic table of elements app for a prototyping class at the University of Washington (UW). My goal was to increase the usability and accessibility of the periodic table of elements across all devices, especially mobile.

I chose to build a periodic table of elements app because chemistry curriculum has grown in popularity over the last few decades and students rely on element reference tools. According to the Department of Education, 70 percent of high school graduates in 2009 had taken chemistry, compared with 49 percent of graduates in 1990.

Outcome

After two weeks of research, ideation, and building, I showcased my periodic table of elements prototype during an open house event at the UW MakerSpace. I received compliments and feedback that will influence future iterations.

What I Made

My prototype adapts to browser viewport width and orientation. Elements are displayed in a four-column grid when viewed in portrait orientation and a traditional layout when viewed in landscape orientation. Element groups can be filtered and searched, and the prototype includes a theme for color blind students and pinch to zoom on mobile.

A Responsive Table

Students switch between laptops and mobile devices, so my prototype accounts for both. The table of elements looks great and behaves similarly regardless of device. Detailed element information is only one click or tap away.

Responsive periodic table of elements prototype on desktop and mobile.

Orientation Specific Layouts

A grid-based layout in portrait orientation allows for increased font sizes and more element information, improving readability and usability on mobile. Flipping the phone horizontally shows the traditional table layout for context.

Reorienting phone will switch app between a grid view and traditional view.

Element Search

Students want to look up certain elements as quickly as possible. To help them accomplish this goal, my table of elements includes a fuzzy search option that filters in real-time.

Find an element quickly with search.

Element Group Filters

Filtering by element groups helps reduce the number of elements to sort through. If the table is horizontally orientated (traditional layout), elements that don't meet filter criteria are less opaque, preserving positional context of the filtered elements. When in portrait orientation, elements that don’t meet criteria are removed from page so as to not take up valuable screen real estate.

Filtering element groups on desktop and mobile.

Element Zoom

Students have the ability to zoom in on elements, especially useful when dealing with a long string of numbers like atomic mass.

To improve readability when numbers overlap, I included a background on the electron states so that the numbers are legible, but slightly transparent so the user can see letters in the element name.

Zooming in on elements. Overlaps are given a slightly opaque background to enhance readability.

Color Blind Theme

Students want to be able to tell element groups apart and color is often used to visually separate each group. For students with color blindness, such as Deuteronomy, I created a set of distinct symbols that help differentiate element groups.

Pattern theme in use. Deuteranopia color blindness is simulated on the right side of image.

How I Got There

My design process consistent of user research, competitive analysis, ideation, paper prototypes, and a digital prototype.

User Research

I based my research on high school and college students who had taken chemistry with the past four months. I sent out a survey, which received 24 responses. It was a quick way to get a high-level understanding of how students use the periodic table of elements. I found that:

  • 83% look for a specific element
  • 67% look up elements using their phone
  • 88% prefer element groups visually distinguishable
  • 58% tend to focus on a few element groups at a time

I also conducted two semi-structured interviews with chemistry students at the University of Washington. This allowed me to gather qualitative data.

One of my interviewees was color blind and had difficulty with red and green colors. Because of this, he sometimes struggled to distinguish between element groups when solely color coded.

Another interviewee expressed frustration with many periodic table of element apps she had tried, mentioning that they locked orientation and did not display element mass numbers on the main screen. This required her to “chicken peck every single element” for extra information.

Competitive Analysis

I wanted to see if a responsive periodic table of elements app solved a real problem, so I downloaded some of the most popular apps on mobile app stores.

Many of the apps I tested had great information, hampered by frustrating navigation. One of the apps I tested, Quick Elements, required too many steps to display common element information. The app orientation, which users cannot manually change, switches between landscape and portrait periodically in a disorienting manner.

iOS app flow (Quick Elements): too many steps and orientation changes can be disorienting.

Most periodic table web apps are designed for desktop and do not work well on mobile. There was an opportunity to improve usability and accessibility.

Students want to find element information as quickly as possible so that they can finish their assignments. Many of the existing tools force users to adapt to their design choices, rather than being flexible and adapting to the needs of users.

A good solution needed to display common element information by default, maintain an efficient app flow, make elements quick to find, and improve accessibility.

Ideation

Early sketches focused on portrait orientation for mobile devices. Presentation and readability of element information was an important factor. Due to a tight deadline, I settled on a couple key features, leaving other ideas for future consideration.

Some sketches that imagined how layout might look and behave on mobile.

Paper Prototype

Before creating a digital interactive prototype, I tested my user flows with paper prototypes. These were quick to produce and I could create or edit screens during testing sessions as needed. To evaluate my user flows, I created a series of user tasks for my testers to go through, ensuring that my flows were quick, intuitive, and absent of any gaps.

To create my paper prototypes, I drew a set of phone sized boxes on paper which I then used to fill in app screens. I cut these screens out and used them for paper prototype evaluations.

A few of the screens I used for my paper prototype evaluation.

I tested with three users, gathering useful feedback which I used to update my user flows before building a digital interactive prototype.

Digital Interactive Prototype

My prototype was centered around switching between portrait and landscape table layouts, search, filtering of elements groups, and accessibility features like zoom and a color blind theme.

Due to the fact I had to deal with 118 separate elements — and a quickly approaching project deadline — I decided to prototype the layout in a browser.

Using JavaScript templates, I populated 118 element placeholders onto the page with minimal effort. I found two quality JSON data sets for periodic elements, which I combined and used to populate my element placeholders, saving me the time of having to input information manually.

Snapshots of my prototype getting built.

I used CSS media queries to create responsive breakpoints. This allowed me to specify style rules for mobile vs desktop widths, and portrait vs landscape orientations.

Mobile devices have the ability to reorient their viewport depending on whether the phone is held landscape or portrait. Conveniently, mobile browsers occupy the full viewport. This allows me to assume that if the browser width is less than the browser height, the phone is in portrait mode, and vice versa. I can then apply separate rules when conditions are met.

An added bonus of prototyping in browser was that I could direct people to a link for testing. Their feedback helped shape the direction my design took, and I was able to quickly make changes and output to the live site.

Creating a Color Palette

Students want to be able to tell element groups apart and color is often used to visually separate each group.

The color palette I chose differentiates element groups for most people, but it does not work well for users who are color blind.

My color palette consisted of ten colors, which helped to separate element groups.

Since my table uses dark text on a light background (white text tends to render poorly at small sizes), my options for shading or tinting were limited.

Designing for Color Blindness

One of my interviewees had Deuteranopia, a red-green color deficiency. I noticed his binder had colored tabs for section identification, but he had drawn patterns on them with a marker. The patterns were unique and offered an alternative to color for distinguishing between sections.

Borrowing his idea, I was able to design a set of distinct symbols that helped differentiate element groups.

Symbols help to differentiate element groups for color blind users.

Each symbol had to be unique and avoid being misunderstood as a call to action. This meant I had to refrain from using shapes like hearts, the letter ‘x,’ and stars.

I had two weeks to research, ideate, and build the first version of this project. Going forward, I will squash some bugs and release this project on it’s own domain. I also look forward to adding requested features, such element group sorting.