I am trying up to come up with a good solution to add items and options on the same page. This will be done via Ajax and jQuery. This development is for the Admin back-end system.

The reason I am doing this design so the Data Entry team can enter/input the data swiftly and easy to scan the information on the screen. They can use the shortcut keys to take specific actions.

Adding Item:

enter image description here

Firstly you select a category from the Tabs then it will show a list of Items that is related to a category (Still on the same page via Ajax). A Item can have 1 or more options with price.

At the bottom there is a Item Form to add a new item and when new item has been added, it will appear at the bottom automatically via Ajax.

Editing Item and Add Option:

enter image description here

Once you have added a new item, you can click on the new Item box which will then highlight to different background colour which indicate you are on the Editing mode which can be seen from the right section. It allow you to Edit the Item name and the description.

Blow that you can see, you can add Options with Price. It also allow you delete the option.

Question: (Update)

In regarding to this design, what the best approach to be able to add a new Item with multiple options at the same time? Rather than going to Edit mode then add more options on the left panel.

If I want to add more Options at later stage, where would that fit in?

  • Your question is too much of a request to review your design rather than to help with a specific UX problem that is useful to other people too. If you edit your question and bring it down to a general specific UX issue I'll review the hold. – JohnGB Feb 3 '15 at 9:03
  • @JohnGB I have revised my question, let me know if that ok. Thanks. – I'll-Be-Back Feb 3 '15 at 9:46

We normally don't critique specific designs here because it's too specific to be of use for other people. But, speaking as a general rule of thumb, if the user will be performing essentially the same action, it's best to use the same/similar view.

I'm referring to the Add and Edit. When you add an Item, you probably want to deal with its Options too. There is essentially no difference between things a user would want to do on Add and Edit. So why not use present this in the same way?

Replace the Add Item form fields with a simple "Add Item" button. Clicking on that shows the "Add/Edit" pane to the right. If it's New, the inputs are blank instead of filled in.

As to the options, if you need a quick edit for a row in a list, consider using inline editing.

Here's an example from LinkedIn Saved Searches. enter image description here

| improve this answer | |

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