ID01: Interaction Design & Development 01

Icon

Thom Meredith

Week 03

Week 03 – Topics

IxD

Visual Design: Layout and the Grid, Navigation

Introduction to Coda

Design assignment: Design a landing page and sub-navigation

Technical lab: 2 and 3 Column structures

Assignments

1) Lab assignment: Using Coda, create either a 2-column or 3-column structure web page based on the website re-design assignment. Use the HTML code for the 2-column and 3-column structures that you’ve saved in your “web_kit” folder to start the structure. Use Coda to add the images, links, and to create the CSS file. Until we talk more about the CSS box model and how to position inner divs, you will most likely have problems positioning some of your inner content. Don’t worry about making the design perfect at this point, we will continue to work with these files next week. You can modify your design and build a simplified version of your re-design. The purpose of this assignment is to practice building a 2-column or 3-column structure and to become familiar with the Coda interface. I also want you to understand how to create a CSS file and to attach it to your HTML file.

2) Continue working on your Website re-design: Based on my feedback, continue working on the re-design of the home page and also begin designing a landing page for the site. A landing page is the main page for a particular section of the site. The landing page should include sub-navigation. Adding sub-navigation (and a navigational system in general), will add another level of challenge to designing the website. Remember that a constraint for this project is your design must be in the layout of either a 2-column or 3-column structure. Please post the process you went through, why you made the design choices you did for this project and post to your process blog. Please build your design comp in Photoshop following the specifications below:

  • Your file should be RGB and set at 72 dpi
  • The dimensions of your file should be 980 pixels wide (and remember “the fold” is 600-800 pixels high, depending on your audience).
  • Be sure to put your elements on separate layers and to properly label them.

3) Project due before next week: Visiting the websites given in the “Blogs” section of the Resources page of this site, or any other web design sites you’ve found, find 3 articles that discuss designing or building navigation for a website. Post a link to these articles on your class blog and include a 5-6 sentence summary of the article. What does the article detail, how is it helpful to your understanding of navigation for the Web, and what did you learn by reading it? Also, find 3 websites with interesting navigation– be sure that the sites are built in HTML and not Flash. I want you to specifically find interesting navigational systems created in HTML. Be sure to also post these to your blog.

4) Reading for next week: Stylin’ with CSS: Chapter 4: “Positioning Elements” (pg 100-132)

 

Navigation

Navigation design is very important because all web sites need navigation, and if you can design successful navigation, your site will make for a good user-experience. Navigation design is one of the main distinctions between print and web design. Good web designers must know how to design successful navigational interfaces for the web.

So how do you start when thinking about designing a navigational system?

There are three basic questions a well-designed navigational system must answer.

Navigation should answer these questions:

1) Where am I? (Present)

2) Where else can I go? (Future)

3) Where have I been? (Past)

A good way to remember these 3 important questions is to think about the importance of answering where the user is in the Present, Future, and Past.

Also of importance are the additional questions below:

What’s here?

How do I go forward?

How do I get back?

In addition to answering the basic questions outlined above, a well-designed navigational system must also serve the goals of the site. Examples of specific navigation challenges based on the goals of the site could be things like:

How do I place an order?

How do I search the site?

How do I contact customer service?

How do donate money to this organization?

The more versatile the navigation, the more successful it will be because it will serve a variety of users.

As a designer you must ask yourself: What does the user who visits the site want?

Examples of what a user may want:

To find information

To publish something

To purchase something

To interact with someone

To read what someone else thinks about something

