Blog: Website Design

The Definitive Guide to Great Web Design, part 3: Optimizing User Experience

Posted by in Website Design on Wednesday, June 4, 2014

Website Design

We've already talked about setting goals for your website redesign, and how customer personas can help to inform the kinds of content you have on your site. Now we take a deeper look at how to organize your site to meet the needs of your customers based on those personas.

Logical Organization Strategies in Web Design

The first rule of good Information Architecture is to avoid surprises. When presented with a button or a link, the user should know what lies ahead before they click.

The sitemap is our framework around which we build a design that will appeal to our target audience. Done properly, an effective sitemap will lay the groundwork for an engaging web site while still allowing for much-needed structure that will make any additions and updates easier for both developers and end-users.

There are several ways to approach the creation of a basic sitemap. Some of the most common:

  • Grouping by Subject – good for informational sites where various topics are discussed
  • Grouping by Product Type – good for ecommerce sites that have multiple product types in various categories
  • Grouping by Solution Types – good for services sites that provide various services that can be grouped into categories

However, it can be tricky to know which way to classify your site in some circumstances. Let's revisit our roofing company. They have several options for organizing their site:

  • Commercial vs. Residential Repairs (Services)
  • Roofing Types & Building Materials (Information)
  • Repairs vs. Replacements (Services & Information)
  • Quotes and Contact (Actions)

Anticipating where a customer would look for a particular service or piece of information is tricky at best. Fortunately, we don't have to guess: we can just ask.  

Customer-Driven Sitemap Design

Website usability is so important that even the government has their own site for it. And one of the methods detailed on the site happens to be an excellent way to get a solid sitemap all planned out.

Card Sorting

Card sorting works by placing various topics and headings into related groups. There are multiple ways to do it, but here is the simplest:

  1. Draft a list of all of the information items that are to be included on the site.
  2. Prune out all of the items that are too-focused (pink tile roofing for hospitals) or too-broad (roofs)
  3. Organize the remaining topics into 5 to 7 groups of similar information.
  4. Create a descriptive heading that applies to those topics: "products", "company", "services", etc.
  5. The headings become our top-level navigation items that will be prominently placed on each and every page.
  6. The topics become individual pages underneath the top-level navigation

For complex sites, it is helpful to have several customers perform this card sorting, either on their own or in a group.

If you can't reach out to customers in person, online software can be used to perform the same tasks.

Keep in mind:

  • Each heading should have no more than seven items, preferably five.
  • If there are more than seven items, try to trim them first
  • If you can't trim them, create a sub-group underneath the most relevant item
    • This will become a second level of navigation.

A Special Note on Homepages

Because the Homepage is the only page not restricted to a single category or topic, it's easy to overlook the structure of the sitemap in favor of having "everything" right up front.

Resist the urge to put as much information on the homepage as possible. Instead, look at the homepage as a gateway or portal to deeper content. Think about:

  • Guiding visitors' actions. They've landed on your homepage – what's the next step? Provide clear signposts in the structure of the page that will guide them to conversion.
  • Your main message. Don't waste time welcoming people to your site. Give them what they came for, right up front.
  • Answering questions. Every homepage should answer these three questions within the first few seconds of scanning the page:
    • Where am I? (What kind of site is this?)
    • What can I do here? (Major services/products/tools)
    • How do I take the next step? (Menu options, button choices, etc.)

Structuring your website may seem challenging at first, but if you keep in mind the goals of your site and the customer personas you've developed, creating a solid sitemap will be easier than you think.

In part 4 of Great Web Design, we'll talk about how all the pieces come together.

How Is Everything Put Together?

What are your biggest challenges when it comes to creating successful information architecture and sitemaps for your site? Let us know.

Need a new mobile-ready site ready for 2017?

Contact one of our friendly professionals to review your needs. We'll help you improve the quality of your mobile website right now and keep it running smoothly in the years to come.