I'm gathering feedback on the best way to show a keyboard on screen that will provide different keys depending on the input needed.

The user will have to input 3 different values in three different steps of a process: 1- enter code (numeric password) 2- enter amount to pay (money with decimals) 3- enter additional amount (money also)

For each input, the keyboard may change a little, since the Code, for example, does not allow dots, but the Amounts will need dots for decimals and double zeros in the keyboard could help...

I need the keyboards to be consistent for the whole flow, despite the specific rules per entry, and to be compact (visually), since the space is limited in the last input (#3 does not need a field above, since the entry field is on the side). I clearly don't want to reinvent the standards, so I'll like the "0" to be centered, right below the "8".

Here are some options to help you imagine it. Hope it makes sense.

The set I like the most is shown as Row 1. What do you think?

keyboard options for a single flow

  • why in the 3er colum you have deleted de preview of the input? – Alejandro Veltri Apr 14 '15 at 18:56
  • Hi, it's because it will appear on the left side (multiple entry fields), and the trigger button below other components ;) – redux Apr 14 '15 at 20:36

A1, B1, C1. But shouldn't the keyboard be flipped vertically? Here's what I would expect to see serving the purpose, without further knowledge of your usage... tres keyboards Too, I would expect a Back button.

  • Thanks Jedi, well I'll like to understand what's the reason behind your flipped keyboard? The order suggested: 1-2-3, 4-5-6, 7-8-9,0 is kind of a standard for calculators, telephones and many other devices in North and South America at least. Thanks for your answer! – redux Apr 15 '15 at 14:30
  • Also, the third button is at the end of the page, which is not near to the keyboard and that's why I didn't put that last button. And the Back button is general to the full application. – redux Apr 15 '15 at 14:36
  • 1
    @redux gotcha! my calculators all have 1-2-3 at the bottom like my PC keyboard numpad. but your needs may differ. sure, the third button is on "the left side of the fields" and you just need these three numpads in a modal sense. i don't see any advantage in a "00" key or in moving the "back-erase" key away from the position you've given it. – Jedi Commymullah Apr 16 '15 at 4:43

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Not the answer you're looking for? Browse other questions tagged or ask your own question.