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.

We have a Help button in the header of our product, directly next to the Log Out button.

We also have modal lightboxes that, when activated, grey-out the buttons in the header, even though they are still needed when the lightboxes are activated.

What would be the best way to make sure those header buttons can still be accessed? I don't want to repeat the buttons inside of the lightboxes, obviously.

share|improve this question
    
You may want to move Help link further away from Log Out to avoid accidental clicking. –  dnbrv Jan 10 '12 at 22:15
    
@Olivia It sounds like you know your lightbox will require some help, so why not have the button available in the lightbox? I guess it's not so obvious to me. –  tajmo Jan 10 '12 at 22:56
    
Why making a lightbox covering the entire window? Seems like you want to lightbox a smaller area. –  JOG Jan 11 '12 at 10:00
    
Thanks for your suggestions. I didn't want to duplicate the button in the lighbox because it was confusing with the exact same button outside of it, just greyed out. I think lightboxing a smaller area will work. –  Olivia Jan 11 '12 at 17:12

3 Answers 3

up vote 3 down vote accepted
  • You could offset the area the lightbox covers by a certain number of pixels from the top so that the entire upper header is still fully visible and responds to interaction.
  • You could change the z-index of the header when you activate the lightbox so that it pops up over the lightbox
  • You could copy the Help button into the lightbox (which you indicated you don't want to do)

I'd probably go with option #1 and see how it impacts the lightbox.

Ultimately I would probably reconsider whether a modal lightbox is necessary. For instance, for viewing photo slideshows, Facebook has a great non-modal solution. Perhaps you can take away some lessons from their approach.

share|improve this answer
    
z-index of the header can be set high permanently, too (less coding). –  dnbrv Jan 10 '12 at 22:14
    
Modifying the z-index is an idea I hadn't thought of, I'll definitely look into that, thanks. –  Olivia Jan 11 '12 at 17:14

Modals like a lightbox are modal for a reason; all interaction is supposed to be contained within that modal window. That's actually what "modal" means in this context; it is a different mode of interaction. See my answer on What's modal about a modal dialog?

Apple's iOS Human Interface Guidelines give some good tips on creating modal tasks. Your modal should be something simple with all necessary interactive elements contained in the modal; for instance a sign up form with username, password and a submit button only.

If you really require interactive elements beyond the modal window, consider making the task part of an ordinary page; it doesn't seem like you need to take the user into a different "mode" at all if you still need the header.

share|improve this answer

You are asking how to create active buttons on the page the modal appears on. That's contradictory to the definition of a modal. the entire purpose of a modal is that you need to interact with it before you can continue acting with the rest of the page/site.

I'm thinking the solution is to rethink this entire interaction. What benefit is the modal providing?

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.