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.
