Ted McDonald

Periodic Table of Elements

— I built a periodic table of elements web app for high school and college students in introductory chemistry courses. The app is designed for phones especially, displaying a traditional table layout when oriented landscape and a more readable 4-column grid when oriented in portrait.

Outcome

My app is being used officially by the Chemistry departments at the University of Wisconsin-Madison and University of Iowa. At the latter, my app is part of the Open Educational Resource, used by 1000 students per semester in introductory Chemistry courses.

Research

To better understand my target audience, I surveyed 24 students from both high school and college. I also conducted two semi-structured interviews with chemistry students at the University of Washington.

I discovered two major themes. The first is that students want their educational tools to adapt to their learning habits and devices. Many periodic table apps force students to use a certain platform or lock their viewport into specific orientations.

The second theme is that few periodic table apps adopt accessible design principles. For example, information may be difficult to read on small screens or color-blind students struggle to differentiate element groups.

Portrait or Landscape

Students rely on their phones most often, so I designed features that took advantage of the form factor.

When the phone is oriented in portrait, element tiles are displayed in a 4-column grid. This gives information room to breathe and font sizes are larger, resulting in a page that is more scannable and readable.

If the student orients the phone landscape, the 4-column is transformed into a traditional table layout, displaying positional context for each element. App state remains the same regardless of orientation.

Same Content Always

Regardless of which device or platform students use, they will be presented the same content and features. This allows students to use the periodic table in any context, whether on the go or in front of their computer.

Element Filtering

As students study, they sometimes focus on particular element groups. I’ve included a filter feature that allows students to choose which groups are visible.

When the viewport is oriented landscape, elements that don't meet filter criteria are less opaque, preserving positional context. When in portrait orientation, filtered elements are removed to preserve screen real estate.

Pinch to Zoom

Sometimes it's the little things that make a big difference when it comes to accessibility. One of the most requested accessibility features was the ability to magnify elements.

Most mobile periodic table apps lack this feature and many responsive web apps disable pinch to zoom. This is unfortunate, because the ability to magnify periodic table content is useful in many situations, for example when copying down long number values.

A Color Palette for Everyone

Students want to be able to tell element groups apart and color is often used to visually separate each group. I wanted a color palette that was both approachable and accessible.

I tested with a color-blind student – more specifically, Deuteranopia – to make sure that element groups were distinct from each other. I designed a feature that adds small symbols to each element tile to create further distinction.

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

I will continue to update the app and gather feedback from current student users. My next feature update will include the ability to sort element tiles.