I am currently working on an enterprise web app. In the invoice entry screen, I had some UI trouble.

Basically the current invoice entry screen is something like this:


Default mode/state Item Input mode/state (when the "Toggle Item Input" button is pressed)

The current problem that the current method of item entry is somewhat unintuitive.

Inline editing is considered but rejected due to the need to have the inventory search and selection module present at all times as the auto-complete style of floating the modules is clunky.

Is there anyway to toggle between screens/modes that is more intuitive other than the current button solution?

There are still things there still being working on, such as best way to display the prices without showing 4 digits, yet retain accuracy. (some advice would be nice)

  • 2
    I find the question very hard to understand. I suggest you put the images inline (upload them) and explain the flow, i.e. what button was pressed to get from one to the other. Also, what do you mean by "this style"?
    – Dan Barak
    Commented Oct 3, 2010 at 8:43
  • Also, are you talking about a display:none; or are you placing these areas off screen? In other words, are you considering accessibility with this too?
    – Susan R
    Commented Oct 3, 2010 at 13:49
  • It seems that I am not allowed to post images inline due to reputation issue. I rephrased the question, hope it helps. @Susan R Yes, the parts that are not present the first screen is set under display:none;
    – vener
    Commented Oct 3, 2010 at 16:18

1 Answer 1


How do you know it’s unintuitive? Exactly what behavior are your users doing and what are they saying?

If they’re simply not finding the button, I’d guess your main problem is the button label. When users need to add an invoice item, they’re not thinking “I need to toggle something.” They’re thinking “I need to add or edit a product.” So try “Product Input” instead. If your users are also having trouble finding the other “toggle” functions, that’s probably your problem.

In general you want to indicate the control action with its graphic design, rather than text label. For example, for your button append to the end of the label an upwards arrow, or + sign, or closed Java-Swing-style tap, swapping it with a down arrow, - sign, or open tap when the input pane is open. Or make the button a toggling button. Maybe it isn’t that important for user to anticipate the UIs behavior in this case –they’ll see what it does and know what to do next when they click the button.

Another possible issue is that you appear to be combining editing and adding items into the same button, which has a certain logic to it. However, the idea of “input” might be a level of abstraction above how your users think of things. Rather, they may think of adding and editing as distinct functions that should have distinct controls. So you have to have separate Add and Edit buttons (both toggling the same pane), and just live with the additional clutter. For labels, I’d try “Edit Product” and either “Add Product” or “Insert Product.”

You may also want to consider defaulting the pane to be visible for users who are likely to be editing.

Bummer that you can’t find a way to do edit-in-place.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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