How I moved from a square to a circle

or How to make a calculator like nothing you’ve ever seen

Look at the two images below. Notice anything?

Most users do not even notice that the keypads of the calculator and phone are inversions of each other.

Did you notice that the two keyboards are flipped opposites of each other? Though both keypads have zero at the bottom, the remaining numbers go from bottom to top on the calculator, and top to bottom on the phone.

I was intrigued. Surely both designs could not be ergonomically equal? Who decided that the two devices needed different keyboards? Why? And how come no one has challenged the arrangement so far?

More critically, I wondered if either keypad was even relevant to users who interact with their apps in ways unimaginable barely 10 years ago, using swipes, touches, taps, and force presses. With Apple upending skeuomorphism — the design concept of making software objects resemble their real-life counterparts — I felt it was time, as a designer and developer, to challenge the numeric keypad design orthodoxy and ask the unasked question: why should a 2015 calculator keypad look, feel and work like an 1960s Casio calculator?

The answers to this question finally led to my radical redesign of the calculator interface in my app, Calcuta.

Though radial keypads, such as the one in Calcuta (above) was better rated by users, Bell Laboratories stayed with the standard square layout in its touchtone phones, perhaps to give users a familiar experience.

It became apparent early in the design process that there is no logical or self-evident way to arrange 10 digits within a rectangular space. Alphabets can be laid out according to their frequency of usage on a QWERTY keyboard, but numbers follow no such patterns. With any number equally likely to be pressed, what would be the most logical and ergonomic arrangement for human fingertips?

Isolating the zero in its own line allowed the remaining 9 numbers to be arranged in a three-by-three square. It may have seemed logical to Casio to arrange the remaining numbers from bottom to top.

The inverted 10-key numeric keypad made its appearance in 1957 when Tadao Kashio, founder of Casio, released the world’s first electromechanical desktop calculator, the Casio A-14. However, the layout of the 10 digits was apparently decided quite arbitrarily by Kashio-san. When Bell Laboratories, exploring keypad design for its first touchtone telephones, asked Casio about the logic behind their numeric keypad, they apparently received a “big shrug”.

The 10-digit numeric keypad first appeared in Casio’s A-14 electromechanical calculator, released in 1957. It is possible that the design was arbitrarily decided by the company’s founded Tadao Kashio.

Casio’s numeric keypad went unquestioned and unchallenged for decades, appearing on ever-sleeker models of calculators, including miniaturized wristwatch devices.

How the calculator was Belled

November 1963. Bell Laboratories introduced the world’s first touch tone telephone, the Western Electric Model WE 1500 — with a keypad that vertically flipped Casio’s design, though zero remained at the bottom. The design change apparently emerged from research conducted by Dr Alphone Chapanis and his assistant Mary C Lutz in the 1950s. Chapanis designed a test that examined where people expected to find numbers on keys, and administered it to 300 people divided into three age groups and divided further depending on whether they were technologically naive or sophisticated. Six different arrangements of keys were tested. Overwhelmingly — and not surprisingly — people preferred an arrangement where the numbers increased from top left to bottom right.

Bell Laboratories’ WE 1500, the world’s first touch tone telephone, launched in 1963, vertically flipped Casio’s numeric keypad design, though zero remained at the bottom.

Numberphile dug up a little known research paper from the July 1960 issue of theBell System Technical Journal, which listed the 18 different keypad designs their engineers had field-tested. Among them: “the staircase” (II-B in the image below), “the ten-pin” (III-B, reminiscent of bowling-pin configurations), “the rainbow” (II-C), and various other versions that mimicked the circular logic of the existing dialing technology: the rotary.

The winner — IV-A — probably felt the most familiar to users. But was it the most ergonomic and aesthetic?.

Though the radial design scored higher in ease of use and error rate, Bell Laboratories went ahead with the square numeric keypad.

Numberphile’s Sarah Wiseman noted, “”They did compare the telephone layout and the calculator layout, and they found the calculator layout was slower.”

There is another, more worldly wise story also available — which says that Bell Laboratories deliberately inverted the keyboard to make it less familiar to users, and slow them down a little, just enough for the mechanical switching exchanges to keep pace.

If it ain’t broke, why fix it?

The mobile calculator’s design has always been an irritant for me. From a design point of view, it’s design is demonstrably seriously flawed.

1. The keypad was not designed for the small rectangular screens of today mobile phones. It has never been reviewed for its synergy with gestures and modern modes of user interaction with their mobiles.
2. It offers almost no feedback to the user. For instance, if she is interrupted in the middle of a calculation, she has no way of knowing the last things she typed.
3. Memory operations are opaque. There is usually no way to know what’s stored in memory, or how it is affected by operations that change memory contents.
4. Though many calculators now include a delete key, this merely adds to the clutter. Swiping to delete is clean and intuitive, but Apple’s native calculator is one of the few apps that has it (though most people don’t know that).
5. Many calculators include the concept of a paper-tape — once again mimicking a long-gone mechanical reality. As a user, I wish I could easily correct mistakes.

The evolution of Calcuta

Calcuta — one syllable short of calculator — is the result of a design process that began with a close study of Bell Laboratories own 17 keypad designs. I noticed that the highest rated design there was not IV-A, but III-C, which showed significantly shorter keying time and significantly lower error rate. III-C is a two-thirds circle going from 1 to 9 and zero at the end. And that was my starting point for the rotary dial that is the most unexpected aspected of this app.

My design goals were —

1. Sector the screen real estate logically: operators together, numbers together, and display area distinct.
2. Substitute gestures for buttons where possible.
3. Build in continuous feedback.
4. Create an intuitive UX.

I quickly replaced the square of the clunky keypad with the clean circle of the rotary dial. Other features included — delete typing by swiping; swipe the whole page aside to edit the history; tap and double-tap to add and subtract numbers to and from Memory; erase Memory contents by, well, erasing it with your finger; light up keys and operators like a Christmas tree as you type, so that you always know where you are; and a toggle setting to display the contents of Memory.

The video below shows how these changes look —

The word that I have heard from users most consistently is delightful. I believe there is room for a hard-working calculator that is a pleasure to use.

I welcome your feedback — brickbats preferred to bouquets — that could help take this calculator to its next level. You can either buy the pro version or a limited trial version from the Apple store. My vision is to develop it into an app that introduce children to mathematics and builds their numeracy.

To my knowledge, no calculator in the market does this.

An Android version is nearly ready, as are localized versions in French, Bengali, Hindi, Thai, and South Korean .Please write to me at cygopi@gmail.com with your comments. And if you happen to like something, then please do take the time to leave a review at the app’s App Store home page.

If you enjoyed this article, please take a moment to show your love by clicking the Heart icon.