Inbound Internet Marketing Blog

SEO, Blogging, Social Media, Landing Pages, Lead Generation and Analytics

SUBSCRIBE

The HubSpot Inbound Internet Marketing blog covers all of inbound marketing - SEO, blogging, social media, lead generation, email marketing, lead nurturing & management, and analytics. Join 57,702 others and subscribe now!

Subscribe to RSS feed Add us on Facebook! Follow us on Twitter

Get Free Marketing Info!

Get the world's best marketing resources right to your inbox! Join more than 817,000 inbound marketers!

Subscribe by email

Your email:

HubSpot's Inbound Internet Marketing Blog

Current Articles | RSS Feed RSS Feed

6 Guidelines for Exceptional Website Design and Usability

 

.

first impressionsSo you're leveraging SEO and getting found online. Now that you’re generating traffic by getting found, your next focus should be getting that traffic to stay on your website. Educational websites have a 30-60% bounce rate on average. This means that a large majority of web traffic entering your website leaves without navigating to any other pages. And many times, they may never come back. Yikes! Here are the design guidelines you need to follow to improve your website's user experience and decrease your bounce rate.

1. Make a Great First Impression

Your website represents who you are and what you offer. When people see it for the first time, they’re thinking:

  • Is this site credible?
  • Is it trustworthy?
  • Does it look professional?
  • How can I find what I want or need?
  • Does this site make me feel welcome?
  • Am I in the right place?

You need to ask yourself all of these questions when designing your website. Now, design may not be the most important factor in a website overall, and often-times folks put too much emphasis on how a site looks instead of how it works, but it does play an important role in making a good first impression.

Tips for a Great Website Design:

Proper Use of Colors: Use the right colors for your audience to draw attention to select elements. Don’t try to make everything jump out. The result will be just the opposite – nothing will stand out. Avoid a chaotic mix of colors on your website, and instead, pick two to four colors for your template and marketing materials.

Animations, Gadgets, and Media: Avoid anything unnecessary. Using Flash animations because they look cool is the wrong strategy. In most cases, it’s best not to use animated backgrounds or background music. Only use media and animations to help support content and information.

Layout: Create a clear navigation structure, and organize page elements in a grid fashion (as opposed to randomly scattered). Also, don’t be afraid of white space, and avoid clutter!

Typography: Make sure your website is legible. Use fonts, font sizes, and font colors that are easy to read. For easier page scanning, use bullet lists, section headers, and short paragraphs. If your site is English language-based, make sure information flows from left to right and top to bottom. It is almost always best to have white or very light background with black or dark text.

While design is important, don’t forget that great content is what your visitors are ultimately after. A well-designed website might convince visitors to take a closer look, but they won't look twice if the content isn't useful and well organized. After all, you never get a second chance to make a great first impression.

2. Maintain Consistency

It’s best to keep elements on your site fairly consistent from page to page. Elements include colors, sizes, layout, and placement of those elements. Your site needs to have a good flow from page to page. This means colors are primarily the same as well as fonts and layout structure. Navigation should remain in the same location of your layout throughout your website. A consistent brand on the web matters!

design consistency resized 600

For layout structure, typically three page layouts exist for most websites: one for the homepage, one for content pages and one for form pages. For example, your homepage will have a different layout than a landing page for a PPC campaign. Keep the elements in these layouts constant. This will help keep your visitors from feeling lost.

3. Use the Right Images

stock photography exampleImages can be a powerful element to any website, but you need to use them wisely. For example, consider stock photography. Stock images are seen everywhere because they are easily accessible and inexpensive. But are they good to use?

MarketingExperiments performed a test comparing the use of stock photography versus real imagery on a website, and each of their effects on lead generation. What they found was that photos of real people out-performed the stock photos by 95%. Why? Because stock images tend to be irrelevant. Resist the temptation to use photos of fake smiling business people!

As a result, take care to place meaningful images on your site. Every image is transmitting a subconscious message to your audience, and sometimes the result is different from what you might expect.

4. Create a Solid Navigation System

Perhaps one of the biggest factors to keep visitors on your website is having a good, solid navigation system that supports all search preferences. In fact, more than three-quarters of survey respondents from a recent HubSpot study say the most important element in website design is ease of finding information. If people can’t find what they're looking for, they will give up and leave.

website navigation resized 600

Important Factors in a Site’s Navigation:

  • Keep the structure of your primary navigation simple (and near the top of your page).
  • Include navigation in the footer of your site.
  • Use breadcrumbs on every page (except for the homepage) so people are aware of their navigation trail.
  • Include a search box near the top of your site so visitors can search by keywords.
  • Don't offer too many navigation options on a page.
  • Don't dig too deep. In most cases, it’s best to keep your navigation to no more than three levels deep.
  • Include links within your page copy, and make it clear where those links lead to. This is also great for SEO!
  • Avoid use of complicated JavaScript -- especially Flash -- for your navigation. Many mobile phones can’t see Flash (yet); thus, they won’t be able to navigate your website. Same applies to web browsers that don’t have an updated version of Flash installed.
  • Think about your very constituent audience. Ask if it’s obvious where they should go to find what they need and want.

