I am design a page which populates a lightbox on the page with medium size of information on the lightbox itself. I also have to design this page to be responsive on a mobile device particularly smart phones. What's a common practice for this?
-
4Well to be honest, the common practice here is not to use lightboxes. You shouldn't design for desktop and then try to convert that design to a mobile-friendly version; you should design it to be responsive from the ground up. Meaning not using lightboxes. Why do you need a lightbox in the first place? They're notoriously bad for usability and accessibility.– JonW ♦Nov 12, 2013 at 7:02
-
2What is the task you're trying to solve with a light box? They are, as Jon already pointed out, usually more intrusive than beneficial.– AndroidHustleNov 12, 2013 at 7:40
-
2Thumbnails representing a set of expandable images seems like a great use case for lightboxes. Low-resolution thumbnails are much better for UX than large, squished images that must be pinch-to-zoomed to enlarge in-page.– BryceNov 12, 2013 at 9:40
-
To be precise, I am designing a page where client can download a PDF document but before the doc can be downloaded, client needs to acknowledge a compliance statement. The acknowledgement screen on the web version itself is done as a modal window. After client click on acknowlege, that's when the the download begins. So, to design the same screen but for mobile devices (responsively), what would be the best practice that has lowest impact on usability? Thank you so much for your response everyone.– user38091Nov 14, 2013 at 3:48
Add a comment
|
3 Answers
May I suggest that when the viewport gets too small you'll simply remove the margins around the lightbox, remove the close button and switch over to what Apple refers to a "full screen modal view"? Pretty much like this:
answered Nov 12, 2013 at 13:00
-
5+1 responsive design sometimes means taking a different approach at different sizes, not just resizing to fit.– EricsNov 12, 2013 at 13:41
I wrote about some deliberations that were made over design and usability of responsive lightboxes. The main things to keep in mind are:
Be aware that lightboxes are intrusive! Only use a lightbox if there's no other way to showcase a piece of content. If you must use one, make it as easy as possible for the user to understand that they're still on the same page as before and they haven't done anything drastic.
Users expect that if there's more than one image or video on the page, they should be able to arrow key or swipe or click through to successive content without having to close the lightbox and open it up again to view the next one.
If you're showcasing video, make sure the video's UI and controls aren't obscured or covered by your navigation elements. This also goes for keyboard shortcuts, but sometimes is might be appropriate to override them.
If you can at all help it, don't let your responsive images scale past their natural size. Too large and they'll be blurred, too small and they're not even worth lightboxing.
Decide whether you want to fix the position of the lightbox on the screen or allow it to be scrolled off-screen. There are advantages and disadvantages to each way, and its up to you to decide what's more appropriate for your use case.
-
Some good advice here for a difficult problem (and a nice article of yours too). I'm still not convinced that a lightbox is the correct solution to the problem (especially when mobiles are involved) but if you have to use one (sometimes clients just won't be told it's not a great idea!) then this is some really useful advice.– JonW ♦Nov 12, 2013 at 10:46
Based on the op's explanation in his comment, it appears that the issue isn't about 'lightboxes' per se, but more of a modal window/dialog. The user needs to be presented information, and agree/disagree with it before they can take any further action. A lightbox is one way to handle this, as is an old school modal, or an intermediate page like a user agreement. If the website already uses a lightbox, and it can be resized for mobile to keep the look and feel of the site consistent, it would be the most practical solution.
