a
`
`:
`
`Ilesigning eh User Interface r
`
`‘ i
`
`Sz“rateg:'e5 for Effective
`Harr2czn—C’0mputer
`
`Izzterczcfion
`
`Third Edz'tz'or2
`
`Ben Shneiderman
`
`GOOGLE Ex. 1037
`
`Google v. Philips
`
`GOOGLE Ex. 1037
`Google v. Philips
`
`

`
`
`
`Designing the User Interface
`
`Strategies for Effective
`Human—Computer Interaction
`
`Third Edition
`
`Ben Shneiderman
`The University of Maryland
`
`7‘, ADDISON-WESLEY
`
`
`
`GOOGLE Ex. 1037
`Google v. Philips
`
`GOOGLE Ex. 1037
`Google v. Philips
`
`

`
`
`
`All rights reserved. No part of this publicaticm rnay be reprociucecl, Sl'{)‘I‘:??L‘l in a
`retrieval system, or transmitted,
`in any fonn or by any means, electronic,
`I11IECl‘IElI1iC£‘tl_. pliotousupying, recurding, or otherwise, without the prior written
`permis.=;ion nf the puhlislier. Printed in the United States uf America.
`
`2 3 4 5 6 7 8 9 10-MA-0100999897
`
`GOOGLE Ex. 1037
`
`Google v. Philips
`
`Many of the designations used by manufacturers and sellers to distinguish their
`products are claimed as trademarks. Where those designations appear in this
`book, and Addison-Wesley was aware of a trademark claim, the designations
`have been printed in initial caps or all caps.
`
`Library of Congress Cataloging-in-Publication Data
`Shneiderman, Ben.
`
`Designing the user interface : strategies for effective human
`-computer-interaction / Ben Shneiderman. -- 3rd ed.
`p.
`cm.
`
`Includes bibliographical references and index.
`ISBN 0-201-69497-2
`
`1. Human-computer interaction.
`systems)
`I. Title.
`QA76.9.H85S54
`1998
`
`0O4'.O1'9--dc21
`
`2. User interfaces (Computer
`
`96-37974
`CIP
`
`Access the latest information about Addison-Wesley titles from our World Wide
`Web site: http:/ /www.awl.com/cseng
`
`Chapter opener illustrations from art provided by Mark Kostabi. Reproduced
`with permission.
`
`Cover art © Boris Lyubner/ SIS
`
`Copyright © 1998 by Addison Wesley Longman, Inc.
`
`GOOGLE Ex. 1037
`Google v. Philips
`
`

`
`Contents
`
`/CHAPTER 1 HUMAN FACTORS OF INTERACTIVE SOFTWARE 3
`1.1
`Introduction 4
`1.2
`
`Goals of System Engineering 9
`1.2.1 Proper functionality 11
`1.2.2 Reliability, availability, security, and data integrity 12 '
`1.2.3 Standardization, integration, consistency, and portability 13
`1.2.4 Schedules and budgets
`14
`14
`Goals of User—Interface Design
`Motivations for Human Factors in Design 16
`
`1.3
`1.4
`
`1.5
`
`16
`1.4.1 Life—critical systems
`1.4.2
`Industrial and commercial uses
`16
`1.4.3 Office, home, and entertainment applications
`1.4.4 Exploratory, creative, and cooperative systems
`Accommodation of Human Diversity 18
`1.5.1 Physical abilities and physical workplaces
`1.5.2 Cognitive and perceptual abilities
`20
`1.5.3 Personality differences
`21
`1.5.4 Cultural and international diversity 23
`1.5.5 Users with disabilities
`24
`
`18
`
`17
`17
`
`1.6
`
`26
`1.5.6 Elderly users
`Goals for Our Profession 28
`28
`1.6.1
`Influencing academic and industrial researchers
`1.6.2 Providing tools, techniques, and knowledge for systems
`implementers
`31
`1.6.3 Raising the computer consciousness of the general public
`1.7 Practitioner's Summary 32
`1.8 Researcher’s Agenda
`32
`
`31
`
`
`
`CHAPTER 2 THEORIES, PRINCIPLES, AND GUIDELINES 51
`«/21
`Introduction 52
`-/2 .2
`
`53
`High-Level Theories
`2.2.1 Conceptual, semantic, syntactic, and lexical model
`2.2.2 GOMS and the keystroke-level model
`55
`2.2.3 Stages of action models
`57
`2.2.4 Consistency through grammars
`2.2.5 Widget—level theories
`60
`61
`0bject—Action Interface Model
`2.3.1 Task hierarchies of objects and actions
`
`58
`
`63
`
`v /2.3
`
`54
`
`vii
`
`GOOGLE Ex. 1037
`
`Google v. Philips
`
`GOOGLE Ex. 1037
`Google v. Philips
`
`

`
`
`
`2.7 Guidelines for Data Display 79
`2.7.1 Organizing the display 80
`2.7.2 Getting the user's attention 81
`2.8 Guidelines for Data Entry 82
`2.9 Balance of Automation and Human Control
`
`83
`
`2.10 Practitioner's Summary 89
`2.11 Researcher’s Agenda
`90
`
`CHAPTER 3 MANAGING DESIGN PROCESSES 95
`3.1
`Introduction 96
`
`3.2 Organizational Design to Support Usability 97
`3.3 The Three Pillars of Design 100
`3.3.1 Guidelines documents and processes
`3.3.2 User—interface software tools
`102
`
`100
`
`3.3.3 Expert reviews and usability testing 103
`3.4 Development Methodologies
`104
`3.5 Ethnographic Observation 107
`3.6 Participatory Design 109
`3.7 Scenario Development
`111
`3.8 Social Impact Statement for Early Design Review 113
`3.9 Legal Issues = 115
`3.10 Practitionerlf s Summary 118
`3.11 Researcher’sjAgenda
`118
`
`CHAPTER 4 EXPERT REVIEWS, USABILITY TESTING, SURVEYS, AND
`CONTINUING ASSESSMENTS 123
`Introduction 124
`
`4.1
`
`125
`4.2 Expert Reviews
`4.3 Usability Testing and Laboratories
`4.4 Surveys
`132
`
`
`127
`
`GOOGLE Ex. 1037
`
`Google v. Philips
`
`I
`
`I
`
`viii
`
`Contents
`
`Interface hierarchies of objects and actions
`2.3.2
`2.3.3 The disappearance of syntax 65
`,
`2.4 Principle 1: Recognize the Diversity 67
`2.4.1 Usage profiles
`67
`2.4.2 Task profiles
`70
`71
`2.4.3
`Interaction styles
`2.5 Principle 2: Use the Eight Golden Rules of Interface Design 74
`2.6 Principle 3: Prevent Errors
`76
`2.6.1 Correct matching pairs
`2.6.2 Complete sequences
`77
`2.6.3 Correct commands
`78
`
`64
`
`77
`
`GOOGLE Ex. 1037
`Google v. Philips
`
`

`
`135
`4.5 Acceptance Tests
`145
`4.6 Evaluation During Active Use
`145
`4.6.1
`Interviews and focus—group discussions
`4.6.2 Continuous user-performance data logging 146
`4.6.3 Online or telephone consultants
`147
`4.6.4 Online suggestion box or trouble reporting 147
`4.6.5 Online bulletin board or newsgroup 148
`4.6.6 User newsletters and conferences
`148
`4.7 Controlled Psychologically Oriented Experiments
`4.8 Practitioner's Summary 150
`4.9 Researcher's Agenda
`151
`
`149
`
`157
`
`160
`
`Contents
`
`CHAPTER 5 SOFTWARE TOOLS 155
`5.1
`Introduction 156
`5.2 Specification Methods
`_
`5.2.1 Grammars
`158
`5.2.2 Menu-selection and dia1og—box trees
`5.2.3 Transition diagrams
`160
`5.2.4 Statecharts
`162
`5.2.5 User-action notation (UAN)
`Interface-Building Tools
`166
`5.3.1 Design tools
`168
`5.3.2 Software-engineering tools
`5.4 Evaluation and Critiquing Tools
`5.5 Practitioner's Summary 179
`5.6 Researcher's Agenda
`181
`
`5.3
`
`163
`
`169
`177
`
`CHAPTER 6 DIRECT MANIPULATION AND VIRTUAL
`ENVIRONMENTS 185
`Introduction 186
`6.1
`187
`6.2 Examples of Direct—Manipulation Systems
`6.2.1 Command-line versus display editors versus word
`processors
`187
`6.2.2 The VisiCa1c spreadsheet and its descendants
`6.2.3 Spatial data management
`192
`6.2.4 Video games
`193
`6.2.5 Computer-aided design 197
`6.2.6 Office automation 199
`6.2.7 Further examples of direct manipulation 201
`6.3 Explanations of Direct Manipulation 202
`
`191
`
`GOOGLE Ex. 1037
`
`Google v. Philips
`
`GOOGLE Ex. 1037
`Google v. Philips
`
`

`
`
`
`7.2.4 Acyclic and cyclic menu networks
`Item Presentation Sequence
`252
`7.3
`254
`7.4 Response Time and Display Rate
`255
`7.5 Fast Movement Through Menus
`7.5.1 Menus with typeahead: The BLT approach 255
`7.5.2 Menu names or bookmarks for direct access
`256
`7.5.3 Menu macros, custom toolbars, and style sheets
`7.6 Menu Layout
`257
`7.6.1 Titles
`257
`
`x
`
`Contents
`
`6.3.1 Problems with direct manipulation 204
`6.3.2 The OAI model explanation of direct manipulation 205
`6.4 Visual Thinking and Icons
`207
`6.5 Direct—Manipulation Programming 210
`6.6 Home Automation 213
`
`6.7 Remote Direct Manipulation 217
`6.8 Virtual Environments
`221
`
`|
`'
`
`6.9 Practitioner's Summary 228
`6.10 Researcher’s Agenda
`229
`
`/ CHAPTER 7 MENU SELECTION, FORM FILLIN, AND
`DIALOG BOXES 235
`Introduction 236
`
`7.1
`
`7.2 Task-Related Organization 237
`7.2.1 Single menus
`238
`7.2.2 Linear sequences and multiple menus
`7.2.3 Tree-structured menus
`247
`
`247
`
`252
`
`257
`
`I
`
`I
`I
`
`-.
`'
`E
`
`‘E
`
`t'
`“
`l
`l,
`5
`
`259
`7.6.2 Phrasing of menu items
`7.6.3 Graphic layout and design 259
`7.7 Form Fillin
`262
`7.7.1 Form-fillin design guidelines
`7.7.2 List and combo boxes
`265
`7.7.3 Coded fields
`266
`7.8 Dialog Boxes
`268
`7.9 Practitioner's Summary 270
`7.10 Researcher’s Agenda
`270
`
`262
`
`CHAPTER 8 COMMAND AND NATURAL LANGUAGES 275
`“ 8.1
`Introduction 276
`
`~’ 8.2 Functionality to Support Users’ Tasks
`
`280
`
`GOOGLE Ex. 1037
`
`Google v. Philips
`
`GOOGLE Ex. 1037
`Google v. Philips
`
`

`
`282
`
`284
`
`282
`8.3.1 Single command set
`282
`8.3.2 Command plus arguments
`8.3.3 Command plus options and arguments
`8.3.4 Hierarchical command structure
`285
`, 8.4 The Benefits of Structure
`285
`8.4.1 Consistent argument ordering 286
`8.4.2 Symbols versus keywords
`286
`8.4.3 Hierarchical structure and cong
`/ 8.5 Naming and Abbreviations
`289
`8.5.1 Specificity versus generality 289
`8.5.2 Abbreviation strategies
`290
`8.5.3 Guidelines for using abbreviations
`/86 Command Menus
`292
`8.7 Natural Language in Computing 293
`8.7.1 Natural-language interaction 294
`8.7.2 Natural-language queries
`296
`8.7.3 Test—database searching 297
`8.7.4 Natural-language text generation 300
`8.7.5 Adventure and educational games
`300
`8.8 Practitioner's Summary 300
`8.9 Researcher’s Agenda
`301
`
`ruence
`
`287
`
`291
`
` / 8.3 Command—Organization Strategies
`
`307
`
`313
`
`INTERACTION DEVICES 305
`CHAPTER9
`9.1
`Introduction 306
`9.2 Keyboards and Function Keys
`9.2.1 Keyboard layouts
`308
`9.2.2 Keys
`311
`312
`9.2.3 Function keys
`9.2.4 Cursor movement keys
`9.3 Pointing Devices
`315
`9.3.1 Pointing tasks
`315
`9.3.2 Direct—control pointing devices
`9.3.3
`Indirect-control pointing devices
`9.3.4 Comparisons of pointing devices
`9.3.5 Fitts’ Law 325
`326
`9.3.6 Novel pointing devices
`94 Speech Recognition, Digitization, and Generation 327
`9.4.1 Discrete—word recognition 328
`9.4.2 Continuous—speech recognition 331
`9.4.3 Speech store and forward 332
`
`316
`319
`323
`
`‘ _
`
`T
`
`GOOGLE Ex. 1037
`
`Google V. Philips
`
`GOOGLE Ex. 1037
`Google v. Philips
`
`

`
`
`
`1;
`l
`
`5
`
`I
`:
`
`i
`
`I
`
`xii
`
`Contents
`
`9.5
`
`9.4.4 Speech generation 333
`9.4.5 Audio tones, audiolization, and music
`Image and Video Displays
`336
`9.5.1 Display devices
`336
`9.5.2 Digital photography and scanners
`9.5.3 Digital Video
`339
`9.5.4 Projectors, heads-up displays, helmet—mounted displays
`9.6 Printers
`342
`
`335
`
`339
`
`341
`
`9.7 Practitioner's Summary 343
`9.8 Researcher’s Agenda
`344
`
`CHAPTER 10 RESPONSE TIME AND DISPLAY RATE 351
`10.1
`Introduction 352
`10.2 Theoretical Foundations
`
`354
`
`10.2.1 Limitations of short—term and working memory 355
`10.2.2 Sources of errors
`356
`
`10.3 Expectations and Attitudes
`10.4 User Productivity 361
`361
`10.4.1 Repetitive tasks
`10.4.2 Problem—solving tasks
`10.4.3 Summary 364
`10.5 Variability 364
`10.6 Practitioner's Summary 366
`10.7 Researcher’s Agenda
`367
`
`358
`
`362
`
`CHAPTER 11 PRESENTATION STYLES: BALANCING FUNCTION
`AND FASHION 371
`Introduction 372
`
`11.1
`
`373
`11.2 Error Messages
`11.2.1 Specificity 374
`11.2.2 Constructive guidance and positive tone
`11.2.3 User~centered phrasing 376
`376
`11.2.4 Appropriate physical format
`11.2.5 Development of effective messages
`11.3 Nonanthropomorphic Design 380
`11.4 Display Design 384
`11.4.1 Field layout
`387
`11.4.2 Empirical results
`389
`11.4.3 Display—complexity metrics
`391
`
`11.5 Color
`398
`
`375
`
`377
`
`_
`
`|
`|
`
`GOOGLE Ex. 1037
`
`Google v. Philips
`
`GOOGLE Ex. 1037
`Google v. Philips
`
`

`
`11.6 Practitioner's Summary 403
`11.7 Researcher’s Agenda
`403
`
`CHAPTER 12 PRINTED MANUALS, ONLINE HELP, AND
`TUTORIALS 409
`
`Introduction 410
`12.1
`./ 12.2 Reading from Paper versus from Displays
`12.3 Preparation of Printed Manuals
`414
`12.3.1 Use of the OAI Model to design manuals
`12.3.2 Organization and writing style
`417
`12.3.3 Nonanthropomorphic descriptions
`12.3.4 Development process
`423
`«/ 12.4 Preparation of Online Facilities
`12.4.1 Online manuals
`428
`12.4.2 Online tutorials, demonstrations, and animations
`
`412
`
`415
`
`421
`
`425
`
`436
`12.4.3 Helpful guides
`12.5 Practitioner's Summary 437
`12.6 Researcher’s Agenda
`438
`
`CHAPTER 13 MULTIPLE-WINDOW STRATEGIES 443
`13.1
`Introduction 444
`
`Individual-Window Design 448
`13.2
`13.3 Multiple-Window Design 455
`458
`13.4 Coordination by Tightly—Coupled Windows
`13.5
`Image Browsing and Tightly—Coupled Windows
`13.6 Personal Role Management and Elastic Windows
`13.7 Practitioner's Summary 472
`13.8 Researcher’s Agenda
`472
`
`462
`468
`
`434
`
`503
`
`<1:HA1=TER 14 COMPUTER-SUPPORTED COOPERATIVE WORK 477
`4.1
`Introduction 478
`14.2 Goals of Cooperation 479
`14.3 A
`-
`.
`.
`,
`14 351YnChT0n0u§ Interactions: Different Time, Different Place
`.
`.
`Electronic Mail
`483
`14.3.2
`Newsgmups and network communities
`485
`'
`-
`_
`.
`Synchronous Distributed. Different Place, Same Time
`14.5 Face to Face: Same Place, Same Time
`494
`14.6 Applying CSCW to Education 498
`14.7 Practitioner's Summary 502
`14.8 Researcher’s Agenda
`
`482
`
`488
`
`14.4
`
`GOOGLE Ex. 1037
`
`Google v. Philips
`
`GOOGLE Ex. 1037
`Google v. Philips
`
`

`
`xiv
`
`Contents
`
`INFORMATION SEARCH AND VISUALIZATION 509
`CHAPTER 15
`15.1
`Introduction 510
`15.2 Database Query and Phrase Search in Textual Documents
`15.3 Multimedia Document Searches
`519
`15.4
`Information Visualization 522
`
`513
`
`ll
`I
`i
`
`
`
`
`
`
`
`
`
`15.5 Advanced Filtering 541
`.
`
`15.6 Practitioner’s Summary 544
`';
`
`
`15.7 Researcher’s Agenda
`544
`I:
`
`
`
` . CHAPTER 16 HYPERMEDIA AND THE WORLD WIDE WEB 551
`
`g
`
`E
`
`
`
`
`
`
`
`
`
`
`
`Introduction 552
`16.1
`16.2 Hypertext and Hypermedia
`16.3 World Wide Web
`560
`
`556
`
`16.4 Genres and Goals and Designers
`16.5 Users and Their Tasks
`565
`
`562
`
`16.6 Object-Action Interface Model for Web Site Design 567
`16.6.1 Design of task objects and actions
`567
`16.6.2 Design of interface objects and actions
`16.6.3 Case study with the Library of Congress
`16.6.4 Detailed design issues
`572
`16.6.5 Web-Page design 575
`16.6.6 Testing and maintenance of web sites
`16.7 Practitioner's Summary 580
`16.8 Researcher’s Agenda
`580
`
`569
`571
`
`579
`
`'
`|
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`USER INTERFACES 585
`
`
`
`
`592
`
` AFTERWORD SOCIETAL AND INDIVIDUAL IMPACT OF
`
`
`
`
`
`
`
`586
`A.1 Between Hope and Fear
`A.2 Ten Plagues of the Information Age
`A.3 Prevention of the Plagues
`596
`A.4 Overcoming the Obstacle of Animism 597
`A.5
`In the Long Run 600
`A.6 Practitioner's Summary 601
`A.7 Researcher’s Agenda
`601
`
`
`
`Name Index 605
`
`Subject Index 621
`
` GOOGLE Ex. 1037
`
`Google v. Philips
`
`
`
`
`
`
`
`GOOGLE Ex. 1037
`Google v. Philips
`
`

`
`user Interface
`
` Designing the
`
`Strategies for Effective
`Human-Computer
`Interaction
`
`Third Edition
`
`GOOGLE Ex. 1037
`
`Google v. Philips
`
`GOOGLE Ex. 1037
`Google v. Philips
`
`

`
`
`
`1 =iu1tip1e—Wind0w Strategies
`
`g-.__1gl1 even the smallest window the eye can reach the most distant horizon.
`A. Bergman, Visual Realities, 1992
`
`‘II
`
`I
`
`IE-—
`
`
`
`.J=‘,1I.___:f_;]‘:T:1
`
`fffi
`A GLE Ex. 1037
`«n:r:r,;.;-. J. Qpogle v. Philips
`
`GOOGLE Ex. 1037
`Google v. Philips
`
`

`
`
`
`__
`
`j ' "
`
`‘
`
`.-_' _":
`f
`
`M
`
`13.1
`
`'- f
`
`‘I
`
`- i
`
`‘-
`
`Chapter 13
`13.1 Introduction
`13.2 Individual-Window Design
`13.3 Multiple-Window Design
`13.4 Coordination by Tightly-Coupled
`Windows
`13.5 Image Browsing by Tightly-Coupled
`Windows
`
`13.6 Personal Role Management and Elastic
`Windows
`13.7 Practitioner's Summary
`13.8 Researcher’s Agenda
`
`;=".'-r‘-.=
`
`_'_~. -
`
`Introduction
`
`The output of early computers was printed by Teletype on an ever-growing
`scroll of paper. As designers switched to displays, the need to go back was
`sometimes supported by electronic scrolling of the session. This technique is
`useful, but designers became aware of similar situations in which users have
`to jump around to related text or graphics. Programmers have to jump from
`procedural code to data declarations, or frmn proceciure invocations to pm‘
`cedure definitions. Authors of scientific papers jump from writing the text hi
`adding a bibliographic reference to reviewing einpirical. data to creating fig-
`ures to reading previous papers. Airline reservntionists jump from working
`on a client itinerary to reviewing schedules to choosing seat assignments.
`
`
`
`GOOGLE Ex. 1037
`
`Google v. Philips
`
`GOOGLE Ex. 1037
`Google v. Philips
`
`

