The Web Design Summary.doc.doc

Adapted from Web Design: The Complete Reference, by Thomas Powell

General Principles 1
Visuals Tips 6
Web Conventions 9
Usability Guidelines 11

Design Specifics 12
Layouts 15
Setting Fonts 22
Downloadable Fonts 23
Text Design Issues 27

Web Design – General Principles
A personal home page generally doesn't have the economic considerations of a shopping site. An
intranet for a manufacturing company may not have the visual considerations of a public Web site
promoting an action movie, and so on. Building for Users

As already noted, a common mistake made in Web development is that, far too often, sites are built
more for designers and their needs than for the site's actual users. A process model won't guarantee a
good site if designers ignore the needs of their users. Always remember this important tenet of Web
design:

Rule: YOU are NOT the USER.

What you understand is not what a user will understand. As a designer, you have intimate knowledge
of a Web site. You understand where information is. You understand how to install plug-ins. You have
the optimal screen resolution, browser setup, etc. Accept the fact that many users will not necessarily
have intimate knowledge of the site you have so carefully crafted. They may not even have the same
interests as you.

Given the importance of the users' interests and desires, it might seem appropriate to simply ask the
users to design the site the way they want. This seems to be a good idea until you consider another
basic Web design tenet:

Rule: USERS are NOT DESIGNERS.

Not everyone is or should be a Web designer. Just as it would seem foolish to let moviegoers attempt
to direct a major motion picture on the basis of their having viewed numerous movies, we should not
expect users to be able to design Web sites just because they have browsed a multitude of sites.
Users often have unrealistic requirements and expectations for sites. Users will not think carefully
about the individual components of a Web site. In summary, users are not going to have the
sophisticated understanding of the Web that a designer will have.

That said, the key to successful, usable Web site design is always trying to think from the point of
view of the user. User-centered design is the term given to design that always puts the user first. But
what can we say about users? Is there a typical user? Does there exist a "Joe Average Internet" for
whom we should design our sites? Probably not, but we certainly should consider average traits such
as reaction times,

Page 10

- 1-

memory, and other cognitive or physical abilities as we design sites. An overview of cognitive science
helps us understand basic user capabilities and is discussed further in Chapter 3. Remember, however,
that while users may have similar basic characteristics, they are also individuals. What may seem easy
to one user will be hard for another. Sites that are built for a "common" user may not meet the needs
of all users. Power users may find the site restrictive while novice users find it too difficult. Users are
individuals with certain shared capacities and characteristics. Sites should take account of the relevant
differences while focusing on the commonalities, as stated by the following Web design tenet:

Rule: Design for the common user, but account for differences.

Utility and Usability

Great Web sites are truly useful to their users. Usefulness can be thought of as a combination of utility
and usability1. Utility describes the site's functionality that hopefully meets a user's need. Usability
describes the user's ability to manipulate the site's features in order to accomplish a particular goal.
Consider a site that provides online banking facilities: It could be said that it has great utility if it
provides all the features like balance checking, transfer, bill payment, and so on that the user would
come to expect. However, the site itself may be an utter failure because the function provided is so
confusing that the site is effectively unusable. Clearly if a site does not function properly, either
because of designer mistakes or poor design choices that make it difficult to use, it is not a great site.
Usable sites will be efficient, easy to learn, and help users accomplish their goals in a satisfactory and
error-free manner. A detailed discussion of usability is presented in Chapter 3.

Like software, a Web site should only be considered excellent if it is useful, usable, correct, and
pleasing. The meaning of each of these considerations is somewhat subjective, except in the case of
correctness. For a site to be well designed, its execution must be excellent. This means that the site
must not break in any way. The HTML must be correct and the images saved properly so that the
page renders as the designer intended. Any interactive elements, whether in the form of client-side
scripts in JavaScript or server-executed CGI programs, must function properly and not result in error
messages. The navigation of the site must work at all times. Broken links accompanied by the all too
common "404: Not Found" message are not the signs of a well-executed site. While execution seems
like an obvious requirement for excellence, too many sites exhibit execution problems to let this
consideration go unmentioned:

Rule: A site's execution must be close to flawless.

Content Focus

Web sites tend to be much more content-focused than traditional software. The intersection between a
site and its content often becomes very blurry. Content is what makes up a Web site. It provides the
bricks for our virtual pyramid. Content might be text, two-dimensional images, three-dimensional
images, animation, audio, video, or the interplay of any number of these content forms. Original,
quality content is the most valuable commodity of the Web. Users look for useful content and consume
it voraciously once they find it. While pleasing navigational graphics or sophisticated-looking design
may encourage users to begin browsing a site, it certainly won't keep them there. Eventually users
will begin to explore the site with the intention of doing something useful or finding some valuable
content. If there is nothing of use, they will eventually leave. However, even if there is quality
content, it really doesn't matter if the user can't find it.

Looks Matter

While a great Web site has to function well and be easy to navigate, these features are not always
immediately recognizable. A site's visual design is often the first thing noticed. Like it or not, on the
Web, looks do matter. While it may not be possible to force good taste or predict trends, we know that
good Web design is closely related to how people perceive the look of the site. First impressions count
heavily online. Looking at Figure 1-5, a user without any previous knowledge of the two sites would

- 2-

probably assume that the second (front) site was much better and more worth exploring than the
first.

The look of the site may certainly influence a user's opinion of the site. The good-looking site is often
assumed to be "better" than the bad-looking one, at least on first blush. Thus:

Rule: Visuals will heavily influence the user's initial perception of a site's value.

Figure 1-5.
Which site is "better"? Which site is more trustworthy?

NOTE
The issue of looks may also be important in gaining the user's trust, which is so crucial in online
transactions. Consider which site you would purchase from if you knew little about each firm.
Remember that trust isn't solely related to the look of a site and will be heavily influenced by previous
knowledge, endorsements from third parties, or reputation of the firm beyond the Web.

The Take-Away Value

While looks matter at first, users will probably come to focus less on the site's visuals as they continue
to use the site. When a user exits a site, they leave with what might be called a take-away value, a
basic feeling of how successful the site visit was. In general, this feeling is positive, negative, or
neutral to some degree. Consider first the case when a user really hates a site. What caused it? Did
the user find the site difficult to use? Was the site slow? Was the execution of the site poor and did it

- 3-

result in errors? Was the site ugly? There could be any number of reasons a person might leave with a
negative take-away value. While initially the user might be disproportionately influenced by visual
design, the final impression will be influenced by a more balanced combination of visuals, content,
technology, and usability. The take-away value also will be heavily related to whether or not the user
was successful in accomplishing their goals during the visit. Thus, although visuals may play a
dominant role in first impressions, the final impression is much more complicated, as summed up in
the following design rule:

Rule: The site's take-away value is influenced by visuals, content, technology, usability, and
goal accomplishment.
While the take-away value includes more than just a user's opinion of a site's look, never
underestimate the importance of visuals on the Web. Colors, backgrounds, text use, imagery, and
page layout all can be used to improve a page's presentation. Consider the sites shown in Figure 1-6.
One site lacks graphics and layout while the other has them.

