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.
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.
Study 1: How can a website that exemplifies orders of magnitude through size landmarks support the five levels of Magaña’s framework?
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.
Secondly, I consulted literature on the design of educational multimedia. Richard Mayer's Multimedia Learning is the preeminent work in this space.
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.
Other precendents include Ray and Charles Eames' famous "Powers of Ten" video.
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".
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.
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
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 principles are used in the ordering of entities scheme. One entity is chosen per power of ten.
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 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.