DESIGN
GUIDELINES
The Rise of the Sub-Site
Web
users need structure to make sense of the many and varied information spaces they
navigate. The fundamental nature of the Web does not support any structure beyond the
individual page which is the only recognized unit of information.
Single
pages are obviously not sufficient as a structuring mechanism, and from the early days of
the Web, we have advocated an emphasis on the site as an additional
fundamental stucturing unit. Since a single click can take the user to the other end of
the world, every page needs to provide users with a sense of place and tell them where
they have landed. A recommended standard is to put a corporate or organizational logo in
the upper left corner of the screen (upper right corner in countries using a
right-to-left language). When clicked, this logo should take the user to the main home
page for the site.
Explicit
recognition of the site as a structuring mechanism is important for Web usability, but
most websites are much too large for the site level to provide the only structure. Much
information can be hierarchically organized, and an explicit representation of the
hierarchy can be added to the top of the page to provide additional context and navigation
options. For example, the intranet for the hypothetical BigCo company might have the
following list of the nested hierarchy leading to the home page for the Stockholm office:
BigCoWeb -> Sales -> European Region -> Sweden ->
Stockholm Office
Each of
the elements in the hierarchy list should be made a hyperlink to the appropriate top page
for that level of the hierarchy. Note that the name of the lowest level of the hierarchy
(here, "Stockholm Office") should not be a link when displayed on the top page
for that level. Even the lowest-level name should be made active when displayed on a leaf
page on that level.
For
information spaces that cannot easily be hierarchically structured, the sub-site
can be used as a helpful additional structuring mechanism. Sub-sites can also be used in
hierarchical information spaces to give particular prominence to a certain level of the
hierarchy which is used as the sub-site designator.
By
"sub-site", simply means a collection of Web pages within a larger site that
have been given a common style and a shared navigation mechanism. This collection of pages
can be a flat space or it can have some internal structure, but in any case it should
probably have a single page that can be designated the home page of the sub-site. Each of
the pages within the sub-site should have a link pointing back to the sub-site home page
as well as a link to the home page for the entire site. Also, the sub-site should have
global navigation options (e.g., to the site home page and to a site-wide search) in
addition to its local navigation.
Sub-sites
are a way of handling the complexity of large websites with thousands or even hundred of
thousands of pages: By giving a more local structure to a corner of the information space,
a sub-site can help users feel welcome in the part of a site that is of most importance to
them. Also, a large site will often contain heterogeneous information that cannot all be
squeezed into a single standard structure, so the ability to have sub-sites with somewhat
different look-and-feel can provide an improved user experience. A sub-site is a home
environment for a specific class of users or a specific type of usage within a larger and
more general site.
There
is a tension between the desire of the sub-site designer to optimize fully for the
specific needs of local information versus the need for consistency across the entire
site. Sub-sites should definitely not aspire to become independent sites with no relation
to the parent site of which they are part and which should provide them with context and
richness. In my opinion, IBM's new AlphaWorks
sub-site is an example of what not to do: IBM
has maintained a strong site identity across all their other sub-sites with a logo in the
upper left corner and a tilted sub-site image in the upper right, but AlphaWorks hides the
logo at the lower left and has an inconsistent style. It's almost as if
AlphaWorks was ashamed of its parent site.
A good
example of a sub-site done right is ZD Net's AnchorDesk.
AnchorDesk provides a platform for the respected computer industry commentator Jesse Berst
to discuss current events in computing and pull together recommended links to additional
information from across the rest of the Ziff-Davis site. The AnchorDesk sub-site uses
human editing as a guide to an otherwise overwhelming information space and has
value-added use of hyperlinks to provide the foundation for the commentary.
In Defense of
Print
As an
online publishing enthusiast, I sometimes get ridiculed for having written a traditional
printed book about hypertext and the Internet. It is an unfortunate fact that current
computer screens lead to a reading speed that is approximately 25% slower than reading
from paper. We have invented better screens and it is just a matter of time
before reading from computers is as good as reading from paper, but for the time being we
have to design our information for the actual screens in use around the world.
The
reduced reading speed on computers can be compensated by good hypertext design that allows
the user to read less information and to find it faster. A typical example is online help
and documentation: because the information is right there on the computer, there is no
need to spend time finding the hardcopy manual, and because of good search tools and
hypertext links between related information, users can go directly to the one or two
sections that contain the answer to their problem. After all, Nielsen's first law of
computer documentation is that users don't read it. The second law is
that if they read it anyway, it's because they are in deep trouble and need the answer to
a specific problem. Thus, somebody reading a manual won't really read it
cover-to-cover, so online presentation makes perfect sense.
Other
types of information do require the user to read large amounts of text. A typical example
would be the instructional materials to teach a programmer a new programming language.
Users typically want to spend an extended period of time reading long texts and they
prefer not having to sit at their screen while doing so. Thus, even when the reading speed
problem gets solved, we may still find that people decide to print out long texts rather
than read them on the screen.
In any
case, our surveys have shown over and over again that users do like the ability to get
long documents in hardcopy, which is why even online publishing systems need a print
feature. The implication for web design is to provide printable versions of any long
documents. Web browsers are slowly gaining decent print functionality, but one cannot rely
on browser companies to produce well-crafted printouts since their main interest is online
information. For example, Netscape and Internet Explorer both use the same typeface and
font size for online viewing and printing, even though it is known to all typography
specialists that the two media require different type.
My
recommendation is to generate two version of all long web documents: one that is optimized
for online viewing (is chunked appropriately into many files and has plenty of hypertext
links) and one that is optimized for printing (has good layout and is in one piece). The
print file should probably be in formats like PostScript or PDF. It is extremely important
to denote any such files as being for printouts only and always supplement them with links
to the same content in HTML for online viewing by users who want to browse or search a
small part of the document.
PostScript
and Acrobat
files should never be read online. PostScript viewers are fine for
checking out the structure of a document in order to determine whether to print it, but
users should not be tricked into the painful experience of actually spending an extended
period of time with online PostScript. We learned this lesson the hard way in one of my
projects: The current release of Sun's AnswerBook documentation viewer displays PostScript
windows of the same pages that are used in our printed manuals. The next version of the
product will use an SGML-based content structure that allows for much nicer information
presentation and searching. All our user tests of the pre-release version show
tremendously enhanced user performance and satisfaction with the new product, so you have
something to look forward to if you are a Sun customer.
