作者：Carlota Sola 14 年以前
245
更多类似内容
On this site, cases are generally given a single page. Note the size of the scrollbar in the upper right; this document is over 50 screens long, even at a fairly large browser size. For smaller resolutions it may occupy 100 screens. The nature of the content, however, calls for a single page. People doing legal research online need to see the entire document, even if they end up using only a single sentence from it for their own work. Additionally, it is probably safe to assume visitors will either download or print it for reading.
It may not be efficient to require people to download pages for small bits of content.
Instead, sending more information with each page (i.e., longer pages) may reduce the number of calls to the
server. But there’s long and then there’s long. At a certain point it makes sense to chunk volumes of information. Presenting an entire book as a single page, for instance, would cause performance problems.
People don’t like to read online
For longer texts, it’s safe to assume many people won’t read from the computer screen. Reading longer documents offline is less problematic and preferred by most. It’s acceptable to provide long text pages if people are going to print them anyway.
Content might not have the same impact or meaning when it’s broken up into multiple smaller pages
Screen size is problematic because there is no single screen size to design to
On the Web, a wide range of browser sizes exist and vary based on monitor resolution, the number of browser toolbars or sidebars a person has, and the size of the browser window on the desktop.
Functional pages allow people to perform a task, such as conduct a search or check email; examples include search pages, submission forms, and applications.
The functions to manipulate the datasheet at the top closely resemble software navigation. Notice, however, that there are a few links in the upper-right and at the
bottom that navigate away from the workspace. If they have not saved their work, users are warned
before they are allowed to navigate away from the page.
An online social networking platform. The navigation is limited to a few links only, including help and terms of use.
Search form for Yahoo
Advanced search
Requires more space; consequently, a separate page is usually needed.
Standard search
Content pages are the substance of your site and why people are ultimately there; examples include articles and product pages.
Note the good use of contextual navigation to point out related products in the center left of the page. Visitors can also look at products up close in a separate pop-up window.
Several functinal elements
Email this page
Change size or color
View larger images or zoom in
Save to a wish list
Add to a shopping cart or purchase
Typical elements to product pages
Product descriptions
Related products
Futher details
Product pictures
The purpose of navigational pages is to direct people to the content they are looking for; examples include home page, landing pages, and galleries.
Search results pages resemble gallery pages, but are dynamically created based on user-entered keywords.
The collection of resulting links doesn’t necessarily have the benefit of handcrafted categories such as those
found on gallery pages. Depending on the search terms, results may or may not be of a single product or
content type.
The search results for the term “shirts” on the Lands’ End UK site
Note that men’s shirts are also included in the results and that the display and format of each of the hits is different than the setup of the gallery page. Within the search results, more detailed information is offered, but visitors initially get less of an overview of all available shirts.
Galleries are similar to landing pages, but provide an overview of a specific group of products or content
instead of links to a site department or section. Gallery pages are more than just a means to navigate a
product page: they contain critical shopping information and allow visitors to compare products. Shoppers
may even decide to purchase from gallery page alone. They then go to the product page for more detailed
information to confirm a decision.
Gallery page for Lands’ End in the UK for women’s shirts
Although it contains thumbnail images and price information, more basic details about each shirt might
help this page be more effective. On the plus side, visitors can see nearly all of the products Lands’ End
offers in the category at a glance. Galleries like this one are vital for e-commerce sites and the online shopping
process.
Also called: sub-section start pages, category pages, overview pages, department pages.
Landing pages provide an overview of main site categories. These often correspond to the options in a
main navigation and might be departments of an online store or the main sections of an online newspaper.
Similar to how a home page provides an overview of the entire site, landing pages provide an outline to the content in a given section.
Gateway
A large mail-order computer distributor in the US, has a range of products on its site.
Providing a dashboard-like view into the rest of your pages, home pages direct visitors to key areas of your
web site. A common strategy is to show lower levels of navigation directly on the home page. This aids in scanning and provides a path to content that may not otherwise surface immediately within the site.
the home page for the University of California,
Is a portal to the all of the other pages and sites maintained by the university.
Most navigation types fall into three primary categories.
Connects pages with similar topics and content, regardless of their location in the site; links tend to
cross structural boundaries.
Vitaminshoppe
Internal paga navigation
Also called: anchor links, jump links.
Some web pages can be very long. In these cases, it may be advantageous to add internal page links that
allow people to jump from one section of a page to another. Internal navigation links basically scroll the
page up or down, providing a more efficient way of reaching sections of a longer page. It’s customary to
then provide a reciprocal link back to the top, so internal page navigation tends to come in pairs of links.
Technical specifications of the World Wide Web Consortium
are often very long, as the table of contents for the CSS 2.1 specification shows. These internal links jump within a
page with no reload.
Common internal linking issues
If the last section of content is short, an internal link to it at the top may not scroll to the proper position.
Sometimes a sitewide decision is made to include “Back to Top” links on all pages
Internal links at the top of pages take up valuable screen real estate.
For consistency, all sections of a longer page may be included in jump links
Internal links may or may not be shown as visited links, depending on the link construction and browser.
Browsers don’t distinguish between internal page links and external links.
Language and country selectors
For sites that have sites in multiple languages, a language selector allows people to switch between them.
Most often, visitors jump to the same web site, but in a different language. Sometimes, however, the local
language site is completely different. Transitions may therefore be small or large. If there are only a few
languages to select from, simple links at the top or bottom of the page may suffice.
Example of country selector
Coca-Cola
takes a two-pronged approach: The map is clickable by region, but there is also a navigation to select a country from an alphabetical list on the right.
Internationalization
National images
It’s bad practice to use images of national flags to switch language. Languages are often spoken in more
than one country.
Language
You also need to consider what language the selections appear in. Do they appear in the language of the web
site you are currently viewing, or in their original languages? It’s generally better to show the selections in their original language. Be sure to include diacritics (accents, umlauts, and other special characters) if you choose this option.
On the other hand many countries speak multiple languages. If you have a multi-language site, consider breaking region selection by language as well.
Keep in mind that if you do have a multi-language site, you need to declare the language of each site at the
very top of the HTML code for each page.
Additionally, alt texts for images and all other accessibility measures built into your code, such as frame titles, need to be translated for multi-language sites.
Linked logos
Web sites very often have a logo at the top of each page. It is customary to link the entire image itself to
the home page. People may or may not know of this behavior, so some sites add an explicit label underneath
or to the side of the logo. In general, linking the logo provides a predictable way to return to a familiar
starting point. In some ways it is like an “undo” option within for the navigation process.
Toolboxes
Toolboxes bring together site options that perform functions—“tools” for doing things on the site. Toolboxes
may include links to content or navigation pages, but often they link to functional pages. For this reason,
transitions from this type of navigation may be great, even dramatic. From the home page, for instance, a
toolbar may link to a search feature, contact form, and online shop. This may require more effort in reorientation.
Extra-site navigation
Extra-site navigation is typically positioned at the top right of the page. Although generally quite small and represented as plain text, links in extra-site navigation may result in dramatic transitions. After all, they do lead to completely different sites. A common goal, however, is to make the navigation mechanism consistent across all sites. Unfortunately, these links are not always reciprocal, and the destination site may not link back to the originating site.
Connects pages with similar topics and content, regardless of their location in the site; links tend to cross structural boundaries.
There are three common types of associative navigation
Also called: associative links, related links.
Amazon
even shows visitors’ history for a given session at the bottom of product pages.
Other elements that may appear in this area
among others ....
a page rating features
ability to comment on a page
site help
an Email a Friend link
a Print Page feature
It can lack consistency in an organizational scheme
Often used as a catch-all for various types of content
Addresses a legal requirement for site owners
So it doesn’t address a specific user need.
Contains supplementary information not pertinent to main topic of the site.
site credits
ternms and conditions
copyright information
Usually represented by text links
These often access a single page with no further levels of structure below them—a deadend, so to speak.
Located at the bottom of the page
Similar to contextual navigation but quick links are contextual for the entire site, not a given page.
The Princeton University web site
quick links highlight key areas that are not represented by top-level navigation options. On the home page shown here, however, it might be better to display these links directly on the page, perhaps in a site map-like rrangement. Hiding them in a menu reduces the ability to rapidly scan the options.
To...
a new web site
an online shop area
a related sub-site
Dynamic menu
Provide access to important content or areas of the site that may not represented in a global navigation.
Adaptive navigation is a special kind of a contextual navigation.
Web journals like the web of Boxes and Arrows
allows readers to rate each story at the bottom of the text. Based on all ratings for all articles, visitors are then able to view the site’s top-rated stories in the navigation.
Has been most prominently used to make recommendations on e-commerce sites.
The top items are displayed in a top-10-list fashion
Accessibility
Embedded links or associative navigation must make sense when read out of context. It’s common to label
associative links “For more information, click here,” for example, with “click here” the only linked words. When skipping from link to link on a page, a screen reader user would just hear the link text and not the preceding phrases: “click here,” “click here,” “click here,” and so on. It’s better to link the entire sentence, or at least enough so that the linked portion is understandable on its own.
Example
The web site for The Washington Post
Includes a link that allows users to automatically search for even more articles on the same topic.
And also links to the most-viewed articles from the same section that the current article is in (in this case, Sports), including a link to see the top 35 most-viewed articles in that section.
Education page on the web site of the Information Architecture Institute
Links in the text lead to other pages in the site on various levels of the structure. The first link in the last paragraph opens a PDF document, as noted in the text. The second link goes to Amazon.com.
Typical Arrangaments of contextual navigation on the page
Related links
Contextual navigation may appear at the end or to the side of content.
Embedded navigation
Contextual navigation may be embedded within the text itself. As a result, contextual navigation is often represented as plain text links.
Generaly is placed close to the content of a page
This creates a strong connection between the meaning of a text and the linked related pages
Though links may transition to similar pages at the same level
Situational
Contextual navigation can vary
Connects one page to another based on the hierarchy of the site; on any page you’d expect to be able
to move to the page above it and pages below it.
Show navigation at the bottom of the page and to have a Skip to Navigation link at the top of the page for keyboard-based browsers.
Place a Skip Navigation link before the navigation mechanism starts, so visitors can jump to the main content of a page, thereby skipping the navigation.
Issues for screen reader users.
people don’t need every menu option read aloud on every page repeatedly. For the first page a screen reader user encounters while using a site, this may be helpful. But on subsequent pages, it’s time-consuming and annoying to hear the same options read each time.
Local navigation varies more often than main navigation, it is often treated differently.
Embedded vertical
When the main navigation is presented in a vertical menu on the left or right, it’s common to embed the local navigation between the main navigation options in a tree-like structure.
Horizontal
Local navigation might also be represented by a second row of options under a horizontal global navigation
or by dynamic menus.
Inverted- L
It is very common to place a global navigation along the top of the page and have local navigation as a vertical link list on the left in the shape of an inverted L.
Local navigation works in conjunction with a global navigation
Also called: sub-navigation, page-level navigation.
The Duch Version of the Philips web site
Represents the local navigation with dynamic menus, which conserve screen real estate while providing quick access to options.
Is an extension of the main navigation
Shows other options at the same level of a hierarchy, as well as the options below the current page.
To access lower levels in a structure, below the main navigation pages.
Also named: global or primary navigation.
Example
Web of University of Valencia
The six main navigation options are on the left below the logo. Some utility links are included to the right, such
as a site map and link to site search. It’s also typical to include a design element, such as a picture or
graphic, to help create a brand image.
Determining factors
Workflows that can't be interrupted
There are times when global navigation shouldn’t be shown, or can vary its form. For instance, some
task flows, such as a checkout process or online bank transfer, should restrain people from jumping
out in the middle of a process.
Stakeholder objectives
Companies have goals. Inherently, some options will be promoted and highlighted over others. A visible,
persistent global navigation may fulfill a stakeholder need.
User behavior and needs
Don’t create prominent and persistent main navigation just for the sake of it. You need to understand
your users and their information needs, then design accordingly
The size
Larger sites with thousands of pages may benefit from a steady main navigational mechanism across
pages. Smaller sites may be navigable with only breadcrumbs or contextual navigation.
Generaly presented in a global navigation area.
utility navigation
Site logo
Gives shape to a site.
the main navigation defines the boundaries of
the site itself.
Reminds visitors where they are in a site
Helps when users get interrupted while navigating
Allows people to switch topics
Visitors can get to other sections of a site efficiently, or they can reset their navigation path and start over using main navigation options.
Aids in orientation
It is comforting to have a persistent navigation mechanism across the site, particularly for large, information-rich sites.
Provides an overview and answers important questions users may have
Top-level pages of a site’s structure.
