Better way to build a list

Question

I've got an app in production where the user builds a list of beer prices to later on make into a PDF of shelf tags (it's for the beverage industry). The user picks a brand, then a package, types in a price and adds it to their list.

Here's a shot of the entire app.

It works and people in the industry like it. But I think there's got to be a better way to do this. I'd like to focus on the controls on the right side (love to link a picture but I need to conserve my links!). I really hate the "package" combobox as it adds another click and is difficult for novices to navigate. I wish there was a way to integrate the controls and the data table but the brands list is typically 100+, so that would be a huge combobox and those are terrible. So I've made two revisions of the current implementation. Check them out.

Both are the same, but 2 has labels. I thought about starting with 2, but after the user has used the app 5ish times, I would remove the labels. Anyhow, this version removes a click and lets the user see all the possible package types without having to open the combobox. But I worry that I'm throwing a lot (visually) at the user at once. There's also the slight learning curve of going "around" the controls instead of the old way which was straight down.

I know making data entry sexy is difficult, but I really think the whole process could be smoother.

I'd love to hear what your guys think.

Answer 1

I think the best way here is to use autocomplete fields like on Google. Also, it should be great to reorder rows and edit them live.

Answer 2

Ok. So there are actually four questions here:

1 - Should I replace the combobox with the package types?

Hmm. I think it's a good idea to do so, because that control looks quite awkward. It doesn't help that the up/down buttons on that widget are so small. But it's worse that, as a user, I don't know what sizes are available. I have to hunt by trial and error. I don't think the second box would be especially confusing (so long as, by default, it says something like 'Please choose a brand on the left). As I point out below, putting a 'drilldown' combobox to the right of another is actually a quite common UI pattern. So I'd go for it.

2 - Should I show a label, or is it space consuming?

Why not show your label as the textbox's default text? You can use javascript to clear the text in the control the moment a user clicks in it. Or you can have a disappearing background image for the box, just like Wordpress.org uses for its login controls.

3 - Are the specific redesigns I have any good?

They're not bad, but I wouldn't place the Add and Price controls within the same area as the comboboxes. You only want a control to the side of another when it 'drills down' from the one to its left, or makes a more specific choice. Besides, you want the 'Add' button (the final part of the workflow) to be as far down the section as possible.

4 - (Implicit in penultimate line) Data entry is really uncool, isn't it?

You mean, streamlining processes so that users actually have a good time using a software product? So that users think the product respects their time constraints? So that users don't feel intimidated or infuriated by technology for a change?

Sounds pretty cool to me. Don't let anyone tell you different.

Answer 3

You might want to take inspiration from how ecommerce sites work:

• On the left you have your 'filtered navigation' that lets you drill down to a category and select a brand.
• In the middle you have the title and the picture of your product. In this case you will need to do a bit more work to do the preview of the label, but that might be well received by your customers.
• In the right hand you have a way of selecting the product options and 'add to cart' (in your case add to label collection).

Working within these existing conventions will mean that your software is instantly intuitive to anyone that has used the internet before. They will not have to learn a new interface.

In fact, you could start over with your app and use an ecommerce package such as Magento where usability problems have been solved by the community, e.g. how to best have 100's of brands. As for wysiwyg labels, you can use wkhtmltopdf to make the labels from html giving yourself a lot more flexibility when it comes to making quality PDFs.

Very nice site, but your focus is different to that your customers might have - because you have problem solved the tag-making problem you put the tags first in the UX, not the brands (which your customers will think of first).

Answer 4

Dmitry is getting at a very good point here which I will come to below.

You're worried about whether the labels are using up too much space? That's the least of the space wasting problem.

My first take on this whole app page is that you have your interaction area squeezed on to the right hand area and your display list taking up the whole main central content area.

When you start your list, you're going to have a big blank area in the middle, right? But still squeezing your interactive area into the right column - does that make sense - No.

Turn this around - give the user a larger interaction area and the created list just enough.

In fact - why even separate the two? Let the content be the action. Make the task more relevant to to the result. Move it closer physically and you move it closer mentally. Orient the data to the result (currently you do data entry down the column, but add the same data across the list).

Whether you go for editable combos or lists - or a combination where you can either type or choose, by merging the data and the content, you don't need to show the labels again - eg as in the pic below.