On our desktop site, our response for many places where table, or cards, is used to display data, is to have a button that spawns a modal for adding a record to the table/cards. The models for these table rows/cards are often complex thus requiring multiple sections/tabs. For example, this one is from our Stores page :

enter image description here

My team is looking into refactoring it, and the PM is thinking to, instead of our mobile-unfriendly tabs, have scrollable modal (that would be on-demand), instead. Something like this:

enter image description here

which, if we scroll, in the body excluding the buttons, we should get something like:

enter image description here

I can't find a site where that design is commonplace, but I know it is commonplace for sites like Facebook, Twitter, ... . Also, this could introduce confusion w.r.t. the action buttons (Cancel/Save). Outside of not using modals anymore, and instead, going to a different page, idk what to do about this.

Could someone please point me to examples of this, or defend/refute this idea?

  • PM provided more information: he wants to have navigation menu on the left hand side of the modals. I'll update the sketches with this later... Commented May 9, 2019 at 18:29

1 Answer 1


The idea can work! Also, the contextual navigation on each card is a great idea.

The main advantage of this design is that users will not be sent to different pages or tabs to complete their flow. From the main page, the user opens a modal where they can make the necessary changes and then save and go back to the main page without reloading. It's very good UX-wise.

The problem is that not everyone is used with this pattern. A lot of people will expect to be sent to different pages. That is why you have to test the solution!

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.