Watch a Demo

Can you engage users with a single page design?

| April 30, 2015
Sign up to get bi-weekly insights and best practices, and receive your free CX Industry Report.
Thank you!

Get ready for some great content coming to your inbox from the team at UserTesting!

singlepage_v3_banner-01Design trends play an important role in user experience. Recently, we looked into parallax scrolling to see if, despite many designers’ disdain for the trend, users found the design engaging.

A common theme that arose from the study was that users that didn’t like the design cited getting bored with the scrolling, and eventually losing interest in the story the site was attempting to tell. But the ones that did like the design thought it was the cat’s pajamas.

That got us wondering if another design trend, single-page design, would have similar results. Single page design is intended to be just what it sounds like: everything on one page. That means no clicking around to different sections of the site, but rather viewing the information in an infographic-like format that tells the story as you scroll. Like a traditional site, users scroll vertically for information, and some sites add in visual elements like animation and even parallax scrolling, to help move the story along as the user scrolls.

Could single page design be the Goldilocks of design trends—a nice middle ground between traditional and parallax sites? Or, is it just another fad?

We looked at two sites selling a similar product. One, Simply Gum, uses a modern, single page design. The other, Glee Gum, has a more traditional, multi page design.

gum-01

 

The two sites were designed so differently, that it wasn’t much of a surprise when participants overwhelmingly preferred the single page site. (Only one participant preferred the traditional site.)

What was interesting, however, was observing the differences in how participants interacted with each site. While the design might explain the participants’ overall preference for the single page design, their behaviors reveal a bit more about why this design could encourage more engagement and conversions.

Here’s what we found:

Navigation

Scrolling may get a bad rap when it’s overused, but in small chunks it can draw a user in and connect them with the content, and that’s exactly what we observed. On the single page site, participants moved fluidly up and down the page, jumping from section to section as they explored. Having all the information living on a single page allowed participants to check out other sections of the page without worrying about losing their place.

On the traditional site, participants tended to only explore the homepage, with only a few venturing off to other pages or sections of the site. Although the traditional site had far more information and resources, participants seemed to “stick” primarily to the homepage.

Reading between the lines

But all that exploring on the single page site wasn’t just casual scanning. Participants were actually reading the content. Like, all of it. (OK, except the privacy policy, but does anyone read those?)

nyc

In fact, participants were so engaged with the content, that a few picked up on a tiny piece of copy sandwiched between graphics toward the bottom of the page that notes the product was made in New York. The participants that noticed this were impressed, and even went so far as to suggest Simply Gum make that more of a focal point of the site (hint, hint). This is impressive not only because it’s such a small component of the site, but because even I had to scan through the page twice when I tried to find it again after running the study. The participants were really reading between the lines.

Not surprisingly, this didn’t happen on the traditional site. Only a few sections of the homepage and one other page were compelling enough to warrant a click. And even then, participants simply skimmed over the content and quickly moved on.

Action

Another interesting observation we made was that participants clicked on just about everything they could (and a few things they couldn’t) on the single page site. The site utilized small overlays to provide additional information, rather than links to additional pages. As soon as participants figured out they wouldn’t navigate away from the site, they clicked to their little hearts’ content.

Screen Shot 2015-04-29 at 3.23.51 PM

It’s worth noting that every participant clicked on at least one of the ‘buy’ buttons on the single page site. Only a few participants clicked on the ‘buy now’ buttons on the traditional site.

Screen Shot 2015-04-29 at 2.02.44 PM

Interesting side note: Simply Gum deviated from the single page design for the purchasing process (linking to Amazon), which was the one feature that frustrated participants. Participants seemed happy to stay within the single page, and noted it was a bit jarring to suddenly exit the site.

When to use single page design

The single page design seems best suited for sites that have less content, or fewer pages of information. While scrolling is second nature to us now, we all get bored with it pretty quickly if it’s not used judiciously. If your site can be condensed into a single page with minimal scrolling, it’s probably worth a try.

Pro tip: Keep in mind, if you’re consolidating all your content on one page, that’s going to impact your loading times, especially if those resources (like assets or images) aren’t optimized. But, if they are optimized (hint: they should be) it’s a bonus because users only need to load a page once, versus having to load everything again for each new page they visit.

When not to use single page design

Larger sites with multiple pages, products, or services might have a hard time consolidating all this information onto a single page. But, that doesn’t mean you can’t still use single page design on part of your site. Many e-commerce sites, for example, use a single page design for the homepage, and revert to traditional multi-page design for more detailed information.

What about mobile?

While parallax scrolling failed miserably on mobile, simple single page design that’s optimized for mobile can work well. Simply Gum’s site is optimized, so participants easily scrolled through the site and clicked around (albeit not quite as much as desktop participants). Mobile users noted they enjoyed the experience and read more content than they did on the traditional site, which wasn’t optimized.

TL;DR

Participants enjoyed exploring a site from a single page. Knowing they could easily navigate up and down the page without being sent off somewhere else kept them curious and engaged. They also devoured almost every word on the site, and clicked nearly every button they could get their cursors on.

If the content isn’t too lengthy, and users don’t have to scroll for days or navigate away from the page to drill down, single page design may help better engage your users and convert.