2

I'm currently designing a custom numpad for an app but am somewhat uncertain of positioning between the backspace and return button. Taking into consideration user behavior and overall accessibility, what side should these buttons lie on the screen and why?

          example one                             example two

Alexey Kolchenko
  • 22,666
  • 2
  • 29
  • 57
Carl Edwards
  • 699
  • 6
  • 18

4 Answers4

3

I think your first attempt makes the most sense. Pressing enter is a "moving forward" action while backspace is a "moving backward" action. I would expect backward actions on the left and forward actions on the right.

I'd also argue that this layout is more familiar since it mimics a telephone dialing pad with 0 in the centre and simply replaces the usual * and # buttons. Considering that this appears to be for a mobile interface, it would make sense to mimic a dialing pad as closely as possible.

Soviut
  • 418
  • 2
  • 8
  • I think I will go with what @Soviut says regarding placing the primary positive action on the right, since it signifies moving forward. Placing the negative action to go back or perform a delete operation could be placed on the right. Hence your screenshot on the left makes sense for me. – Justin Samuel Dec 17 '13 at 08:17
1

You could be more close to common layour of numpads:
enter image description here

So you could try this layout:
enter image description here

Why? At least, it's a familiar. The question also could be re-framed: why did you come with different layout?

Alexey Kolchenko
  • 22,666
  • 2
  • 29
  • 57
  • I'd agree with the bottom right for the enter button. There are actually 2 parts to the question: number order (calculator v phone layouts) and then where to put the Enter and Backspace buttons. – PhillipW Dec 15 '13 at 12:08
  • This above layout would slightly put me in discomfort particularly after seeing all the phone layout in my mind for so many years. – Justin Samuel Dec 17 '13 at 08:22
  • The numpad is borne out of very specific numeric entry requirements and should not be taken as gospel. After all, it still has the now-useless numlock key, and plenty of numerical keys pull double duty as function keys. Delete and decimal on the same key smacks of "just put it somewhere"-ism. – Soviut Dec 18 '13 at 06:14
  • @Soviut Still having no details, some conservatism (an old familiar solution) brings at least acceptible experience. Also you need no blind copying, just use the concept. – Alexey Kolchenko Dec 18 '13 at 08:55
  • My point was that the numpad served a very specific purpose and suffers from a lot of legacy. – Soviut Dec 19 '13 at 06:29
1

To begin with, and from a pure usability perspective, I would be reluctant to include two icons that so similar and could be unclear for many users. What's wrong with 'Done' and 'Del'?

Then, my take on this is that you should adhere to the platform guidelines on which the application will run (see this question for more).

Microsoft's guidelines are that the primary action is left-aligned. Whereas Apple's guidelines are that the primary action should be right-aligned.

So assuming that Enter is the primary action, and the device runs on iOS, the Enter should be on the right.

Community
  • 1
Izhaki
  • 32,595
  • 5
  • 66
  • 99
0

Put the delete key next to the edit field, and keep the enter key next bottom right (or under the whole num-pad as below).

Like apple does on their call screen:
enter image description here

Jørn E. Angeltveit
  • 12,588
  • 4
  • 41
  • 79
  • I think the question was more about designing a custom layout. What you have shown here is another custom layout which @Alexey doesnt have in mind. – Justin Samuel Dec 17 '13 at 08:21
  • @Justin: I'm answering the question "where to put the [enter] and [backspace] keys". My suggestion is to put [backspace] next to the input-field instead of the pad itself. The screen-shot is just an example of how this is done in another UI. The reference to other solutions is also an encouragement for Carl to peek on others work to ensure a certain level of consistency across the tools for the end-user. There's no need to re-invent everything ;-) – Jørn E. Angeltveit Dec 17 '13 at 10:49