Image info boxes

CC BY-SA by David Prasad - http://www.flickr.com/photos/33671002@N00/

By David Prasad (CC BY-SA)

During the creation of the site lots of ideas came and went. Two of the little ones I’m pleased I pushed for were a ban on landing page carousels and the image info box.

Out of stock

Very early on @bash had the fantastic idea of making use of our own content on the site. We digitise huge amounts of wonderful, inspiring and engaging digital content – so why would we use stock photography – ever?

As the images may be used out of context we needed to include some extra information to do them justice. For those who were interested we wanted to be able to tell the story behind the picture (and promote the resource that hosted it).

The first suggestion had the information there permanently – all a bit cluttered.

wireframe

A hero image from the one of the first wireframes

National Geographic on Flipboard* (though oddly not their website) have similar captions though hidden behind small (i) buttons.

National Geographic on Flipboard (iPad)

National Geographic on Flipboard (iPad)

The first time I saw this I loved it – I’ve often found myself being more interested in a story’s image than its copy so this seemed perfect. Definitely something for us to steal – and so our image info boxes were born.

amm-offamm-on

Every editorial image on the site now gets one of these even our small landing page adverts**

features

They give us the chance to provide extra information about the image without getting in the way of the casual reader. Interested visitors could now find out what the picture was, who made it and whether they could use it. They could also click through to where the picture was originally hosted and explore that particular collection further.

A good credit record

Making extensive use of our own content has proved trickier than hoped but – while we work toward that – the image info boxes mean we can now make good use of Creative Commons (CC) licensed content.

Jisc had long promoted Creative Commons, and I’ve been very grateful of CC images in my past roles. The image info boxes gave us an elegant way to use these whilst following the rules – properly crediting the creators, and display the license, all while promoting the wonderfulness of the commons.

collab

So far it has led to the bizarre but lovely situation of a creator thanking us for using his brilliant photo.

tweet2

The image info boxes may be a small feature on a site the size of jisc.ac.uk, but hopefully one that adds a bit of joy to the experience of our visitors (and sometimes it’s the small things that make all the difference).


* As an aside – we took a lot of inspiration from browsing on the iPad. We noticed that websites often give iPad viewers a nicer experience – stripping out the clutter of sidebars and promos and just giving the content. This is doubly true for apps like flipboard. We tried to do the same.

** Insisting on info boxes for even the small ‘advert’ images on our landing pages came from experiences with using The Guardian site. Great in many ways – but their tendency to use an image for link on the homepage – and then use a different image on the story – has caught me out plenty of times. When the image can make up more than half the real-estate of a link it seems fair to assume some users will be following a link because they want to see more of the image (or find out about it), and not because of an interest in the promo copy.

3 thoughts on “Image info boxes

  1. Pingback: Happy 1st birthday, Jisc website | Jisc web team

Leave a Reply

The following information is needed for us to identify you and display your comment. We’ll use it, as described in our standard privacy notice, to provide the service you’ve requested, as well as to identify problems or ways to make the service better. We’ll keep the information until we are told that you no longer want us to hold it.
Your email address will not be published. Required fields are marked *