INFO 498B Visual and Interaction Design for Information Technology

Session Three: Navigation and User Interface Design

The objective for this session is to overview devices used to control navigation in online mediums. To discuss
attributes of wayfinding which create successful user experiences to include response, sound, labeling,
grid structures, access and primary and secondary navigation systems.

The goal of this session is to demonstrate to the student a variety of navigational mechanics. Discussions
will help the student to discern which systems are appropriate and why. To provide the student with a
method for developing good navigation and user interface techniques.

Assignments

Create four web images:

1. Create a screen page with a primary navigation system (global). 2. Using the design and navigation from (1.) create a screen demonstrating user interaction. 3. Create a screen page with a secondary navigation system(local). Based on the visual language from (1.). 4. Using the design and navigation from (3.) create a screen demonstrating user interaction. The following compositions will be created using Adobe Illustrator, PhotoShop 6 and Image Ready 3. Create each image at 800 pixels wide x 600 pixels tall. Saved as a PhotoShop files and GIFs posted to student's server space for online critique.

Complete a web audit:
Attached is a web audit sheet to be completed by each student. The goal is to look how navigation is
employed. These skills will help to formulate your thoughts and ideas regarding interface design

Web audit questions:

Name:

URL Address:

o How did this site set-up it's primary navigation? And, was the secondary navigation easy to follow?
o What visual techniques did they use to support their navigation?
o Was their wayfinding intuitive to get access to information needed?
o How buried was important information?
o What would you have done differently?
o How do you rate this sites navigation and user interface (1 being terrible and 10 being great) and discuss why.

Complete the following sections in the required text: (optional)
These exercises are designed to complement your tool building skills. They offer additional design building skills
that will enhance your ability to create stronger sites.

Web Design Essentials, second edition; Dennis, Anita and Giudice, Maria; Adobe Press (Peachpit Press), 2001

Chapter One:
Pg. 26 Drawing a Navigational System
Pg. 28 Creating Flexible Drop Shadows

Chapter Three:
Pg. 46 Slicing Images for HTML Tables
Pg. 48 Optimizing Slices
Pg. 50 Making Image Maps
Pg. 52 Designing Forms
Pg. 56 Making Framed Sites Searchable

Additional Resources
Recommended textbook for this course:
Adobe PhotoShop 6.0: Classroom in a Book, Adobe Press (Peachpit Press), 2000
Adobe Illustrator 9.0 Classroom in a Book, Adobe Press (Peachpit Press), 2000
Designing Web Graphics.3, third edition, Weinman, Lynda, New Riders Publishing, 1999

Navigation Resources
Web Navigation: Designing the User Experience, by Jennifer Fleming, Richard Koman
Designing Visual Interfaces: Communication Oriented Techniques, by Kevin Mullet, Darrell Sano (Contributor)