Web design tips

Be careful linking from service pages to blog posts

If the visitor is on a service page, the goal is to convert them into a lead. If you add big opportunities to leave and go read your blog, they’ll land on pages that are less focused on lead generation. Blog posts naturally have more distractions, exits opportunities and lower conversion rates.

Put home on the left, but other than that, don’t worry too much about the order of menu items

If you do have a home link, put it on the left. It’s the most common place for it, so visitors expect to find it there. As far as the rest of the menu items, research shows that the order isn’t all that important. There are two different eye tracking studies that show a low correlation between the order of menu items and success of visitors (source and source). So don’t spend a ton of time worrying about the order of things in your menu.

Be descriptive

Navigation is always visually prominent, so it’s an opportunity to communicate. Visitors typically start their visit by scanning across the header. Anything there, including your menus, are very likely to be seen. Source: UX Movement When the navigation labels are generic, you’ve missed a chance to tell the visitors what you do. Compare these two examples: If your navigation labels are generic, then they are common to thousands or even millions of websites. You’ve missed a chance to leverage website navigation best practices, help your visitors and improve your search rankings.

Optimize email signup forms for subscribers

There’s one at the bottom of this post. It’s a call to action to subscribe. If you look closely, you’ll see that it includes three separate elements. These are the 3 P’s for email signup forms.

  • Prominence It stands out within the visual hierarchy
  • Promise It tells the reader what they’ll get an how often
  • Proof It uses social proof: the number of subscribers or a tiny testimonial When we first experimented with these changes, the conversion rate on the older form was very low, so the improvement was dramatic. We saw a 4,863% increase in email signups. When designing your emails signup form, make it visible, use social proof and tell the readers what they’re going to get.

Use color to guide visitors’ attention toward calls to action

Colors have emotional connotations (red is urgent, blue is calm) and they’re part of brand standards. But they are also opportunities to pull the visitors eye toward buttons and CTAs. A study by Eyequant about button color confirms the power of color and luminance contrast to draw attention. But the study shows that colorful buttons aren’t always effective. If you want your button to be more visually prominent:

  • Contrast the button color with the background
  • Contrast the button color and the button text
  • Contrast the button color with nearby elements on the page (or leave plenty of white space around it) The “Von Restorff Effect” In the 1930s, German scientist Hedwig von Restorff discovered that when shown a list of ten items, people remember items if they are a color different from the others. This is because the occipital lobe is sensitive to visual differences, or “pattern interrupters.” Web marketer Paras Chopra conducted experiments that showed how standout colors aren’t just remembered more, they’re clicked more: 60% more! Pro Tip! Pick an “action color” for all of your links, buttons, and rollover effects. Make it a color that’s distinct from the brand colors used throughout the design (these are the “passive colors”). Use the action color nowhere else but in the clickable items.

Use faces as visual cues

People pictures give you a special opportunity to guide the visitors attention. The famous “you look where they look” phenomenon. When researcher James Breeze showed designs to 106 people, he demonstrated the power of well-positioned faces. They have the power to direct the visitors attention toward other elements. This is the famous study with the baby face. When the baby looks at the camera, visitors look at the baby. When the baby looks at the headline, visitors look at the headline. My friend Oli Gardner is tired of this example with the baby (sorry, Oli!). If anyone knows of other research or good examples, please let me know in the comments! Use a line of sight in face imagery as a directional cue to guide the visitors attention to benefit statements or calls to action.

But avoid stock photos of people

There is a time and place for stock photos, but I would avoid stock photos of people like the plague. They just never feel genuine, therefore they don’t build trust. Companies are tempted by stock photos because the production quality is high. But your visitors care more about reality. They would prefer to see real people who actually work at the company.

Authenticity is more important than polish.

The research backs this up. A study by NN Group found that visitors tune out stock photos of people and “filler” images, but actually look at pictures of real people. So be yourself, show your team and use pictures of real people, even if they are perfectly polished.

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. 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.

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.

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!