The Form and Function Balance
There needs to be a clear and continuous relationship between form and function. Put simply, the form
of a site should directly relate to its purpose. If the site is marketing-driven, it might be very visual
and even incorporate heavy amounts of multimedia if it helps to accomplish our goals. However, if the
site is clearly a task-based one, such as an online banking site, it might have a much more utilitarian
form. Of course, to determine the appropriate form for a site assumes that the function of the site is
clearly defined. Unfortunately, for many Web sites the ultimate function of the site isn't always clearly
understood. Even worse, development of form and function for the site are not always clearly related.
The focus should be on the content and task at hand. Far too often, however, designers attempt to
build memorability for their site by making the interface unusual.

Web Site Evaluation
While it seems difficult to put our finger on what good Web design is, it certainly isn't hard to point out
that which is not well done. Many sites and books can describe what "sucks" or what is poorly
designed. The problem with this approach to Web design is that while it identifies what you shouldn't
do, it generally avoids answering the tough question: What should you do instead? Most of the bad-
design problems are well known: slow pages, gratuitous use of graphics, overly animated pages, sites
continually under construction, confusing links, garish backgrounds, hard-to-read text, slow download
speeds—and the list goes on and on. It will be important during the discussion to point out what not to
do, but spending too much time discussing bad Web design may not be fruitful, particularly when you
consider the truth that there is no accounting for bad taste. Many Web site evaluations seem to focus
more on the designer's lack of good judgment or taste than on positive ways to fix the site.

When evaluating a Web site, consider reversing the design process. In a sense you could call this
"walking up and down the waterfall." First, test the site's implementation. Is the site delivered well? Is
the HTML valid? Are the images saved properly? Do the scripts work? Next, consider the visual and
navigation design. Do you understand the navigation? Are there broken links? Is it easy to find what
you are looking for? Next, make sure you considered why the site was built and for whom. What is the
purpose of the site? What kind of users would use this site? What goals would these users have? Now,
with your design hypothesis, walk back down the waterfall. Does the visual design make sense now?
How about the navigation? Does the site's execution make sense given the audience? Evaluation of a
site should be performed very carefully and opinions formed primarily after looking at all site
considerations. A detailed discussion of site evaluation is given in Appendix B. While designers will
often have to evaluate sites, remember that designers are not users. We may still have to solicit direct
feedback from users to truly verify or correct our beliefs.

…

Narrowing the Goal

Audience

- 4-

The best way to narrow a goal is to make sure that the audience is always considered. What a
brainstorming group wants vs. what a user wants doesn't always correspond. The first thing to do is to
accurately describe the site's audience and its reason for visiting the site. However, don't look for a
generic Joe Enduser with AOL and a 56K modem who happened on your site by chance. It is unlikely
such a user could be identified for most sites, and most users will probably have a particularly goal in
mind. Consider first what kind of people your end users are. Consider asking some basic questions
about the site's users, such as:
• Where are they located?
• How old are they?
• What is their gender?
• What language do they speak?
• How technically proficient are they?
• What kind of connection would they have to the Internet?
• What kind of computer would they use?
• What kind of browser would they probably use?

Next, consider what the users are doing at the site:
• How did they get to the site?
• What do the users want to accomplish at the site?
• When will they visit the site?
• How long will they stay during a particular visit?
• From what page(s) will they leave the site?
• When will they return to the site, if ever?

While you might be able to describe the user from these questions, you should quickly determine that
your site would probably not have one single type of user with a single goal. For most sites, there are
many types of users, each with different characteristics and goals.

Requirements

Based on the goals of the site and what the audience is like, the site's requirements should begin to
present themselves. What kind of content will be required? What kind of look should the site have?
What types of programs will have to be built? How many servers will be required to service the site's
visitors? What kind of restrictions will users place on the site in terms of bandwidth, screen-size,
browser, and so on? Requirements will begin to show site costs and potential implementation
problems. The requirements will suggest how many developers are required and show what content is
lacking. If the requirements seem excessive vs. the potential gain, it is time to revisit the goal stage
or question if the audience was accurately defined. The first three steps of the process may be
repeated numerous times until a site plan or specification is thrown out of the whirlpool.

Definition: Usability is the extent to which a site can be used by a specified group of users
to achieve specified goals with effectiveness, efficiency, and satisfaction in a specified
context of use.

Consider each piece of the definition. First, note that we should limit the group of users when talking
about usability. Recall that usability will vary greatly depending on the user.

Next, usability should be related to a task. You should not consider a site to be usable in some general
sense. Instead, discuss usability within the context of performing some task, such as finding a
telephone number for contact, purchasing a product, and so on. Usability is then defined by the
effectiveness, efficiency, and satisfaction the user experiences trying to achieve these goals.
Effectiveness describes whether or not the user is able to actually achieve their goals. If a user is
unable to, or only partially able to, complete a task they set out to perform at a site, the site really
isn't usable.

- 5-

Next, usability is related to efficiency. If the user makes a great number of mistakes or has to do
things in a roundabout way when they visit a site, the site isn't terribly usable. Last, the user must be
satisfied with the performance of the task.

Many other definitions of usability exist. Some usability professionals suggest that usability can be
concretely defined. Maybe it could be computed as some combination of the completion time for a
typical visit and the number of errors made during the visit. From the user's point of view, that might
not mean much; a user might just be concerned with how satisfied they were after performing a task.
Many usability experts such as Jakob Nielsen (www.useit.com) tend to have similar definitions more in
line with the ISO one. For example, Nielsen suggests that the following five ideas determine the
usability of a site:

• Learnability
• Rememberability
• Efficiency of use
• Reliability in use
• User satisfaction

