design
`
`Foundations of User Interface Design
`
`Graphical and Object-Oriented User Interfaces
`
`The User Interface Design Process
`
`Internet Interfaces, Agents, and Social Interfaces
`
`th e o
`MANDEL
`
`Facebook's Exhibit No. 1010
`Page 1
`
`

`

`Facebook's Exhibit No. 1010
`
`Page 2
`
`Facebook's Exhibit No. 1010
`Page 2
`
`

`

`THE ELEMENTS
`
`· OF USER
`
`I NT E R FA C E D E S I G N
`
`THEO MANDEL, PHD
`
`WILEY COMPUTER PUBLISHING
`
`John Wiley & Sons, Inc.
`NewYork + Chichester + Weinheim • Brisbane • Singapore • Toronto
`
`Facebook's Exhibit No. 1010
`Page 3
`
`

`

`Executive Publisher: Katherine Schowalter
`Editor: Theresa Hudson
`Managing Editor: Angela Murphy
`Text Design & Composition: North Market Street Graphics
`
`Designations used by companies to distinguish their products are often claimed as
`trademarks. In all instances where John Wiley & Sons, Inc., is aware of a 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.
`
`This text is printed on acid-free paper.
`
`Copyright© 1997 by John Wiley & Sons, Inc.
`
`All rights reserved. Published simultaneously in Canada.
`
`This publication is designed to provide accurate and authoritative information in
`regard to the subject matter covered. It is sold with the understanding that the
`publisher is not engaged in rendering legal, accounting, or other professional service.
`If legal advice or other expert assistance is required, the services of a competent
`professional person should be sought.
`
`Reproduction or translation of any part of this work beyond that permitted by
`section 107 or 108 of the 1976 United States Copyright Act without the permission
`of the copyright owner is unlawful. Requests for permission or further information
`should be addressed to the Permissions Department, John Wiley & Sons, Inc.
`
`Library of Congress Cataloging-in-Publication Data:
`
`Mandel, Theo.
`The elements of user interface design / Theo Mandel.
`p. cm.
`Includes bibliographical references.
`ISBN 0-471-16267-1 (pbk. : alk. paper)
`1. User interfaces (Computer systems)
`QA76.9.U83M345 1997
`005.1'2- dc20
`
`96-45973
`
`I. Title.
`
`Printed in the United States of America
`10 9 8 7
`
`Facebook's Exhibit No. 1010
`Page 4
`
`

`

`For confused and frustrated computer users, especially Max Garrett,
`my father-in -Jaw.
`
`To the continued remembrance of my parents, Dorothy and Siegfried.
`And to my wife, Edie, for always being there for me.
`
`Facebook's Exhibit No. 1010
`Page 5
`
`

`

`Facebook's Exhibit No. 1010
`
`Page 6
`
`Facebook's Exhibit No. 1010
`Page 6
`
`

`

`Man is one of the best general-purpose computers available and if
`one designs for man as a moron, one ends up with a system that
`requires a genius to maintain it. Thus we are not suggesting that we
`take man out of the system, but we are suggesting that he be properly
`employed in terms of both his abilities and limitations.
`E. Llewellyn Thomas (1965)
`'
`
`Facebook's Exhibit No. 1010
`Page 7
`
`

`

`Facebook's Exhibit No. 1010
`
`Page 8
`
`Facebook's Exhibit No. 1010
`Page 8
`
`

`

`ACKNOWLEDGMENTS
`
`I want to thank the following for their support:
`
`• Wendy Francis, Mary Lea Garrett, Judy Underwood, and Doug
`Brown.
`• Terri Hudson and Moriah O'Brien at John Wiley & Sons, Inc.
`• David McCreath of Monsterbit Media, for his great graphics work.
`• The technical reviewers and copyeditor of the book, whoever they are.
`• My professional colleagues throughout the world: Ed Kennedy, Pat
`Porazio, Dick Berry, Chuck Schafer, David Schwartz, Christoph
`Moser, and Andre Geiser.
`• My tennis buddies John Collins, Kimm Ketelsen, John Matthews,
`Mark Olman, Duke Paluch, Peter D'Auray, and Gary Brieden for keep(cid:173)
`ing me in shape.
`• Steve Zaslow for providing doubles support in tennis years ago and
`printing support now.
`• Dave Brown and Steve Shipps, my all-time best friends.
`• Tracy Leonard, for what we've done together in the past and what we
`hope to do together in the future.
`• Cindy Roosken, whom I forgot to acknowledge in my first book.
`• John Rothgeb, for his PC support.
`• Kurt Westerfeld of Stardock Systems, Inc., for his ideas and his prod(cid:173)
`uct, Object Desktop.
`• Lauralee Alben, for allowing me to use her material on the ACM/
`interactions Design Awards '95.
`
`vii
`
`Facebook's Exhibit No. 1010
`Page 9
`
`

`

