Modal windows can be very useful in web development, enhancing the user experience by presenting small pieces of information both quickly and beautifully. But there are drawbacks to using modals, and times when they really shouldn't be used at all. Let's review some common use cases:
DO use a modal window to display media in a useful way.
I've been a big fan of Lightbox for many years. For flipping between images in a gallery or showcasing a streaming video from a news article, modal windows are great because they are fast, navigable, and keep the original page content in the background (even though its typically shaded out to provide better focus on the modal).
DON'T use a modal window for an entire web page.
I've seen many clients push for the use of modal windows simply because they seem flashy (especially when accompanied by animation effects) or because they are considered "responsive." But loading an entire web page in a modal window isn't any faster, it wastes precious screen space, and it can be awkward for users. Assuming you're site is easily navigable (it better be!) then it's always better to load larger pages in the browser themselves.
DO use modal windows for quick interactions, such as login screens, alerts, or contact forms.
These are meant to quickly grab users' attention, serve their purpose, and get out of the way. Put a "login" link in the header of every page, and a "contact us" link in the footer, and have them each launch a small modal window for their very specific purposes. Once the information is filled out, the modal vanishes and the user is right back where they expect to be.
DON'T use modal windows on responsive pages which need to play nicely on mobile devices.
I hate modal windows in the mobile experience. Phone screens are small enough, and mobile friendly pages should be lightweight enough, that the advantages of using a modal window on a desktop site really don't apply on mobile devices.
It's also very important when considering the use of a modal window to consider any implications to the background web page. If Page A launches Page B in a modal window, can the user take action on Page B that might impact the validity of the content on Page A? For example, picture a "shopping cart" page. What if clicking on an item in the cart opened the product information in a modal window, and that product information page included the "Add to Cart" option. After clicking that and closing the modal, wouldn't you expect the quantity in your cart to have been updated? It's not impossible to make that happen, but it's an example of when choosing to use a modal window may require more work than you initially realize to ensure a positive user experience.
This was by no means a comprehensive list, but touched on some of the best uses for modals as well as the common pitfalls I see on the internet and when working with clients. Let me know if you agree/disagree with anything above, or if there are any other major pros/cons of using modals I may have missed!
No comments:
Post a Comment