Menu Search
Jump to the content X X
Smashing Conf San Francisco

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. upcoming SmashingConf San Francisco, dedicated to smart front-end techniques and design patterns.

Why I Moved From A Square To A Circle

They’re probably the most familiar interfaces on the planet: the numeric keypads on our mobile phones and calculators. Yet very few notice that the keypads’ design has remained unchanged for nearly half a century in the face of evolving global design norms and conventions. Even fewer users notice another startling design feature: the phone’s keypad is the inverted version of the calculator’s.

This article explores the roots of this disparity and proposes a better solution. We will discuss how to simplify and adapt a traditional numeric interface to a minimalist design norm by taking advantage of modern touch-driven modes of human–mobile interaction. We’ll also tackle the design logic behind developing a new interface for the basic calculator.

Look at the two images below. Does anything strike you?

Most users do not even notice that the keypads of the calculator and phone are inversions of each other.
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 ten 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.

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

It became apparent early in the design process that there is no logical or self-evident way to arrange ten 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 nine 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 ten-key numeric keypad made its appearance in 1957 when Tadao Kashio, founder of Casio, released the world’s first electromechanical desktop calculator, the Casio 14-A. However, the layout of the ten 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 its numeric keypad, they apparently received a “big shrug”.

The layout of keys on Casio's ten-key numeric keypad3
The layout of keys on Casio’s ten-key numeric keypad, launched in 1957, was decided quite arbitrarily. (View large version4)

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 Link

In 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, although 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 15005
Bell Laboratories’ WE 1500, the world’s first touch-tone telephone, launched in 1963, vertically flipped Casio’s numeric keypad design, although zero remained at the bottom. (View large version6)

Numberphile7 dug up a little-known research paper from the July 1960 issue of the Bell 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 rotary dialing technology.

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

Bell Laboratories went ahead with the square numeric keypad8
Though the radial design scored higher in ease of use and error rate, Bell Laboratories went ahead with the square numeric keypad. (View large version9)

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

But there is another, more worldly-wise story also on the grapevine. Bell Labs was apparently concerned that its switching exchanges might not be able to keep up with users who typed too fast. To slow them down just a tad, they deliberately inverted the keyboard, while keeping the zero at the bottom, to make it a little less familiar to users.

If It Ain’t Broke, Why Fix It? Link

The mobile calculator’s design has always vexed me. From a design point of view, it has several demonstrably serious flaws.

  1. The keypad was not designed for the small rectangular screens of today’s mobile phones. It has never been reviewed for its synergy with gestures and modern modes of user interaction with mobiles.
  2. Most calculators offer little or no feedback to users. For instance, if they are interrupted in the middle of a calculation, they have no intuitive way of knowing the last thing typed. There is no way to verify if a mistake was made, a number omitted, an extra number typed, or the wrong operator punched. If a mistake is suspected or detected, the entire calculation has to be keyed in again. In these respects, most mobile calculators repeat the weaknesses of old handheld calculators.
  3. Memory operations, which still mimic the way physical, handheld calculators used to work, are often opaque and confusing. There is a plethora of Ms: M, M+, M–, MC, MR, MS. There is also no clear way to know what’s stored in memory, or how it has been altered by operations that change memory contents.
  4. Though many calculators now include a delete key, this merely adds to the clutter. Some calculators allow deletion by swiping, but this is often a hidden feature, so users, unaware of its existence, simply retype the entire calculation.
  5. Some calculators include the digital equivalent of a roll of paper tape, familiar to anyone who has seen a credit card machine print a slip after the transaction is authorized. But this once again mimics a long-gone mechanical reality. As a user, I would wish to correct mistakes more intuitively and with less effort.
Many calculators use the visual analogy of the paper tape10
Many calculators use the visual analogy of the paper tape, familiar to anyone who has watched a credit card machine print out a bill after the transaction is authorized. (View large version11)

Redesigning The Calculator Link

My design process began with a close study of Bell Laboratories’ 17 keypad designs. An asterisk next to the design number indicated ‘significantly shorter keying time’; a dagger meant ‘significantly lower error rate’; and a double dagger indicated ‘significantly more preferred.’ Designs II-A, IV-A and IV-B all scored an asterisk for ease of keying; only VI-B scored a double dagger. I noticed, however, that the only design that rated an asterisk and a dagger was I-C, a radial design. The radial design scored against square design I-A, which was part of the same Group I.

The redesign involved four steps.

1. Reinventing The Numeric Keypad Link

Problem: The original Casio numeric keypad had physical buttons mounted on a panel, and square buttons on a rectangular grid was a logical way to use available space. The buttons on a calculator are punched in. What should the keypad look like on a handheld device sensitive to touch and without physical buttons?

Design: I strung the numbers together in a radial garland. This made them available sequentially along a circle, and also easily accessible to the user’s thumb. The radial arrangement instantly made the numbers visible as a group, and also opened up the screen space.

In the radial garland, I included the decimal buttons, and the clear/reset button (C/AC).

Color: Every color needed a purpose. The numeric radial was the single most important element in the design and needed maximum visibility. I chose a vivid blue, and a night black background to set it off. The C/AC button had to be visible distinctly from the numbers, so I picked a signature orange for that button.

Position: I expected to have more elements above the radial than below, so I positioned the numeric keypad slightly south of centre for balance.

The redesign separates the numeric keypad from the operators logically.12
The redesign separates the numeric keypad from the operators logically. (View large version13)

2. Resectoring The Screen Real Estate Logically Link

Problem: Software calculators typically divide the screen into two parts: a display area and a keypad area. Within the keypad, numbers, operators, modifiers, and memory buttons are distributed whimsically and can vary from phone to phone. What is a logical, visually sensible arrangement for the different elements of a numeric keypad?

