3 ways to improve your website with the serial position effect

3 ways to improve your website with the serial position effect

As every good UI designer knows, empathy is the key to creating something users will love. You need to get inside users’ minds and understand what they want to achieve, as well as the steps they’ll take to get there.

Having a good understanding of your user’s thought processes can help you make more effective user interfaces. And one particularly useful psychological quirk to know is the serial position effect.

What is the serial position effect?

Coined by German psychologist Hermann Ebbinghaus, the serial position effect is the tendency people have to remember the first and last items in a series more clearly than those in the middle.

When used correctly, you can actively reduce a user’s cognitive load while using your website or app. This makes it easier for your user to focus and recall information. So in other words, it increases the likelihood of them staying on your site, carrying out your call to action, and remembering your message once they’ve left. Sounds like a pretty powerful tool, right?

How does the serial position effect work?

In a nutshell, the serial position effect is the combination of two main concepts: recency effect and primary effect.

  • The recency effect refers to our tendency to recall items at the end of a sequence more than other items. Because these items are the most recent information processed, they are more available to the working memory (the part of our brain that holds immediate, transitory information).
  • The primacy effect refers to our tendency to recall items at the beginning of a sequence more than other items. At the beginning of a sequence, retaining information requires relatively little cognitive effort. As we continue along a sequence and subsequent items must be recalled alongside the preceding one, each new item ups that cognitive effort — i.e., the harder it becomes to remember each new addition.

Note: The primacy effect lessens when we present information at a rapid pace. For example: when someone reads out their phone number to you, you’re much less likely to remember any of it if they rush through rather than if they say each number slowly.

How distractions impact the serial position effect

Cognitive scientists Murray Glanzer and Anita Cunitz (1966) conducted tests to investigate whether distractions have an impact on the primacy and recency effect. They discovered that after a 30-second distractor test, the primacy effect remained unchanged, whereas the recency effect disappeared.

In other words, our ability to retain recent information improves when we have adequate time to commit it to our working memory. Or, the longer we’re given to think about something, free from additional information, the better. They concluded our maximum memory capacity is around three to four pieces of information at a time.

1 - How distractions impact the serial position effect - Cacoo blogImage Source

As you can see in the graph above, the effect disappears as the delay increases – but the primary effect remains.

To summarize:

  • It’s hard to remember long lists of information.
  • We’re less likely to remember the middle items in a list.
  • We’re more likely to forget the last piece of information if we’re distracted.
  • Our ability to recall information is impacted by events between initial exposure and later recall.

How to use the serial position effect to make better designs

Here are three ways you can manipulate information to minimize the serial position effect, limit distractions, and reduce cognitive load.

1. Display task-relevant information on the same page

Being able to see useful information at a glance reduces cognitive load because we don’t need to remember where these items are. Including tools and pop-ups on your homepage or dashboard can help guide your users towards the things they need.

Ecommerce sites help us stay on-track by displaying relevant information along the top of the page. For example, the ASOS homepage (pictured below) has a little shopping basket icon that shows you how many items are in your bag, which is one less thing for you to think about or recall.

It also has a ‘favorited’ section (the prominently displayed heart icon), which allows users to save items without committing to buying them. This allows users to work their way through the site without having to remember every single thing that catches their eye. It also makes them more likely to buy later because had they been forced to remember every piece of clothing, they’d undoubtedly have forgotten at least one or two.

2 - Display task-relevant information on the same page - Cacoo blog

2. Use color and other visual and reminders

Colors can be a potent way to help someone remember information. In fact, it can increase brand recognition by up to 80%.

When designing a website, make sure you fill it with your brand’s shades in a consistent way. It’ll help your users find specific information and help users remember you once they’ve left the site. Don’t believe me? Glance at the below color swatches and tell me you’re not craving fries. 😉

3 - Use color and other visual and reminders - Cacoo blogImage Source

Cues can also lead your user through your website. Again referring back to that ASOS homepage, you’ll notice the sale tab is highlighted red – a color commonly associated with commercial sales in the UK, Europe, and the US. You don’t need to remember there’s a sale because there’s a visual reminder right there.

3. Work with the serial position effect (and not against it)

Unsurprisingly, you can’t completely avoid the fact that users will forget information. So instead of cursing your user’s poor memory, work with it.

People forget things in the middle, so take note and put important things at the beginning and the end. If you’re designing an eCommerce site, you might want to make the first and last pieces of information the most important. Usually, that’s the initial introduction (why you should buy it) and ending with a call to action, with all the technical information in the middle.

The same applies if you’re creating a blog, writing an article, or creating some brand guidelines. Put the key information at the top, then reiterate it at the bottom alongside a call to action.

Final thoughts

Every element of your design should work towards making recall easier for your user – and understanding their limits is an essential part of achieving this.

Rather than resenting our short attention spans, focus on working with them by minimizing cognitive load, drawing attention to vital information, and providing lots of visual reminders and cues.

When a design is good, it’s seamless: the user can use the app or website without being aware of the effort it takes to remember information. Achieving this state is often a process of trial and error, but the tips above will give you a leg up in getting there. Combine these with plenty of best practice research, not to mention a well-designed wireframe. Before you know it, you’ll be well on your way to creating an app or website that users remember for all the right reasons.

Georgina Guthrie Georgina is a displaced Brit currently working in France as a freelance copywriter. Before moving to sunnier climates, she worked as a B2B agency writer in Bristol, England, which is also where she was born. In her spare time, she enjoys old films and cooking (badly).