ebook img

Web Application Design Handbook : Best Practices for Web-Based Software (The Morgan Kaufmann Series in Interactive Technologies) PDF

689 Pages·2004·51.05 MB·English
Save to my drive
Quick download
Download
Most books are stored in the elastic cloud where traffic is expensive. For this reason, we have a limit on daily download.

Preview Web Application Design Handbook : Best Practices for Web-Based Software (The Morgan Kaufmann Series in Interactive Technologies)

Critical Acclaim For WEB APPLICATION DESIGN HANDBOOK Best Practices for Web-Based Software “Susan and Victor have written the ‘Junior Woodchucks Guidebook’of Web applications: Everything you need to know is in there,including tons ofbest-practice examples,insights from years ofexperience,and assorted fascinating arcana.Ifyou’re writing a Web application,you’d be foolish not to have a copy.” STEVE KRUG Author ofDon’t Make Me Think! A Common Sense Approach to Web Usability “Web sites are sonineties.The cutting edge ofWeb-design has moved to Web applications.Ifyou are,like many Web designers,struggling to create dynamic, highly-functional Web-based applications,you need this book.It describes how Web applications differ from Web sites,and provides excellent guidance for common Web-application design problems,such as navigation,data input, search,reports,forms,and interactive graphic output.” JEFF JOHNSON Principal Usability Consultant,UI Wizards,Inc.,and author of Web Bloopersand GUI Bloopers “User interface designers have been debating among themselves for years about how to design effective Web applications.There were no comprehensive references that covered the myriad topics that emerged in these debates until Fowler and Stanwick took on the challenge and wrote Web Application Design Handbook,the first comprehensive guide to building Web applications. This book tackles design problems faced by every Web development team with uncommon wisdom,clear prose,and detailed examples.Key topics include: modifying the browser interface to meet application security and efficiency requirements,searching,sorting,filtering,building efficient and usable data input mechanisms,generating reports,preventing errors,and using creative visualization techniques to optimize the display oflarge sets ofdata. Endorsements Continued This thorough work should be a primary reference for everyone designing Web applications.” CHAUNCEY E. WILSON Principal HCI Architect,WilDesign Consulting “Every so often you run into a book and say to yourself: ‘It’s so obvious that this book should be read by every developer,so why wasn’t it written years ago?’ This is one ofthose books.” SCOTT AMBLER Author ofThe Object Primer: Agile Model Driven Development with UML 2 WEB APPLICATION DESIGN HANDBOOK Best Practices for Web-Based Software The Morgan Kaufmann Series in Interactive Technologies Series Editors:Stuart Card,PARC;Jonathan Grudin,Microsoft;Jakob Nielsen,Nielsen Norman Group Web Application Design Handbook: Best Practices for Usability Engineering: Scenario-Based Development of Web-Based Software Human-Computer Interaction Susan Fowler and Victor Stanwick Mary Beth Rosson and John M.Carroll The Mobile Connection: The Cell Phone’s Impact on Society Your Wish is My Command: Programming by Example Rich Ling Edited by Henry Lieberman Information Visualization: Perception for Design,2ndEdition GUI Bloopers: Don’ts and Dos for Software Developers and Colin Ware Web Designers JeffJohnson Interaction Design for Complex Problem Solving: Developing Useful and Usable Software Information Visualization: Perception for Design Barbara Mirel Colin Ware The Craft ofInformation Visualization: Readings and Robots for Kids: Exploring New Technologies for Learning Reflections Edited by Allison Druin and James Hendler Written and edited by Ben Bederson and Ben Shneiderman Information Appliances and Beyond: Interaction Design for HCI Models,Theories,and Frameworks: Towards a Consumer Products Multidisciplinary Science Edited by Eric Bergman Edited by John M.Carroll Readings in Information Visualization: Using Vision to Think Web Bloopers: 60 Common Web Design Mistakes,and Written and edited by Stuart K.Card,Jock D.Mackinlay, Howto Avoid Them and Ben Shneiderman JeffJohnson The Design ofChildren's Technology Observing the User Experience: A Practitioner’s Guide to Edited by Allison Druin User Research Mike Kuniavsky Web Site Usability: A Designer’s Guide Jared M.Spool,Tara Scanlon,Will Schroeder,Carolyn Paper Prototyping: The Fast and Easy Way to Design and Snyder,and Terri DeAngelo Refine User Interfaces Carolyn Snyder The Usability Engineering Lifecycle: A Practitioner's Handbook for User Interface Design Persuasive Technology: Using Computers to Change What Deborah J.Mayhew We Think and Do B.J.Fogg Contextual Design: Defining Customer-Centered Systems Hugh Beyer and Karen Holtzblatt Coordinating User Interfaces for Consistency Edited by Jakob Nielsen Human-Computer Interface Design: Success Stories, Emerging Methods,and Real World Context Usability for the Web: Designing Web Sites that Work Edited by Marianne Rudisill,Clayton Lewis,Peter P. Tom Brinck,Darren Gergle,and Scott D.Wood Polson,and Timothy D.McKay W E B A P P L I C AT I O N D E S I G N H A N D B O O K Best Practices for Web-Based Software Susan Fowler and Victor Stanwick FAST CONSULTING AMSTERDAM • BOSTON • HEIDELBERG • LONDON NEW YORK • OXFORD • PARIS • SAN DIEGO SAN FRANCISCO • SINGAPORE • SYDNEY • TOKYO Morgan Kaufmann is an imprint ofElsevier Publishing Director:Diane Cerra Publishing Services Manager:Simon Crump Editorial Coordinator:Mona Buehler Cover Design:Hannus Design Assoc. Cover Illustration:Spher spirals;M.C.Escher,1958,woodcut Text Design:Frances Baca Design Composition:Cepha Imaging Pvt.Ltd Technical Illustration:Dartmouth Publishing,Inc. Copyeditor:Simon & Associates Proofreader:Jacqui Brownstein Indexer:Steve Rath Interior printer:CTPS Cover printer:CTPS Morgan Kaufmann Publishers is an imprint ofElsevier. 500 Sansome Street,Suite 400,San Francisco,CA 94111 This book is printed on acid-free paper. © 2004 by Elsevier Inc.All rights reserved. Designations used by companies to distinguish their products are often claimed as trademarks or registered trademarks.In all instances in which Morgan Kaufmann Publishers is aware ofa claim,the product names appear in initial capital or all capital letters. Readers,however,should contact the appropriate companies for more complete information regarding trademarks and registration. No part ofthis publication may be reproduced,stored in a retrieval system,or transmitted in any form or by any means—electronic, mechanical,photocopying,scanning,or otherwise—without prior written permission ofthe publisher. Permissions may be sought directly from Elsevier’s Science & Technology Rights Department in Oxford,UK:phone:(+44) 1865 843830,fax:(+44) 1865 853333,e-mail:[email protected] may also complete your request on-line via the Elsevier homepage (http://elsevier.com) by selecting “Customer Support”and then “Obtaining Permissions.” Library ofCongress Cataloging-in-Publication Data Application submitted ISBN:1-55860-752-8 For information on all Morgan Kaufmann publications, visit our Web site at www.mkp.com. Printed in China 04 05 06 07 08 5 4 3 2 1 CONTENTS Preface xxiii Answering Questions xxiii Trust What You Already Know xxiv Predicting the Future xxiv A Short History ofVisualization xxv Visuals Provide More Context xxvi Visuals Encourage Pattern Recognition xxvii Visuals Speed Up Decisions xxviii Acknowledgments xxix CHAPTER 1 What is a Web Application? 1 What’s the Difference Between a Web Page and a Web Application? 1 What Difference Does the Platform Make? 4 Technical Note:Pros and Cons ofWeb Application Coding Systems 9 The Tentative Answer 12 Where Does My Program Fit? 13 What Is the Nature ofthe Relationship? 13 What Is the Conversation Like? 17 What Is the Nature ofthe Interaction? 17 What Are the Technical Requirements? 17 How Often Is It Used? 18 What Is the Expected Response Time (or the Perceived Distance)? 18 Are These Interactions in Real Time? 19 How Much Help Will the Users Need? 19 What Is the Interaction Style? 19 What Should It Look Like? 20 Does It Follow Any Standards? 21 vii viii Contents How Intense Is This Interaction? 22 What Should This Application Look Like? 22 CHAPTER 2 The Browser Framework 25 Browser Window:A Conceptual Model 25 Parts ofa Browser Window 26 Technical Note:Preventing Downloads 27 Parts ofthe Content Area 27 A Note About Navigation 29 Make Home Easy to Find 29 Put Local Navigation on the Left 30 Put Site-Wide Navigation on the Top 32 Repeat Links on the Bottom 33 Try Putting Advertising Banners in More Than One Spot 34 Overall Design Issues 34 Consider User Roles 34 Size Windows Correctly 35 Make Pages Printable 39 Technical Note:IfYou Must Use Tables 39 Use the Right Colors 40 Make Sure the Application Can Be Localized 41 Make Sure Pages Are Accessible 46 Technical Note:How to Create Bread Crumbs 50 Use Standard Separators 50 Code Sample 51 Technical Note:How to Create the Window-Size Markers 54 Technical Note:Use CSS to Format Pages Correctly 54 CHAPTER 3 Data Input: Forms 59 Conceptual Model:Lists vs.Objects 59 Data-Input Forms:The Basics 60 Use Fields to Collect Free-Form Information 62 Know the Various Field Types 62 Standard Field,Defined 62 General Design Guidelines 62 Make Entry Areas the Right Size 63 Contents ix Don’t Make Users Format Text 64 Provide Keyboard as Well as Mouse Navigation 65 Retain Cut,Copy,and Paste 65 Label Fields Correctly 66 How to Label Data-Input Forms 66 How to Label e-Commerce Forms 66 Accommodate Less Experienced Users 68 Use Different Labeling Strategies for International Forms 69 Make Sure Labels Are Correctly Tied to Their Fields 69 How to Group Fields 70 Complexity is Not Necessarily Bad 71 Offer Automated Entry Fields 72 How to Show Protected Fields 73 Required Field,Defined 76 Use Required Fields Sparingly 76 How to Indicate a Required Field 77 Offer Defaults Whenever Possible 78 How Notto Indicate a Required Field 80 How to Provide Feedback for Required Fields 80 Prevent Input Errors With Dropdown Lists 83 When to Use Dropdown Lists 83 Check Your Lists for Typos and Other Errors 84 Put Lists in Order 85 When to Use Regular Lists Rather Than Dropdown Lists 85 Prevent Input Errors With Checkboxes 86 Checkbox Groups: Doing the Numbers 90 Be Careful How You Toggle 90 Use Opposites Only 90 Don’t Use Negatives (You’ll Create a Double Negative by Mistake) 91 Prevent Input Errors With Radio Buttons 91 “I Want Nothing!” 92 Make Your Checkboxes and Radio Buttons More Accessible 92 When to Use Tabs Instead ofPages 94 Guidelines for Tabs 95 When to Use Popups 96 Use Popups to Offer Information 97 Follow These Popup Guidelines 98 Stay on Top 99 Three Traditional Popup Buttons 100 Use Standard Button order 100

See more

The list of books you might like

Most books are stored in the elastic cloud where traffic is expensive. For this reason, we have a limit on daily download.