GD 65 Class 02B

Topics

Navigation design

Typography

Web-safe fonts

List of web-safe fonts

Design Comps

Anatomy of a webpage

Creating Design Comps (Mockups)

Basics of Photoshop – Designing a Website

Navigation Design

One of the major differences between Print design and Web design is that for the latter you need to learn to design navigational interfaces. A Web Designer must learn how to design navigation that is designed with the user (target audience) in mind. Below are some guidelines for thinking about navigation design.

10 Principles Of Navigation Design

Design for the reader

Provide a variety of navigation options

Let readers know where they are

Let readers know where they’ve been

Let readers know where they are going

Provide context

Be Consistent

Follow Web Convention

Don’t surprise or mislead the reader

Provide the reader with support and feedback

Ensuring a Smooth Flow

Where am I? – an aid to one’s present location on the site

Where do I go next? – a roadmap or directory of the entire site

How do I get there? – an intuitive or descriptive system of navigation

Am I still on this site? – a consistent look-and-feel across different sections of the site

Navigation Design

Navigation is a subset of the site’s interface, but because it’s an important topic, I’ll give it a little extra attention. The information in a web site is often perceived as occupying a physical space. Like a real physical space, such as a city or airport, a web site requires a system of signage to help visitors find their way around. On web sites, this takes the form of logos, labels, buttons, links, and other shortcuts. These ele- ments make up the navigational system for the site.

Where am I?

One of the main duties of a navigation system is to let users know where they are. Remember that users can enter your site at any point if they have the right URL or if they are clicking on a link from a list of search engine results. There’s no guarantee that they will have the benefit of the home page to tell them where they’ve landed, so it is important that every page on your site contains some label that identifies the site.

Where can I go?

The other responsibility of a navigation system is to clearly present the options for where users can go (or what they can do) next. I usually ask myself two questions when deciding exactly which navigational buttons to add. The first question is user-based: where might this person want to go next? For the second question, I play the role of the client or web site pub- lisher: where do we want that person to go next?

It is impractical to provide a link to every page on a site from every other page, so you need to choose your links wisely. By limiting choices, you can help shape the users’ experience of your site while providing the flexibility they need to get around. The navigational options for every site will be different, but there are a few standards.

First, a link back to the home page from every page in the site is usually expected. If the reader ever gets lost in the maze, this provides a way to get back to the beginning with one click.

There might also be a set of links that should be accessible site-wide, regardless of the current section. These include links to a help section, personalized information, search capabilities, and other general information that should always be available to users. These can be incorporated into the global navigation system, but usually with less visual weight. Note that Nordstrom uses a shopping bag, rather than a cart.

If your site is divided into sections, you might choose to provide links to the main pages of the other sections as part of the navigation system on every page.

You may also have options that are specific to a particular section of the site. This is called secondary navigation or section navigation.

Fundamentals of good navigation

Navigation systems are highly site-specific.The list of choices that are perfect for one site could totally bomb on another. However, there are a few guiding principles that apply regardless of the type of site you’re building. The key characteristics of a successful navigation system are clarity, consistency, and efficiency. Let’s look at what each of these means in practical terms.

Clarity

In order for navigation to work, it must be easily learned. One of the main gripes about surfing the Web is that you have to learn how to use every new site you visit. It is in your interest to make the learning process as quick and painless as possible by making your navigational tools intuitive and easily understood at a glance.

Try following these guidelines for keeping your navigation system clear and user-friendly:

Navigation should look like navigation. Your navigational tools (such as links to the home page and other parts of the site) should somehow stand out on the page. This can be accomplished by grouping them together and applying some sort of visual treatment that sets them apart from ordinary content. Buttons don’t necessarily need to be in 3-D to look “clickable,” but they should still read as navigation at a glance.

Label everything clearly. I can’t emphasize this point strongly enough. Despite the fact that the Web is a visual medium and we’ve been discussing visual cues for interface design, people still find their way around with words. Nothing stands in the way of finding information more than labels that are vague or too cute to be understood. Don’t call a section “A Light in the Darkness” when it’s really just “Help.”

User testing shows that longer, more descriptive link text is more effective in getting people where they want to go. Make sure your section names and all links are labeled in a way that everyone will understand.

Use icons with caution. Although there are a few icons that have taken on standardized meanings (such as a small house picture as a link to the “home” page), for the most part, icons are difficult to decipher and can stand in the way of usability. Some icons, such as a globe, are so overused that they mean absolutely nothing. If you choose to use icons, it is best to reinforce them with clear labels in every instance. If you have just one or two carefully chosen icons, you may get away with defining them once on the home page and using the icons alone throughout the site. Either way, you should carefully consider whether icons are really aiding your navigation.

Consistency

Providing navigational options is not enough if they aren’t predictable or dependable. It’s important that navigational options be consistent throughout the site, in availability as well as in appearance.

Pages that are alike should have the same navigational options. If I could get back to the home page directly from one second-level page, I’d expect to be able to get back from all the others as well. Third-level pages might have a different set of options, but those options need to be consistent among all third-level pages, and so on.

