Visualizing Size & Scale

Tools

ThreeJS

Javascript

HTML/CSS

Figma

Task

Research + UX + Development


Objective

Design a website to augment and scaffold towards size and scale cognition.

Master's thesis

Problem

Understanding size and scale has been identified as a critical skill for students, especially those in STEM disciplines. Accurately visualizing scale is often difficult.

Scale has been identified as a crosscutting concept by the National Academies of Science, Engineering, and Medicine.

National Research Council. (2012). A framework for K-12 science education: Practices, crosscutting concepts, and core ideas. Washington, D.C. : The National Academies Press, 2012. https://doi.org/doi. org/10.17226/13165

The work done for this project is closely connected to the virtual reality-based Scale Worlds project which I have been involved with since 2021.

Me in the Scale Worlds CAVE

Process

Study 1: How can a website that exemplifies orders of magnitude through size landmarks support the five levels of Magaña’s framework?

Research

I read much of the existing literature on scale cognition, starting with Alejandra Magaña. Her "Framework for Size and Scale Cognition" (FS2C) was invaluable to my design process.

The five cognitive processes that scaffold towards size and scale cognition by Magaña

Secondly, I consulted literature on the design of educational multimedia. Richard Mayer's Multimedia Learning is the preeminent work in this space.

Four important principles from Mayer's Multimedia Learning

Next I looked at some of the precedents out there. Nikon's Universcale is one of the most compelling educational websites for scale cognition out there. While it is great, user research from Magaña has shown that it has its flaws. It doesn't always align with Richard Mayer's principles either.

Screenshot from Nikon's Universcale

Other precendents include Ray and Charles Eames' famous "Powers of Ten" video.

Stills from "Powers of Ten"

Then I looked at diagrams from classroom science textbooks. Some of the diagrams that are used to teach about size, scale, and SI units of measurement contain some really great ideas. Some of ideas that I ended up pulling were the limited number of entities. In the Cell Size example one entitiy is chosen for every power of ten. Another idea I like from these is generalizing entities into groups like "can be seen with naked eye" and "can't be seen with naked eye".

Diagrams from unknown science textbooks

I then created a tech demo for the educational scale cognition website. This prototype started to do some useful things, giving the user the ability to compare 3d models of entities at powers of ten but was limited in many ways.

Tech demo

The Scale World's team has devised a technique for designing educational multimedia called "Function Mapping". I've used this technique to map out theoretical assertions onto specific design decisions. The theorietical assertions come from Magaña’s FS2C and Mayer's Multimedia Learning. Next I'll walk through some of those decisions

Diagrams from unknown science textbooks

Generalization + Segmenting

Generalization + Segmenting principles are used to create the overview panel. Entities are grouped in a logical way by their metric prefixes and segments are user-paced rather than continuous.

Discrimination + Coherence

Discrimination + Coherence principles are used in the ordering of entities scheme. One entity is chosen per power of ten.

Mathematical Reasoning + Spatial Contiguity

Mathematical Reasoning + Spatial Contiguity principles are used to create the scheme where important measurements are placed next to entities. Measurements are written out in scientific notation and standard notation.

Logical Proportional Reasoning + Signaling

Logical Proportional Reasoning + Signaling principles are used to create a highlighting system which maps out how the user moves from small to large and large to small.

There is a lot more to say about this project. For now here are some more screens from other ideas and sections of the prototype.