Worldwide [change] |Account |Register |About Cisco
Guest

Hierarchical Navigation

Cisco.com User Experience Guidelines and Standards

Lists

Lists are most effective when they are nested no more than two levels. Beyond two levels creates a large indent that uses a significant amount of horizontal space on the page. Long lists of links are most effective when organized with sub-heads, which improve the users’ ability to scan the information and more quickly find what they’re looking for. For more details, see the Sub-headlines section.

Types of Lists

The following types of lists can be used anywhere on the site:

List Type Purpose
Bulleted List Useful for breaking up web pages with long paragraphs of text. The pages are easier to read since the information has been grouped into more manageable, readable segments. And used with sub-headlines, provides additional ways users can scan the page.
Ordered List Use when you want to list a number of items, communicate the priority of the items or list the number of steps in a process.
List of Links Appear in any type of list and with any type of heading. When more than 10 items appear in the list, organize the links into groups so they're easier for users to scan to find the information. Use standard sub-headings within the list when organizing it into sections.
Anchor List Provide quick access to specific information within a single web page, for example, a list of articles or Questions and Answers. Keep the list of anchor lists between four and eight items in the list unless clearly organized into identifiable sections as in the following example. Once the anchor list is selected, it's important to make sure users easily see the "Return to Top" at the end of the section.
Downloads/MIME Type Listing A download is a link or a list of links comprised of different mime types that require a different program to open, for example a PDF file may launch the Acrobat reader.

You may have just one file to link to, for example, a data sheet; or you may have a long list of files to provide links to with a combination of file types, each of which will need a separate link.

Featured Links

Use this page element to highlight selected content.

  1. Featured Links is comprised of a blue title bar and a list of links.
  2. This page element can be placed in a narrow or wide column depending on the overall page content and its needs.

View the code for this element

Display of Date in News Feed

Format news feed so the news release date comes after the news link without a line break.

The date should never be broken in half; in this case, the date will be forced to the next line.

Anchor Lists

Notice in this example how the questions are organized into easily scannable groups.

Downloads/MIME Type Listing

To maximize the user's ability to find a file:

  1. A list with up to nine items is formatted in the upper-right corner of the page in a box.
  2. A list with 10 or more downloads starts after the content on the page where the list can be as long as necessary without interfering with the content.
  3. A page comprised completely of download links uses the center column of the three-column layout.
  4. Use the icons in the list to help users quickly identify the file type.
  5. Include the file name and size so users can estimate download time.

View the code for this element

View the code for this element