London Web Design & SEO Services

How do you define the information architecture for your site?

When you define the navigation for your site (or revise the navigation for an existing site), you want to begin by thinking about the goals of the site. What you want to accomplish by having a Web site? And, what do your users want to accomplish when they get to your site?

Users are motivated by their needs. All users come to a Web site with a goal in mind. For instance, users’ goals may include:

• finding information on heart disease
• signing up for a clinical trial
• applying for a job
• finding a grant

It is your job to ensure that when users come to the Web site, they can quickly find this information.

Begin by reviewing the information you learned about your users and the personas you created. Who are your users? How much do they know about your organization?

Next, review users’ goals. Why are users coming to your Web site? What do they want to do when they get to the site? How frequently do they come to the site? Review the information from the Task Analysis and Scenarios you developed in order to set priorities for your navigation and home page.

The navigation (or information architecture) of your site should clearly communicate your Web site’s purpose. When users visit your Web site, they will quickly scan the links on the home page to learn more about your site and the information you offer. Therefore, it is very important the navigation reflects your organization’s primary purpose and helps users quickly find information. You may want to review the goals you developed during your kick-off meeting.

How do you determine what should go on the home page?

When designing the home page of your Web site, you want to ensure that your home page reflects the reasons users come to your site. Try to ensure that the most important and most frequently performed tasks are represented on the home page.

Many organizations dedicate a large portion of their home page to their organizational structure and news items. It’s important to remember that users are more interested in the information you provide than the way your agency, organization or business is structured. Revisit the goals of your users and then try to design a home page that will quickly allow users to achieve these goals.

Since most users will not be familiar with your organization, it’s important to remember that organizing content by your organizational structure may not be the most logical to users. To learn how users think about your content and the ways in which they would organize the information on your site, consider performing a card sort.

How can you use card sorting to define your categories and labels?

Card sorting is a way to involve users in grouping information for a Web site.

Participants in a card sorting session are asked to organize the content from your Web site in a way that makes sense to them. Participants review items from your Web site and then group these items into categories. Participants may even help you label these groups.

By getting a better understanding of how users view your content, you can begin to define a category structure (or taxonomy) that makes sense to users.

You will likely have several categories that come out of the card sorting activity. The key is to look at the categories to see which groups of information (and labels) have the most agreement among users. Consider the following questions:

• How did the majority of users group the content?
• Did users create similar categories or groups of content?
• Did users use similar terms or labels for the categories?
• Was there a lot of disagreement?
• Are there content items that users struggled to place into groups?

By asking these questions as you review the results of your card sort, you can begin to select the groups of content (or categories) that were logical to users. You can also begin to identify the types of content that were difficult for users to categorize and develop a plan on how to deal with those pieces of content.

Once you’ve grouped your content into categories, you should start to prioritize the groups of content based on users’ tasks.

How do you create a site map?

You may want to create a site map to help you organize the structure for your site. A site map is a visual representation of the information architecture of your site.

In order to create a site map for your Web site, you should first try to gain an understanding of all of the features, functionality, and content that the Web site will contain.

Refer to the Web Site Requirements and the Content Inventory you created to help you identify all of the features and content on the site.

Next, review users’ priorities from the Task Analysis and Scenarios, to determine the items that need to appear on the home page. Use the data from the Card Sorting activity to identify the main categories and the labels for the home page categories.

Once you’ve identified the links, features, and content that needs to appear on the home page, you’ll want to define the content that will appear on second-level and content pages.

Below is high-level site map created for Usability.gov in the early design and development phases:

What is a wireframe and how do you create one?

A wireframe is a visual illustration of one Web page. It is meant to show all of the items that are included on a particular page, without defining the look and feel (or graphic design). It’s simply meant to illustrate the features, content and links that need to appear on a page so that your design team can mock up a visual interface and your programmers understand the page features and how they are supposed to work.

While a site map may list all of the features and links that should appear on the home page, it doesn’t tell you which features are the most important and where they should be located on the page.

One of the main purposes of a wireframe is to show you where each item should be placed on a page. A wireframe:

• identifies all of the features on a page
• prioritizes the features so that the most important features are prominently positioned on a page
• visually communicates this information to the rest of your design team with a diagram of the web page

This placement should be based on the users’ needs to ensure that the most important tasks or most frequently-used content appears on the first screenful of information or “above the fold.”

Wireframes can be range from a simple mock-up of an information-based page to an extremely complex diagram illustrating an intricate process with several steps, such as a registration process.

Wireframes can be created using various tools, from a simple word processing program to a complex diagramming program.

For the Usability.gov redesign, we created a series of wireframes that underwent several rounds of iteration based on users’ needs and the results of usability testing. The following wireframe is only one of several that were considered for the layout of the Usabilty.gov home page.

As you can see from the above example, a wireframe does not dictate how the site should look. This is particularly helpful if you are interested in learning whether or not your site’s navigation is effective. One technique used to evaluate your navigation is to conduct a usability test using click-through wireframes. The wireframes will help you learn if the categories and the placement of the information is effective before your design team begins to create a graphic design for the site.