The overall rule with a proper navigation structure is simple: don’t require visitors to think about where they need to go and how to get there. Make it easy for them.

5. Limit Flash and Animation

flashFlash animation can grab someone’s attention, yes, but it can also distract people from staying on your site. Not only are mobile applications lacking the capability to view Flash animation, but many people also simply don't want to be bothered with unexpected noises and animations. Keep the animation to a minimum, and only use when necessary. Remember: this does not work on iPhones or iPads.

If you’re in love with Flash or require animations, consider moving to HTML5 instead, if applicable. It’s a great browser-compliant alternative to Flash.

6. Make it Accessible

Make sure that anyone visiting your website can view it no matter what browser or application they're using. In order to gain significant traffic, your site needs to be compatible with multiple browsers and devices. With growth in mobile phones and tablet devices, people are surfing the internet more than ever before. Make sure to get some of those views by allowing everyone to view your site, no matter what kind of system they run or which browser they use. Remember: 508 compliance is required for education institution websites.

What other components do you think make for exceptional website design and usability?

This article is an excerpt from our free ebook, The 25 Must Haves for Driving Traffic, Leads, and Sales. Learn more about what makes a great website. Download the complete ebook here.

25-website-must-haves

Posted by Pamela Vaughan on Fri, Jan 06, 2012 @ 10:14 AM

COMMENTS

Such great article, consistently, from this post. Have a look at my somewhat unique social media marketing tips, I'd love to hear your thoughts -http://socialmediamarketing-tips.blogspot.com/ thanks! Pamela 
 

posted on Friday, January 06, 2012 at 10:38 AM by Ernest


I would like to show this article to some people with a big "I told you so." Thank you for the great information.

posted on Friday, January 06, 2012 at 11:53 AM by Addie


I thought I read something on the Internet about flash now be able to be indexed by major search engines. Is this not true? :-)

posted on Friday, January 06, 2012 at 9:21 PM by Drewry


This are guidelines for a newbie like me. Thanks for sharing. 
 
Web Design London UK

posted on Saturday, January 07, 2012 at 2:50 AM by Web Design London UK


Really these steps are very useful to make a website SEO friendly, thanks for sharing.

posted on Saturday, January 07, 2012 at 4:59 AM by web designing course in Chandigarh


As a web designer my first aim is consistency and then making the site look as professional as possible including all the above suggestions. Thanks for sharing this.

posted on Saturday, January 07, 2012 at 11:20 AM by Alex-Web deisgn Ireland


I am about to be doing a new design for my website and found this info to be very useful as I do almost all of your articles! 
 

posted on Monday, January 09, 2012 at 10:04 AM by Blake Rickels


I am retired and would like to e-mail this to my son. Why have you not made this easy to send out? What have I missed here? 
 
Please send this to davidson@calfeeinsurance.com 
 
Thank you.

posted on Monday, January 09, 2012 at 7:24 PM by Arthur D. Calfee


I really appreciate you to share all these guidelines which are considered as most in designing.

posted on Tuesday, January 10, 2012 at 4:04 AM by Social Networking Portal


I loved this content and I value this one so much! I am happy to be informed of this wonderful steps and tactics. Thanks a lot!

posted on Friday, January 13, 2012 at 2:00 AM by Phoenix web design


Good article on basic web design. These basic principles are certainly important. As a pro web designer (with 15+ years experience) my philosophy has been "form follows function". If you can't find what you are looking for, the site has failed. IMHO the design should be SO GOOD it should be transparent. Meaning, The brand should be completely unhindered by the design. 
 
2 things of note: 
 
1. There will be no more mobile flash, adobe has pulled the plug on development (yay!) 
http://blogs.adobe.com/conversations/2011/11/flash-focus.html 
 
2. I tried to post this from my ipad but got an error saying the JS had been turned off (it hasn't). You all may want to check that. 
 
Thanks for the great info! 
 
Lisa Ellington of Big Thinkery

posted on Sunday, January 15, 2012 at 12:03 PM by Lisa Ellington


Great article that sums up the basic principles on how to deliver a great user experience to your visitors.

posted on Sunday, January 15, 2012 at 4:37 PM by Tim from IntuitionHQ


good point about flash and mobile viewers. Helped convince my customers at Davis Tractor Parts to get the flash off their site.

posted on Thursday, January 26, 2012 at 5:21 AM by Derwood


Comments have been closed for this article.