Slide 1-1 The Web Wizard’s Guide to Web Design by James Lengel

Slide 1-2 CHAPTER 2 Designing Display and Navigation

Objectives  To consider the various ways that text, images, and multimedia can be displayed on a web page  To develop systems that allow users to find their way through the site  To describe methods for collecting user feedback and supporting interactivity  To understand the role of corporate identity in the design of a web site

Slide 1-4 The display of information  Print vs. web layout Print layouts are typically taller than they are wide Web layouts are always wider than they are tall

Slide 1-5 Navigation through the site  If your site has more than one screen of information you need to provide, on every page, the answers to the following questions: Whose site am I looking at? Where am I in the site? What else is available at this site? Where should I go next? How do I find what I am looking for?  A good site navigation is also consistent across the length and breadth of the site

Slide 1-6 Identifying the site  Display the organization’s name or logo (if well- known) at the same location on each page Link from the logo or name back to the home page  Employ a common visual theme on all pages (company colors, font, logos, etc.)  Site identification doesn’t need to provide everything there is to know about the organization, only enough to identify it

Slide 1-7 Knowing where you are - menus  Menus serve several navigational purposes Show categories into which the site is organized Indicate which category the viewer is in right now Let the users click to move to another category  Should be short (1-3 words)  Number of items should be limited Not every page on the site needs its own menu item  Identical from page to page throughout the site

Slide 1-8 Knowing where you are – site map  Shows the various sections and identifies the current page  Shows the relationship between the different categories and what pages are located in them (you can use a 2-stage map to indicate all of the pages within a category)  Consider your initial layout of the website for creating your site map

Slide 1-9 Knowing where you are – cascading titles  Many sites show you the depth you’ve descended into the site by showing the page in relationship to its descendents E.g. YahooYahoo  May be placed at the top or the bottom of the page  Allows the user to jump to any direct descendent of the current page within the site’s heirarchy  Serially developed sites may also include a previous and/or a next button to move through the different pages of a particular section

Slide 1-10 Interactivity  Providing feedback and interaction with your users allows you to take advantage of the nature of the WWW  Forms provide a method of 1-way communication from the user to the company  Discussion boards provide a asynchronous method of 2- way communication between the user and the company or other users & interested parties  Chats provide an synchronous method of 2-way communication Text, voice and/or video may be utilized to create a more personal interaction with the users.

Slide 1-11 The role of Image, Logos, and Corporate Identity  The web site designer must understand the nature and importance of color, fonts, designs, and shapes to the organization’s identity  Color: many organizations have an official color scheme (even the shade of a particular color may have importance to the organization)  If the corporation has a logo important to its identity, it should be included on each page  Many companies have a specific font they use in their ads. Other companies may prefer a specific genre of font (e.g. business-like, whimsical, etc.)

Slide 1-12 Summary  The display of text, images, video, and sound must be built around the principles of information design and the needs of the target audience  Navigation information must tell viewers whose site it is, where they are, what else is available, where they can go next, and how to find what they are looking for  Image, logo, and corporate identity are important aspects of a web site and must be designed into every page