Key Tips for Building User-Friendly Website for Your Business - Once Blog
user-friendly website

Key Tips for Building a User-Friendly Website for Your Business

All the marketing in the world won’t help your business if your site offers a poor experience. We’ve all encountered websites that are slow, confusing, difficult to navigate, or just plain unpleasant to use. A poor website reflects badly on your brand. At best, the visitor will force their way through it. At worst, they’ll bounce away from your site and complain.

Even if your site was user-friendly in the past, it doesn’t mean that it has kept up with current trends and tastes. In the past few years, the way most of us access websites have moved from desktops to mobile devices. Speeds have increased and we’re more sensitive to slow sites. Finally, we want as little friction as possible between us and the information we want.

Here are some things you can do to check and improve the user-friendliness of your website.

Mobile Friendliness

Mobile FriendlinessThe amount of mobile device traffic has hovered around 50% of the total for the past few years. Making your website mobile-friendly used to be a luxury. Now it is a necessity, and not just from the perspective of looking good for the users. Search engines are also paying attention to which sites have mobile-friendly features.

In fact, Google has been building a separate mobile-first index for a while. If they detect that you’re on a mobile device they will use that index. This means that your SEO can look completely different depending on the devices your audience uses. So if your site looks bad on tablets and phones then you’re not getting all the traffic you could be getting.

Google wants to help sites get up to speed with mobile-friendliness. They have a tool you can use to check your website, but here are the essentials that you need to know.

Responsive Layout

A responsive layout is a layout that will change its look depending on the size of the screen. Any mobile-friendliness test starts with this. An easy way to test this is on a desktop. Browse to your website and make the window really big without maximizing, then drag a corner so the window shrinks.

responsive layout

As the viewport (the part of the browser that holds the page) reaches certain sizes the layout of the site should change so that you don’t have to scroll sideways. This shows that your layout is responsive. But if it doesn’t change, it will look like an ugly unnavigable mess. You can confirm it by visiting your site with a mobile device or tablet.

Building responsive layouts is much like rebuilding the design for your website all over again. It’s a big job and there are technical aspects your designers need to know to make it happen. There is a free course on Udacity on responsive web design fundamentals that will teach you what you need to know. While it may seem like a hassle to build responsiveness into your sites, the business payoff in increased traffic and conversions can be well worth it.

Proper Navigation

A key part of any website is good navigation. All navigation on your site should be easy to see, understand, and use on all devices. Here are some principles to keep in mind when building your menus.

First, navigation must be easy to find. If your visitors can’t find your navigation area then they’ll be lost. Lost users lead to bored and confused users who leave your site. Your navigation elements should use a contrasting color for easy visibility and be located in roughly the same areas throughout your site for each viewport size. Contrasting colors create divisions in your site that clearly define different areas.

The navigation for a desktop site will be different from a mobile site, so use the conventions for each one. Those hamburger icons are there on mobile sites for a reason! They’re the sign for a navigation menu. Try not to violate standards.

The items in the menus should clearly explain to the reader what to expect and there should be as few as possible. You don’t want to hide information under a bunch of layers, but you also don’t want to overwhelm the user with choices. The most important information about your site, like how to contact you, your location, and who you are, should found easily in the topmost layer of navigation.

Finally, there should be a way for the user to get back to earlier pages with a click. This can be easily accomplished through the use of breadcrumbs. This is a trail of links that show the path a user took through your navigation to get to a particular place. Another is the ability to click your logo to get back to your home page.

Some metrics packages can tell you how your users are navigating through your site. If you find that some pages aren’t getting a lot of visits or you get complaints about people not finding information, it’s a sign to examine your navigation menus.

Site Speed

website speed

The last major mobile-friendliness feature is site speed. Did you know that if your site takes longer than three seconds to load you’ll lose over half of your mobile visitors? Those who grew up with dial-up may roll their eyes, but slow speeds are a big factor in losing traffic.

It’s not just about impatience and attention spans. It’s also about data caps. A site that loads slowly implies that it is using a lot of data. Users do not want to use sites that waste data and site speed is the easiest way they can detect that.

Google has another tool you can use to check for website speeds. Most speed improvements involve technical changes to your site. For example, your images may not be properly compressed or you could have too many on your page. For interactive sites, your javascript code may be inefficient or bloated. Video can also slow down a site, especially if it plays automatically on load.

Another factor might be your hosting provider. You might have a bandwidth cap or they can’t handle the amount of traffic you get. Large companies might have to use a content delivery network (CDN) to spread out your website on servers across a geographic region. This can dramatically improve speeds, but they aren’t necessary for small businesses unless their users are across a wide area (think multiple states).

Here are some general suggestions for creating user-friendly websites:

