I am working on an app that has a side modal. When creating a new lead the side modal opens and you are facing a form that contains the elements in the image below.

When you type inside the company input you either select an existing company from the dropdown or if the company does not exist you have the option to press the + sign to create a new one. The same thing happens when selecting a contact person.

Now the thing is that:

  1. when adding a new company there are quite a few inputs, including uploading a logo image for the new company.

  2. when adding a new contact person there are again a few inputs including selecting the company that you just created.

So my questions are:

1. How can I make this to have good usability?

2. Should I open another side modal over the existing modal to have the inputs for creating a new company or contact person ?

3. I was thinking... would it be a good idea to just let them create the company or contact person just by entering the name and hitting the plus button, avoiding other mandatory fields that could exist and let them deal with this later when they go to the Company or Contacts pages of the app ?

enter image description here

  • Question 3 : Not a good idea, the additional mandatory fields may be left empty. – DesignerAnalyst Jan 29 at 9:46

here's a few suggestions

  1. It's not obvious that by clicking the + symbol you will be creating a new entry, I believe you should be clear and use copy to clarify the function, something like "+ add new business " here's a few thoughts on that: https://www.nngroup.com/articles/icon-usability/

  2. The forms elements that you are showing are not too complex and they are not that many in number (only 4). If the number of forms increases, I suggest using 'chunking' https://lawsofux.com/millers-law and/or progressive disclosure https://www.nngroup.com/articles/progressive-disclosure/

  3. Depending on the importance of the fields you could have a save and resume option, that is, if not all fields are mandatory in order to create an entry.

https://help.formstack.com/hc/en-us/articles/360019204632-Allowing-Users-to-Save-Resume-Forms Form creation application: how to differentiate the "save form" button from the "submit button" in the form

Functionality is also dependent on wether you are using modal, popup, popover or a lightbox.

What's the difference between a Modal, Popup, Popover and Lightbox?

Hope this helps.

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.