Web design mistakes that cost you leads
Great content works hand in hand with a well designed, user friendly website to boost traffic and sales. In a well designed and easy to use site, the design features captivate and engage the user, encouraging further exploration of the site, including its content.
How can you ensure that your website design and usability is creating a positive first impression? Below, we discuss 8 design and usability faux pas that might be costing you leads, and how to address them on your website.
1. Confusing navigation
If people are getting lost in your pages or frustrated trying to find information, chances are they’ll be leaving your website before you have the opportunity to ‘wow’ them with your great content.
Consider doing a website audit and think about each page strategically. We recommend recruiting an honest friend, colleague or family member who hasn’t visited your site before to look for specific content within it. If it’s difficult for them to find what they’re looking for, or they get lost in your site, you may need to think about how this can be improved.
When evaluating your site structure, consider the following:
- Are your main navigation menu titles and page names indicative of the content within them?
- Do you have a clear, easy to read navigation menu in a spot that visitors can find (usually at the top of the page).
- Can visitors easily navigate between pages and find their way back to the homepage.
- Do your links tell the user where they are going. For example instead of saying ‘click here to find out more’, you could say ‘visit our products page to find out more’. This tells the user exactly where they are going, rather than following a mystery link.
- If your website has a lot of inner pages, for example an e-commerce website, do you have ‘breadcrumbs’ or link trails to show where a user is on your website. For example let’s say you’re a shoe retailer. You could include a trail at the top of your page that showed ‘Shoes > Women’s Shoes > Running > Nike’. Looking at the breadcrumb, it’s very clear where you are on the site and you can easily navigate between pages.
- Does each page serve a distinct purpose and provide unique information to your site visitor? If you’re designing each page with a single purpose, not only will it be easier to write content, you’ll be able to direct the user’s attention with a clear call to action.
- Could you consolidate pages? Your site is not better or worse for having more or less pages. In fact, people on your site want to be able to access content with the fewest number of clicks, so don’t bury your best content 10 pages deep. Consider if it makes sense to consolidate or merge content, or alternatively, to split one long page into two separate subject pages.
- Beware of broken links, especially if they are linking externally. You don’t want to send your visitors to pages that no longer exist.
2. Slow loading website
People are impatient. They are busy and they want instant information. If your web pages are taking any longer than 4 seconds to load, chances areyour visitors are clicking furiously on the back button.
If angry customers and lower conversion rates aren’t enough to motivate youto improve your load speeds, consider that Google’s search engine ranking algorithm favours websites with faster loading times. This is becausesites that load quickly offer visitors a better onsite experience.
There are a number of tools on the web that you can use to test your pageloading times including Google’s PageSpeed Insights. This site also givesyou some suggestions on how to fix your page load time on both mobile and desktop.Some of the common items that slow page load times is the use of Flash anduploading large images that haven’t been compressed.
If your website is slow to load, figure out what’scausing the hold-up so you can source a solution as soon as possible.
3. Your website isn’t mobile friendly
Australians own, on average, three internet enabled devices. The most popular device is a laptop (75%) followed by smartphones (70%) and tablets (55%) (Sensis, 2015). While desktops are still preferred for browsing online, approximately 70% of Australians browse the internet on mobile phones and50% use a tablet (ACMA, 2014).
A 2012 Google study into ‘What Users Want From Mobile Sites’ found that96% of consumers had encountered sites that weren’t designed for mobile. In instances where this occurred, 48% reported feeling frustrated or annoyed. The same study found that 50% of people said that even if they like a business, they will use them less often if the website isn’t mobile-friendly. The trend towards using mobile devices to browse the internet is accelerating with better screen quality, faster internet connections and widespread availability of wifi networks making it easier to browse on handheld devices.
For business owners and marketers, this means that your website needs to begood-looking on desktop and on mobile. The problem with many older websites is that they were never built to beviewed on a mobile device. When you do view them on mobile, the result isn’t pretty – huge images, slow loading times, tiny text and lots of pinching and scrolling! If you’re not sure if your website is mobile friendly you can use Google’s Mobile-Friendly Test, or take a look at your website on a smartphoneto check. If you’re doing a lot of pinching and zooming to see content, chances are it’s not mobile friendly.
So, how do you get yourself a mobile friendly site? There are three ways webdesigners can go about it. The first is called ‘Dynamic Serving’. This uses the same URL as the original website, but changes the HTML code when a mobile device is detected. The second method uses a different URL to redirect users to a separate,mobile version of the website that best fits their device.
The final way to make your site mobile friendly is to create one website that is ‘responsive’. A responsive website is able to detect the size of the screen it isbeing viewed on and adjust text, images and layouts to fit based on predefined breakpoints and fluid grids. We prefer responsive technology because it can adjust to any screen size,which provides a degree of future proofing for new technologies, so yourwebsite will still look great on the screens of yet to be released products.
4. There’s no space
White space (also referred to as negative space) can make or break a design. It’s comparable to the full stops, commasand breaks in sentences, or the pauses in a speech. It gives the viewer a chance to process information and separate content in their mind.
White space doesn’t necessarily have to be vast areas of space and it doesn’t literally have to be white. It canbe the spacing between letters and lines as well.
Some website owners seeempty space on their site and think ‘why am I not using this space to promotemy products and services?’, or ‘why is that space empty?’
While ‘nothingness’ might not seem to have purpose, it can be incredibly effective in:
- Improving the legibility and comprehension of site content
- Drawing attention to certain elements on a page
- Creating a sophisticated, ‘high end’ or luxury feel
- Creating balance in a site layout
So, keep in mind that you don’t need to stuff content into every nook and crevice in your site.
5. Wasting ‘above the fold’ real estate
‘Above the fold’ refers to the content in your web design that is visible in abrowser when the page first loads. While research shows that people are definitely willing to scroll down a page,above the fold content is important in making a great first impression. People are trying to determine whether your site is worth exploring, so givethem content above the fold that helps them to quickly and easily see why you’re worth their attention.
Here are a few things to consider when deciding what to put above thefold:
- Include compelling value propositions and content. Your aim for abovethe fold content is to encourage visitors to explore the rest of the page, so think about your content strategically and make it count.
- Don’t cram information into the fold. Pick select pieces of information, or avaluable call to action (where appropriate) for this section of your website. You’re better off having one concise message above the fold than fourdifferent messages competing for attention.
- It doesn’t have to include a call to action (but it can). If you have a simplevalue proposition or a product or service that is easy to grasp, a call toaction may be well suited to a placement above the fold. However, if yourproduct or service needs a little bit more explanation, you may be better offintriguing your visitor with a great value proposition and including a call to action further down the page, once they know more about your offering.
- Don’t create a ‘false bottom’. This is where it looks like the contentabove the fold is all that’s on the page. This is problematic because it willcause visitors to scroll less often. Using directional cues or creating subtlechanges in layout can avoid this problem.
6. Using off-brand imagery and colours
One of the best ways to set the tone for your website is through some well selected imagery and a brand colour palette. Here’s some tips for ensuring your images arebeautiful, on brand and effective:
- Be consistent, consider your brand style. Your brand should ideally have a ‘style guide’ or ‘graphic standards manual’ that includes the photography treatments and types of images you should use. If you don’t have one, try and be consistent with the style of images youchoose across your site. For example, you might only use black and whiteimages or only hand drawn vector illustrations.
- The lighting, composition, subject matter, hue and contrast in your imagery are all responsible for setting the website tone and communicating your brandmessage. These need to be consistently applied across all of your marketingtouchpoints, because your brand is only as good as your application of it inevery piece of collateral you present to the public. For this reason, we highly recommend getting a designer to build a style guide for your brand.
- When choosing a button colour for a call to action, ensure it is a bright,contrasting colour to command attention on the page.
- Try not to use too many colours on your site. Create a colour palette ofa few main colours, tints or shades and use them across your site. Notonly will this help to build your brand consistency, but when you introducea different colour for your call to action, it will attract a lot of attention. If everything is colourful, the visitor won’t know where to focus their attention.
7. Typeface blunders
One of the easiest ways to makeyour website look better is to clean up the number and type of fonts on yourwebsite. Here are some tips to guide you:
- If you have to use them, reserve the ‘fun’ fonts (curly, scripty, handwritten)for headings and keep the body copy clean and simple.
- Your font size should be readable but not overbearingly big. Most webdesigners agree that 14pt – 18pt works best for body copy on a websitedepending on the font you’re using. While 12pt might be the standard inMS Word, it is not the standard on web.
- Use consistent heading styles. If you use a template website, or havehad someone custom design it for you, you’ll see predefined styles likeHeading 1 (H1) or Heading 2 (H2). Ensure you’re always using thesestyles on your website to maintain consistency across your site.
- Keep the number of fonts to a minimum. Unless you are a very experienced designer, try and pick 1-2 main fonts and use colour andtypographical emphasis (bold, italics) for headings.
8. Annoying pop-ups
Pages that show intrusive interstitials provide a poorer experience to users than other pages where content is immediately accessible. This can be problematic on mobile devices where screens are often smaller. To improve the mobile search experience, after January 10, 2017, pages where content is not easily accessible to a user on the transition from the mobile search results may not rank as highly.
Here are some examples of techniques that make content less accessible to a user:
- Showing a popup that covers the main content, either immediately after the user navigates to a page from the search results, or while they are looking through the page.
- Displaying a standalone interstitial that the user has to dismiss before accessing the main content.
- Using a layout where the above-the-fold portion of the page appears similar to a standalone interstitial, but the original content has been inlined underneath the fold.