All in the <head>

– Ponderings & code by Drew McLellan –

– Live from The Internets since 2003 –

About

Supermarket Usability

18 November 2004

It’s an undeniable fact that supermarkets are designed to make us buy things. The science of supermarket design is widely practised with the intent of guiding shoppers to purchase not only as much as possible, but the specific products the supermarket wants us to buy. From the positioning on shelves to the layout of the store, every effort is made to control the behaviour of the shopper.

This, almost by definition, flies in the face of what we might term supermaket usability or even consumer friendliness. The customer’s objective is to get into the store, collect the things they need, get to the check-out and leave as quickly as possible.

Organic Peas

An example – the other day I needed to pick up some garden peas. We try to buy organic whenever possible, so I was initially pleased to see a section labelled ‘Organic Vegetables’ in the store. The supermarket were trying to promote organic veg, and I had been led straight to it. The fact that there were no organic peas in that section caused me to hit a dead end. I’d been a good consumer, followed all the visual clues, and was rewarded with failure.

A shopper-friendly way to organise the section would have been to have a section labelled ‘Garden Peas’, containing all the different varieties, including organic. After all, my overriding need was for peas, not organic veg in general.

You and Me Against the World

And so it is with web sites. There has always been a tension between what the wants and needs of the user and what the marketeers want the user to want when it comes to architecting a site. In the late 90s the marketing aspect largely won out, leading to such atrocities as splash screens and whole sites being built inappropriately in Macromedia Flash. Thankfully, the balance has been addressed quite a bit as the medium has matured, and modern sites tend to place more emphasis on the needs of the user. It’s the anti-supermarket approach.

And here’s the rub. The supermarket industry is right up there as one of the biggest money spinners on the planet. Supermarkets make insane profits each and every day, and it doesn’t look like that’s about to change any time soon. These guys are putting their own interests in front of the interests of their customers, yet customers are still lapping it up seemingly oblivious to the raw deal they’re (we’re!) getting.

So what makes the web so different from grocery shopping? Both are providing the same set of consumers with a service, yet the tolerances are different for each. By putting the user first, are putting the cart before the horse?

- Drew McLellan

