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 BarakOct 3 '10 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 ROct 3 '10 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;
–
venerOct 3 '10 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.