book

The Design of Sites: Patterns for Creating Winning Web Sites, Second Edition

Name: The Design of Sites: Patterns for Creating Winning Web Sites, Second Edition
ISBN: 0131345559

by Douglas K. van Duyne, James A. Landay, Jason I. Hong

December 2006

Intermediate to advanced

1024 pages

22h 11m

English

Pearson

Read now

Unlock full access

Copyright
Praise for the Second Edition of The Design of Sites
Praise for the First Edition of The Design of Sites
Foreword
Preface
New in the Second EditionWhy Use This Book?Who Should Read This Book?Web Design ProfessionalsBusiness ManagersBusiness ClientsBenefits of Using The Design of SitesImproved Customer SatisfactionBalanced Approach to Web DesignIncremental Improvement of Design PracticesConventions Used in This BookDisclaimerWe Would Like to Hear from You
Acknowledgments
I. Foundations of Web Site Design
1. Customer-Centered Web Design: More Than a Good Idea
1.1. The Evolution of Web DesignFirst GenerationSecond GenerationThird GenerationFourth Generation1.2. The Importance of Customer-Centered Design1.3. Our First Steps toward Unifying Design, Usability, and Marketing1.4. Why We Prefer Customer-Centered DesignUser-Centered DesignCompany-Centered DesignTechnology-Centered DesignDesigner-Centered DesignThe Advantages of Customer-Centered Design1.5. Nine Myths of Customer-Centered DesignMyth 1: Good Design Is Just Common SenseMyth 2: Only Experts Create Good DesignsMyth 3: Web Interfaces Can Be Redesigned Right before LaunchMyth 4: Good Design Takes Too Long and Costs Too MuchMyth 5: Good Design Is Just Cool GraphicsMyth 6: Web Interface Guidelines Will Guide You to Good DesignsMyth 7: Customers Can Always Rely on Documentation and HelpMyth 8: Market Research Reveals All Customer NeedsMyth 9: Quality Assurance Groups Ensure That Web Sites Work Well1.6. Applying Customer-Centered DesignPrinciplesProcessesPatternsUsing the Principles, Processes, and Patterns1.7. Take-away Ideas
2. Making the Most of Web Design Patterns
2.1. What Are Patterns?2.2. A Sample Pattern2.3. How to Read a Pattern2.4. How Much Do Patterns Change Over Time?2.5. How to Use the Patterns2.6. An Example of Using Patterns2.7. Take-away Ideas
3. Knowing Your Customers: Principles and Techniques
Knowing Your Customers Helps You Choose PatternsTo Know Your Customers, You Need Some Special TechniquesTake It a Step at a Time3.1. Principles for Knowing Your CustomersYou Are Not Your CustomersUnderstand the Elements, Balance the ForcesUnderstand Your Customers as PeopleYour Customers Are DifferentYour Customers Are Also the SameUnderstand Your Customers’ TasksReducing WorkTask TrainingHelping People Become ExpertsUnderstand the TechnologyUnderstand Your Customers’ Social Issues3.2. Techniques for Knowing Your CustomersStart a Task AnalysisPeopleTasksTechnologySocial IssuesBuild ScenariosChoose TasksChoose Detailed TasksChoose Representative TasksChoose Common or Important TasksChoose Complete TasksObserve and Interview CustomersEthnographic Approaches Can Be Used for ObservationFollow Up with Informal InterviewsOrganize the Information You DiscoverKnow the Limits of These TechniquesSurvey Your CustomersRun Focus GroupsAnalyze Existing Web Sites3.3. Take-away Ideas

