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.
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.
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.
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.
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.
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.
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.
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.
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.
My design process consistent of user research, competitive analysis, ideation, paper prototypes, and a digital prototype.
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:
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.
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.
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.
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.
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.
I tested with three users, gathering useful feedback which I used to update my user flows before building a 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.
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.
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.
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.
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.
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.