Making the Web Work is one of the first books to discuss in detail the unique challenges and issues involved in designing Web-based applications and services. The book tackles this subject on three levels by describing a structured method for prioritizing and categorizing individual design decisions, by offering a detailed analysis of various design options, and by documenting established Web interface conventions. Individual chapters focus on conceptual modeling, task flow, information architecture, navigation, form design, online help, and visual design for Web applications. The book concludes with an in-depth analysis of two well-known consumer applications, Amazon.com and Ofoto.
"Applications are clearly at the heart of the future of web interaction. Bob has created a clear and compelling guide for the creation of web activities that successfully and realistically address people's needs and aspirations." --John Rheinfrank, CEO, seeSpace and Clinical Professor, Kellogg School of Management
"Although a corporation's web site can have a huge impact on their brand, image, and customer satisfaction, the unfortunate reality is that web design is not a well-understood discipline within corporate America. This book makes a compelling case for the importance of web design and provides a comprehensive framework and processes for creating web applications that are both useful and usable. Bob's real-life examples and humor make the book approachable and practical for all professionals involved in the creation of web applications." --Jennifer Bailey, Former SVP, Netscape Communications
Sample Chapter - 1.6 mb -- Chapter 8 - Editing And Manipulation
Goals and Objectives. Why I Wrote Making the Web Work. Who You Are. What You Will Find. What You Will Not Find. Conventions Used in This Book. Terminology. Examples. Onward.
I. FOUNDATIONS.1. Common Ground: Defining Web Applications and Establishing the Goals of Design.
Defining Web Applications. Web Applications: The Good, The Bad, and The Unfortunate. Bringing Design to Software. Marketing and Engineering: What Can We Sell? What Can We Build? 34. Design: What Do Users Want? 37. Summary.2. Putting the User First: Describing Target Users and Product Goals.
Anchoring Design: The Core Values of Control and Satisfaction. Core Value: Control. Core Value: Satisfaction. Bounding the Problem: Creating a Comprehensive Product Vision. The Opportunity Statement: Outlining the Business Opportunity. Persona Bios and Goals: Making “Users” Real. The Concept Statement: Describing the Products Essence 65. Summary.3. Deconstructing the Problem: Prioritizing and Categorizing Different Aspects of an Interface.
Deconstructing Cinema: Looking at Movies from the Ground Up. Deconstructing an Interface: Designing from the Conceptual to the Concrete. Tier 1: Structure. Tier 2: Behavior. Tier 3: Presentation. Living with a Model: What the Model Implies About Design Priorities, Resources, and Feedback. Summary.
II. TIER 1: STRUCTURE.4. The Conceptual Model: Selecting a Fundamental Motif.
First Things First: The Importance of a Conceptual Model. Building on the Vision: Identifying and Selecting an Appropriate Conceptual Model. Putting Conceptual Models to Work: Whats in a Store? What Defines a Store? What Defines a Catalog? What Defines BananaRepublic.com? Summary.5. The Structural Model: Understanding the Building Blocks of a Web Interface.
Pages: Building Blocks of the Web. Views: Pages for Viewing and Navigating. Forms: Pages for Editing and Manipulating. The View/Form Construc t. Constructing Workflows Using Views and Forms. Hubs: You Go, You Come Back. Wizards: Step 1, Step 2, Step 3. Guides: The Hub/Wizard Hybrid. Summary.6. The Organizational Model: Organizing and Structuring Content and Functionality.
Deconstructing Organizational Models. Classification Schemes. Objective Classification Schemes. Subjective Classification Schemes. Evaluating Classification Schemes. Models of Association. Indexes. Hierarchies. Webs. Case Study: The Organizational Model(s) of eBay. Summary.
III. TIER 2: BEHAVIOR.7. Viewing and Navigation: Creating Consistent Sorting, Filtering, and Navigation Behaviors.
Navigation. Navigation: Whats It Good For? Deconstructing Navigation. High-Level Navigation Mechanisms. Low-Level Navigation. Selecting Objects and Issuing Commands. Shared Controls. Dedicated Controls. Viewing Lists of Data. Changing Column Sets. Paging. Sorting. Filtering. Searching. Summary.8. Editing and Manipulation: Using HTML Input Controls to Accurately Capture Users Data.
Designing Forms: Thinking in Terms of the Whole. Pace Appropriately. Limit Navigation. Indicate Status and Progress. Support Intelligent Flow and Keyboard Navigation. Provide Multiple Clues. Make Choices Visible. Input Controls: Picking the Right Tool for the Job. Check Boxes. Radio Buttons. List Boxes. Menus. Text Boxes. Buttons. Common Interaction Problems and Solutions. Picking a Single Item from a List. Selecting Dates. Summary.9. User Assistance: Communicating with Users Through Help, Status, and Alerts.
Help. Types of Help. Designing Helpful Help. Alerts. Error Alerts. Status Alerts. Confirmation Alerts. Summary.
IV. TIER 3: PRESENTATION.10. Layout: Positioning Elements to Maximize Understanding and Readability.
Design Value: Simplicity. Clarity: Simple, Direct Expression. Reduction: Arriving at Essential Elements and Forms. Leverage: Using a Single Element for Multiple Roles. Design Value: Consistency. Consistency with the Web: Conventions. Consistency in Placement and Visual Flow: Templates and Grids. Consistency in Visual Detail: Standards and Guidelines. Design Value: Order. Placing Like Elements Together: Grouping. Visually Ranking Elements by Importance: Hierarchy. Supporting Visual Flow: Alignment. Putting It All Together. Summary.11. Style: Defining Visual Appearance.
Evaluating Style. Individuality. Brand Consistency. Appropriateness for the Audience and Function. Preventing Style from Messing Other Things Up. Working Within the Medium. Legibility. Providing Visual Cues to Behavior. Summary.12. Text and Labels: Writing for the Web and Calling Things by Their Right Names.
Eliminate Superfluous Text. Text: Whats It Good For? Navigation. Titles. Labels. Instructions and Help. Marketing Messages. Writing for the Web. Be Courteous, Not Patronizing. Leverage the Context. Dont Repeat Yourself. Avoid Multisyllabic Words That Obfuscate. Summary.
V. CASE STUDIES.13. Amazon.com: Browsing the Aisles of the Webs Supreme Retailer.
Tier I: Structure. Layer 1: Conceptual Model. Layer 2: Structural Model. Layer 3: Organizational Model. Tier II: Behavior. Layer 4: Viewing and Navigation. Layer 5: Editing and Manipulation. Layer 6: User Assistance. Tier III: Presentation. Layer 7: Layout. Layer 8: Style. Layer 9: Text. Summary.14. Ofoto: Looking at the Leading Online Photo Processor.
Tier I: Structure. Layer 1: Conceptual Model. Layer 2: Structural Model. Layer 3: Organizational Model. Tier II: Behavior. Layer 4: Viewing and Navigation. Layer 5: Editing and Manipulation. Layer 6: User Assistance. Tier III: Presentation. Layer 7: Layout. Layer 8: Style. Text. Summary.Afterword.