What are some ideas to create secondary experience flows inside a modal overlay dialog?

Question

Abstract version Modals are typically used to get the user to focus on particularly information. But, if there are interactive parts of this information that will cause a slight change in context, what are some elegant ways to present this secondary context/action while not losing focus on the primary context.

Practical version I have an existing modal overlay that currently functions as an information look-up in list form. My challenge is to get the user to interact with one of the list items that requires user input.

Do I close out the modal and navigate them away? Do I update the modal and create a new screen within it? (constitutes of creating a 2-step flow with option to go back to the original list)

Inline expansion is not an option as is opening a pop-up window or hover fly-out.

Answer 1

I've done this a ton of times and the easiest thing to pull off is to use panels that are off the main modal. If there is a process where the user needs to step through it to the next. On the user selecting have the next panel slide in from the right to the left. This also serves to break up long form processes by mentally "wiping" the users view upon the reveal on the new panel. The user thinks and/or feels that the process is not so intensive and easily moves to the next panel. Granted I wouldn't do this for a form that when broken into panels caused 80 of them either.

Answer 2

You'll want to go with the option that provides users with the most consistent work flow. Map out the possible paths the user could take based on their actions, and break these down into simple steps. Have the user complete a step and indicate that that they can move onto the following step. Once the user hits the action to move on, update the modal to reveal the next step in the sequence. After all required steps are completed, it might be wise to present the user with a review screen, where they can look over their answers/actions and so on. The user can then confirm that they have completed each section, and the modal should close with a redirect (if needed) to an appropriate page on your site.

It might be a good idea to include within this modal a side navigation, this will serve two distinct purposes - Firstly as a visual aid to the user, the user can see at which point in the process they currently reside. The second is to jump to following/previous sections if necessary.

It might also be a nice touch to add an indication as to which steps have been completed, and which have yet to be completed (usually via the age old tick icon, or even something as simple as a strike-through on the section title.

n.b This is a VERY rough mock up, but should help get my explanation across.

Answer 3

Take a look at this nice modal box, which I think could be the solution to your case. Press the Start demo button and the modal box will open. Then, press the Continue... button. It will reform the dialog box and load new content in it! So, the users will not be taken away from the original modal box and, more importantly, the look and feel is not changed in the second step, encouraging them to continue doing whatever they were doing in the first step.

If you would close the modal box for the second step, a large percentage of further user input could be lost due to the change in the environment and unnecessary splitting the process into two visually different parts.

Answer 4

I'm not sure I understood you specific problem but I can suggest you to check the way Pinterest handles overlays, they have a great UX and almost the entire site functionalities are built using overlays.

Particularly take a look at the "Open Pin -> Click Repin button" and "Add -> Create Board" flows.

Answer 5

If the secondary workflow in the modal dialog is 'drilldown' pattern (parent-child relationship) or 'break-out' pattern (orthogonal investigation to the main workflow) then perhaps a partial overlay UI pattern/effect might be appropriate.

For an example see the Google iPad app, I really like how they did this:

The overlay slides out once you click on one of the search results (wiki entry for UX in my case). Notice the overlay is not complete so it's easy for the user to keep the context of the original search in mind. The partial modal view let's the user 'break out' of the primary workflow (my search for UX in this case) and browse search results, but still provides and easy and intuitive way to return to the original search results list. Of course this could have been achieved by simply opening a new tab or modal window, but the partial overlay is much cleaner, visually appealing, more usable, and more elegant.

This could be a good option in your case, I'd imagine you want to avoid opening multiple overlaying modal windows! *Important: the 'close' button of the main dialog should remain accessible so that the user can close the entire modal dialog at any time, even when in the secondary workflow.