The Best Website Layouts for User Experience and Conversions

by Rob Wells

Last updated on November 21st, 2018

best-website-layouts-introduction

Marketers seeking to dominate their respective niches should be focused on the best website layouts for maximum UX and conversions.

UX or user experience is vitally important to successful websites.

And, of course, a website that doesn’t convert may not exist at all.

Non-converting websites are nothing more than online business cards or brochures, not the kind of lead-generating website you first set out to design.

You can get a leg up on the competition by “borrowing” from the best and latest website layouts in operation today. These are layouts that are easy to navigate, simple in scope, and focused on providing a memorable user experience.

Most importantly, the best layouts for marketing are heavily influenced by conversion science, making the designs ideal for marketers who covet more subscribers, leads, and purchases.

Why do you Need a Good Website Layout?

A visitor’s first impression of your website matters, particularly when it comes to layout and design.

It’s said that 94% of first-impression are design driven. Not only that, but it takes less than half a second for a visitor to form an opinion of your site.

Another study showed that nearly half of all web visitors will decide if your site is worthy of their time based on simple design alone.

Now, colors and graphics certainly contribute to a site’s design, but it’s layout that serves the most importance when it comes to user experience and conversions.

Here’s why.

The Impact of the Website Layout on User Experience and Conversions

When you focus on user experience and conversions with your layout, you’re essentially giving visitors what they came for. They had a problem and your site solved it, which represents the best-case scenario.

In turn, by solving their problem, your website visitors will be more likely to reward you, essentially by becoming paying customers or otherwise converting.

The bottom line is that the best website layouts are more engaging, visited, and successful.

Below are a few examples of the best website layouts being used by top brands all across the web. As you’ll notice, these layouts tend to be:

  • Simple to Use: Visitors to your site shouldn’t have to figure out how your layout works. Instead, your web traffic should be able to land and get the information they need quickly and easily.
  • Intuitive: 76% of consumers want a website that makes information easy to find. You can do that by making your layout predictable.

For instance, if you look at other sites in you niche, you’ll probably notice the logo featured in the top left-hand corner. The phone number is typically in the right-hand corner, and the information above the fold is usually designed in an “F” pattern, which follows the natural direction of human eyesight and attention.

While it’s natural to want a site that’s unique and creative, stick with what works and you’ll enhance UX and conversions in return.

  • Streamlined: The best layouts for marketing contain zero fluff or clutter. In fact, many of the best layouts make use of lots of white or negative space, which is shown to have positive impacts on users.

The best layouts are instead whittled down to only those basic and ultra-important elements that are necessary for convincing prospects that you’re worthy of their time and money.

  • Goal-Oriented: The ideal website layout is symmetrical, clear, and orderly. Most importantly, top layouts make it clear what’s expected of visitors once they land. You can do this with negative space and prominent calls-to-action that can’t be missed.
  • Designed for Skimmers: When it comes to collecting and absorbing information, layouts that make text and other elements easy to consume tend to perform best.
  • Responsive: The best website layouts offer a similar and superior user experience no matter what type of device your visitors may be using.

Making your website layout responsive is crucial when you consider that Google is now Mobile First.

Not only that, but if your site fails to tailor itself to your mobile using audience, 66% will bounce and a third will never return.

These are qualities that every Internet user wants Now let’s see some examples of these award-winning layouts in action.

The Best Website Layouts (And Why They Work)

1. Asana

Notice how Asana possesses clear navigation and makes liberal use of white space to highlight the headline and call-to-action. Everything the visitor needs to learn more, get enticed, and convert is above the fold, with no scrolling required.

If the visitor wants to learn more, he or she can scroll down to view more of that presentation we’re teased with, and there’s a simple navigation menu that is straight-forward and designed with efficiency in mind.

best-website-layouts-asana

2. Dropbox

Popular cloud storage service Dropbox offers a simple above-the-fold experience, similar to Asana.

Here, visitors can learn, sign up, or scroll down to learn more. There’s also a pared-down menu that makes finding what you need simple and intuitive.

best-website-layouts-dropbox

3. Grammarly

When you scroll below the fold on Grammarly’s website, you’re shown an example of the application at work. Here, visitors can see why they would need the service, which helps to push the conversion.

Anytime visitors wish to take the next step, there’s a clear, green button in the right-hand corner, which follows the natural position of the eyes soon after landing.

The button is also static so that it’s always prominent, even as visitors scroll down and continue to read.

best-website-layouts-grammarly

4. Zendesk

Customer service leader ZenDesk also provides a static menu as visitors scroll down, ensuring they always have a way to access the content they need. The beauty of this layout is in its simplicity.

There’s lots of white space, the information is organized well, and again we see the prominent CTA in the top-right corner.

best-website-layouts-zendesk

5. HubSpot

As you scroll below the fold on HubSpot’s website, you are greeted with a pleasing layout that makes you want to stick around and stay awhile.

Look how the information below doesn’t require any strain on the eyes, and yet is so informative it just might entice you grow your business with this popular B2B business platform.

best-website-layouts-hubspot

6. MailChimp

MailChimp has managed to build one of the best website layouts for conversions because it places simple links under clearly-marked headings that make it easy to learn more.

And just look at all that white space! This layout is easy on the eyes, simple to navigate, and a joy to spend time on. That’s how you get a memorable user experience and maximum conversions.

best-website-layouts-mailchimp

7. Shopify

E-commerce giant Shopify is another that uses lots of white space and simple organization.

All of the information to learn enough to convert is truncated and designed for skimmers, which is great UX best practice for those short on time or attention.

best-website-layouts-shopify

8. Stripe

Payment processor Strip has quite a few things going for it in the best website layouts category.

The clear navigation, standout call-to-action, and negative space succeed in driving the attention, and ultimately the conversion.

best-website-layouts-stripe

9. Apple

When visitors get to the bottom of the Apple website, they’re not forced to go back to the top. Instead, they can select from a variety of clearly-marked links.

Notice how each link is categorized with bolded headings. Here, too, we see a static menu, which makes it easy to delve into the interior of the site’s architecture without an excessive amount of clicking and scrolling.

best-website-layouts-apple

10. CrazyEgg

CrazyEgg also provides a footer stocked with important links. Notice all the negative space and links that draw the eye and entice you to click-through, learn, and, subscribe to the 30-day free trial.

best-website-layouts-crazyegg

Layout Design Best Practices

If you want to infuse these best practices into your own website layout, here are a few steps to follow.

Navigation Bar

Think of your navigation bar as a roadmap to the interior of your website. Each menu item acts as a jumping point to the various pages that may help visitors learn more and convert.

It’s best to keep your menu simple so as not to confuse visitors with extraneous menu headings. Submenus should then be used to drive visitors even deeper down your site’s rabbit hole.

Don’t make pages too deep to find, however. A search box can also help visitors find what they need quickly for maximum UX and conversions.

As we’ve seen, a static menu that follows visitors as they scroll might just help to drive click-throughs, subscribes, and purchases.

Above the Fold

The best website layouts deliver critical information without very little visitor input.

One way to do this is to put all important information above the fold so that it’s front and center on visitors’ screens immediately upon landing.

For example, many websites, such as the examples above, use the formula Headline, Subhead, Copy, Image, and CTA above the fold.

All of this information entices visitors to read, learn, and click, thus converting almost instantly upon landing.

Good Website Architecture

Effective layout architecture begins with the way your homepage is organized.

With a flat and simple layout design, you can deliver the content in a way your audience expects. But the other pages of your site should be similarly laid out so that there’s a logical progression to how your visitors navigate your site.

For example, many websites follow the tried and true Home, About, Services, and Contact as a basic structure.

Other pages may be included, such as Blog and FAQ, for instance. But these commonly named headers are familiar to most web users, and thus tend to be more effective for the common website visitor.

Of course, your site may offer a unique menu, like footwear leader Zappos. But you can’t get much simpler than Women, Men, Kids, Departments, Brands, and Sale.

Keep your menu items simple to understand and you should have an effective website layout to drive more sales.

best-website-layouts-zappos

Source

Try Popups

In addition to having one of the best website layouts around, you can often increase conversions with opt-in popups.

Even if your visitors don’t convert the first time around, an opt-in popup can keep them on the hook for a future shot at converting them to paying customers.

Similarly, exit popups can be used to capture bouncing traffic, which can help bring them back into the fold of your website for a second look.

Special Tip for Mobile

Notice how CrazyEgg offers a simple above-the-fold experience that is easily replicated across devices.

The lesson here is simplicity, white space, and a call-to-action that is prominent and clearly marked to entice the click, regardless of screen size.

best-website-layouts-crazyegg-mobile

Courtesy of: https://ready.mobi/

Use Crazy Egg Features to Improve Your Layout by Understanding User Navigation

Once you begin altering your site, you can easily check conversions by running Google Analytics reports. More conversions must mean something’s working.

But how do you measure user experience?

The simple answer is to choose CrazyEgg, which offers innovative heat maps technology to help you witness real-time UX in action.

Heat maps are web page overlays that show you where visitors are hovering, scrolling, and clicking, among other actions. This information is invaluable when it comes to creating of the best website layouts possible.

Knowing where your visitors’ attention is going can help you place various elements to improve UX and conversions.

For instance, if you notice that most visitors click in the right-hand corner, that might be a good location for a CTA, like some of our examples have done.

Heat maps can not only show you how and why visitors use your site, but you can watch them navigating in real-time.

You can also A/B test elements live to find the perfect combinations of elements to take your website layout to new heights.

Conclusion

You cannot have a successful website without paying attention to user experience and conversions. The good news is that you now have several examples to help you create the best website layout for your audience.

With clarity, simplicity, and intuitive organization, you’ll soon have one of the top website layouts that makes visitors want to stay, return, tell their friends, and click-to-buy. That’s what having a successful website is all about.

Find out how to make yours one of the best website layouts operating today by trying CrazyEgg free for 30-days. That way, you can let your audience tell you how to improve your layout for the best experience and the most return on your investment.

No Comments

DON’T MISS OUT

Get updates on new articles, webinars and other opportunities:

Rob Wells

Rob has an extensive background in UX and website design. His degree in psychology gives him a unique window into what drives and motivates people to take an action.

NO COMMENTS

Comment Policy

Please join the conversation! We like long and thoughtful communication.
Abrupt comments and gibberish will not be approved. Please, only use your real name, not your business name or keywords. We rarely allow links in your comment.
Finally, please use your favorite personal social media profile for the website field.

SPEAK YOUR MIND

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Show Me My Heatmap

Playing around w/ @CrazyEgg and like it so far. Quick, nice and simple. Also easily implementable with #googletagmanager built-in tag.

Brandon K. Lee

@elBKL

What makes people leave your website?