Improve The Design Of Your Website: Menus – Links – Sitemap



Good morning, internet fans! Ryan Perry here, Simple Biz Support. Today is Thursday, June 2nd. Therefore, it is Internet Marketing Thursday. As usual, I have Virginie Dorn, the CEO of Business Website Center in Petaluma, California. Good morning, Virginie.

Virginie Dorn: Good morning, Mr. Perry. How are you today?

RP: I’m doing very well, thank you. After this show, you’re going to be taking three weeks off visiting family, so I’ve got to find a substitute for you. Iin this show, we’re finishing up a three-part series on how to essentially do a makeover on your website without having to overhaul the entire website.

VD: Yes. This show is quite popular, because those changes are so easy and quick and affordable to make. If your budget is not quite ready for a brand new website, just go back to the last two weeks and listen to us today. ‘Cause again, super easy changes. Some of them you can make on your own if you have a content management system. Others, you might have to give to your web designer. But again, very affordable, and they can make a great difference in the efficiency of your website.

RP: Yeah, and the one other thing that we talked about in the other episodes is that if your website’s a couple years old, maybe it doesn’t need a complete overhaul, but just refreshing and re-evaluating. I know for me at least, whenever I create something, I need to kind of like look at it again a week, two weeks later, and I get a different sense of how it truly looks. ‘Cause I think part of it is, it’s kind of like buying a new car. You’re so excited, you get the new car and everything’s great, or even buying a house. And it’s like everything’s great, and then you move in or you start driving it and you start noticing, “Ah, the seat doesn’t feel exactly right” or, “Wow, I didn’t realize there was this hole in the wall.” Because we’re so excited, we want everything to be positive, and we want it all be great.

RP: Then sometimes a week, maybe a month later, we start recognizing, “Oh you know what? Maybe that doesn’t really work.” But we get… But we’re kind of like, “Well, we’re done with it. We just created this whole new website, we spent all this time, money, and energy on it, and we go, “Ack.” So, if that was you a couple of years ago, this is a great time to re-evaluate. We’ve got a three-part series. I have links for the first and second video below. And then you’re watching this video, so we should probably just move in to the three items that you want to tackle in today’s episode.

VD: Yes. Today, we’ll talk about menus, links, and site map. We’ll get started with navigational menu. And by this, we mean the top bar is most often available at the top of every page of most websites. So this is how you redirect clients or visitors to different pages within your site. The first key to a successful menu is to be succinct. And you and I had some laughs about clients wanting to really explain what the menu was about. For instance, “This is a link about our company profile.” Truly, you can stick to ‘About’ and people would know, then clicking on the ‘About’ menu will take you to the company profile’s page. So again, re-consider, try to keep it to one or two words, make it succinct. It gives it that clean and airy appearance, making the web pages look much more organized. It’s also faster for your visitors to read those menus at a glance, because they don’t have to read that many words. “About. Oh, about us page.” Or maybe team. “Oh, the Team page.” And again, these slight changes, revisiting how you have put your menus together in the past can make a great difference in the success of your site.

RP: Yeah, I was going to say, the other thing I like about using the short words and minimizing the number of items that you have in the top menu is also when we talked about white space in the previous episode. That includes the menu. When you pack everything together, it’s hard to separate sometimes. Either that, or the menu will wrap around to a second layer, and you only have like two words on the second layer. Then you’ve just got this bar. If it’s a white bar, you got this white bar of all this empty space, it just doesn’t look good. So keeping everything short and sweet. And then also, like you talked about, if you have too much information there, it actually becomes overwhelming. And as hopefully, you know by now, people’s brains turn off when they get overwhelmed. And if the menu bar is overwhelming and your website information is overwhelming ’cause you’re trying to cram everything your website or your company does on the home page, you’re just going to shut people down. You’re not going to get that phone call, or that conversion that you’re looking for from your website.

