photoUX

When the user becomes the subject of the photos

Fri, 10 May 2013 10:32:00 -0400

DITTO glasses lets you to take a photo of yourself with your webcam so you can see if you like the look of their glasses.

It’s a nice application of technology that fulfils a fundamental user need.

Clearly it’s cheaper to buy glasses online but there is the obvious hurdle of picking the ones you like.

I haven’t seen many sites that do this but can imagine this approach being taken for other fashion and clothing sites.

And no, I didn’t buy any glasses!

Guidelines for dealing with photos on responsive projects

Wed, 10 Apr 2013 12:29:00 -0400

In his ‘8 Guidelines and 1 Rule for Responsive Images’ article Jason Grigsby (@grigs) shares some great tips to help you to deal with photos on your next responsive design project.

(via @lukejones)

New UXMagazine article on evaluating photo usability

Tue, 09 Apr 2013 12:11:00 -0400

I’ve recently published an article over at UXMagazine that shows you how to use my new photo usability checklist.

In the article I show you how to use the checklist to evaluate the effectiveness and usability of photos from a hotel website.

The checklist has been designed to be used to evaluate photos (in an expert review situation) and also to help people to determine their own photo requirements.

I launched the checklist in my “Usability of web photos’ eBook and article represents the first public demo of how to use it.

My new eBook 'Usability of web photos' is now available!

Fri, 22 Mar 2013 04:50:00 -0400

It is with great pleasure that I can now announce that my new eBook ‘Usability of web photos’ is now available to buy from Five Simple Steps (£2).

I believe that this is the first book of it’s kind on this topic.

I’m particularly excited because within it I share my new photo usability checklist (Excel, 83kb). It is a simple tool for you to use to evaluate the usability and effectiveness of photos in your own work.

The book will appeal to anyone who wants to learn more about the impact that the photos are having within their digital product or service. It will also be useful for photographers to use to help them to plan to take more effective and usable photos.

Within the 60 odd pages of the book I cover:

Part 1 - What are usable photos and why are they so important?

I explain what I mean by a usable photo and introduce some of the psychological reasons behind why they are so important.

Part 2 - Photo usability stories from the coalface

In every research project I see usability problems with photos. In this chapter I share some of my favourites.

Part 3 - How do you know if a photo is usable or not?

I have developed a photo usability checklist for you to use to evaluate the usability of photos in your own projects. In this chapter I introduce the checklist and explain it in detail.

Part 4 - The digital design process and web photo usability

I interviewed a commercial photographer and a digital designer to understand the issues they face when producing and working with the photos that we see online. This chapter identifies some of the problems that we face in typical design projects that directly impact upon the photos that end up on the web.

Part 5 - User-centred design techniques to improve photo usability

In this chapter I share some techniques that I’ve used during user centred design projects that have helped to improve the usability of the photos that were selected for the final product.

A cut of the book is being donated to Children in need.

I hope you enjoy it, drop me a line via @chudders to let me know what you think of it

'Usability of web photos' useful resources

Fri, 15 Mar 2013 05:58:00 -0400

This is the official resources list to accompany my ‘Usability of web photos’ eBook:

Downloads:

My photo usability checklist (Excel, 82k) to use to evaluate the usability and effectiveness of photos (to accompany chapter 3 of the book).
Our poster ‘10 simple ways to use photos to improve usability’ (PDF, 4.5mb) from UPA 2012 with Susan Weinschenk (@thebrainlady).

Blogs & Articles:

My Smashing Magazine article ‘How to use photos to sell more online’.
My cxpartners article on ‘User experience problems with responsive photos’.
‘Photos as web content’ by Jakob Nielsen
‘Deciding when graphics will help (and when they won’t)’ by Jared Spool.

Presentations:

My slides on ‘Usability of web photos’ from FOWD & UXCambridge 2012.

Examples of usable photos:

www.thefoodiemethod.com - great example of useful photos that really help you to follow a recipe.
www.made.com - beautiful product photography shot in a consistent style, very aspirational.
www.buffalosystems.co.uk - great use of photos to convey quality, heritage, tradition and credibility.
www.foxtons.co.uk - large & detailed property photos help you to select the wheat from the chaff.
www.thebostonglobe.com - some great examples of using photos to tell stories.

Books:

‘100 things every designer needs to know about people’ by Susan Weinschenk.
Chapter 26 of our ‘Smashing UX Design’ book on “Photo UX deconstructed’.
‘How to use images’ by Lindsey Marshall and Lester Meachem.
‘Perception and Imaging, A way of seeing’ by Richard Zakia.
‘Content strategy for the web’ by Kristina Halvorson and Melissa Rach.