`I
`
`Facebook's Exhibit No. 1010
`
`Page 10
`
`Facebook's Exhibit No. 1010
`Page 10
`
`

`

`. •,'
`
`.;:-
`
`.
`
`·-
`
`PR. E FACE
`.
`.
`.
`
`,.
`
`Computers and User Interfaces
`
`• Do your programs work together intuitively as if they were all one program?
`+ Can you simply drag text, data and graphics from one program and drop
`them into another?
`+ Is your software intelligent? For instance, can it handle everyday tasks auto(cid:173)
`matically?
`+ Are your programs recognized as the best in their category?
`+ Do your menus, toolbars and other elements look alike and work in the
`same easy way?
`• Do your programs have no-charge product support? For how long?
`+ Ultimately, is it worth getting software that doesn't do all these things?
`Software advertisement (1995)
`
`Today's computers utilize a new breed of software that revolutionizes the way
`people work. The popular belief is that these new systems make people's lives
`easier and their computing experiences "friendlier." Do they really? If all soft(cid:173)
`ware products were as well designed as they are advertised to be, all computer
`users would be very happy in their work and play. Unfortunately, computer
`software is not as intuitive, easy to learn, easy to use, and as fun as it could be
`and should be.
`Why is software look and feel so important? What makes a product easy to
`install, easy to learn, or easy to use? What do tests tell us about the usability of
`software products? How can you tell what software users want or even need?
`How about your customers? What types of software and user interfaces do they
`need? Where are computer user interfaces headed in the future? These are all
`difficult questions, but one thing is certain-the user interface must be a key
`element in your software solutions.
`
`Who Is This Book For?
`
`Here are some "typical" attitudes about user interface design from different
`participants in the software development process.
`
`ix
`
`Facebook's Exhibit No. 1010
`Page 11
`
`

`

`X
`
`PREFACE
`
`M
`
`Executive-''I'll wor.cy about the user interface when someone can demon(cid:173)
`strate that it makes a difference in my sales."
`
`Project Manager-"Yes, I'm sure you would Jove to do some field testing with
`users, but there's no slack in the schedule or budget."
`
`System Designer-"That's trivial, Jet them handle it in the user interface."
`
`Software Engineer-"When I'm done they have somebody who comes around
`and makes the screen look pretty."
`
`Interface Engineer- "Isn't it exciting, I get to design the user interface all by
`myself!"
`
`Customer- "We require that any software we buy have a GUI, you know, a
`Generic User Interface."
`
`Bill Curtis and Bill Hefley (1994)
`
`This book is written for a wide range of people involved in software design and
`development:
`
`+ Software developers
`• Interface designers
`• Information developers and technical writers
`+ Help and tutorial developers
`• Usability professionals
`• Project leaders
`• Development managers
`+ Students of software design and development
`
`K EY IDEA! Software design is a team effort-a key theme through(cid:173)
`
`out this book. When I write about developers, I am addressing
`the members of design and development teams, which include pro(cid:173)
`grammers, inte1face designers, and others. The final outcome of a
`product is also influenced by other areas- company owners, senior
`management, marketing, and sales staff members. This book stresses
`the cooperation between developer and designer. The intent is to fos(cid:173)
`ter this cooperation and to avoid an "us versus them" mentality.
`
`Facebook's Exhibit No. 1010
`Page 12
`
`