VD: That’s true. We actually like to recommend no more than four menus in addition to the home and contact menus. So by this, we mean four criteria, four sections of your website. We do like to have a home button on the left and a contact button on the right, so that makes it a total of six. And if you want to not have the home and contact links, you’re taking a high risk to annoy your visitors. Because there are some internet standards that have come to life, and you have to respect those. People expect a contact link somewhere on the right side. They expect to be able to click somewhere on your left side of the page, back to the home page. You do it any differently, you’re taking a high risk of frustrating them and losing the attention of your visitors.

VD: Again, home, four main links, maybe some really nice and clean drop down menus, and then a link to the contact form. It’s also a simple reorganization of the menus within your drop down menus can make a huge difference. Maybe you have too many, maybe you don’t have enough, maybe the menus are a little bit weird. One menu has like 10 links and the other one only has one. Really, try to create some balance, and revisit the order of importance to you and to your visitors. Try to put what they want, and what you want them to go to, more towards the top of the menu for instance. So again, very simple reorganization, very quick to do, huge difference in your website.

RP: Definitely. I’m glad you talked about the sub-menu, ’cause I’m sure there’s a lot of people going, “How can I fit only four links plus the home and the contact?” You do that through your sub-menu. With your main menu and your sub-menu, it’s all about order of importance. If you want to know what that order is, you go to your Google Analytics, and they actually have a flow chart that will show you how many… And it’s graphical. So, this is your home page. If there’s 100 people, it’ll show this. And then if 25% went to this page, it’ll show it. Then if 10% went here and 10% went here. You can actually see where people flow, and that can dictate where you put items on the menu because we’re used to finding the most… The most important items should always be at the top, and to the left, and it just helps steer people easier through your website.

VD: Yes. It’s all about nurturing them to where they want to go. And that takes us to the second item for today, which are the links. The link can be in the menu of course, but it also can be on top of one single word, multiple words, an entire paragraph, but also an image, or even a video. So you can make all this element clickable, meaning linking to another page. Now when it comes to a text and if it’s a text within its own paragraph, make sure it’s distinctive than it is in the menu, and it’s linked. If you make the text exactly the same color and same font size as the rest of the text within the page, your visitor will not know it’s a linked item. So the old-fashioned way of underlining or bolding that element really gives it an indication to your visitors, then they can click there to be redirected. Or another old-school technique but still works great is to actually say, “Click here to visit our testimonial page.” It’s very clearly, when you can click here and it takes you to testimonials. So again, just revisit each page on your website and take a look at if you are missing a link, have too many, and if you have them, are they clearly indicated on the page?

RP: If it makes sense for the style of your website. If those clickable links… That text clickable link is actually the color blue. That is also beneficial. Typically, blue and underline, that’s the… You talked about standards, what people have expectations. Any time I see any text that’s blue and underlined, I automatically make an assumption that it’s a clickable link so subconsciously, “Oh, okay, I can go ahead and check it out.” Some websites, that may not work. I’ve seen people play with different colors. It needs to be a good contrast, not only between the background color, but the other font color that you’re using, so that it’s very distinguishable, that it’s a clickable link.

VD: Yes. Here, we just take the primary color of our client’s branding portfolio. So if the dark red is their color, the links will be dark red and bolded and sometimes underlined. So again, to clearly indicate that this text or this element is clickable. In terms of images, too, remember it’s very good to make images clickable, but you have to also indicate, if you click on the image, it takes you elsewhere. So an easy way is to put a link, like a chain icon, which has become also an internet standard. It looks like two chains are hooked together. And this indicates to visitors, you can click here and it’ll take you to whatever, portfolio page, contact page. Sometimes you can make the click icon as part of a photography of the image or the graphic, and you can do that in Photoshop.

