• http://twitter.com/jakerocheleau Jake Rocheleau

    What a fantastic article! The topic is discussed in a real interesting manner, enjoyed this piece quite a bit.

  • http://twitter.com/Kim_McGuire Kim McGuire

    Nice work, Ada! Terrific guidance. I think it’s also worth adding an 11th principle to this list. The valuable and often overlooked principle is that modals and lightboxes are very rarely a good user experience for those with a variety of accessibility challenges. However, there are ways to support those customers.

    For example, for vision impaired users, with issues around colour differentiation and contrast, shading out the background pane is a great way to heighten the contrast ratio and make the modal content easier to view.

    For those customers with physical challenges, like fine motor control issues, low muscle tone or tremors (they’re more common in online users than you’d think), facilitating use of a mouse (or head wand if required) means making interactive elements, like fields, buttons, radio buttons and the window close element easier to click on, by way of larger clickable space.

    Blind users are the most difficult to support, with modals and lightboxes being notoriously difficult to code so that screen readers can read them whilst ignoring the background content. A quick scan of Google articles shows that this is a hot topic, with several potential solutions being investigated.

    Of quick note, though, is that, like in usability, we can never reach accessibility perfection. What we can do, is to ensure that accessibility, like usability, is considered in every design decision we make, leading to an inclusive solution, which supports people irrespective of disability.

  • http://twitter.com/Kim_McGuire Kim McGuire

    Nice work, Ada! Terrific guidance. I think it’s also worth adding an
    11th principle to this list. The valuable and often overlooked principle
    is that modals and lightboxes are very rarely a good user experience
    for those with a variety of accessibility challenges. However, there are
    ways to support those customers.

    For example, for vision impaired users, with issues around colour
    differentiation and contrast, shading out the background pane is a great
    way to heighten the contrast ratio and make the modal content easier to
    view.

    For those customers with physical challenges, like fine motor control
    issues, low muscle tone or tremors (they’re more common in online users
    than you’d think), facilitating use of a mouse (or head wand if
    required) means making interactive elements, like fields, buttons, radio
    buttons and the window close element easier to click on, by way of
    larger clickable space.

    Blind users are the most difficult to support, with modals and
    lightboxes being notoriously difficult to code so that screen readers
    can read them whilst ignoring the background content. A quick scan of
    Google articles shows that this is a hot topic, with several potential
    solutions being investigated.

    Of quick note, though, is that, like in usability, we can never reach
    accessibility perfection. What we can do, is to ensure that
    accessibility, like usability, is considered in every design decision we
    make, leading to an inclusive solution, which supports people
    irrespective of disability.

  • Ada

    Thanks for the feedback! Kim, you are absolutely right that in terms of accessibility popups and modals are very, very tricky and they require an additional effort from designers. Your tips how to make modals and popups more accessible are really valuable – thanks a lot for them!

  • http://twitter.com/billyspringer Bill Springer

    One possible additional rule – Position. Position the window based on size and load time. If I view the site on a mobile and can’t navigate the site without closing it, make it easy to swipe to and close. Additionally, if I scroll down a web page before the entire page loads, don’t display the window at the top of the page so I need to scroll back up to the top to see the content I was viewing.

    • Ada

      Right, it is really irritating when a user has started scrolling down to have a popup splashed at the top of the page. On a mobile this must be a real turn off.

  • Iamtester

    learnboost is bad example – close button not working in opera (rule 10)

  • lo574

    Great work.  Thank you!

  • http://twitter.com/walterstephanie Stéphanie Walter

    Great guidelines for pop-ups and modals that are actually usefull for the user in a specific user interface. 
    But as a user, I would say that the best modal on a website is no modal at all. I’m speaking here only about the modal that you get when you arrive on the website. I just can’t stand the current trend that forces every website I open to throw me a big modal in my face asking for my email to subscribe to newsletter. Hey guys I did not have a chance to look at your content yet, do you really think I’ll give you my email address ??Pop-ups were used in user interface to attract user’s attention on a specific task, to avoid distraction, but now it seems that they’ve lost this purpose. Somebody has to explain me where the distraction is when you come on a website for the first time. Is the website content a distraction so that I don’t see the subscribe newsletter button and the webdesigner thinks he has to throw it in my face ? ^^ 
    So I would say that pop-up and modals should be triggered by a user action (like clicking on logging link, etc). And NO, the page landing is not the user action I’m talking about ^^ 
    Bill also has a point about usability and position especially for mobility. Modals, especially the ones that open when you arrive on a website after clicking a twitter/facebook link from your mobile phone, are hard to close. I don’t count the times when I followed a link, arrived on the site after a certain amount of loading time, saw a black background. I then had to scroll, play around, zoom and un-zoom to find this *** modal to be able to close it (when you can) and access content. I would advice for mobile use to avoid modals, or at least to make them so that they will fit on the screen and that user has not to toy around with the page to close it. Now when I land on a page from my mobile that has a modal, I don’t waste time, I quit the page. 

    • http://www.winkpress.com/ Adai

      It is so easy to abuse popups. I guess many webmasters use a primitive solution for popups that doesn’t allow to show the popup on a specified event different from site landing. As for mobiles, I completely agree with you that scrolling there is much more unacceptable than with desktop versions.