Website Design Basics for Better User Experience & SEO Performance

website design basicsAfter years of using red navigation links at the top of its search results, Google changed to blue links this August, following months of testing, Search Engine Land reported. Why the change? Google hasn’t told us, but the World Wide Web Consortium reports that blue links are easier to see, even for people who are colorblind. When your link colors are hard to see, users who depend on colors to see which link they’re clicking on can get frustrated with your navigation menu, accessibility expert Gian Wild points out.

This illustrates how navigation design details can affect your users’ experience and your website’s performance. When users can’t find what they want immediately, they’re more likely to leave your page quickly, giving your website a high bounce rate. This can in turn affect your search engine results. You can improve your users’ experience and your SEO performance by following some website navigation design best practices.

Plan Your Site Architecture

Just as building a house begins with a blueprint, good navigation design begins with planning your website’s information architecture. Select a navigational structure that fits the goal of your site. For instance, most people visiting CNN.com are looking for the latest news, so links to breaking news stories appear prominently on top of the page and in the sidebar, but for users searching for stories in specific categories, there are also top navigation menus organized by medium and by topic. In contrast, Coda’s website is oriented around promoting a single software product, so all essential information is displayed on the main page, with only a few navigation options for specific action items such as buying the software or downloading the latest upgrade.

A few major categories represent the most popular website architecture design options. These include:

  • The single-page site, the simplest option best-suited for sites with a single focus and limited information
  • A flat structure, where there are only a few pages which all have equal importance in the navigational hierarchy, works well for sites that only need a handful of pages, such as brochure-style sites
  • An index page structure uses the home page as a launch page to navigate to other pages that are organized under it as subpages
  • Sites with more information may use multiple levels of subpages, which can have their own inter-connecting links if desired (this is typical of large e-commerce sites such as Amazon that feature many categories of products)

To help you visualize your site’s architecture, you can use a few different methods. The simplest is using index cards or stickies to represent your site’s pages. Wireframe software tools let you create an electronic blueprint to organize and preview your site’s structure and navigational features. Content outlines and site maps provide at-a-glance overviews of how the pages on your site relate to each other.

Create Simple Navigation Bars and Menus

When building your site’s architecture, one of the most critical components is designing your navigational bars and menus. Don’t reinvent the wheel by choosing a non-standard navigational design that puts links where visitors can’t find them quickly. Users expect to see a horizontal bar across the top or a vertical one down the left side. Use either a horizontal or vertical one, but not both, to avoid confusing visitors, and keep sidebars to the right. Remember to include footer navigational tools.

Use simple, user-friendly menu labels that are obvious and easy to understand. And always let visitors know where they are on your site; for instance, you can have the menu link for the current page display in a different color, font or background than other menu items.

Format Your Non-Menu Links

How you design non-menu links also affects your site’s usability. Despite some recent trends in flat Web design, it’s best to follow the conventional practice of coloring hyperlinks blue and underlining them. This is less likely to confuse visitors who are used to seeing hyperlinks formatted this way.

When helping users navigate through a series of related items, such as slideshow pictures or blogs organized by date, you can use visual aids such as arrows to guide your visitors. Shutterstock provides libraries of arrows you can use to draw attention to navigational items on your site. You can also use arrows and visual cues to draw attention to calls to action, such as buy buttons.

Breadcrumbs

Breadcrumb links are another important tool to help visitors find their way around your site. A breadcrumb trail is a series of links that helps users navigate from the current page back to other pages on your site. SEO expert Shari Thurow says the best use of breadcrumbs is to show visitors the relationship between the page they’re currently on and its parents and grandparents within your site’s hierarchy. She discourages the use of breadcrumbs to display the user’s personal navigational history, which she says can confuse visitors and cause duplicate content problems.

Site Maps

While you’re helping human visitors navigate your website, it’s also important to guide search engine robots through your site so that your pages get indexed properly. Site maps help robots crawl your site by listing your pages and describing their relative importance and relationship to each other. Google recommends that to optimize crawling, your site should include both an XML sitemap, which includes all the pages on your site, and an RSS/Atom feed, which describes your latest site updates.

Recent Posts