What the Supermarket Can Teach You About Website Psychology, Part 1

Websites are like the peanut butter aisle in the grocery store. If you get there and there's one type of peanut butter, you grab your jar, and walk along. If there are 50 different choices, you stand there, your brain starts to shut down, and you walk away, maybe without your peanut butter.

Simpler is better, especially nowadays, with all the overwhelm of AI, social media, and so much being thrown at us. Sometimes a calming, open landscape is more inviting.

Supermarkets are built on the same psychology as good web design, and your website can use it too.

Fewer menu choices, faster decisions

Psychologists call the peanut butter problem Hick's Law. The more choices people see, the longer they take to decide. In one well-known grocery store study, a table with 24 jams drew more shoppers, but only 3% bought. With six jams on the table, 30% bought.

On a website, the menu is the aisle. Multiple times, we've changed multi-level drop-down menus into single menus and sectioned the pages instead. I believe it makes it easier for people to read the site and understand the flow.

Keep things that belong together, together

Stores usually keep a display of hot dog buns near where the hot dogs are. Sections are neatly separated, and items aren't mixed together.

Designers borrow this from Gestalt psychology. The brain treats things that sit close together as one group. On your site, keep each price next to its button, and put related pages in the same section.

Use white space to give visitors room to breathe

Back near the seafood, meats and dairy, and along the fruits and veggies, the aisles are much wider. Stores usually have light-colored floors to give the feeling of more white space.

Every bit of thinking a page asks for wears people out, and designers call it cognitive load. White space, short paragraphs, and clear headings let visitors skim instead of work. Headings do the job of the signs over each aisle, so people read one word instead of every shelf.

Put things where people expect them

Every supermarket I've been in has its aisles going the same direction, with the same things together, like the baking aisle. Fruits and veggies are down one wall, dairy down another, and meats and seafood are in the back. Stores usually keep things in the same place and rarely move them around.

This is Jakob's Law, named for usability expert Jakob Nielsen, who wrote that "users spend most of their time on other sites." So they expect yours to work the same way. Your visitors already know where the logo, the menu, and the contact button usually go, so put them there.

Visit your own store

When you get a chance this week, visit your site like a new visitor, like you don't know what's there or what it's about, and see how your visit goes.

• How many choices are on your menu?
• Do the things that belong together sit together?
• Can you skim a page quickly?
• Is everything where you'd expect it?

If you're planning a new site, start with The Questions Nobody Tells You to Ask Before You Build a Website.

Next time, we'll look at what makes people reach for something once they're in the aisle.

Related articles by Liz Krukosky:

What Did We Ever Do Without It?

The Questions Nobody Tells You to Ask Before You Build a Website