2

I have a web application that has a faceted search feature, that will filter results in realtime based on search criteria. In order to allow the user to easily view each item in the results without having to reload the page multiple times, detailed information is displayed in a lightbox when the result is clicked.

The flow works nicely, however within the lightbox are three buttons to download various documents. If they were just downloading the files directly this wouldn't pose a problem, however I need to display the option to either download or email the file after clicking the button (client requested).

The only thing that came to mind was to open another dialogue in a lightbox with the download link and email form, however this seems to be a bad idea for usability.

Are there any alternatives to a lightbox ontop of a lightbox that would work here? (without having to move the original lightbox to a new page)

1
  • In the simplest (user's point of view) case, you would have six buttons. You know the rest: a download, email pair for each of the three options.
    – Kris
    Oct 6, 2012 at 12:20

2 Answers 2

1

Does it have to be a separate stage?

It's hard to decide whether it's appropriate without seeing your layout, but maybe this could work.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

Once they click Email, a textbox appears for the address, if you don't know it already.

1

What I would do is hide the div with those download/email options and then show it on click with the help of CSS and Javascript. Take a look at this code example for showing/hiding a div. You could relatively easily adapt your lightbox to use the mentioned example by putting your buttons in the div. This way, there is no need for another page or another lightbox and the user experience with the download is fast, natural and easy. Also, you could make it more fancy by adding an expand/collapse animation for the hidden div. Good luck!

Edit: I found this nice modal box, which I think would be exactly what you requested. Press the Start demo button. The modal box will open. Then, press the Continue... button. It will reform the dialog box and load new content in it! In your case, there you would have your download options.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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