Understanding AI · design notes · November 2026

Why it is designed this way

Understanding AI combines the Powers of ten zoom with the seven-layer stack, adds a question to every step, puts the labs inside the zoom, and rebuilds the big-picture map, in a calm, minimal style. Below: what changed, the research behind each choice, and the colour and type decisions.

The main design choices

One experience: zoom through the stackThe seven layers are the opening picture. Point at a layer and scroll, and the picture zooms into that layer, with nothing to select. Each layer has three or four zoom steps. Switching layers pulls back to the stack first, so you always know where you are.

Simpler for everyone, deeper for the curiousEvery step leads with two or three plain sentences, an everyday comparison and one memorable number. “For the technically curious” holds the proper terms, figures and sources.

A story to followLike the Journey of a prompt, the default path starts with your question and works down to the electricity. You can also jump to any layer.

Questions at every stepEach of the 25 steps has a quick question. “Quiz me as I go” shows it automatically; otherwise it waits. Questions from other layers are one tap away, and the Quiz tab mixes them all.

Play inside the zoom and in its own tabThe Next-token lab, Train a tiny model and Run a training run open from the matching step, and live together under Play with a new energy calculator.

A clearer big pictureThe constellation now uses the same seven bands as the stack, with readable labels. Click dots to build your own route; the map fills in the steps between them. Ideas you have seen are filled in.

Light, calm and minimalA white page, near-black type, hairline rules and one accent colour, the glacier blue from arian-shafa.xyz. The layers are told apart by position, number, name and icon instead of seven colours. The dark theme is one tap away.

What the evidence says, and what we did

Show the whole, then zoom, then details on demand

Evidence

The classic information-seeking pattern is “overview first, zoom and filter, then details on demand” (Shneiderman, 1996).

Applied

The stack is the overview, each layer zooms in, and technical details open only when asked for.

Guide first, then let people explore

Evidence

Good explanatory graphics often follow a “martini glass”: a short guided story, then free exploration (Segel and Heer, 2010).

Applied

A guided path runs from your question down to energy. Play, Quiz and the big-picture map are the open exploration.

Start concrete, then go abstract

Evidence

Concreteness fading, moving from familiar examples to abstract ideas, supports understanding in maths and science (Fyfe et al., 2014). Its reach is debated, so we use it as a guide.

Applied

The journey starts with a phone and a question, then tokens, a map of meaning and weights. Each idea gets an everyday comparison: dials, a stadium of calculators, a fill-in-the-blank game.

Small steps that learners control

Evidence

Splitting material into meaningful, learner-paced segments improves retention and transfer (Rey et al., 2019, 56 studies). Placing words next to the pictures they describe and highlighting what matters also help (Mayer, 2024).

Applied

25 short steps, each one picture and two or three sentences, advanced by the reader. Labels sit inside the pictures, and the part you zoom into next is outlined.

Plain first, depth on request

Evidence

Help that suits beginners can get in experts’ way, the expertise reversal effect (Kalyuga et al., 2003). Progressive disclosure is the standard interface answer (Nielsen Norman Group).

Applied

Plain text by default for everyone. The technical layer keeps the vocabulary, numbers and citations that technical readers want.

Ask before telling, and test after

Evidence

Answering a question before learning the material usually improves learning (Pan and Carpenter, 2023; a 2024 meta-analysis found a moderate effect, g = 0.54). Quizzing raises classroom achievement (Yang et al., 2021: 222 studies, g ≈ 0.50), and feedback that explains why matters (Hattie and Timperley, 2007).

Applied

Every step shows its question, with an option to answer as you go. Each answer explains why, and links back to the step.

Mix topics when practising

Evidence

Interleaving different topics has a moderate overall benefit, strongest when topics are easy to confuse (Brunmair and Richter, 2019).

Applied

The question card offers questions from other layers, and the Quiz tab’s default mode hops between layers.

Learn by doing

Evidence

Active learning beats lecturing in science courses (Freeman et al., 2014). Interactive explainers such as Transformer Explainer and TensorFlow Playground have reached large audiences of non-experts.

Applied

Labs sit at the step they explain: tokenize your own sentence, judge a tiny model’s answers, watch reinforcement learning find a loophole, plan a training run.

Animate change, not decoration

Evidence

Animations beat static pictures when they show how something changes (Höffler and Leutner, 2007, d = 0.37).

Applied

Motion is reserved for meaning: the zoom between scale levels, letters appearing one at a time, current flowing through a switch. All of it stops for people who ask their device for reduced motion.

Less decoration, clearer signals

Evidence

