10 Web Design Mistakes to Avoid | MP 16

Share this content
10 Web Design Mistakes to Avoid | MP 16

How does highlighting your CTA in a specific color across your website improve the user experience? Why is important that you don’t use too many colors and fonts? Why is responsive design important?

In this podcast episode, Sam Carvalho speaks about the 10 design mistakes to avoid.

In This Podcast

Summary

  • 10 web design mistakes

1. Too much going

  • Focus on what’s important
  • Visitors must understand what your site is about within a few seconds of landing on it
  • If your website is really ‘busy’ it takes a while to load. The slower the site, the more likely a user is to leave your page. Google has noted that 3 seconds is the accepted best practice for your website to load.
  • Try and avoid having a variety of fonts and color palettes – try to stick to only using 2 fonts and use 1-2 primary colors and 2-3 accent colors. Make use of your brand style guide to make sure there is consistency.

2. Too little going on

  • Don’t be overly cryptic.
  • Visitors need to know who you are and what your business will do for them.
  • Provide clear direction as to what visitors on your website should do.

3. CTA – call to action

  • This is any button or direction you give on your website that clearly tells visitors what they need to do. Make sure that one of the colors in your color palette really pop, and use this for your CTA so that it stands out across all the pages on your website.
  • The funnel (what you want the person to do on your website) must include as little clicks as possible so that it makes for great user experience

4. Lack of contact info

  • Your ‘contact us’ page should be one click away. It should be a tab in your main navigation or at least visible on every page on your site.
  • Make sure that your contact info is repeated at the bottom of every page on your website.

5. Content and whitespace

Your website visitors have just enough time to read 28 percent of the text on an average web page during an average visit.

  • Pay attention to the fonts you choose and your layout. Make sure that the fonts are easily legible.
  • Typeface/font conveys your brand image, make sure that it is legible and attractive.
  • Make use of white space to guide the eye. Whitespace increases comprehension, improves readability, increases attention, and maximizes clarity. Make sure your white space has a purpose.
  • You can make your text easily scannable by using descriptive subheadings that are either bold or in H1, H2 or H3. Also, use bullet points and numbered lists.
  • Break up large blocks of text so that it is less intimidating.
  • Use visual elements to represent concepts such as infographics
  • SEO: include keywords/phrases in content specifically in your headings. Download the Yoast plugin if you’re using WordPress to help with SEO and readability.
  • Poor grammar, make sure that there are no errors
  • Inexperienced content marketers focus on creating content that’s focused on their business and how great they are. This content ignores visitors’ desires, goals, fears, frustrations, and problems. Create content that addresses the pain of your ideal client but also shows the transformation and solution that you provide.

6. Images

  • They need to be relevant, don’t include images that have nothing to do with the content on the page.
  • Dependent on your brand, include images of people on your website because people relate to people.
  • Try and avoid stock images and make sure they look really authentic.
  • Make sure that your images are high-quality. You can find them here and here.

7. Navigation

  • It must be easy to find and easy to understand.
  • Make use of design conventions. When website logos are centered, it’s 6 times more difficult for visitors to find your home page within a single click. Make sure that your logo is in the top left corner of your page, its clickable and that it redirects back to your home page.
  • The most basic website tabs you should have is about, services (this can be a drop-down of all the services you offer), contact us and blog tabs.
  • Include a search bar.

8. Target audience

  • Create your web design around your target audience and what they would respond to. The look and feel of your website must appeal to your ideal client.
  • Don’t try and speak to too many audiences, map out your niche and stick to that.

9. Responsive design

  • Visitors are viewing your website on desktops, smartphones, iPads so you have to make sure that your website is responsive and will resize to whatever device it is being viewed on.

10. Not answering visitors questions

Your website visitors will arrive with very specific questions they want to be answered and they leave websites that ignore or refuse to answer those questions.

The list of questions varies depending on your industry, but here are a few common questions your visitors have:

  • How do I get in touch with you?
  • What’s the price of your services?
  • Why should I do what you’re asking me to do right now?
  • What’s your privacy policy?
  • What will you do with my information?
  • Where are you located?
  • What makes your company different?
  • Why should I choose your service over a competitor?

If you want your website evaluated click here.

Useful Links:

Meet Sam Carvalho

