 | ||
|
| ||
| ||
|
| ||
January 19, 1999
The following article was originally published in the Site Builder Network Magazine "Site Lights" column. (Now MSDN Online Voices "Design Discussion" column.)
Plain menus, task panels, search fields, drop down menus, form tags, buttons, radial buttons, check boxes, GUI widgets, and hypertext are all navigation elements to consider using within a Web site. Several questions can be asked about Web site navigation design, such as:
In this month's Site Lights, let us examine ways to improve legibility and usability of hypertext navigation and to improve Web site search features with some simple techniques.
Most people don't take the time to pay attention to typographical details as they use the Web. They simple click onward if they can't read. Font selection has in the past been very limited for Web page design. Some features have introduced ways to use other fonts. Using cascading style sheets (CSS) to define fonts or even the simple <FONT FACE=""> tag enables you to use different font families.
Hinting
is a mathematical method used to increase legibility of a font at small sizes and low resolutions. This method focuses on making fonts easy to read and interpret on your computer monitor.
Hinting takes several people hours of intricate computation work on each individual glyph or character of a font family. Those people hours May go unnoticed by most Web users. But users will notice that the fonts on the screen are more legible.
Try using a hinted font on your hyperlink text; for example, the Verdana font was designed by Matthew Carter and hinted by Thomas Rickner. Verdana and other core Web fonts are distributed with Internet Explorer, so there is a higher likelihood that those fonts will be on your users' systems.
For more information about using fonts on Web pages, explore the Microsoft Typography site section on using Web fonts.
The color choices you make for links, active links, and visited links will have a great impact on the legibility and usage of your navigation. Be sure to work with colors that contrast and compliment both the other color values on the site and the background color of the page. Color can be used effectively to bring attention to various text elements on the digital page.
View some examples of complementary browser-safe background and hyperlink colors.
Lynda Weinman's site
and books provide a wealth of information on color usage and color combinations that work well for Web sites. I asked Lynda what she thought about the color value of hyperlinks, and she thinks that there should be no set rules as to what colors you choose for the various link states. You just need to be sure the values of the links coordinate with the rest of the site -- and that the values of the colors bring focus where necessary. Sometimes you might not want a link to disappear into the background or gray out even though the user has clicked on it.
Web designers can turn off the underline on hyperlink text using CSS. The CSS text-decoration attribute can affect the look of the hyperlink by no decoration, underline, over-line, or a line-through.
<STYLE TYPE="text/css"> a:visited {text-decoration:none} </STYLE>
Users know what to expect when a word is underlined. So, if you do remove the underline on hyperlinks, it is necessary to provide enough visual hints that the text is a link.
Suggested attributes to add to hyperlinks missing the underline:
In Internet Explorer 4.0 and 5, you can signal that text is a link by dynamically changing the color on mouse over with the CSS A:hover pseudo-class.
Even if you implement all of these suggestions, a large percentage of users will not take the time to move the mouse over the text to see if it is in fact a link.
We can learn a lot about how to design the best interface for a search by analyzing the design of some of the major search sites available today.
We'll take a look at the search features on three sites. Click the links to pull each site up in a separate window.
Notice that all three search features use a standard Web button for the main action of starting the search.
<input type=submit name=search value="Search">
I suggest you make your buttons more visually appealing and graphically relevant to the style of your site. To change the button, simply set the TYPE attribute to image and refer to a GIF file in the <INPUT> tag.
<INPUT TYPE=image NAME=search VALUE="Search" BORDER=0 SRC='/chan/search/go2.gif' >
The length of the input box is up to you. But the average length is 10-50, a value that represents characters.
Notice that the length of the input form is approximately the same size on the Yahoo.com and PhotoDisc sites. The AltaVista input form is longer because this search encourages users to type in a question or long phrase.
<INPUT NAME=search SIZE=30>
<INPUT SIZE=30 NAME=p>
<INPUT NAME=q SIZE=50 MAXLENGTH=800 VALUE="">
Remember that input forms will look different in different browsers and on different platforms. Input fields will look smaller on Macintosh systems than when viewed on a PC.
All the hyperlinks available for specific category searches are underlined, and consistent colors are used for the various link states.
Notice that all these searches offer some type of assistance. Either an example is provided, or a link to help or search options. Offering the option of assistance can be very helpful to the user who May not know exactly how to set criteria on a search.
Several sites follow common Web user interface methods for implementing search. But others have come up with different ways for adding search interface to the home page. Some examples follow: MTV, MSN, and Garden Escape.
The MTV site provides a simple search input box in the lower portion of the screen. There are no underlines on the text, because the site uses graphics for the words "search" and "submit." The only visual indication that you can click on "submit" is that the cursor changes to a hand and a title pops up when you mouse over the word. Be sure to differentiate your buttons that instantiate the search activity from the title of the search functionality.
The MSN.COM home page allows you to select a search engine via a drop-down list. Then the interface provides a simple keyword input box and a graphic button to start the search. This style of search interface allows the user to complete a sentence -- a sentence ending with a rather large period.
On a large site, with a large inventory of goods or information, it is helpful when designing your search functionality to provide a simple way to narrow the search down for the user. Garden Escape enhances the simple keyword search with radio-button categories to help narrow the focus.
Garden Escape also includes an extensive search feature called Plant Finder. The Finder allows users to set various criteria to help narrow the search. The categories of criteria are divided and organized in a clear and concise manner. This type of extensive search is most effective if you have a large database of information. Once your data is accumulated, you can offer a powerful, effective vehicle to help your users isolate items for purchase or review.
Another way to organize the content on a site is to offer both a quick keyword search and a browse feature off the home page. Several sites, especially large sites with several categories of products or information, have this functionality now. For example, BarnesandNoble.com includes a link to a more advanced search, a quick search, a power search, and a browse option.
Where the search is located on the page is also important. Whether it's on the top, sides, bottom, or on a separate page needs to be decided. For some folks it's an easy decision. On the large search engine sites and most e-commerce sites, the main focus of the site is to find things quickly. The search input box should be located high on the page, near the company branding.
Some sites, such as Disney.com, even place search above the branding -- along with advertising. I personally think that the simple search UI should be located near the top of every Web page of a site, excluding during an order process on an e-commerce site. Advanced searches, such as the Plant Finder on Garden Escape, should be on a separate page altogether.
For example, the Compaq.com site's main page has a search link that takes you to a separate page for a simple keyword search. This is not necessary. Site designers could save the user some clicks by adding the keyword search and a link to the advanced search off the home page, without taking up much screen real estate.
Some site designers May consider search a lower priority to other site features. Or they find that the links and information presented in the initial viewable portion of the page are enough to get the user where they need to go.
MTV.com places its search option in the lower portion of the page, thus reducing the usage and visibility of that feature. Other sites, such as Apple.com, move the search functionality to the bottom of the home page. All of the MSN properties include search at the bottom of all main pages; although it's at the bottom, the search location's consistency provides a predictable navigation UI.
The bottom line is that you need to decide the importance of search in comparison to the visible value of other elements on the page. You must decide what priority search has over other links or features. Also, define what value search brings to your users over other activities or goals the users May be trying to achieve.
You can choose any of the following verbiage for your button to activate the search: go, search, submit, find, or others you find appropriate. All these words are commonly used on the major English sites. Most sites call the portion of their site that does searching "Search." Therefore, to differentiate the action of starting a search from the name of the feature, a change of verbiage on the button is recommended. Several sites are using the word "go," which implies movement.
Nadja Vol Ochs is the design consultant in Microsoft's Developer Relations Group.
For more information on how to set up a search on Site Server 3.0, read Dina Berry's article "Creating a Search Catalog for your Web Site with Site Server 3.0".
A recommended book about designing Web navigation is called the Web Navigation: Designing the User Experience, by Jennifer Fleming, published by O'Reilly.
Did you find this material useful? Gripes? Compliments? Suggestions for other articles? Write us!
© 1999 Microsoft Corporation. All rights reserved. Terms of use.
Back to top