Testing Tip – Check Your Overlays On Mobile

CloudApp - screen recording tool
Cloudapp Launches Chrome Extension
October 3, 2018
No results lead to a dead end for users
Testing Tip – Always complete a ‘no results’ test
October 15, 2018
Show all

Testing Tip – Check Your Overlays On Mobile

Testing overlays on mobile phones

If your website uses overlays or modals (I call them overlays but there are several terms that mean the same thing), check them on a mobile device, such as an iPhone or an iPad, to see how they operate.

There can be several issues to look out for on a mobile, the most common are the following:

  1. Does the overlay fit on your mobile screen size? Sometimes an overlay doesn’t adapt to the screen size correctly and means the user has to scroll sideways to view all the content on the overlay. Check on a device with a smaller screen size, such as an iPhone SE or iPhone 5S, to make sure that everything fits and is readable.
  2. Does your overlay require scrolling? An overlay with a lot of text may need to scroll to be able to view all the content. This is especially true of some forms that display in an overlay, where the user needs to scroll to be able to submit the form. Make sure that you can scroll correctly and reach the bottom of the overlay, as sometimes the overlay is fixed and the backgroup page scrolls instead. This then means that users cannot submit the form, as they can’t scroll to the submit button. Again, testing in a smaller device, such as an iPhone SE, can indicate an issue even when a larger device, such as an iPhone 8, works ok.
  3. Can the overlay be closed? Sometimes an overlay is displayed that then cannot be closed. Usually, a close icon should be present to close the overlay or tapping outside of the overlay should close it. Check to make sure the user can close an overlay, otherwise they can remain stuck and then cannot use the website any further.

These are some of the main problems that overlays can introduce for mobile devices.

Consider whether you need to have the content appear in an overlay at all, here are some further user experience points to think about when using overlays.

Photo by rawpixel on Unsplash

Tom Batey
Tom Batey
Tom Batey, founder of Testing Web Sites & WebDepend, is a hands on website tester focusing on quality across web and mobile.