Furthermore, it helps usability to present the options in the same fashion every time they are presented. If your home page button appears in blue at the top right-hand corner of one page, don’t put it at the bottom in red on another page. If you offer a list of options, such as in a toolbar, keep the selections in the same order on each page so users don’t have to spend time hunting around for the option they just used. Navigation options should stay put.

Efficiency

With every click into a site’s hierarchy, you run the risk that the user will lose interest and leave. When you are designing the structure and navigation of a site, be mindful of how many clicks it takes to get to a piece of content or complete a task (such as filling out a form or purchasing something). The goal is to get users to the information they want efficiently and keep them engaged in the process.

The navigation system for a site should alleviate extra clicking, not add to it. Your navigation should include shortcuts to information—it can be as sim- ple as providing links to other major sections of the site. You might want to supplement the global site-navigation system with specialized shortcuts such as a site map or search function.

Pull-down menus

A great space-saving method for adding a large number of links on a page is to put them in a pull-down menu. That way, all the links are readily available but don’t require much precious screen real estate.

Tabs

Navigational tabs across the top of the page have become a standard web element since their introduction in the late 90s. While they serve as a compact and fairly intuitive device for allowing access to different sections of a site, I find that they are sometimes applied inappropriately or gratuitously.

Ideally, tabs should be used to indicate similar functionality across a number of categories. Amazon.com (one of the early tab adopters) uses them correctly in this case—whether you’ve selected books or movies, you have the same basic options for viewing specials, reading reviews, and shopping.

All too often, tabs are used arbitrarily for access to divisions of the site. While there’s nothing inherently wrong with this, the tabs aren’t communicating functionality; they’re just a decorative design for what otherwise would be a simple navigational toolbar.

One drawback to tabs, which Amazon.com faced early on, is that graphical tabs stack up pretty quickly, and you may end up with an unwieldy mountain of tabs. Their solution was to offer only a select number of tabs with access to their full list of offerings on a separate page. Because of the limited pixel real estate across the top of a web page, tabbed interfaces are not easily scalable.

As the Web continues to evolve, navigational approaches come and go like any fad. Buy.com, another formerly tab-reliant site, ditched its tabs altogether and now just presents options in a navigational panel. If you choose to use tabs, consider whether your interface is really benefiting from the additional graphics overhead. It may be that a simple toolbar would suffice.

“Breadcrumb” navigation

One of my favorite navigational elements is what’s become known as “bread-crumb” navigation. As you click through the site’s hierarchy, each successive level is indicated as a text link. Eventually, you end up with a string of section and subsection names that shows exactly where you are and where you’ve been (like Hansel and Gretel’s breadcrumb trail through the forest). The trail also allows users to return to the higher levels they’ve passed through with just one click.

Perhaps the best feature is that, because they are only HTML text links, this form of navigation barely adds to the file size. That’s a lot of communication and functionality packed into a few bytes.

Web Typography

Typography for the Web has changed quite a bit over the past several years. In the past, Web Designers used a small group of fonts known as “web-safe fonts.” The reason for this was because a designer could safely assume these fonts would be installed on the users’ computer because they are the most common fonts found on both Mac and PC operating systems.

In Web Design 2, we will cover what’s called “embedding fonts.” With embedded fonts, a Web Designer has access to thousands of different typefaces and can use these fonts by “embedding the fonts” into web pages, or using a service such as Typekit that provides designers a subscription-based library of hosted, high-quality fonts to use on their websites. This is why it is so common today to see websites with outstanding typography that is more comparable to what you see in print.

But for this class, we’re going to use web-safe fonts, since you are in the beginning stages of your Web Design studies. (If you’ve already worked with embedded font, by all means, go ahead and use them.

Please read the following article that talks more about the basics of working with typography for the Web: Basics of Web Typography

Web-safe fonts

What are web-safe fonts? Web-safe fonts are fonts likely to be present on a wide range of computer systems, and used by Web content authors to increase the likelihood that content will be displayed in their chosen font. If a visitor to a Web site does not have the specified font, their browser will attempt to select a similar alternative, based on the author-specified fallback fonts and generic families.

Creating Design Comps (Mockups)

A design “comp” (meaning comprehensive or composite) is created so that the designer and client can see what the initial design of the website will look like.

Dreamweaver is not a design tool so therefore, the design of your site should be created in Photoshop. Download a sample design comp and note the following:

Be sure to set the width and height of the document in pixels, the color mode to RGB, and the resolution should be 72 dpi for most web files.

Be sure to create a Photoshop file with elements on separate layers. This is important because you may want to edit certain elements separate from the rest of the document, or turn specific layers on or off.

Insert any photographs or graphics into the Photoshop file at 72 dpi. This will prevent the weight of the Photoshop file from getting too large. (And prevent it from taking a million years to open the file!)

Any HTML text should be added to the Photoshop file on a separate layer. Remember you’ll show this Photoshop file to the client to get final design approval so you want the file to represent the look of the final HTML page as closely as possible.