Ted McDonald

I design products and interactions that are engaging and accessible. I am studying Human Centered Design and Engineering at the University of Washington.

A Responsive Table of Elements

I researched, designed, and developed a responsive web app that improves upon existing solutions by addressing usability and accessibility needs.

Layout adapts to viewport width and orientation. A theme for color blind users, zoom, and search are just a few of the features.

My Contributions

  • User Research
  • Sketches & ideation
  • Prototyping
  • Front-end code

Introduction

Science curriculum has grown dramatically over the last few decades, as part of a larger push for STEM education. According to the Department of Education, 70 percent of high school graduates in 2009 had taken chemistry, compared with 32 percent of graduates in 1982.

Chemistry students rely on element reference tools, so I decided to focus my efforts on the periodic table of elements, identifying pain points and opportunities for improvement.

This project was done as part of a web programming class at the University of Washington.

User Research

I based my research on high school and college students who were currently taking chemistry. I sent out a survey, which received 32 responses. It was a quick, high level way to get an understanding of how students used the periodic table of elements.

I found that:

  • 85% search for a specific element
  • 78% look up elements using their phone
  • 88% prefer element groups visually distinguishable
  • 66% tend to focus on a few element groups at a time

I also conducted 2 one-on-one, semi-structured interviews with chemistry students at the University of Washington.

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 periodic tables were solely color coded.

Another interviewee expressed frustration with many of the apps she tried, mentioning that they locked landscape orientation and did not display element mass numbers on the main screen. This required her to “chicken peck every single element” as she completed her chemistry assignment.

Competitive Analysis

I downloaded many popular periodic table apps for iOS, as well as apps mentioned in my survey and interviews.

A lot of the apps I tested had great information, though I could empathize with frustrations related to navigating content. One of the apps I tested, Quick Elements, required too many steps to display element information. The app orientation, which is locked, switches between landscape and portrait periodically in a disorienting manner.

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

Other mobile apps had better flows, but many struggled with accessibility and ease of use issues. On the desktop side there are some good apps, though most are not usable on mobile, since they are not responsive.

Identifying Opportunities

Based on my user research and survey of existing periodic table solutions, I was able to understand common usage patterns and spot where periodic table apps were struggling to address student goals.

Student Goals

Students want to find element information as quickly as possible so that they can finish their assignments.

A good solution should involve displaying common element info (e.g. atomic mass) at all times, a traditional table layout option for positional context, an efficient app flow, searching, and filtering of elements.

Accessibility features can aid students in finding element information quickly. Color scheme, zooming in, and increasing readability are some methods for achieving better accessibility.

Ideation & Low-Fidelity Wireframes

With these findings in mind, I brainstormed dozens of ideas, sketching them out on paper. I narrowed down my ideas to a grid-based solution on mobile, addressing student needs I had previously identified, while offering a traditional view of the periodic table as well.

Sketches and low-fidelity wireframes gave me a quick idea of how my app UI might look.

Prototyping in the Browser

Due to the fact I had to deal with 118 separate elements — and a quickly approaching class deadline on my web project — I decided it would be easiest to prototype the layout in a browser.

Using JavaScript templates, I quickly populated 118 element placeholders onto the page. I found two quality JSON data sets for periodic elements, which I combined and used to populate my element placeholders.

Snapshots of my prototype getting built.

Making the Web App Responsive

Since my research showed that a large percentage of students use mobile devices, I wanted to make sure that they had access to everything users with large screens had (e.g. not hiding things like atomic weight due to size constraints).

Conveniently, mobile devices have the ability to reorient their viewport depending on whether the phone is held landscape or portrait. Also helpful is the fact that 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 created style rules that displayed a traditional table of elements layout while the phone was in landscape orientation, and a grid view while in portrait.

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

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 them to the live site.

A Color Palette for Everyone

Many students want to be able to tell element groups apart (noble, alkaline, etc.), and most often, color is used to visually separate each group. Given that there are only about 7 visually distinct colors, and that the periodic table of elements requires 10, this presented a challenge when creating a color palette.

The color palette I applied visually differentiates element groups for most people, but it does not work well for users who are color blind (about 3-5% of the population).

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.

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

Designing for Color Blindness

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

Borrowing from 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.

A delicate balance had to be reached in terms of size and symbol stroke weight as well. If the symbols were too large they would be distracting to the user, but if they were too small they would not be clearly defined. With testing, I was able to find a good balance.

I added light background colors to the elements to further increase the contrast between element groups.

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

Usability Features

A major goal for this project has been to create a periodic table that puts accessibility and usability front and center. I made big changes to the periodic table, such being able to swap between a grid based and traditional view, but my periodic table is filled with features that improve the user experience in meaningful ways.

Quick Info

Users need to find element info quickly and easily. They should never be more than one or two clicks or taps away from an element summary page, which lists extra information about an element. Certain information, such as element mass should be displayed by default.

Extra element information never takes more than one or two steps to display.

Element Search

Students want to look up an element as quickly as possible. To help them accomplish this goal, my table of elements includes a search option. Search is especially useful when the student has an element in mind, which my research shows is very common.

Find your element quickly with search.

Element Filter

According to my survey, a majority of students' assignments tend to focus on a select number of element groups, as opposed to the entire table. Being able to filter by element groups is helpful in reducing the number of elements to sort through.

If the user is in the traditional table view, elements that don't meet filter criteria are less opaque, preserving position context of the filtered elements.

Filtering element groups on desktop and mobile.

Element Zoom

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

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

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

Outcome

My project was very well received during a class demonstration. The pattern theme for color blind users and switching between grid and traditional layout depending on phone orientation were two popular features.

I had three weeks to complete this project and was not able include an element sorting feature, which is something I would like to include in the future. Currently, the elements are sorted by atomic number.

I would like to update this project soon and release it on it’s own domain.