BloG

Find out how to Use the Serial Position Effect to Design Higher Web sites

Nov 21, 2022

On this post I’m going to introduce you to a UX law: the serial position effect. Together we’ll take a look at what it means and the way we are able to use this information on human memory to design higher user experiences on web sites. 

What Is the Serial Position Effect? 

There may be a set of UX laws and design principles that designate how the human brain works almost about digital interfaces. They form the overall foundation for good design as a complete and needs to be leveraged any time you construct a latest website, app, or make updates to an existing one. 

The serial position effect is one such law. It describes a phenomenon that happens when the human brain attempts to recall various items that appear in a sequence or group. The serial position effect suggests that individuals are capable of more effectively remember the primary and last items higher than those in the center. 

German psychologist Hermann Ebbinghaus, who conducted research on memory, was the primary to coin the term. It was through his studies that we discovered how two aspects — primacy and recency — affect our information recall abilities.

Primacy

Let’s say I approached you with the next:

“I would like you to get the next from the shop: rosemary, black pepper, cumin, garlic powder, pink salt, basil, and coriander.”

Then I asked you to repeat all of the items I asked you to choose up. You’d likely try to recreate the list from the start. Rosemary could be easiest to recollect. Perhaps black pepper… After which what else? 

That is the primacy effect in motion. We’ve got a bent to vividly remember the primary item in a sequence more clearly than what comes after it. 

Once we repeat lists, we are inclined to start with the primary one, which effectively puts that first item in our long-term memory storage. Another excuse is since the first tends to look more regularly — either due to assumed priority or due to its prime positioning firstly.

Recency

Now let’s say that we’re at a celebration together and I introduce you to a bunch of my members of the family:

“That is my Dad, Uncle Charlie, my brother Eric, his wife Tammy, cousin Brad, Aunt Zelda, and that’s my Grandpa Joe.”

You walk across the party a bit and a few time passes. While you may remember who my members of the family are by way of relationship, which names do you remember? Likelihood is good you’ll remember my Grandpa Joe’s name since it’s the very last one I said. For those who spent more time interacting with him, that might also reinforce his name.

That is how the recency effect works. When you may have a bunch of comparable items to absorb without delay, you’ll more strongly remember the last one. 

One reason why the recency effect works is since the last item goes straight into our working memory, which makes it easier to recall than what got here 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 period of time to slide out of our memory storage, which is why people can often remember it quicker than all the pieces else. 

6 Ways to Use the Serial Position Effect to Improve User Experience

Listed below are some ways through which you may put the serial position effect to make use of in your web designs and to subsequently improve the user experience:

1. Put the Most Necessary Info within the Hero and CTA Sections

It’d feel as if every little bit of detail is very important in 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 primary section on the homepage and explains the large promise your brand is making to your audience. Without this info, users might feel aimless or uninspired.

The decision-to-action section at the underside of the house page gives users a transparent next step to take. While the homepage might nudge them in quite a few directions, this section pushes them to 1 specific destination. 

Most WordPress themes and website templates will lay out the design this manner for you. Take GreenThumb, for instance. That is the homepage hero section:

And that is the CTA section: 

There’s loads of content between these two sections. Nonetheless, their uniform designs (typical for the inside sections on the homepage) allow these two end caps to face out more — and rightfully so.

2. Place Eye-catching Elements on the Far Ends of the Header

The web site header and navigation is one other area where hierarchy comes into play. That is why there isn’t typically much variation in the overall layouts of website headers. 

eye catching header items

For horizontal headers, the brand often appears on the left edge while the first button — e.g. CTA button, shopping cart icon, search bar — appears on the precise end. For vertical headers, the brand will sit at the highest and the first button at the underside. 

For those who take a leaf through the varied menu designs available from a WordPress plugin like Groovy Mega Menu, for example, you’ll see this pattern repeated over and once again:

We design website headers this manner for a few reasons. 

One is due to eye-tracking patterns. Normally, our eyes are naturally drawn to the top-left corner of the screen before the rest. They then move to the far-right before zigzagging downwards. 

The opposite reason is the serial position effect. As an example, by placing our branding in the primary position, this offers it probably the most visibility on the page and improves how well our users will have the opportunity to recollect it going forward. 

3. Make Necessary Items Stick

The order through which you place sections on an online page impacts which of them your visitors remember best. By making sure components stick, nonetheless, you may control what the “first” thing is that everybody sees at any given time.

