How to optimise our data entry page for tablets

Question

SetUp: In our Inventory Control application, we have updated our Stock Count page so that restaurants can count by counting area which then adds up to a total for each item. The old way just allowed 1 amount for each item.

Screenshot 1: old way - single column for entering amounts

Screenshot 1: new way - 3 columns for entering amounts

The Challenge: We want users to be able to enter amounts on a tablet, but I'm worried that the plus and minus signs might be too busy and fiddly for a tablet. They were added so you don't have to use the keyboard for small amounts, which I think will be even more important for users with tablets.

Any ideas how what controls we should use? And how we can structure the grid to make entering data easy?

Answer 1

Some suggestions to make input more easy and less error prone on a tablet:

• place – and + signs into the input control and increase responsive area
• increase space between controls to eliminate missing while tapping

To reduce information overload you could try accordion-style navigation with folding sections.

Answer 2

First, you can add padding between rows to make them easier to click. As for the size of the buttons, you are always trading space for easier to click buttons.

A way to approach this would be to have a simple text field that opens a small bubble with large + and - buttons next to the control. This would reduce the chance of errors without using up space. Alternatively, an accordion-style row that expands on selection could give you more place to put your editable controls.

On the other hand, this implies more clicks than on-screen buttons, which might prove problematic when editing multiple products.

Answer 3

You can certainly exchange the busy and repetitive data entry parts of each row for a single data entry area locked to the top or bottom of the pane so that you can make those controls bigger.

Then you just need to select a row in order to edit the values in the dedicated area.