Solution: The most frequently used primary operators are +, −, × and ÷. Two modifiers usually included in basic calculators but used less frequently are % and ±. I placed the primary operators in a clear row above the calculator radial, and the two modifiers in a clear line below the radial.

Display: I allocated the top of the display to the numeric display, after opting to switch off the standard iPhone status display strip. The main display area included the current number or current result on the right, while on the left was a single M indicating temporary memory. Unlike in other calculators, I added a secondary display area where the user’s operations are mirrored. This provides live feedback to users, so they can notice errors in real time. The secondary display area under the M can display the current contents of memory, and can be toggled off in the settings.

3. Substituting Gestures For Buttons Link

The only way to communicate with an old style Casio was by pressing a button, and this input method has by and large survived intact in modern software calculators. This has led to a proliferation of keys, including a delete button and several Ms, one for each memory action. How could a calculator take advantage of gestures?

Gestures added:

  • Swiping left or right in the main display area deletes numbers one at a time from right to left.
  • Tapping the number in the main display once adds it to memory. Tapping it twice subtracts it from memory.
  • The M button remains white when memory is empty, but turns red to indicate content.
  • Tapping M once when it has content adds the number in memory to the number in the display. Tapping it twice subtracts it from the display.
  • Swiping over the M erases the contents of memory.

4. Enabling Easy Correction Of Errors At Any Time Link

Problem: Errors cannot be corrected on a manual calculator. Mimicking the Casio calculator interface effectively transfers these limitations to software calculators. The earliest attempts to rectify this introduced a paper tape-like feature, revealing previous operations on a continuous scrolling page. How could editing be made easy and elegant on a modern calculator?

Edit history: The single most radical feature in the calculator redesign is the Edit History page, revealed by swiping the screen to the left. The Edit History screen allows touch-based editing of numbers and operators, including deleting entire lines by swiping left. The calculation results are updated in real time.

Swiping the Calcuta screen left14
Swiping the Calcuta screen left reveals the Edit History page where previous inputs can be corrected or deleted, entire lines deleted, and operators changed. Recalculations are instantaneous. (View large version15)

The Response And The Future Link

The word most consistently heard from users in response to the new interface is delightful. I believe there is room for a hard-working calculator that is also a pleasure to use. I am currently working to expand the app into a teaching tool that can inculcate a love of math in children and improve their numeracy. The clean interface is ideally suited to appealing to children.

I welcome your feedback, brickbats more than bouquets.

(jb, og)

Footnotes Link

  1. 1 https://www.smashingmagazine.com/wp-content/uploads/2015/12/02-iPhones-opt.jpg
  2. 2 https://www.smashingmagazine.com/wp-content/uploads/2015/12/02-iPhones-opt.jpg
  3. 3 https://www.smashingmagazine.com/wp-content/uploads/2015/12/03-casioA14-opt.jpg
  4. 4 https://www.smashingmagazine.com/wp-content/uploads/2015/12/03-casioA14-opt.jpg
  5. 5 https://www.smashingmagazine.com/wp-content/uploads/2015/12/04-WE1500-touchtone-opt.jpg
  6. 6 https://www.smashingmagazine.com/wp-content/uploads/2015/12/04-WE1500-touchtone-opt.jpg
  7. 7 http://www.numberphile.com/videos/keypad_layout.html
  8. 8 https://www.smashingmagazine.com/wp-content/uploads/2015/12/05-17designs-opt.jpg
  9. 9 https://www.smashingmagazine.com/wp-content/uploads/2015/12/05-17designs-opt.jpg
  10. 10 https://www.smashingmagazine.com/wp-content/uploads/2015/12//06-Papertape-opt.jpg
  11. 11 https://www.smashingmagazine.com/wp-content/uploads/2015/12/06-Papertape-opt.jpg
  12. 12 https://www.smashingmagazine.com/wp-content/uploads/2015/12/07-ClassicM-opt.png
  13. 13 https://www.smashingmagazine.com/wp-content/uploads/2015/12/07-ClassicM-opt.png
  14. 14 https://www.smashingmagazine.com/wp-content/uploads/2015/12/08-Edit-History2-opt.png
  15. 15 https://www.smashingmagazine.com/wp-content/uploads/2015/12/08-Edit-History2-opt.png
  16. 16 http://mrserge.lv/assets/expected-locations-of-digits-and-letters-on-ten-button-keysets.pdf
  17. 17 http://www.todayifoundout.com/index.php/2015/10/keypad-numbering-different-phones/
  18. 18 http://www.americanscientist.org/libraries/documents/20057611634_306.pdf.
  19. 19 http://www.theatlantic.com/technology/archive/2013/08/the-17-designs-that-bell-almost-used-for-the-layout-of-telephone-buttons/279237/
  20. 20 https://en.wikipedia.org/wiki/Casio
  21. 21 https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/

↑ Back to top Tweet itShare on Facebook