Avoiding bullshit personas

Fri, 01 Mar 2013 08:14:06 -0500

Avoiding bullshit personas:

Some great examples of good persona photos in this deck from boltpeters

Creative commons photos for personas

Wed, 27 Feb 2013 09:24:15 -0500

Creative commons photos for personas:

@jonabbett has kindly made a set of persona photos available to the ux masses!

Usability mistakes to avoid when using photos in your website

Tue, 12 Feb 2013 07:36:08 -0500

Usability mistakes to avoid when using photos in your website:

Nice summary from Jacob here - ‘When used properly, photos are effective, information-dense content that can quickly send your intended message to your audience. However, using the wrong photos can degrade your users’ experience on your site. In this article, I’ll go over 8 potential issues your photos can have that will lead to poor website usability.’

New approach to persona photos

Mon, 11 Feb 2013 08:30:00 -0500

On a recent persona project I thought I should practice what I preached and get some decent photos.

The whole point of personas is to bring real users to life so that project teams find it easier to understand and empathise with their customers.

I often see personas that use stock photos of models to represent customers of a product or service. The problem with stock is that the models often look fake. This clearly causes problems when using it for personas which must be believable to be successful.

We had recruited actual customers of my clients service to take part in some research at our offices. This presented an ideal opportunity to get easy access to real people to take photos of.

I thought that we could take a quick full length portrait of them after they had finished, we we could then crop as we needed to suit the final format of the personas.

I set up a simple studio (as above) in the office but you don’t need to use lights or a back drop to do this (although it made doing the work in post production easier).

We asked all of the customers for permission to do this and they all signed model release forms.

We created booklets of the final persona profiles for everyone at my clients business, as well as 4 life-size cut outs of the final personas to ‘live’ in our clients office.

Ideally I’d have liked to have shot them in their own environments but given the logistical challenges this presents, dropping backgrounds in using photoshop might be the next step.

Focal Point: Intelligent Cropping of Responsive Images

Thu, 31 Jan 2013 04:31:00 -0500

Focal Point: Intelligent Cropping of Responsive Images:

Related to my blog over at cxpartners about cropping photos in responsive design, Adam Bradley has worked out this neat little framework to crop based on focal point.

The psychology of stock photography

Thu, 20 Dec 2012 05:53:29 -0500

The psychology of stock photography:

Stock photos are often used in web design because they are easy to get hold of and cheap to buy.

We often see the impact of selecting the wrong type of photo within our user research. Users often perceive them as being cliched, staged and cheap.

But if you have no choice other than to use stock what sorts of photos should you go for?

This article offers some guidance on what types to choose and what effect they might have on the user.

"Why are photos never really discussed by UX designers & researchers?!"

Thu, 06 Dec 2012 06:19:18 -0500

“Why are photos never really discussed by UX designers & researchers?!”

- Me!

My FOWD / UXCambridge slides are now live!

Tue, 04 Dec 2012 07:41:00 -0500

‘Usability of Web Photos’ from UXCambridge & FOWA from cxpartners

Using photos to convey quantity

Tue, 04 Dec 2012 05:17:49 -0500

One of the great things about getting out and about talking about photo UX is that people share their stories with you.

After my UXCambridge talk on ‘Usability of web photos’ @happygeneralist came over and said hi and shared a great example.

Scarva are an online supplier of clay and pottery. You can buy it in various quantities from a 12.5kg bag right up to a tonne.

Because it’s hard to imagine what a quantity of something like clay will look like when you receive it they use photography to show you.

This photo above shows you what 25kg of clay looks like so you can clear a suitable space in your studio for it when it arrives.

A nice example of a clever use of photos that improves the user experience, thanks @happygeneralist!

I'm writing a new book

Sat, 01 Dec 2012 10:07:00 -0500

I’m delighted to announce that I’m writing ‘Usability of web photos’ which will be out in the new year.

The book is one of the new 5 Simple Steps ‘Pocket Guide’ series.

“Coming from Five Simple Steps in January 2013, Pocket Guides are concise ebooks, focusing on specific and timely aspects of web design and development, each written by experts in the industry – and all for the price of your favourite coffee.”

This concise eBook talks about photos in terms of usability for what I believe is the first time.

I discuss what the qualities of a usable photo are, share case studies of where I have seen photos have a significant impact upon the user experience and propose a new framework to use to evaluate the usability of web photos.