People learn better when material that does not support the lesson is left out, the coherence principle, and when cues highlight what matters (Mayer, 2024). Colour coding helps when it links matching things (Ozcelik et al., 2009); seven colours on one screen compete for attention instead.

Applied

One accent colour marks only the current layer, the part to zoom into next and the controls. Everything else is quiet greys and white space.

Friendly design helps a little

Evidence

Pleasant colours and friendly shapes improved retention and comprehension in a meta-analysis (Brom et al., 2018: d ≈ 0.39 and 0.32). An early transfer effect (Um et al., 2012) did not replicate (Plass et al., 2014), so we treat this as a bonus, not a foundation.

Applied

The friendliness lives in the writing, the rounded shapes and the space around everything, while colour stays calm.

Design for AI literacy

Evidence

Long and Magerko (2020) set out competencies and design considerations for teaching AI to non-experts, including making the workings transparent and tying them to everyday experience.

Applied

Every layer explains what is happening inside, starting from something visitors already do: ask a chatbot a question. Myth busting is the natural place to tackle common misconceptions later.

Colour

Light by default. Dark text on a light background was easier to read for both younger and older adults in proofreading tests (Piepenbrock et al., 2013). The dark theme remains for people who prefer it.

One accent instead of seven colours. The seven layers are an ordered stack, and their order is already shown by position, number, name and icon. Giving each its own hue added noise without adding meaning, so every colour now has one job: the glacier blue from arian-shafa.xyz marks where you are, what to zoom into next and what you can press. A warm sand appears only where heat is the point, such as a hot pipe or the sun.

1accent colour, used only to point at what matters

18.5 : 1contrast of body text on white (WCAG AA asks 4.5)

5.0 : 1the lowest text contrast anywhere, light grey on a grey panel

0things shown by colour alone

Colour never works alone. Every layer carries its number, name and icon, as WCAG asks. Blue and sand differ in lightness as well as hue, so they stay distinct for the common forms of colour blindness, and they always come with a label such as “warm liquid”. Charts avoid rainbow scales, which mislead readers (Crameri et al., 2020).

Role	Light theme	Contrast on white	Dark theme	Contrast on dark
Page	#ffffff	–	#0f1115	–
Soft panel	#f5f6f8	–	#161a20	–
Text	#111418	18.5 : 1	#eceef2	16.3 : 1
Secondary text	#4b5260	7.9 : 1	#b4bac5	9.7 : 1
Quiet text	#636a76	5.5 : 1	#8a919e	6.0 : 1
Accent	#2f6596	6.1 : 1	#8fb8de	9.1 : 1
Warm, for heat only	#b08a4f	3.2 : 1 (graphics)	#d8c19c	10.8 : 1

Type and writing

Body text: Atkinson Hyperlegible Next, designed by the Braille Institute so that easily confused letters (I, l, 1; O, 0) look clearly different. It is free and released in 2025 with seven weights and a matching monospace for numbers.
Headlines: Newsreader, the serif used on arian-shafa.xyz, so the AI site feels like part of the same family. It is used only for headings and large numbers.
Comfortable sizes: reading text at 17 to 18.5 pixels with generous line spacing and lines of about 65 characters.
Plain language: short sentences, everyday words, active voice and one idea per paragraph. Technical terms appear in the technical layer, each one explained.

Accessibility built in

Everything works by keyboard: arrow keys move through the zoom, and every control is a real button.
The text panel says everything the picture shows, so the picture is never the only way to learn.
Motion stops for anyone who asks their device for reduced motion.
Colour always comes with a number, a name or an icon.
On phones the picture sits on top, the reading panel below, and the four sections move to a bottom tab bar within thumb reach.

Known limits and next steps

On phones, labels inside the pictures are small. The reading panel carries all the information, but a few scenes could get phone-specific drawings.
The tokenizer, the attention weights and the next-word odds are illustrative, and labelled as such. A real small model running in the browser, as Transformer Explainer does, would make them exact.
The numbers come from sources dated 2017 to 2025. They will need a yearly refresh.
The best next step is a short test with five or so non-technical visitors: watch where they hesitate and which questions they get wrong.

Sources

