๐Ÿ“ Computational Thinking ยท Abstraction

See What Matters.
Skip What Doesn't.

Abstraction is a thinking skill used to solve problems: it means identifying the important information you actually need, and ignoring the unnecessary details that would only get in the way. Architects, mapmakers, app designers, and programmers all use it every single day โ€” and so can you.

๐ŸŒ†Every messy detail
โˆ’
๐Ÿ—‘๏ธWhat you don't need
=
๐Ÿ A clear, useful model
01 ยท Learn

What exactly is abstraction?

Abstraction is one of the four core skills of computational thinking (alongside Decomposition, Pattern Recognition, and Algorithms). It has two parts working together: identifying the important information needed for a goal, and ignoring the details that don't matter for that same goal.

Think about a simple stick figure drawing: ๐Ÿง It doesn't show hair color, clothing brand, or exact height โ€” just a head, body, arms, and legs. That small amount of information is already enough for anyone to recognise "this is a person." Everything else was left out on purpose, because it wasn't necessary. That act of choosing what to keep and what to drop is abstraction in action.

02 ยท Understand

The two core skills of abstraction

Every time you build an abstraction, you are really doing two things at once.

๐Ÿ”Ž Skill 1 โ€” Identify Important Information

Ask yourself: "What do I actually need to know to reach my goal?" Keep only the information that directly helps.

Example: A weather app icon only needs to show temperature and rain chance โ€” that's what helps you decide what to wear.

๐Ÿšซ Skill 2 โ€” Ignore Unnecessary Details

Ask yourself: "What can I safely leave out without losing what matters?" Remove anything that adds clutter but no value.

Example: That same weather icon doesn't need to show the exact wind direction in every neighbourhood โ€” you don't need that to decide on a jacket.

03 ยท Explore

Abstraction is everywhere in real life

Tap each card to flip it and see how abstraction is hiding in things you use every day.

๐Ÿš‡

Subway Maps

TAP TO FLIP
Subway Map

Real train tracks curve and twist across a city, but subway maps straighten every line and space stations evenly. Passengers only need to know the ORDER of stops and WHERE to change lines โ€” not the real geography.
๐Ÿ“‡

Phone Contacts

TAP TO FLIP
Contact Card

A contact stores a name, number, and maybe a photo. It leaves out things like blood type or shoe size โ€” none of that is needed just to call or message someone.
๐ŸŒฆ๏ธ

Weather Icons

TAP TO FLIP
Weather Icon

A tiny sun or cloud icon represents huge amounts of atmospheric data (pressure, humidity, satellite readings) โ€” abstracted into one symbol your brain understands in half a second.
๐ŸŽฎ

Game Stat Cards

TAP TO FLIP
Character Stats

A battle card shows HP, Attack, and Speed. It ignores things like the character's favorite food โ€” irrelevant to how a fight plays out.
๐Ÿ“ฒ

App Buttons

TAP TO FLIP
The "Send" Button

Tapping "Send" on a chat app hides thousands of lines of code โ€” routing, servers, encryption. You just see one simple button.
๐Ÿ—“๏ธ

School Timetable

TAP TO FLIP
Timetable

A timetable shows subject, time, and room โ€” nothing about desk arrangement or wall color, because that's not useful for knowing where to be.
04 ยท Key Insight

Abstraction depends on your PURPOSE

This is the trickiest and most important idea: "important information" is not fixed โ€” it changes depending on WHY you are building the abstraction. Same object, different goal, different essential details. Try it below with one simple object: a book.

โœ… Essential for this goal

    ๐Ÿšซ Safe to ignore

      05 ยท Practise

      Try it: design a Student ID Card

      Goal: Sort each piece of information below into "Essential" or "Not Needed" for making a school Student ID Card. Tap an item, then tap the bin it belongs in.

      โœ… Essential for an ID Card

      ๐Ÿšซ Not Needed

      06 ยท Investigate

      The map that changed the world

      In 1933, engineer Harry Beck redesigned the London Underground map using abstraction. Toggle between the two views below to see the difference.

      07 ยท Connect

      Abstraction in technology

      Programmers use abstraction on purpose, to make complicated systems easy for people to use.

      ๐Ÿš—

      Driving a car, you press the gas pedal without knowing exactly how fuel combustion moves the pistons. The car abstracts away the engine's complexity so you can focus on driving.

      ๐Ÿ’ณ

      Tapping "Pay" in an app hides an enormous amount of work โ€” verifying your card, contacting the bank, checking for fraud โ€” behind one simple button.

      ๐Ÿงฉ

      In programming, a function is a named block of instructions, like calculateTotal(). You can use it without knowing exactly how the math works inside โ€” you only need to know what goes in and what comes out.

      08 ยท Play

      Match the vocabulary

      Tap a term on the left, then tap its matching definition on the right.

      09 ยท Apply Again

      Try it again: design a Battle Stat Card

      Goal: Sort each attribute into "Essential" or "Not Needed" for a game character's battle stat card. Notice how the same skill applies to a totally different situation.

      โœ… Essential for Battle Stats

      ๐Ÿšซ Not Needed

      10 ยท Test Yourself

      Final quiz

      Answer 7 questions to check your understanding of abstraction.

      Bonus

      Fun facts to remember

      ๐Ÿš‡

      Harry Beck's 1933 abstract subway map design is still the basic style used by transit maps worldwide today.

      ๐Ÿ˜€

      Emoji designers must abstract complex emotions and objects into tiny icons only about 32ร—32 pixels.

      ๐Ÿ—บ๏ธ

      Google Maps automatically changes its level of abstraction as you zoom โ€” country borders when zoomed out, street names when zoomed in.

      ๐Ÿฉบ

      Doctors record only medically relevant symptoms in a chart โ€” not irrelevant details like what you had for breakfast three years ago.

      ๐ŸŽฎ

      A game's "minimap" abstracts an entire vast world into a small corner icon showing only what matters right now โ€” enemies, objectives, paths.