I want to add the contact in contact management. Adding Contact is having two levels insert. Adding contact is level 1 and adding products for that contact is level 2.

Flow for level 1 To contact admin has to give the user name and Phone number or product mapping if want to give. (Refer Image)

Flow for level 2 We have to map or add product for that contact. For adding or mapping product you have to select the product name and its prize.

  1. Default there will be no insert template only heading and the button will be present.

enter image description here

  1. As you click on the button one insert template will appear and the button will become disabled. Now you have to fill the value for insert template. As you fill the values then the button will become enabled. Now you can add more product by following the same procedure. As you click on button "Map product" then the previous filled value will become a label value.(Refer Image)

enter image description here

How can I make better UX?

Problem - We have used "Map Product" button to add more insert template which does not feel good for UX.

enter image description here

  • I'm a bit confused with the Flow for level 2. Could you provide with more screens for it? As far as I understand you only have initial screen, but I don't understand how it evolves purely in words. Thank you
    – aly.i.ux
    Commented Apr 30, 2019 at 8:37
  • Updated the question for level 2. Are you clear now or still have questions? Commented Apr 30, 2019 at 8:54
  • no I think I got you, thank you! Let me have a crack at it:)
    – aly.i.ux
    Commented Apr 30, 2019 at 9:50
  • First you need to correct the spelling. This will also help avoid confusion. Mapp>Map, Prize>Price, No>No. or # Commented May 1, 2019 at 0:02
  • 1
    To add to Aly's very good answer, I think it's possible to avoid the mapping button by automatically adding a new empty line as soon as all fields above the current line are complete and the current line has any input at all. If there are lots of mappings in some cases, I suggest to allow pasting a csv text into any product field and have a script add the lines automatically from that. Commented May 1, 2019 at 0:08

1 Answer 1


Have a look at the screens below. They are addressing a couple of UX issues:

  • Flow for level 2: I'm using Apple's approach to adding a contact (if you have an iPhone nearby, try adding a new contact with 10 different phone numbers - you will need to press the same 'add number' many times. It's a common practice)
  • Icon '+' on Add more mappings: On the last screen you'll see I've added a plus icon to Add button. It's just an option for you explore.
  • Disabling and enabling buttons: I think your save contact (or add contact, whichever you use) should be disabled until you fill in at least one of the fields (or all 3 as required in your system)
  • Dropdown as values: I noticed you're using dropdown as selectors and then updating labels with their values. It's clunking up your screen. Instead, use those dropdown as values already.
  • Removing product mappings: your users might make a mistake and might need to remove a key-value pair of your product mappings. I'm providing with the remove button next to them. Keep in mind, to be visually consistent I have disabled remove button on the first unpopulated product mapping.

Hope this helps a little:)

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.