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

You know, we use ad-blockers as well. 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. our 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

Advertisement

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

↑ Back to top