In this post I’m going to introduce you to a UX law: the serial position effect. Together we’ll look at what it means and how we can use this information on human memory to design better user experiences on websites.
What Is the Serial Position Effect?
There is a collection of UX laws and design principles that explain how the human brain works with regards to digital interfaces. They form the general foundation for good design as a whole and should be leveraged any time you build a new website, app, or make updates to an existing one.
The serial position effect is one such law. It describes a phenomenon that occurs when the human brain attempts to recall various items that appear in a sequence or group. The serial position effect suggests that people are able to more effectively remember the first and last items better than those in the middle.
German psychologist Hermann Ebbinghaus, who conducted research on memory, was the first to coin the term. It was through his studies that we discovered how two factors — primacy and recency — affect our information recall abilities.
Primacy
Let’s say I approached you with the following:
“I need you to get the following from the store: rosemary, black pepper, cumin, garlic powder, pink salt, basil, and coriander.”
Then I asked you to repeat all the items I asked you to pick up. You’d likely attempt to recreate the list from the beginning. Rosemary would be easiest to remember. Maybe black pepper… And then what else?
This is the primacy effect in action. We have a tendency to vividly remember the first item in a sequence more clearly than what comes after it.
When we repeat lists, we tend to start with the first one, which effectively puts that first item in our long-term memory storage. Another reason is because the first tends to appear more frequently — either because of assumed priority or because of its prime positioning at the start.
Recency
Now let’s say that we’re at a party together and I introduce you to a bunch of my family members:
“This is my Dad, Uncle Charlie, my brother Eric, his wife Tammy, cousin Brad, Aunt Zelda, and that’s my Grandpa Joe.”
You walk around the party a bit and some time passes. While you might remember who my family members are in terms of relationship, which names do you remember? Chances are good you’ll remember my Grandpa Joe’s name because it’s the very last one I said. If you spent more time interacting with him, that would also reinforce his name.
This is how the recency effect works. When you have a bunch of similar items to take in at once, you’ll more strongly remember the last one.
One reason why the recency effect works is because the last item goes straight into our working memory, which makes it easier to recall than what came before it. There’s also the time factor.
Ebbinghaus’s forgetting curve explains how quickly the memory degrades. So the last item in a sequence has had the least amount of time to slip out of our memory storage, which is why people can often remember it quicker than everything else.
6 Ways to Use the Serial Position Effect to Improve User Experience
Here are some ways in which you can put the serial position effect to use in your web designs and to subsequently improve the user experience:
1. Put the Most Important Info in the Hero and CTA Sections
It might feel as though every bit of detail is important on your homepage. While it’s all relevant, there’s a hierarchy of importance.
Typically, the hero section conveys your unique value proposition. It’s the first section on the homepage and explains the big promise your brand is making to your audience. Without this info, users might feel aimless or uninspired.
The call-to-action section at the bottom of the home page gives users a clear next step to take. While the homepage might nudge them in a number of directions, this section pushes them to one specific destination.
Most WordPress themes and website templates will lay out the design this way for you. Take GreenThumb, for example. This is the homepage hero section:
And this is the CTA section:
There’s plenty of content between these two sections. However, their uniform designs (typical for the interior sections on the homepage) allow these two end caps to stand out more — and rightfully so.
2. Place Eye-catching Elements on the Far Ends of the Header
The website header and navigation is another area where hierarchy comes into play. This is why there isn’t typically much variation in the general layouts of website headers.
For horizontal headers, the logo usually appears on the left edge while the primary button — e.g. CTA button, shopping cart icon, search bar — appears on the right end. For vertical headers, the logo will sit at the top and the primary button at the bottom.
If you take a look through the various menu designs available from a WordPress plugin like Groovy Mega Menu, for instance, you’ll see this pattern repeated over and over again:
We design website headers this way for a couple of reasons.
One is because of eye-tracking patterns. In general, our eyes are naturally drawn to the top-left corner of the screen before anything else. They then move to the far-right before zigzagging downwards.
The other reason is the serial position effect. For instance, by placing our branding in the first position, this gives it the most visibility on the page and improves how well our users will be able to remember it going forward.
3. Make Important Items Stick
The order in which you place sections on a web page impacts which ones your visitors remember best. By making certain components stick, however, you can control what the “first” thing is that everyone sees at any given time.
For instance, a sticky header ensures that the logo, navigation, and other header elements are ever-present, which will secure their place in your visitors’ long-term memory.
This isn’t the only time when it’s valuable to make part of your website sticky. Take the blog, for example. As new content is published, older content gets pushed further and further away from visitors’ eyes.
There are a couple of ways in which you can ensure that your best piece of content holds onto the top seat.
One way is to use WordPress’s Make this post sticky feature:
This will stick designated posts to the top of the main blog feed, making them the first ones seen by all blog visitors.
Another option is to use a WordPress blog theme like Writing to create a blog layout where the featured post takes the top spot:
It’s not just its top position that will draw visitors’ attention to it either. It’s also the amount of space it takes up compared to the subsequent posts.
4. Study Your Data So You Can Design a False Bottom
Eye-tracking studies suggest that most users scan the left margin as well as the headings on a page to see if it’s worth a deeper read. Every website is different though. It also depends on what kind of content is on the page.
This is why it’s important to study your website’s live data to see what the average visitor’s attention span looks like.
Most of your visitors might only make it halfway down most pages. So if you want to ensure that the last (and strongest) memory of that page is the call-to-action section, you may need to create a false bottom.
For this, you’ll need a tool like Hotjar, Lucky Orange, or Mouseflow that uses heatmapping technology to detect how users engage with a web page. With heatmaps activated, you can see which areas of the page get viewed the most as well as which elements receive clicks.
You can also get data on how far down the page people scroll. You’ll find an example of how this works on the Hotjar website:
The cooler the color gets, the more visitors that have stopped scrolling. You can also hover over the shaded heatmap to see what percentage of visitors have reached certain points on the page.
If you can’t afford to shorten your pages, then you can create a false bottom for those who never make it to the bottom.
All that means is placing a call-to-action in the middle of the page where at least 50% of your visitors drop off. This way, their last impression of the page — and one of the things they remember the most vividly of it — is still the CTA.
5. Add Something Extra to Interior Items That Need to Be More Memorable
UX laws like the serial position effect are useful because they enable us to make design (and copy) decisions that play nicely with how the human brain works. That said, we can also use these principles to take more control over our visitors’ responses to what we design.
Let’s use the example of a pricing table.
Have you ever noticed that many pricing table plugins and pricing table templates — like the one included in Digity — often make the center plan/option look different than the rest?
That’s because the designer understands that the human brain naturally wants to read through the options from left to right (or right-to-left in languages like Arabic and Hebrew). If the visitors do this, the first and last plan will be the ones they remember most clearly.
By giving the center option a more pronounced design, we’re able to encourage visitors to pay attention to it first. And if that’s the one they remember the best — and our design suggests that it’s the most popular or valuable option — then we should see sales for that plan go up.
6. Brand the Start and End of All Your Videos
Video can be an effective way to communicate with website visitors. The visual format often makes the understanding of lengthy, complex, or abstract ideas much easier.
Knowing this, many brands embed video players into key areas of their websites — like the homepage hero section and on sales landing pages. But rather than jump right into the story, you may notice that these videos often display an animated title card first.
They do this because of the serial position effect. The story or message conveyed in the video is important. However, it’s just as important that the person watching the video connect the message with the brand — and the branded title card does that for them.
There are lots of ways to add your branding into the title (and end) card of a video file. One way is to use a static logo and then add an animated tagline above or below it. Another option is to animate the logo itself.
Envato Elements has thousands of logo sting templates to choose from:
Make them as long or short, minimal or complex, as you want. Just make sure they go at the very start and end of each video to reinforce your branding every time someone watches one of your videos.
Conclusion
There’s a reason why design principles and UX laws like the serial position effect factor so prominently in the design process. Learning how the human brain and attention span works will enable you to make smarter decisions about what to place and where on your website.
The serial position effect, in particular, will get you thinking about how positioning and timing can improve things like brand recognition, visitor engagement, conversion rates, and more. In turn, you’ll design websites that make it easier for your users to accomplish their goals.
Learn More Design Principles With Tuts+
No matter where your specialities lie, if you’re a designer then core design principles apply to your work. Take a look at our growing collection of design theory articles and tutorials.