`

`PREFACE
`
`XI
`
`A major theme of this book is "Know thy users, for they are not you!" (See Fig(cid:173)
`ure P.1.) Computer users have become extremely consumer oriented and soft(cid:173)
`ware products must fit how users function in their own environments, or they
`risk developing an unsuccessful product. You'll learn that the best interface is
`the one that lets users do what they want to do, when they want to do it, and how
`they want to do it. Successful software design requires the utmost concern for
`the appropriateness and usability of the interfaces that are presented to users.
`This book describes in great detail what a software user interface really is,
`and its importance for users, designers, and developers. The user interface of
`any product-especially a computer software program-is probably the most
`important part, at least to users. You'll find out why the user interface is so crit(cid:173)
`ical to computer software. The user interface must be designed for, and even
`with, users of a product. When users get frustrated and confused using a soft(cid:173)
`ware product, the problem usually lies in the user interface.
`Think about it-if today's operating systems are so easy to use, then why are
`there always new products being developed to make popular programs and their
`interfaces simpler and easier to use? Even before Microsoft's Windows 95 operat(cid:173)
`ing system was an actual product, there were other products, such as Norton Util(cid:173)
`ities, developed for the beta test release of Windows 95. For the past year or more,
`I have received a daily e-mail "Tip of the Day" for Windows 95. If these interfaces
`are so easy, why do users need so many tips to use them effectively? You'll learn
`why any particular product or user interface can't always be the best for everyone.
`An INFOWORLD survey (Ji.me 12, 1995) summarized the most difficult com(cid:173)
`puting skills to find and hire for major companies in the United States. At the
`top of the list was client/ server technical architects, and second was distributed
`
`Figure P.1 Know thy users, for they
`are not you.
`
`Facebook's Exhibit No. 1010
`Page 13
`
`

`

`__ :_r:RECACE
`
`database experts. Third on the list of difficult skills to find was the GUI
`designer, a skill this book addresses. Further down on the list, at number five,
`was the GUI programmer.
`
`KEY IDEA! While being able to program a graphical- and object(cid:173)
`
`oriented user interface is a critical skill, an even more important
`skill is being able to design and analyze user interfaces. You don't
`have to be a expert programmer to be able to design good user inter(cid:173)
`faces. In fact, software programming and interface design are sepa(cid:173)
`rate skills that are both needed on a product design team.
`
`What's in This Book?
`
`The book discusses computer software interfaces in general and focuses on
`today's graphical user interfaces (GUis) and newer, more high-powered, object(cid:173)
`oriented user interfaces (OOUis). It also covers emerging computer technolo(cid:173)
`gies, such as speech recognition, wizards, social user interfaces, and intelligent
`software agents.
`
`KEY IDEA! Throughout the book, important information will be
`
`highlighted with the Key Idea! sidebar shown here.
`
`Discussions are supplemented with examples and pictures of interfaces and
`objects that demonstrate user interface styles and elements. The book details
`the key user interface design principles and guidelines, and an iterative user
`interface design process you can follow. You'll learn how human psychology
`affects how computer hardware and software should be designed.
`The history of user interfaces is detailed, from the command line interface of
`DOS to the GUI and OOUI interfaces you see today. Other key user interface
`topics are also covered, including usability, help and tutorials, and the merging
`of PC interfaces with Internet Web browser interfaces.
`
`KEY IDEA! The examples and guidance provided in this book are
`
`based on research, guidelines, and practical experience, not just
`my personal beliefs and ideas about inte1face design. Whenever pos(cid:173)
`sible, historical and expert opinions and guidelines are provided,
`complete with references.
`
`Facebook's Exhibit No. 1010
`Page 14
`
`

`

`• P R E FA C E
`
`xiii
`
`How This Book Is Organized
`
`There are four major parts to this book, each with its own roadmap to guide you
`through it:
`
`• Part 1 : Foundations of User Interface Design (Chapters 1-9)
`• Part 2: Object-Oriented User Interfaces (Chapters 10-11)
`• Part 3: The User Interface Design Process (Chapter 12)
`• Part 4 : Advanced User Interface Techniques and Technologies
`(Chapters 13- 16).
`
`Use the four-part pyramid design of the book (see Figure P.2) to build your
`skills and knowledge and to go directly to a particular part of the book based on
`your interests and needs.
`
`Part 1 Contents
`If you are fairly new to user interface design, start with Part 1, where you will
`learn the fundamentals-the whys and hows of good software design. Chapter 1
`opens the book with a discussion of quality software design. User interfaces are
`defined in Chapter 2. Chapter 3 covers user interface models. An overview of
`the human cognitive and perceptual systems is provided in Chapter 4. I discuss
`the golden rules (interface design principles) of interface design in Chapter 5 .
`Chapter 6 addresses the role of computer standards and interface guidelines.
`Software usability is defined, and usability testing goals, objectives, and case
`studies are found in Chapter 7. Chapter 8 analyzes command-line and menu
`interfaces, while Chapter 9 covers graphical user interfaces (GUis).
`
`\"- Advanced User Interface
`echniques and Technologies
`\
`
`ser Interface Design
`
`Figure P.2 What's in this book.
`
`Facebook's Exhibit No. 1010
`Page 15
`
`

`

`xiv
`
`PREFACE
`
`Part 2 Contents
`To learn about the concepts, examples, and architecture of object-oriented user
`interfaces, or OOUis, go to Part 2. Chapter 10 defines OOUis and discusses
`objects, views, and core skills needed to use object-oriented interfaces. Chapter
`11 shows how to migrate users from GUis to OOUis and compares OOUis to
`object-oriented programming (OOP).
`
`Part 3 Contents
`An iterative user interface design process is defined in Part 3, and a case study
`is provided. The four-phase design process is based on object-oriented design,
`but it also works for designing more traditional GUls. As such, it is funda(cid:173)
`mental to good user interface design, and Chapter 12 could be read following
`Part 1.
`
`Part 4 Contents
`To read about new and more advanced user interface technologies and tech(cid:173)
`niques, focus on Part 4. This book is designed to give you practical guidance in
`designing software that people can use. Chapter 13 offers a designer's toolkit,
`full of topics such as graphic excellence, using color, animation, and audio,
`interface terminology, and international interfaces. Key interface design issues
`are discussed, along with the top 10 problems with GUis and OOUls. Chapter
`14 covers help systems, Electronic Performance Support, tutorials, training,
`wizards, and multimedia in the interface. New interface technologies of agents
`and social user interfaces are discussed in Chapter 15. Finally, Chapter 16
`introduces the new world of Internet interfaces, and covers the merging of PC
`interfaces and Web-browsing interfaces. Web design guidelines are offered, and
`we'll look at the future of user interfaces.
`
`From the Author
`
`We need better hardware for the desktop applications part of the market, bet(cid:173)
`ter software and communications infrastructure, and, perhaps most impor(cid:173)
`tant, contributions from the solution providers, the people who have provided
`the consulting and training, who can take these standardized building blocks
`and put them together in a way that's meaningful for the incredible variety of
`users out there.
`
`Bill Gates (1996)
`
`Facebook's Exhibit No. 1010
`Page 16
`
`

`

`PREF=i ~
`
`These are exciting times in software development and user interface design.
`The emergence of the Internet and World Wide Web has transformed the face of
`computing and the look and feel of software is again a hot topic. As with any
`new technology, users, designers, and developers are jumping head first into
`uncharted areas. Although user interface design is changing, it is still well(cid:173)
`grounded in the history of traditional interface design, which is based on
`human perception and cognition and commonly accepted design principles
`and guidelines.
`This book is based on my experiences as a user interface architect, designer,
`and usability professional over the past fifteen years in the computer industry,
`and is grounded in my training and research as a cognitive psychologist. I have
`been involved in the planning, design, and usability testing of all aspects of
`computer hardware and software, from product installation, online and hard(cid:173)
`copy publications, and developing product and corporate style guides, to
`designing and developing software user interfaces and help systems. In my 11
`years at IBM, I was part of the Common User Access (CUA) team that developed
`the Windows and OS/2 style guide and reference and wrote the only industry
`user interface guide for designing object-oriented user interfaces, Object(cid:173)
`Oriented Inte1face Design: IBM Common User Access Guidelines. I also devel(cid:173)
`oped technical education courses on user interface design and usability, and
`performed usability tests on many software products.
`This book was written to describe the explosion of new ideas in software user
`interfaces that have come about since my first book, The GUI-OOUI War: OS/2
`vs. Windows, The Designer's Guide to Human-Computer Interfaces (published
`by John Wiley & Sons, Inc., 1994). In addition to drawing from my experiences
`in user interface architecture design and consulting, I have included examples
`and materials from my seminars and courses on designing user-oriented and
`object-oriented interfaces.
`User interface design is more than placing controls on the display screen.
`Cognitive psychologists bring an understanding of how humans read, learn,
`and think to help design computers that work within the psychological capa(cid:173)
`bilities and limitations of the people for whom they are designed (Figure P.3).
`I've spent hundreds of hours watching people try to use computers in their
`own work environments and in usability labs. Over the years, users have grad(cid:173)
`ually (and often painfully) migrated from command-line interfaces to graphi(cid:173)
`cal user interfaces and are now moving on into the wonderful world of
`object-oriented user interfaces, with new operating systems like OS/2 Warp
`and Windows 95. I've seen the confusion and frustration (and only occasion(cid:173)
`ally the joy) that users experience in their work with computers. The insights
`I've gained regarding this intricate and interesting relationship that has
`formed between humans and computers should help the reader focus on the
`
`Facebook's Exhibit No. 1010
`Page 17
`
`

`