`
`13.1
`
`Introduction
`
`445
`
`
`
`The general problern for many computer users is the need to consult mul-
`tiple sources rapidly, while minimally disrupting their concentration on their
`task. With large clesk— or wall-sized displays, many related documents can be
`displayed simultaneously, but visibility and eye—head movement might be a
`problem. With srnall displays, windows are usually too small to provide ade-
`quate information or context. In the middle ground, with 20-70 cm displays
`(approximately 640 X 480 to 2048 K 2048 pixels), it becomes a design chal-
`lenge to offer users sufficient information and flexibility to accomplish thei_r
`tasks while reducing window housekeeping actions, distracting clutter, and
`eye—h.ead movement. The animation characteristics,
`three-dimensional
`appearance, and graphic design play key roles in efficacy and acceptance
`(Gait, 1985; Kobara, 1991; Marcus, 1992).
`If users’ tasks are well understood and regular, then there is a good chance
`that an effective multiple—wind0w display strategy can be developed. The air-
`line reservationist might start a client—itinerary window, review flight seg-
`ments from a schedule window, and drag selected flight segments to the
`itineraly window. Windows labeied Seat: Selection or Food Prefer-
`ences might appear as needed, and then the charge-card information win-
`dow would appear to complete the transaction. When the sequence is varied
`and unpredictable, users will need to have more control of the layout and
`will need more training.
`Window housekeeping is an activity related to the interface and not directly
`related to the user's task. If window—housekeeping actions can be reduced,
`then users can complete their tasks more rapidly. In an empirical test with
`eight experienced users, the windowed version of a system produced longer
`task-completion times than did the nonwindowed (full~screen} envirorunent
`(Bury et al., 1985). Multiple smaller windows led to more time arranging
`information on the display and more scrolling activity to bring necessary
`information into view. However, after the time to arrange the display was
`eliminated, the task-solution times were shorter for the windowed environ-
`ment. Fewer errors were made in the windowed environment. These results
`suggest that there are advantages to using windows, but these advantages
`may be compromised unless effective window arrangement is provided.
`On small displays with poor resolution, opportunities for using multiple
`windows are limited because users are annoyed by frequent horizontal and
`vertical scrolling. With. meditlm-resolution displays and careful design, mul-
`tiple windows can be practical and esthelically pleasing. Window—border dec-
`orations can be made to be informative and useful. On larger, high—resolution
`displays, windows become still more attractive, but the manipulation of win-
`dows can remain as a distraction from the user's task. Opening windows,
`moving them around, changing their size, or closing them are the most com-
`mon operations supported (Card et al., 1984; Myers, 1988).
`The visual nature of window use has led many designers to apply a
`direct—manipulation strategy (see Chapter 6) to window actions. To stretch,
`
`
`
`._ QGLE Ex. 1037
`oogle v. Philips
`
`GOOGLE Ex. 1037
`Google v. Philips
`
`

