Best way to accept user input of multiple numbers?

Question

I am building a (very) small WPF app that needs to accept user input in the form of a series of numbers.

The user will be entering anywhere from 1-30 numbers (all 6 digit numbers) and then clicking a 'Submit' type button. That is the whole app, nothing more.

I want to make this as 'low friction' as possible, keeping the total number of key strokes and button clicks the user must do to a minimum. And at the same time, keeping it as intuitive as possible.

What is the best way to accept this kind of input?

The only thing I can think of is a textbox and user simply types in their numbers in comma separated form, but I'd love to hear if anyone has a better solution.

Answer 1

I would suggest a text box that adds items to a list box. The user should then be able to add, edit and remove from the list box.

In my experience, while a delimited set of numbers may be easy to copy/paste from one application to another, it is not easy to manually type, especially for up to 30 items. On the contrary, if your users are accustom to entering long delimited strings, allow the text box to accept delimited items, then automatically split the data and add each item to the list box. This will allow experienced users to add multiple items, while also simplifying corrections by treating the list as individual entities.

Answer 2

To keep the keystrokes to a minimum have a text box where you enter the numbers, every time you type 6 digits copy the number to a list and clear the textbox, a single comma delimited control is impossible to scan and find errors.

But, remember it's really impossible to type so many numbers without mistakes so:

• Make sure it's easy to edit numbers you've already entered

• If there is a way to validate the number is correct flag the number as valid/invalid as soon as possible.

• Try to make the UI resemble whatever they are copying the numbers from if possible.

• Display past numbers in a list in fixed width font (that makes if easier to see things like the 15 past numbers all have a 2 in the 3rd position except for that one, I must have mistyped it)

• Test, Test, Test - it's easy in your case, just measure the time to enter all numbers and the number of mistakes - build several designs and see what works best, improve that with fixes based on what the users are struggling with.

Answer 3

Try to build up on @Nescio's suggestion and make it very efficient.

Consider having a textbox and a listbox:

[12____]

 111111
 222222
 333333
*12____*

• When the cursor is past the last digit in the textbox and the user types another digit: add the entry to the bottom of the listbox, clear the textbox and add that digit as the first one.
  • For example, if 123456 is entered and user types 7, the entry should be added to the list and they should get 7_____ in the textbox.
  • If they type Enter, Tab, comma etc. add the entry and clear the textbox.
  • The user only needs to enter the digits, minimizing keystrokes. However, they can still use extra delimiting keystrokes if they are used to doing so.
• Reflect the changes in the current listbox item as the user types. Have a special list placeholder for empty/new items (e.g. last row showing [ new ]).
• If the user selects an item in the listbox, fill the textbox. Let them immediately start typing to edit it (shift focus as needed).
  • Consider supporting up/down arrow keys for selecting listbox items. The keys should work no matter where the focus is within the app.
• Non-standard UIs open up many subtle details which are annoying if not handled correctly. Test and experiment until the UI feels natural. Also, ask another person (a co-worker) to try it out.

Support cut & paste if you can. Users often adjust their workflow in unforeseen ways, try not to hinder them.

Answer 4

You could do this two ways.

1. Create 30 input fields with room for 6 digits in each. When the user have typed in all 6 digits jump to the next or use the tab to jump to the next.

2. Create 1 input field and add a text that says "Use tab key to add new data set" or something like that. And then add another input field every time the user pushes the tab field.

Answer 5

Where does the user get the numbers they're inputting into your system? Can they copy/paste

If that's possible, then look into how the copy/paste function works for entering serial numbers in some apps like Adobe and Microsoft. The user can copy a long string of numbers and paste into a number of fields in one fell swoop.

Otherwise, ThomPete's answer works quite well.