CHAPTER

1
Designing Interactive User Experiences
User Interface
& Navigation
6
HTML & WEB ARTISTRY
Having a great home page and beautiful graph-
ics is just not enough to ensure a great web site.
If visitors to your site cannot find what they need
or dont know where to go, you can be sure that
they probably wont come back. One of the most
important (and hardest) aspects of designing a
great web site is the stuff that goes on behind
the scenes, the things you need to plan careful-
ly before you begin working on your design.
Some of the most important components of web
design are things like user interface, site flow,
navigation, and content. The way your site looks
and feels to users, the ease with which theyll
learn how to get around, and the graphics and
text you choose as content all play major parts
in how users interact with and experience your
web site.
Web designers today are tasked with designing
interactive experiences for visitors, which
involves much more than designing a simple
web page. Creating a great web experience
means planning carefully and building your site
so that it works in harmony with your visual
design concepts.
So, how do you walk that fine line between your
design vision and your clients wish for links to
everything on one page? How can you make sure
you are addressing and making the right decisions
when it seems like there are always a bevy of new
technological advancements and choices?
Relax. We are here to help. This chapter will pro-
vide the structure you need to begin building the
right foundation for a great site. In this chapter,
you will see some great examples of designing
the right user interface, creating intuitive naviga-
tion, and gathering and organizing your content
for a web site. Well not only refresh your memo-
ry with some fundamentals, well show you how
to do it with HTML, JavaScript, and more.
Planning Your Site
The planning stage for a web site is one of the
most important ones. Depending on the com-
plexity of the web site you are designing, your
ideas, sketches, and documentation will be the
starting ground when you start work on the actu-
al look and feel design of the site.
As you start to establish a plan for your site,
keep these three key points in mind:
I
Goals and Objectives. Establish clear
goals and objectives for the site.
I
Audience. Determine the main audience
of the site.
I
Technology. Understand the technological
limitations you are working with.
For example, suppose you are building a promo-
tional web site for your fictional design studio,
a* design. The goals of your site include promot-
ing the work you do as well as finding ways to
recruit new employees. From that understand-
ing, you can assume that your audience will be a
7
CHAPTER ONE | USER INTERFACE & NAVIGATION
likely to be. In some cases, you may want to
create user scenarios to help make the planning
stages more effective. You can come up with a
handful of characters (for example, David, the
corporate CEO or Stacy, the recent design
school graduate) to have a sort of real-world ref-
erence to help you figure out ways in which
these users will interact with the site and what
methods you will need to organize and present
the information.
Web sites such as the content-rich Art and
Culture site (www.artandculture.com) have an
extensive user interface and navigation scheme
that runs deep into varying categories and
subcategories (see Figure 1.1). Careful planning
to detail allows different items to be cross-
referenced through secondary pages, such as
those shown in the fashion design section
(Figures 1.2 and 1.3). The expandable and col-
lapsible navigation allows for users to get to dif-
ferent sections easily and quickly. All of this
would not have been possible without clear and
concise planning.
Mapping the Site Architecture
After you have gathered all your content and
done your preliminary planning, you can start
mapping out your site with a site architecture
map. The site architecture map is your blueprint
for the site and it will help you throughout the
design process. You can use any tool to create
your map, but we use Adobe Illustrator to help
create nicely organized boxes for our buckets.
mix of new and existing clients, as well as new
recruits. Knowing that, you can begin to specu-
late on the type of access to technology the
audience has. Will they be primarily surfing on T1
lines or 56K modems? Will they be more likely to
be using PCs or Macs?
To put this in a context of planning with a site for
a new client, suppose that you have been hired
by an independent music label to help promote
its current artists and provide resources that
attract new independent artists. In your initial
meeting with the client, youd focus on finding
the answers to those three key elements: goals,
audience, and technology. You might ask ques-
tions like these:
I
What do you want to accomplish with
the site?
I
Is there a story you want the site to tell?
I
Who will use the site?
I
What do you want users to do while
theyre there?
I
How comfortable is your audience with
technology? What type of hardware and
software are they likely to use?
To start the brainstorming process, first gather
all the content and potential categories or buck-
ets for the site. By researching all the content,
youll be able to figure out how to organize
everything efficiently. And if your client company
has done market research that will help you
identify and understand their customers, use it
to get a clearer picture of who the site visitors are
8
HTML & WEB ARTISTRY
figure 1.1
Art and Cultures home page.
figure 1.2
Art and Cultures Fashion Design
Category, featuring Isaac Mizrahi.
figure 1.3
Isaac Mizrahis page on the Art and
Culture web site cross-references
Todd Oldham.
1.1
1. 2
1.3
9
CHAPTER ONE | USER INTERFACE & NAVIGATION
you focus on when creating a site map? Here are
a few ideas for starters:
I
Visualize your outcome. Make sure the
map shows your client in the clearest pos-
sible way a straight navigation to the site.
If the paths look difficult or convoluted,
youll lose the interest (and maybe the
enthusiasm) of a client not at home with
web design.
I
Forget the bells and whistles for now.
Because your first goal of a site map is to
communicate the site strategy clearly to a
client (or to your co-workers), dont get
too fancy in the initial design. Save your
best creative energies for the visual design
mockups and opt for simple and straight-
forward in your maps.
Figure 1.4 shows a simple basic site map that
encompasses four main buckets for the site a*
design. The buckets are company, portfolio,
jobs, and contact. By creating a map, you
are able to get an overarching view of what the
various subpages are within the buckets. You
can use your map to help you figure out ways to
consolidate and organize areas that are too big
or ones that dont seem to have enough content.
Similarly, these maps also play an integral part in
client projects. Can you imagine an architect
building a house without showing the client the
blueprint? Of course not. The site map is a great
way for you and your client to sit down and get
an overview of the site to make sure that the site
is on its way to reaching its goals. What should
figure 1.4
Simple site architecture map.
10
HTML & WEB ARTISTRY
I
Be clear with start and end points. Be
sure to highlight the start and end points
on the map in some way so your client will
immediately have a context for the struc-
ture. If the navigation strategy isnt obvi-
ous, your client may wander off into
Where does this go? land and not pay
attention to your talk-through of the site.
I
Show where the site can easily expand
or contract. Some clients get stuck in the
details and want to see everything in black
and white before you begin. Prepare for
flexibility in your site map by showing
where the site can easily be expanded or
contracted as needed.
I
Keep it as simple as the design allows.
Some site maps will require multiple layers
in a navigation strategy, whereas others
will be simple, surface structures that
dont need the complexities of larger sites.
When you have a choice, show the func-
tionality in a streamlined and simple way.
Initially youre mapping the concept; later
on, when design is really underway, youll
be able to take the client through the
richer experience.
Working on the Barbie.com redesign project, the
user interface designers at the San Francisco
office of SBI and Company did an extensive and
colorful site map for Mattel so that the client was
able to understand which new areas of the site
were going to be added (see Figure 1.5). You can
see that the complexity of the structure links
beyond Barbie.com to other existing sister web
sites. Planning like this ensures that the sites can
be developed cooperatively and exist together
with enough roomto grow and expand over time.
figure 1.5
Barbie.com site map.
11
CHAPTER ONE | USER INTERFACE & NAVIGATION
on your tool bar buttons, but that doesnt mean
the visitors to your site will feel the same way.
So we thought wed make it easy for you.
Figures 1.6 and 1.7 give you two templates to
use when you design for the web. You can see
that the actual size you should be designing for
on a Mac and on a PC is really 717390. Keeping
the main pages under 390 ensures that the con-
tent can be seen within one screen and users
wont have to scroll.
At the same time, keep in mind that there are
users out there on higher resolutions, as well.
Although the numbers for 1024768 are low,
they are growing. Unless your target audience
is users set at this high resolution, it isnt a
good idea to just go ahead and design big. A
good practice is to consider ways in which your
800600 design can scale to look good in
1024768. Think of clever ways table cells can
scale or larger background images can appear
so that audiences at all resolutions will see a
well thought-out design.
Planning the User Interface
Now that you have your site architecture, you
need to think about how users will interact with
your screens of content. Consistency and clarity
are two important rules: You want your visitors to
see the same elementsor at least find the same
look and feelfrom page to page, and to be able
to understand at a glance how to get around in
your site. Creating a logical and inviting page
design will help visitors learn how to navigate
easily. Creating a good structure on the page level
will ensure that users will know where everything
is. The technology you design for and with also
has an impact on the user interface you create.
Technology grows at a rapid pace, and we have
found that the old standard 640480 screen
width and height dimensions just dont make
sense anymore. As 17"+ monitors become the
standard now with all shipping PCs and
Macintosh computers, most designers are now
designing for an 800600 resolution. But that
doesnt mean you should open up Photoshop
right now and create a new document with 800
width and 600 height. There are other issues to
think about when designing for this screen size.
First off, dont forget that the browser itself takes
up real estate on the screen. The top tool but-
tons, URL address bar, and bottom status bar are
there to help users as they navigate on the web.
Take these things into consideration and make
sure that you are allotting for the default browser
settings in your design. You might not like icons
figure 1.6
800600 PC
browser window.
figure 1.7
800600 Mac browser
window.
With a web site, navigation is different. Think of
your web site as a compact file cabinet. You
have to organize your papers into categorical
files and place them in a way so that you can
quickly find specific topics. The key is in organi-
zation, presentation, and naming formats. Some
sites lose grasp of this and create either a mas-
sive index of links or cute names to areas of their
site that make no sense. This makes the user
feel either overwhelmed or confused as to where
to go.
To begin, there are some fundamental things to
think about as you start to design navigation for
your site. Here are just a few of them:
I
Organization/Presentation. Include a
clean, clear direction and structure; limit
the number of links.
I
Naming Convention. Use intuitive names
for areas on your site.
I
Hierarchy. Place the important informa-
tion first or on top.
In the sections that follow, well look more close-
ly at each of these items and see how they relate
to your site design.
Organizing Your Links
One of the keys to designing navigation is organ-
ization. By organizing your site well, you can
focus on the areas you want to promote on your
site. Cluttered pages with millions of links only
confuse your users and leave you with a big
mess! Instead, choose to have a limited number
12
HTML & WEB ARTISTRY
Note:
Of course, issues in user interface get com-
plicated when you get into more complex
sites, especially e-commerce. Research
and usability issues are the key to ensuring
that most users have a good experience on
your site.
Another thing to think about as you design
the user interface is the use of sound. Will
your site open with background music?
Will you make audio clips a part of your
general design? Consider carefully the
goals of your site, the expectations of your
audience, and the technical capabilities of
the hardware and software your visitors will
be likely to use. To find out more about
adding sound to your site, see Chapter 8,
Multimedia: Moving Forward with Video
and Sound.
Creating Good
Navigational Elements
Navigation is not just a laundry list of links or
cute buttons that decorate web pages.
Navigation should be thought of as the journey
or path you want your users to take when they
visit your site. Users need a sense of place
where they areand directionwhere to go
from here. Books of fiction have an intuitive
navigation because you know that you have to
read them from beginning to end.
13
CHAPTER ONE | USER INTERFACE & NAVIGATION
of links from the beginning and have more links
within each subsection. The best-designed sites
offer only a handful of links off of the main home
page. In turn, the rest of the links lie within spe-
cific category pages. This allows you to better
control the direction of where you want your
users to go.
Figures 1.8 and 1.9 illustrate how clean naviga-
tion and a limited number of links help steer a
direction for your users. Having nested subcate-
gory links, like the car model names used in this
example, allows users to better navigate and
find where they want to go without having to list
everything on the screen at once.
Naming Your Links
If you have an area on your site for feedback, call
it feedback. Just say what you mean and users
can easily find where they want to go. This
becomes especially important when you consid-
er that the web is also an international commu-
nications medium, and visitors from other coun-
tries may not understand cute terms for areas of
a site. Pick a simple word or two your audience
will understand that clearly describe the area of
your siteno need to get too verbose.
The BCBG web site (www.bcbg.com) uses simple
words to describe areas on its site so users
wont be confused (see Figure 1.10). The layout
of the home page is nice and clean, letting users
focus on the main image from the current collec-
tion and the links to other pages on the site.
figure 1.8
Audi USA home page.
figure 1.9
Audi USA expanding sub-navigation.
figure 1.10
BCBG web site has a clean home page.
14
HTML & WEB ARTISTRY
Graphics Versus
Text Links
Going deeper into site design issues, we need to
take a look at the type of links you will use on
your site. HTML text links work well with graph-
ic links, enabling you to quickly edit and update
your links rather than having to go through the
tedious task of redoing all your graphics. Youve
seen them used smartly all over sites such as
Communication Arts (www.commarts.com).
It can be easy to update text links rather than
having to make new graphics each time you add
a section to your site but having only text can be
a bit of a drag for your web visitors. You can
combine both the use of a graphical navigation
bar with an alternative text link for a more bal-
anced look. Most sites now have text footers on
their pages with links to the top areas of their
sites as a measure of consistency so that users
will always be able to see main navigation in
case images have trouble loading. The Com-
munication Arts web site has a text footer bar
(see Figure 1.15) as well as a pop-up site map
window that allows users to find things quickly
(Figure 1.16).
figure 1.15
Communication Arts HTML
text footer.
figure 1.16
Communication Arts pop-up
site map navigation.
15
CHAPTER ONE | USER INTERFACE & NAVIGATION
Tip:
Dont forget the difference between
absolute and relative links. Absolute links
indicate the full server address like this:
http://www.website.com/info/
main.html, whereas relative links are refer-
ences to files on your site like this: info/
main.html. Because relative links maintain
their relationship to the site, you can move
site files from one place to another without
losing the link. If you use absolute links,
however, moving site files means you need
to update and/or repair any links that are
broken in the move.
Text footers provide the user optimum
methods from which to navigate around
your site. Whether people are more com-
fortable with text links or graphics, youll
know that they can get around no matter
which method of navigation they prefer.
Also, in instances when users have images
turned off, they will always have an alterna-
tive to move around the site.
Using Client-Side
Image Maps
When creating navigation graphics, an easy way
to link up graphics to URLs is by creating an
image map. An image map connects the coordi-
nates you specify in a certain image and enables
you to correspond matching URLs to that area.
The most popular image maps today are client-
side image maps.
Client-side image maps have both the coordi-
nates and their respective location recorded
right on the HTML page. This saves valuable
surfing time because users dont have to wait for
the server to retrieve the URL; its all on the
page. Another plus is that the bottom browser
status bar displays the actual location youll be
going to instead of numbered coordinates.
Combine that with the text status rollovers that
are discussed later in this chapter and you can
create an effective combination of graphic navi-
gation and textual browser status messages.
On the other hand, you may want to use server-
side image maps. Server-side image maps have
the coordinates of the graphic and their corre-
sponding URL recorded on a text file somewhere
on the web server. By referencing that .map file
in the HTML, the browser calls upon that file to
find out where to go. This is why when you roll
over server-side image maps, the graphic coor-
dinates show up instead of URL paths in the
status bar. This process can slow things down
on your site, which is why client-side image
maps are much faster and hence more popular.
Creating an image map nowadays is really sim-
ple. With tools such as Adobe ImageReady or
Macromedia Fireworks, you can set up image
coordinates and their URLs in a snap.
16
HTML & WEB ARTISTRY
For this technique, we will be using Adobe
ImageReady because its seamless integration
with Adobe Photoshop makes it easy to flip back
and forth between tools so that you can continue
to edit your graphics and map the areas as well.
We are making a text navigation for a page and
want the colorful text images to be linked to the
areas of the a* design site (see Figure 1.17). With
your graphic open in Photoshop, click the bot-
tom button in the tool bar as shown to switch
your image from Photoshop to ImageReady.
As you can see, each graphic text occupies its
own layer, but to create a rectangular boxed area
to link a URL, we must create a transparent
boxed layer for each layer of text. Each layer
thus represents a separate URL link. As shown in
Figure 1.18, create a new layer called company
link to be the URL for the corporate text. Draw a
box around the text and fill it in with any color.
Your box can be either above or below your text
layer. Because the box will be transparent, it
wont be visible when the final GIF is outputted.
To make it transparent, click on the Effects
button in the Layers toolbox. Choose Color Fill,
and set Opacity to 0% (see Figure 1.19). You
have now created a transparent box for the
company link.
figure 1.17
Graphic in Photoshop that will become an image map.
figure 1.19
Making the URL box transparent.
figure 1.18
Creating a new layer for the company URL link.
17
CHAPTER ONE | USER INTERFACE & NAVIGATION
Double-click the layer company link and a dialog
box will appear (see Figure 1.20). Check the box
Use Layer as Image Map and enter in the URL
where you want the company area of the graph-
ic to go to. Repeat the above steps for the rest
of the text layers. When you are finished, set
your optimization values in the Optimize toolbox
and choose Save Optimized As. When you do
so, make sure the HTML box is checked so that
ImageReady will generate not only the graphic
but the image map HTML as well.
To make sure the preferences are set correctly,
click the HTML Options button. When the HTML
Options dialog box appears (see Figure 1.21),
make sure Client-Side is selected from the
Image Maps pull-down menu. You can choose
to use either ImageReady HTML code or Adobe
GoLive code as a preference. Client-side image
maps are usually already set as the default set-
ting to the application.
Drag the HTML output into a browser window
and youll see the image map in action (see
Figure 1.22). When you roll over the text, youll
see that the URL info appears in the browsers
bottom status bar. When you upload the file and
image to its correct directory on the server, it will
take you to the right links when you click on each
text area of the graphic.
figure 1.20
Layer Options dialog box.
figure 1.22
Final image map.
figure 1.21
HTML export settings.
18
HTML & WEB ARTISTRY
Customized Status Bar
Rollover Messages
Most people rely on the bottom status bar to let
them know where the link will take them. Why
not take it a step further and tell them where they
are going rather than show the URL? With sim-
ple JavaScript added to your HTML, you can
show customized messages when users roll
over a link or a graphic.
Figure 1.23 shows a simple graphic that takes
users into the site when they click the bottom-
right square. Usually when you click on a graphic,
the URL is displayed in the status bar, as illus-
trated in client-side image maps. In this case,
the message Welcome to a* design is displayed
rather than the linked URL (see Figure 1.24). 1. 23
1. 24
figure 1.23
A simple graphic button.
figure 1.24
Status bar rollover message,
Welcome to a* design.
19
CHAPTER ONE | USER INTERFACE & NAVIGATION
Note:
See Chapter 5, Personalization, for more
on JavaScript pop-up windows that allow
you to customize the browser.
Implementing Virtual
Headers and Footers
For managing large web sites, an easy way to
keep your navigation updated is to use virtual
headers and footers. These are the standard
interface elements that appear on most pages,
such as ad banners, header graphics, text link
navigation, and so on. Making virtual headers
and footers means that instead of having the full
HTML code on all the pages, you have it on just
one. That way, all you have to do is update one
Targeting New
Browser Windows
You will often have links that go outside your site
and although you want your visitors to go off and
explore, you also want them to find their way
back. Your best option is to target a new brows-
er window each time you have a link off of your
site. The new browser window opens with the
new link while the other browser window stays in
the back. Some sites use the target new brows-
er function too generously, frustrating users with
an array of open browser windows. Make sure
that if you do open a new window, it makes
sense and doesnt lose users between different
browser windows.
To target a new browser window for any given
link, all you have to do is add the target proper-
ty to that link using one of the following exam-
ples as a guide:
<a href="http://www.avantmedia.com"
target="window">
<a target="window"
href="http://www.avantmedia.com">
It doesnt matter where you put the target attrib-
ute, as long as its in the <A HREF>tag somehow.
You must also make sure the target is set to
window so that a new browser window will
open. Figure 1.25 gives you an example of a new
browser window that is opened when the user
clicks a link.
figure 1.25
Targeting new browser windows.
20
HTML & WEB ARTISTRY
figure 1.26
Virtual footer.
function printVirtualFooter(){
document.write("<hr
width="500"><br>");
document.write("<a
href="company/index.html">company</a>
|");
document.write("<a
href="portfolio/index.html">portfolio
</a> |");
document.write("<a
href="jobs/index.html">jobs</a> |");
document.write("<a
href="contact.html">contact us</a>
|");
}
Note:
Each document.write must be on its own
separate line. Dont word wrap the code
because that will mess it up.
Save this file as footer.js. You can name the file
whatever you want, but it must have the .js
(JavaScript) suffix. Now when you need to
update the content of your footer, you just have
to modify your .js document. You can add as
many lines as you want, and updating is a
breeze.
For your HTML pages, you need to use
<SCRIPT> to reference the .js file at the top of
any HTML document in which the footer should
appear, like this:
file for the rest of the site. It doesnt even have to
be a header or footer. If you need information
duplicated in multiple areas, having to update
just one text file makes it fast and easy. Most vir-
tual headers and footers involve CGI scripts
because they are server-side includes. But if you
want to avoid the complications that come with
CGI scripting, JavaScript can now be used to
create virtual files for your site. Figure 1.26
shows an example of a virtual footer that you
can create on a single page and display
throughout your site.
First, you need to create an external JavaScript
file to live on your site.
//JavaScript File for virtual footer
//Update this document only to change
footer on site
21
CHAPTER ONE | USER INTERFACE & NAVIGATION
good structure your site will be usable and can
be flexible and grow. Make sure that you estab-
lish clear goals and objectives for your site and
that you are targeting the right audience. Also,
understand the technological limitations you
may be bound to.
These techniques, HTML, and JavaScript code
can help enhance the navigational structure of
your site by letting users always know where
they are and helping them get to where they
need to be more quickly. From basic HTML text
links or graphic client-side image maps, there
are many different options for presenting naviga-
tion on your site. For a more in-depth look at
JavaScript rollovers and DHTML, refer to Part II,
DHTML and Web Interactivity: Make It Move.
URLS In This Chapter
I
Art and Culture
www.artandculture.com
I
BCBG www.bcbg.com
I
Communication Arts
www.commarts.com
I
Audi www.audiusa.com
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript"
SRC="footer.js">
</SCRIPT>
</HEAD>
Then for the exact area in which you want the
footer to appear, add this code:
<SCRIPT LANGUAGE="JavaScript">
printVirtualFooter();
</SCRIPT>
The final result, as seen in Figure 1.26, is a virtu-
al footer that can be made once and used
throughout your site.
To create a virtual anything, just follow the same
previous steps for the virtual footer. If you use
multiple virtual files, make sure that you go
through the code and change the names for each
of the commands, such as printVirtualHeader or
printVirtualText.
Summary
We hope that this chapter has helped you under-
stand the importance of planning and organizing
your web site. Content buckets, site architec-
ture, user interface, and navigation all have
important roles in web design because with