`
`
`
`446
`
`'
`
`7..-A
`
`
`
`13 Multiple-Window Strategies
`
`
`
`move, and scroll a window, users cnii point at appropriate icons on the W.
`dow 1'.:o1'clei'a:1t| simply click on the mouse button (Billingsley, .l988; Kt-]t‘E1:'11‘I
`1991; Marcus 1992}. Since the dynamics of windows l‘IL‘lV{: a strong effect
`user perceptions, the nn_i1nations for transitions (zooming boxes, seqiieiigjrlrl
`c,-f repainting when a window is opened or closed, hlinl<ing outlines, W blight:
`lighting during dragging) must be designed carefully.
`'
`It is hard to trace the first explicit description of windows (I"l.OFIg(_)Od N a
`l.,
`1985}, although several sources credit Doug Engelhart with the invention 0;
`the mouse, windows, outlining, collaborative work, and liypertext as part Q].
`his pioneering NLS system during the mid-19605 (Engelbert, 1988). Mm.-ab]E.
`’
`overlapping windows appeared in the Smalltalk graphical environment (pi
`g.
`13.1) as it evolved in the '1 9705 at Xerox PARC, with co11t1'iL1uti.ons from Akm
`Kay, LanyTesler (1981), Daniel Iiigalls, and others. l_n 1981, the highly g;-aph_
`ical Xerox Star (Fig. 13.2) (Smith et .11., 1982; Johnson et 211., 1990) allowed up
`to six nonoverlapping windows (with limited size control and inoveincnt,
`but with no dragging of windows or icons) to cover the desktop, plI.tS._1nu]u_
`ple property sheets to overlay temporarily parts of the windows or desktop.
`Soon after, the Apple Lisa and, in 1984, the Apple Macintosh (see Fig. 1.1)
`made popular their style of GUI with overlapping windows (Apple, 1987)_
`
`
`
`
`System Browser
`; Sysr.em—Change..
`' Systern-Cornpile
`’
`
`System-F1e|=_-asing
`
`Files-Streams
`
`" Files-Abstract
`-' Fi
`
`
`
` spend: amount for: reason
`amount for the reason given, deerernenting the available
`
`4E-I3) Ernst:-3u::1'.
`
`Figure 13.1
`
`Many versions of Smalltalk were created in the 1970s, but the user interface is
`remembered for overlapping windows, a multipane hierarchical browser, window
`titles that stick out like tabs, pop-up menus for window actions, and an unorthodox
`scroll bar. (Courtesy of Parc Place Systems, Mountain View, CA.)
`
`GOOGLE Ex. 1037
`
`Google v. Philips
`
`GOOGLE Ex. 1037
`Google v. Philips
`
`

