Wiley The Essential Guide to User Interface Design 3rd Edition Apr 2007 PDF

Preview

Summary

The Essential Guide to User Interface Design An Introduction to GUI Design Principles and Techniques Third Edition Wilbert O. Galitz The Essential Guide to User Interface Design An Introduction to GUI Design Principles and Techniques Third Edition Wilbert O. Galitz The Essential Guide to User Inter...

Description

Accelerat ing t he world's research.

Wiley The Essential Guide to User Interface Design 3rd Edition Apr 2007 Ferri Yanto

Related papers

Download a PDF Pack of t he best relat ed papers 

T he Essent ial Guide t o User Int erface Design Second Edit ion An Int roduct ion t o GUI Design Pr… Sandro Yogi M. Nababan St rat egies for Designing and Implement at ing Effect ive Human Comput er Int erface for SCADA Syst em Mohammed Najm Abdullah Al Salam HUMAN COMPUT ER INT ERACT ION (CS408 Daniel Kimani

The Essential Guide to User Interface Design An Introduction to GUI Design Principles and Techniques Third Edition

Wilbert O. Galitz

The Essential Guide to User Interface Design An Introduction to GUI Design Principles and Techniques Third Edition

Wilbert O. Galitz

The Essential Guide to User Interface Design: An Introduction to GUI Design Principles and Techniques, Third Edition Published by Wiley Publishing, Inc. 10475 Crosspoint Boulevard Indianapolis, IN 46256 www.wiley.com

Copyright © 2007 by Wilbert O. Galitz. All rights reserved. Published by Wiley Publishing, Inc., Indianapolis, Indiana Published simultaneously in Canada ISBN: 978-0-470-05342-3 Manufactured in the United States of America 10 9 8 7 6 5 4 3 2 1 No part of this publication may be reproduced, stored in a retrieval system or transmitted in any form or by any means, electronic, mechanical, photocopying, recording, scanning or otherwise, except as permitted under Sections 107 or 108 of the 1976 United States Copyright Act, without either the prior written permission of the Publisher, or authorization through payment of the appropriate per-copy fee to the Copyright Clearance Center, 222 Rosewood Drive, Danvers, MA 01923, (978) 750-8400, fax (978) 646-8600. Requests to the Publisher for permission should be addressed to the Legal Department, Wiley Publishing, Inc., 10475 Crosspoint Blvd., Indianapolis, IN 46256, (317) 572-3447, fax (317) 572-4355, or online at http://www.wiley.com/go/permissions. Limit of Liability/Disclaimer of Warranty: The publisher and the author make no representations or warranties with respect to the accuracy or completeness of the contents of this work and specifically disclaim all warranties, including without limitation warranties of fitness for a particular purpose. No warranty may be created or extended by sales or promotional materials. The advice and strategies contained herein may not be suitable for every situation. This work is sold with the understanding that the publisher is not engaged in rendering legal, accounting, or other professional services. If professional assistance is required, the services of a competent professional person should be sought. Neither the publisher nor the author shall be liable for damages arising herefrom. The fact that an organization or Website is referred to in this work as a citation and/or a potential source of further information does not mean that the author or the publisher endorses the information the organization or Website may provide or recommendations it may make. Further, readers should be aware that Internet Websites listed in this work may have changed or disappeared between when this work was written and when it is read. For general information on our other products and services or to obtain technical support, please contact our Customer Care Department within the U.S. at (800) 762-2974, outside the U.S. at (317) 572-3993 or fax (317) 572-4002. Library of Congress Cataloging-in-Publication Data Galitz, Wilbert O. The essential guide to user interface design : an introduction to GUI design principles and techniques / Wilbert O. Galitz. — 3rd ed. p. cm. Includes bibliographical references and index. ISBN-13: 978-0-470-05342-3 (paper/website) ISBN-10: 0-470-05342-9 (paper/website) 1. Graphical user interfaces (Computer systems) I. Title. QA76.9.U83G33 2007 005.4'37—dc22 2006038755 Trademarks: Wiley and the Wiley logo are registered trademarks of John Wiley & Sons, Inc. and/or its affiliates, in the United States and other countries, and may not be used without written permission. All other trademarks are the property of their respective owners. Wiley Publishing, Inc., is not associated with any product or vendor mentioned in this book. Wiley also publishes its books in a variety of electronic formats. Some content that appears in print may not be available in electronic books.

To my wife and business partner, Sharon, for many years of love and support in our home and office.

To our grandchildren, Mitchell, Barry, Deirdra, and Spencer Galitz, Lauren and Scott Roepel, and Shane and Emily Watters. May one or more of them pick up the writing torch.

About the Author

Wilbert (Bill) O. Galitz is an internationally respected consultant, author, and instructor with a long and illustrious career in Human Factors and user-interface design. For many years he has consulted, lectured, written about, and conducted seminars and workshops on these topics worldwide. He is now the author of eleven books, and his first book, Human Factors in Office Automation (1980), was critically acclaimed internationally. This book was the first to address the entire range of human factors issues involved in business information systems. As a result, he was awarded the Administrative Management Society’s Olsten Award. Other books have included User-Interface Screen Design and It’s Time to Clean Your Windows. He has long been recognized as a world authority on the topic of screen design. Bill’s career now spans more than 45 years in information systems, and he has been witness to the amazing transformation of technology over this time span. His career began in 1961 with the System Development Corporation, where he was a Training Consultant for the SAGE North American Air Defense System. SAGE was the world’s first large-scale display-based system. Before forming his own consulting company in 1981, he worked for CNA Insurance and the Insurance Company of North America (now CIGNA), where he designed the user-interfaces and developed screen and interface design standards for a variety of business information systems. His work experience also includes an appointment at South Africa’s National Institute for Personnel Research and a number of years with UNIVAC (now UNISYS). At UNIVAC he performed the human engineering of the company’s first commercial display terminal and completed a pioneering study on the operational aspects of large-scale computer systems. A native of Chicago, Bill possesses a B.A. in Psychology from Lake Forest College in Illinois and an M.S. in Industrial Psychology from Iowa State University. He currently resides in Surprise, Arizona.

v

Credits

Executive Editor Robert Elliott

Project Coordinator Erin Smith

Development Editor Ed Connor

Graphics and Production Specialists Denny Hager Jennifer Mayberry

Technical Editor Robert Barnett Copy Editor Mildred Sanchez Editorial Manager Mary Beth Wakefield Production Manager Tim Tate Vice President and Executive Group Publisher Richard Swadley Vice President and Executive Publisher Joseph B. Wikert

vi

Quality Control Technician Brian H. Walls Proofreading Broccoli Information Management Indexing Anne Leach Anniversary Logo Design Richard Pacifico

Contents

About the Author Preface

v xix

Acknowledgments

xxvii

Part 1

The User Interface—An Introduction and Overview

1

Chapter 1

The Importance of the User Interface Defining the User Interface The Importance of Good Design

3 4 4

The Benefits of Good Design

A Brief History of the Human-Computer Interface Introduction of the Graphical User Interface

The Blossoming of the World Wide Web A Brief History of Screen Design

Chapter 2

5

7 7

8 10

What’s Next?

12

Characteristics of Graphical and Web User Interfaces Interaction Styles

13 13

Command Line Menu Selection Form Fill-in Direct Manipulation Anthropomorphic

The Graphical User Interface The Popularity of Graphics The Concept of Direct Manipulation Graphical Systems: Advantages and Disadvantages Characteristics of the Graphical User Interface

14 14 14 15 15

16 16 17 19 24

vii

viii

Contents The Web User Interface The Popularity of the Web Characteristics of a Web Interface

The Merging of Graphical Business Systems and the Web Characteristics of an Intranet versus the Internet Extranets Web Page versus Application Design

Part 2

29 29

39 39 40 40

Principles of User Interface Design

44

Principles for the Xerox STAR General Principles

44 45

Part 1 Exercise What’s Next?

58 58

The User Interface Design Process

59

Obstacles and Pitfalls in the Development Path

59

Designing for People: The Seven Commandments

Usability Usability Assessment in the Design Process Common Usability Problems Some Practical Measures of Usability Some Objective Measures of Usability

Step 1

28

Know Your User or Client Understanding How People Interact with Computers

60

64 65 65 68 69

71 71

The Human Action Cycle Why People Have Trouble with Computers Responses to Poor Design People and Their Tasks

72 73 74 76

Important Human Characteristics in Design

76

Perception Memory Sensory Storage Visual Acuity Foveal and Peripheral Vision Information Processing Mental Models Movement Control Learning Skill Performance Load Individual Differences

Human Considerations in the Design of Business Systems The User’s Knowledge and Experience The User’s Tasks and Needs The User’s Psychological Characteristics The User’s Physical Characteristics

Human Interaction Speeds

76 78 79 80 81 81 82 83 83 84 84 85

87 87 92 95 96

100

Contents

Step 2

Performance versus Preference Methods for Gaining an Understanding of Users Step 1 Exercise

101 102 102

Understand the Business Function Business Definition and Requirements Analysis

103 104

Information Collection Techniques Defining the Domain Considering the Environment Possible Problems in Requirements Collection

Determining Basic Business Functions

113

Understanding the User’s Work Developing Conceptual Models The User’s New Mental Model

114 115 120

Design Standards or Style Guides

120

Value of Standards and Guidelines Customized Style Guides Design Support and Implementation

System Training and Documentation Needs Training Documentation

Step 3

104 112 112 113

121 124 125

125 126 126

Step 2 Exercise

126

Understand the Principles of Good Interface and Screen Design Human Considerations in Interface and Screen Design

127 128

How to Discourage the User What Users Want What Users Do Interface Design Goals The Test for a Good Design Screen and Web Page Meaning and Purpose Organizing Elements Clearly and Meaningfully Consistency Starting Point Ordering of Data and Content Navigation and Flow Visually Pleasing Composition Distinctiveness Focus and Emphasis Conveying Depth of Levels or a Three-Dimensional Appearance Presenting Information Simply and Meaningfully Application and Page Size Application Screen Elements Organization and Structure Guidelines The Web — Web sites and Web Pages

128 130 130 131 132 132 133 133 135 136 139 141 161 162 165 168 178 184 220 230

ix

x

Contents Intranet Design Guidelines Extranet Design Guidelines Small Screens Weblogs Statistical Graphics Types of Statistical Graphics Flow Charts

Technological Considerations in Interface Design Graphical Systems Web Systems The User Technology Profile Circa 2006

Examples of Screens

Step 4

258 259 259 260 261 273 283

284 284 287 292

293

Example 1 Example 2 Example 3 Example 4 Example 5 Example 6 Example 7

293 297 300 301 302 303 305

Step 3 Exercise

306

Develop System Menus and Navigation Schemes Structures of Menus

307 308

Single Menus Sequential Linear Menus Simultaneous Menus Hierarchical or Sequential Menus Connected Menus Event-Trapping Menus

Functions of Menus Navigation to a New Menu Execute an Action or Procedure Displaying Information Data or Parameter Input

Content of Menus Menu Context Menu Title Choice Descriptions Completion Instructions

Formatting of Menus Consistency Display Presentation Organization Complexity Item Arrangement Ordering

308 309 309 310 311 313

313 314 314 314 314

314 315 315 315 315

315 316 316 316 317 320 321 321

Contents Groupings Selection Support Menus

Phrasing the Menu Menu Titles Menu Choice Descriptions Menu Instructions Intent Indicators Keyboard Shortcuts

Selecting Menu Choices Initial Cursor Positioning Choice Selection Defaults Unavailable Choices Mark Toggles or Settings Toggled Menu Items

Web Site Navigation Web Site Navigation Problems Web Site Navigation Goals Web Site Navigation Design Maintaining a Sense of Place

Kinds of Graphical Menus Menu Bar Pull-Down Menu Cascading Menus Pop-Up Menus Tear-Off Menus Iconic Menus Pie Menus

Graphical Menu Examples Example 1

Step 5

Select the Proper Kinds of Windows Window Characteristics The Attraction of Windows Constraints in Window System Design

Components of a Window Frame Title Bar Title Bar Icon Window Sizing Buttons What’s This? Button Menu Bar Status Bar Scroll Bars Split Box Toolbar Command Area

323 325

328 329 330 332 332 333

337 337 338 339 340 340 341

342 343 344 345 367

369 369 371 375 377 379 380 380

382 382

385 385 386 388

390 390 391 391 392 393 393 394 394 394 394 395

xi

xii

Contents Size Grip Work Area

Window Presentation Styles Tiled Windows Overlapping Windows Cascading Windows Picking a Presentation Style

Types of Windows Primary Window Secondary Windows Dialog Boxes Property Sheets and Property Inspectors Message Boxes Palette Windows Pop-Up Windows

Organizing Window Functions

396 397 398 399

399 400 401 407 408 411 413 413

414 414 415 416 417

The Web and the Browser

419 419

Step 5 Exercise

422

Select the Proper Interaction Devices Input Devices

423 423

Characteristics of Input Devices Other Input Devices Selecting the Proper Input Device

Output Devices

Step 7

395

Window Organization Number of Windows Sizing Windows Window Placement Browser Components

Step 6

395 395

424 436 436

440

Screens Speakers

440 441

Step 6 Exercise

441

Choose the Proper Screen-Based Controls Operable Controls

443 445

Buttons

Text Entry/Read-Only Controls Text Boxes

Selection Controls Radio Buttons Check Boxes Palettes List Boxes List View Controls Drop-Down/Pop-Up List Boxes

445

461 461

468 468 478 488 493 503 503

Contents Combination Entry/Selection Controls

509

Spin Boxes Combo Boxes Drop-Down/Pop-Up Combo Boxes

509 512 514

Other Operable Controls Slider Tabs Date-Picker Tree View Scroll Bars

Custom Controls Presentation Controls Static Text Fields Group Boxes Column Headings ToolTips Balloon Tips Progress Indicators Sample Box Scrolling Tickers

Selecting the Proper Controls Entry versus Selection — A Comparison Comparison of GUI Controls Control Selection Criteria Choosing a Control Form

Examples

Step 8

517 517 521 524 525 526

531 531 532 533 534 535 537 539 540 542

542 543 544 547 548

552

Example 1 Example 2 Example 3 Example 4 Example 5 Example 6

552 553 556 557 558 559

Step 7 Exercise

561

Write Clear Text and Messages Words, Sentences, Messages, and Text

563 564

Readability Choosing the Proper Words Writing Sentences and Messages Kinds of Messages Presenting and Writing Text Window Title, Conventions, and Sequence Control Guidance

Content and Text for Web Pages Words Page Text Page Title

564 565 568 570 578 582

584 584 585 589

xiii

xiv

Contents Headings and Headlines Instructions Error Messages

Step 9

Step 8 Exercise

591

Provide Effective Feedback and Guidance and Assistance Providing the Proper Feedback

593 594

Response Time Dealing with Time Delays Blinking for Attention Use of Sound

Guidance and Assistance Preventing Errors Problem Management Providing Guidance and Assistance Instructions or Prompting Help Facility Contextual Help Task-Oriented Help Reference Help Wizards Hints or Tips

Step 10

594 598 601 602

603 603 604 606 608 608 613 617 619 620 622

Step 9 Exercise

623

Provide Effective Internationalization and Accessibility International Considerations

625 626

Localization Cultural Considerations Words and Text Images and Symbols Color, Sequence, and Functionality Requirements Determination and Testing

Accessibility Types of Disabilities Accessibility Design

Step 11

589 590 590

626 627 628 631 633 635

635 636 636

Step 10 Exercise

650

Create Meaningful Graphics, Icons, and Images Icons

651 652

Kinds of Icons Characteristics of Icons Influences on Icon Usability Choosing Icons Choosing Icon Images Creating Icon Images Drawing Icon Images Icon Animation and Audition The Icon Design Process Screen Presentation

652 654 654 657 659 659 664 665 667 667

Contents Multimedia Graphics Images Photographs/Pictures Video Diagrams Drawings Animation Audition Combining Mediums

Step 12

669 669 671 676 677 678 681 681 683 686

Step 11 Exercise

689

Choose the Proper Colors Color — What Is It?

691 692

RGB HSV Dithering

Color Uses

694 694 694

695

Color as a Formatting Aid Color as a Visual Code Other Color Uses

695 696 696

Possible Problems with Color

696

High Attention-Getting Capacity Interference with Use of Other Screens Varying Sensitivity of the Eye to Different Colors Color-Viewing Deficiencies Color Connotations Cross-Disciplinary and Cross-Cultural Differences

Color — What the Research Shows Color and Human Vision

696 697 697 697 698 700

700...