Samantha Carvalho DesignSam Carvalho is a graphic designer living in Cape Town, South Africa, with over five years of experience in both design and marketing, with a special interest and experience in the start-up environment.

She has been working with Practice of the Practice since 2016 and has helped over 70 therapist entrepreneurs take their practices to the next level by enhancing their visual branding. She loves working with a variety of clients on design-intensive tasks and is always up for a challenge!

Follow Sam on Instagram to see some of her work. To work with Sam, head on over to www.practiceofthepractice.com/branding.

Thanks For Listening!

Feel free to leave a comment below or share this podcast on social media by clicking on one of the social media links below! Alternatively, leave a review on iTunes and subscribe!

Podcast Transcription

[SAM]:
Marketing a Practice podcast is part of the Practice of the Practice podcast network, a network of podcasts seeking to help you market and grow your business and yourself. To hear other podcasts like Beta Male Revolution, Empowered and Unapologetic, Imperfect Thriving, or Faith in Practice, go to practiceofthepractice.com/network.

Welcome to the Marketing a Practice podcast with me, Sam Carvalho, where you will discover everything you need to know about marketing and branding your business. To find out more about how I can help you brand your business, visit www.practiceofthepractice.com/branding. And if you’d like to see some examples of my design work, be sure to follow me on Instagram @samanthacarvalhodesign.

Hi there. Thanks so much for joining me today on the Marketing a Practice podcast. I’m quite excited for today’s episode and I believe it’s going to add a lot of value to you and your private practice. I’m going to be discussing 10 web design mistakes and how to avoid these. So, these are common mistakes that I come across, almost on a weekly basis, and I really feel like people are just ignorant of them. They’re unaware of them. And they really can make a difference to your business and to your overall user experience. So, I’m excited to get going and I hope you will find value from these. So, without further ado, let’s get started.

They are in no particular order, but the first common web mistake that people make is to have too much going on. So, this happens quite often where you’ll land on a website and it is just jam-packed with information, with images, with colors and there’s just way too much going on. So, there’s a few reasons why this is a mistake. And the first and foremost is that you really need to focus on what’s important from the get-go. This is on any page on your website, but specifically your homepage. You need to realize that when visitors land on your website, they need to know within a few seconds, what is going on, what the purpose of your website is, what you can offer them, what they need to do, and things like that. So you really don’t want to have too much going on because obviously, this is going to confuse the person and they’re not going to know what your service offering is or how they can go about obtaining that service.

Another reason to not have too much going on your website is that it takes a while to load. So, this is something that I think a lot of people aren’t aware of. But if you load a lot of images onto your website, specifically high-quality images, those images take up a lot of space and therefore slow down the loading time of your website. And the slower the site, the more likely a user is to bounce. So, when I say bounce, I mean a person leaving your page, and you want to keep your bounce rate as low as possible. So, Google has actually noted that three seconds is the accepted best practice for a website to load. So that means that your homepage needs to load within three seconds of someone landing on it, or they’re likely to bounce. So really, just make sure that you don’t have too many images, or too many files that are big in size that are going to slow down the loading time of your website.

As I mentioned earlier, trying and avoid having a variety of fonts, images, and color palettes. You really want to decide from the beginning. And again, this is where a brand style guide can come in handy, is to decide from the beginning what your color palette is going to be, what your primary colors are going to be, what your accent colors are going to be and what fonts you’re going to use. So, I would recommend not using more than two fonts on your website; maybe having one that you use in headers, and one that you use for body text. And when it comes to colors, really having one or two primary colors, and maybe two or three accent colors. So you want to have a holistic view of your website, you don’t want to just be designing it page by page; you want to make sure that all the pages look consistent, have a consistent look and feel. And this is something that you brand style guide can really help with.

So if you are new to this podcast and haven’t heard me speak about a brand style guide before, your brand style guide is basically a guide that you set up at the beginning of your branding, that first and foremost includes your logo, and what fonts and colors and what the thought behind your logo is. But then it will also include your overall brand identity which includes your vision and your mission, your color scheme, what fonts you want to make use of in other designs. So, it basically is just a guide that makes sure that anything you design thereafter is consistent with your brand. So, this can really help with your website as well; making sure that your developers refer back to it with each new page that they create to make sure that there’s that consistency. But really, just make sure that there’s not too much going on, that your focus point on each page is clear, and that your loading time is quick.

