London Web Design & SEO Services

When should you begin programming?

Before you begin programming your new site or the new pages you plan to add to your existing site, you may want to consider paper prototyping your design and testing it with users. This technique ensures that you’re focused on users’ goals and allows you to make changes to the prototype before you invest a lot of time and money into programming the Web site. To learn more about prototyping, see the article on Developing a Prototype.

You may also want to consider using Parallel Design in order to ensure that you have integrated all of the best design ideas into your new Web pages.

When you should test the site?

You should consider conducting usability tests on the HTML prototypes as early in the process as possible. You don’t have to have a fully functioning prototype to conduct usability testing. You may test with only a few “click-through” pages or a much more developed site. To learn more, see the article on Learn About Usability Testing.

What about accessibility?

Accessibility (Section 508 of the Rehabilitation Act - 29 U.S.C. 794d) requires all Federal agencies to make their electronic and information technology accessible to people with disabilities.

Accessibility is an important part of the design process and should be considered throughout the entire development process.

In addition to following the requirements of the law, many Federal agencies conduct accessibility testing with actual users. Accessibility testing is simply a usability test with users who have disabilities.

At Usability.gov, we believe that accessibility is simply another aspect of usability. Simply put, it’s making your site usable for all types of user populations. By making your Web site accessible, you are not only helping people with disabilities to be able to easily access your information, but you are improving the usability of the site for all users.

For more information on accessibility, please see the following resources:

• Section 508 of the Rehabilitation Act - Read the full text from the Access Board Web site.
• Guidance for Implementing Section 508 - View the Section 508 Web site for complete information on how to meet accessibility requirements.
• Access for People with Disabilities - Learn how other agencies have worked to make their Web sites accessible.
• Synopsis of Section 508 Accessibility Requirements - Read a summary of Section 508 provided by the Department of Health and Human Services (HHS).

Next steps

Once you’ve begun programming your Web site, you should evaluate the usability of your site. In order to judge the usability of your site, you can have usability experts review your site and give you feedback on how to improve your site. To learn more about this, see Learn About Evaluations.

In addition to the evaluations, you’ll also want to test your Web site with representative users. To learn more, see Learn About Usability Testing.

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.

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.

If you have done all the steps in Analyze, you are ready to design, write, and develop the Web site. A first step is to get a list of requirements for the site.

What are requirements?

Web site requirements describe the features, functions, and content of the site. They are a list of what the site must have and what it must allow users to do.

Requirements might be general features and functions, such as:

• search
• contact us

Requirements might be specific features and functions for your site. Perhaps your Web site must allow users to:

• apply for grants online
• sign up for email alerts of contract opportunities
• purchase products
• get data from a database

Requirements might be specific content or content areas that your site must cover, such as:

• reports of research
• articles on health for the general public
• lists of funding opportunities
• links to other related sites
• reports of meetings
• press releases

How do you develop requirements?

Site requirements should reflect your users’ needs.

The first step in developing requirements is to review the scenarios you wrote. The scenarios should describe the 10 to 30 most important and most frequent tasks users will want to do on your site.

Begin by extracting the requirements from each scenario. What features, functions, and content must the site have for users to successfully complete each scenario?

How detailed should requirements be?

At this point, requirements can be a phrase or one-sentence description of what the site must have or must allow users to do. As you move through the process of designing the site, you may develop the requirements further with more detail.

Eventually, you may want to write the requirements as Use Cases, which describe in great detail how users will interact with the site to accomplish the scenarios. Before you are ready to develop use cases, however, you must do some of the other design steps.

How do you use requirements?

Requirements only tell you what the Web site must have and what it must allow users to do. Requirements do not tell you how to design or develop the site to have those features, functions, and content. The other design steps help you figure out how to make sure that the site is organized, written, and designed to satisfy the requirements.

Next steps

To organize the Web site, begin by conducting a content inventory of your current site to identify what items you already have and which items you will need to add based on your Web site requirements. A content inventory is also helps you to begin organizing your site in a way logical to your users.

A successful Web site has the information that users need in the place they look for it, in the amount they want to deal with, in the words and pictures that make sense to them.

On a usable Web site, users can find what they need and understand what they find in the time and effort that they think it is worth.

Good navigation and a good search engine are critical to getting users quickly and easily to the information that they want. That’s the part about “find what they need.” Equally critical are thoughtful selection, logical organization, clear and visual writing of the information (the content). To learn more, see the article Why is Easy to Use Content so Critical?

How do you select what your audiences need?

In most situations, users come to the Web with a specific goal or task or question. They want only the information they need to accomplish the goal, do the task, or answer the question. They aren’t there to read; they are there to gather information.

The right content is the information that users want and need. If no one wants or needs the information, don’t put it up on your Web site.

For every piece of the content, ask:

• Is this relevant to users of the Web site (not just to me)?
• Do users really want or need this information?

How should you organize your content?

Here are six keys to organizing logically within a page of content:

• Break the text into manageable pieces.
• Put in many headings.
• Write useful headings.
• Make the headings into a table of contents.
• If the information is sequential, put it in that order.
• For non-sequential information, put what users need most first.

Break the text into manageable pieces

This is sometimes called “chunking” the text. Chunking operates on many levels. All of the following contribute to chunking and making text manageable:

• short sections
• short paragraphs
• short sentences
• lists
• tables
• pictures
• examples

If the text seems dense to people, they may not even try to read it.

Put in many headings

Headings help to break up the text. They also facilitate skimming and scanning. Because headings are usually in bold or color, they make the page more interesting.

Each short section should have its own heading, and should be only one or two short paragraphs. A short section might be just a list or a table. For example, look at how we use headings on this page.