Comments

  1. § Andy: Perhaps the concrete nature of the supermarket provides an easier way to judge the focus. For example, it is easy to take a stroll through a supermarket and decide to move something , on a website it needs to be visualised much more before getting down to business.

    The other factor is that supermarkets are often a more regular stop. I can walk into my local supermarket and I know what I want and where it is (usually) because I was there last week, and the week before that etc. but most websites need to be designed to cater for the first time user, im not saying they are any better at it, but the needs are very different. Your example sounds like a first time visit to that particular supermarket, but I bet if you asked a regular organic friendly shopper, you would have your answer fairly quickly.
  2. § Drew McLellan: Not a first time shopper, but I don’t often buy peas so the point stands.

    I wonder if some of it is to do with the fact that it’s very easy to give up with a web site. If a site frustrates you, you can give up and try another without too much hassle. However, once your in a physical shop there is far more incentive to persevere – possible to the point where irritations no longer both you because you’re already mentally committed to getting the job done.

    (No, not that sort of mentally committed!)
  3. § Elaine: First of all, you can’t really avoid the grocery store, even if you want to, whereas most of us doing web stuff aren’t doing anything quite so necessary. If I want to eat food I make myself, then I have to go to the grocery store, or at least 7-11. They do have us over a barrel in that way.

    Besides, I thought I remembered hearing/reading somewhere that grocery stores operate on razor-thin profit margins, and every single product placement is aimed towards making just a little more money. I just wish I could remember WHERE I got that info.

    The counter-argument, btw, I think, to your experience is that the average shopper looking for organic peas is probably going to be buying only organic vegetables, so they get grouped that way. And, alas, in physical space, there is only one way to organize vegetables or anything else.

    There’s an interesting discussion of grocery store design, including some fun theoretical thinking, in Henry Petroski’s Small Things Considered, which I read a few weeks ago.

    It’s always interesting to me to see the subtle difference in organization among different grocery stores, and the similarities as well. (I’ve “memorized” the two stores I shop in most often, but find myself easily disoriented when I go into Safeway, for example.)
  4. § Mark Wubben: If a a shopping site confuses me I’ll go somewhere else. If the supermarket confuses me I can’t: I need food.

    And even though there are three supermarkets in my place within about 500 meters of each other, prices matter. I won’t go to a far more expensive supermarkt just because the cheaper one confuses me.

    I think there’s your difference.
  5. § Mark Wubben: Hmm, my point was already made in the previous comments, I should learn to reload the tab before commenting!
  6. § Jesse: I took a look at Grocery Gateway just to compare how they would categorize the same stuff. You have to go demo shoping, enter N2L 3G1 for a Canudian postal code, and off you go. There are tabs and left navigation but a little confusion. I click on ‘Grocery’ cause that is what I am after.. but apparently veg is not a ‘Grocery,’ it is a ‘Fresh Market.’ I go there and oh there is Organic Veg. I have no idea if they have peas cause the demo site doesn’t list prices.

    Grocery Gateway is affiliated with Soby’s Super Markets here. I tried another big grocer in Canada, Loblaws but they have nothing.

    But it appears their web sites are silly designed as well ;)
  7. § John Dowdell: Hmm. I used to work retail, and studied floor plan and display design. There are differences.

    Food stores have to work on a commodity mentality. Margins are quite low, overall, but some items have high margins… to pay for your labor, you have to give good value on the items where people will shop on price, but then have to entice them on other items to pay the bills.

    That’s why Chicken Noodle Soup is on the bottom shelf, and why milk is in the back… people shop these on price, but you’re hoping they’ll see the New Rich Mushroom soup or the ice cream before they finish shopping.

    The retail trade really, really watches how people shop. You’ve seen Poynter’s EyeTrack project, with its heatmaps of viewing patterns… this is a current parallel to the traffic charts made of supermarkets, where someone with a stopwatch draws a map of where a single shopper walks and how long they stay at each display. Their placement science is more evolved, and has deeper commitment.

    The most customer-responsive areas of a market are likely produce and floral, because the plants are decaying hour by hour. (Bakery is in a similar boat, but margins are higher.) The two chores are to provide good value so they come back next time, and to mix the pricing and displays so you have a good chance of a good monetary return on your time. In fresh produce, you want to completely clear your stock every few days… you want it bought, you don’t want to throw it away. These businesses must be extremely customer-responsive.

    For the “peas” example, they might have chosen to have the organic label in among the other peas, but they also might have been trying to send the message “we stock organic labels”, and shelfspace was too tight to stock two displays… could go either way.

    jd/mm
  8. § waylman: Actually this is where the web should be better than the brick & mortor stores. John Dowdell mentioned reasons they would not be putting the same product in both displays in his comment. On a website, you only need one entry in the database (one space on the shelf) but can more easily refference it multiple ways. Thats a little more diffucult do do in a physical grochery store.
  9. § matt: And this, is why I shop at my food co-operative.

Photographs

CSS Training Course: 18th July

We're running another CSS course aimed at beginners (or those wanting to freshen up!) on 18th July. Places are limited, so book soon to be sure of a place.

Work With Me

edgeofmyseat.com logo

At edgeofmyseat.com we build custom content management systems, ecommerce solutions and develop web apps.

Recent Links

Affiliation

  • Web Standards Project
  • Britpack
  • 24 ways

About Drew McLellan

Photo of Drew McLellan

Drew McLellan has been hacking on the web since around 1996 following an unfortunate incident with a margarine tub. Since then he’s spread himself between both front- and back-end development projects, and now is Director and Senior Web Developer at edgeofmyseat.com in Maidenhead, UK (GEO: 51.5217, -0.7177). Prior to this, Drew was a Web Developer for Yahoo!, and before that primarily worked as a technical lead within design and branding agencies for clients such as Nissan, Goodyear Dunlop, Siemens/Bosch, Caburys, ICI Dulux and Virgin.net. Somewhere along the way, Drew managed to get himself embroiled with Dreamweaver and was made an early Macromedia Evangelist for that product. This lead to book deals, public appearances, fame, glory, and his eventual downfall.

Picking himself up again, Drew is now a strong advocate for best practises, and stood as Group Lead for The Web Standards Project 2006-08. He has had articles published by A List Apart, Adobe, and O’Reilly Media’s XML.com, mostly due to mistaken identity. Drew is a proponent of the lower-case semantic web, and is currently expending energies in the direction of the microformats movement, with particular interests in making parsers an off-the-shelf commodity and developing simple UI conventions. He writes here at all in the head and, with a little help from his friends, at 24 ways.