Buffalo clothing know how to use a photo

Fri, 05 Oct 2012 05:27:00 -0400

The use of photos by Buffalo on their website has clearly been very carefully considered.

Screenshot of the homepage from Buffalo.co.uk

The trend of using large photos in web design isn’t new but examples such as this prove just how effective it can be.

The composition of this shot is interesting too. The subject is small and off centre in the frame but faces the navigation, and as such draws attention to it.

The photo also communicates escapism, the wild and also poor weather - all things that Buffalo want to associate themselves with.

Additional messages that Buffalo wish to convey to potential customers through their photography are quality, craftsmanship, heritage and ‘UK’ amongst other things.

They use photos to do this quite brilliantly as you can see on the ‘About’ page.

Screenshot of the ‘About’ page from Buffalo.co.uk

Photos are a brilliant asset to use to tell stories. Buffalo use customer stories as testimonials to the quality of their products.

The photos add both credibility and evidence to support the stories.

They also help the viewer to imagine themselves in that situation and to consider how important good clothing will be in that situation.

Screenshot of the ‘Stories’ page from Buffalo.co.uk

Yet more proof (if needed) of the impact that photos can have when used effectively!

W3C responsive & retina photo guidance

Thu, 04 Oct 2012 12:04:00 -0400

W3C responsive & retina photo guidance :

Advancements such as responsive design techniques and retina displays have thrown up all sorts of issues with regards to the use of photos.

This document has just been released by the W3C which offers some useful guidance for designers and developers

Using photos to support primary user tasks

Fri, 07 Sep 2012 12:25:22 -0400

Screenshot from Foxtons.co.uk

Image a property website that didn’t show photos. Inconceivable isn’t it. Being able to get a good look at a property is a fundamentally important user task that property websites must support well.

The Foxtons website is very impressive, particularly in its use of photography.

The photos are huge and allow the user to get a clear idea what the property looks like. More importantly they allow the user to imagine living there.

Foxtons realise the importance of great photos in shifting properties. They realise that people love to browse property websites to dream about the lifestyles they could lead.

The photos are critical for users as they help us to determine value for money and whether we want to view a property. These primary user tasks are supported almost entirely by the photographs.

User experience designers understand what these primary tasks are and also understand the commercial objectives of the site owner, yet we do little to influence the photos that are shown. Weird isn’t it!

Want to sell something online? Then make it look amazing!

Wed, 22 Aug 2012 04:55:23 -0400

Photo from fstoppers.com

We’ve all seen the varying quality of photos on auction sites such as eBay. Listings with a selection of well shot photos are much more likely to sell than those without.

This article on fstoppers.com shows how well taken photos add tremendous value to a car that could have otherwise looked pretty average.

These photos stand out because they are shot in a different way to standard second hand car photos. That immediately makes them different and interesting. The photos were also shot in some lovely golden light which just makes the car look more desirable.

Fundamentally, the photographer has thought a bit about what they are doing which made a huge difference to the end result.

More proof of the importance of good photos when trying to sell products online!

Nice example of photo UX from H&M

Mon, 06 Aug 2012 10:36:00 -0400

Screenshot from www.hm.co.uk showing product detail page.

I was looking through a few commerce sites for a client and was amazed at the diversity of approaches to photos they took.

One that stood out to me was H&M.

The first thing that grabs you is the use of photos through the entire site. They use large and bold photos on every page you visit en route to the product page.

The default photo size on the product page is quite large and certainly bigger than many of the competitors that I looked at.

The alternate views were abundant and useful.With this shirt for example, you get a variety of angles and also the choice to see it on and off a model.

The zoom options were also interesting. They offer a click to zoom and then drag to navigate as well as a ‘view full screen’ option that loads a much larger photo. The drag option fails however on mobile devices such as the iPhone as you can’t drag the photo.

It was a really interesting exercise to compare so many sites side by side and I had forgotten how useful it can be to take a load of screen shots and see the different approaches that people were taking in terms of photography.

The photos on sites like Boden, Mamas & Papas and H&M were so dominant it got me wondering at what point the photos became available within the design process. I can just imagine how spare the wireframes must have looked with huge boxes with crosses in them everywhere!

Another interesting observation was how disjointed the photographic style can become on sites like Amazon which essentially act as an aggregator, as opposed to say Mamas & Papas where all the photos fit a clearly defined style guide.

I’d recommend creating a wall of screenshots early in the design process to give you a very quick feel for patterns and opportunities to differentiate yourself from the competition.