Lightboxes

• Lightboxes open on top of the current page.
• The height of the lightboxes is flexible.
• Scrolling is on the page, not on the lightbox. If the content inside the overlay is longer than the page height, a scrollbar gets displayed on the page.
• All content components can be included in a lightbox.
• Possible behavioral settings for regular lightbox
  
  • Width 100%, 80%, 60% or 40%
    This selection determines how much width the lightbox takes up in relation to the viewport. For example, selecting 40% will result in the lightbox taking up 40% of the width of the viewport.
  • Hide elements like logo, page head, footer links or disclaimer
    Checking an option will hide the corresponding element so that it is not displayed in the Lightbox. (Please note that the logo is always hidden on M and L viewports. Therefore, checking the 'Hide Logo' option will hide the logo only on XS and S viewports.)

Use Lightboxes exclusively for:

• critical information (e.g., view or agree to legal disclaimers)
• modal tasks or quick information (e.g., 'really leave UBS website?')
• content specific to a call to action (e.g., ‘get in touch’)
• Overlays should usually make users make a decision.

In all cases keep content on your lightbox concise and focused on a specific piece of information or action.

User experience with overlays

• If your visitors are using a mobile device, showing them an overlay designed for a desktop screen is confusing at best.
  In the worst case, it can completely block users from accessing your content.
• Accessibility is another factor to consider when evaluating the users of your overlay.
  Users with visual impairments and full-size monitors often use magnifiers to significantly increase the screen content.
  Once zoomed in, the user can only see a small portion of the page, so overlays can create the same confusing effects for magnifier users as they do for mobile device users.
  It could also be a non-advantageous experience if the visitor is accidentally clicked outside the box while scrolling or zooming. The overlay disappears automatically.
• If the only function of the modal window is to display a short status message, a simple overlay with a single button that allows users to confirm and dismiss the notification can work very well. But anything more than one or two sentences creates complexity.
• Do users want to bookmark or share the overlay content? If the overlay contains actual content and not a simple status message, users are more likely to want to do things with that content – such as bookmark it for future reference or share the link with others
  Accomplishing this is a little cumbersome and sometimes, no possible, for the visitor.
• One of the biggest problems with overlays is that they prevent users from doing what they were doing before the overlay appeared.