C Y Gopinath is a graphic designer, writer, composer, film-maker and cook. His first app, Calcuta, redesigns the traditional calculator using science,  research and creativity. His first novel, The Book of Answers, was shortlisted for 2012 Commonwealth Book Prize for Best Fiction. He lives in Bangkok, where he dreams up devilish ideas to subvert traditional thinking, all in the hope of making the world a better place for people of goodwill.

  1. 1

    Here’s my honest opinions:

    1. Calculation history is cool – probably the best part of the app.
    2. I thought I’d like the idea of a circular design, but I find it clumsy after a short use, preferring instead the standard apple calculator. I’m actually guessing the user experience would be far better if the circle only included numbers.
    3. The buttons are too small compared to classic calculators. On my iphone, I’d say they are about 30% smaller than the standard calculator.
    4. It makes no sense to have a clear and decimal symbol in the circle. See point 2.
    5. As I’m typing the value in, the input is for instance 23.11 (note the decimal point), but when I get the result, it’s returned formatted in the local system (comma). From user experience, this is confusing, to say the least. You should either format both or neither.
    6. After about 2 minutes of use, the calculator crashed – not what I’d expect from a relatively simple app.
    7. Constant nagging with upgrade on the Lite version pretty much broke the deal for me – the app was downloaded, tested, removed and I’m done with it.

    All in all, I believe you’re on to something there with calculation history (and editing), but the rest of the app isn’t up to my standards.

    10
    • 2

      Interesting and insightful points, Andrej, thanks. Wanted to add to a few of them.

      #2. I’ve been finding children are almost instinctively dextrous with the radial keypad, and are typing speedily within minutes. Adults seem to have a steeper learning curve. I am conducting tests in classrooms now to understand if this is widespread.

      #4. It would make even less sense to have them anywhere else. The C and the decimal point are part and parcel of number punching. If I was typing 23.11, I should not have to leave the keypad just for the decimal.

      #5. This is being fixed in version 1.1, coming out very soon. The format is being set within the app and will over-ride local settings. I noticed this issue first with users in Montréal, and then we worked with them to identify the issue, and fix it. Thanks for catching it nonetheless.

      #6. The crash is a very rare event indeed. I’ve put it through countless random runs and caught and fixed crash points. Sorry you got one. It is likely to be linked with issues around the local format. In any case, I’d be grateful to hear the context of the crash, if you recall that, so that we could take a look into it.

      3
  2. 3

    This is a pretty bad idea in practice. Reminds me of the old Nokia Phone which was horrible to use:
    http://mynokiablog.com/2012/08/24/nokia-nostalgia-nokia-3650-symbian-phone-with-rotary-keypad/

    0
    • 4

      The only observation is that the Nokia radial keypad nestled in the palm, and could not be reached by thumb or fingers. You had to hold it in one hand and punch numbers with the other. Also, the lower numbers were right on the edge of the device, which was just plain inconvenient and clumsy.

      The rotary dial on the app is placed and optimized for one-handed operation on most handheld phones. The dial is in the centre of the screen, and the farthest number is well within thumb reach.

      0
  3. 5

    I see one flaw in your thinking. You based your redesign on a 1960 user study but you seem to forgets that people at the time used a rotating numbered dial on their phone, it might be an explanation why the rotating button score higher.

    A more recent study might be the total opposite as people have long used the standard button arrangement.

    16
    • 6

      Good point. I have not come across any credible recent study of mobile app finger ergonomics.

      However, it is worth bearing two things in mind —

      1. The round dial did not score higher on user preference but on speed of operation and frequency of errors, both objective criteria. There is no reason why those criteria would be any different today than 60 years ago, since the design of the human hand has not changed.

      2. Bell itself did not pick the rotary dial but the square keypad, so there is little to indicate that people preferred the round dial. In fact, Bell clearly thought that the square calculator layout was a better model to follow than the round rotary dial of ancient telephones.

      0
      • 7

        I’m old enough to have used rotary dial phones as a kid, I have a hard time believing they scored higher on speed of operation. After releasing a dialled number, you had to wait for the dial to slowly whirl back to it’s starting location.

        I can see a correlation between this wait time and a low frequency of errors. The user has more time to observe and track the correct number location.

        On a side note: did you try a drag and drop method for memory? I could see this providing more allowance than single or double taps of a single element. The interface could change or expand once the user had held and began a drag.

        0
    • 8

      Good point. I have not come across any credible recent study of mobile app finger ergonomics.

      However, it is worth bearing in mind —

      1. The round dial did not score higher on user preference but on speed of operation and frequency of errors, both objective criteria. There is no reason why those criteria would be any different today than 60 years ago, since the design of the human hand has not changed.

      2. Bell itself did not pick the rotary dial but the square keypad, so there is little to indicate that people preferred the round dial. In fact, Bell clearly thought that the square calculator layout was a better model to follow than the round rotary dial of ancient telephones.

      0
  4. 9

    Craig Morrison

    January 11, 2016 1:35 pm

    It seems like a lot of the rationale for the radial layout comes from Bell’s research which is half a century old. Contexts change so I wonder, did you found any modern research or performed any of your own?

    I’m curious if the radial layout might’ve been preferred due to its similarity to the layout of rotary phones. If that was the case then I’d expect the results today to be quite different.

    To me the operators need some affordance. I understand why you would want the numbers to take precedence but it wasn’t immediately clear to me that they were buttons.

    7
    • 10

      I’ve addressed your points in the answer to the previous comment.

      So far I’ve not received any complaints or difficulties regarding the operators, either position or design. Since their use is driven by unique need, people seem to find them and make the assumption that they must be buttons. I agree with you that they are minimalistic, in keeping with current design norms and standards of elegance. Hopefully this will not become a problem.

      0
  5. 11

    Gerard Konings

    January 11, 2016 1:53 pm

    There’s on tiny thing bugging me about the position of the numbers …. They are in the wrong positions. You have 12 buttons arranged in a circle, wich reminds me of another device wich has 12 numbers arranged in a circle. See where I’m going? I instinctively know where numbers like 3, 6 and 9 are on a clock, but your interface is shifted. Why is that?

    12
    • 12

      Good point, and I must warn you the answer is not at all obvious. Even if the numbers had been arranged as on a clock face, the eye would automatically track first to the point with the highest contrast, which in this case is the orange button with C in it. This was place topmost leftmost on the radial, in conformity with eye movement characteristics (top to bottom, left to right). Since orange becomes the starting point, wherever it is is places, it is logical to start the numbers right after it.

      The only area of debate was whether to start with 1 or 0 (which, by the way, is a number missing on the clock face).

      0
      • 13

        I don’t see that the issue is with tracking to a start position. It’s familiarity with existing design solutions. A radial number pattern is familiar as a clock face which naturally tends toward 3, 6 and 9 in East, South and West respectively. By all means place the orange Clear at 11 o’clock next to 0 at the 12 o’clock position, with decimal at 10 o’clock.

        Another suggestion would be to place the operators in a cross hatch ( + ) in the center of the dial, where the equals is now, reducing finger travel to perform ops. Equals could remain in the centre of the cross.

        0
  6. 14

    Christoffer Hammarström

    January 11, 2016 1:56 pm

    All numbers are not equally likely to be pressed. The number 1 will be pressed about a third of the time, see Benford’s Law.
    https://www.youtube.com/watch?v=XXjlR2OK1kM

    4
    • 15

      Benford’s Law really holds for numbers of magnitude, and this is even mentioned in the youtube link you have attached. Even if one knew the numbers most likely to be pressed, it is not obvious — and quite unlikely — that a QWERTY-like rearrangement of the digits would be more user-friendly than a sequential one.

      In practice, I have noticed new users spend a few minutes orienting themselves to the radial keypad, which is already unfamiliar to them. If the numbers seemed randomly re-arranged within this, it would risk appearing merely chaotic.

      0
      • 16

        The other issue with this is a question of how Bell Labs did their test. Was the radial keypad on a device that sat on a desk and was punched from the front? Phones are held in the hand and thumbed from corner. The ergonomics are different. I haven’t tried your design (it’s pretty attractive, I will say), but I suspect something more like a curved stair-step design would better fit the ergonomics of the phone-thumb dynamic.

        1
      • 17

        Christoffer Hammarström

        January 11, 2016 10:53 pm

        Not sure where you get that the idea of random arrangement of the digits. Two is the second most appearing number, then three, and so on. In numbers used on a calculator, maybe zero is more common than one.

        In any case, the assertion that all numbers are equally likely is false, which is problematic if that’s an important premise for the article.

        2
  7. 18
  8. 19

    Great read! Super fun to think about the different layouts of something I take for granted. Also makes me wonder how the experience of a round phone would compare to a rectangular one? Duuuude.

    Thanks!

    0
  9. 20

    Harry Blanchard

    January 11, 2016 5:51 pm

    I gingerly read this article with a groan … ‘not again’ I thought. You see, when I worked in AT&T Bell Labs back in the 80s I was tasked with answering this question, since someone in HP had asked it of Bell Labs, and, amazingly, the knowledge and history from the 50s/60s had faded even where the research was done. Yes, there was no doubt that the telephone keypad arrangement was faster and more accurate when tested with human beings. (Eventually, I even got a look at Polaroid photos of the various dial-pad mock-ups) So, imagine my dismay when -groan- you bring up the old ‘conspiracy’ theory about the telephone keypad. This was a thoroughly researched issue and with the results published numerous times in public engineering journals, and not just from AT&T, but from other researchers not connected with US telephone companies, in England and Sweden. Besides the conspiracy theory making no sense, users simply could not outstrip the central office equipment (and I did not user studies on fast dialers later, as well). Nevertheless, I exchanged emails with a certain self-styled industry expert consultant and, when faced with evidence, I got a true ‘I don’t care what you say, the telephone company is evil and they probably made it all up.’ This is engineering? The real answer requires you to put yourself back into the matrix of the 1960s, yeah, you can buy calculators today for $10 at the drug store, but back then, calculators were expensive pieces of equipment mainly used by specialists such as accountants. But everyone had a telephone. Engineers, correctly I think, assessed that it was a better trade-off to optimize the keypad for efficiency rather than consistency with a device that the vast majority of users (in the 1960s) would have little or no experience using. A good call for the time, perhaps less so in retrospect (another lesson there, perhaps). As for your circular keypad, well, all I can say is – don’t propound – test! Although I should note, Deininger tested circular keypads, and they thought circular keypads would test better – because rotary phones had circular dials, but they failed miserably in contrast to the square phone and calculator layouts. Sorry.

    12
    • 21

      Thanks very much for those valuable glimpses from a Bell veteran of those days. The choice of the telephone keypad layout over the calculator keypad certainly makes greater sense the way you’ve laid it out. I’m not a conspiracy theorist by a long shot, and certainly do not believe the phone company is “evil”.

      I would hope no one concludes that I am suggesting that Bell put technical whimsy over evidence.

      The missing piece for me is — when and why did the rotary dial turn into a square keypad? I never did see a lucid answer to that.

      0
      • 22

        George Berger

        January 13, 2016 7:28 pm

        It seems to me the most obvious answer to this question is the use of device real-estate. Products started becoming more rectangular as a general rule, it was more efficient for packing and shipping and it followed a design trend that lasted a number of decades all the way up to present day. The square button keypad takes advantage of this and is the most efficient use of space while also making the buttons less expensive to produce. In terms of the digital landscape, the square button layout will remain the most efficient design until we start seeing ovoid/oddly shaped phones. And there IS something to be said for an interface that comes with a life long built in tutorial. People just understand the square, it’s established which means it will always (at least for the time being) have the lowest barrier to entry.

        1
  10. 23

    As was pointed out above, older phones had a radial design and that would lend itself not just to preference, but also to reduced error rate and ease of entry.

    Why? Because the radial button design mimicked the rotating dial design and as such mimicked the number placement and location that users were already using on their existing phones. Simply put, it was familiar, and familiar is always easier to use.

    That being the case, using that research to validate your own preferences is somewhat… problematic.

    You also missed that phones mapped alphabetic exchanges to numbers so users could dial Echo Valley-26809. As such, the reasoning behind the left-to-right-top-to-bottom number layout on telephones becomes clear: It places the associated alphabetic letters in standard English left-to-right-top-to-bottom order. Reverse it Casio-style and the letter placement appears random and becomes chaotic.

    And personally, I find this designed flawed. You have the Clear button in the circle right next to 0 and the decimal point, two of the most commonly used keys, just waiting to be punched accidentally. In fact, I suspect that the only reason it’s in that location at all is because you wanted something there just so you could have a neat 12-button clock-style layout.

    I also find the decimal point placement somewhat problematic given how often its used, and, personally, would swap the plus and equal sign placement since adding a list of numbers occurs more often that hitting the final total.

    Finally, I enjoyed the bit of history, but also think this is a clear case of coming up with a design first and then rationalizing the results as opposed to using principles of usability to inform the design up front.

    13
    • 24

      I’m responding just to your somewhat cynical remark in the tail of your letter: “a clear case of coming up with a design first and then rationalizing the results as opposed to using principles of usability to inform the design up front.”

      In reality, what came first was the desire to challenge the anachronism of a a decades-old numeric keypad layout. As a designer, I naturally moved to doodles and sketches of alternative layouts that were more elegant and looking for ways to embed the same functionalities.

      So a certain amount of design did precede research, as you suggested. Nothing really wrong with that.

      However, it became apparent early that I needed some evidence base to support my choices. Of particular concern was to find out if a circular design had been tried and decisively found to be a failure. This was really when my research began. From here on, the design and the research process went hand in hand.

      I wish the design process were more linear. Reality is much more chaotic and messy.

      -1
      • 25

        Seeing as how you’ve immediately attempted to refute nearly every reply to this article, rather than recognizing that these replies are indeed legitimate qualitative feedback (if I were you, I’d be taking notes and thanking these people), I would be inclined to believe that you’ve taken a very design-first and research-last approach.

        But these debates and questions should be very easily addressed with quantitative data. Once the app has been live for a month or two and you’ve had enough time to collect proper data, you should return to this article and provide us with an update containing quantitative usage metrics.

        How many users in total have adopted your app? How many weekly active users? How many monthly active users? What is your retention rate? What length of time does it take for the average user to complete a calculation? What length of time does it take for the average user to begin a calculation (running the clock the moment the interface displays)? What is the error rate for the average user? Take all of these metrics and compare them before and after you introduced the redesign. Is there a statistically significant change? This will tell you the winner. Whichever it is, put your pride aside, choose that design, and iterate on it from there.

        If anything, Product Design should be humbling. When practiced correctly, it will almost always show you that your assumptions, while generally well-founded, are usually wrong. Regardless of how much of an expert you think you are, you simply can’t represent the collective mass that is a user base.

        9
        • 26

          I have to agree with you. It seems quite evident to me that the author just made up something based on intuition and personal preference, and then later created a very weak piece of research and problem definition after the fact to justify the design choices.

          As a result, this article leaves a bad taste in the mouth because it presents itself as a research-based, problem-driven design approach. It is not, not even close.

          The disappointment is completely needless, because there is nothing wrong with testing design ideas without thorough research. We live in the age where this is possible, cheaper than ever. Fail early and fail often. But when you do, don’t give this inflated impression of research and data-driven design. It is needless. Let actual usage data speak for itself.

          8
        • 27

          While you make some very valid points for testing and having actual data to iterate from, I take issue with your criticism of the author. If you bothered to read the author’s replies, you would have seen that they were well thought out and that feedback was definitely appreciated and considered. Give him the data he needs, use the dang calculator and then decide for yourself. No, immediate testing data would not be relevant, he would need usage data from consistent users over a period of time to accurately know how to iterate his design. And based on his replies, it sounds like he has been testing this on groups. The interface is different from what is common for a calculator, any reasonable person would expect their to be some learning curve in which initial mistakes etc are high which would skew your recommended data points initially.

          1
  11. 28

    Here are my two cents:
    – 0 should be at the top. That pushes all the numbers to their usual (and familiar) position on a clock face.
    – Your design is nice and clean, but buttons could be made bigger by shaping them as ring segments, like the main boxes of a dartboard.

    2
  12. 29

    Laura Barncard

    January 11, 2016 6:29 pm

    What about ten-key entry? For those that are trained in ten key numerical data entry, the three column design makes a lot of sense and is very fast and easy to use. How would this circular design translate to the rapid entry of large volumes of numbers? There seems to be no easy way, as your fingers would need to move all the way across the screen.

    1
    • 30

      The minimal design of this app raises difficult questions when considering its evolution to its next level. Evidence suggests that the arena for scientific and mathematical calculators is pretty saturated and populated with customers who do not place a premium on UX.

      Data entry, similarly, is a specialized need, and would probably be better with a specialized tool.

      The overwhelming trend of suggestions so far is that this design could handily be an app that creates love of math among young users through systematic and playful engagement. I am definitely taking that direction seriously.

      1
    • 31

      Exactly. If you’ve ever worked retail, ten-key entry is a key skill and would not work on a radial arrangement. My biggest frustration is that telephone keys are “backwards” from retail, so I can’t use my ten-key-fu on telephone numbers.

      1
  13. 32

    Do a quick Google search and you’ll find Casio’s number pad design was not original. Pre-1950 adding machines by Remington Rand are one example.

    https://goo.gl/PqCeyx

    1
  14. 33

    Evidence would suggest that Casio picked up their layout from much older 10-key adding machine designs.

    2
  15. 34

    Could you comment on why, in the edit view, the number keyboard is the original square format instead of the circle format?

    4
    • 35

      You’re very observant, sir. The main reason is that while designing for the iPhone, we were working within Apple’s framework, which were designed to ensure consistency in the user experience across apps in routine tasks and interactions. This framework currently does not include a circular keypad, so we could not include a call to it.

      0
  16. 36

    I find a lot of cool resources at scarab13.com, dreativeartmarket.com, downloadsoho.com, scaryposter.com and few other sites I never heard about before 2015 but they are getting more popular now…

    -9
  17. 37

    Sorry, I don’t see the ergonomic benefit of your circular arrangement. The standard ten key arrangement, as Laura Bancard hints at, allows the three strongest fingers on your hand (index, middle and ring) access to all the digits very efficiently (move the hand up and down, press the keys).

    The circular layout offers no such advantage, in fact I think it’s at a rather great disadvantage.

    10
  18. 38

    Really interesting design approach and refreshing result. Thanks for sharing your process.
    One historical design note that you may be aware of yet didn’t make clear in the article.
    The QWERTY keyboard was designed with consideration of the frequency of keys struck. Typists were typing so fast the hammers on the typewriters were jamming. The QWERTY keyboard was designed to slow typing and reduce jams on mechanical typewriters.
    For an interesting account of this see Computer: A history of the information machine, by Martin Campbell-Kelly and William Aspray.

    3
  19. 39

    I’ve recently been working on a similar app, although it’s a keyboard, not a calculator (there are enough of those, no?). While building a payments app for a client — like Square — we realized that there are a few problems on various mobile devices:

    1. There is no uniform number pad across devices – iOS only supports the number pad on handhelds, not the iPad, and our major use case was where clients would use iPads to walk around collecting money.
    2. The number pad is small – For the keyboard app we’re readying for launch, there’s no workaround here, but Square and others solved it by not using a keyboard, opting instead to use a built-in number pad that includes additional functions like double zero, calculations, etc.
    3. Android numpads are adjustable but iOS numpads are not – a relatively minor problem, unless the client is using both device types (which happens more frequently than we’d hoped).

    At no point did the mechanism to input the data come to mind.

    Your research on the number pad and the history of it is great. I’ve often wondered why we can look at a phone and keyboard and they don’t follow the same direction. And as someone who rarely uses the phone for calls, and is always on a computer, it’s amazing that I’m capable of quickly inputting numbers on either type. And yet I can…most people can.

    The reason direction or form never came up in our conversation when we first started developing the keyboard is simple: the structure is based on the human hand. Phones originally were attached to a wall or booth, and were rotary; when we moved to buttons, it became easier to input, aka better. And phones today retain that directive because it works. Things that work for us are, as we know as Smashing readers, inherently human.

    That’s why we even made the keyboard at all; typing on a number pad is so quick and easy that it’s second nature. It’s second nature to kids who have never dialed a number. It comes naturally after just a few minutes. The same is true for most people typing away on a keyboard, even if the order is mostly reversed. But the same isn’t true of the number line…which goes across the top of the keyboard. I, and many people I’ve spoken with and watched type in testing, are slow with it. Even though most of us type on laptops and don’t have access to a number pad. Even though most of us don’t make that many calls anymore.

    It’s actually funny how often people make mistakes typing on the number row compared to a numpad. On a numpad, most mistakes come from the fact that it’s reversed from the phone, or vice versa. Every once and awhile I’ll dial incorrectly because of that, because somewhere in my brain I confused the phone for a computer, or vice versa. It happens to all of us.

    On the number row there’s a different error that happens: I pressed the wrong key outright. All keyboards are different, so it’s not about anything except spatial awareness. On a numpad the keys follow a logical placement, and they’re by themselves. Even on larger laptops that have numpads, the space is very clearly defined. The keys are also directly above and side-by-side with each other, whereas the rest of the keyboard has all keys off by 10-20%. So we all know where the keys are…but not fully. Because it varies. Not so with the numpad.

    TL;DR, the history lesson is great, but I’d argue that the UX provided is unnatural and cumbersome. There’s a lot of history in why it works, but you should also delve in to the human research of why and how people operate with the existing number pad. Because every circular system following this same reasoning has, as I’ve seen in the past five years of mobile apps, failed. I don’t know why exactly they fail, but my guess is that the gesture controls are too complicated…compared to the simplest tap.

    6
  20. 40

    Michael Mezger

    January 12, 2016 1:37 am

    I enjoyed your aricle pretty much! You did a lot of research and brought some interesting points up. Though i want to bring in another consideration: in my opinion the operators are more imoprtant than the numbers. You use a calculator to do calculations by using operators. You will use at least one of the Main operators. Therfore the operators should be accessible very easy. Compared to the apple calculator your operators are not as easy than theirs. On my Iphone 6 i cant reach your operators in one hand mode. That implies i cant use your calculator by one hand at all. Thats a strong drawback compared to apple.

    1
  21. 41

    JESUS! So many comments about a phone/calculator dial layout!? If it were up to me, I’d use only 2 buttons on a phone: 0 and 1. And you’d have to enter the phone numbers in binary. Case closed. This would also solve alienation. People would have a hard time remembering (let alone understanding) the binary system, and so they’d have a hard time dialing. This would force you to actually start a conversation and interact with another person – as opposed to constantly rubbing up to your phone.

    -4
  22. 42

    The Casio layout is based on rapid and repetitive keypunching by bookkeepers and cashiers.

    The Bell layout is for a single sequence enterex infrequently by novices.

    Hence the difference.

    1
  23. 43

    Erik Driessen

    January 12, 2016 8:03 am

    A nice read. I love it how you rethink something as standard as a calculator. Just one question though, why did you put the most frequent operators on top? This makes the + sign a far stretch for most (right hand) phone users. Did you think about nesting the frequent operators around the bottom right corner?

    2
  24. 44

    I know this may not be helpful, but that calculator is ugly as sin – why on Earth did you choose those colours?

    -4
  25. 46

    Although I enjoyed reading your design process, I really don’t see this as the redesign of the calculator for the touchscreen that dominates the 21st century.

    First you base of your design decisions on data that besides being ancient, tested usability using physical buttons, which doesn’t have the same validity in regard to a touch screen (physical buttons are usually allowed to be smaller and maintain similar error rate).

    Since the circular layout doesn’t allow the buttons to be as big as in a square arrangement I wonder how does this impact the error rate when using the calculator.

    What I feel *IS* a calculator designed for the touchscreen, and especially large ones, is the “MyScript Calculator” that provides unmatched ease of use and the ability to perform complex calculations rather easily.

    I get that they are not in the same “class” of calculators, but it solves the problem beautifully with text recognition and some clever gestures. If you need to do compound operations or simple equations, I have trouble imagining a quicker way.

    4
    • 47

      “which doesn’t have the same validity in regard to a touch screen”

      Good point. “Swiping” could also be worth to test.

      0
  26. 48

    Interesting article, however I do agree with Erik above that the most frequently used operators ( esp. + and – ) are a stretch for one-handed use. It might be more efficient simply to swap the main operators with the less frequently used ones (+/- and %).

    1
  27. 49

    Bruce "Tog" Tognazzini

    January 12, 2016 8:42 pm

    Harry Blanchard made an important point, and I’d like to amplify it: Bell Labs made their layout decision based on the entirely-false premise that the same keyboard would never be pressed into service to support both an adding machine and a telephone. That, coupled with the fact that only a tiny percentage of the population had ever touched an adding machine, and an even smaller percentage had touched a 10-key adding machine, led them to completely disregard compatibility with existing devices.

    If you look at their research on layout, they also appear to have been testing the learning curve, rather than a user’s ultimate speed with each layout. Quite rightly, they identified the top to bottom layout as having a significantly faster learning curve than it’s reverse: not only did the top to bottom layout mimic the top to bottom placement of the rotary dial’s numbers, but, as Michael Long pointed out, that left the alphabet in normal top-to-bottom order as well.

    As compelling as those arguments are, they would have been swept away had the designers assumed that, someday, phones and calculators would merge. That lesson may be the most important take-away from the continuing problems that have ensued. Yes, people have adjusted, but that doesn’t mean they don’t continue to make mistakes, that doesn’t mean they are not slowed down each time a keyboard comes up on the screen while they figure out which of the two layouts it is.

    As for why the rotary dial turned into the square keypad, it was in support of a new central-office technology: electronic Touch-Tone switching. The mechanical switch was first invented in 1888 by an undertaker named Almon Brown Strowger in response to the actions of the wife of the other undertaker in town who, working as a telephone operator, was “accidentally” routing all calls to Strowger to her husband’s firm.

    Mechanical switching worked by the telephone sending a series of timed, on-off pulses to the central office switch. Each pulse made the switch step up one level. The generator of these pulses was the telephone dial. The user rotated the dial clockwise using the finger hole associated with the number they were dialing, such as “7.” When the user removed his or her finger, the dial would slowly rotate back, its speed regulated by a governor. In rotating, it would trip a momentary-off switch as many times as the digit being dialed.

    (Parents in that era would put mechanical locks on their phones to keep us kids from making calls. The work-around was, literally, child’s play: We’d just press the switch hook rapidly ten times, get the operator, and ask her to dial. The really clever kids could dial the whole number this way. It still works.)

    Along came electronic, Touch-Tone switching, able to accept dual-tone (DTMF) codes for each digit, and to do so at speeds thousands of times faster than mechanical switches. Dial phones had needed the user to “wind up” the mechanical mechanism that would send out the pulse sequence. That became unnecessary. The mechanical switches had then depended on the time between pulses to physically move to the next location. Electronic switching required no such intervals. With the system now faster and more efficient, Bell engineers and designers were tasked with making the users equally faster and more efficient.

    0
    • 50

      To follow up on the Bell telephone adoption of the familiar 3×4 grid design of the DTMF keypad can also be attributed to the switching circuit for the two tone generators in the user’s phone. As arranged, each column and row represented the two frequencies that signaled each key. For example, the “5” key would transmit 770Hz for the row and 1336Hz for the column to be decoded in the central office. In the first touch-tone phones the selection of the two oscillators and a common “tone on” switch were all mechanically interlocked so the 12 button phone had 8 control switches (3col, 4 row, 1 on) to select the proper oscillator. Due to the need to mechanically couple the rows and columns the familiar Bell keypad made good design sense.
      With regards to the key arrangement to slow down the user that story really doesn’t make sense. Even when the DTMF decoder system was bolted on to the front of an old step-by-step switch the unit would decode as fast as any user and simply pulse out the numbers to the old “dial” relays. The faster the user entered the numbers the sooner the decoder could complete the connection and become available to the next push button caller. It actually reduced switching times and made better use of the CO switch.

      0
  28. 51

    I’m curious about Bell’s layout II-B for modern applications – particularly if shifted slightly south in to the lower third of the screen on a phone. It seems a key layout like this would follow the natural motion of the thumb (for a right handed person) from lower left to upper right. While not necessarily intuitive, it seems it might make for more efficient motion presuming the user is using only one hand and the thumb for entry.

    0
  29. 52

    Here’s the one thing:

    our brain is most effective in processing as well as orientating around information from left to right or right to left (depending on where you come from). There’s little room to argue about that.

    While i find a lot of your ideas great and useful they’d also apply to the existing, yet boring layouts. Once i subtract your usability enhancements from the article (honestly: they have nothing to do with the circular layout) i wonder what this article really is.

    For one thing i really miss the “why” in this article. And the other thing: eventhough arbitary, the calculator keyboard layout is not really a design problem. It works.

    Last not least we have an expectation of what a calculator layout looks like. It is distinctive BECAUSE of the number arrangement. It says “i am a calculator”. Should that be the reason for not questioning this status quo? No.

    But: a new approach should without a split second of a doubt “click” and “feel right” for a majority of users. One should clearly understand WHY it makes more sense by looking at it.

    And that’s where it fails for me. The screenshots as well as the article.

    0
  30. 53

    Forgot one thing, sorry ;)

    The current layout doesn’t only exist on calculators but also keyboards, ATMs, telephones, code locks and then some. It allows for blindfolded operation and can as well be operated by blind people.

    I don’t wanna say it’s perfect, not worth reconsidering or be defensive about it, but it’s a deeply rooted design paradigm.

    No wonder kids (who maybe never used any of above devices) have no struggle to adapt your layout. The question is: would they prefer it over the standard one? And are kids without preposition really a valid argument for a change?

    1
  31. 54

    The biggest concern I have is your use of space. The radial interface has a lot of empty white space and on a phone screen or watch face where space is utilized to increase tap target size. Your design while interesting reduces the size of the tap targets thus making it harder for someone of larger finger size to tap the correct button.

    I highly doubt designers have never questioned the layout of the calculator or a phone dialer on screen. Designers at both apple and google are constantly solving problems that don’t exist.

    0
  32. 55

    Serge Robidas

    January 14, 2016 1:44 am

    Saying that . You can’t take research for analogue devices and use them in a digital context. That’s exactly what the whole anti-skeuomorphism trend is trying to solve.

    1
  33. 56

    I do not see a need to change layout, other than to have phones, match numeric keypad & calculators. Although your circle may seem logical, or fun to you, it is a nightmare for entering large amounts of numeric data. You may not realise, just as typists keep their fingers on the querty row, so do data entry people place their three fingers (not thumb & little finger) on the numbers 4 5 6. This allows speedy entry e.g. Finger 4 is used for numbers 1 & 7 etc. Zero being a common number and kept separate is entered with thumb. This allows one to look at data and enter it without having to look at keys or screen. I have always hated entering numeric data in an office where I also need to dial up people and have to stop and check phone as 123 & 789 are flipped around. Wish it could be standardised.

    0
  34. 57

    A small point, I would argue you ap Calcuta should have the zero at the top and the 6 would then be at the base just like the most known of all layouts – A time device :)

    0
  35. 58

    I bought the app just because you dared to rethink it. Historical research to find a 66 year old User Experience Test is awesome. You questioned assumptions. You pointed out how we tolerate phone and calculator being opposite layout. Wow, our brains can process both. Should we dare to think our brains can process numbers laid out a third way? It appears some commenters don’t think it’s a good idea. You did it different, with a whole lot of thought put into it. Way to go.

    0
  36. 59

    In my opinion, this study is really good, well written and good arguments. But really, why?

    The squared calculator keyboard works nice from years and is very accessible, blind people for example can easy use square calculator keyboard.

    I respect this article but I don’t see circle calculator interface as a good idea, maybe is just about aesthetic.

    Design (specially, for interaction) works only if is accessible, usable and clear to use.

    0
  37. 60

    This is very interesting, however, I like the calculator I can just talk into without using my fingers (ie Siri or Google). Why have an app for such a simple thing when you can just use your voice, which is entirely more natural than pressing virtual buttons?

    0
  38. 61

    Arthur Stoller

    March 22, 2016 9:23 am

    Informative comments ! I loved the information – Does someone know where I can find a blank WI WB-12 example to use ?

    0
  39. 62

    I really like this idea but unfortunately, it’s close but not quite. I tried it for a week.

    The numbers should so obviously be in the same places as on a clock. Those are coordinates we understand after a lifetime of looking at clocks: 1 at 1; 3 at 3; 6 at 6; and 9 at 9.

    Then it’s zero at the 10:00; point at the 11:00; C at 12:00.

    0 is a more analogous to 10 than it is to 12.

    This looks great, I like the swiping but it has solved what was a silly problem (people had to learn a new orientation for numbers on a traditional calculator) by creating what is a new silly problem (people have to learn a new placement for the numbers on this round calculator). Bell had 10 units to work with; you have 12. As mentioned above by another commenter: remind you of anything?

    Try it out with folks who have never used either orientation for a week -round calculator newbies- then have them trade from 1 at 12:00, to 1 at 1:00 and see what folks prefer.

    I’d also really like to be able to pick the colours because a lot of what makes this circular version attractive (physically and metaphorically) is the aesthetics of the circle. I don’t like the colours here and many others will have preferences too. To get around anything proprietary, give us choices for the colours, sort of like Microsoft did with its Windows settings. If we want B&W, Apple-like, ketchup & mustard or Dieter Rams, we can select our colours.

    The initial appeal of this to me is 70% aesthetics and 30% actual interface. Get me hooked with the aesthetics and have me stay with the better interface.

    Finally, I agree that it needs bigger buttons. Take up the full space so that the circles touch each other. You’ve already reduced the ability for multi-finger keying so this has to be better in other ways.

    Nice work! I look forward to Calcuta 2.0. You’ve got my 2 cents here. With a redesign, you’ll have another 99.

    -1

↑ Back to top