Book description
Praise for the second edition of The Design of Sites
"In my worldwide IBM marketing role, I have
the benefit of working with some of the finest international
interactive agencies and internal Web teams. As I read The
Design of Sites, [I see] the insight from years of professional
advice has been put to paper. Nowhere have I seen such a practical,
effective, and easy-to-use book to solve and avoid Internet design
issues. I keep a copy of the book handy to remind me of the things
I forgot and to gain fresh perspectives. It never fails to
deliver."
-John Cilio, marketing manager, IBM System x & z Storage
Synergy
"The Design of Sites artfully brings forward the original intent of Christopher Alexander’s pattern language into the user experience design arena. It is a valuable and comprehensive reference."
-George Hackman, Jr., senior director of
User Experience for User Interface Guidelines, Patterns and
Standards, Oracle Corporation
"The Design of Sites is one of the
best tools I have in my usability toolbox. [These] Web UI design
patterns make it easy for me to show my clients how to get the most
usability bang for their buck."
-Claudia Alden Case, usability
consultant and interaction designer, Alden Case Enterprises,
Inc.
"If only biology class had been like this.
Lucid text, bulletproof content, and a comprehensive taxonomy
that’s just as much a source of inspiration as it is a
production tool. This is a really, really good book. If you build
Web sites, read it."
-Marc Campbell, author of Web Design
Garage
Praise for the first edition of The
Design of Sites
"Stop reinventing the wheel every time you
design a Web site! The Design of Sites helps you rethink
your Web sites in terms of genres and patterns. Once you have
identified the patterns and applied the best practices for those
patterns as outlined in this book, you will reduce your design
effort by 50 percent . . . at least!"
-Pawan R. Vora, vice president,
Information Architecture, Seurat Company
"The content [in The Design of
Sites] could make a novice into a seasoned professional over a
weekend. Many companies pay a fortune for the information contained
in the book’s primary chapters."
-John Cilio, marketing manager, IBM
System x & z Storage Synergy
"This book has many handy checklists for
what you should and should not do in creating a conventional Web
site. Just following the authors’ suggestions would put your
site in the top few percent for readability and
usability."
-Jef Raskin, creator of the Macintosh
computer and author of The Humane Interface
"Now that The Design of Sites has
made its appearance, we won't have to put up with those poorly
designed Web pages. These authors have captured patterns from
successful Web designers, including their own experience in
consulting and teaching, and have made this information accessible
to all of us. The book is readable yet full of worthwhile
information--a valuable addition to any Web designer’s
bookshelf."
-Linda Rising, independent consultant
and author of The Patterns Handbook, The Pattern Almanac 2000,
and Design Patterns in Communications Software
"[The Design of Sites] bridges the
gap from theory to practice and makes it possible for people in the
Web-design space to use user-centered design principles in their
work—without having to undertake extensive
training."
-Maya Venkatraman, human interface
engineer, Sun Microsystems
"The coverage [in The Design of
Sites] is excellent--issues go beyond the traditional
‘design the best page’ focus and do a good job of
showing the context. I haven’t seen any other book with the
kind of breadth this has."
-Terry Winograd, professor of computer
science, Stanford University, and editor of Bringing Design to
Software
"With this book as a reference, you can
benefit from what companies like Yahoo! have learned and apply it
to your site, even if you don’t have a design and research
team similarly sized and staffed."
From the foreword by Irene Au, director of User Experience, Google; former vice president of User Experience and Design, Yahoo!
The Design of
Sites,Second Edition, is
the definitive reference for the principles, patterns,
methodologies, and best practices underlying exceptional Web
design. If you are involved in the creation of dynamic Web sites,
this book will give you all the necessary tools and techniques to
create effortless end-user Web experiences, improve customer
satisfaction, and achieve a balanced approach to Web
design.
After a comprehensive tutorial covering the foundations of good Web site design, you will move on to discover the thirteen major Web design pattern groups. These patterns solve recurring design problems and help design teams avoid reinventing the wheel. Patterns range from creating a solid navigation framework and the all-important home page, to instilling trust and building credibility with your customers and improving site performance through better design.
The book features
Coverage of AJAX, the Mobile Web, and online communities
Seventeen new design patterns to add to the original ninety, including the new blog site type
More than twenty significantly updated patterns
450 four-color screen shots and diagrams, including more than 150 new images
Key site elements, including site maps, style sheets, dynamic elements, and customer profiles
Clear, visual organization with color-coded sections for easy reference
A balanced approach to Web design that takes both customer and business needs into account
Table of contents
- Copyright
- Praise for the Second Edition of The Design of Sites
- Praise for the First Edition of The Design of Sites
- Foreword
- Preface
- Acknowledgments
-
I. Foundations of Web Site Design
-
1. Customer-Centered Web Design: More Than a Good Idea
- 1.1. The Evolution of Web Design
- 1.2. The Importance of Customer-Centered Design
- 1.3. Our First Steps toward Unifying Design, Usability, and Marketing
- 1.4. Why We Prefer Customer-Centered Design
-
1.5. Nine Myths of Customer-Centered Design
- Myth 1: Good Design Is Just Common Sense
- Myth 2: Only Experts Create Good Designs
- Myth 3: Web Interfaces Can Be Redesigned Right before Launch
- Myth 4: Good Design Takes Too Long and Costs Too Much
- Myth 5: Good Design Is Just Cool Graphics
- Myth 6: Web Interface Guidelines Will Guide You to Good Designs
- Myth 7: Customers Can Always Rely on Documentation and Help
- Myth 8: Market Research Reveals All Customer Needs
- Myth 9: Quality Assurance Groups Ensure That Web Sites Work Well
- 1.6. Applying Customer-Centered Design
- 1.7. Take-away Ideas
- 2. Making the Most of Web Design Patterns
-
3. Knowing Your Customers: Principles and Techniques
- Knowing Your Customers Helps You Choose Patterns
- To Know Your Customers, You Need Some Special Techniques
- Take It a Step at a Time
- 3.1. Principles for Knowing Your Customers
- 3.2. Techniques for Knowing Your Customers
- 3.3. Take-away Ideas
- 4. Involving Customers with Iterative Design
- 5. Processes for Developing Customer-Centered Sites
-
1. Customer-Centered Web Design: More Than a Good Idea
-
II. Patterns
-
A. Site Genres
- A1. Personal E-Commerce
- A2. News Mosaics
- A3. Community Conference
- A4. Self-Service Government
- A5. Nonprofits as Networks of Help
- A6. Grassroots Information Sites
- A7. Valuable Company Sites
- A8. Educational Forums
- A9. Stimulating Arts and Entertainment
- A10. Web Apps that Work
- A11. Enabling Intranets
- A12. Blogs
-
B. Creating a Navigation Framework
- B1. Multiple Ways to Navigate
- B2. Browsable Content
- B3. Hierarchical Organization
- B4. Task-Based Organization
- B5. Alphabetical Organization
- B6. Chronological Organization
- B7. Popularity-Based Organization
- B8. Category Pages
-
B9. Site Accessibility
- Background
-
Problem
- People with Physical Difficulties Use the Web
- People with Auditory Disabilities Use the Web
- People with Visual Disabilities Use the Web
- People with Color Deficiencies Use the Web
- People with Cognitive Disabilities Use the Web
- People May Use the Web with Mobile Internet Devices
- Use Style Sheets to Separate Content from Presentation
- Solution
- Other Patterns to Consider
-
C. Creating a Powerful Homepage
-
C1. Homepage Portal
- Background
-
Problem
- Build Site Identity and Brand
- Make a Positive First Impression with the Right Look and Feel
- Seduce with Content
- Personalize Content If Possible
- Balance Space for Brand against Space for Navigation
- Make Navigation Easy to Use
- Provide Strong Information Scent
- Provide a Cohesive and Logical Page Layout
- Make the Homepage Download Quickly
- Solution
- Other Patterns to Consider
- C2. Up-Front Value Proposition
-
C1. Homepage Portal
-
D. Writing and Managing Content
- D1. Page Templates
- D2. Content Modules
- D3. Headlines and Blurbs
- D4. Personalized Content
- D5. Message Boards
- D6. Writing for Search Engines
- D7. Inverted-Pyramid Writing Style
- D8. Printable Pages
- D9. Distinctive HTML Titles
-
D10. Internationalized and Localized Content
- Background
-
Problem
- Store Strings Separately from Code
- Do Not Rely Exclusively on Machine Translation
- Hire Competent Translators
- Choose Centralized or Decentralized Localization Management
- Be Aware of Terms and Concepts That May Not Be Widely Known
- Recognize Holidays, Customs, and Nonverbal Communication
- Transform Your Representation of Dates, Currencies, Weights, and Measures
- Prepare for the Varying Devices That People Use to Surf Web Sites
- Understand the Local Legal Issues
- Provide Tailored Services
- Solution
- Other Patterns to Consider
- D11. Style Sheets
-
E. Building Trust and Credibility
- E1. Site Branding
-
E2. E-Mail Subscriptions
- Background
-
Problem
- Make It Easy to Sign Up for an E-Mail Subscription
- Write Newsletters, Advertisements, and Reminders in Inverted-Pyramid Style
- Use Text E-Mail Messages
- Indicate How to Subscribe and Unsubscribe in Each E-Mail
- Use Your Customers’ E-Mail Addresses Only for What You Say You Will
- Write Your E-mails to Help Prevent Phishing Scams
- Solution
- Other Patterns to Consider
- E3. Fair Information Practices
-
E4. Privacy Policy
- Background
-
Problem
- Make the Privacy Policy Available on Each Web Page
- Address Fair Information Practices in the Privacy Policy
- Consider Having a Multilayered Privacy Policy
- Be Aware of Special Privacy Policies for Children
- Keep in Mind the Privacy Policy Requirements of U.S. Government Web Sites
- Consider Special Exceptions for Valid Legal Procedures
- Offer Tangible Value for Providing Personal Information
- Solution
- Other Patterns to Consider
- E5. About Us
- E6. Secure Connections
-
E7. E-Mail Notifications
- Background
-
Problem
- Use a Simple, Clear Sender Name
- Use a Simple Subject Line That Specifies a Past Action or Request
- Make the Purpose of the E-Mail Clear in the Body of the Message
- Tell Customers How to Follow Up with Questions
- Declare Your E-Mail Privacy Policies
- Let People Opt Out of Less Important Notifications
- Structure Your Notifications to Help Prevent Phishing Scams
- Add Images as Attachments Rather Than Using Links to Your Web Site
- Solution
- Other Patterns to Consider
-
E8. Privacy Preferences
- Background
-
Problem
- Many People Like to Keep Contact Information Private
- People Want to Be Able to Project a Particular Persona on Community-Based Web Sites
- Provide a Privacy Mirror to Let Customers See How Others Will See Them
- Privacy Preferences Can Also Be Specified at the End of a Transaction or through Explicit Sharing
- Let People See and Modify Their Privacy Preferences through Account Management
- Consider Using a Secure Connection for Highly Personal Content
- Solution
- Other Patterns to Consider
-
E9. Preventing Phishing Scams
- Background
-
Problem
- Explain What to Expect from Your Web Site
- Don’t Outsource E-Mail Subscriptions and Notifications
- In Designing Your Site, Assume That Some Customers Will Be Phished
- Limit Exposure
- Require Multiple Forms of Identification
- Consider Setting Up an Explicit Personal Message Area for Each Customer
- Actively Search for Web Sites That Are Illicitly Using Your Brand Name
- Consider Technical Solutions
- Solution
- Other Patterns to Consider
- F. Basic E-Commerce
- G. Advanced E-Commerce
-
H. Helping Customers Complete Tasks
-
H1. Process Funnel
- Background
-
Problem
- Minimize the Number of Steps Required to Complete a Task
- Provide a Progress Bar to Let Customers Know Where They Are in the Process Funnel
- Remove Unnecessary Links and Content While Reinforcing the Brand
- Use Floating Windows to Provide Extra Information, without Leading Visitors Out of the Process Funnel
- Make Sure the Back Button Always Works
- Always Make It Clear How to Proceed to the Next Step
- Allow Customers to Skip Unnecessary Steps
- Prevent Errors and Provide Error Messages Whenever Errors Do Occur
- Solution
- Other Patterns to Consider
-
H2. Sign-In/New Account
- Background
-
Problem
- Collect the Minimum Amount of Information for Creating New Accounts
- Make Clear Which Fields Are Required and Which Are Optional
- Prevent Errors
- Provide Your Web Site’s Privacy Information
- Clearly Specify the Kinds of Information You Will and Will Not Ask For after Creating an Account
- Avoid Providing Direct Links to Your Sign-in Pages in E-Mail Messages
- Have a Process for Handling Forgotten Passwords
- Don’t Force First-Time Customers to Sign In Too Early
- Solution
- Other Patterns to Consider
- H3. Guest Account
- H4. Account Management
- H5. Persistent Customer Sessions
- H6. Floating Windows
-
H7. Frequently Asked Questions
- Background
-
Problem
- First Identify Some Frequently Asked Questions
- Examine Your Competitors’ FAQ Pages
- Supplement Your Questions with Those Collected from People in Close Contact with Customers
- Group Related Questions Together
- If There Are Many Questions, Add a Search Feature
- Use Redundant Navigation to Make It Easy to Find the FAQ Page
- Use the FAQ Page Only as a Temporary Fix for Usability Problems
- Encourage Your Community Site to Create a FAQ Page
- Solution
- Other Patterns to Consider
- H8. Context-Sensitive Help
- H9. Direct Manipulation
-
H10. Clear Forms
- Background
-
Problem
- Provide a Payoff for the Form
- Select Appropriate Field Labels
- Select Appropriate Label Locations
- Use Automatic Input Formatting
- Keep Forms Short
- Make Forms Appear Shorter
- Split Long Forms into Multiple Pages
- Put Form Elements in a Box
- Prefill Fields That Require a Special Format
- Reduce the Amount of Typing Required
- Use Intelligent Error Handling
- Solution
- Other Patterns to Consider
- H11. Predictive Input
- H12. Drill-down Options
- H13. Progress Bar
-
H1. Process Funnel
- I. Designing Effective Page Layouts
- J. Making Site Search Fast and Relevant
-
K. Making Navigation Easy
- K1. Unified Browsing Hierarchy
- K2. Navigation Bar
- K3. Tab Rows
- K4. Action Buttons
- K5. High-Visibility Action Buttons
- K6. Location Bread Crumbs
- K7. Embedded Links
- K8. External Links
- K9. Descriptive, Longer Link Names
-
K10. Obvious Links
- Background
-
Problem
- Avoid Using Blue Text for Anything Other than Web Links
- Avoid Underlining Anything Other than Web Links
- Make Links More Attractive by Using Different Font Sizes and Styles
- Use the <title> Attribute with Text Links
- Avoid Using Colors Associated with Color Deficiency
- Use Different Link Colors for Artistic, Entertainment, or Experimental Purposes
- Solution
- Other Patterns to Consider
- K11. Familiar Language
- K12. Preventing Errors
- K13. Meaningful Error Messages
- K14. Page Not Found
-
K15. Permalinks
- Background
-
Problem
- Reserve Generic Permalinks for Category Pages
- Temporary URLs Are Important for Certain Types of Web Sites
- Use Permalinks to Establish Positive Connections with Customers
- Identify the Immutable Aspects of the Page
- Include Text Suggesting the Content of the Page
- Create a Naming Convention for Your URLs and Stick to It
- Create Short URLs That Are Practical and Readable
- Implement a Storage Solution So That Your Pages Can Persist Forever
- Design Dynamic Elements into Static Pages
- Solution
- Other Patterns to Consider
-
K16. Jump Menus
- Background
-
Problem
- Create a Jump Menu to Retain Full Navigation While Preserving Screen Space
- Make the Function of a Jump Menu Immediately Obvious
- Create a Pick List Using Standard Organizational Options
- A Simple Form-Based Pick List Requires a Button
- Use JavaScript to Submit the Form Automatically
- Use DHTML to Build More Complex Jump Menus
- Solution
- Other Patterns to Consider
-
K17. Site Map
- Background
-
Problem
- Design Site Maps as a Backup to Other Site Navigation
- Don’t Let Site Maps Substitute for Well-Designed Navigation
- A Well-Organized Site Map Can Provide a Highly Detailed Site Overview
- A Site Map Needs to Serve Everyone
- Don’t Let Your Site Map Directly Reflect Your Web Directory Structure
- Link Categories to Category Pages Where Possible
- Use a Grid to Compress Information As Much As Possible
- Make the Site Map Available from Every Page
- Consider Making Portions of Your Site Map Part of a Page Not Found Error Page
- Solution
- Other Patterns to Consider
-
L. Speeding Up Your Site
- L1. Low Number of Files
-
L2. Fast-Loading Images
- Background
-
Problem
-
Understand the Strengths and Weaknesses of Different Image File Formats
- Reduce the Number of Colors
- Crop and Shrink Images
- Use Higher Compression Ratios on Images
- Use Progressive-Scan and Interlaced Images
- Use the <height> and <width> Attributes for Images
- Use the <alt> Attribute with All Images
- Consider Combining Small Images That Are Close Together
- Focus on the Main Web Pages First
-
Understand the Strengths and Weaknesses of Different Image File Formats
- Solution
- Other Patterns to Consider
- L3. Separate Tables
- L4. HTML Power
- L5. Reusable Images
-
L6. Fast-Loading Content
- Background
-
Problem
-
Is Anything Happening?
- Locate the Bottlenecks Affecting Site Performance
- Optimize Server Functions to Load Pages Faster
- Use Design Strategies to Load Pages Faster
- Show Progress
- Use Static Progress Indicators
- Use Animation to Demonstrate Progress
- Use a Thermometer for Accurate Progress Reporting
- Display Items As They’re Loading
-
Is Anything Happening?
- Solution
- Other Patterns to Consider
-
M. The Mobile Web
- M1. Mobile Screen Sizing
- M2. Mobile Input Controls
-
M3. Location-Based Services
- Background
-
Problem
- Guides for Exploration and Navigation Are the Most Popular Location-Based Service
- Tagging Content Automatically by Location Can Make It Easier to Find Later
- Location-Based Services Can Enhance Social Coordination and Communication
- Games That Fuse the Virtual and Physical Worlds Often Require Location
- Location-Based Services Can Enhance Vehicle Security, Fleet Management, and Transit Services
- Location-Enhanced Applications Must Be Designed for Privacy from the Start
- Solution
- Other Patterns to Consider
-
A. Site Genres
-
III. Appendixes
-
A. Running Usability Evaluations
- A.1. Setting Target Goals
- A.2. Setting Up the Tasks
- A.3. Recruiting Participants
- A.4. Running the Test
- A.5. Analyzing the Data
- A.6. Presenting the Results
- B. Sample Web Site Evaluation Plan
- C. Sample Consent Form
- D. Sample Observer Form
- E. Online Research
-
A. Running Usability Evaluations
- Glossary
-
Resources
- Part I: Foundations of Web Site Design
-
Part II: Patterns
- Pattern Group A: Site Genres
- Pattern Group B: Creating a Navigation Framework
- Pattern Group C: Creating a Powerful Homepage
- Pattern Group D: Writing and Managing Content
- Pattern Group E: Building Trust and Credibility
- Pattern Group F: Basic E-Commerce
- Pattern Group G: Advanced E-Commerce
- Pattern Group H: Helping Customers Complete Tasks
- Pattern Group I: Designing Effective Page Layouts
- Pattern Group J: Making Site Search Fast and Relevant
- Pattern Group K: Making Navigation Easy
- Pattern Group L: Speeding Up Your Site
- Pattern Group M: The Mobile Web
-
Part III: Appendixes
-
Further Reading
-
Professional Groups
- 7. About the authors
Product information
- Title: The Design of Sites: Patterns for Creating Winning Web Sites, Second Edition
- Author(s):
- Release date: December 2006
- Publisher(s): Pearson
- ISBN: 0131345559
You might also like
book
Software for Use: A Practical Guide to the Models and Methods of Usage-Centered Design
In the quest for quality, software developers have long focused on improving the internal architecture of …
book
User Interface Design for Mere Mortals®
takes the mystery out of designing effective interfaces for both desktop and web applications. It is …
book
Responsive web design
Présentation Au sommaire Découvrez le responsive web design, et apprenez à concevoir des sites Web agréables …
book
Mobile Design Pattern Gallery
When you’re under pressure to produce a well designed, easy-to-navigate mobile app, there’s no time to …