`
`13.1
`
`Introduction
`
`In: n n » - .1
`
`ruL(‘-mum
`
`
`
`.=.._.......a......
`
`i
`
` W.».....__.-..-—--__—,._,..,.......__
`
`Figure 13.2
`
`The Xerox 8010 Star. The Star played a leading role in popularizing high-resolution,
`WYSIWYG editing for document preparation in office environments. The Star sys-
`tem pioneered the use of the display screen as an electronic desktop, as well as com-
`mercially introducing the mouse, symbolic icons, multiple display windows, and a
`bitmapped display that showed graphics in detail. (Courtesy of Xerox Corp.,
`Rochester, N .Y.)
`
`Microsoft followed with the graphical MS Windows 1.0 (tiled windows) (Fig.
`13.3), 2.03 (Fig. 13.4), 3.0 (Fig. 13.5), and Windows 95 (Color Plate A1) for IBM
`PCS, while IBM offered OS/2.
`The notion of collections of windows assembled into rooms is an impor-
`tant step forward in matching window strategies to users’ tasks (Henderson
`and Card, 1986; Card and Henderson, 1987). Users can open and leave in one
`r00m a set of windows for reading electronic mail; another room might have
`a Set of windows for composing an article or a program. Rooms can be seen
`as 61 form of window macro that enables users to specify actions on several
`Windows at a time. Hewlett-Pacl<ard’s HP—VUE implements the rooms idea
`
`
`
`LE Ex 1037
`
`u ogle V. Philips
`
`GOOGLE Ex. 1037
`Google v. Philips
`
`

`
`
`
`Urite - (Untitled) £
`HS-D08 Executiue=':--
`
`
`'_l'-"1',.I1:_,.'§;_ii!;_..
`_' l;_h'aral_:ter-
`.l-'i1e' Di‘.-at
`sa'cia1._ -
`.'._-5.-..
`-
`
`J ‘m”’”'."d"“'d.
`I
`'.
`'
`,'-I ‘WE “El
`ISISBWIU
`5
`w,,,,,m,0",?.
`°’’
`'‘‘5’'"
`I lI:SEO|Jll[fl c wmm
`.¢. PIF
`Pnacrlctfiguc
`inac.IxI
`n£_nm£.n
`.
`-..
`
`"‘ ’cnLc.£xE
`HELIERSLEXE
`"*3 '
`
`
`, -
`EEm_lIa1endar' - (untitled)
`-==-===
`cnLErwnn.Ex£
`summon
`.. .
`.
`.
`
`
`
`'
`F112-.Ed1t-hen--_$Ijnv film
`[JnRDFILE.EXE
`scnxvmm
`
`
`
`"'5"-5 __.______cupnan.ExE s:=nuLEiI.ExE
`3=23 Pl11¢-1-Wednesday. Houenber 6. _ ELl]l2K.EXE
`rEmumL.£xE
`9;
`=+I CEIHIRIJLEXE
`IHSMLFH
`13:3: M
`II cnummnn
`msamrun
`-3- common
`um.cuu
` Eardfile - (untit1ed) ' DUTHISJXI
`UINJHI
`'
`-
`.
`-
`._ _ _-____:1
`|..'lHHlfl.BIH
`§FiIé'v_'
`|-
`Save f11e as:
`C:\HlNDllHS
`QJH
`llIH1flfl.|E3iUléflB
`1
`.——————j.—__
`=r|m
`mflmllfl
`.
`‘El;
`'__“““"'°_1.'
`_ _
`"<5
`umnL:mI=.m3n
`=
`..7
`éxs
`1JRiIE.El~:E
`
`‘cancel _
`
`
`
`..
`
`3‘.
`
`Figure 13.3
`
`Microsoft Windows 1.0, which permitted variable size / place / number and space-fill-
`ing tiling only. Dialog boxes could appear on top of the tiled windows. (Reprinted
`with permission from Microsoft Corporation, Redmond, WA.)
`
`as a set of workspaces that users can visit. Sun Microsystems offers virtual
`workspaces with an overview window to support navigation among clusters
`of windows. An effective historic overview of windowing strategies is avail-
`able in videotape form (Myers, 1990).
`Much progress has been made, but there is still an opportunity to reduce
`dramatically the housekeeping chores with individual windows and to pro-
`vide task—related multiple—window coordination. Innovative features, inven-
`tive borders or color combinations, individual tailoring, programmable
`actions, and cultural variations should be expected.
` __+
`
`13.2
`
`Individual-Window Design
`
`The MS Windows 3.0 User's Guide (1990) identifies a window as ”a rectangll‘
`lar area that contains a software application, or a document file. Windows
`can be opened and closed, resized and moved. You can open several of them
`
`
`
`GOOGLE Ex. 1037
`
`Google v. Philips
`
`13 Multiple-Window Strategies
`
`
`
`448
`
`
`
`_
`
`'
`
`-
`
`.
`
`.
`
`
`
`
`
`
`'
`
`EWITI
`
`
`
`
`
`
`
`
`GOOGLE Ex. 1037
`Google v. Philips
`
`

`
`
`
`___d
`
`— T
`
`13.2
`
`Individual-Window Design
`
`
`449
`
`
`__
`_
`Hie gin §per.i.a_l
`ng - '| l1:I'lS-DIJS 5 \H1H$'(S\HlH
`- PII
`IIUIPHIHI .|'XI
`IIPI NII'tf’l ..‘8'I'H
`nlH2.l>Ll
`DIllilIS.IX'l
`|lI'llIl|".S‘u'I'l
`
`IIPI l'|'n"l|llI .SVI1
`l2|'Ill‘..lXI
`IIEIIJILHIH
`
`'
`lZflllM)flR.lXl NH.UD.HlH
`l1|'IHDl Ill .lXl
`
`IINHI X .‘iYH
`Ill'S||fll'l
`.';VH
`|||’Sl'lNlI.KVH
`
`.PHI
`
`R!
`HI
`
`
`
`'
`
`'
`
`
`
`
`
`*"“.i
`_};.E Ex. 1037
`«
`Google V. Philips
`
`
`
`
`
`
`
`.
`
`.»
`
`its-mm.-.11.-:1 [run of Winnlnw.
`
`
`
`
`'.":;i..'.{.'a'ar"‘-"I..‘..:'{':"1';.':')m .
`[]pI ions
`1991
`
`
`flzilll RM ltrr-.||I.64-J5
`92ml
`Mt-vlinq uilh xu*..m
`1lI:ll|I
`
`11'.Ill|
`
`t’/iltll VII
`
`\:|1|I
`'.’
`IHI
`l
`|lII
`
`
`Figure 13.4
`pping windows.
`Microsoft Windows 2.0, which permitted arbitrary overla
`ation, Redmond, WA.)
`(Reprinted with permission from Microsoft Corpor
`
`on the desktop at the same time and you can shrink windows to icons or
`enlarge them to fill the entire desktop." Although some people might dis-
`agree‘ with aspects of this definition (for example, winclows are not always
`rectangular, and other window actions are possible), it is useful. Window
`interface objects include:
`° Titles Most windows have an identifying title at the top center, top
`left, or bottom center, or on a tab that extends from the window (Fig.
`13.6). Tabbed window titles can be helpful in locating a window on a
`cluttered desktop. To save window space, designers rnsy create some
`windows with no titles. Title bars may change t~.ii'l'c1Ci iiig or color to show
`which window is currently active {the active window is the one that
`receives keystrokes from the keyboard). When a window is closed, i.t
`may be represented as an icon, and it may show a title to its right,
`below it and centered, or below it and left justified. Other approaches
`show the titles in a pop—up menu list or as a tab sticking out of a pile of
`windows.
`
`
`
`
`
`GOOGLE Ex. 1037
`Google v. Philips
`
`

`
`450
`
`13 Multiple-Window Strategies
`
`
`
`
`
`FileMauger Conlro|Pane| PvinlManager
`
`I E
`
`(mph
`
`
`’ DOS Prompt Windows $etup
`
`E1
`
`_.....‘:x._
`
`
`
`F'u;n1bn:eh
`
`TF.I'rrIiI:nl
`
`
`
`pr’
`
`NDHQ pad
`
`E
`
`Colculatm
`
`I
`
`E
`
`Calculator
`
`
`ack .
`N
`"
`'3.‘“§'fi'
`{IE
`.
`...
`
`
`n~«rE1@ms=1
`
`
`‘Wnta
`@
`F‘|FEdi!u:
`
`Ha caudal
`
`Cmdinie
`
`L‘. nlandzu
`
`.2.
`auux
`
`—--
`
`..
`
`I
`
`..
`
`-«—.—.-..
`
`
`r,u..
`.
`_...
`--m.._._.
`—-—.=_..
`—---.m.....
`I MS
`l
`
`
` ..
`
`Figure 13.5
`
`Microsoft Windows 3.0 and 3.1x, which had higher—resolution displays and overlap-
`ping windows, and became enormously popular. (Reprinted with permission from
`Microsoft Corporation, Redmond, WA.)
`
`
`
`‘
`
`31111
`
`Figure 13.6
`Titles may be inside the window in Various locations, or protruding from it in vari-
`ous positions.
`
`GOOGLE Ex. 1037
`
`Google v. Philips
`
`
`
`GOOGLE Ex. 1037
`Google v. Philips
`
`

`
` 13.2
`
`Individual-Window Design
`
`451
`
`' Borders or fmmes The window border or frame may be one or more
`pixels thick to accommodate selection for resizing or to distinguish
`windows from the background. Several systems use three-dimensional
`lighting models and may show a shadow below each window. Three-
`dimensional buttons and icons on the borders have become popular.
`This three—dimensional effect is attractive to many users (although
`some users find it distracting), but it may also use precious pixels that
`could be devoted to window contents. Border thickness or color
`changes can be used to highlight the currently active window.
`Scroll bars Since a window may be small compared to its contents,
`some method for moving the window over the contents or moving the
`contents under the window is needed. The basic operation of a scroll
`bar is to move up or down and left or right, but many variations have
`been implemented. Small and large motions must be supported, incre-
`mental and destination actions are appreciated, and feedback is neces-
`saiy to help users formulate their plans (Fig. ‘l3.7a). Most scroll bars
`have some form of up and down arrows on which the user can click to
`produce a small motion, such as a single—line scroll. An important fea—
`ture is to permit smooth scrolling when the up or down arrow is
`selected continuously (for example, when the user holds down the
`
`EJEEEIEEIEEIEI-‘E
`
`ta)
`
`(hi
`
`is}
`
`{El}
`
`tel
`
`Figure 13.7
`
`Scroll bars showing existing and proposed features. (a) Page number in scroll box.
`(b) Proportional scroll box. (c) Selectable position markers. (d) Value bar showing
`sections. (c) Page bar with discrete positions.
`
`OOGLE EX. 1037
`
`" Google v. Philips
`
`GOOGLE Ex. 1037
`Google v. Philips
`
`