But then on the other side of things, another web design mistake that people make is to have too little going on. So, you kind of want to be somewhere in the middle of these two. So, as you know or you may not know, but minimalism is quite a trend at the moment. And so, a lot of websites are trying to go for a very minimalistic theme, having as little information on as possible. A lot of whitespace. But you don’t want to be overly cryptic. So, you still want visitors to know who you are, and what your business will do for them. And you need to provide clear direction as to what you want them to do on your website. So, you don’t really want to have them guessing or trying to figure out your cryptic messages because you’re trying to be too minimalistic and have too little going on. So again, just try and arrive in the middle of those two things. You don’t want to have too much going on in your website, but you also don’t want to have too little going on – you want to be in the middle.

Then when it comes to your call to action. So this is often referred to as your CTA and it stands for call to action, and this is any button or direction that you give on your website that tells people what you need them to do. So, often it is in the form of a button, which is best practice. So obviously having your ‘Contact Us’ tab and then having your form and having your ‘Submit’ button below that. So again when it comes to deciding on your color palette, I would ensure that one of the colors of your color palette really pop and are a bit brighter and stand out a bit more than the rest of the colors. And then use those for your call to action. But make sure that your call to action, on every page across your website, is then the same color because it can get confusing when you’re using different colors for different call to actions. If you use the same color across your website for your call to action, your user will get to know that when that color appears that is signaling the action; that is signaling the instruction of what they need to do next. And also bear in mind that whatever your funnel is, and when I say funnel, I mean what it is you want the person to do on your website. So if you’re wanting them to sign up for your email course, for example, make sure that the steps that they need to do, the steps that they need to take to get to that result of signing up for your email course, is as little as possible. So, the clicks are as little as possible. So literally having your course as a tab on your main navigation, person clicks there, fills in their details and clicks ‘Submit’. That’s two clicks away from achieving the goal that you want them to achieve. So that’s just some advice about user experience around your call to action.

The fourth web design mistake that a lot of people make on their website is lack of contact info. So again, this is something that is super important for people coming to your website in case they want to get in touch with you. So again, you might have a clear call to action, for example, to sign up to your email course. But if somebody wants to get in touch with you, for whatever reason, that needs to be clear in your website as well. So, your ‘Contact Us’ page should be one click away. So again, it should be a tab in your main navigation or at least visible somewhere on each page of your website, and then you should have your information repeated at the bottom of every page. So just your basic… whatever information, whatever contact information you’re willing to share on your website, for example, your email, your phone, your address, have that in your footer on every page of your website.

So, the fifth web design mistake that people often make when it comes to designing websites is to do with content and whitespace. So, web visitors have just enough time to read 28% of the text on average web page during an average visit. So, this just goes to show how busy people are and how they aren’t able to necessarily consume all the information on one of your web pages, they will most likely only consume 28% of that text. So, you really want to pay attention to the fonts you’re choosing and to the layout of your content. So make sure that the fonts you’re choosing are easily legible, that people don’t have to struggle to read them, that they’re a decent size, and that there is sufficient whitespace around them, making it easier for somebody to read through the text or to know what to focus on. So also bear in mind that your typeface or your font conveys your brand image. So, it needs to be in line with the rest of your branding. It needs to be attractive; it needs to draw your user in and make them want to read the text. And as I mentioned, make use of whitespace to guide their eye around your website and around what they need to focus on. So, whitespace increases comprehension, it improves readability, it increases attention and it maximizes clarity. So, make sure that your whitespace has purpose and that it shows the user what they need to focus on.

And then make your text easily scannable. You can do this by using descriptive subheadings that are either bolded or in headers one, two or three. So, if you are making use of a WordPress website, for example, in the back end, when you’re creating a page or post, you’ll see you have options to use different headers. This helps for [unclear] as well. But it also helps with the layout of the page so that it’s easily scannable. So, people can see what the headings are. And they can just focus on the headings that relate to them in that moment. And then also make use of bullet points and numbered lists. Don’t have large blocks of text with a lot of content in them. This is very intimidating for a user landing on your page, and immediately they’ll feel that they don’t have enough time to get through all of that content. So you want to break up those large blocks of text into more bite-sized pieces of content, and then also use visual elements to represent concepts, so you don’t necessarily always need to make use of content. Although, having said that, having a decent amount of content on each page is important for SEO. But from a user perspective, you really don’t want to overdo it. And you can make use of visual elements, or infographics, or images to communicate what you’re trying to.

