6 Guidelines for Exceptional Website Design and Usability

    by Pamela Vaughan

    Date

    January 6, 2012 at 11:14 AM

    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 example

    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

    flash

    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
                                         

    SUBSCRIBE TO HUBSPOT'S MARKETING BLOG

    Join 300,000+ fellow marketers! Get HubSpot's latest marketing articles straight to your inbox. Enter your email address below:

    Search Inbound Hub

    Subscribe to Marketing Articles by Email

    Subscribe by RSS

    Follow HubSpot

    Call Us: 1-888-HUBSPOT