Never Let People Forget Where They Are

Your branding does more than just tell users who they are interacting with. It also tells them they are still on your site. Websites that have even subtle differences in colors can make people think they’ve moved to a different site. For an e-commerce site, this is a bad thing! It could make the visitor think they’ve moved to a scam site.

Your logo should always be visible at the top of the page and your colors should be consistent. Even if you keep your shopping site on a different subdomain, keep things as consistent as possible to create a seamless experience.

Provide Full Information

A new visitor will always want to know certain things about your business. It could be a physical address, an about us page that explains who you are, your hours, or anything else that you’d find on a Google My Business card. Don’t hide this information! Provide it on your website where people can find it easily. The more that people have to hunt to find the information they want, the more likely it is they will go to another site (and another vendor!).

Furthermore, the top banner on your home page should explain what you do in as few words as possible. Users want to have an idea of what you can do for them before they start browsing. If they cannot figure that out soon after landing on your page then they’ll go do a different search result.

Watch The Colors!

We touched on color when talking about contrasting colors for navigation menus, but your colors play an important role in how nice it is to use your site. Good website color combinations make your website clear to the eyes and still beautiful. For instance, you don’t want the color of your font and the color of your background to clash too much or be too close to one another. Both will cause eye strain.

Some basic information on how people respond to colors can be found in this article from Marketo. And if you’re having trouble coming up with a color pallet, try Coolors.

Be Judicious With CTAs

Finally, your call-to-actions (CTAs) need to be used wisely. First, there should always be a way for users to contact you for more information. Contact information can be put in the footer of every page or on a contact page that’s accessible from any page. For some businesses, this is all you need.CTA

If you have additional CTAs, like for downloadable goods or for multiple products, be judicious. You want to make them easy to find, but you don’t want to pack in so many that it turns off the reader. Even on a landing page, having one above the fold and one toward the bottom may be all you need (barring things like long-form sales letters).

This is a good place for A/B testing. This may be used mostly for wording and color of CTAs, but it also works for positioning as well. Experiment with this to find what works best for your audience and design, and don’t forget to test for other screen sizes as well!

Remember, user-friendliness is all about removing friction between the user and what they want for your site. Users want to use your website from any device and have it just work. They want their information fast and easy to find, and they want it easy to convert when they’re ready. If you haven’t examined your website in a few months (or years), it may be time for a UI checkup.

blogs

user-friendly website

Key Tips for Building a User-Friendly Website for Your Business

All the marketing in the world won’t help your business if your site offers a poor experience. We’ve all encountered websites that are slow, confusing, difficult to navigate, or just plain unpleasant to use. A poor website reflects badly on your brand. At best, the visitor will force their way through it. At worst, they’ll bounce away from your site and complain.

Even if your site was user-friendly in the past, it doesn’t mean that it has kept up with current trends and tastes. In the past few years, the way most of us access websites have moved from desktops to mobile devices. Speeds have increased and we’re more sensitive to slow sites. Finally, we want as little friction as possible between us and the information we want.

Here are some things you can do to check and improve the user-friendliness of your website.

Mobile Friendliness

Mobile FriendlinessThe amount of mobile device traffic has hovered around 50% of the total for the past few years. Making your website mobile-friendly used to be a luxury. Now it is a necessity, and not just from the perspective of looking good for the users. Search engines are also paying attention to which sites have mobile-friendly features.

In fact, Google has been building a separate mobile-first index for a while. If they detect that you’re on a mobile device they will use that index. This means that your SEO can look completely different depending on the devices your audience uses. So if your site looks bad on tablets and phones then you’re not getting all the traffic you could be getting.

Google wants to help sites get up to speed with mobile-friendliness. They have a tool you can use to check your website, but here are the essentials that you need to know.

Responsive Layout

A responsive layout is a layout that will change its look depending on the size of the screen. Any mobile-friendliness test starts with this. An easy way to test this is on a desktop. Browse to your website and make the window really big without maximizing, then drag a corner so the window shrinks.

responsive layout

As the viewport (the part of the browser that holds the page) reaches certain sizes the layout of the site should change so that you don’t have to scroll sideways. This shows that your layout is responsive. But if it doesn’t change, it will look like an ugly unnavigable mess. You can confirm it by visiting your site with a mobile device or tablet.

Building responsive layouts is much like rebuilding the design for your website all over again. It’s a big job and there are technical aspects your designers need to know to make it happen. There is a free course on Udacity on responsive web design fundamentals that will teach you what you need to know. While it may seem like a hassle to build responsiveness into your sites, the business payoff in increased traffic and conversions can be well worth it.

Proper Navigation