4. Involving Customers with Iterative Design
4.1. The Iterative Design Process4.2. Reasons to Use Iterative DesignFixing Errors While They’re Still Inexpensive and Easy to FixBuilding the Right Site, and Building the Site Right4.3. Designing with Goals and Principles in MindSetting Measurable Design GoalsAdhering to Design PrinciplesInformation Architecture, Navigation Design, and Graphic Design4.4. Rapid PrototypingSite Maps, Storyboards, and SchematicsProgressive Refinement, from Low Fidelity to High FidelityAvoid Computer-Based Tools in the Early Design StagesWhen You’re Ready, Switch to Computer-Based ToolsHorizontal and Vertical PrototypesLimits of Prototyping4.5. Evaluating Your Web SiteExpert ReviewsInformal EvaluationsFormal Usability StudiesChoosing an Evaluation Technique4.6. Take-away Ideas
5. Processes for Developing Customer-Centered Sites
5.1. Development Process Overview5.2. The Discovery PhaseThe Discovery ProcessStep 1: Determine the Overall Goals of the Web SiteStep 2: Decide on the Web Site’s Value PropositionBe Firm about Not Skipping DiscoveryAvoid Gold-Plating the Web SiteGet the Web Site Fundamentals Right FirstDiscovery DeliverablesCustomer Analysis DocumentBusiness Analysis DocumentSpecification Document5.3. The Exploration PhaseThe Exploration ProcessExploration DeliverablesMedium-Fidelity Site Maps, Storyboards, and Schematics5.4. The Refinement PhaseThe Refinement ProcessRefinement DeliverablesMedium- to High-Fidelity Site Maps, Storyboards, and Schematics5.5. The Production PhaseThe Production ProcessProduction DeliverablesDesign DocumentInteractive PrototypesTechnical SpecificationsDesign GuidelinesWeb Page Templates5.6. The Implementation PhaseThe Implementation ProcessImplementation DeliverablesCompleted Web SiteMaintenance DocumentTest Plan DocumentUpdates5.7. The Launch Phase5.8. The Maintenance PhaseThe Maintenance ProcessMaintenance DeliverablesPeriodic Web Site MetricsBug ReportsPeriodic Backups5.9. Take-away Ideas
II. Patterns
A. Site Genres
A1. Personal E-CommerceBackgroundProblemMake It Clear Why People Should Purchase from YouProvide Many Ways to Find ProductsKeep It ConvenientConsider Including Some Advanced FeaturesAvoid SurprisesSolutionOther Patterns to ConsiderAll E-Commerce SitesAdvanced E-Commerce SitesA2. News MosaicsBackgroundProblemTime and AccessFormAudienceSolutionOther Patterns to ConsiderBasic News MosaicsAdvanced News MosaicsNews Mosaics Available by Subscription OnlyA3. Community ConferenceBackgroundProblemCommunity Usage PoliciesSynchronous or Asynchronous CommunicationModerationAnonymous, Pseudonymous, or Identified by Real NameArchivesTrust and SociabilityGrowth and SustainabilityAdditional InformationSolutionOther Patterns to ConsiderBasic Community ConferenceAdvanced Community ConferenceA4. Self-Service GovernmentBackgroundProblemRed TapeFaceless BureaucracyUniversal AccessPrivacy and TrustSolutionOther Patterns to ConsiderA5. Nonprofits as Networks of HelpBackgroundProblemA True Network of HelpProviding Specific SolutionsSolutionOther Patterns to ConsiderBasic Nonprofit Networks of HelpAdvanced Nonprofit Networks of HelpA6. Grassroots Information SitesBackgroundProblemWhy a Grassroots Information Site?Answering QuestionsCredibility and TrustWriting StyleExternal ResourcesGrowing the SiteSolutionOther Patterns to ConsiderA7. Valuable Company SitesBackgroundProblemBalance Space for Brand against Space for NavigationOrganize for Customers’ ConvenienceSolutionOther Patterns to ConsiderA8. Educational ForumsBackgroundProblemDifferent Visitors Have Different NeedsRaising the BarSolutionOther Patterns to ConsiderBasic Educational ForumsAdvanced Educational ForumsA9. Stimulating Arts and EntertainmentBackgroundProblemOnline Exhibits Come in Many FormsSet Expectations before Breaking the RulesSolutionOther Patterns to ConsiderA10. Web Apps that WorkBackgroundProblemCustomers Want to Try before They BuyWeb Apps Rely on Web PrinciplesOffer Informative FeedbackProvide Abundant HelpMake Security and Privacy TightSupport Different RolesSolutionOther Patterns to ConsiderA11. Enabling IntranetsBackgroundProblemProvide Personalized ViewsSupport WorkflowsBe Consistent ThroughoutEstablish Policies on New ContentProvide Simple Ways to Add New ContentStart Simple but Plan for GrowthSolutionOther Patterns to ConsiderA12. BlogsBackgroundProblemEstablish CredibilityDetermine Your Blog GenreDecide How the Blog Will Be RunConsider Whether to Allow Comments from ReadersMake It PersonalMake It Easy to Find Information on Your BlogSolutionOther Patterns to Consider
B. Creating a Navigation Framework
B1. Multiple Ways to NavigateBackgroundProblemIntention and Impulse Drive Customers to ActDifferent Motivations Lead to Different Styles of NavigationPut Tools Where Customers Will Find and Use ThemSolutionOther Patterns to ConsiderB2. Browsable ContentBackgroundProblemUse an Organizational SchemeStructure Content with Customers in MindProvide Information ScentHelp Customers Find Their Way BackWhen Does Content on a Page Become Too Much?SolutionOther Patterns to ConsiderB3. Hierarchical OrganizationBackgroundProblemOrganize Your Hierarchy to Match the Way Customers ThinkUse Descriptive and Distinctive Category NamesProvide Examples in Each CategoryUse Fewer Than Fifty SubcategoriesSolutionOther Patterns to ConsiderB4. Task-Based OrganizationBackgroundProblemStudy What Your Customers DoBuild Scenarios of Related TasksSolutionOther Patterns to ConsiderB5. Alphabetical OrganizationBackgroundProblemWhen Does an Alphabetical List Work?Try to Keep the List on One PageSolutionOther Patterns to ConsiderB6. Chronological OrganizationBackgroundProblemDisplay Chronological Information in Lists or Time LinesLimit Chronological Lists to Fewer Than Fifty ItemsSolutionOther Patterns to ConsiderB7. Popularity-Based OrganizationBackgroundProblemHow to Create a ListHow to Determine the Time Period for Taking MeasurementsSolutionOther Patterns to ConsiderB8. Category PagesBackgroundProblemUse a Consistent LayoutMaintain Consistent NavigationProvide Strong Feedback That Visitors Have “Arrived”Provide Cues for Strong Information ScentSolutionOther Patterns to ConsiderB9. Site AccessibilityBackgroundProblemPeople with Physical Difficulties Use the WebPeople with Auditory Disabilities Use the WebPeople with Visual Disabilities Use the WebPeople with Color Deficiencies Use the WebPeople with Cognitive Disabilities Use the WebPeople May Use the Web with Mobile Internet DevicesUse Style Sheets to Separate Content from PresentationSolutionOther Patterns to Consider
C. Creating a Powerful Homepage
C1. Homepage PortalBackgroundProblemBuild Site Identity and BrandMake a Positive First Impression with the Right Look and FeelSeduce with ContentPersonalize Content If PossibleBalance Space for Brand against Space for NavigationMake Navigation Easy to UseProvide Strong Information ScentProvide a Cohesive and Logical Page LayoutMake the Homepage Download QuicklySolutionOther Patterns to ConsiderC2. Up-Front Value PropositionBackgroundProblemRequirementsExercise 1: Articulate the ValueExercise 2: Select the Strongest CandidatesResearch Project 1: Have Customers Nominate the BestResearch Project 2: Have Customers Select the Top Value PropositionIntegrate Your Value Proposition into the SiteSolutionOther Patterns to Consider
D. Writing and Managing Content
D1. Page TemplatesBackgroundProblemBuild a Page Template by Using GridsDefine Global and Individual Page TemplatesUse Other Patterns to Build TemplatesSolutionOther Patterns to ConsiderD2. Content ModulesBackgroundProblemCreate a Publishing SystemDefine Where You Want to Position Content on a PageCreate an Administration PageSolutionOther Patterns to ConsiderD3. Headlines and BlurbsBackgroundProblemWrite a HookPut Headlines and Blurbs in the Content DatabasePut Headlines and Blurbs into Various Content Modules throughout the SiteSolutionOther Patterns to ConsiderD4. Personalized ContentBackgroundProblemCreate a Site with Intentional PersonalizationRequire Minimal Personalization Up FrontInvite Visitors to PersonalizeCategorize ContentUse People’s Background InformationMap Content to Each VisitorCreate a Site with Automatic PersonalizationCreate a Scoring SystemUse Personalized Content-Matching SchemesUse Predefined Content LocationsTrack Customer Visits and History with CookiesSolutionOther Patterns to ConsiderD5. Message BoardsBackgroundProblemDecide Whether to Allow Anonymous PostsDecide Whether to Moderate Your BoardMake It Easy to Find Your Message BoardsRequire Newcomers to Sign In after Reading PostsPresent Clear RulesMake Posting PainlessHelp New Community Members Make Good PostsCreate an Administrative Back EndSolutionOther Patterns to ConsiderD6. Writing for Search EnginesBackgroundProblemRemember That Search Engines Crawl and Index Web SitesStrategies That WorkWrite Distinctive Titles for Every PageWrite Keyword-Filled Descriptive Text Near the Top of Each PageUse <meta> TagsMake Your Site Accessible to Web CrawlersSpecify in a Robots File the Content That You Don’t Want CrawledCounterproductive StrategiesSolutionOther Patterns to ConsiderD7. Inverted-Pyramid Writing StyleBackgroundProblemCreate a Concise but Descriptive HeadlineContinue with the Most Important Points in the Blurb or LeadUse Less TextWrite Short Sentences and Check Your WorkAvoid HypeUse Bullets and Numbered ListsUse Embedded LinksExperiment with Different Writing Styles for Entertainment PurposesSolutionOther Patterns to ConsiderD8. Printable PagesBackgroundProblemRemove Extraneous Navigation and Content from the Printable TemplateAdd Labels to Help People Find the Article Online AgainTake the Main Content Out of Any HTML TablesSolutionOther Patterns to ConsiderD9. Distinctive HTML TitlesBackgroundProblemHTML Titles Are Used for Headlines and BlurbsHTML Titles Are Used by Search EnginesHTML Titles Are Used by Desktop ComputersVary Titles from Page to PageUse Titles and Bread CrumbsSolutionOther Patterns to ConsiderD10. Internationalized and Localized ContentBackgroundProblemStore Strings Separately from CodeDo Not Rely Exclusively on Machine TranslationHire Competent TranslatorsChoose Centralized or Decentralized Localization ManagementBe Aware of Terms and Concepts That May Not Be Widely KnownRecognize Holidays, Customs, and Nonverbal CommunicationTransform Your Representation of Dates, Currencies, Weights, and MeasuresPrepare for the Varying Devices That People Use to Surf Web SitesUnderstand the Local Legal IssuesProvide Tailored ServicesSolutionOther Patterns to ConsiderD11. Style SheetsBackgroundProblemDefine a Standard Style Sheet as Part of Your Sitewide Page TemplateDefine a Separate Style Sheet for Printable PagesDefine a Separate Style Sheet for Mobile Content and Mobile InputUse Style Sheets to Make Your Site More AccessibleBe Aware of Browser Incompatibilities with Style SheetsSolutionOther Patterns to Consider
E. Building Trust and Credibility
E1. Site BrandingBackgroundProblemDifferentiating a BrandExercise 1: Write a Narrative Distinguishing Your SiteExercise 2: Use Descriptive Terms to Create an IdentityExercise 3: Write Customer ScenariosExercise 4: Write Brief Purpose StatementsExercise 5: Test Logo and Color UseEstablishing Brand IdentitySolutionOther Patterns to ConsiderE2. E-Mail SubscriptionsBackgroundProblemMake It Easy to Sign Up for an E-Mail SubscriptionWrite Newsletters, Advertisements, and Reminders in Inverted-Pyramid StyleUse Text E-Mail MessagesIndicate How to Subscribe and Unsubscribe in Each E-MailUse Your Customers’ E-Mail Addresses Only for What You Say You WillWrite Your E-mails to Help Prevent Phishing ScamsSolutionOther Patterns to ConsiderE3. Fair Information PracticesBackgroundProblemSolutionOther Patterns to ConsiderE4. Privacy PolicyBackgroundProblemMake the Privacy Policy Available on Each Web PageAddress Fair Information Practices in the Privacy PolicyConsider Having a Multilayered Privacy PolicyBe Aware of Special Privacy Policies for ChildrenKeep in Mind the Privacy Policy Requirements of U.S. Government Web SitesConsider Special Exceptions for Valid Legal ProceduresOffer Tangible Value for Providing Personal InformationSolutionOther Patterns to ConsiderE5. About UsBackgroundProblem1. Organizational Profile2. Contact Information3. Disclaimers and Legal Information4. Customers and Partners5. Employment Opportunities6. Public Relations7. Investor Relations8. Community Relations9. Site Credits10. Frequently Asked QuestionsSolutionOther Patterns to ConsiderE6. Secure ConnectionsBackgroundProblemSolutionOther Patterns to ConsiderE7. E-Mail NotificationsBackgroundProblemUse a Simple, Clear Sender NameUse a Simple Subject Line That Specifies a Past Action or RequestMake the Purpose of the E-Mail Clear in the Body of the MessageTell Customers How to Follow Up with QuestionsDeclare Your E-Mail Privacy PoliciesLet People Opt Out of Less Important NotificationsStructure Your Notifications to Help Prevent Phishing ScamsAdd Images as Attachments Rather Than Using Links to Your Web SiteSolutionOther Patterns to ConsiderE8. Privacy PreferencesBackgroundProblemMany People Like to Keep Contact Information PrivatePeople Want to Be Able to Project a Particular Persona on Community-Based Web SitesProvide a Privacy Mirror to Let Customers See How Others Will See ThemPrivacy Preferences Can Also Be Specified at the End of a Transaction or through Explicit SharingLet People See and Modify Their Privacy Preferences through Account ManagementConsider Using a Secure Connection for Highly Personal ContentSolutionOther Patterns to ConsiderE9. Preventing Phishing ScamsBackgroundProblemExplain What to Expect from Your Web SiteDon’t Outsource E-Mail Subscriptions and NotificationsIn Designing Your Site, Assume That Some Customers Will Be PhishedLimit ExposureRequire Multiple Forms of IdentificationConsider Setting Up an Explicit Personal Message Area for Each CustomerActively Search for Web Sites That Are Illicitly Using Your Brand NameConsider Technical SolutionsSolutionOther Patterns to Consider
F. Basic E-Commerce
F1. Quick-Flow CheckoutBackgroundProblemEliminate DistractionsAddress Potential Deal BreakersBuild Trust throughout the ProcessRecap the OrderSolutionOther Patterns to ConsiderF2. Clean Product DetailsBackgroundProblemCreate a Clean, Standard TemplateKeep Key Elements above the FoldPut Less Important Information below the FoldSolutionOther Patterns to ConsiderF3. Shopping CartBackgroundProblemProvide Easy Access to the Shopping CartLet Customers Continue to ShopHelp Customers Check OutGive Details in the CartSet Expectations about AvailabilityStore Carts for LaterCross-Sell and Up-SellShow Cart Contents on Every PageObserve Local CustomsSolutionOther Patterns to ConsiderF4. Quick Address SelectionBackgroundProblemStore AddressesCreate Clear Forms for New AddressesValidate FieldsSolutionOther Patterns to ConsiderF5. Quick Shipping Method SelectionBackgroundProblemShow Delivery OptionsExplain Shipping TimesIndicate CostsSolutionOther Patterns to ConsiderF6. Payment MethodBackgroundProblemDispel Concerns about SecurityProvide Easy Payment ChoicesProvide an Uncomplicated Form for Billing InformationStore Credit Card InformationRedeem Gift CertificatesSolutionOther Patterns to ConsiderF7. Order SummaryBackgroundProblemConfirm That the Order Is Ready to CompleteShow Key ElementsSolutionOther Patterns to ConsiderF8. Order Confirmation and Thank-YouBackgroundProblemThank Your CustomersHighlight the Order Number and DateShow All Key ElementsSend an E-Mail ConfirmationMake the Page PrintableEncourage Customers to Continue ShoppingSolutionOther Patterns to ConsiderF9. Easy ReturnsBackgroundProblemPlace Return Policy Links Prominently on All Product and Checkout PagesProvide a Return Process FunnelSolutionOther Patterns to Consider
G. Advanced E-Commerce
G1. Featured ProductsBackgroundProblemEditorialize in Your Product RecommendationsProvide Different Kinds of RecommendationsProvide Opportunities to ExploreSolutionOther Patterns to ConsiderG2. Cross-Selling and Up-SellingBackgroundProblemCross-Sell and Up-Sell Related ProductsSeparate and Minimize the Screen Real Estate Devoted to Related ProductsEditorialize about Related ProductsAllow Quick Purchase of Related ProductsSell Related Products during CheckoutSolutionOther Patterns to ConsiderG3. Personalized RecommendationsBackgroundProblemAvoid Using Purely Inferred DataMake It Easy for Customers to Choose Preferred ProductsInvite Customers to State Their NeedsProvide Different Levels of RecommendationsProvide Feedback about Why a Recommendation Was MadeProvide Multiple and Repeated RecommendationsAddress Privacy ConcernsSolutionOther Patterns to ConsiderG4. Recommendation CommunityBackgroundProblemHelp Community Members Write Good ReviewsProvide Use PoliciesEquip Your Site with Meta-ratingsPrime the PumpSolutionOther Patterns to ConsiderG5. Multiple DestinationsBackgroundProblemLet Customers Choose Multiple DestinationsLet Customers Choose Addresses from Their Existing Address BookConfirm the OrderSolutionOther Patterns to ConsiderG6. Gift GivingBackgroundProblemState That the Packing Slip Will Not List Prices or ItemsProvide the Ability to Select and Edit Gift Recipients and NotesSummarize and Confirm the OrderProvide Other Gift-Giving FeaturesSolutionOther Patterns to ConsiderG7. Order Tracking and HistoryBackgroundProblemProvide Access to OrdersFor Pending Orders, Indicate Product AvailabilityAllow Order Modification, If PossibleAllow Order TrackingSolutionOther Patterns to Consider
H. Helping Customers Complete Tasks
H1. Process FunnelBackgroundProblemMinimize the Number of Steps Required to Complete a TaskProvide a Progress Bar to Let Customers Know Where They Are in the Process FunnelRemove Unnecessary Links and Content While Reinforcing the BrandUse Floating Windows to Provide Extra Information, without Leading Visitors Out of the Process FunnelMake Sure the Back Button Always WorksAlways Make It Clear How to Proceed to the Next StepAllow Customers to Skip Unnecessary StepsPrevent Errors and Provide Error Messages Whenever Errors Do OccurSolutionOther Patterns to ConsiderH2. Sign-In/New AccountBackgroundProblemCollect the Minimum Amount of Information for Creating New AccountsMake Clear Which Fields Are Required and Which Are OptionalPrevent ErrorsProvide Your Web Site’s Privacy InformationClearly Specify the Kinds of Information You Will and Will Not Ask For after Creating an AccountAvoid Providing Direct Links to Your Sign-in Pages in E-Mail MessagesHave a Process for Handling Forgotten PasswordsDon’t Force First-Time Customers to Sign In Too EarlySolutionOther Patterns to ConsiderH3. Guest AccountBackgroundProblemSolutionOther Patterns to ConsiderH4. Account ManagementBackgroundProblemProvide a Single Page to Hold All Account Information in One PlaceProvide a Task-Based Organization Scheme to Let Customers Modify Their InformationMake the Account Management Page Easy to AccessSolutionOther Patterns to ConsiderH5. Persistent Customer SessionsBackgroundProblemTemporary Customer SessionsPersistent Customer SessionsDifferences between Temporary and Persistent Customer SessionsChoosing between Temporary and Persistent Customer SessionsTwo Warnings about Customer SessionsSolutionOther Patterns to ConsiderH6. Floating WindowsBackgroundProblemUse Link-Based Floating Windows to Show Related Information While Maintaining ContextUse Floating Windows to Provide Additional Information InstantlyUse Automatic Floating Windows to Show Unrelated Information upon Page EntryUse Concurrent Floating Windows SparinglySolutionOther Patterns to ConsiderH7. Frequently Asked QuestionsBackgroundProblemFirst Identify Some Frequently Asked QuestionsExamine Your Competitors’ FAQ PagesSupplement Your Questions with Those Collected from People in Close Contact with CustomersGroup Related Questions TogetherIf There Are Many Questions, Add a Search FeatureUse Redundant Navigation to Make It Easy to Find the FAQ PageUse the FAQ Page Only as a Temporary Fix for Usability ProblemsEncourage Your Community Site to Create a FAQ PageSolutionOther Patterns to ConsiderH8. Context-Sensitive HelpBackgroundProblemPlace Context-Sensitive Help Near Where It’s NeededConsider Using Pop-up Windows to Let Customers Maintain ContextSolutionOther Patterns to ConsiderH9. Direct ManipulationBackgroundProblemCertain Web Tasks Are Best Suited to Direct ManipulationMoving Objects around the Screen Requires Something to GrabCreate Visual Clues on Movable ObjectsChange the Look of the Object When Rolled OverProvide FeedbackProvide Instructions Where NecessarySolutionOther Patterns to ConsiderH10. Clear FormsBackgroundProblemProvide a Payoff for the FormSelect Appropriate Field LabelsSelect Appropriate Label LocationsUse Automatic Input FormattingKeep Forms ShortMake Forms Appear ShorterSplit Long Forms into Multiple PagesPut Form Elements in a BoxPrefill Fields That Require a Special FormatReduce the Amount of Typing RequiredUse Intelligent Error HandlingSolutionOther Patterns to ConsiderH11. Predictive InputBackgroundProblemTyping within a Pick List Can Provide Basic Predictive InputUse Predictive Text Input to Help Speed EntryLoad Predictive Text Input with the PageBuild a List of Viable Text StringsCreate a Visible List of Appropriate SizeProvide Multiple Selection MethodsSolutionOther Patterns to ConsiderH12. Drill-down OptionsBackgroundProblemUse Hierarchical Pick Lists for Specifying Interdependent OptionsDeactivate the Secondary Pick List Until a Primary Selection Is MadeCreate Pick Lists Containing Generic Options That Appear by DefaultCreate Hierarchical MenusFine-Tune the Hierarchical Menu PerformanceSolutionOther Patterns to ConsiderH13. Progress BarBackgroundProblemProvide Process FeedbackOutline the Major StepsVisually Indicate Where the Customer Is in the ProcessDesign the Progress Bar to Communicate Information ClearlyProvide Direct Step NavigationInclude Edit ButtonsIndicate What’s NextSkip Unnecessary StepsSolutionOther Patterns to Consider
I. Designing Effective Page Layouts
I1. Grid LayoutBackgroundProblemIdentify the Elements That Are Common throughout Your Web SiteSketch Out Grid Layouts That Incorporate the Common ElementsCreate Sample Web Pages and Get FeedbackStudy How Other Web Pages Implement Their GridsSolutionOther Patterns to ConsiderI2. Above the FoldBackgroundProblemChoose a Minimum Screen Resolution to SupportDetermine the Elements That Must Be above the FoldSolutionOther Patterns to ConsiderI3. Clear First ReadsBackgroundProblemDetermine the Most Important Element on Each PageUse Multiple Features to Differentiate the First ReadDesign for Lower-Resolution DisplaysTest Your First ReadsSolutionOther Patterns to ConsiderI4. Expanding Screen WidthBackgroundProblemUse Relative Table Widths to Create Expanding-Width Web PagesMix Absolute and Relative Widths to Fix the Width of Some Parts of a Web PageDesign Web Pages with a Minimum Width in MindSolutionOther Patterns to ConsiderI5. Fixed Screen WidthBackgroundProblemSolutionOther Patterns to ConsiderI6. Consistent Sidebars Of Related ContentBackgroundProblemMake the Location of Sidebars ConsistentDetermine a Maximum Length for SidebarsSolutionOther Patterns to Consider
J. Making Site Search Fast and Relevant
J1. Search Action ModuleBackgroundProblemCreate a Simple Search ToolPut the Search Tool in a Consistent PlaceSolutionOther Patterns to ConsiderJ2. Straightforward Search FormsBackgroundProblemBoolean Expressions Are Hard to UnderstandExact Matches Mean No MatchesProvide Defaults for Category SearchesSolutionOther Patterns to ConsiderJ3. Organized Search ResultsBackgroundProblemProvide Relevant Summaries with the Search ResultsClearly Organize the Search ResultsProvide Good Hyperlinked Titles for Each HitUse Log Files to Tailor Results for the Most Common Search TermsCompensate for Common MisspellingsProvide Support for Common Search TasksSolutionOther Patterns to Consider
K. Making Navigation Easy
K1. Unified Browsing HierarchyBackgroundProblemWhy Always Force Visitors to Go Home?Create Links for Easier NavigationSolutionOther Patterns to ConsiderK2. Navigation BarBackgroundProblemSolutionOther Patterns to ConsiderK3. Tab RowsBackgroundProblemClearly Identify the Active TabCreate an Indicator LineTab Rows Have LimitationsSolutionOther Patterns to ConsiderK4. Action ButtonsBackgroundProblemGraphical Action ButtonsHTML Action ButtonsSolutionOther Patterns to ConsiderK5. High-Visibility Action ButtonsBackgroundProblemMind the FoldSolutionOther Patterns to ConsiderK6. Location Bread CrumbsBackgroundProblemProvide Bread Crumbs for Visitors to BacktrackUse Separators to Show Relationships among CategoriesSolutionOther Patterns to ConsiderK7. Embedded LinksBackgroundProblemUse Helpful Link NamesHow Many Links Are Too Many?Consider Having Some Embedded Links Open Floating WindowsSolutionOther Patterns to ConsiderK8. External LinksBackgroundProblemConsider Including Links That Lead to External Web SitesMinimize Link RotSet Expectations, Mark External ReferencesConsider Combining Embedded Links with External LinksOpen New Windows for External LinksSolutionOther Patterns to ConsiderK9. Descriptive, Longer Link NamesBackgroundProblemGeneric Terms Make Poor Link NamesLonger Link Names Improve Site AccessibilityLonger Link Names Make a Page Easier to SkimSummarize the Linked Page with a Few Choice WordsUse Familiar LanguageDifferentiate or Eliminate Links That Have Similar NamesSeparate Links That Word-WrapSolutionOther Patterns to ConsiderK10. Obvious LinksBackgroundProblemAvoid Using Blue Text for Anything Other than Web LinksAvoid Underlining Anything Other than Web LinksMake Links More Attractive by Using Different Font Sizes and StylesUse the <title> Attribute with Text LinksAvoid Using Colors Associated with Color DeficiencyUse Different Link Colors for Artistic, Entertainment, or Experimental PurposesSolutionOther Patterns to ConsiderK11. Familiar LanguageBackgroundProblemObserve and Interview Your CustomersUse Card Sorting to Help Structure the Information on Your Web SiteTest Link Names through Category Identification and DescriptionSolutionOther Patterns to ConsiderK12. Preventing ErrorsBackgroundProblemProvide Hints about the Expected FormatMake Sure the Software Accepts Multiple FormatsMake Clear Which Fields Are Required and Which Are OptionalSolutionOther Patterns to ConsiderK13. Meaningful Error MessagesBackgroundProblemProvide Clear Error Messages without Assigning BlameAvoid Humor in Error MessagesExplain How to Recover from the ErrorPlace the Error Message Near the Problem It IdentifiesKeep Previously Entered Text IntactSolutionOther Patterns to ConsiderK14. Page Not FoundBackgroundProblemSolutionOther Patterns to ConsiderK15. PermalinksBackgroundProblemReserve Generic Permalinks for Category PagesTemporary URLs Are Important for Certain Types of Web SitesUse Permalinks to Establish Positive Connections with CustomersIdentify the Immutable Aspects of the PageInclude Text Suggesting the Content of the PageCreate a Naming Convention for Your URLs and Stick to ItCreate Short URLs That Are Practical and ReadableImplement a Storage Solution So That Your Pages Can Persist ForeverDesign Dynamic Elements into Static PagesSolutionOther Patterns to ConsiderK16. Jump MenusBackgroundProblemCreate a Jump Menu to Retain Full Navigation While Preserving Screen SpaceMake the Function of a Jump Menu Immediately ObviousCreate a Pick List Using Standard Organizational OptionsA Simple Form-Based Pick List Requires a ButtonUse JavaScript to Submit the Form AutomaticallyUse DHTML to Build More Complex Jump MenusSolutionOther Patterns to ConsiderK17. Site MapBackgroundProblemDesign Site Maps as a Backup to Other Site NavigationDon’t Let Site Maps Substitute for Well-Designed NavigationA Well-Organized Site Map Can Provide a Highly Detailed Site OverviewA Site Map Needs to Serve EveryoneDon’t Let Your Site Map Directly Reflect Your Web Directory StructureLink Categories to Category Pages Where PossibleUse a Grid to Compress Information As Much As PossibleMake the Site Map Available from Every PageConsider Making Portions of Your Site Map Part of a Page Not Found Error PageSolutionOther Patterns to Consider
L. Speeding Up Your Site
L1. Low Number of FilesBackgroundProblemRemove Unnecessary Image, Audio/Video, Applet, and Plug-in FilesUse HTML Features Instead of Images, Where It Makes SenseReuse ImagesRemove Slow, Large Files from Pages That Need to Be FastSolutionOther Patterns to ConsiderL2. Fast-Loading ImagesBackgroundProblemUnderstand the Strengths and Weaknesses of Different Image File FormatsReduce the Number of ColorsCrop and Shrink ImagesUse Higher Compression Ratios on ImagesUse Progressive-Scan and Interlaced ImagesUse the <height> and <width> Attributes for ImagesUse the <alt> Attribute with All ImagesConsider Combining Small Images That Are Close TogetherFocus on the Main Web Pages FirstSolutionOther Patterns to ConsiderL3. Separate TablesBackgroundProblemSolutionOther Patterns to ConsiderL4. HTML PowerBackgroundProblemSolutionOther Patterns to ConsiderL5. Reusable ImagesBackgroundProblemSolutionOther Patterns to ConsiderL6. Fast-Loading ContentBackgroundProblemIs Anything Happening?Locate the Bottlenecks Affecting Site PerformanceOptimize Server Functions to Load Pages FasterUse Design Strategies to Load Pages FasterShow ProgressUse Static Progress IndicatorsUse Animation to Demonstrate ProgressUse a Thermometer for Accurate Progress ReportingDisplay Items As They’re LoadingSolutionOther Patterns to Consider
M. The Mobile Web
M1. Mobile Screen SizingBackgroundProblemHow Small Is Small?How Do Browsers Render Web Sites on Handheld Devices?Do Web Sites Need to Be Completely Redesigned for the Small Screen?Site Designers Have Multiple OptionsThe Advantages of Being Mobile Enabled Often Outweigh the CostsLay Out Content and Navigation to Minimize ScrollingSolutionOther Patterns to ConsiderM2. Mobile Input ControlsBackgroundProblemControlling the CursorMinimize the Number of Links and Buttons on Web Pages for Mobile DevicesMake the Positions of Links and Buttons ConvenientMinimize Text EntryAvoid Pick Lists and Image MapsMinimize the Use of AJAX TechnologiesUse Style SheetsSolutionOther Patterns to ConsiderM3. Location-Based ServicesBackgroundProblemGuides for Exploration and Navigation Are the Most Popular Location-Based ServiceTagging Content Automatically by Location Can Make It Easier to Find LaterLocation-Based Services Can Enhance Social Coordination and CommunicationGames That Fuse the Virtual and Physical Worlds Often Require LocationLocation-Based Services Can Enhance Vehicle Security, Fleet Management, and Transit ServicesLocation-Enhanced Applications Must Be Designed for Privacy from the StartSolutionOther Patterns to Consider
III. Appendixes
A. Running Usability Evaluations
A.1. Setting Target GoalsIdentifying What You Want to LearnGetting the Information You WantProcess Data versus Bottom-Line DataA.2. Setting Up the TasksLevels of TasksSimple Tasks Are Short and Performed OftenTasks of Medium Difficulty Are a Little Longer and Harder than Simple TasksHard Tasks Span Many Web Pages and Are Fairly InvolvedDesigning Effective TasksTasks Should Be about What People Want to DoTasks Should Be RealisticTasks Should Form a Complete StoryA.3. Recruiting ParticipantsAvoid Friends and Family As ParticipantsCompensate Participants with Gifts and PrizesGet the Right Number of ParticipantsSelect an Appropriate Experimental DesignA.4. Running the TestSetting Up the Test LocationEthical ConsiderationsTest RolesRunning a Pilot TestTesting Paper PrototypesTesting Online PrototypesStarting and Carrying Out the TestGreet ParticipantsHave Participants Fill Out PaperworkAsk Participants to Think AloudInstruct Participants on How to StartTake Good Notes during Each TaskWatch CloselyFollow Up with a Quick SurveyDebrief Participants after the TestA.5. Analyzing the DataAnalyzing Process DataAnalyzing Bottom-Line DataA.6. Presenting the Results
B. Sample Web Site Evaluation Plan
RolesIntroductionTasksDebriefing
C. Sample Consent Form
D. Sample Observer Form
E. Online Research
E.1. Getting Started: Define Your Research Goals Up FrontUnderstand Customer RetentionLearn Why Customers Abandon SitesFind Out Whether Customers Can Complete TasksE.2. Research by Design PhaseThe Discovery and Exploration PhasesThe Refinement, Production, and Implementation PhasesThe Launch and Maintenance PhasesSite RedesignE.3. Types of ResearchMarket ResearchUsability ResearchE.4. Running the TestThe Participants’ ViewSetting Up Your ResearchRecruiting the Right ParticipantsE.5. Analyzing the DataE.6. Comparison of Research MethodsE.7. Take-away Ideas
Glossary
ABCDEFGHIJKLMNOPQRSTUVWX
Resources
Part I: Foundations of Web Site DesignChapter 1: Customer-Centered Web Design: More Than a Good IdeaBooks, Research Papers, and News ArticlesWeb SitesChapter 2: Making the Most of Web Design PatternsBooks, Research Papers, and News ArticlesWeb SitesChapter 3: Knowing Your Customers: Principles and TechniquesBooks, Research Papers, and News ArticlesSoftwareChapter 4: Involving Customers with Iterative DesignBooks, Research Papers, and News ArticlesSoftwareChapter 5: Processes for Developing Customer-Centered SitesBooks, Research Papers, and News ArticlesPart II: PatternsPattern Group A: Site GenresA1 personal e-commerceA2 News MosaicsA3 Community ConferenceA4 Self-Service GovernmentA5 Nonprofits As Networks of HelpA7 Valuable Company SitesA8 Educational ForumsA9 Stimulating Arts and EntertainmentA10 Web Apps that WorkA11 Enabling IntranetsA12 BlogsPattern Group B: Creating a Navigation FrameworkB1 Multiple Ways to NavigateB2 Browsable ContentB3 Hierarchical OrganizationB4 Task-Based OrganizationB5 Alphabetical OrganizationB6 Chronological OrganizationB7 Popularity-Based OrganizationB8 Category PagesB9 Site AccessibilityPattern Group C: Creating a Powerful HomepageC1 Homepage PortalC2 Up-Front Value PropositionPattern Group D: Writing and Managing ContentD1 Page TemplatesD2 Content ModulesD3 Headlines and BlurbsD4 Personalized ContentD5 Message BoardsD6 Writing For Search EnginesD7 Inverted-Pyramid Writing StyleD9 Distinctive Html TitlesD10 Internationalized and Localized ContentD11 Style SheetsPattern Group E: Building Trust and CredibilityE1 Site BrandingE2 E-Mail subscriptionsE3 Fair Information PracticesE4 Privacy PolicyE5 About UsE6 Secure ConnectionsE7 E-Mail NotificationsE8 Privacy PreferencesE9 Preventing Phishing ScamsPattern Group F: Basic E-CommerceF1 Quick-Flow CheckoutF2 Clean Product DetailsF3 Shopping CartF9 Easy ReturnsPattern Group G: Advanced E-CommerceG1 Featured ProductsG2 Cross-Selling and Up-SellingG3 Personalized RecommendationsG4 Recommendation CommunityPattern Group H: Helping Customers Complete TasksH1 Process FunnelH2 Sign-In/New AccountH4 Account ManagementH5 Persistent Customer SessionsH7 Frequently Asked QuestionsH8 Context-Sensitive HelpH10 Clear FormsPattern Group I: Designing Effective Page LayoutsI1 Grid LayoutI2 Above the FoldI3 Clear First ReadsI4 Expanding Screen WidthI5 Fixed Screen WidthI6 Consistent Sidebars of Related ContentPattern Group J: Making Site Search Fast and RelevantJ1 Search Action ModuleJ2 Straightforward Search FormsJ3 Organized Search ResultsPattern Group K: Making Navigation EasyK2 Navigation BarK3 Tab RowsK4 Action ButtonsK5 High-Visibility Action ButtonsK7 Embedded LinksK8 External LinksK9 Descriptive, Longer Link NamesK10 Obvious LinksK11 Familiar LanguageK12 Preventing ErrorsK13 Meaningful Error MessagesK14 Page Not FoundPattern Group L: Speeding Up Your SiteL1 Low Number of FilesL2 Fast-Loading ImagesL3 Separate TablesL4 Html PowerL5 Reusable ImagesPattern Group M: The Mobile WebM1 Mobile Screen SizingM2 Mobile Input ControlsM3 Location-Based ServicesPart III: AppendixesFurther ReadingProfessional Groups
7. About the authors

