Consider the entire site when planning the design

Guilt Free Deserts

Guilt Free Desserts

Get Instant Access

From your site visitors' point of view, your home page, pathway pages, and information pages are all part of the same site. Your site visitors don't know - or care - that different people may be responsible for different parts of the site. To them, it's all part of the same experience -getting the information they need or buying the product they want.

The design challenge is how to maintain patterns and alignment across different types of pages while making each type of page serve its purposes well. To see how this can be done, let's look at an e-commerce example and an information site example.

The options at the top don't quite line up with the left line of the lower area.

The byline, text, picture, and interview all line up cleanly.

The options at the top don't quite line up with the left line of the lower area.

The byline, text, picture, and interview all line up cleanly.

Figure 7-4 Again, I added the light gray overlay and the dotted lines to show the text area and the alignment.

An e-commerce example

An e-commerce site has at least these page types in addition to its home page:

• gallery pages (showing several items of the same type)

• item description pages

• a series of pages in the checkout process

• information pages about the company, policy pages (such as when and how you may return items), and perhaps other pages with stories or instructions

Figure 7-5 shows four pages about Godiva chocolates. Notice how well the web site maintains patterns, alignment, and consistency across different types of pages.

Figure 7-5 shows four pages about Godiva chocolates. Notice how well the web site maintains patterns, alignment, and consistency across different types of pages.

Part of the checkout process An information page

Figure 7-5 This site does an excellent job of maintaining consistent patterns and alignment across different types of pages while allowing each page type to serve its purpose. www.godiva.com

An information site example

An information site should also maintain consistency in patterns and alignment across different types of pages. Figure 7-6 shows how this is done at www.usability.gov, from the U. S. Department of Health and Human Services - a great resource on usability for everyone on your web team.

Plan a consistent design across the web site

Use the process in Checklist 7-1 to plan for a consistent design across the different types of pages in your web site.

Usability.govM

Step-by-Step usât.,ht

Guíele

1

• SMteMia 1 « MbklH

# iih— ww, ton,

: M, \ :

• UHMtrt

HPHPUI * tMHilMlM

Vuljmr, IbwlWIai

» -I -JJXI (KU

* UMtwir Shci

• Uubtty i'WMt

¿gjj». .

• wo*.

mtPiMtii ¡h i iwwppumii ri««<!■»i>i■ i>

The home page

The home page

Usability.gov»^

Cari Iwuhd

Usability.gov»^

uutMMy Melhoai

A pathway page

uutMMy Melhoai

An article from a different section - from Usability An article from that pathway page Basics

Figure 7-6 Sites that are primarily for information can also develop clean, clear patterns with alignment and consistency.

An article from a different section - from Usability An article from that pathway page Basics

Figure 7-6 Sites that are primarily for information can also develop clean, clear patterns with alignment and consistency.

Checklist 7-1

Process for creating a consistent design

1. List all the types of pages the site will have, including all the different types of information pages and forms.

2. Minimize the number of page types. For example, for an e-commerce site, pages with company information, pages with policies, and perhaps even pages with informative articles would probably work well as one page type rather than as three different page types.

3. Give each page type an informative name so that the entire team can talk about the pages.

4. For each type of page, list all the elements that will appear on that page type.

5. Check with people who might contribute to or use the pages to be sure you have all the page types and all the elements for each page type.

6. Plan the entire set of page types together, developing designs that work as broadly across page types as possible.

7. Where pages need different patterns or alignment, make those as compatible as possible.

Understand the process that moves from plan to launch

Content writers should be aware of the design process that takes a web site from planning to final pages. Most teams move from sketches showing the elements of each page type (wireframes) through several rounds of ever more finished prototypes. The final version of each page type becomes a template that content writers, designers, and coders use to develop the actual pages in the web site.

Figure 7-7 shows four steps (out of at least 9 or 10) in one team's process from wireframe to prototype to template to final web page. The site is for people who are new to and contemplating attending The Open University in the U. K. Whitney Quesenbery and Caroline Jarrett, who were part of the project team, shared these with me, with permission from Ian Roddis.

You should be doing iterative usability testing throughout this process, with several versions of your prototypes.

Wireframe, showing which elements will be on this type of page and where they will go.

Prototype with draft content for a second round of usability testing.

Prototype with draft content for a second round of usability testing.

Template with explanations of what goes where. The Page in the live site.

words in the content area are just showing where text will go. (This is called "greeking," although the words, starting with "Lorem ipsum," come from Latin.)

Template with explanations of what goes where. The Page in the live site.

words in the content area are just showing where text will go. (This is called "greeking," although the words, starting with "Lorem ipsum," come from Latin.)

Figure 7-7 How one team moved from wireframe to prototype to template to final web site. This set shows only two of many iterations of wireframes and prototypes. Example courtesy of The Open University web team, led by Ian Roddis.

Integrate content and design from the beginning

Every step in this process involves meshing content and design. Even the list of page elements requires decisions about content. What will the content be like on each page type? Will there be in-page links on information pages? If so, where should they come? How much information will there be about each item in the catalogue? How long will typical headings be in the content? What patterns will the content writers use for their information? And so on.

As design progresses, more and more decisions must be made that affect web content. The placement and space allotted for different pieces of content on each page type constrain what writers can do. And so, writers must be involved in decisions about that placement and space. Decisions about font and color usually belong to the visual designer, but designers must work closely with content specialists to be certain that the choices will produce web pages that are both aesthetically pleasing and easy for people to skim, scan, read, and use.

Was this article helpful?

0 0
Making Chocolate 101

Making Chocolate 101

If you love chocolate then you can’t miss this opportunity to... Discover How to Make Homemade Chocolate! Do you love gourmet chocolate? Most people do! Fine chocolates are one of life’s greatest pleasures. Kings and princes have for centuries coveted chocolate. Did you know that chocolate used to be one of the expensive items in the world, almost as precious as gold? It’s true!

Get My Free Ebook


Post a comment