Web design tips

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.

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

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.

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 that addresses everything. The page was 20x longer. The conversion rate went up by 30%.

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

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 that you explain what the company does high up on the page, above the fold. Source: Outreach Plus

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

Use arrows as visual Cues

Faces can guide attention, but they aren’t the only way to control the eyes of your visitors. Little hand drawn arrows may be even more effective. In this eye tracking study by CXL found that a simple arrow was even more powerful at getting visitors to look at a page element. If you want your visitors to look at something, point at it with an arrow. I’m not sure if this tip is ridiculously obvious or profoundly insightful.

Organize your product pages

How you organize your product pages is crucial to turning your passive website visitors into paying customers. After all, if your product pages don’t make it easy for customers to find items they want quickly, they’ll end up confusing and frustrating shoppers. Your visitors end up leaving instead of buying from your store. Make it easy for your potential customers to find your products by organizing them into specific categories. For instance, you can add a menu bar to your product pages to allow shoppers to look through product categories quickly. It’s also a great way to give a glimpse into your main products and offers. The Marks & Spencer website is a classic example of this. All the product categories are at the top menu header with the sub-menu shown below. You can also include a search bar feature to make it easier for shoppers to type in specific items and find them on your website quickly. What’s more, you can go a step beyond a search function by creating an app that streamlines finding products on your website for shoppers. You can include highly customized filters for users to find specific items based on the size, variation, and style (among others). Remember to run regular backups of your app codes, data, and other business-critical work items to ensure everything is secure. If you use Azure DevOps to build your app, use automated solutions such as Backrightup. Backrightup lets you automate your Azure DevOps backup so your important data, repositories, codes, etc., are safe and intact. This way, you avoid losing any data in case of accidental deletions or issues, such as server crashes and malware attacks. Regular backups also help you keep your app running properly and smoothly so it doesn’t crash and potentially ruin your customers’ user experience. With a highly customizable product search app, shoppers won’t have to go through all your catalogs to find the particular items they want. It improves the user experience, encouraging them to check out their items (and buy more).

Provide clear navigation paths

If it’s challenging for visitors to browse through your website, let alone find what they want quickly, they’re likely to abandon your site and look elsewhere. This can increase your bounce rates while lowering your conversion opportunities, which isn’t ideal if you want your business to succeed. The solution? Design clear navigation paths to make it easy for potential customers to browse your site — from your landing page to your checkout page. Clear navigation paths simplify navigating your site, making it easier for your visitors to move from one page to the next, and encouraging them to explore more about your products and services. Simplify designing your website’s navigation structure by using top-tier ecommerce platforms for small businesses. For instance, Square Online lets you build and publish your e-commerce website quickly using the platform’s no-code, easy-to-use store builder feature. You can customize ready-made templates designed with eCommerce best practices in mind — including clear, user-friendly navigation paths. With reliable eCommerce website builder solutions, you won’t need to build your website and design your navigation paths from scratch. You can choose a template and customize it as you prefer while ensuring all the necessary navigational cues, elements, and structures are in place.