PROBLEM

Browsing content on a site can be difficult if the information is not organized, or if there are no clear and consistent navigation cues for finding content and returning to it later.

SOLUTION

FigureB2.3
Present content in a simple, scannable format that leads browsing readers from one page to the next, while giving them clear navigation markers to make their way back.

Organize your content in several ways, in categories that make sense to your customers and in the intuitive ways that they think about doing their tasks. Build navigation tools and cues that let customers know where they are, where they can go, and how to get back. Build each page with its own reading hierarchy so that customers can scan it quickly.

PROBLEM

Making a government agency’s information available on the Web can be helpful, but if the agency is too large and centrally controlled, its Web site can seem unresponsive, bureaucratic, and impersonal to its customers.

SOLUTION

FigureA4.4 Secure, autonomous applications eliminate the need for people to wait in line, and personalized pages give people direct access to local agents and information.

Provide secure, autonomous self-service applications that report current process status through your site and e-mail after the initial request submission. Give your customers the estimated time to completion, on the basis of the kind of request made. Personalize site information for each citizen by giving direct access to that citizen’s agency representative and providing answers to questions posted by local community members.

Background

Close

PROBLEM

Customers appreciate the convenience of ordering online, but if a site is cumbersome, is veiled about its pricing and policies, or does not seem to provide a personal benefit, they leave.

SOLUTION

Figure A1.5 E-commerce sites should offer value, allowing customers to shop, collect multiple items, and then quickly check out in a secure manner

Differentiate your site so that customers know why it’s compelling and valuable. Give shoppers browsing and searching tools, and provide rich, detailed information about your products and services. Make your site accessible to everyone. On every page include clear links to your privacy and security policy, shipping and handling policies, return policy, and frequently asked questions. Let customers collect items in one place and check out quickly, with minimal distraction.

From the 2003 eHoliday Moody Study, conducted by Shop.org and BizRate.com (www.shop.org/press/03/120903.asp).

PROBLEM

Web site visitors become frustrated when a process takes longer than they expect.

SOLUTION

FigureH13.6 Progress bars set customers’ expectations as to where they are in a process and how many more steps are left.

Outline the major steps in a process and visually indicate which steps have been completed, what the current step is, and what steps are yet to come. Label your progress bar steps with a summary of what will be expected, if space allows. You might also indicate what will be coming in the next step. When building a progress bar that can skip from any step to any other step, make the steps appear clickable./a>

PROBLEM

Specifying a particular option in a long list can be daunting.

SOLUTION

FigureH12.5 Drill-down options allow your customers to quickly pick interdependent options from multiple pick lists or hierarchical menus without having to wade through all of the possible combinations of options.

When you have too many hierarchically organized items to fit in a single pick list, you can create drill-down options using multiple, hierarchical pick lists or menus. If you use multiple pick lists, deactivate the secondary and tertiary pick lists until the customer selects a parent pick list option. If you use hierarchical menus, configure the secondary and tertiary menus to stay visible for a second or two even if customers move the mouse away from the parent option.

PROBLEM

Filling out forms can be tedious when lots of typing is required.

SOLUTION

FigureH11.4 Predictive input makes it more likely that your customers will complete forms quickly and accurately./div>Change type-in fields to predictive pick lists when option lists are short. Use predictive text input for medium and large option lists. Configure forms either to preload predictive input with the page or to load it dynamically. Build a list of text strings that can function as viable options for a particular form field, and sort them using an appropriate method for the information: alphabetical, chronological, or by popularity. Create a predictive text input window that appears when the customer begins typing in the field. Size the window appropriately for the amount and type of information to be displayed and its place on the screen. Let customers choose options with both the keyboard and mouse.

PROBLEM

Forms can be tedious and frustrating to complete, especially when they’re long or difficult to understand.

SOLUTION

FigureH10.4 Clear forms make the purpose for collecting each data item obvious, simplify data entry, and automatically validate the data, if possible, while also communicating how the customer benefits by filling out the form.