And then from an SEO perspective, as I said, include a decent amount of text, but then also include keywords and key phrases in your content, specifically in your headings. And for those of you who have WordPress, you can download Yoast as a plugin. This is to help with your SEO, and this will show you on each page or post that you create what your SEO ‘mark’ is. So, it will show you green if you have made use of a sufficient number of keywords, if you’ve included small paragraphs, things like that. And what’s nice about the Yoast plugin is it also deals with readability. So, it doesn’t only deal with SEO, but it shows the user friendliness of that page as well.

And then finally, check your grammar and make sure that everything makes sense. Make sure there are no spelling errors. That is obviously something that will immediately take away from your credibility. So even if you’ve had a copywriter write your content, that would be first prize, but otherwise have friends or family read over your content and make sure that there are no spelling errors.

And one last thing to do with your content is to make sure that it focuses on your visitors’ desires, goals, fears, frustrations, and problems. So, you really want to create content that addresses the pain of your ideal client, but then also shows the transformation and solution that you provide. So, you don’t want to just be going on about yourself, or your business, or your brand. You want to focus on your client and on drawing them in and on acknowledging their pain and showing how you relate to that, and how you can help them through it.

So, the sixth web design mistake has to do with images, and this is something that I’ve addressed in a previous episode. But to just quickly run through it, images need to be relevant. So, it doesn’t help to include images just for the sake of including them, and then they have nothing to do with the content on that page. I would really make sure that if it’s not completely necessary to include an image on that page, then rather just don’t. Only include an image if it really adds value to whatever the content on that page is about. And I often say that I prefer to have people in the images that you’re including. Again, this depends on your brand identity and on the image that you’re trying to portray. But I would say people relate to people. So, someone coming to your website who’s maybe struggling in their marriage and seeing pictures of happy couples, that is something that is going to draw them in because that’s the solution that they want. But having said that, try and avoid stock images. So, you don’t want, you know, the stock images that appear on every second website or the stock images that are quite inauthentic. And that show fake smiles, you really want to try and find as authentic as possible images and make sure that these are high quality. So, two places that you can go which offer free images, free high-quality images that are quite authentic, is pexels.com and unsplash.com. So, both of those links will be in the show notes. And those are great websites to find images for your website on.

The seventh website mistake, and this is so, so important, has to do with your navigation. So, a lot of people when designing a website, will want to create a website that stands out and that is different from the rest. and you’ll therefore try and make use of a navigation that is different from the rest. This might mean hiding your navigation or having it appear on the left or on the right, or just kind of making use of something that isn’t the norm. So as much as I am on board with creating something that stands out and is different from the rest, I highly advise against doing this when it comes to website navigation. So, there are certain design conventions, conventions that you need to stick with when it comes to web design. And one of those is navigation. So, you will notice that on pretty much every website that you go on, the navigation exists at the top of the website, and you have your logo on the left. And they’ve actually found that when logos are centered, it’s six times more difficult for visitors to find your homepage within a single click. So, it’s just become known within the web world that logos appear on the left, and that you can just simply click on them to go back to your homepage. And that’s something else that I’ve found sometimes is people will have that logo on the left, but it’s not clickable, and it doesn’t go back to the homepage. And if you click it, it will maybe sometimes just open the image of your logo. So, make sure that your logo’s on the left, that it’s clickable, that it goes back to your home page, and that the rest of your navigation appears at the top of your page next to your logo.

And when it comes to navigation, you want to keep this as simple as possible. You don’t want to have a million tabs lined at the top, because again, that goes back to our first point of having too much going on and of confusing a visitor. So, you really just want to have some basic website tabs. Again, convention speaks to having ‘Home’ – although you don’t need to have this if you have your logo on the left – then having ‘About’, having ‘Services’ and within services, you can list your services. So, if you have more than one service offering, you don’t need to have a tab for each within your main navigation, you can have a drop down menu underneath your service tab that then lists all of those services. Then you can have a ‘Contact Us’ page, maybe a blog page. Those are literally the main simplest form of navigation that you actually need. And also, be sure to include a search bar. So, a lot of people these days when they arrive on a website will try to search for something. This is specifically true when it comes to blogs, for example; they may have read a blog post on your website, and they now want to get back to that and so they’re going to try and search for it. And obviously, this is difficult if you don’t have a search bar. So really try and make sure that you include a search bar on your website.

