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 trying to find an intuitive input control to create a list of QUANTITY x ITEM lines. The items already exist in the database and the simplest way to do this would be:

mockup

In order to make it faster to input the lines I thought about leaving it a plain text field that on Enter it would just add an <li> to a <ul> with a link to remove the line like so:

mockup

I am not so sure though how would the autocomplete work best and if there is a simple plugin like chosen that can accept free-form text ("3x") and autocomplete values ("Goblin") in a text input or a text area.

share|improve this question
    
how many different types of items do you have? who is the target user? –  Jung Lee Apr 6 '12 at 2:07
    
The target user is the typical D&D Dungeon Master (a geek and usually computer-savvy). The item types will have been entered by the user ahead of time and will usually enumerate in the few tens to about a couple hundreds. –  vrinek Apr 6 '12 at 6:47
    
Between typing "3x Goblin" into a single field, and typing "3" and "Goblin" into two separate fields, the latter is more efficient, no? It requires one less key stroke, "TAB" vs "X"+"spacebar". Otherwise I think your second mockup is about as efficient as you can get for keyboard entry –  Jung Lee Apr 6 '12 at 13:49
add comment

1 Answer 1

Have you considered an autocomplete box and a list? The autocomplete box will ensure correct entry and the list will assist in managing the numbers.

I think if you allow users to enter free text then it adds one more element of difficulty on your side to parse and process the data. I like your idea of allowing free text so I think the autocomplete could be a compromise.

The list with buttons to incr/decr quantity is an idea I stole from online shopping sites. Also a delete/remove button could be included for each item.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

share|improve this answer
    
Setting sensible defaults for item numbers can go a long way with this design (if they are applicable to your data, of course). Kobolds may always come in bands of ten, but a dragon is a solitary beast :-) –  Alex Apr 6 '12 at 6:05
    
The parsing part is easy (have done it before on an almost identical scenario). On your answer: the elements clutter of the shopping carts is what I am trying to avoid. That's why (on the second mockup) instead of having +/- controls near the quantity, I simply have a remove link. Also, the list, in most cases, will have been thought of ahead in time so later adjustments will be rare. –  vrinek Apr 6 '12 at 6:44
add comment

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.