Skip to content

How to redesign a numeric keypad?

January 11, 2016

In an interesting blog post on Smashing Magazine, C.Y. Gopinath explained the design choices he made to build a new calculator for smartphones (iPhones more specifically). He started with an interesting summary of the reasons and origins of the numerical keypads of phones and calculators (keyboards, ATM, etc.). This is what drove me to read his post. Indeed I posted a photo on Flickr that showed the difference, a few years ago.


While reading the post, I was happy the author of the app did some research on the traditions behind this keyboard layout as well as the reasons and studies that lead to these layout. The article also contains links to further details, if necessary, and interesting comments from Harry Blanchard and Michael Long.

However I think the author mixed several things before re-designing his numerical keypad …

Circular design with numbers already exists in the real world: the analog watch (also mentioned in a comment). I guess most if not all humans above 10 years old are used to this design and the way it starts with “0” (well, “12”) at the top and “6” at the bottom. So when I saw Gopinath’s app screen, I was wondering if there is a reason or if there are research showing the tilt is beneficial and will not confuse for the user.


Comparison of C.Y. Gopinath’s calculator app (left) and a regular clock on a smartphone (“HTC Sense – Home” from Cha già José on Flickr, CC-by-sa, right)

Citing research from Bell Laboratories is great: very few apps did this amount of research and still show “revolutionary” user interfaces based only on the gut feeling of a designer on steroids (when there was a designer) (to be fair, some new designs achieve their goals). However the period during which they were conducted (early/mid-last century) has most probably a large role to play in the choices and habits of respondents. One thing in particular is that people most probably would use these numerical keyboards sitting on the table (like phones on table) and use their finger (or fingers but I expect the index being the single most used finger) of one hand.

What could be the response now? Only research would tell. My feeling is to start from habits of smartphone users. My own use would consider the following facts:

  1. so far smartphones are still square / rectangle objects
  2. most smartphones are still small enough to be held with only one hand and one finger on the same hand would be used (the thumb)
  3. if smartphones are too big to be used with only one hand, either you hold it with 2 hands and use your 2 thumbs (text messaging) or you hold it with 1 hand and use one finger from the other hand.

I did not (yet) witness cases where the user types on a smartphone with many fingers, like a typist would use all his/her fingers on a keyboard.


Two ways to hold and interact with a smartphone: with one hand on top (from Iriss on Flickr, CC-by-nc) and with two hands below (from, public domain)

Therefore I would rather see another “radical” design like this one (case phone held with 2 hands, using 2 thumbs to type):


My example of mock-up smartphone with digits on the side, reachable by thumbs if placed on the sides (I guess it needs some more research, of course)

I was also wondering why the author added so many gesture and swiping left, right, center. In his assessment of other calculators, it was mentioned that they offered little or no feedback. How these gestures can be intuitive or discovered by the user? I must admit I didn’t install the app but I guess there should be a tutorial for all these gestures. In my opinion, these tutorials are however the admission that these features were not intuitive, that the discoverability principle was forgotten, most probably on the altar of minimalism …

Although I appreciated the author’s research and share most of the author’s comments on current numerical keyboards, I don’t think the current implementation solves the issues of user-friendliness, discoverability and the greater goal of making kids love maths. Ironically, the “Edit History” page of the app shows the standard, old-fashioned numerical keyboard …

  1. I recall an article by Donald Knuth musing about why the keypads for the computer keyboard and the calculator have different arrangements, but cannot find the exact reference now.

Comments are closed.

%d bloggers like this: