10 Highly Effective Web Design Tips Backed by Research

 

The Structural Layout of the Website

Websites are two things: containers and content. The container is two things: structure and style. Let’s start with the first. These tips are about the structure and layout of the pages.

1. Leverage a visual hierarchy

Every page has a visual hierarchy. If you’re not familiar with that concept, here’s our definition:

Visual hierarchy refers to the arrangement, size, color and contrast of visual elements. It determines their relative prominence and the order in which they are seen by the human eye.

Web design services use visual hierarchy to guide visitors attention to important elements first. The website layout includes the position (high or low on the page), sizes (big or small), visuals (video, images, icons) and contrast (color and white space).

Combining aspects multiplies their effect. Everyone will see a large video, high on the page. Few people will see low contrast text surrounded by images.

Visual hierarchy is why your eyes follow a certain path on every page you visit on the internet. When used deliberately, it guides the visitor’s attention through a series of messages, toward a call to action.

2. Use a descriptive, keyphrase-focused headline high on the homepage

The headline on the top of the homepage (and every page) is either descriptive or not. If not, the visitor may not be able to answer their first question: “Am I in the right place?”

It’s also an opportunity to use a target keyphrase and indicate relevance. But a lot of marketers write something clever or vague instead. But clear is better than clever.

Rather than write a fancy, but vague headline, write something descriptive. Make sure web design company that you explain what the company does high up on the page, above the fold.

Source: Outreach Plus

Wait, the fold is still a thing?

Yes, there is a fold. For every visit on every screen, there is a viewable area. At the bottom is the famous fold. To see anything below this line, that visitor must scroll.

Why and if this matters in web design is a hotly debated topic. Here are two of the best arguments: “There is no fold!“ vs “The fold still matters.”

Of course, there are thousands of screen sizes, ranging from tiny to huge. This website was viewed on 958 different sized screens in the last month. So some designers say the fold is no longer relevant.

But here’s the bottom line (get it?) There is still a fold for every visit and still an average fold for all visits. Tools like Hotjar show it clearly as a line in the scroll heatmap, for desktop/laptop, mobile and tablet.

So yes, there’s a fold and it matters what you put above and below it. One study showed that visitors spend 80% of their time above the fold.

So put your value proposition, that 8-word version of what you do, high on the page, above the fold.

3. But don’t put all of your calls to action at the top

Visitors may be spending more time there, but that doesn’t mean that they’re ready to take action. A lot of persuasion happens farther down the page here web development services.

When Chartbeat analyzed 25 million visits they found that most engagement happens below the fold. Content at the top may be visible, it’s not necessarily going to be the most effective place to put your calls to action.

One caveat about this frequently-cited study: Chartbeat is used mostly by news websites, which are very different from marketing websites. No one does much above the fold on a news website! Normal web design tips don’t apply.

Make sure to put calls to action farther down the page, in any place where interest is likely to be high.

4. Make it a tall page. Answer all your visitors’ questions.

More pixels means more space to answer questions, address objections and add supportive evidence. If the visitor doesn’t find an answer to an important question, they can simply keep moving down the page. Once they are satisfied, they’ll simply stop reading.

The most effective sales pages emulate sales conversations.

You would never cut someone off during a sales meeting and stop answering their questions, would you? That’s all a short page does; it stops answering questions.

Here’s where the famous study from Crazy Egg comes in. They surveyed their audience, discovered their top questions and concerns, and built a tall page Digital marketing services that addresses everything.

5. Show one thing at a time

“I like clean, modern designs.” That’s what most of our clients tell us when we begin web design projects. They often refer to Apple’s website as an example.

Visitors don’t like clutter. We like whitespace. In other words, we like low visual complexity.

In 2012, Google set out to discover what types of websites are seen as beautiful to visitors. It’s a study about simplicity with a very complicated name: The role of visual complexity and prototypicality regarding first impression of websites: Working towards understanding aesthetic judgments.

They learned that more complex designs are less likely to be perceived as beautiful.

This explains the trend toward single column layouts and tall pages. Designs with multiple columns (left side navigation, content area, right rail) are more complex, with more visual elements within the visitors field of vision.

So cut the clutter. Make one of two elements the focus at each scroll depth.

6. Stick to standard layouts

That same study by Google found that “high prototypicality” also correlates with perceived beauty. In other words, weird isn’t usually pretty. A website that follows web design standards is more likely to be loved.

The sites considered the most beautiful have both high prototypicality and low visual complexity. They are both simple and clean.

Think of it this way, it’s good to differentiate your brand, but the layout isn’t the place to do it. Be different in WHAT you say. But be typical in HOW your site is used.

Some cars look amazing. They’re different. They’re beautiful. But they still have doors on the sides, wheels on the bottom and headlights in front.

But what’s standard? According to our own research, these are the standard elements for a website:

The “standard” website with high prototypicality includes the following:

• Logo in the top left
• Horizontal navigation in the header
• Search bar at the top
• Social icons at the bottom
• Mobile responsive design

7. Beware of “false bottoms”

Modern marketing websites, especially the sales pages, are built with page blocks. These are rows of content, often with an image on one side and text on the other, flowing down the page in a single column.

Here’s the anatomy of a typical service page on a lead generation website.

As the diagram shows, the footer has a darker background color. So many sites do this that visitors now expect that a switch to a darker background means the bottom of the page.

But if the design has a pageblock with a dark background, the visitor might think they’ve hit the bottom and stop scrolling. It’s a false bottom.

Note: I debate with my own designers about this one. Kurt Cruse, our creative director, makes an excellent point. Changes in background color is an excellent way to let visitors know that the type of content is changing. I hear you, Kurt!

Just be deliberate when selecting background colors for page blocks. To be safe, choose only slight variations or just always use white or light gray. Then switch to dark gray or black in the footer.

8. Avoid carousels and rotating sliders

They’ve been popular for years and clients love them. But there is a problem with the homepage slideshow: visitors might only see the first slide.

There have been a lot of studies that come to the same conclusion. Messages on subsequent slides are less likely to be seen and calls to action are unlikely to be clicked. Just look at the click through rates for the slides on a university website.

They may be popular because they’re easy to get approved. Different stakeholders from different departments all get some pixels above the fold. They’re good for internal politics, not for visitors.

Homepage slideshows are good at keeping people from stabbing each other in conference rooms.

So what to do instead?

• Stack the slides, so the visitor can see each by scrolling down the page. They will suddenly become much more visible.
• Use a featured image, using the one most impactful slide as the hero. Give it a good call to action!

9. Avoid tabs and accordions

Here’s another way to take things out of hiding: avoid tabs and expandable boxes of content.

Knowing that up to 76% of website visitors are scanning, you can make your content more visible to them by keeping it all exposed, with no need to click to reveal something.

If tabs and expandable accordions were effective, you’ll probably see them on Amazon.

Remember, scrolling is faster and easier than clicking. If the visitors have to aim and click or tab to be able to view something, they are less likely to see it.

Images

Let’s move on to the visuals. These tips are specific to the pictures on web pages.

10. Use people pictures

Faces are uniquely powerful imagery. From the time we are born, we gaze at faces more anything else. The magnetic power of people pictures is very useful in web design company in Hyderabad.

Not only do faces draw attention, they correlate with conversion. The famous case study by Basecamp showed a huge lift in results when faces and testimonials were combined on a sales page.

Make sure your website doesn’t look like an “abandoned spaceship” without a soul onboard.

I’ve talked to thousands of businesses about their marketing over the years and I’ve noticed a pattern. Big companies are always trying to look small, and small companies are trying to look big. Strange, right?

Really, every company should just try to be more personal, more human.