10 tips to consider when using overlay / modal

Overlays, dialog boxes, modal windows, light boxes, you can call them anything you want, a small window that appears in the middle of the screen, to attract the user's attention as a design. use (and abuse a lot). In applications, web and even on mobile, modal is used to attract users' attention to subtasks, without having to separate them to another page. Using modal correctly can be very handy and effective, but like Belgian beer or Krispy Kreme donuts that use too much will make users feel unwell and nauseous. Make sure your users won't feel uncomfortable by looking at the 10 tips below.

1. Use the least modal possible

Modal is a bad guy in the world of UI designs. Like Justin Bieber at a Hollywood party always need to become the center of attention that will constantly ask you: "Look at me, look at me, LOOK AT ME". Users will have to process modal before they can continue and cannot access the website below. Sometimes this is a good thing, for example when a user has to confirm an important action, but in most cases it is unnecessary and just annoying. Instead of using modal it will be better if you display content right in the site. For example by expanding sections of web pages, use static popover or by switching between UI components. There is a good article on this topic Design templates to replace the modal windows .

LinkedIn profile page is a good example of modal replacement (picture below). Instead of using modal it allows users to edit a field when they click on that field right in the web page.

LinkedIn allows users to edit fields on the page instead of using modal

It is strange that Twitter uses modal for writing a new message that also allows users to enter messages in their pages (picture below). This is a better user experience because users can still use the page (for example, to copy and paste text) and not to lock the site like when using modal. Instead of using modal I think it would be better to expand the navigation bar above (see the mock-up below) because that user can always enter the message on the page.

Twitter uses modal to allow users to create a new message
Twitter will be better if you allow users to enter new messages right on their site

Modal can be useful in some cases like when you need users to interact before continuing, or when the cost of the mistake is very high. For example, when confirming to delete something, or enter an email address to download an ebook.

2. Don't suddenly open modal.

Suddenly opening modal when the user has not done anything is like sneaking behind someone and suddenly appears. It is not smart and you are not up. A modal always opens when you do something. It could be selecting a button, clicking on a link or choosing an option. This even applies to invited survey modals. Don't use modal, instead show invitations on a new page, or even better include an invitation in the current page itself. A modal warning that users of their sessions are about to end is the only exception I can think of.

3. Darken the website below the modal

When opening a modal it is important that the website below is a bit dark. This has 2 effects. First it makes the user pay attention to modal and second is to let the user know that the current site is not working. Be careful with using colors. Too dark, the user will not be able to identify the current website. Too bright, the user may think the site is active and may not even notice the first modal.

4. Allow users to click (or type) anywhere

Modal has 2 main components. First draw attention to modal which forces users to interact with them before continuing. The second is the external modal which allows users to click or type to close the modal. There is a general rule that you will only use modal for important interactions. For example, asking users to confirm they really want to delete an account, or they actually agree to the terms and conditions they register (which they will read carefully, as we all will do). In most cases the best use of the outside modal is to allow users to click (or type) to close / cancel it.

5. Always provide a clear close option

Following the previous section, should not only use the ability to click (or type) outside to close the modal, there should always be an option to close in the upper right corner. A good idea is to include an option to close or cancel in modal, usually a link or a button. This makes it easy for users to return to the original page.

John Lewis includes a clear close option in the upper right corner of the modal

6. Don't include too many steps

If an interaction is complex enough with multiple steps required, it needs a separate page, which will have more space and flexibility than a modal. Try to avoid using modal with many steps as shown below from Barclays Bank . Splitting a complex task into multiple steps is a great idea, but in general it is a sign that something is too complicated to require the user to complete within the framework of the modal.

Try to avoid the modal monster with many steps like Barclays bank

7. Don't cram too many things

You should not try to cram too much into the modal. Keep the modal clear and simple. If you find yourself trying to cram too many things into the modal it usually means that the modal is not the best design solution.

8. Include lots of important information

An important thing is that modal does not obscure information that may be useful to users such as price, date, and list. In fact many important information is in the modal. For example, a modal requires a confirmation user to delete some items, so list the items to be deleted.

9. Try to avoid using modal for mobile designs

It's best to avoid using modal for mobile designs because a small modal screen will need the full screen width, so why not use a separate page? If modal is used for a responsive design then it will be easier to retain the behavior on multiple devices. So make sure every modal used will be mobile friendly. For example Bootstrap modals (shown below) work well on both desktop and mobile. When using modal on mobile users often have to scroll up and down, a good idea is to include the act of closing / destroying both above and below.

Make sure all modals are mobile-friendly, just like Bootstrap's modal

10. Ensure modal is accessible

Access is clearly an important factor to consider for every design so it is important to make sure that all modal used is accessible. For example, make sure to focus correctly on objects in the modal when opening (instead of the page below) because users can navigate using the keyboard. Also make sure that the close option has a label that matches the reading device. A pretty good article about this topic is How to improve the accessibility of modal , I recommend you to read it.

ITZone via Techmaster

Share the news now