`xvi
`
`PREFACE
`
`rs!})
`
`Figure P.3 Computer user interfaces from a psycholo(cid:173)
`gist's perspective.
`
`user's perspective and the fact that software must be designed to meet the
`user's needs, not the designer's or programmer's needs. Designing and build(cid:173)
`ing sensible and usable software user interfaces is both an art and a science.
`This book is designed to enhance your artistic and scientific interface design
`skills.
`
`Facebook's Exhibit No. 1010
`Page 18
`
`

`

`,
`
`'
`
`.
`
`-<C 1-
`
`"
`
`'
`
`'
`
`'.
`
`.
`.
`
`-
`
`·
`
`.
`-. .
`~-
`C · ONTENTS
`
`,
`
`•
`
`1
`
`-
`
`-
`
`PART ONE Foundations of User Interface Design
`
`I
`
`Chapter I Designing Quality Software User Interfaces
`
`3
`
`WHAT Is QUALITY DESIGN?
`
`3
`WHAT DEFINES WORLD CLASS?
`7
`
`REFERENCES
`
`5
`
`Chapter 2 What Is a User Interface?
`
`9
`
`USER EXPERIENCES AND EXPECTATIONS
`
`WHAT Is A SOITWARE USER INTERFACE?
`16
`
`REFERENCES
`
`9
`14
`
`Chapter 3 User Interface Models
`
`17
`
`USERS NEED MULTIPLE USER INTERFACE STYLES
`
`17
`
`USERS AS AN INTEGRAL PART OF THE COMPUTER SYSTEM
`19
`MODELS AND METAPHORS: TRANSFERRING WORLD KNOWLEDGE
`25
`30
`
`THE USER'S MENTAL MODEL
`
`THE PROGRAMMER'S MODEL
`31
`THE DESIGNER'S MODEL
`WHY SHOULD You BE CONCERNED WITH INTERFACE MODELS?
`35
`REFERENCES
`
`22
`
`34
`
`Chapter 4 The Psychology of Humans and Computers
`
`37
`
`THE PSYCHOLOGY OF USERS
`
`37
`HUMAN PERCEPTION AND ATTENTION
`
`38
`
`xvii
`
`Facebook's Exhibit No. 1010
`Page 19
`
`

