2

I'm not a UI/UX person. I'm building a webapp. I'm struggling to design my UIs for user input.

For example:

Some webapps (e.g. Slack, Asana, MS Teams, MS SharePoint) show a modal popup (with a form) almost every time you need to enter info.

However, other webapps (e.g. Github) show forms inline, in the page itself - this is harder to design, but the benefit is the form "flows" neatly with the main content, and may be more intuitive and less complex/confusing to the user.

From what I can tell, a popup is used when:

  • you're lazy... popup design is easy, and no tinkering needed with the underlying page
  • the amount of info to be collected is large
  • the info is not relevant to the page, so it makes no sense to to embed the user input stuff into the page (so collect the info then hide it)
  • from answer below: when dealing with a master-detail sort of table
  • are there other scenarios?

But popups are making it harder for me to make it responsive and look good on mobile.

Is there general advice in this area? Is one preferred to another given certain circumstances?

The problem is for those examples above - they took a design decision to do things one way or another across the entire site. They must have spent millions researching these topics, so I'd just like to copy the best practice.

1

In many applications you find entities / records with certain properties: For example, in a fleet scheduling application there are "jobs" to be scheduled. The properties of a job (time window, location, duration,...) are independent from the properties of other jobs or other entities (e.g. drivers). In such a case a popup dialog for editing the job's data helps the user focus on his task. Editing the entity is a separate subtask and the dialog helps to avoid distraction or confusion with other data of the application.

Popups are ok in such cases, but this doesn't mean that there aren't any other suitable design solutions (For example, here are different variants for form design). It depends on the application area.

On mobile devices, I don't think you need a popup at all. You can put the form in a separate screen with a "back" arrow on the top like here:

enter image description here

  • 1
    Yeah I didn't think of that case. Very helpful, thanks! – grokky Nov 24 '17 at 11:57

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.