Web Page Design

Figures.


Acknowledgments.


About This Book.


Who Should Use This Book.


How This Book Is Organized.


Design Philosophies.


Mary's Philosophy.


Randy's Design Philosophy.


Typographic Conventions.


1. Web - A Different Multimedia.


New Rules. Design Implications. Web Design Issues. New Skills. The Design Process. Staffing Considerations. User Considerations. Top Design Spots. Mind Maps. Meeting the Interactive Challenge. Make it Interactive. Identify with the User. Provide Interactive Tools. Contrasting. Media. Print. CD-ROM-based Multimedia. Web Is More Than Just HTML. Design Problems. Information Overload. Limits to the User's Attention. Lost in Cyberspace. Key Points.

I. DESIGN PRINCIPLES.

2. Content Design.


Redesign Content for the Medium. What is Content? Five Kinds of Sites. Internet Commerce (outside the fire wall). Intranet Sites (inside the firewall). What Content Goes On-line? Five Content Types. Representing Content Types on the Web. Meet the Audience's Goals. Writing for the Web Culture. Redesigning Text for the Web. Emphasize the Important. Focus on the Links. Shorten Text. Text Formatting. Remove Transitional Rhetoric. Rewrite References. Avoid Overstimulus. Change the Tone for the Internet Audience. Copyedit Text. Web Cliches. To Understand the Web, Use the Web. An International Note. Revise Graphics for Medium. Illustrations. Charts. Tables. Whitespace. Plan Common Look and Feel. Plan Color Scheme. A Word About Commercial On-line Services. Word of Warning. Publish Current Material Regularly. Update Stale Content. The More Info Syndrome. Summary. Key Points.

3. Cognitive Design.


The Human Brain: A Working Definition. User Needs. Delight the User. Receiving Information. Working Definitions. Designing in the Foreground. Middleground. Background. Memory and Recall. Analyzing Information. Cognitive Overload. Naming. Acting Upon Information. Encourage Users to Give Back. Manage Information. A Last Word-Other Cognitive Needs. Real World Experiences. Empathy. Art and Science. Language. Learning. Summary. Key Points.

4. Audience Considerations.


Categorize the Audience. Skill Level. Technology Level. Surfing Experience. Search Skills. Age and General Computer Experience. Define Goals and Expectations. Cognitive Expectations. Technical Expectations. Content Expectations. Functional Expectations. Defining Expectations. Linguistic Expectations. Jargon. Humor. Feedback. Web Skills. Navigational Skills. Browser Skills. Relationship Awareness. Are Pages Simple/Complex Enough? Type of Browser. Mailto: Capability. Table Usage. Netscapisms. Bandwidth. Consider the International Audience. Key Points.

5. Navigational Design.


Document Set Structures. Linear. Web or Network Structure. Hierarchical. Grid. Deciding Document Structure. Limiting the Number of Clicks. Adding Coherence with Frames and JavaScript. Good Hierarchical Foundations. Pitfalls. Going Beyond Hierarchies. Mixing Hierarchy and Database. Information Structure. Structured Information. Unstructured Information. Content Locator Services. Limiting the Elements of a Search. Site Map. Location Identification. Create Navigational Control. Embedded Links. Intra-Document Links. Control Panel. Content and Navigation Pages. Navigation in VRML. Closure. Key Points.

6. Layout.


HTML Philosophy. Publishing History. Layout Primer. Make the Page Readable. Create Visual Variety. Create Blocks. Define Focal Point(s) of a Page. Layout Formulas. Layout for Multiple Audiences. Lowest Common Denominator. Enhanced Audience. Two Sets of Web Pages. Layout in Basic HTML 2.0. Layout with Tables. Layout in Netscape 1.1 HTML. Backgrounds. Alignment. Image Sizing. Layout in Netscape 2.0 Extensions - Frames. Layout in Stylesheets. Layout in HTML 3.0. Layout in VRML. Key Points.

7. Designing Graphical Elements.


Element Properties. Pixel Size. Byte Size. Colormap Size. Number of Polygons. ALT Attribute Usage for Limited Graphics. Create Literal Replacements. Make Logos Explicit. Make Horizontal Rule ALTs Compensate for Layout. Imagemaps. Imagemaps Create Ambiguity. Elements in an Imagemap. Imagemaps with Figure Overlays. Client-Side Imagemaps. Imagemaps Enhanced with Java. Using Graphics. When To Use Graphics? When Not to Use Graphics? Determining Graphics Usage. Key Points.

8. Adding Meta-Information.


The Need for Meta-Information. Information About the Document. Tags. Identifying and Quantifying Content. Identifying Associated Parties. Identifying Document Properties. Dating and Timeliness Information. Examples of Usage. Information About Relationships. Standard Navigational Relationships. Example of Usage. Uses. Enhanced Web Robots à la Yahoo. URCs (Universal Resource Catalogs). PICS Rating System. Key Points.

9. Interactivity Design.


Forms stuff. Submit Button. Size Text Boxes. Keep Fields Visible. Consistently Position Labels. Group Fields. Building Custom Pages on-the- Fly. Limit User Choices. Future Designing. Key Points.

10. Designing for Time.


Expandable Structure. Ownership. Change Notification. Construction Zones. Single Landmark Changes. Full Page Changes. Location Changes. Automating Maintenance Procedures. Defining Time Factors. Anticipate Next Generation Web Technologies. Database Usage. Cataloging and the Tag. Graphics Changes. Java. VRML. Key Points.

11. Experiential Design.


What is Experiential Design? HTML is Not an Experiential Language; It is an Intellectual One. Other Web Technologies Meet the Experiential Needs. Design Issues. Design for Sensory Dominance. Include the User As the Center of Attention. Design Real Experiences. Include Language as an Audio Experience. Include Tools. Design for Discovery. Apply the Principles of Foreground and Middleground. Problem Solving. Motivation. Design for Play. Design Tools. Virtual Reality. VRML. VRML Design Issues. VRML Sites. Key Points.

12. Testing the Design.


Before You Go On-line. Copyedit. Jargon Check. Readability and Usability Check. Validate HTML. Verify Links. Browser and Platform Check. Speed Check. After the Site Goes On-line. Feedback - Comments from Users. Logfile Analysis. Test After Upgrade. Final Note. Key Points.

II. CASE STUDIES.

13. Sun and Java, Case Study No. 1.


Background. Reducing Information load. Organization. Conclusion.

14. Point Communications, Case Study No. 2.


Background. Navigation and Location. Home. Top of Review Tree. Conclusion.

15. GolfWeb, Case Study No. 3.


Background. Design Features. Common Look and Feel. Make the site Interactive. Appropriate Use of Language. Emphasize the Important First. Content, Content, Content. Internationalization. Five Content Types. Layout Supports Content. Conclusion.

Index.