`

`HUMAN INFORMATION PROCESSING: MEMORY AND COGNITION
`46
`
`HUMANS AND COMPUTERS WORKING TOGETHER
`46
`
`REFERENCES
`
`39
`
`Chapter 5 The Golden Rules of User Interface Design
`
`47
`
`47
`USER INTERFACE DESIGN PRINCIPLES
`51
`GOLDEN RULE #1: PLACE USERS IN CONTROL
`GOLDEN RULE #2: REDUCE USERS' MEMORY LOAD
`GOLDEN RULE #3: MAKE THE INTERFACE (ONSISTENT
`79
`REFERENCES
`
`63
`72
`
`Chapter 6 Computer Standards and User Interface
`Guidelines
`81
`
`COMPUTER STANDARDS
`
`81
`USER INTERFACE GUIDELINES
`
`83
`How TO BENEFIT FROM GUIDELINES: CORPORATE STYLE GUIDES
`95
`
`DESIGNING INTERFACES FOR WORLDWIDE USE
`
`GUIDELINES AND SOFTWARE DEVELOPMENT ToOLS
`
`97
`USABILITY Is MORE THAN STANDARDS AND GUIDELINES
`99
`
`REFERENCES
`
`99
`
`Chapter 7 Software Usability Testing
`
`101
`
`DEFINING PRODUCT USABILITY
`
`101
`DEFINING SOFTWARE USABILITY TESTING
`
`(OST BENEFITS OF USABILITY TESTING
`
`103
`107
`
`PRODUCT USABILITY GOALS AND OBJECTIVES
`109
`USING COGNITIVE PSYCHOLOGISTS AND USABILITY PROFESSIONALS
`113
`USABILITY: SUCCESS OR FAILURE FOR TODAY'S PRODUCTS
`117
`
`ARE USABILITY PROFESSIONALS WORTH THE (OST?
`
`MARKETING USABILITY AND USER INTERFACES
`
`114
`
`90
`
`112
`
`Facebook's Exhibit No. 1010
`Page 20
`
`

`

`THE ART OF DATA MASSAGE: RELIABILITY AND VALIDITY
`
`• C O N T E N T S
`
`xix
`
`. 124
`
`119
`122
`USABILITY TESTING INTERFACE STYLES: (UIS AND GUIS
`USABILITY TESTING NEW PRODUCT VERSIONS: WINDOWS 3.1 AND WINDOWS 95
`USABILITY TESTING OPERATING SYSTEMS: WINDOWS 95, MACINTOSH,
`125
`AND OS/2 WARP
`A USABILITY CHALLENGE: WINDOWS VERSUS MACINTOSH
`130
`THE USABILITY TEST REPORT CARD
`SOFTWARE USABILITY TESTING-JUST Do Ir!
`133
`
`129
`
`130
`
`REFERENCES
`
`Chapter 8 User Interface Evolution:
`Command-Lines and Menus
`
`135
`
`USER INTERFACES AND OPERATING SYSTEMS
`
`THE COMMAND-LINE USER INTERFACE (CUI)
`
`MENU INTERFACES: ARE You BEING SERVED?
`156
`
`REFERENCES
`
`135
`136
`147
`
`Chapter 9 User Interface Evolution:
`Graphical User Interfaces
`
`ON THE ROAD TO GUls: PICKING APPLES IN THE PARC
`160
`BASICS OF GRAPHICAL USER INTERFACES
`162
`THE USER INTERFACE ARCHITECTURE BEHIND GUIS
`171
`178
`
`(ORE USER SKILLS NEEDED FOR GUls
`
`GUIS AND THE USER'S MODEL
`
`GUls AND USERS' MEMORY LOAD
`181
`How USERS INTERACT WITH GUls
`
`THE SEMANTICS OF GUls
`
`183
`188
`COMPOSITE DOCUMENTS IN GUls: OLE
`189
`
`WHAT'S NEXT FOR GUls?
`190
`
`REFERENCES
`
`157
`
`157
`
`167
`
`Facebook's Exhibit No. 1010
`Page 21
`
`

`

`XX
`
`CONTENTS
`
`PART TWO Object-Oriented User Interfaces
`
`191
`
`Chapter 10 Object-Oriented User Interfaces:
`The New World
`193
`
`IN THE BEGINNING • • •
`
`193
`(HANGING GEARS: MORE POWER FOR THE USER INTERFACE
`196
`
`BASICS OF OOUls: BEYOND GUls TO OBJECTS
`(ORE SKILLS NEEDED FOR 00Uls
`200
`THE USER INTERFACE ARCHITECTURE BEHIND 00Uls
`220
`REFERENCES
`
`206
`
`195
`
`Chapter 11 Object-Oriented User Interfaces:
`Meeting User Needs
`221
`
`00Uls AND THE USER'S MODEL
`00Uls AND USERS' MEMORY LOAD
`231
`THE SEMANTICS OF OOUls
`How USERS INTERACT WITH OOUls
`
`221
`227
`
`233
`237
`MIGRATING FROM GUls TO OOUls
`00Uls AND 00 PROGRAMMING: SIMILAR, YET DIFFERENT
`242
`ARE 00Uls AHEAD OF THEIR TIME?
`242
`
`REFERENCES
`
`240
`
`PART THREE The User Interface Design Process
`
`245
`
`Chapter 12 An Iterative User Interface Design Process
`
`247
`
`FOLLOW A DESIGN TEAM APPROACH
`
`247
`249
`USER-INVOLVED AND LEARNER-CENTERED DESIGN
`A FOUR-PHASE INTERFACE DESIGN PROCESS
`250
`252
`THE ITERATIVE NATURE OF INTERFACE DESIGN
`THE MANDEL MANOR HOTELS: AN INTERFACE DESIGN USE STUDY
`255
`PHASE 1: GATHER AND ANALYZE USER INFORMATION
`PHASE 2: DESIGN THE USER INTERFACE
`259
`PHASE 3: CONSTRUCT THE USER INTERFACE
`279
`
`254
`
`Facebook's Exhibit No. 1010
`Page 22
`
`

`

`CONTENTS
`
`I xxi L_
`
`282
`PHASE 4: VALIDATE THE USER INTERFACE
`WHO'S DRIVING THE DESIGN-THE SYSTEM OR THE INTERFACE? . 284
`288
`EPILOGUE: THE ITERATIVE DESIGN PROCESS-IT WORKS!
`290
`
`REFERENCES
`
`PART FOUR Advanced User Interface Techniques
`and Technologies
`293
`
`Chapter 13 The Interface Designer's Toolkit
`
`295
`
`THE DESIGNER'S TOOLKIT
`
`295
`
`295
`COMMUNICATING INFORMATION VISUALLY
`298
`AUDIO AND ANIMATION IN THE USER INTERFACE
`
`THE USE AND MISUSE OF COLOR
`
`305
`INTERFACE TERMINOLOGY AND INTERNATIONAL DESIGN
`KEY INTERFACE DESIGN ISSUES
`311
`Top TEN USABILITY PROBLEMS WITH GUls AND OOUls
`318
`MORE GUIDANCE ON USER INTERFACE DESIGN
`319
`
`REFERENCES
`
`309
`
`316
`
`Chapter 14 Help, Advisors, Wizards, and Multimedia
`
`323
`
`HELP AND TRAINING: WHY AND WHEN?
`
`323
`THE PARADIGM SHIFT-How TO TRAIN FOR IT
`
`THE NEW BREED OF TUTORIALS: ADVISORS
`
`325
`329
`ELECTRONIC PERFORMANCE SUPPORT: WHAT Is IT?
`331
`333
`
`USER IN CONTROL OR PROGRAM GUIDANCE?
`335
`USING MULTIMEDIA IN ELECTRONIC PERFORMANCE SUPPORT
`344
`
`THE WONDERFUL WORLD OF WIZARDS
`
`339
`
`WILL MULTIMEDIA HELP USERS WORK BETTER?
`347
`MULTIMEDIA AND 00Uls: A PERFECT MATCH
`
`MULTIMEDIA AND GUls
`
`MULTIMEDIA AS PART OF THE USER INTERFACE
`354
`
`REFERENCES
`
`349
`352
`
`Facebook's Exhibit No. 1010
`Page 23
`
`

`

`xxii
`
`e&Mf¥@t¥¥¥¥iffii¥iBWM
`C O N T E N T S
`
`Chapter 15 Social User Interfaces and Intelligent Agents
`
`357
`
`ARE COMPUTERS INTELLIGENT?
`
`357
`WHY Do WE NEED NEW USER INTERFACES?
`
`WHAT Is A SOCIAL USER INTERFACE?
`
`359
`ENABLING NEW INTERACTION AND INTERFACES-SPEECH TECHNOLOGY
`364
`SOCIAL USER INTERFACES-THE FIRST WAVE
`372
`AGENTS-THE FIRST WAVE
`
`367
`
`WHAT Is AN AGENT?
`
`378
`SOCIAL USER INTERFACES AND AGENTS-THE FUTURE
`381
`
`REFERENCES
`
`379
`
`360
`
`Chapter 16 The New World of PC-Internet User
`Interfaces
`383
`
`THE INTERNET AND WORLD WIDE WEB
`
`INTRODUCTION TO THE WEB INTERFACE
`
`383
`386
`388
`NEW COMPUTER INTERFACE METAPHORS
`MERGING PC AND WEB INTERFACES
`390
`DYNAMIC DATA BEHIND THE USER INTERFACE
`
`WEB INTERFACE DESIGN SKILLS
`
`399
`
`403
`
`394
`ETHICS, MORALS, AND ADDICTION ON THE WORLD WIDE WEB
`401
`KEY ELEMENTS OF WEB INTERFACE DESIGN
`411
`
`WEB INTERFACE DESIGN GUIDELINES
`414
`USABILITY ON THE INTERNET
`WHERE ARE PC AND WEB INTERFACES GOING?
`419
`EPILOGUE
`423
`
`REFERENCES
`
`418
`
`Index 427
`
`Facebook's Exhibit No. 1010
`Page 24
`
`

`

`E
`
`ELEMENTS OF USER INTERF ACE DESIGN
`
`60
`
`~
`I
`
`Providing both keyboard and mouse interfaces offers users flexibility and
`allows users at different skill levels or with physical handicaps to use input
`devices in yVhatever ways they feel comfortable.
`
`KEY IDEA! Don't sacrifice expert users for an easy-to-use interface
`
`for casual users. You must provide fast paths for experienced
`users. Nothing drives experienced users crazy like having to go
`tl1rough too many steps to perform an action they use all the time
`and would like to pe1form using one step or a macro command.
`
`Make the User Interface Transparent
`The user interface is the mystical, mythical part of a software product. If done
`well, users aren't even aware of it. If done poorly, users can't get past it to effec(cid:173)
`tively use the product. A goal of the interface is to help users feel like they are
`reaching right through the computer and directly manipulating the objects they
`are working with. Now, that's a transparent interface!
`The interface can be made transparent by giving users work objects rather
`than system objects. Trash cans, waste baskets, shredders, and in- and out(cid:173)
`baskets all let users focus on the tasks they want to do using these objects, rather
`than the underlying system functions actually performed by these objects. Make
`sure these objects work like they do in the real world, rather than in some other
`way in the computer. Microsoft's Windows 95 interface provides a Recycle Bin,
`rather than a waste basket or shredder, to remind users that things are not nec(cid:173)
`essarily thrown away immediately.
`Other aspects of Windows 95 are not so transparent, however. The Close Pro(cid:173)
`gram dialog (displayed by keying Ctrl+Alt+Del) not only lists the programs
`users started and are currently running, but it also displays a long list of other
`system programs, with names like Explorer, Rscrmtr, Symapudo, Qvp32, and
`Runner. Users have no idea of what these programs are and where they came
`from, but they are free to choose any program from this list and, in doing so,
`inadvertently end that running task. This can be quite dangerous since the sys(cid:173)
`tem is not well hidden from users.
`
`Allow Users to Customize the Interface
`Allow users to customize information presentation (colors, fonts, location,
`arrangement, view types), interface behavior (default actions, macros, buttons),
`and interaction techniques (keystrokes, shortcut keys, mnemonics, mouse but-
`
`Facebook's Exhibit No.1010
`Page 25
`
`

`

`THE GOLDE N RULES OF USER I NTERFA CE D ES I G N
`
`61
`
`KEY IDEA! The secret o/a transparent interface is being in synch
`
`with the user's mental model. Users should be free to focus on
`the work they are trying to perform, rather than translating their tasks
`into the functions that the software program provides. Users should
`understand simply that their system password must be at least six
`characters, and should not be concerned with how many bytes of
`storage that is.
`
`ton mappings). The rich visual and sensory environment of graphical and
`multimedia user interfaces requires users to be able to customize the interface.
`Users feel more comfortable and in control of the interface if they can person(cid:173)
`alize it with their favorite colors, patterns, fonts, and background graphics for
`their desktop.
`
`KEY IDEA! Today's operating systems offer a great deal of cus(cid:173)
`
`tomization for interface elements. 0S/2's properties views and
`Windows 95's properties dialogs allow users to set preferences for
`many operating system features and objects. Windows 95 developers
`even created an add-on utility called Tweak UL Your products should
`use operating system properties to remain consistent with other
`applications. However, all other aspects of the product interface,
`including menus and buttons, can be customizable at the product
`level.
`
`Allow Users to Directly Manipulate Interface Objects
`Wherever possible, encourage users to directly interact with things on the
`screen, rather than using indirect methods, such as typing commands or select(cid:173)
`ing from menus. While you still must allow for both keyboard and mouse nav(cid:173)
`igation and selection, you should optimize the interface toward users' most
`natural interaction style.
`In addition to the principle of making the interface transparent, users should
`feel like the interface isn't even there. When determining direct manipulation
`relationships, work within the interface metaphors and user models. The pop(cid:173)
`ular personal information manager (PIM), Lotus Organizer, has its own waste
`basket. Drag an appointment or address book entry to the waste basket and
`watch what happens-the item bursts into flames! Is this the behavior you
`expect from a waste basket? I don't think so.
`
`Facebook's Exhibit No.1010
`Page 26
`
`

`

`THE GOLDEN RULES OF USER INTERFACE DESIGN
`
`ber" selection enters the correct check number, and a list of memorized trans(cid:173)
`actions can fill in the payee and the amount to be paid. Users can complete the
`task without even typing a word!
`Online aids such as messages, tooltips, and context-sensitive help are inter(cid:173)
`face elements that support users in recognizing information rather than trying
`to remember what they may or may not know.
`
`KEY IDEA! Provide lists and menus containing selectable items
`
`instead of fields where users must type in information without
`support from the system. Why should users have to remember the
`two-character abbreviations for each state of the United States when
`they are filling out an online form? Don't force them to memorize
`codes for future use. Provide lists of frequently chosen items for
`selection rather than just giving them a blank ent1y field.
`
`Provide Visual Cues
`A necessary aspect of any graphical user interface (and, of course, an object(cid:173)
`oriented user interface) is that users must know where they are, what they are
`doing, and what they can do next.
`Visual cues serve as reminders for users. Figure 5.3 shows what my com(cid:173)
`pu