Provide a payoff for the form by specifying what customers will receive if they supply their information. Choose label names carefully, using familiar language and abbreviations, and then test the labels. Place labels beside, above, or below input boxes, but make sure the labels are visually associated with their fields. Help people input data that needs to be specially formatted by automatically skipping from field to field or formatting the data for them. Keep forms short, or split longer forms into multiple pages with a progress bar, or into clear sections on one page. Provide simple instructions, as well as examples that clear when the customer types. Reduce the amount of typing required of customers by using predictive input. Provide intelligent error handling by reloading the page with all information intact, by calling out problems at the top of the page, and by providing instructions next to each problem.

PROBLEM

Sites sometimes require a long time to process or load information, but making people wait can cause frustration.

SOLUTION

FigureL6.8 Optimizing your server code and pages to load quickly and giving customers feedback when there must be a delay will improve the customer experience on your site.

Make your site as fast as possible by optimizing server code, bandwidth, and page designs. For pages that still take time to load, use a progress indicator to demonstrate to customers that the system is working. You can simply inform people with a text message such as Loading, use marching ants to draw the customers eye, create graphical indicators such as barber poles or thermometers, or ideally display parts of the content as they load instead of waiting for the entire page.

]]> http://www.designofsites.com/patterns/reusable-images/feed/ http://www.designofsites.com/patterns/site-map/ http://www.designofsites.com/patterns/site-map/#comments Mon, 30 Jul 2007 19:30:52 +0000 Corey Patterns Making Navigation Easy http://digdag.burtondns.org/patterns/site-map/ FigureK17.1 State Farm uses a site map with a grid-based hierarchical organization that provides links to category pages and enables visitors to locate specific functions within each category quickly.

Background

Used by most site genres (Pattern Group A), a site map offers an overview of the entire Web site and is used as a backup form of navigation. It is one way of providing MULTIPLE WAYS TO NAVIGATE (B1), as well as BROWSABLE CONTENT (B2).

Close

PROBLEM

Finding specific information in a site can sometimes be difficult, especially if it’s not obvious where to start looking..

SOLUTION

FigureK17.4 Site maps can help your customers navigate the site when all other navigation options have failed.

As a backup to site navigation and search, create a site map page that contains links to all of the features offered on the site, and organize the page to serve the needs of all types of visitors equally. Keep the site map page simple containing only text and HTML so that it loads quickly. Use a grid layout to keep as many links visible as possible, and place most of the content above the fold. Organize the page using a suitable hierarchy, with categories to separate links for different functions, visitors, or types of content. Link the categories to category pages for quick access to general content. Include a link to the site map from the header or footer of every page.

Other Patterns to Consider

AA site map provides access to the content of a Web site with more detail than a HOMEPAGE PORTAL (C1) or even CATEGORY PAGES (B8) can. A JUMP MENU (K16) can enable access to more pages and takes up less space than primary and secondary NAVIGATION BARS (K2) do, but it still won’t provide as comprehensive a list of destinations as a site map can. Like every other page on your site, your site map needs to use OBVIOUS LINKS (K10) and fit as much content as possible ABOVE THE FOLD (I2), arranged in a GRID LAYOUT (I1) and with HIERARCHICAL ORGANIZATION (B3), and possibly with TASK-BASED ORGANIZATION (B4) as well. Using all-text links and HTML POWER (L4) for the site map enables the page to load quickly, even though it might contain a huge amount of information, and provides an alternate destination when you’re WRITING FOR SEARCH ENGINES (D6). A site designer must do a good job building BROWSABLE CONTENT (B2) and organizing the content in a way that’s meaningful for visitors. If your visitors encounter a PAGE NOT FOUND (K14) error, provide a page that makes it easy to see what content you have on your Web site. This page might include a NAVIGATION BAR (K2), a SEARCH ACTION MODULE (J1), and relevant portions of your site map.

Close

]]> http://www.designofsites.com/patterns/site-map/feed/