Content preview from The Design of Sites: Patterns for Creating Winning Web Sites, Second Edition

Chapter 2. Making the Most of Web Design Patterns

In Chapter 1 (Customer-Centered Web Design: More Than a Good Idea), we explained why designing for the customer experience is crucial to a Web site’s success. We also introduced the notion of Web design patterns, a powerful conceptual framework for building compelling, effective, and easy-to-use Web sites. In this chapter we explain patterns in depth.

We do not expect you to read through all the patterns in this book from start to finish. Instead, we show you ways to explore the patterns so that you can quickly find the right ones for your needs.

What Are Patterns?

Patterns communicate insights into design problems, capturing the essence of the problems and their solutions in a compact form. They ...

Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.

Read now

Unlock full access

More than 5,000 organizations count on O’Reilly

O’Reilly covers everything we've got, with content to help us build a world-class technology community, upgrade the capabilities and competencies of our teams, and improve overall team performance as well as their engagement.

Julian F.

Head of Cybersecurity

I wanted to learn C and C++, but it didn't click for me until I picked up an O'Reilly book. When I went on the O’Reilly platform, I was astonished to find all the books there, plus live events and sandboxes so you could play around with the technology.

Addison B.

Field Engineer

I’ve been on the O’Reilly platform for more than eight years. I use a couple of learning platforms, but I'm on O'Reilly more than anybody else. When you're there, you start learning. I'm never disappointed.

Amir M.

Data Platform Tech Lead

I'm always learning. So when I got on to O'Reilly, I was like a kid in a candy store. There are playlists. There are answers. There's on-demand training. It's worth its weight in gold, in terms of what it allows me to do.

Mark W.

Embedded Software Engineer

Tips for Designing Effective Presentation Slide Decks

Publisher Resources

ISBN: 0131345559Purchase book

Cloud Computing

Data Engineering

Data Science

AI & ML

Programming Languages

Software Architecture

IT/Ops

Security

Design

Business

Soft Skills

The Design of Sites: Patterns for Creating Winning Web Sites, Second Edition

by Douglas K. van Duyne, James A. Landay, Jason I. Hong

Chapter 2. Making the Most of Web Design Patterns

What Are Patterns?

Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.

More than 5,000 organizations count on O’Reilly

Julian F.

Addison B.

Amir M.

Mark W.

You might also like

Tips for Designing Effective Presentation Slide Decks

Mobile Design Pattern Gallery

What Successful Project Managers Do

How to Overcome a Power Deficit

Publisher Resources