Design tips

Whenever relevant, link to things that help the visitor reach their goals. On a blog post, that’s often a citation of a source or link to external references. This post links to dozens of articles and studies! But on service pages and on your homepage, you should link away to other sites with care. For any page optimized to convert visitors into leads, ask yourself, do you really want visitors to click on that link? Does it help you reach your goals?

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.

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.

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.

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.

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.

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.

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.

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.