I have a card with edit option. When I click on edit a pop up will be displayed with 3 steps.


download bmml source – Wireframes created with Balsamiq Mockups


download bmml source

Is it good practice to include wizards in pop up?

As per UX article : Try to avoid dialogs with multiple steps. For reference: https://uxplanet.org/5-essential-ux-rules-for-dialog-design-4de258c22116#.nrl4a9ca8 [Point 3]

  • The wizard contains settings?
    – Alvaro
    Dec 23, 2016 at 10:10
  • @Alvaro to edit the card contents.
    – NB4
    Dec 23, 2016 at 10:12

2 Answers 2


This would be Modal Window Basically. Yes,you can have 3 steps on a modal window just indicate the user the current state.

Modal Windows

A modal window is a secondary window that opens on top of the main one. Users have to interact with it before they can carry out their task and return to the main window. You should use modal windows when there are steps the user needs to do before the task can be completed. Using a modal window instead of a full page allows users to maintain the context of their task.

Include a clear, visible title that matches the clicked button

When a modal window opens, it’s important for users to know where it’s coming from. Your modal window should include a title that matches the button they clicked to open it. This shows consistent behavior and tells them what task they’re doing.

Allow users to close the window with the ESC key

For accessibility reasons, your modal window should close when users press the ESC key. You should also allow users to tab through controls in the modal window if you have them. This will allow users who use screen readers and keyboards to navigate your website.

Close the window when users click outside it

In case users can’t find your close button, allow them to close the window by clicking outside of it. This makes exiting easy and intuitive because users will often click on the main window to go back to it. But you don’t want to allow users to exit this way if they’re entering information on a form, otherwise they could lose it.

Use ‘Cancel’ buttons when necessary

Don’t make the window size too tall or wide

Make it as small as possible

Modeless windows should take up a very small amount of space on the main window. Make your modeless window as small and understated as possible, so that users can still interact with the main window. The main window is always the primary focus of the user’s task.

Hope this helps

  • when it comes to responsive mode pop up are big no. As per UX article Don’t include multiple steps For reference uxforthemasses.com/overlays
    – NB4
    Dec 23, 2016 at 10:17
  • 1
    Breaking the Constraints - When you really need to do it you should do it.
    – Harshith
    Dec 23, 2016 at 10:21

That is the way wizards or steppers (as per the example you post) are usually presented, as a pop-up. So to answer the main question, yes.

However, it doesn't look to me you need steppers to edit the contents of the card:

Steppers display progress through a sequence of logical and numbered steps. They may also be used for navigation.

In order to use steppers you need a process that should be broke down due to length and that has different clear sections, for example:

enter image description here

Avoid using steppers to break up sections in a short form, or multiple times on one page.

Reference: Material Design - Steppers

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.