Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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.

share|improve this question
3  
I'm having trouble visualizing your problem. Can you show us screenshots or mockups of your interface? –  Jimmy Breck-McKye Oct 12 '12 at 0:09

5 Answers 5

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.

Very Rough Mockup

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

share|improve this answer
    
Thanks for the response. Conceptually, I agree with your solution and that's something I landed on too while doing this design. Except that in my case there aren't that many steps and the two flows have more of a "parent-child", flow inside of a flow kind of relationship. But its good to confirm my approach. –  rsb Oct 17 '12 at 18:55

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.

share|improve this answer
    
good example, thanks! –  rsb Oct 17 '12 at 18:55

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.

share|improve this answer

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:

enter image description here

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.

share|improve this answer

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.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.