Make the headings into a table of contents

Headings help users in two ways:

1. By scanning the headings, users should get a summary or big picture of the content.
2. By finding the heading that relates to what they want, users should be able to jump to the right place in the information.

In a printed book, you make the headings work in both these ways by turning the headings into a table of contents. Online, you do the same thing by gathering each group of headings into an introductory list of hyperlinks. Look at the sets of hyperlinks (sometimes called anchor links) at the top of this page as an example.

If the information is sequential, put it in that order

Once you have the information chunked and have a useful heading for each chunk, you must decide what order is most appropriate for the chunks. In many cases, the right order is obvious because the information is sequential.

For non-sequential information, put what users need most first

If there is no obvious chronological or sequential order, put what users want or need most first.

How do you write clearly?

Here are seven keys to writing clearly for the Web:

• Put the main message first.
• Cut out words.
• Keep paragraphs short.
• Keep sentences short.
• Use fragments.
• Use the users’ words.
• Give examples.

Put the main message first

What’s the key message (the essential message) that you are trying to convey? Figure that out and put it first.

Next put what will interest most users below the main message. Put further details that only some users want on other pages that are linked from the main message.

Cut out words

You can often convey the essential message in half as many words as you originally wrote.

Revise. Revise. Revise. Do not assume that your first draft is the best you can do. Write a draft. Leave it for a day or so. Go back to it and try to make your point even more succinctly.

Keep paragraphs short

A one sentence paragraph may be fine.

Keep sentences short

Users need to grasp the meaning quickly. You can often put secondary information in another sentence, in a table, in fragments, or leave it out entirely.

Use fragments

In frequently asked questions (FAQs) for example, you don’t have to repeat words from the question in the answer.

Use the users’ words

Think about these points:

• The Web is available globally. Should you change words to reach a world-wide audience?
• Even if you are writing for a United States government site, don’t you want people outside of the U. S. to understand your content? Even if your audience is only U. S. residents, consider how many of them speak English as a second language.
• For your broader audience, should you translate the Web pages into other languages? Short sentences, simple words, and consistency all contribute to easier translations.
• Did all users understand the language in your paper documents? Even your traditional audiences may be better served by plain language.

Give examples

Users love examples. They often go to the examples instead of reading the text.

How do you write visually?

Here are six keys to writing visually:

• Use bulleted lists.
• Use numbered lists for steps in a procedure.
• Use tables.
• Use blank space effectively.
• Meet users’ expectations for presentation.
• Include pictures and other graphics, when appropriate.

Use bulleted lists

Lists are an excellent way to break up text. Nielsen found that lists accounted for 47% of the improvement in changes he made to the Sun Web site. Visit Jakob Nielsen’s How Users Read on the Web.

Use numbered lists for steps in a procedure

Recognize when you are telling people how to do something. If it is a procedure, it has steps. If it has steps, set them out in a numbered list.

A numbered list has many advantages. Users can easily

• see how many steps they have to do
• do one step at a time and know where to come back to
• start in the middle if they had done some steps earlier
• use the list to check that they have done it all

Use tables

A table is a visual way of representing a series of “if, then” sentences. We use a table by scanning down the first column to find the place that fits our situation. Then we look across that row to find the information we are seeking for our situation.

Each of these rows is says, “If the value of the order is this amount, then this is how much you pay for shipping.” The above table shows the essential information without all the little words that you would have to repeat in each sentence if you wrote it out.

A table can be words as well as numbers. In putting together a table, always make the left-most column the one that has what people know when they come to the table - what you would put in the “if” clause of an “if, then” sentence.

Use blank space effectively

Space is at a premium on Web pages. Large amounts of blank space are a waste of screen “real estate” and can fool people into thinking there is nothing further down the page.

If you have no blank space, however, users won’t find the different pieces of information. They won’t see your “chunks.”

Fragments, examples, lists, and tables all put space on the page because they are shorter lines of text.

Meet users’ expectations for presentation.

For example, if you are giving an address, write it on separate lines like an address.

If you are giving prices or hours, list them as you would see them in a store.

Include pictures and other graphics, when appropriate

Pictures, line art, charts, and other graphics should contribute to the message, not just look pretty. Even a small icon, like the symbols for “printer-friendly version” and “e-mail this page to a friend” can help users find and understand the information quickly.

A word of caution: Think globally. Will your icon or picture be recognized around the world?

Next steps

While the content writers on the team are writing clear content, others on the team might be Creating Prototypes. An efficient way to get a lot of design ideas is to Use Parallel Design.

What is card sorting?

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.

What do you learn from card sorting?

Card sorting helps you learn how users think about your content and how they would organize the information on your Web site.

What are the benefits of card sorting?

Card sorting helps you build the structure for your Web site, decide what to put on the home page, and label the home page categories. It also helps to ensure that you organize information on your site in a way that is logical to your users.

What are the different types of card sorting?

There are two types of card sorts: an open card sort and a closed card sort.

In an open card sort, participants are asked to organize the cards into groups that make sense to them and then name each group. In a closed card sort, participants are asked to sort items into pre-defined categories.

The following table describes the benefits of each method:

How does card sorting work?

After you select (or recruit) a group of participants who closely resemble your user population, you should:

1. Give each participant (or two participants working together) a set of index cards. Each card should include one topic from your Web site.
2. Ask participants to group the cards in a way that makes sense to them. Many participants start by placing the first card on the table and then look at the second card to see whether it belongs in the same group or if it deserves its own category - and so on through the set of cards.
3. After participants have grouped the cards, you can ask them to name or label each group.

Why should you use index cards with one topic per card?