A key part of any website is good navigation. All navigation on your site should be easy to see, understand, and use on all devices. Here are some principles to keep in mind when building your menus.

First, navigation must be easy to find. If your visitors can’t find your navigation area then they’ll be lost. Lost users lead to bored and confused users who leave your site. Your navigation elements should use a contrasting color for easy visibility and be located in roughly the same areas throughout your site for each viewport size. Contrasting colors create divisions in your site that clearly define different areas.

The navigation for a desktop site will be different from a mobile site, so use the conventions for each one. Those hamburger icons are there on mobile sites for a reason! They’re the sign for a navigation menu. Try not to violate standards.

The items in the menus should clearly explain to the reader what to expect and there should be as few as possible. You don’t want to hide information under a bunch of layers, but you also don’t want to overwhelm the user with choices. The most important information about your site, like how to contact you, your location, and who you are, should found easily in the topmost layer of navigation.

Finally, there should be a way for the user to get back to earlier pages with a click. This can be easily accomplished through the use of breadcrumbs. This is a trail of links that show the path a user took through your navigation to get to a particular place. Another is the ability to click your logo to get back to your home page.

Some metrics packages can tell you how your users are navigating through your site. If you find that some pages aren’t getting a lot of visits or you get complaints about people not finding information, it’s a sign to examine your navigation menus.

Site Speed

website speed

The last major mobile-friendliness feature is site speed. Did you know that if your site takes longer than three seconds to load you’ll lose over half of your mobile visitors? Those who grew up with dial-up may roll their eyes, but slow speeds are a big factor in losing traffic.

It’s not just about impatience and attention spans. It’s also about data caps. A site that loads slowly implies that it is using a lot of data. Users do not want to use sites that waste data and site speed is the easiest way they can detect that.

Google has another tool you can use to check for website speeds. Most speed improvements involve technical changes to your site. For example, your images may not be properly compressed or you could have too many on your page. For interactive sites, your javascript code may be inefficient or bloated. Video can also slow down a site, especially if it plays automatically on load.

Another factor might be your hosting provider. You might have a bandwidth cap or they can’t handle the amount of traffic you get. Large companies might have to use a content delivery network (CDN) to spread out your website on servers across a geographic region. This can dramatically improve speeds, but they aren’t necessary for small businesses unless their users are across a wide area (think multiple states).

Here are some general suggestions for creating user-friendly websites:

Never Let People Forget Where They Are

Your branding does more than just tell users who they are interacting with. It also tells them they are still on your site. Websites that have even subtle differences in colors can make people think they’ve moved to a different site. For an e-commerce site, this is a bad thing! It could make the visitor think they’ve moved to a scam site.

Your logo should always be visible at the top of the page and your colors should be consistent. Even if you keep your shopping site on a different subdomain, keep things as consistent as possible to create a seamless experience.

Provide Full Information

A new visitor will always want to know certain things about your business. It could be a physical address, an about us page that explains who you are, your hours, or anything else that you’d find on a Google My Business card. Don’t hide this information! Provide it on your website where people can find it easily. The more that people have to hunt to find the information they want, the more likely it is they will go to another site (and another vendor!).

Furthermore, the top banner on your home page should explain what you do in as few words as possible. Users want to have an idea of what you can do for them before they start browsing. If they cannot figure that out soon after landing on your page then they’ll go do a different search result.

Watch The Colors!

We touched on color when talking about contrasting colors for navigation menus, but your colors play an important role in how nice it is to use your site. Good website color combinations make your website clear to the eyes and still beautiful. For instance, you don’t want the color of your font and the color of your background to clash too much or be too close to one another. Both will cause eye strain.

Some basic information on how people respond to colors can be found in this article from Marketo. And if you’re having trouble coming up with a color pallet, try Coolors.

Be Judicious With CTAs

Finally, your call-to-actions (CTAs) need to be used wisely. First, there should always be a way for users to contact you for more information. Contact information can be put in the footer of every page or on a contact page that’s accessible from any page. For some businesses, this is all you need.CTA

If you have additional CTAs, like for downloadable goods or for multiple products, be judicious. You want to make them easy to find, but you don’t want to pack in so many that it turns off the reader. Even on a landing page, having one above the fold and one toward the bottom may be all you need (barring things like long-form sales letters).

This is a good place for A/B testing. This may be used mostly for wording and color of CTAs, but it also works for positioning as well. Experiment with this to find what works best for your audience and design, and don’t forget to test for other screen sizes as well!

Remember, user-friendliness is all about removing friction between the user and what they want for your site. Users want to use your website from any device and have it just work. They want their information fast and easy to find, and they want it easy to convert when they’re ready. If you haven’t examined your website in a few months (or years), it may be time for a UI checkup.

Font Resize