As a designer you must ask yourself: What does stakeholder (client) of the site want? (And of course, you should ask a lot of questions so you understand what your client wants for the site.

Examples of what a client (stakeholder) may want:

To share information

To make money

To get feedback

To teach something

It’s important to explore these questions before starting to design the navigation for your site.

Another way to think about navigation is the discussion from our readings for this week

Wayfinding has four core components:

  1. Orientation: Where am I am right now?
  2. Route decisions: Can I find the way to where I want to go?
  3. Mental mapping: Are my experiences consistent and understandable enough to know where I’ve been and to predict where I should go next?
  4. Closure: Can I recognize that I have arrived in the right place?

Consistency is the golden rule of interface design and wayfinding, but there is a paradox at the heart of consistency: if everything looks the same, there are no edges. How can you tell where you are or when you have moved from one space to another? A well-designed site navigation system is built on a consistent page grid, terminology, and navigation links, but it also incorporates the visual flexibility to create identifiable regions and edges within the larger space.

Navigation design “rules”

The following are general rules to follow when designing navigation in a web site. They are only rules, and as the saying goes, rules are made to be broken– just have a good reason to break them!

Consistency

People are very habitual, and it’s therefore very important to keep navigational elements the same throughout a web site. This is generally referred to as “persistent navigation,” keeping your navigation consistent from page to page. Navigation located at the footer of a web page is common and can act as persistent navigation for a site.

You want people to concentrate on your content, and they won’t if they have to figure out a different navigation system on every page. This is true for:

  • Placement on the page. Keep similar functions in the same place on the page. E.g. if you have a “home page” link on all your pages, put that link in the same place on every page.
  • Visual design. Use consistent names, icons, or other visual cues for navigation throughout the site. E.g. the icon for the “home page” link should be the same everywhere.

Note: Some people incorrectly create navigation systems that drop the current page link from the navigation bar. This may seem “efficient” since there is no reason to have a link to the page you are already on. But this approach violates the principle of consistency, since the links in the navigation bar would be in a different place on every page. It also violates the rule below for indicating the current page, because a better approach is to highlight the current page in the navigation bar (while making the link inactive).

7 +/- 2 rule

  • In general, people have a hard time keeping track of more than 7 items (plus or minus 2) at a time. This means that 7 is a good number of navigational links but you can have anywhere between 5-9 navigational links on a page, people may get confused or have a hard time understanding the navigation. On the other hand, you often want to provide more than 7 links, which leads to:

Group Navigation

If you have a lot of links on a page, try organizing them into related sets of 7+-2. For example, a food site could group links to fruits, vegetables, herbs, fish, poultry, and red meats together, while grouping links to nutrition info, health tips, recipes, meal planning, and cutlery in a different location on the page. Some ways to group navigational elements are:

  • Proximity. Place similar navigational elements together on the page, separated from other groups.
  • Style. Give each group of navigational elements its own visual design.

Keep it simple

Don’t make people work hard to get where they want to go. The harder it is, the less people will use the navigation. Some things to avoid:

  • Excessive scrolling. Don’t make users scroll all over the page to get to links. Keep in mind the typical size of your audience’s screen. If the user needs to scroll, make them scroll only in one direction–vertical or horizontal.
  • Excessive hierarchy. Keep the number of levels of hierarchy to a minimum. Try to make any page on the site available within 2 clicks at a maximum.

Where are we?

Always identify the name or function of the current page. This can be done by highlighting the navigation to indicate the current page. The name of the page should also be incorporated into the design layout. In a typical page, the user should be able to see where they are by the navigation bar and by a page heading.

If the site is complex, it’s important to indicate where the current page is in relation to the rest of the site. If possible, combine your navigation with a visual layout so as to indicate the current location. This is called the trail of bread crumbs or breadcrumbing. E.g. you could have a navigation bar that shows the path to the page such as: “home>products>vacuum cleaners”, where both “home” and “products” are active links to their respective pages in the hierarchy. Not only does this indicate to the user where they are, but it allows them to skip to any level of the hierarchy, eliminating the need to see the intermediate pages.

Next versus numbered pages. When the user can navigate to additional pages you generally want to use numbered pages versus a “next” button. Or both as is often the case on such sites as the New York Times.

Avoid “Hub and spokes.” When you can’t see the all the navigation or categories again without going back to the main page, this is often referred to as “Hub and spokes” The user must return to the “hub” to find other choices. As a designer you want to avoid this and develop a more consistent navigation scheme.

Multiple Navigation

There is no single way that users will navigate through the site. People have different goals, search methodologies, attentiveness, previous knowledge, and ways of looking at the content of the site. Even gender can affect navigation.

  • Provide ways for people to traverse across the hierarchy to short-circuit the formal organization. For example, if there is a contact page on a site, it’s useful to have a link to it on every page. This way, the user can navigate across directly to the contact page, OR navigate up to home and then down to the contact page.
  • Sequential vs. directed. Think of users as if they are finding their way within the content. This way-finding sometimes involves users who want to be lead through the information, and this involves a sequential organization (e.g. start here, go here next). Other times, the user will be looking for specific content, and they need a logical and categorical system that enables them to find what they need. Try to provide navigation that satifies both, or provide multiple navigation systems
  • Search vs. grazing. Sometimes people will be searching for specific information, other times they will graze and meander on the site until the find something interesting. Your navigation should accommodate both techniques, and again, sometimes more than one navigation system is needed.
  • Draw people to the content with different techniques: pull quotes, side bars, contextual links, short summaries or outlines. Use links to turn these into alternate navigation systems.

Hide versus show sub-nav

  • Use sub-headings as part of the primary navigation
  • Rollovers or dropdown menus to reveal sub-navigation

Depending on the amount of content and number of subpages underneath the main sections of the web site, the navigation design should reveal the subnavigation in some way.

Different types of navigational graphics and indicators

Here are some of the graphics and indicators a designer can use to create navigation. Some of the options are:

HTML

CSS Rollover

Dropdown Menu

Breadcrumbing

Image maps

Other Issues that impact the way you design navigation

  • Site goals: The goals of the site will greatly affect design of the site and the navigational system. An e-commerce site will have a different type of navigation than a site for a non-profit institution.
  • Information Architecture: You wouldn’t build a house without plans, you cannot build a website without them either. And until you have the plan (commonly referred to as the “sitemap”) you cannot begin designing your site. The sitemap functions as the “blueprint” for the structure of your site.
  • Design comps: Developing a “look and feel” requires creating a design comp for how your site is going to look. Creating the look and feel first will be important and will influence the design of your navigation.
  • Accessibility issues: Every website should have a plan on how to be accessible to as many people as possible. These accessibility issues with also impact the design of your site and your navigation.
  • Usability issues: After you have designed the navigation you’ll need to test it to see how successfully it meets the goals of the site and whether the site and the navigation what is commonly called “user friendly.”

Suggested Reading:

Where am I? http://www.alistapart.com/articles/whereami

Designing Web Graphics 4 by Lynda Weinman: Navigation

Interface Design Conventions

Figure 4.17 from our readings — A canonical page layout. Not every page includes every element shown here.

Web Critiques

One of the best ways to learn more about web design is to look at as much web work as you possibly can. By analyzing other’s work you begin to understand more fully what makes a web site effective and well-designed. Different types of web sites have different goals. What make a good web site?

What makes a good site?

  • Information design – Goals, audience, requirements, and organization of content
  • Interaction design – Functionality, navigation, style of interaction
  • Media design – Visual layout, integration of text, audio, graphics, animation, video
  • Game design – Narrative, perspectives, paths, game play, goals, themes, characters
  • Business design – Economic and organizational benefits and operations
  • Technical design – Capabilities, integration, technologies, performance, security

General Sites to study:

Seven Criteria for discussion. These are the seven general criteria we will talk about in this class. It’s not enough to determine a web site “good” or “bad.” What is it about the site that makes it more effective or less effective? Below are seven different criteria to look at when you are evaluating the design of a web site.

  • Look & feel / Attitude of siteDoes the design or “look and feel” of the site represent the attitude of the company/client?
  • Use of colorDoes the use of color effectively communicate the attitude and “look and feel?” Using red and black for the color palette for a web site communicates something different than using a light blue and white color palette.
  • Composition / layoutDoes the layout of the site effectively accommodate the content? Is there room for text and images? Is the navigation in an easily accessible location?
  • TypographyIs the type on the site readable? Is there a good mix of font size and font weight to communicate hierarchy for the content?
  • ContentIs the content well-written? Is there HTML content on the site. (You want to avoid creating web pages where text is inserted as image files.)
  • User experienceIs the site easy to navigate? Is it east to find content on the site?
  • NavigationIs the navigation well-organized. Is the navigation consistent from page to page?

Other Web sites to critique:

http://www.interbrand.com/

http://www.kleinfelder.com/

http://www.o2communications.com/index.html

http://www.design-works.com/

Design-related Web sites to critique:

Coda introduction

Inserting images

Once you have an image to work with, these are the steps for putting an image in a web page.

  • Placing an image.
  • Adjusting the size of the image.
  • Making an image a link.
  • Flowing text around an image. Left/Right
  • Adjusting the margins around an image.

Experiment with the following:

  • Change the height and width of the image
  • Change the float so text wraps around the image
  • Set the alt attribute of an image
  • Make the image a link
  • Change the margin around an image when text is flowing around it

CSS

  • Make one image that has both states, one above the other.
  • Use CSS to hide crop the bottom and only show the top. On hover, show the bottom.

a.home {
background: url(images/home.gif) no-repeat top left;
height: 20px; //half of whatever your image height is

}

a.hover:hover {

background-position: bottom left;

}

2 and 3 column HTML/CSS example

Category: Classes

Tagged:

Comments are closed.