By this definition, a site is usable if it is easy to learn, easy to remember how to use, efficient to use
(doesn't require a lot of work on the part of the user), reliable in that it works correctly and helps
users perform tasks correctly, and the user is generally satisfied using the site. This still seems fuzzy
in some ways, and conflicts arise easily in usability. For example, a site that is easily learnable by a
novice user may be laborious to use for a power user. Because people are different and come with
different levels of capabilities and Web knowledge, not everyone is going to agree on what is
supposedly usable. A site that is easy to one user may be hard for another.

Rule: Usability and user satisfaction are directly related.

To understand how to make something usable, you must understand users. The next few sections will
discuss usability in light of user capabilities and tendencies. The conclusion of the chapter will revisit
these subjects and present a few rules of thumb that can be applied during Web site design to
improve a site's usability.

Suggestion: There are no generic people. Always try to envision a real person visiting your
site.

• Hue The degree to which a color is similar to the basic colors such as red, green, and blue, or some
combination of these colors.

• Value The degree to which a color differs from achromatic (white, gray, or black).

• Lightness The degree to which a color appears lighter or darker than another under the same
viewing conditions.

Web page designers can avoid vision issues for users if they follow a few simple rules. First, make sure
not to use text or graphic combinations that have a similar hue. Instead of using light blue on dark
blue use blue on yellow or white instead.

Suggestion: Avoid using text, graphics, and backgrounds of similar hue.

It is possible to get in trouble when using colored text on backgrounds with similar saturation. For
example, instead of using a grayish blue text on a rose-colored background, where both colors are
close to achromatic gray, use white text on a rose background or vice versa.

Suggestion: Avoid combining text, graphics, and backgrounds of similar saturation.

Rule: Keep contrast high. Avoid using text, graphics, and background of similar lightness.

- 6-

Suggestion: Avoid using busy background tiles.

Rule: Make sure colors that are meant to distinguish items like links are significantly
different in two ways, such as hue and lightness.

Memory

Users tend to always follow a simple rule: try to do minimal work for maximal gain. Simple human
nature suggests that a user is not going to spend a great deal of time to figure something out unless
there is a potentially good payoff.

Rule: Users try to maximize gain and minimize work.

Rule: Do not make visited links the same style or color as unvisited ones, as it forces the
user to memorize where they have been.

Suggestion: Since it is easier to remember visuals, make pages that should be remembered
visually different from the rest.

Suggestion: Limit groups of similar choices such as links to 5–9 items.

Time Elapsed
Probable User Reaction
0.1 second When something operates this fast or faster, it appears instantaneous or nearly
instantaneous to the user. Unfortunately, due to bandwidth and technology
constraints, few Web pages will exhibit this level of responsiveness in the near future.

1.0 second When something reacts in around a second, there is no major potential for interrupt.
The user is relatively engaged and not easily distracted from what is happening on
the screen.

10 seconds This is suggested to be the limit for keeping the user's attention focused on the page.
Some feedback showing that progress is being made is required, though browser
feedback such as a progress bar may be adequate. However, do not expect that the
user may not look to do something else if they become bored.

> 10 seconds With a delay this long, the user may actually go about other business, look at sites in
other windows, talk on the phone, etc. If you want the user to continue to pay
attention, you will have to give them constant feedback about progress made, and
you should try to give them some sense of when the page will be finished. Consider
when you are downloading software how the browser tries to let users know how
much time is left before the download is completed.

Table 3-1. Response Time User Reactions
Page 62
Rule: Minimize mouse travel distance between successive choices.

Rule: Minimize mouse travel between primary-page hover locations and the browser's
Back button.
Rule: Account for the characteristics of the probable environment in which the user will
access a site.

Location Characteristics
Office Generally computer-based access
Single user
Relatively quiet

- 7-

Should be primarily work or task focused, at least during primary work hours
Often high speed
Home office or Generally computer-based access
bedroom Single user
Noise level variable, but often quiet
Purpose may be work or play
Access could be anytime
Speed of access varies dramatically from modem to high speed
Home living room Access may be from set-top box or video-game console
Distance from device may be larger
Use may be less input oriented (reduced typing)
Noise level variable
May be group-oriented access or single user
Access probably more entertainment related
Printing may not be an end result
Cybercafe Probably computer-based access
Cost may influence usage
Use is probably entertainment or research oriented
Speed of access probably high
May be group oriented or single user
Security or privacy may be a concern
Public kiosk Cost may influence usage
User may be standing
Use will be less input oriented (reduced typing)
Use is probably task oriented-particularly access to communication such as
email or limited to very important information
Access to location-related information may be a high priority
Car Probably noncomputer-based access (PDA or smart phone)
Focus will not be primarily on the access if user is the driver
Use is probably task oriented or limited to very important information
Speed and quality of access is probably low
Mass transit or Probably noncomputer-based access (PDA or smart phone) or using a laptop
plane User may be standing or sitting
Use could be entertainment or work
Access to location or time-sensitive information may be a high priority
Outside Probably noncomputer-based access (PDA or smart phone)
Screen glare could be a significant problem
User may standing or moving
Use is probably task oriented or limited to very important information
Table 3-2. Common User Environments Characteristics
General Types of Users

Suggestion: Aim to create an adaptive Web site that meets the requirements of
novices, intermediates, and advanced users.

- 8-

Suggestion: Design for the intermediate user if an adaptive Web interface is not
possible.

GUI Conventions

Figure 3-5.
Software applications tend to support common interface conventions

GUI conventions are very useful to understand, particularly when designing forms and other
interactive elements of a site. Chapter 12 discusses the use of GUI widgets and provides a brief
discussion of the difference between Web and GUI interfaces. The Web has not been able to develop
conventions that are as well understood as those for software applications. There are two main
reasons for this. First, software applications are often defined significantly by the operating system
they are written for. Microsoft has great influence on how applications written for Windows should
work. Apple can dictate conventions for Macintosh software. Second, the ability to author and
distribute software applications is restricted to a much smaller group of people than in Web design.
Many Web designers lack any formal understanding of GUI conventions and may actually shun them in
favor of artistic freedom.

Web Conventions

Rule: Do not stray from the common interface conventions established by heavily used
sites.

Convention Description
Upper left-hand corner Users tend to expect a corporate logo to return them to the home
logo signals home page page. Most sites put this in the upper left-hand corner. An explicit
return Home button as well as a ToolTip is a good idea.
Text links are repeated at Most sites like to repeat text navigation at the bottom of a page,
the bottom of a page particularly if top or side navigation is a graphical form.

- 9-

Back-to-top link used on While sites will provide text navigation to move to the next page, a
long pages back-to-top link or arrow is generally included at the bottom of the
page to quickly jump the user up the page.
Special print forms used Increasingly, sites are providing special printer-friendly versions either
for heavily printed pages in a stripped HTML form or even in an Acrobat form. This is most
commonly found on sites that distribute large volumes of content.
Clickable items are blue Fight it all you want, but most text links are blue and underlined. While
and underlined many users may be able to understand nonunderlined links or different
colors, the best way to signify that something is pressable is making it
blue and underlined. Be careful creating logos or other content that is
blue, as users may actually try to click on it.
Secondary navigation Because they are navigation aids, most sites have tended to put less
elements such as site emphasis on links to site maps, site indexes, help systems, and even
map or search are search facilities. However, given the rise in popularity of search
presented separately features, content-rich sites may especially emphasize search facilities.
from sectional navigation
Table 3-3. Some Common Web Conventions

Figure 3-6.
Web conventions in practice

The problem with Web conventions is that they are moving targets. New conventions may be invented
and sweep across the Web like fads. Consider how frames were very popular in the past. Splash pages
also used to be popular, but have somewhat fallen out of favor. Conventions are not always well
considered, and may often have more to do with novelty than usability. However, don't use this as an
excuse to attempt to invent new conventions or avoid them. The best way to keep up with current
conventions is to simply browse the well-trafficked e-commerce and content sites often and look for
common features. If users are exposed to features there, such as one-click ordering, it isn't going to
be difficult to explain to them how it works on your site. Don't assume that everyone understands
common conventions or that all users will be able to use current conventions. Some users will have
special needs.

Accessibility
From the W3C guides, you should always consider that users may have different operating
constraints:

• They may not be able to see, hear, or move easily, or may not be able to process some types of
information easily (or even at all).

• They may have difficulty reading or comprehending text because of language knowledge.

• They may not be able to use a keyboard or mouse because of access method (e.g., cell phone) or
physical disability.

• They may have a less than ideal access environment such as a text-only screen, a small screen, a
screen without color, or a slow Internet connection.

• They may be accessing the site in a nonstandard environment where they may be affected by
environment considerations, like accessing the Web in a noisy cybercafe or as they drive a car.

• They may have an older browser, a nonstandard browser or operating system, or use an alternative
form of user interface such as voice access.

- 10-

To deal with these issues, the W3C has issued a few suggestions to improve the accessibility of a site.
These are summarized here:

• Provide equivalent alternatives to auditory and visual content. In other words, don't rely
solely on one form of communication. If you use picure buttons, provide text links. If audio is used,
provide a text transcript of the message, and so on.

• Don't rely on color alone. As discussed earlier in the chapter, not everyone will be able to view
colors properly, so if color alone is used to convey information such as what text is links, people who
cannot differentiate between certain colors and users with devices that lack color or even visual
displays will not be able to figure out what is being presented. You need to consider avoiding color
combinations with similar hues or those without enough contrast—particularly if they are to be viewed
on monochrome displays or by people with different types of color-vision deficits.

• Use markup and style sheets, and do so properly. Basically, make sure to use HTML for

• Provide clear navigation mechanisms. Basically, you should provide obvious navigation that is
easy to understand and in a consistent location on the screen. Navigational aids such as search
engines, site maps, and site indexes (as discussed in Chapters 7 and 8) should also be provided.

• Ensure that documents are clear and simple. Yet another fairly obvious suggestion, but
powerful nonetheless, is that simplicity will lead to greater accessibility. Given that not everyone will
be able to read a language well, and usability is directly related to simplicity and consistency, try to
make your documents simple.

Besides manual inspection of a site, it is easy enough to evaluate it for accessibility using a tool such
as Bobby (www.cast.org/bobby), as shown in Figure 3-7. Bobby will analyze a Web page and see if it
meets certain basic accessibility criteria such as the use of ALT text.

Web Usability Guidelines

Guideline Explanation
Be consistent. Consistency is the key to an easy-to-use interface. If something is consistent, the
user only has to learn it once. Within your own site, don't change the position of
buttons or the way things act

Don't violate user's Consistency can go beyond the contents of a site. Users will have expectations
expectations, and make about how things works shaped by visits to other sites. Make sure your site is
sure to follow Web and consistent with what they expect. In short, follow any conventions used in GUI or
GUI conventions. site design that the user is used to.

Support the ways people Users use the Web pages in a few basic ways. They load a page, they unload a
use Web pages. page, they print the page, they save the page either by bookmarking the address
or saving the file to a local drive, and they read the page or they interact with the
page (such as fill-in forms or manipulating content objects within the page). Similar
to the previous guideline, make sure users can do all the things they expect. If
users expect to print or bookmark a page and they can't, they may consider the
site unusable.

Use surprise properly Occasionally, being inconsistent is useful. If you want to ''wake a user up," it might
and sparingly. be OK to dramatically change the way a page looks or acts. Just make sure you
don't do this often since users may not become comfortable with the site, and may
even become frustrated with the ever-changing interface.

Simplify the site and Simplicity makes it easy for users to understand a site. Try to pare a site or page
individual pages as much down to its bare essentials. Look at statistical logs to determine what pages are not
as possible. needed from a site. On a page level, remove clutter from layouts and try to reduce

- 11-

visual noise.

Rely on recognition, not Memorization is difficult. Don't expect the user to memorize the structure of your
recall. site or the position of your buttons. Minimize what the user has to remember by
exposing available choices. Even something as simple as hiding a menu when it
isn't in use increases the cognitive load on a user since they have to memorize
what items are on what menus.

Do not assume users will You may not get a chance to hold a training class for every user who visits your
read instructions. site. Generally, users will only read help files when they are in trouble. Try to make
sure that they don't need to be trained. Avoid introducing features in a site that
would require training or documentation for proper use.

Try to prevent or correct Don't let users make mistakes that are unnecessary. For example, validate form
errors. entries and limit users to doing only what they should. Don't provide a choice that
is not easily undone by the user. If errors do occur, let the user know about the
error and its possible solution.

Provide feedback. Let users know what's happening. Don't be imprecise with feedback. If there is
going to be a delay, let them how long it is going to take. If an error has occurred,
provide a clear error message.

Support different Try to provide multiple ways of doing the same thing to deal with different
interaction styles. approaches to problems. For example, some users may prefer to use a site map
over a search engine when looking for something. Don't limit users, and try to
account for a range of interaction styles from novice users to power users.

Minimize mouse travel Typing and moving the mouse around the screen is work for the user, so try to
and keystrokes. minimize it. This means successive button choices should be nearby. Try to
minimize the distance from primary navigation to the Back button, which is
certainly the most commonly pressed button in a browser. This may suggest
navigation should be towards the top of the screen.

Consider medium of Make sure to understand where the user will consume the content-onscreen or on
consumption. paper. If users print pages to consume them, shouldn't the usability test be
performed on the paper document as well?

Consider environment of If known, consider where a user will interact with a page. Where the user interacts
use. with a page will affect how usable they perceive it. For example, relying on sound in
a noisy environment isn't a wise idea.

Focus on speed. Users dread slow-loading sites. Make sure pages are fast loading by practicing the
idea of minimal design. This doesn't mean eliminating graphics, just that a page
should be no slower than it needs to be to deliver its message.

Table 3-4. Common Web Usability Guidelines

Web Design – Specifics
Rule: Avoid wide pages, particularly those that cause rightward scrolling.

Rule: Try to keep important items such as primary navigation in the first screen.

Some designers call the bottom of the browser screen the "fold," and it is wise to make sure that a design does
not end right before or after the fold.

- 12-

Suggestion: Be aware of the screen "fold," and try to hint at content beyond the first screen.
Suggestion: When using fixed page sizes, make sure to center your page to reduce the perception
of empty space on larger displays.

Suggestion: Try to fit content vertically within 3–5 screens, if possible.

If pages are longer and the content can easily be split, then do so; otherwise, let it scroll. You do not want to
break up a logical unit because of an arbitrary limit unless the page has become unwieldy. Another argument
against splitting is that today's users are getting used to scrolling; much effort, including improving mouse design,
is being made to ease the scrolling burden on the user.

Entrance Pages

Theoretically, any page in a site can serve as an entrance page if the user knows the page's URL. In Chapter 4,
sites that did not limit entry to a particular set of pages were considered porous, while sites that limited entry could
be dubbed semiporous or solid depending on how limited entrance was. Yet regardless of any formal attempt to
limit users, most sites tend to have only a few entry points. The home page is the main entry to a site, but certain
important sectional pages or "subhome" pages might also be entry points into a site—particularly if they have
special URLs or unique domains. While most sites will focus traffic through a home page, some sites may have a
special entry page called a splash page.

Suggestion: Provide an obvious link to quickly skip a splash page.

A home page is generally the first page a user sees when they visit a site. The home page acts as the main entry
point of a site and should be a prominent landmark in a site. As a landmark page, a home page should be unique
from all other pages in a site in its appearance. Understand that the home page is often the way people visually
remember a site. If it is not different, users may feel lost in a site, needing an obvious starting point.

Rule: A home page should look significantly different than other pages in a site.

In order to be distinct, home pages often are more visual than deeper pages in a site and may more prominently
display organizational identity, such as a logo, than other pages. Consider the abstract page layouts shown in
Figure 9-12. Can you identify the home pages?

A home page needs to set the tone for the site. The home page sets the basic design elements of a site, such as
color, graphic style, font style, and so on that are used on subpages. If a home page uses a particular font for
buttons, users will probably expect the rest of the site to continue using the same font. Also, the type of navigation
presented will be assumed to be consistent from the home page. If the home page uses blue graphical push
buttons and pull-down menus for navigation, this should be used elsewhere in the site as well.

Rule: A home page should set the visual and navigational tone of a site.

- 13-

Figure 9-12.
Home pages should be obvious in structure and layout
Rule: A home page should load fast, but be dramatic enough to encourage interest.

Rule: A home page should clearly indicate what's inside a site.

Suggestion: If a particular subpage is a landmark or common entry page such as a "section home
page" make it visually distinctive.

Most subpages, however, will probably not be visually distinctive. In fact, most should take their design and
navigation cues directly from the home page. While the purpose of the home page is to make the user keenly
aware of being on a particular site, when a user journeys deeper into the site, the user's awareness needs to shift
to the content. If subpages are presenting the user with new navigation, new logs, and new color schemes along
the way, the user's attention will be drawn way from the content.

Consider the home page and subpage shown in Figure 9-14 and notice how it is obvious they are related, but that
the subpage is more content oriented.

Rule: Subpages should follow the style and navigation of the home page, at least in spirit.

Subpages will often be more focused than home pages. A subpage is generally either focused on navigation or on
content. A few pages, such as site maps, might be considered purely navigation. However, it is unlikely that a page
is a pure content page, since if it lacked navigation or links, it would be a so-called "orphan" page that had no way
for a user to get back from other than the browser Back button. Generally, there is a balance between content and
navigation in a subpage.

Print-Specific Pages

Some pages are likely to be consumed offline and thus are geared for printing. Occasionally a site may be
consumed both offline and online, and two forms of the same page will exist. Notice the rise of "print version"
buttons on many Web sites. In fact, many sites are now including not only links to printable pages, but special
saving and email facilities to make it easier for users to use content they find. An example of this is shown here.

- 14-

At this point, let's focus on printing pages. Many Web pages don't print well because the page is optimized for
online consumption, with larger text and narrow columns. A direct print of such a page tends to waste a great deal
of paper. Printed pages should be generally set in smaller type and the layout modified to utilize standard letter-
size paper effectively. Colored text may not be important on a printed page, and backgrounds will burn more toner
or ink than provide benefit in most cases. Furthermore, users probably do not need to see site navigation other
than some indication of the site the page came from. This information may be as little as putting the organizational
logo and an indication of a page's location in the site (such as what section it is in and its URL) on the print page.
Advertisements may or may not be a good idea to include in the print output.

There are a variety of ways to provide print versions of pages. One possibility is to create a special print version in
HTML. This could be as simple as stripping most of the HTML out or as involved as creating a special new HTML
layout optimized for print.

Suggestion: Inform users that printed pages will be different than what is seen onscreen or show
the print version directly.

Another approach to the printing issue is to utilize Adobe's Acrobat technology (www.adobe.com/acrobat) and
provide a PDF (portable document format) version of the page. Using PDF, it is possible to create a high-resolution
printer-oriented version of the information in a page just as it might appear in a brochure. A common use of this
format is for displaying highly complex information such as technical specifications or mathematical formulas. An
example of a PDF file associated with a Web page is shown in Figure 9-20.
Suggestion: Use Acrobat PDF files for highly complex information that needs to print perfectly such as
data sheets, technical drawings, and complex financial or mathematical information.

If a PDF is used, make sure to let users know what it is with an appropriately named link or PDF icon. Given the
larger size of PDF files, it is also probably a good idea to indicate the file size of a linked PDF. The last time the
document was modified may be useful to the user. Lastly, make sure to provide information on where to obtain the
Acrobat reader for users who may not have it. All these ideas are illustrated here.

Suggestion: Clearly indicate Acrobat files with text and an icon, and provide information on using
these files.

Exit Pages

While the home page serves as the main entry point to a Web site, is there a defined exit point? For content-
oriented sites, there may not be one, and every page could be considered an obvious exit point. Hopefully, the user
found some interesting content to satisfy their goal and left from a content page.Not all sites can afford to lack a
point of closure. Sites that have definable tasks, such as downloading software, buying a product, making a stock
trade, and so on should have an obvious exit page. The exit page provides a sense of completion or closure to a
visit. Closure is very important to site usability as it won't leave the user wondering if they completed the task
properly.

Suggestion: Provide a way back to the site from an exit page.

Layout Examples

TLB Pages

- 15-

TLB, or top-left-bottom, is one of the most common design styles used on the Web today. The basic idea of this
design is that the top of the page is reserved for page labeling, branding information, and, potentially, primary
navigation. The left side of the screen contains navigation elements. If the site is small, the left contains the site's
primary navigation and the top contains solely labeling information, but more often the left is reserved for
secondary navigation information. As the user clicks through the main sections, the choices on the left change.

The major downside of TLB layouts, besides their potentially limiting content region, is that they generally look
more navigationally focused than content focused, and may not provide as much design opportunity as some other
forms of layout.

Header-Footer Pages

A header-footer design provides navigation on both the top and bottom of the page, with the entire width of the
page used for content. This type of design is good for content-oriented sites, though it does limit the amount of
area used for navigation. Generally, the top of the screen is used for branding, graphical navigation, and page
headings, while the bottom of the screen is used to repeat text links and to provide supplementary information
such as text links—particularly if the top navigation can scroll off the page. Using frames, it is possible to fix the
position of the top and bottom navigation regions so they don't scroll offscreen. If this is the case, a redundant set
of navigation is not as necessary, and the bottom may be reserved instead solely for useful information like legal
terms, copyrights, or contact information. Figure 9-30 shows an example of header-footer design.

Suggestion: Use header-footer design for content-focused sites, particularly when wide content is
common.
Floating Window Pages

An increasingly popular page-layout style could be termed the floating card, or window, style. The basic idea is to
create a region in the middle of the screen for

- 16-

Figure 9-29.
Top-left-bottom design is a very common layout

content. The region can either be fixed in size from page to page or be a scrolling window. Generally, fixed card–
style design won't work unless a very limited amount of content is presented. However, utilizing frames, it is
possible to create a central region of content that scrolls. The benefit of this style of design is that it provides a
fixed region to design for but doesn't look as unusual on varying screens since it is usually positioned within a lush
background and floats in the center of a screen. Of course, executing this design tends to require the use of
frames, which often results in the navigation problems discussed in Chapter 5. A particularly troublesome part of

- 17-

Figure 9-30.
Header-footer design is useful in content-heavy sites

The simplest way to execute a scrolled window–style design might be to do something like this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>The Easy Way</TITLE>
</HEAD>
<BODY BGCOLOR="blue">

Page 360

<DIV ALIGN="CENTER">
<IFRAME SRC="http://www.Demo Company.com" HEIGHT="90%"
WIDTH="600" BORDER="0">
</DIV>
</BODY>
</HTML>

- 18-

Of course, this relies on the <IFRAME> element that is not currently well supported in browsers beyond Internet
Explorer, though it is part of the HTML specification and should eventually be supported. In reality, a much more
complicated approaching using a variety of frames may be required, as shown by the markup here:

<HTML>
<HEAD>
<TITLE>Floating Window in Frames</TITLE>
</HEAD>
<FRAMESET ROWS="71,*,34" BORDER="0" FRAMEBORDER="0"
FRAMESPACING="0">

<FRAME NAME="top" SRC="top.htm"
SCROLLING="NO" FRAMEBORDER="No"
FRAMESPACING="0" NORESIZE MARGINWIDTH="0" MARGINHEIGHT="0">

<FRAMESET COLS="170,423,*" FRAMEBORDER="0" FRAMESPACING="0">
<FRAME NAME="left" SRC="left.htm" SCROLLING="No"
FRAMEBORDER="No" NORESIZE FRAMESPACING="0"
BORDERCOLOR= "#FFFF00" MARGINWIDTH="0" MARGINHEIGHT="0">
<FRAME NAME="center" SRC="contentpage.htm" SCROLLING="AUTO"
MARGINWIDTH="0" MARGINHEIGHT="0">
<FRAME NAME="right" SRC="right.htm" SCROLLING="No"
</FRAMESET>

<FRAME NAME="bottom" SRC="bottom.htm" SCROLLING="NO"
FRAMEBORDER="No" FRAMESPACING="0" NORESIZE

<NOFRAMES>
<BODY>
This site heavily uses frames. If you do not have a frames-compatible browser it is not possible to proceed
beyond this point. Please e-mail
<A HREF="mailto:gripes@democompany.com">gripes@democompany.com</A>
to register a complaint.
</BODY>
</NOFRAMES>
</FRAMESET>
</HTML>

This markup sets up a set of frames that define the top, bottom, and sides of the window and leaves the middle
for content. An example of this design in action is shown in Figure 9-31.

- 19-

Figure 9-31.
Floating window designs can be dramatic

TIP When building scrolling card-style pages, be careful to make sure that frame lineup is precise under all
browsers.

As discussed earlier in the chapter when talking about page sizes, fixed pages may look rather small on large
monitors. Unlike TLB layout, header-footer and scrolling windows can be centered to reduce the perception of
empty space. Of course, the only way to truly deal with space issues is to create a stretchable page with relative
sizing.

Rule: Strive always in Web design to be the same, but different.

Chapter 10—Text

The heart and soul of a Web page is text. Whatever anyone says about the future of multimedia online, most Web
pages are dominated by textual information. Assuming that your site relies heavily on text, the way that you use
text may significantly influence the user's experience. The simple choice of a typeface could hurt site usability just
as much as it could improve site memorability by building brand. Formatting text could also make the text easier or
harder to deal with. The art or process of using type is traditionally termed typography. In short, typography is

- 20-

concerned with the aspects of text use that make it readable—or if you prefer, simply usable, as well as expressive.
The use of words themselves and the style of writing employed might affect the user's experience just as much as
how it is presented.

Medium Matters

As mentioned throughout this book, the medium of the Web greatly affects what we can do with it. While there is
a great deal of knowledge concerning how type is used on paper, not all of it maps well to the Web. Technologies
like HTML and CSS are not always powerful enough to do things that are feasible on paper, at least not easily. Even
if we were provided with simple absolute control over page layout, we still would have trouble. As discussed in
Chapter 11, the Web does not support any particular fixed page width or length. Even if there were such
conventions and they were followed, page designers do not have as much control over the final presentation as
they think. Users are always free to change their screen size, increase or decrease their font size, change the font
used, or even change their screen colors. Designers have to get used to the fact that the Web is not static—it's a
fluid medium where presentation varies greatly from user to user and moment to moment. Nowhere is this lack of
control more obvious than the use of text within Web pages. Text flow is very dynamic: a user simply has to
increase their font size, shrink their window, or expand their window to ruin a nicely formatted page, as shown in
Figure 10-1.

Fonts

A font refers to the style of the type used on a computer. The term comes from the print publishing industry where
it referred to a particular size of a particular typeface. On the computer, this term is often interchangeable with the
word "typeface." On the Web, typefaces are generally classified in only a few basic ways. First, by distinguishing if
the typeface is serif or sans serif. A serif font is one that has short starting or finish strokes protruding from certain
parts of letters, like T or h. In contrast, a sans serif font lacks these extra strokes. Notice the difference between
Arial, a common sans serif font, and Times, the most common serif font on the Web.

Beyond this form, there are varieties of other ways to categorize type . . . but there is little agreement as to what
degree we should distinguish typefaces. Beyond sans serif and serif, some other common typefaces categories
include script and decorative. Some may refer to the decorative typefaces as novelty or display typefaces. Other
categories of type are possible, and many subcategories may also exist. Exactly what categories exist and which
font is in which category is an area for heated debate among typographers. Table 10-1 should serve as a basic
guide for Web designers to the common categories of typefaces that exist.

Typeface
Variety Category Within Each Typeface Example
Serif Typeface Old Style Bembo
This type appeared between the 15th and 17th
centuries. They have little contrast between thick and
thin strokes, bracketed serifs, and small x-height.

Transitional Times Roman
This is a group that combines elements from both the
Old Style and Modern groups and appeared in the
17th and 18th centuries. The typical characteristics
include a large x-height, more contrast between thick
and thin strokes than is seen in Old Style faces, and
thin bracketed serifs.

Modern Bodoni

- 21-

This typeface originated in the 18th century and was
used in the 19th century as well. Fonts in this
category usually display a contrast between thick and
thin strokes, small x-height like Old Style, and usually
unbracketed serifs.

Slab Serif Clarendon
This typeface features heavy lines and curves of equal
width, with rectangular serifs the same width as the
strokes themselves. The x-height is generally large.
Some slab serifs have an "Egyptian" feel to them.

Sans Serif Typeface Geometric Futura
The x-height of these tends to be small, and the
strokes of the characters tend to be the same width.
Like their name, they tend to be mathematical in their
proportions.

Grotesque
These tend to have more stroke variation than other
sans serif fonts, and have a large x-height. They are
not as geometric in feeling.

Humanist Gill Sans
These have a small x-height similar in proportion to
Old Style.

Script Typeface Brush script Cursive
This type looks as if it were lettered with a brush.

Calligraphic
In this type of typeface, the designs appear to have
been drawn with a broad-edged pen.

Decorative Typeface Ransom Note
Also called display or novelty typefaces, many of these
fonts are too intricate or irregular to be useful for text
unless at very large size or for a few words.

Table 10-1. Common Typefaces

Setting Fonts in Web Pages

While Web pages support two primary generic font types, proportional and monospaced, it is possible to set the
font itself. Use the FACE attribute for the <FONT> tag to set the name of the font used to render text in a Web
page:
<FONT FACE="Courier">This is now monospaced</FONT>

A Web browser will read this HTML fragment and render the text in the font named in the FACE attribute—but only
for users who have the font installed on their systems. Multiple fonts can be listed using the FACE attribute:

<FONT FACE="Arial, Helvetica, Sans-serif">This should be in a different font</FONT>

Here, the browser will read the comma-delimited list of fonts until it finds a font it supports. Given the fragment
shown above, the browser would try first Arial, then Helvetica, and finally a sans serif font before giving up and
using whatever the current browser font is.

- 22-

When using CSS, specify the font-family property to set the font, either by specifying a specific font such as Arial
or a generic family such as sans serif, which should be built in to the browser. Quote any font names that contain
white space, and be careful to note that font names may have to be capitalized. Like the <FONT> tag, CSS
supports a comma-separated list to select text from. So, to set the font for all paragraph tags, you would use a
simple CSS rule like this:

P {font-family: Arial, Helvetica, Sans-serif}

A little guesswork can be applied when setting Web fonts so that the page renders correctly. Most Macintosh,
Windows, and UNIX users have a standard set of fonts, as shown in Appendix C. Furthermore, CSS specifies one
font face for every category that should be built into the browser. If equivalent fonts are specified, it may be
possible to provide similar page renderings across platforms. Recommended faces to use within Web pages are
shown in Figure 10-9.

Because many of these fonts are specific to a particular operating system, you may have to specify fallback
equivalents unless you decide to use downloadable fonts, which will be discussed in the next section. Traditionally,
without relying on downloadable fonts, the combinations listed below have been considered useful

Figure 10-9.
Common Web fonts

to specify within Web sites because the fallback fonts are fairly similar and users generally have them installed:

Arial, Helvetica, sans-serif
Times New Roman, Times, serif
Courier New, Courier, mono
Georgia, Times New Roman, Times, serif
Verdana, Arial, Helvetica, sans-serif

Using Downloadable Fonts

With traditional HTML and even basic CSS, font choice is very limited on the Web. Designers often resort to putting
text into an image form in order to use a nonstandard font in a page. However, this solution is not optimal.
Fortunately, the major browser vendors have developed their own versions of downloadable fonts. Microsoft's
solution is called OpenType (www.microsoft.com/typography). Netscape's solution, called Dynamic Fonts, is based
on TrueDoc (www.truedoc.com). Currently, only Netscape 4.0 and Internet Explorer 4.0 and above support
downloadable fonts. Unfortunately, neither solution is perfectly implemented.

Netscape's Dynamic Fonts
To use a dynamic font under Netscape, page authors should use the FACE attribute of the <FONT> element or a
style sheet attribute to set the font face. If the user does not have the font installed on the system, a downloadable
font linked to the page can be fetched and used to render the page. To include a link to a Netscape font definition
file in Portable Font Resource (PFR) format, use the <LINK> element by setting the REL attribute to fontdef and
the SRC attribute equal to the URL where the font definition file resides. The <LINK> element must be found
within the <HEAD> of the document. You will have to create a PFR file using a tool such as HexMac's Typograph

- 23-

(www.hexmac.com). A more complete list of tools can be found at www.truedoc.com. An example of how this
element would be used is shown here:

<HTML>
<HEAD>
<TITLE>Netscape Font Demo</TITLE>
<LINK REL="fontdef"
SRC="http://www.bigcompany.com/fonts/ransom.pfr">
<STYLE>

</STYLE>
</HEAD>
<BODY>
<FONT FACE="ransom">
Content rendered in the font "newfont" which is part of
the pfr file.
</FONT><BR>
<SPAN CLASS="ransom">You can use CSS rules to access the
new font as well</SPAN>
</BODY>
</HTML>

Note that there may be many fonts in the same font definition file. There is no limit to how many fonts can be
used on a page. Once the font is accessed, it is used just as if it were installed on a user's system. You can use
either CSS or normal HTML <FONT> syntax to access the downloadable font.

NOTE One drawback to the Netscape approach to dynamic fonts is that it may cause screen flashing in many
versions of Netscape. This can be disorienting for the user and has somewhat limited the use of this technology.

Microsoft's Dynamic Fonts

Microsoft also provides a way to embed fonts in a Web page. To include a font, you must first build the page using
the <FONT> element or style-sheet rules that set fonts. When creating your page, don't worry about whether or
not the end user has the font nstalled; it will be downloaded. Next, use Microsoft's Web Embedding Fonts tool or a
similar facility to analyze the font usage on the page. The program should create an .eot file that contains the
embedded fonts. Then, add the font-use information to the page in the form of cascading style sheets (CSS) style
rules, which are basically those defined in CSS2, as shown here:

<HTML>
<HEAD>
<TITLE>Microsoft Font Test</TITLE>
<STYLE TYPE="text/css">

</STYLE>
</HEAD>
<BODY>
<FONT FACE="Ransom" SIZE="6">
Example Ransom Note Font</FONT><BR>
<SPAN CLASS="special">
This is also in Ransom</SPAN>

- 24-

</BODY>
</HTML>

Notice how it is possible to use both typical style-sheet rules like a CLASS binding as well as the normal <FONT>
tag. A possible rendering of font embedding is shown in Figure 10-10.

As in the Netscape approach, you must first create a font file and reference it from the file that uses the font. It
may be useful to define a fonts directory within your Web site to store font files, similar to storing image files for
site use.

The use of @font-face acts as a pseudoelement that allows you to bring any number of fonts into a page. For
more information on embedded fonts under Internet Explorer, and links to font-file creation tools like WEFT (Web
Embedding Font tool), see the Microsoft Typography site (www.microsoft.com/typography).

While downloadable font technology is improving, you must still include both technologies within pages built for
public consumption—despite the fact that CSS2 defines the Microsoft syntax. Even when downloading fonts is done
correctly, the user still may experience annoying flashing, or the text may not work properly with background
colors and images. Once perfected, downloadable font technology will drastically change type use on the Web,
enabling users to create beautiful pages as well as ones overloaded with font families. Experienced designers
should consider that a limited selection of fonts may be best for inexperienced page builders who might pick
illegible fonts to use online.

Text Layout

Suggestion: Avoid using justified text in Web pages.

Line Length

When laying out our text, we should strive to make the length of a line of text somewhere between 50 and 70
characters, or roughly anywhere from 7 to 15 words. This idea corresponds with cognitive science and usability
concepts discussed in previous chapters. Studies suggest that that the human eye can focus on an area about four
inches wide without having to turn one's head. This space corresponds to around 24 picas for standard 12pt Times
NOTE
The line-length rules of thumb suggested will result in wasted paper when printing. To combat this problem, many
sites using the suggested sizing provide a special button to a ''printer friendly" version of the text or even link to
an Adobe Acrobat equivalent of the text. As CSS matures and browsers begin to support media-based style sheets,
this may change, but for now always consider that sizing for screen may not be optimal for printer.

Line Spacing

Line spacing or leading is the term for the space between lines of text. The idea of line spacing is generally to add
a little extra space between the lines of type so that it is easy for a reader to track which line they are on. Normal
HTML text will render generally in whatever style the browser decides, typically close to single spacing. If you want
to increase line spacing, you will have to manually insert <BR> elements at the end of every line. Not only is this
approach tedious, but text reflow when the user sizes their screen smaller than the longest line will ruin the layout
unless the text is constrained by a fixed-width table cell. Even then, if the user overrides the default font size, all
the spacing will be ruined.

CSS provides support for setting line spacing using the line-height property. The value of the line height can be
specified in a variety of forms, but it would most often be written in points (pt), pixels (px), or percentage values
(%). We can set line-height for the entire body of a document or for selected areas of text as shown here:

BODY {line-height: 1.5em}
P.double {line-height: 200%}

- 25-

The print rule of thumb is to set line spacing to around one-third to one-half above the type size. So if you are
using 12pt font, set line-height to 18pt or greater. If we don't know the current font size, it is easy to specify this
as 1.5em. Some typefaces, particularly sans serif fonts like Arial or Helvetica, have very large x-heights, so they
will need to have more line spacing to make it easier to read. Given how hard it is to read online text, you might
consider using a line-height of 2em or 200%. If you plan on making very long lines, you should increase the line-
height accordingly to improve readability.

Rule: Increase line height to improve online text readability.
Figure 10-14 shows the effect of line-height on various forms of text.

Pull Quotes

In print, it is sometimes useful to enhance a page of text with one or two pull quotes. In addition to varying the
text flow, pull quotes are used to draw the reader's attention by highlighting a statement from the text. In Figure
10-27, most of the paragraphs are set to a default font size and face with no further embellishment beyond a left
margin of 10 pixels.

<TABLE WIDTH="400" BORDER="0" CELLSPACING="0" CELLPADDING="15">
<TR>
<TD><FONT FACE="Times New Roman" SIZE="-1">
<B>HOME & ROBOT MONTHLY - January 2000</B><BR><BR>

Insiders report that the latest models . . .</FONT></TD>
</TR>

<TR>
<TD BGCOLOR="#99FFFF">

<FONT FACE="Arial, Helvetica, Sans-serif" SIZE="+1"><B>"I came up
with the Robot Butler . . .</B></FONT></TD>
</TR>

<TR>
<TD><FOINT FACE="Times New Roman" SIZE="-1">Demo Company has done
well . . . FONT></TD>
</TR>
</TABLE>

In this instance, cell padding is used to set off the text, the <FONT> tag is used to set font face and size, and the
BGCOLOR attribute of the table data element <TD> is used to apply a light-blue color to the background of the
pull quote. This approach is more likely to work on a greater variety of browsers.

Sidebars

Like pull quotes, sidebars stand apart from the rest of the text on a page. Instead of drawing attention to the main
text, however, they serve to provide additional information related to the subject at hand. This can also be done
with tables:

<TABLE WIDTH="400" CELLSPACING="0" CELLPADDING="12" BORDER="0">

<TR><TD ALIGN="center" COLSPAN="3"><B>HOME & ROBOT MONTHLY -
January 2000</B></TD></TR>

<TR>
<TD WIDTH="200" VALIGN="top">Insiders report . . .</TD>
<TD WIDTH="200" VALIGN="top" BGCOLOR="#CCFFFF">
<FONT FACE="Arial, Helvetica, Sans-serif" SIZE="-1">
The history of Demo Company began in 1998 . . .
</FONT></TD>
</TR>
</TABLE>

- 26-

The result, shown in Figure 10-29, uses two side-by-side table cells, two different fonts, and a background color in
the right-hand cell to create two columns. The CELLPADDING attribute of the <TABLE> element is used to
create padding and prevent the two text areas from butting up against each other.

Figure 10-29.
Sidebar created with HTML table

Text-Design Issues for the Web

Bottom line—the Web isn't paper. The actual resolution of screens is usually very low: around 72 pixels per inch.
Compared to even a typical laser printer, this is very low. Furthermore, glare and refresh rate make reading online
difficult. Eyestrain is frequent, and many usability experts as discussed in Chapter 3, have suggested that people
just don't read online—and when they do, it is much slower. Designers should always strive to make their Web
pages more readable. Standard rules like keeping your line lengths short and increasing your leading apply to the
Web as well as paper. However, print rules of thumb about font sizing often have to be adjusted upwards to deal
with the lack of screen resolution. Some print suggestions don't work as expected, some are open to debate, and
some just don't make sense at all.

Serif vs. Sans Serif

Some design experts consider serif typefaces more readable than sans serif typefaces because the serifs help
define the characters, making them easier to recognize, and could even provide a direction for the eye to easily
move from letter to letter. Traditional print design rules suggest that a legible serif font be used for body text while
a contrasting sans serif font be used for large titles and headings. The Web, not breaking with tradition, generally
uses Times as the default body copy for text; however, it does not change heading styles to a sans serif font.
There is some debate whether or not serif text should be used onscreen, particularly when small. If you combine
this with antialiasing, discussed in the next section, serif text can become very hard to read. The jury is still out on
the serif vs. sans serif debate. All that can be said for sure is to be careful with small serif text and consider
increasing your font size no matter what you use.

Number of Fonts to Use

Traditionally, designers have held that you should use only two types of fonts in a document, usually a sans serif
for headlines and a serif for body copy. Of course, the styles and size of these may change, but using multiple
fonts—particularly of the same font type like sans serif—is considered to be poor style. Some designers think you
can go higher, particularly if the contrast between the fonts is obvious enough. Remember that a user might not be
able to tell the difference between an Arial and a Helvetica font like you can. If you establish your type hierarchy

- 27-

on such subtle differences, it is bound to fail. Worse, even if they do notice they may consider such variations
erroneous rather than intentional. Using radically different fonts next to each other brings attention to content and
may aid greatly in setting up a type hierarchy.

However, while the two-fonts-per-document rule works well in print, it might need to be modified for the Web.
Instead, you may consider three fonts: one for your headlines, one for your body text, and one for your navigation.

Suggestion: Consider three fonts per page: one for page labels and headlines, one for body text,
and one for navigation.

You'll probably end up making your headlines and navigation in a sans serif font. Just make sure that you vary the
headlines and navigation enough either in size, color, or family.
Columns on the Web

Rule: Navigation-focused pages generally require less text white space than consumption pages.

Rule: Always use white space to complement the use of information.

Always Consider the Medium of Consumption

When users read online, they generally want less text, large size, narrow columns, and large line height. However,
when printing, users may want a lot of content per page, possibly expanding to fit the paper or even using a
smaller font size and line height. If printing becomes an issue, you may find it useful to provide a link to an Acrobat
version of your content (www.adobe.com/acrobat) or provide a link to a page that is formatted for print output.
Many sites now provide printable versions of text. An article at an online magazine may be broken up into several
pages for online reading, complete with graphics, advertisements, and site navigation. While these pages may be
printable, the resulting printout may be too cluttered to be useful. And if the pages use advanced layouts such as
the pyramid text shown earlier in this chapter, it may not be printable at all. This has led to the increased use of
the already ubiquitous ''Click here for a printer-friendly version" and similar links.

• Keep your text short and concise. Experts suggest that you should write only half as much text as you would
when writing for print. This makes the online reading process smoother by overcompensating for the slow online
reading-time rule mentioned above. Keep paragraphs short as well; nothing scares users away faster than long,
unbroken columns of text that extend far below the bottom of their browser window.
• Get to the point right away. Don't preface your page with a long, rambling, and circuitous opening. If your
English professor taught you to start with the general and work up to the specific, forget it. Cut to the chase and
tell users
your conclusion in the very first sentence. Use the journalistic technique known as the "inverted pyramid"—tell
them what you're going to tell them immediately, then fill in the details, followed by whatever background material
seems appropriate.

• Use headings to provide meaning. Headlines aren't much use if they're clever but don't tell the user what the
main content is about. Headers should let users know why they should stop and read a Web page. Meaningful use
of subheadings adds structure, and additional meaning, to a page.

• Highlight the ideas expressed in the page. Pull quotes and highlighted text, if selected well, will emphasize
what the page is about and help users decide if the page interests them. It's better to have someone leave a page
because the topic leaves them cold than to have them leave simply because they can't figure out what the page is
about. Don't emphasize text with underlining, as this may be confused with hyperlinks. If your hyperlinks are
chosen well, the clickable text should provide additional hints to your page's meaning.

• Use lists to summarize information. When dealing with important information, don't embed it in a paragraph
if it can be broken out into bulleted or numbered lists instead. This places the information out in plain view of the
skimming reader, instead of forcing the reader to dig for it in a large block of text.

The inverted-pyramid structure is just one of the tools that can make online writing more user friendly. Applied to
the Web, it can be used to get a basic point across and motivate users to scroll down to the more general
information lower in the page. Hypertext adds even more variations to writing on the Web. On the simplest level, it
can be used to break a piece of writing up into smaller pages, to be connected by linear linking and read in
sequence. This can keep page scrolling to a minimum and make page content easier for readers to process quickly.
Ending each page in a fashion that will encourage readers to move on, and starting each page with writing that
reinforces the reader's desire to continue, can work wonders and keep users from defecting to another site.

- 28-

The Web Design Summary.doc.doc

More Related Content

What's hot

Viewers also liked

Similar to The Web Design Summary.doc.doc

More from butest

The Web Design Summary.doc.doc