RP: I’m sorry. I was going to say, that’s really important. Especially, what I consider a classic webpage these days, where you have the hero image, and then you’ve got maybe three elements underneath, and there’s text. So there’s an image, there’s text, image, text, image, text. And it might say at the end of the text, it’ll say, “Read more.” But a lot of people will click on that image. Especially if you’re selling something, if it’s motorcycles, cars and trucks. Well, I want a bike, so I’m going to click on the image. If that’s not a clickable link, that could be frustrating for your end-users. And one way to find out if people are clicking on that is to install a heat map on your website that actually measures clicks. It’ll actually tell you where people click on your website, and the more they click, it changes colors. It goes from like a blue to a white. And then there’s orange and reds, and yellows in between to let you know where people are clicking. Websites like Crazy Egg, that’s what I use for all my clients. I put a heat map on, so I can actually see where people are clicking to make sure that the design idea, the way we laid out the menu and all the clickable links, that people are actually clicking on it on those, and not something else that we were not expecting.

VD: That’s a very good recommendation. Crazy Egg, love them too. Very great data. If you get at least 100 visitors a day, you should highlight it on your website. It means you have a pretty successful website, and you need to monitor it. If you don’t know where they want to click, you don’t know where to put the attention on.

RP: Yeah, definitely. And then number three is going to be site map. When I always think of site map, I think of uploading site map to Google Search Console. I had to think about that ’cause I still have Webmaster Tools stuck in my head, but I always want to upload the site map and make sure Google knows all the pages.

VD: Yes. So there’s two kinds of site map that little… It’s actually an XML file that you put on your server and it tells the search engines what to index, what not to index, very useful for search engine optimization. Today, we’re talking about the site map, which is the overall organization of your website. How do the pages interact with each other? How are they connected? Are you organically and easily moving your visitors from page to page that makes sense to them and to your company? So the overall site map, it has a lot to do with the menu we discussed earlier on today. But again, it’s for you to step back and take a look at it. And if you’re trying to get people to your e-commerce shopping cart, and they have to click through many clicks to get there, you really don’t have a strong site map. So again, very small changes, but you have to pause for a moment. Maybe meet with your team, buy pizza, spend two hours reviewing the site map of your website, gather the recommendation, and either make the changes yourself on your content management system or hire your designer to do it for you.

RP: Yeah. And typically, a site map is part of the original design. That’s the original skeleton of a website. I always like to think of it kind of as a family tree, and the top is going to be the home page. Or even like the hierarchy of a business, where you’ve got your CEO at the top, and then it drops down and a little line goes out, and there’s two boxes. For your website, you might have four pages, and those are your four main pages, and then those come down and then those break out. That’s kind of what you’re talking about. So you can actually see the overall at the 30,000 foot level, how is it that people are going to get from the top, down here to the bottom if they need. And is that a core product? Well, if that’s a core product and it’s five layers down, how are we going to move it up so that it’s only two layers down, or one layer down, and therefore making the information easily accessible to the user.

VD: Yes. So again, not brain surgery, but you have to take the time to stop what you’re doing for a moment and review your site map. And again, the overall organizational on all of your pages.

RP: Yeah, perfect. That is it then for today’s episode. Again, this was the third episode of a three-part series. There are links below for the other two shows. I highly recommend checking them out. Again, if your website’s two, three, or even a little bit older, you probably might be able to get away with just a simple refresher of the website versus just complete overhaul. The big caveat for me is going to be the fact, is your website… Why can I not think of it?

VD: Responsive.

RP: Responsive, thank you. If your website’s not responsive, then I would just 86 the whole project. Or not 86, but 86 the website and just do a fresh build. And you can still take a lot of these notes and put them into your new website. Virginie, you’re going to be off for three weeks. I hope you have a great trip, and enjoy spending time with your family.

VD: Thank you, I will.

RP: Alright everybody, that’s it for today’s show. I will be back next Thursday with a guest speaker, same time, same place, take care.


About the Author:

Ryan Perry is the founder and CEO of Simple Biz Support, Inc. Ryan started video blogging in 2009 as an alternative to written blogs to create visibility and credibility online. During the workweek, he enjoys helping small business owners harness the power of video to grow their companies. On the weekends, he enjoys hiking and searching out waterfalls throughout the state of California.

Leave A Comment