2

We are working on a web application where we need to create a screen which will have number of attributes. The screen has one to many mapping and then many to many mapping due to which the design of screen is becoming complicated and need your suggestion. We have an item which is associated with a Group and Group in turn is associated with Category as my attributes. For example: We want to purchase a mouse [Item] that is associated with a Group and that have multiple features or specification which is linked to Category.

Scenario: We need a screen for adding an invoice which contains the following: 1. Number of elements 2. Add items like Mouse1, Mouse2, Keyboard2 3. For adding an item, a select group of that item. 4. As you select group then your attributes for that will be selected. 5. Give the values to all attributes and add items. 6. After adding items, Add invoice

Approach 1: On the invoice, we first update the elements required for Invoice generation like No, Date, Address, etc. While adding the items, select the Group from the drop-down and after selecting the Group, the associated category attributes will be displayed for entry. We can have multiple items on an invoice as inline unique attributes with button to add, update, delete, Save items, etc. [Refer Screen 1]

Problem: Looking for a good UX design by which multiple items can be added on a single screen and save all the data once the SAVE button is pressed.

enter image description here

Approach 2: On the invoice, we first update the elements required for Invoice generation like No, Date, Address, etc. While adding the items, select the Group from the drop-down and after selecting the Group, the associated category attributes will be displayed for entry. Here we are having quantity as fixed attributes. As we will give values to quantity and then click on “GO” then pop will open which will have insert template. Insert template count will depend on the quantity. Fill the unique attributes values and click on save.

Problem: Click on "go" to display pop up is also not good UX. enter image description here Can you please suggest me better UX for this flow.

1

You can organize this in steps and use some javascript to prevent the terrible decision to use pop-ups in 2019.

I created a simple template to show you just one of a lot of options that you have.

Particularly, I like to work with colours on the progress bar, field border, buttons and background to alert the user in the early moment that they do something wrong.

Another three important things are:

  • Use the write name of input like type="number" / type="password" to make easier to fill on mobile. See the list here: https://www.w3schools.com/html/html_form_input_types.asp
  • Put the fields in order that user will fill for he navigates using the tab on the keyboard.
  • Use the exact width on inputs, not the same for all (I just put like this on the example because I don't know your characters limit for each field).

enter image description here enter image description here enter image description here

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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