Shneiderman, B. (1996). The eyes have it: a task by data type taxonomy for information visualizations. doi.org/10.1109/VL.1996.545307
Segel, E., & Heer, J. (2010). Narrative visualization: telling stories with data. IEEE TVCG 16(6). doi.org/10.1109/TVCG.2010.179
Fyfe, E. R., McNeil, N. M., Son, J. Y., & Goldstone, R. L. (2014). Concreteness fading in mathematics and science instruction: a systematic review. Educational Psychology Review 26. doi.org/10.1007/s10648-014-9249-3
Rey, G. D., et al. (2019). A meta-analysis of the segmenting effect. Educational Psychology Review 31. doi.org/10.1007/s10648-018-9456-4
Mayer, R. E. (2024). The past, present, and future of the cognitive theory of multimedia learning. Educational Psychology Review 36. doi.org/10.1007/s10648-023-09842-1
Kalyuga, S., Ayres, P., Chandler, P., & Sweller, J. (2003). The expertise reversal effect. Educational Psychologist 38(1). doi.org/10.1207/S15326985EP3801_4
Nielsen Norman Group. Progressive disclosure. nngroup.com/articles/progressive-disclosure
Pan, S. C., & Carpenter, S. K. (2023). Prequestioning and pretesting effects: a review. Educational Psychology Review 35. doi.org/10.1007/s10648-023-09814-5
St. Hilaire, K. J., Chan, J. C. K., & Ahn, D. (2024). A meta-analysis of the prequestion effect. Psychonomic Bulletin & Review.
Yang, C., Luo, L., Vadillo, M. A., Yu, R., & Shanks, D. R. (2021). Testing (quizzing) boosts classroom learning. Psychological Bulletin 147(4). doi.org/10.1037/bul0000309
Roediger, H. L., & Karpicke, J. D. (2006). Test-enhanced learning. Psychological Science 17(3). doi.org/10.1111/j.1467-9280.2006.01693.x
Hattie, J., & Timperley, H. (2007). The power of feedback. Review of Educational Research 77(1). doi.org/10.3102/003465430298487
Brunmair, M., & Richter, T. (2019). Similarity matters: a meta-analysis of interleaved learning. Psychological Bulletin 145(11). doi.org/10.1037/bul0000209
Freeman, S., et al. (2014). Active learning increases student performance in science, engineering, and mathematics. PNAS 111(23). doi.org/10.1073/pnas.1319030111
Cho, A., et al. (2024). Transformer Explainer: interactive learning of text-generative models. arxiv.org/abs/2408.04619
Smilkov, D., et al. (2017). Direct-manipulation visualization of deep networks (TensorFlow Playground). arxiv.org/abs/1708.03788
Höffler, T. N., & Leutner, D. (2007). Instructional animation versus static pictures: a meta-analysis. Learning and Instruction 17(6). doi.org/10.1016/j.learninstruc.2007.09.013
Ozcelik, E., Karakus, T., Kursun, E., & Cagiltay, K. (2009). An eye-tracking study of how color coding affects multimedia learning. Computers & Education 53(2). doi.org/10.1016/j.compedu.2009.03.002
Brom, C., Stárková, T., & D’Mello, S. K. (2018). How effective is emotional design? A meta-analysis. Educational Research Review 25. doi.org/10.1016/j.edurev.2018.09.004
Um, E., Plass, J. L., Hayward, E. O., & Homer, B. D. (2012). Emotional design in multimedia learning. Journal of Educational Psychology 104(2). doi.org/10.1037/a0026609
Plass, J. L., Heidig, S., Hayward, E. O., Homer, B. D., & Um, E. (2014). Emotional design in multimedia learning: effects of shape and color on affect and learning. Learning and Instruction 29. doi.org/10.1016/j.learninstruc.2013.02.006
Long, D., & Magerko, B. (2020). What is AI literacy? Competencies and design considerations. CHI 2020. doi.org/10.1145/3313831.3376727
Piepenbrock, C., Mayr, S., Mund, I., & Buchner, A. (2013). Positive display polarity is advantageous for both younger and older adults. Ergonomics 56(7). doi.org/10.1080/00140139.2013.790485
Okabe, M., & Ito, K. (2008). Color Universal Design: how to make figures and presentations that are friendly to colorblind people. jfly.uni-koeln.de/color
Wong, B. (2011). Points of view: color blindness. Nature Methods 8. doi.org/10.1038/nmeth.1618
Crameri, F., Shephard, G. E., & Heron, P. J. (2020). The misuse of colour in science communication. Nature Communications 11. doi.org/10.1038/s41467-020-19160-7
W3C (2023). Web Content Accessibility Guidelines (WCAG) 2.2. w3.org/TR/WCAG22
Braille Institute. Atkinson Hyperlegible typeface. brailleinstitute.org/freefont
Industry examples: Financial Times visual storytelling team (2023), Generative AI exists because of the transformer; University of Helsinki and MinnaLearn, Elements of AI, a free course with over a million sign-ups and no maths required.