Usability Tips: How to Properly Handle Images in your Site

One of the most important aspects of the overall feel of a website comes from the pictures that lie within it. It is great that you can provide great layouts, interesting and enhanced navigation, valuable content, but all of the above will be worthless if the pictures you insert next to your content are:

• of awful, low quality
• displayed in the worst way possible

The first issue is usually solved by using stock photos. There’s a bunch of free stock photo galleries and there’s even more with paid subscription. However, the second issue is tricky. In the past years you have come to know quite a few css/js powered image display tools like LightBox. Then there’s ThickBox, which I consider somewhat nicer. Both can be used in order to enlarge small thumbnails, but they both seem odd. Moreover, it depends on how you display the thumbnail, as some might not know immediately that clicking the image will provide a full size screen shot.

Brown

Take for example Brown University’s website in the screen shot. If you hover the images in the post, you will see a “+ Zoom” message in the upper left corner of the image. You will then try to go to that corner, and unfortunately, when you reach the “+ Zoom” button, it will start blinking (tested in Safari and Firefox). Now, that is really confusing. Not to mention that you can click anywhere in the picture to see the full size version. But oops, you do not know that.

Don’t panic, because I think I have found the best solution out there, and I am sharing this with you. If you check the latest version of Media Temple’s website, they too have screen shots in their control panel FAQ section. And those images are displayed perfectly. Rounded corners, borders, captions. But that’s not all of it. The great is about to be revealed. If you hover the image, in any given point, your pointer transforms into a “+” magnifying glass. What comes more natural to “enlarge” than a magnifying glass? Nothing! You even have text annotation, “Click to enlarge”, stupid.

Media Temple

Clicking will reveal a full size photo, more annotations, and in the upper central area of the image, navigation controls. YES! No need to scroll for next, previous etc buttons down to the bottom of your screen. You can even move the photo around, start slideshows, go to next picture, enlarge it even more and obviously hit the “X” close button. Now, if you do not want to go with the mouse around your screen to the “X” button, you will see your mouse pointer transformed into a “-” magnifying glass. Now, what comes more natural to “zoom out” than a magnifying glass with a minus inside it? Nothing!

Media Temple

Media Temple uses HighSlide JS, which is released under commercial license, but they do have a free version for you to try out.

Hands down for Media Temple!

Do you have a favorite or unique example of image handling you’d like to share?  Let us know via the comments section below.

If you liked this article, please subscribe to our RSS feed and social bookmark this post using the links below.