I just read an article on Neil Patel’s site about design practices.
He hit on some really important points, like visual hierarchy and eye scanning patterns, but today I want to talk about design from a marketing point of view.
We need to bring design and SEO together
I hope I don’t confuse you with this statement, but design is not directly an SEO component. It is an indirect component. Google cannot read your design for its aesthetic appearance. At least not yet! Google can tell some things about your design but it’s not related to how the site looks. It can tell where your menu is, and whether or not you are using titles and headings. It can “see” that you have ads, and if you have a phone number listed. But that is about it. How your site looks, it has no idea.
Google can’t “see” your site design but what Google can tell you is the behavior of the visitor to the site. So, even if all of your on-page SEO is spot on your design may be so completely annoying that people run from your site.
Imagine taking a site that has great SEO already done and change the way it looks so that it appears to be from the 90’s.
The site would no doubt fall in the ratings immediately. Do you think Amazon’s site would perform well if they went back to one of their old designs? I doubt it!
- How is site design different than SEO?
Even though Google can’t read how your site looks it can read visitor behavior. The design has an effect on your SEO in the sense of how your visitors behave when they see your site. Do they share the site? Do they visit other pages? Your visual site design has a direct impact on these factors.
This is why landing pages don’t have menus. It’s not because Google can tell it’s a landing page without a menu, but because visually, for the human, menus are distracting.
- Your Menus and Navigation
Speaking of menus, what is the big deal? Who cares about the menu? You should. As you know visitors scan your site rather than read it. Honestly, the majority of our design techniques comes from this simple fact, that people scan rather than read. However, before I go into how people scan, let’s get back to the menus.
Your most important menu should be at the top of the page. A simple menu at the top of the page should have between 5 and 7 menu items in it. Too many menu items and people lose interest. It doesn’t take much for the user to feel overwhelmed. Like a cable network with 500 plus channels, it is tougher to decide what to watch than a cable network with 3 channels. The network with 500 plus choices creates an anxiety in us. We wonder if we have made the right decision and start to second guess ourselves. We don’t want a visitor to our site to feel that way, do we?
I like the way Brain Games explains this.
Mega menus are another topic altogether and are better left to a discussion by themselves.
- Fixed vs Floating
- Whether your menu is fixed or floating greatly depends on the behavior of your menu. Normally a menu stays at the top of the site as you scroll down. This is perfectly acceptable until you get to mobile versions of your site. In mobile situations, it is a good idea to have the menu stay at the top of the screen so you can get to it no matter how far you have scrolled down. Just make sure the floating menu is not floating over the top of other content and obstructing it.
- You should also check to make sure your mobile menu can be accessed on a mobile device. Sounds obvious, doesn’t it? I have, however, run across situations where the mobile menu was too large to fit the screen and there was no way to scroll down in the menu to see the bottom links in the menu. Google will dock ya for that. 😃
- Breadcrumbs are the little menus generally at the top of posts indicating how you arrived at the post. It should show you what category the post is in and the homepage if you go back to the first level. These are very useful. I don’t know why you wouldn’t use them at this point.
- Left and Right sidebars
- Left and right sidebars roughly rate equally in the scope of things. Benefits are that you can help your visitor find relevant information to the page they are on, and it is a good place for a call to action. The downside to using them is that they distract from the content. So depending on how important your content is you may not what to use them at all.
- Footer menu
- The footer is usually where we find all of the important fine print. This is where we put our terms of service and sitemaps. Like other areas of content, if it is useful go ahead and try to find a place for it, otherwise don’t take up space just to fill it in.
- Social menu
- Social menus are nice to have and in my opinion better than having them follow every post or float along with the site. If you do have them float on the site just make sure they are not floating over important content.
- Maps and addresses
- Phone numbers
Usually, it is best to find room to place these at the top. I have seen sites that place the NAP info into sections that are near the bottom of the site but even then they usually link to it from the top menu. http://e9digital.com/#location for example.
- When you should use one
- When you shouldn’t use one
This may come as a bit of a shock to you, but not all websites need a slider! Oh, the horror!! A changing image at the top of your site can distract visitors. Especially if you are changing the CTA’s or just telling them to click different links.
If you are a photographer, artist, or creative firm I completely understand using a slider and showing off your work, but if you aren’t you should think carefully about whether or not you should use one. You especially don’t want to use them on landingpages. Landingpages need to focus on the CTA and that is all.
What about the content on the Homepage?
- Let me introduce you to two words: Whitespace and the Pareto principle.
Let me see if I can sum this one up for you. The more you ask the user to be choosing things, the less they are going to actually choose things. Does that make sense? No? Okay, let me try again.
80% of the effects of a process come from just 20% of the inputs.
“Pareto had published “Cours d’economie politique” back in 1896. He had observed that 80% of Italy’s land was owned by 20% of the population. He’d also noticed that 20% of the peapods in his garden contained 80% of the peas.”
I could put it this way, 80% of your site’s sales are from 20% of your visitors. Or another way, 20% of your visitors will visit 80% of your site. It’s not exact, of course, but it is close and as a general principle quite telling. If you have a ton of information on your homepage for the user to process, they will process less than if you cut back your content some. It might be a good idea to whittle it down to around 20% so that you can convert that 80%.
Remove some of your content and let your whitespace help people view your content.
Wichita State University did a study that found white space in a design furthers reading comprehension.
When viewers see a huge block of text on a website they tend to leave and most likely never return. Moz and other SEO specialists advise breaking up your content into smaller paragraphs. Neil Patel, the expert on this, almost goes line for line. In addition he uses images often to break up the monotony. He says you should use an image at least every 300 words.
- Blog URL
- Featured Images
When it comes to your blog keep in mind the Pareto principle and try to eliminate junk so that your visitor can focus on what is important. Like I mentioned above use whitespace to your advantage. Keep the distractions to a minimum and break up your content so that it is both easier to scan and take in.
When it comes to the content on your site the two most effective things you can do is use a proper hierarchy and whitespace. The person visiting your site should never have to guess what the most important thing is you are trying to say. This will help in your SEO too. Big time!
Lastly, breaking your content is well laid out grids helps the user process the content on your site. If you are all over the place with your content it will drive your visitor nuts.
Consider this post for instance, it has headings, subheadings, bolded text and bullet points to help you scan the page and comprehend what it is trying to say.
Knowing a little more about design today than you did yesterday is a good start and very useful. I would still recommend hiring a professional designer though, even if you are starting from a template. A designer will have a better understanding of what needs to be changed and how to go about doing that.
If you have any questions feel free to contact us. Ask away.