Then the eighth website design mistake has to do with your target audience. So, I mentioned this a little bit earlier, but again, just to reiterate that, you need to create your web design around your target audience and around what they would respond to. So, the look and feel of your website must appeal to your ideal client. So that comes down to the font that you’re using, the colors that you’re using, the images that you’re using, the content that you’re using, and how you’re writing certain things and how you’re portraying certain things, all needs to appeal to your ideal client. And that’s something again, that you can map out in your brand style guide right in the beginning, before you even start your web design, is you can map out who your ideal client is, and then make sure that anything that gets designed after that point appeals to that target audience. So, this basically includes the difference between a website that appears highly professional versus one that looks more trendy and hip versus one that is more fun and bubbly. And this is something that will carry through to your office environment, for example. So, if your office environment is one that is quite corporate, then you want to ensure that your website has that same corporate look and feel. But if your office is more trendy and hip, you want to make sure that your website design portrays that trendy and hip style. And don’t try and speak to too many audiences. So, you really want to map out your ideal client and your niche and ensure that you stick to that. So, if you are counseling moms specifically, then you want to only be speaking to moms on your website. So, you want to only have feminine design, and, you know, feminine imagery, things like that. You don’t want to then include anything that’s going to appeal to males because that’s not your target audience. So really, just make sure that you narrow down who it is you want to be speaking to, and make sure that all design elements of your website speak to that person.

Then the second last website mistake has to do with responsive design. So, these days 50% at least, of people are researching on their mobile devices, whether that be a smartphone or an iPad. So, you need to make sure that your website is responsive, which means that it will downsize, or it will resize according to whatever device it is being viewed on. So, you may have come across websites before on your mobile phone, where you need to scroll to the right in order to see all the information, or in order to see the whole image. So you really want to avoid that and want to make sure that if someone is viewing your website on a mobile device, everything is resized accordingly, the information is reorganized so that it’s a seamless experience, and that’s so that they can scroll through so that they can clearly see everything. Most web developers these days will ensure that a mobile version of your web design is included in the package, but just make sure of this from the get-go and ensure that your website looks just as good on a mobile as it does on a desktop.

And finally, the last web design mistake, and this has a bit to do with your target audience, is not answering your visitors’ questions. So, when designing your website, know from the get-go what questions people are going to have when they arrive. And remember, we said earlier that within a few seconds, they need to know who you are and what you’re offering and what you want from them. So, web visitors arrive with very specific questions they want answered, and they leave websites that ignore or refuse to answer those questions. So obviously, these questions depend on your industry and your service offering. But here are a few common questions that visitors may have when arriving on your website. First, how do I get in touch with you? What is the price of your services? Why should I do what you’re asking me to do right now? What’s your Privacy Policy? What will you do with my information? Where are you located? What makes your company different? And why should I choose your service over a competitor? So those are some really important questions to keep in mind when designing your website, specifically when it comes to your call to action, when it comes to navigation, when it comes to including your contact information in the footer, basically everything that we’ve discussed, to help your viewers answer those questions as soon as possible.

So that’s it, guys. I hope you have found value in this. To review any of the things that I’ve discussed, be sure to check out the show notes of this episode. And also, for those who are interested, I do offer a website evaluation service. If you head over to practiceofthepractice.com/websiteevaluation you can read more about this, but basically I provide a 30 minute video which evaluates your website and basically, just shows you what you’re doing right and what you’re doing wrong and how you can improve on that. So, if that’s something that you’re interested in, be sure to head on over to practiceofthepractice.com/websiteevaluation and I’d be happy to help you out.

Thanks for listening to the Marketing a Practice podcast. If you need help with branding your business, whether it be a new logo, rebrand, or you simply want to have a print file designed, head on over to www.practiceofthepractice.com/branding. And if you’d like to see some examples of my design work, be sure to follow me on Instagram @samanthacarvalhodesign.

Finally, please subscribe, rate, and review this podcast on iTunes if you like what you’ve heard. Talk to you soon.

This podcast is designed to provide accurate and authoritative information in regard to the subject matter covered. It is given with the understanding that neither the host, the publisher, or the guests, are rendering legal, accounting, clinical, or any other professional information. If you want a professional, you should find one.