This technique is also effective to measure how well your graphic design works. For instance, if you conduct a usability test of your information architecture using click-through wireframes, you will want to see an improvement in usability when the graphic design is created. Every layer of a site should improve the usability of the site, from the content, to the navigation, to the look and feel. To learn more, see the article on Learn About Usability Testing.

Next steps

While you are developing your site’s information architecture, you also want to be working to ensure that your site’s content is easy to use. Not only do you want users to be able to easily find information on your site, but once they find a piece of information, you want users to be able to quickly understand the content.

Find out how to create usable content pages and learn how to Write for the Web.

How can you tell if your site is usable?

To assess the usability of any product, including Web sites, you can use any or all of several methods. We divide these methods into two major types:

• Usability evaluations, which typically do not include users working with the product
• Usability tests, which focus on users working with the product

Our major focus at Usability.gov is on usability testing—having users work with the Web site to complete one or more tasks.

What types of usability evaluations are there?

“Usability evaluations” should not be confused with “usability tests.” Evaluations require considerable judgment on the part of evaluators and usually do not include representative users.

Usability evaluations include:

• surveys and questionnaires
• observational evaluations
• guideline based reviews
• cognitive walkthroughs
• expert reviews
• heuristic evaluations

Learn more about Heuristic Evaluations.

When should you do usability evaluations?

You can do a usability evaluation as soon as you have a prototype to evaluate. Many usability professionals first do a usability evaluation and then follow it up with a usability test. They use the results of the evaluation to develop hypotheses about what could be serious problems and then develop the usability test around those hypotheses.

Which should you rely on more: usability evaluations or usability tests?

The results of a usability evaluation may or may not be consistent with the results of a usability test. In a usability evaluation, you are predicting the problems or successes that users will have with the Web site. A usability test with representative users tells you whether your predictions are valid.

What is a heuristic evaluation?

Probably the most popular evaluation method is referred to as a heuristic evaluation. In general, this is a method for finding usability issues in a user interface by having a small number of evaluators (usually one to five) examine the interface and judge its compliance with usability principles (heuristics). The resulting observations represent the evaluator’s opinion about what needs to be improved in a user interface. Heuristic evaluations can be conducted on paper prototypes, PowerPoint wireframes, any other type of prototype, or fully functioning Web sites or Web applications.

When conducting a heuristic evaluation, each evaluator inspects the user interface and looks for problems. The most effective heuristic evaluations are conducted using several evaluators. When more than one person does a heuristic evaluation, it is best to have each evaluator do an independent evaluation and then combine their results.

Even good evaluators can miss usability issues, and all evaluators tend to believe that certain issues are problems when later testing shows that they are not. Several research studies have shown that about half of the usability issues identified by evaluators are not truly problems and that evaluators miss at least 25% of the real usability issues.

For a heuristic evaluation, it does not seem to matter much whether the evaluator inspects a low-fidelity prototype (for example, a PowerPoint wireframe) or a fully functional software prototype. About the same number of usability issues are detected in both cases.

Research shows that having expert usability specialists as evaluators is important and that the best evaluations are done by “double experts” who have both usability expertise and knowledge of the subject matter.

How do usability tests differ from usability evaluations?

Usability tests always including test participants; usability evaluations usually do not. Usability testing is the only way to know if the Web site actually has problems that keep people from having a successful and satisfying experience. (Of course, to have a useful usability test, the test participants must be representative of the people who use or will use the Web site.)

Generally, we are not interested in what testers think will be a problem; we want it demonstrated by having one or more users actually struggle with some aspect of the site. This is the true value of a usability test: It provides an opportunity for the site to allow users to succeed, succeed with difficulty, or totally fail. There is no guessing as to whether a scenario will be difficult to complete because participants (typical users) will succeed (or not), thus demonstrating that the Web site does or does not work for them.

Next steps

Now that you understand the difference between usability evaluations and usability testing, Learn About Usability Testing.

What is a prototype?

A prototype is a draft version of a Web site. Prototypes allow you to explore your ideas before investing time and money into development.

A prototype can be anything from:

• a series of drawings on paper (called a low-fidelity prototype)
• a few images or pages that a user can click through
• a fully functioning Web site (called a high-fidelity prototype)

When should you build a prototype?

Prototypes can be built at any time but you should create them as early as possible.

You can start with a prototype of the home page and a few navigation pages to find out if the information architecture you planned will work for your site’s users. To learn more, see the article on how to define information architecture. You may also want to base your prototypes on the designs that you are creating by using Parallel Design.

Why build a prototype?

Because it is much cheaper to change a product early in the development process than to make changes after you program the site.

A prototype is often the best way to gather feedback from users while you are still planning and designing your Web site. It is a quick way to find out if you are on the right track with your plans and design.

According to Nielsen (2003) prototyping results in:

• ten times the impact if you discover a needed design change early
• savings of 100 times the cost of making the change after you release the product

Why use low-fidelity prototypes?

Because paper-based prototyping is the quickest way to get feedback on your preliminary site architecture, design, and content.

To create these low-fidelity prototypes, use simple tools like:

• Paper and scissors
• Sticky notes

