3

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
  • 1
    Is this in the middle of a process? If not, you might consider moving away from the modal to a new page to create the new company. – jazZRo Oct 23 at 11:21
  • Yes this happens in the middle of a process and I wouldnt send the user to a new page but im still thinking what would be the best way to let him add a new company from that page. – Cristian Negraia Oct 23 at 12:14
1

The first thing comes to mind is that if user chose 'add new company' a required field add to form and tell user to enter company name. I showed that in pictures. In this solution we are preventing 'modal over modal:D'. But be sure user will understand that additional form. I colored red, you can do everything you want!

1

2

3

  • This looks like a good idea yet I have another concern. My modal opens from the right side. When I press add new company in your example , another modal appears but this time it floats. Do you think it should float right above the right modal or it should be centered ? It would be weird looking floating on the right side but it might break the flow a bit if it would be centered ? Any opinions ? – Cristian Negraia Oct 24 at 6:09
  • it's 'modal on modal' situation again:)) Have you seen 'create new contact in android 9 or above? I will upload the pictures if you haven't seen it. But the solution is they have 2 form: 1.quick form 2.complete contact form. The default form is quick complete form is accessible with a button. when user click for compete form, a 'full screen modal' appears. I like it! It is usable because in most cases quick form is enough and user can add more details to contact later. This is kind of third solution you mentioned in question description and I think it's usable & user friendly! – Hossein Malakalaie Oct 24 at 9:44
1

Most of the answers here are already on the good track. IMO,

  • You should have normal dropdown field, without + button / icon. Placeholder for that field should be "Select or create company"
  • Once clicked, first option in dropdown should be "Create new company" with appropriate icon
  • Once clicked, new overlay should come. On top left of this overlay you should have back arrow and text... <-- "Back to lead creation screen", named accordingly of course. Multiple layer overlays is used by Google on some of their apps, and it seems a common pattern.
1

Instead of opening a new modal at the opened modal, you can try a modal form with a slider input for such special cases:

enter image description here

0

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.

0

I agree with first answer! '+' button does not do what you expected. I prefer something like this:

something like material design

I think in most cases after a while, user can select company from list. If is not in the list he choose 'add new company' option and enter the company in a pop-up modal form (It's a tiny form with just a text field input!).

Third solution you mentioned also seems good to me. If you can get additional datas later. do it later and keep form simple and clean. Hope it helps!

  • Can you show me what happens when the user presses the "+ add new company ?" That is where I am confused. If I open another modal or how do I facilitate the creation of a new company to the user. – Cristian Negraia Oct 23 at 10:05
  • I submitted another answer to upload images... check those out! – Hossein Malakalaie Oct 23 at 14:18
0

I see full screen modal in most google product these days. It's mobile and desktop responsive and a lot of UI frameworks support this new element. what do you think about it?

step 1

half screen modal

full screen modal

0

when creating a new company avoid having another modal, rather have it's own page to edit the company's details otherwise the users will be easily confused with your flow. And about the logo, have a settings page where users can create companies in there and edit existing ones. this way they can add logos to those companies and avoid having to add it while adding the company. A drop down should serve one purpose, if it has more than 1 function it becomes easily confusing.

So, settings page for companies and while on form allow users to access the create company screen from a link in the form. Which when they save gets them back to their form with the created company added to the previous form field.

Hope this helps a little :)

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.