Let's Make π (Pi) User-Friendly
When I first encountered the number π (pi) in school, I did not understand what it really was. And with so many things where the explanation is incomprehensible, I filed it under “magic” and got on with things – a generally sensible strategy: You don't have to know how an engine works to drive a car or how a plane stays in the air to go on holiday – and you don't need to understand what π is to calculate the area of a circle.
The way my primary school math teacher talked about π was almost reverent; telling us about how this number was discovered by ancient Greek philosopher Archimedes (it wasn't really) – and how it was this perfect, sacred constant in mathematics, implying that it could not be improved upon and that we should just accept it as gospel. And we did. And gospel is quite apt, because some people have committed more than 10.000 digits of π to memory and can recite them! I'm getting a strong “devout medieval monk” vibe from that.
All the lore and fandom imbued π with an almost mythical power. It was sort of the Excalibur of numbers, pulled from a stone by a Greek hero. But first and foremost to us primary school kids, it was used in these equations to calculate the area and circumference of a circle, given the circle's radius or diameter:
$$\begin{gathered} \mathit{Area} = \pi \cdot \mathit{radius}^2 \cr \mathit{Circumference} = \pi \cdot \mathit{diameter} \end{gathered}$$
I can never remember the equations, so I always have to google them whenever I need them. One day I was looking at the equations a little closer, and I suddenly got a little annoyed with them. What they actually say runs completely counter to my way of thinking about circles. Borrowing some concepts from Don Norman I would say that the conceptual model (how I'm supposed to think about it) and my mental model (how I actually think about it) are very different – and that inevitably leads to frustration in the user.
In the area formula for circles, we first calculate radius² and then multiply by π – and nobody questions why; but it's so counter-intuitive it makes my head hurt. radius² in my mind is a square with sides the length of the circle's radius. What are we doing that for?
And the calculation for circumference is counter-intuitive as well. Diameter times π? Let me just walk across this round field and I'll tell you it's circumference. Wizardry.
My Mental Model of a Circle
I find that it would be much more intuitive to know the relationship between a given circle and the smallest square you can draw around it - the circle's circumscribing square or bounding box. Why? Because I'm used to squares. We all learn about area and circumference calculations in regards to squares first because it's easy – most people know how to do this and never forget it, because the conceptual model and the mental model align well – and it's quite useful. So my mental model of a circle is basically a square – and I would like to calculate the area or circumference of the circumscribing square and then figure out the area or circumference of the inner circle.
An Experiment
But what is the relation between the area of a circle and its “circumscribing square”? We could futz around with the equations algebraically, but I don't want to just take Archimedes' word for it – I want to find it out for myself! So this is the experimental setup I came up with: Imagine we have a square board – two meters by two meters say – and a machine that pokes at the board at random spots with a marker – it does this exactly one million times.
If we now draw the biggest circle that will fit on the board and count all the dots that fall inside the circle – and divide this with the total number of dots, then we should have some approximation of the relation between the area of a circle and its circumscribing square.
Below you can run a Monte Carlo simulation of this experiment. If you run the simulation a coulpe of time, you should see that the relation always ends up somewhere around 78.5%. Since it is a simulation and not just an animation, the result can vary a little, but the result tends towards 78.5%.
Dots inside the circle:
Well, none yet
A New Formula for Area
Okay, so 78.5% of the dots fall inside the circle. And as you can see, the dots are slowly filling in the whole area – which means we're covering almost the entire surface, which in turn means this is a fair approximation of the relationship between the square's area and the circle's area. And so I propose a new formula for calculating the area of a circle, based on the area of the circumscribing square:
$$ \mathit{Area} = \mathit{Square \enspace area} \cdot 78.5\% $$
In the experimental setup, the board was 2 · 2 meters, giving us an area of 4m² – and 78.5% of that is 3.14m² ... hold up now, 3.14 – that's π! How did π sneak back into our equation? Didn't we just get rid of it?
Actually – we just found it with our experiment. 78.5% is in fact just π/4 ... dig out your calculator app and try it, 0.7853981... or simply 78.5% for those who don't need the extra precision.
Let's just check the new formula against the old one. It reads Area = π · radius², the raduis is 1 meter, so radius² is 1m² which we then multiply by π, giving us the same 3.14m². Everything checks out.
A New Formula for Circumference
Turns out we can calculate circumferences with the same approach – figure out the circumference of the circumscribing square and calculate 78.5% of that. For our example square from before, that would be four sides of 2 meters each: 4 · 2m = 8m. Now we take 78.5% of that and we end up with 6.28m. Let's just check against the old version of the formula: Circumference = π · diameter. The diameter is the same as the side-length of the circumscribing square – 2 meters – so the calculation is π · 2m, giving us 6.28m again. So it works and the new formula reads:
$$ \mathit{Circumference} = \mathit{Square \enspace circumference} \cdot 78.5\% $$
Same Result, Different Conceptual Model
These new formulas get you exactly the same result – any mathematician would just shake his head and say "but they are equivalent, there is no difference" – but to a user-experience buff like me, there's a huge difference, because both calculations get you the same result, but one approach is completely aligned with my mental model, making it much easier to remember and use – and the other is not. And that's what user experince and user-friendliness is ... making stuff that seems hard and inaccessible easy and understandable by emplying people's prior knowledge and existing mental models to create a conceptual model that fits. That's essetially what “intuitive” means.
So from now on, just find the area or circumference for the square you can draw around the circle – and then calculate 78.5% of that. π made more user-friendly.
$$\begin{gathered} \mathit{Area} = \mathit{Square \enspace area} \cdot 78.5\% \cr \mathit{Circumference} = \mathit{Square \enspace circumference} \cdot 78.5\% \end{gathered}$$
Blog posts
- Let's Make π (Pi) User-FriendlyI think π is a counter-intuitive interface for dealing with geometry. Let's look at π through the lens of user experience and see if we can't improve it.
- Best Shape and Size for Buttons in a Mobile App?The pointing device on a mobile phone is a thumb or an index-finger. Given that, what is the optimal size and shape for a button in a mobile app? (it's round and about 72 CSS pixels across)
- Ad Blocking is TiVo for Online NewsThe amount of ads on the web has reached a destructive level. There is a parallel to network tv during the 90s, where a 25 minute episode of a tv show would be interrupted by ads and stretched to a full hour. So what's on the horizon for ads on the web?