Overlay Box Usability

Over the past few months there has been an increasing use of ‘Overlay boxes’ to display larger versions of images and other types of content. This essentially means that when you click on an item, the page dims and another image or window appears that you can interact with or click the dismiss.

One of the best known and easiest way to incorporate this technique into your site is to use jQuery and the excellent plugin, fancybox. Example of the sort of this you can do are shown on fancybox example page http://fancy.klade.lv/example.

An example of a overlay showing a video

Anyone that is prepared to play around for a couple of hours, even if they have little to no javascript experience can get this working on their site without too many difficulties.

Technology aside, in terms of usability these overlay boxes can be a very useful addition. They can typically show: -

• A larger version of an image
• An explanatory video
• Supporting information – to help a client make a choice for example

They do this without the user having to leave the main page and then navigate back again, so the main purpose of the page remains in the users thought path rather than allowing them to be distracted. They also do not have the usability issues of the ever annoying mouse overs, which tend to pop up when you least expect them!

However there seems to be an increasing trend to use overlay boxes for what I am going to call the ‘sake of bling’! I am not sure whether this is designers and developers just liking the bling factor, or that their clients are more impressed if they see this sort of interaction however there use in the wrong places can be a usability issue.

My example for this, and the reason for my post, was a site I saw the other day that was in development. I am not going to give a link as at the time there was a splash screen showing the company logo, under construction message  and under that simply “Please contact us here”. Okay first usability point, that does tell you what to do at all, but lets assume that at least some people would mouse over it and then click it. When you did an overlay box appeared with a contact form on it.

The problem here is that the required click is an interaction that didn’t need to take place. The form could easily be replaced with a simple email link that would need no explanation of what the user had to do (spam issues aside, but this is a small commercial company that will not want to hide their email address). There was also no phone number shown, so there was no choice of contact methods available.

To conclude my usability advice in this case would have been a straight forward HTML page. No it wouldn’t have been as flash, but all the information the user needed would have been to hand as soon as the page appeared. The users would have thanked you for it even if the website owners were not so impressed.

Tags: jQuery, overlay, usabiity

This entry was posted on Friday, July 10th, 2009 at 6:32 am and is filed under usability. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.