Use one piece of paper for each Web page you create.

Then, have users try them out in a usability test. During the test, users point to where they want to “click” and you change the page to show the next screen.

This process helps you:

• gather feedback from users on your Web site’s functionality early in the design process
• make changes quickly
• improve your initial designs before they are programmed

To learn more, see the articles Learn About Usability Testing and Conduct the Usability Test.

Does fidelity make a difference?

Two separate studies by Catani and Biers (1998) and Uceta, Dixon, and Resnick (1998) investigated the differences between using low-fidelity prototypes and high-fidelity prototypes in usability tests. They found no significant differences between the prototyping methods for finding usability problems.

Read how Paper Prototypes Work as Well as Software Prototypes.

Next steps

Once you have tested your prototype with the users and have made changes to yur prototype, you may be ready to Program the Site.

We strongly recommend iterating your prototype several times until you (and your users) are satisfied with the designs. This may involve several rounds of usability tests before you are ready to Program the Site.

What is parallel design?

With parallel design, several people create an initial design from the same set of requirements. Each person works independently, and when finished, shares his/her concepts with the group.

The design team considers each solution, and each designer uses the best ideas to further improve their own solution. This process helps to generate many different, diverse ideas and ensures that the best ideas from each design are integrated into the final concept. This process can be repeated several times until the team is satisfied with the final concept.

What are the benefits of parallel design?

Several research projects have shown the value of this technique:

• Seeing and trying others’ designs improved final solutions
• Creating many designs produced better results
• Combining design elements resulted in better user interfaces

Seeing and trying others’ designs improved final solutions

Bailey (1992) reported on training courses where students were given a specification and used a prototyping tool to create a simple system. After all the students completed their designs, each student used everyone else’s system to complete a task. Having experienced the ideas of all the other students, each then made changes to his or her original prototype. This process was repeated two more times. The revised interfaces were always considerably better than the originals. Two important observations emerged from these classes:

• No matter how good the original interfaces were, every one was improved.
• Students were able to very quickly identify the good design ideas in the systems of others, and they effectively integrated those good ideas into their own designs.

Creating many designs produced better results

A few years later, Nielsen (1993) described a development methodology in which several designers worked independently to generate as many different design ideas as possible. Once they had created different designs, they combined their different ideas and took the best features from all designers. The goal was to develop and evaluate different ideas before settling on a single approach.

Nielsen listed the following as major benefits of this approach:

• It allows a range of ideas to be generated quickly and cost-effectively.
• It allows several approaches to be explored at the same time, thus compressing the concept development schedule.
• The concepts generated can often be combined so that the final product benefits from all the proposed ideas.
• People with little usability expertise can use the technique.

Combining design elements resulted in better user interfaces

A few years later, Ovaska and Raiha (1995) published an article suggesting that having designers make initial design decisions independently and then combining their results produced better user interfaces than the original design of any one person. They called this approach “parallel design.”

How have others conducted parallel design?

McGrew (2001) published an article confirming the value of parallel design. McGrew’s case study was the user interface for an invoice reconciliation program. He scheduled a one-day session with several participants, including the project manager, a designer, two subject matter experts, a technical writer who was scheduled to do the training, three users, and a human factors engineer.

They began by having each person independently sketch a proposed user interface on a large sheet of paper using colored felt-tip markers. The sketches then were posted on the wall for all to see and evaluate. After viewing the design solutions proposed by others, each participant sketched two new designs. McGrew required that each new design include at least one idea from another person’s design and an idea that no one had yet proposed. Again, all participants reviewed all the design solutions. They began to agree on an optimal design fairly early in the process and were able to reach consensus on the final user interface before the end of the day.

How does parallel design work?

What is most striking about parallel design is how many ideas can be considered in a very short time. Most linear processes would only have considered a few iterations of a single design in the time that parallel design can consider many ideas. McGrew’s design team considered at least 40 design alternatives in a single day. McGrew found that most participants responded immediately to good ideas. This was true even when good ideas were contained in otherwise poor design solutions.

Good user interface design requires designers first to “saturate the design space.” This means that user interface designers should consider as many alternative design ideas as possible before selecting the best to take forward.

References

Bailey, R.W. (1992), Learning good design from the decisions of others, User Interface Update - 1992.

Macbeth, S.A., Moroney, W.F., and Biers, D.W. (2000), Development and evaluation of symbols and icons: A comparison of the production and focus group methods, Proceedings of the IEA 2000/HFES 2000 Congress, 327-329.

McGrew, J. (2001), Shortening the human computer interface design cycle: A parallel design process based on the genetic algorithm, Proceedings of the Human Factors and Ergonomics Society 45th Annual Meeting, 603-606.

Nielsen, J. (1993), Usability Engineering. Boston: Academic Press.

Ovaska, S. and Raiha, K.J. (1995), Parallel design in the classroom, Proceedings of CHI’95, 264-265.

Next steps

Once you have a preliminary site structure from Card Sorting, content to write for the web, and a preliminary design, you can create a prototype to evaluate and test. Learn About Evaluations to select the right one for your current needs. Learn About Usability Testing so that you can start an iterative series of usability tests.