Thursday, January 30, 2014

Mistakes using photos on websites



I am finally catching up a little on my UX-related magazine reading and got to that article in Design Instruct that I previewed last week on using photographs on website.  Jacob Gube describes “eight common mistakes” that designers often make.  The article is solid in that he provides evidence for all of his ideas.  Unfortunately, it seems rare in these days of social media publishing that anyone recognizes that opinion does not make fact.  I really applaud Jacob for the way he put the article together. 

I put all three words in quotes because I am not sure that there are eight, that they are common, or that they are all mistakes.  This might sound like a big criticism of the article, but as I said above, most of it is really solid.  He just overgeneralizes and overspecifies on several occasions and I want to set the record straight.

Mistake 1: Not choosing the right photo.  Jacob is spot on with this advice in one sense – having a photo that is not relevant to the user’s task is not going to be productive, no matter how great a photo it is from a purely aesthetic perspective.  But I have one major quibble with his evidence.  He used an eye-tracking study to show that users did not look much at a photo and concluded that this means it is not relevant.  But there are two possible reasons that this might not be true.  First, the photo might be so clear that the user only need a brief glance to get the meaning and the value from it.  In this case, very little dwell time in an eye-tracking study could be an indication of a good photo choice.  This is why eye-tracking has to be used in conjunction with other methods in user research.  It is not a stand-alone tool.  Second, the user might only need to get a gist from the photo rather than any specific information.  Users can get gist in milliseconds.  In the case he uses, people downloading a college application didn’t look very long at a photo of some smiling students sitting in a classroom on laptops.  But users can get the impressions of “happy, classroom, technology” and that is really all they need.  In his counterexample of shopping for a bookcase at Pottery Barn, clearly users will need more specific information from the photo and will look at it longer.  Even if the photo is no better in relevance or quality.  The difference is in the need for precise information versus gist impression. 

Mistake 7 kinds of contradicts mistake 1.  He suggests using the photo of the artist rather than the artwork on a site that sells paintings.  The reasoning is that photos of people are most powerful.  Well, yeah OK, but what about relevance?  If the user is buying the art based largely on an engaging story about the artist, then maybe this photo is relevant.  But otherwise, it is the artwork that matters.

Mistakes 5 and 6 are kind of the same thing.  Mistake 5 says not to use photos that take too long to load and then Mistake 6 says how to code photos so that they load faster.  Same thing, isn’t it?  This is kind of nitpicky, but it is a long article.  He didn’t need to make it longer still.

The Mistake 8 tells us to use large photos.  This contradicts all of the above.  It takes longer to load and might not be as relevant as what it displaces.  Aren’t we better using small photos if there are other elements that are more relevant and if we want the page to load faster?

I recommend the article to anyone who has missed it and uses photos in their web design.  Most of it is really good and he provides real evidence.  I just had a few nitpicks I felt compelled to share.  Am I being too picky or do you agree?