As an example, a sticky header ensures that the brand, navigation, and other header elements are ever-present, which can secure their place in your visitors’ long-term memory.

sticky nav

This isn’t the one time when it’s helpful to make a part of your website sticky. Take the blog, for instance. As latest content is published, older content gets pushed further and further away from visitors’ eyes. 

There are a pair of how through which you may be sure that your best piece of content holds onto the highest seat. 

A technique is to make use of WordPress’s Make this post sticky feature:

This may stick designated posts to the highest of the most important blog feed, making them the primary ones seen by all blog visitors.

An alternative choice is to make use of a WordPress blog theme like Writing to create a blog layout where the featured post takes the highest spot:

It’s not only its top position that may draw visitors’ attention to it either. It’s also the quantity of space it takes up in comparison with the following posts.  

4. Study Your Data So You Can Design a False Bottom

Eye-tracking studies suggest that almost all users scan the left margin in addition to the headings on a page to see if it’s value a deeper read. Every website is different though. It also is determined by what sort of content is on the page. 

That is why it’s vital to review your website’s live data to see what the typical visitor’s attention span looks like. 

Most of your visitors might only make it halfway down most pages. So if you desire to be sure that the last (and strongest) memory of that page is the call-to-action section, you might must create a false bottom. 

heatmap

For this, you’ll need a tool like Hotjar, Lucky Orange, or Mouseflow that uses heatmapping technology to detect how users engage with an online page. With heatmaps activated, you may see which areas of the page get viewed probably the most in addition to which elements receive clicks. 

It’s also possible to 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 colour gets, the more visitors which have stopped scrolling. It’s also possible to hover over the shaded heatmap to see what percentage of tourists have reached certain points on the page.

For those who can’t afford to shorten your pages, then you definitely can create a false bottom for individuals who never make it to the underside.

All which means is placing a call-to-action in the course of the page where a minimum of 50% of your visitors drop off. This fashion, their last impression of the page — and considered one of the things they remember probably the most vividly of it — remains to be the CTA.

5. Add Something Extra to Interior Items That Have to Be More Memorable

UX laws just like the serial position effect are useful because they permit us to make design (and duplicate) decisions that play nicely with how the human brain works. That said, we also can use these principles to take more control over our visitors’ responses to what we design.

SOMETHING EXTRA

Let’s use the instance of a pricing table. 

Have you ever ever noticed that many pricing table plugins and pricing table templates — just like the one included in Digity — often make the middle plan/option look different than the remainder?

That’s since the designer understands that the human brain naturally desires to read through the choices from left to right (or right-to-left in languages like Arabic and Hebrew). If the visitors do that, the primary and last plan will probably be those they remember most clearly. 

By giving the middle option a more pronounced design, we’re capable of encourage visitors to concentrate to it first. And if that’s the one they remember one of the best — and our design suggests that it’s the preferred or helpful option — then we should always see sales for that plan go up.

6. Brand the Start and End of All Your Videos

Video will be an efficient approach 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 web sites — just like the homepage hero section and on sales landing pages. But fairly than jump right into the story, you might notice that these videos often display an animated title card first. 

serial position effect on videos

They do that due to serial position effect. The story or message conveyed within the video is very important. Nonetheless, it’s just as vital that the person watching the video connect the message with the brand — and the branded title card does that for them. 

There are plenty of ways so as to add your branding into the title (and end) card of a video file. A technique is to make use of a static logo after which add an animated tagline above or below it. An alternative choice is to animate the brand itself.

Envato Elements has hundreds of logo sting templates to pick from:

Make them as long or short, minimal or complex, as you wish. Just be sure that they go on the very start and end of every video to bolster your branding each time someone watches considered one of your videos.

Conclusion

There’s a reason why design principles and UX laws just like the serial position effect factor so prominently within the design process. Learning how the human brain and a focus span works will enable you to make smarter decisions about what to put and where in your website. 

The serial position effect, particularly, will get you desirous about how positioning and timing can improve things like brand recognition, visitor engagement, conversion rates, and more. In turn, you’ll design web sites that make it easier on your users to perform their goals.

Learn More Design Principles With Tuts+

Regardless of where your specialities lie, if you happen to’re a designer then core design principles apply to your work. Take a take a look at our growing collection of design theory articles and tutorials.