`
`
`
`452
`
`13 Multiple-Window Strategies
`
`mouse button). This strategy is preferable to repeated mouse clicks,
`which distract the user from reading the contents. Scrolling by a full
`window or page turning is often supported by clicks above or below
`the scroll box. Users can get to a specific destination in a document,
`such as the end, by dragging the scroll box to the desired destination,
`
`".F‘i-:
`
`_:='I'
`
`Feedback in scroll bars is important for ensuring confidence and Ct?I1'r(~);;{
`operations. An important approach uses proportional scroll boxes that indi.
`care what portion of the document is visible currently. Another appreciated
`feature displays a page number inside the scroll box, so that, as users drag
`the scroll box, they can see where they are in a docurnent (Fig. '1."-5.7b). If thé
`scroll bar is used on a list, such as alphabetically organized document names,
`then the scroll box can show the first letter of the names.
`There is room for irnprovement of scroll bars. For example, it rniglit be
`nice to mark a particular position and to see a small triangle on the scroll bar
`(Fig. l3.7c). Then, merely clicking on the triangle would. cause the scroll bar
`and the window’s contents to jump to that location. Scroll bars can contain
`document—vi.sualization tools (see Chapter 15) using techniques such as Ui'l'f't.'.['
`bars to show document section boundaries (Fig. 13.7d) (Chimera, 1992) and
`page liars to facilitate discrete page turning (Fig. '|3.7e).
`Scroll-bar arrows usually indicate the direction for inovenient of the win-
`dow, but they could also represent the direction of movement of the con-
`tents. An early study (Bury et al., 1982) showed that a majority of users
`thoughl that a down arrow meant that the window moved down to show
`later portions of a document, but many users are still confused and make
`errors. Recovery of errors is rapid, but creative designers might still pursue
`visual cues to give users a better indication of which motion will occur.
`Window interface actions include:
`
`0 Open action A window can be opened from its icon or text—menu list
`onto the display by a typed command, a menu selection, a voice com-
`mand, or a double clicl<.,The icons can be of varying size (.5 to 3 cm
`square) and labels can be placed in varying locations.
`
`icon
`t1t1e
`
`1
`_
`,
`icon tit e
`
`icon title
`
`icon title
`
`_
`
`Feedback during opening can vary from simply having the window
`a ppcar after the full display rep-aints, to blanking o.r blackening of thf!
`window destination followed by appearance of the window border and
`then the contents. Visually appealing animations are possible, such 85
`zoorn boxes (animated series of growing boxes emariating from the 1C0"
`
`
`.‘..J-_..‘,_
`
`
`
`-t5.4:-u_..a—._|....-..'.._p—'"I-
`
`
`
`Google v. Philips
`
`GOOGLE Ex. 1037
`
`GOOGLE Ex. 1037
`Google v. Philips
`
`

`
`13.2
`
`Individual-Window Design
`
`453
`
`display.
`
`growing into the window), zoom lines (streaks, dots, or other representa-
`tions of light going to the corners of the window), window-shade open-
`ing" (the window appears to pull down like a window shade), or
`three—clirnensional flips or spins from the icon to the full window (Silicon
`Graphics Iris). Open actions may have accompanying sounds.
`Open place and size A key determinant of the usability of window sys-
`tems is the choice of where the window opens. Most window systems
`support the most-recently-used place and size approach, which has a bet-
`ter chance to satisfy user needs than a fixed position. Often, the most effec-
`tive solution is to open the new window close to the current focus (icon,
`menu item, field, and so on) to limit eye rnotion, but far enough aw