Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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.

share|improve this question
    
Do most of your users have desktops (with numeric keypads)? –  Patrick McElhaney Oct 13 '10 at 16:47
1  
Will the app be used occasionally or regularly? In the latter case, you can focus on maximizing efficiency even if it's not obvious at first how the UI works. –  Patrick McElhaney Oct 13 '10 at 16:53
    
@Patrick - Yes, the users will all be using desktops with numeric keypads. –  David HAust Oct 13 '10 at 23:02
    
@Patrick - It will be used approx once/day. Interesting idea to adjust the style of the UI based on usage levels. I'll keep that in mind. –  David HAust Oct 13 '10 at 23:05

5 Answers 5

up vote 12 down vote accepted

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.

share|improve this answer
1  
Additionally, if the input set is limited (i.e. not all 6 digit numbers are available) give them autocompletion on the entered text –  Harald Scheirich Oct 13 '10 at 12:10
    
+1 for the 'add to listbox' idea. –  David HAust Oct 13 '10 at 23:11
1  
I marked this one as the answer because it was the first to mention the 'add each number to a list' idea. However, +1 also goes to Nir's answer (ui.stackexchange.com/questions/1967/…) for adding some more important ideas to the discussion. –  David HAust Oct 14 '10 at 6:18
    
Nir makes some excellent points on validation and Testing! I would also suggest adding new items to the top of the list box, so that users can immediately review their most recent entry, of course this "feature" should be tested. –  Nescio Oct 14 '10 at 15:00

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.

share|improve this answer
2  
not sure i like this idea, its too busy and would confuse the look of the form. –  Anonymous Type Oct 21 '10 at 21:59
    
What David is attempting to do is in itself completely foreign to most users. So if anything is going to be confusing it's that task in itself. I am not sure what is confusing about it and how that is too busy. That really depends on the execution and can easily be solved. –  ThomPete Oct 22 '10 at 8:36

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.

share|improve this answer
1  
+1 Excellent points Nir, especially the editing and validatiion. –  David HAust Oct 13 '10 at 23:11

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.

share|improve this answer
    
No, unfortunately the users can't copy/paste. The numbers are hand written on the top of pieces of paper (invoices, receipts, etc) –  David HAust Oct 13 '10 at 23:08

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.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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