I am working on a web application. I have a huge data on pop-up. I am attaching a scenario(desktop view) for better understanding. I need to convert this to mobile.enter image description here

  • where are you planning to use? confirmation dialog or wizard or filter? use-case
    – NB4
    Commented Dec 28, 2016 at 10:08
  • What is the context for this popup?
    – invot
    Commented Dec 28, 2016 at 20:00
  • Hi @jyo – it would help if you can update your question to explain the app you're trying to create and why you want to use a popup / wizard pattern.
    – ElBel
    Commented Dec 28, 2016 at 21:51
  • @NB4@ElBel Apologize for a vague question. I had attached an example view. I am trying to show the same in mobile.
    – jyo
    Commented Dec 29, 2016 at 5:26

2 Answers 2


Generally speaking, avoid using pop-overs, modal dialogs, alerts, and/or lightboxes in your designs. Your question doesn't specify if you're looking for visual design help, but because this is a UX forum I'm going to focus on the broader question.

The key attribute of modals and popovers is that they're disruptive. This is good when you really truly do need to interrupt a user's task and get their attention: for example, their password didn't work and they need to re-enter it to continue.

Some of the key problems with modals include:

  • Accessibility issues
  • Double-scrolling or scrolling within a modal, esp on mobile web
  • Knowing how to exit the modal
  • Disrupting the user's task or goal

Philosophically, the point at which a modal ends and a new page begins is a fuzzy line. If you are using a modal to display content, why not just create a new pageview or do inline expansion? The user can then use existing navigation conventions (like the back button, or just continuing to scroll) to get to their previous context.

A deeper discussion is here:

  • 1
    Don't see why this anwer was downvoted - it's actually a pretty good answer. Popovers in any way, shape or form are indeed disruptive and distract the user from achieving their goal. Commented Dec 29, 2016 at 12:36

For every interaction the user makes in your app try to rely on motion that encourages a better understanding of the action (like in the physical world).

Take a look at Material design - Choreography.

In the case of Dialogs:

Dialogs inform users about a specific task and may contain critical information, require decisions, or involve multiple tasks.

enter image description here

Autonomous surface creation

Surfaces created without user input, or without a point of origin, should do so using an elegant combination of fading, position, and scaling transformations.

  • I know that the question itself is vague. Clearly the person writing doesn't know much about UX or why you'd use modal dialogs and alerts / popups in general. Motion and animation are really quite subtle microoptimizations of the broader UX pattern. I didn't think your answer spoke to the broader pattern, and only touched on a very narrow aspect of modal design, rather than guiding a new / inexperienced person to a broader understanding of the pattern.
    – ElBel
    Commented Dec 28, 2016 at 21:50
  • 1
    Thanks for the comment @ElBel. The question is vague so the intention of the answer was just to give some direction where to look at, so maybe a more specific question can be made. But you are right, a more extensive analysis could be more helpful.
    – Alvaro
    Commented Dec 28, 2016 at 22:00
  • I do think your answer is right... just narrow. :)
    – ElBel
    Commented Dec 28, 2016 at 22:03
  • Hi Guys @Alvaro@ElBel There are different learning levels of people. I thought i could learn something better here from guys like you :) Happy that you shared your ideas. I wish i learn/experience better UX :D Anyways i had rephrased my question with an example.
    – jyo
    Commented Dec 29, 2016 at 6:08

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.