Designing Visual Interfaces
`
`\
`
`CiT'iim unication
`Oriented
`Techniques
`
`<$>
`O
`
`Kevin MuJiet
`
`Darrell Sano
`
`Patent Owner Gree, Inc.
`Exhibit 2006
`
`

`

`Designing Visual Interfaces
`
`Communication
`Oriented
`Techniques
`
`Kevin Mullet
`Darrell Sano
`
`SunSoft Press
`A Prentice Hall Title
`
`Patent Owner Gree, Inc.
`Exhibit 2006
`
`

`

`r
`
`© 1995 Sun Microsystems, Inc.—
`Printed in the United States of America.
`2550 Garcia Avenue, Mountain View, California
`94043-1100 U.S.A.
`All rights reserved. This book is protected by copyright and distributed under licenses
`copying, distribution, and decompilation. No part of this book may
`restricting its use,
`written authorization of Sun
`be reproduced in any form by any means without prior
`and its licensors, if any.
`RESTRICTED RIGHTS LEGEND
`Use, duplication, or disclosure by the United States Government is subject to the
`restrictions set forth in DFARS 252.227-7013 (c)(l)(ii) and FAR 52.227-19.
`
`TRADEMARKS
`are
`Sun, the Sun logo, Sun Microsystems, SunOS, Open Windows and NeWS
`trademarks or registered trademarks of Sun Microsystems, Inc. in the U.S. and certain
`other countries. UNIX is a registered trademark in the United States and other
`exclusively licensed through X/Open Company, Ltd. OPEN LOOK® is a
`countries
`gistered trademark of Novell, Inc. All other product names mentioned herein are the
`re
`trademarks of their respective owners and are listed under the Acknowledgments.
`The publisher offers discounts on this book when ordered in bulk quantities.
`For more information, contact:
`Corporate Sales Department
`Prentice Hall PTR
`113 Sylvan Avenue
`Englewood Cliffs, NJ 07632
`Phone; 800-382-3419 or 201-592-2863
`Fax; 201-592-2249
`E-mail: dan„rush@prenhall.com
`CREDITS
`Editorial/production supervision: Lisa larkowski
`Manufacturing manager: Alexis R. Heydt
`Acquisitions editor: Phyllis Eve Bregman
`Cover designer; Jean Orlebeke
`Printed in the United States of America.
`109876543
`ISBN 0-13-303389-9
`
`SunSoft Press
`A Prentice Hall Title
`
`Patent Owner Gree, Inc.
`Exhibit 2006
`
`

`

`Table of Contents
`
`\
`
`V
`
`1
`
`2 7 89
`
`12
`14
`
`17
`
`19
`20
`23
`26
`
`29
`29
`30
`31
`32
`33
`34
`
`Table of Contents
`
`Foreword: Jakob Nielsen
`
`Preface
`
`Introduction..............................................................................
`The Mess We're In ...........................................................
`What Visual Designers Do..................................................
`Art and Design...................................................................
`Functional vs, Aesthetic Concerns.....................................
`Form, Function, and the Question of a Universal Aesthetic
`Design and Rationality.......................................................
`
`Elegance and Simplicity
`
`Principles .......
`Unity.........
`Refinement
`Fitness......
`
`Common Errors ................................................
`Clutter and Visual Noise ..............................
`Interference Between Competing Elements
`Using Explicit Structure as a Crutch............
`Belaboring the Obvious...............................
`Overly Literal Translation..............................
`Excessive Detail and Embellishment .........
`
`Patent Owner Gree, Inc.
`Exhibit 2006
`
`

`

`......Grafuitous'DiiTi'ensionality’.....
`All of the Above ....................
`Techniques ...............................................................
`Reducing a Design to Its Essence ...................
`Regularizing the Elements of a Design ............
`Combining Elements for Maximum Leverage .
`
`Scale, Contrast, and Proportion
`Background: Visual Variables ...
`
`Principles ....
`Clarity ....
`Harmony
`Activity ..
`Restraint
`
`Common Errors...............
`Insufficient Coritrast .,
`Excessive Contrast ....
`Visual interference.....
`Spatial Tension...........
`Overextension ...........
`Awkward Dimensions.
`
`Techniques ....................................
`The Squint Test.......................
`Establishing Perceptual Layers
`Sharpening Visual Distinctions
`Integrating Figure and Ground
`
`Organization and Visual Structure ...
`Background: Perceptual Organization
`
`Principles........
`Grouping ....
`Hierarchy ....
`Relationship
`Balance .....
`
`Common Errors.................
`Haphazard Layout .......
`Conflicting Symmetries
`
`IV
`
`Table of Contents
`
`.'v
`
`3 b
`36
`
`37
`38
`... 42
`46
`
`51
`54
`
`57
`.... 58
`61
`. 64
`66
`
`69
`69
`70
`71
`72
`73
`74
`
`75
`75.
`76
`80
`84
`
`89
`91
`
`93
`94
`97
`99
`102
`
`105
`106
`106
`
`Patent Owner Gree, Inc.
`Exhibit 2006
`
`

`

`Ambiguous Internal Relationships............
`Aligning Labels but not Controls .............
`Alignment Within but not Across Controls
`False Structure ........................................
`Excessive Display Density.......................
`All of the Above.......................................
`
`Techniques..................................................................
`Using Symmetry to Ensure Balance.....................
`Using Alignment to Establish Visual Relationships
`Optical Adjustment for Human Vision..................
`Shaping the Display with Negative Space............
`
`Module and Program ....................
`Background: Grid-Based Design
`
`Principles ........................
`Focus .........................
`Flexibility...................
`Consistent Application
`
`Common Errors ....................................
`Arbitrary Component Positions
`Arbitrary Component Dimensions ...
`Random Window Sizes and Layouts
`Unrelated Icon Sizes and Imagery ...
`Inconsistent Control Presentations .
`Inconsistent Visual Language.........
`
`Techniques...................................................
`Reinforcing Structure through Repetition
`Establishing Modular Units............. ......
`Creating Grid-Based Layout Programs ...
`
`image and Representation
`Background; Semiotics ..
`
`Principles .............
`Immediacy......
`Generality .......
`Cohesiveness ..
`Characterization
`
`107
`108
`109
`110
`111
`112
`
`113
`114
`118
`122
`126
`
`131
`133
`
`137
`138
`141
`144
`
`147
`147
`148
`149
`150
`151
`152
`
`153
`154
`158
`162
`
`169
`171
`
`175
`176
`179
`182
`185
`
`Table of Contents
`
`v
`
`Patent Owner Gree, Inc.
`Exhibit 2006
`
`

`

`i
`
`Communicability
`
`Common Errors....................................
`Misleading Syntax ...........................
`Poorly Integrated Structure ............
`Dominant Secondary Elements ......
`Using Type as Image......................
`Using Images for Abstract Concepts
`Images Based on Obscure Allusions
`Culture or Language Dependencies
`Offensive or Suggestive Imagery....
`
`Techniques.........................................................
`Selecting the Right Vehicle..........................
`Refinement through Progressive Abstraction
`Coordination to Ensure Visual Consistency ...
`
`So What About Style?
`
`Principles.....................
`Distinctiveness ......
`Integrity .................
`Comprehensiveness
`Appropriateness.....
`
`Common Errors...................................
`Unwarranted Innovation ...............
`Combining Unrelated Elements....
`Partial Fulfillment...........................
`Internal and External Inconsistency
`Incompatible Concepts.................
`
`Techniques....................... .............. .
`Mastering the Style ...................
`Working Across Styles ..............
`Extending and Evolving the Style
`
`Conclusion
`
`Further Information
`About the Authors
`Bibliography ...........
`Index...........................
`
`VI
`
`Table of Contents
`
`191
`191
`. 192
`193
`194
`195
`196
`197
`198
`
`199
`200
`204
`208
`
`213
`
`215
`216
`. 218
`221
`224
`
`227
`227
`228
`229
`230
`232
`
`233
`234
`238
`242
`
`247
`
`249
`253
`255
`269
`
`Patent Owner Gree, Inc.
`Exhibit 2006
`
`

`

`Foreword
`
`I recently tried out a spreadsheet package that was installed on the corpo­
`rate-wide computer net accessible through my workstation. Immediately
`after firing it up, I was struck by its primitive visual appearance. It spoke
`“stone-age design” and I simply couldn’t get myself to use that ugly-Iooking
`a program. Admittedly, I was in a somewhat unusual situation since I had
`just started using a networked computer with access to a myriad of different
`software that had already been installed. If I had bought the package myself
`as part of a small set of tools, I would obviously had invested more time in
`exploring its possible hidden charms.
`
`As software gets closer to achieving commodity status, users can be expected
`to make very rapid choices between the huge number of offerings available
`on the net, and just as I did, they will immediately discard any interface that
`looks boring, obsolete, or too confusing. Think of home users flipping
`through 500 channels of cable TV and then multiply by a factor of several
`thousands to match the smorgasbord of options on the Internet, commercial
`subscription services, and major corporate nets. Alternatively, to mention a
`current commercial product, think of Apple’s Software Dispatch CD-ROM,
`which is distributed to large numbers of home computer owners with demo
`copies of 75 applications: Each of these applications would at be,st have a
`minute or two in which to seduce the customer. Intuitive appeal will thus be
`essential for the survival of software products in the future. In fact, we may
`
`Foreword
`
`VII
`
`Patent Owner Gree, Inc.
`Exhibit 2006
`
`

`

`talk about software as “products” any more if the model turns out
`not even
`to be more that of service provision through subscription and browsing.
`
`Graphic design is the first and the last part of the user interface observed by
`the user. Immediately when novice users start up a new software package
`they are confronted by its visual design and the possibility of a profusion of
`icons, windows, panes, and dialog boxes. Even after having graduated to
`the expert user stage, people still have to look at the icons and other visual
`design elements of their favorite software every day. Would you want to live
`in a house where the bedroom was painted in an ugly combination of
`brown and purple? Probably not, but you may spend more time looking at
`the visual interface elements of your favorite software than you do looking
`at your bedroom walls.
`
`In the bedroom wall example, people might buy the house anyway and then
`to
`paint over the wall with a more agreeable color. This example leads me
`consider an excuse some developers have for not providing a satisfactory
`visual interface to their products: “the user can just customize the design to
`his or her individual taste!” Leaving the design to the users is the ultimate
`abdication of the designer’s responsibility to provide a quality product, and
`studies have shown that users are in fact very poor designers and
`many
`often customize their interface in ways that are detrimental to their produc­
`tivity (e.g., by using color combinations that are known to cause reduced
`readability of screen text). Even though there are often reasons to allow
`users to customize some aspects of their environment, it is absolutely essen­
`tial for the designer to give the users a carefully thought-out set of defaults
`start out with. Also, users will be much more likely to end up with an
`to
`some pre-specified (and
`appropriate customized design if they are given
`well-designed) options to chose from as done, for example, m the
`Pantone®ColorUP™ set of recommended color combinations for presenta­
`tion slides.
`
`This book gives many systematic steps one can go through to improve the
`visual design characteristics of an interface. Mullet and Sano succeed in
`demonstrating that graphic design is not a black art but a very engineering­
`like discipline with its own rules. Also, just as in other types of engineering,
`the rules sometimes conflict and one has to make appropriate trade-offs to
`arrive at the design that best satisfies the needs at hand. One thing I partic­
`ularly like about this book is that it makes it clear that graphic design in the
`
`Vil!
`
`Foreword
`
`Patent Owner Gree, Inc.
`Exhibit 2006
`
`

`

`: interface business is not just a matter of aesthetics. There is much more
`user
`stake than, simply pretty pictures, and good graphic design can signifi­
`at
`cantly improve the communicative value of the interface, leading to
`increased usability.
`
`System usability has many components, including ease of learning, efficiency
`of use, memorability, reduced number of user errors, and subjective satisfac­
`tion. Good graphic design can improve all these quality attributes, though of
`course graphic design is only one element of overall user interface design,
`and one should employ systematic usability engineering methods in addition
`the principles of graphic design discussed in this book.
`to
`
`It is amazing how much software gets released with horrible inteifaces
`because the developers did not bother to apply a few simple giaphic design
`saw a
`principles like those explained in this book. For example, I recently
`system where the concept of a “queue” was represented by an icon of a bil­
`liard ball (“cue ball,” get it?). Such visual puns may be fun to throw around
`design session but they are often detrimental to the novice user trying to
`in a
`make sense of a new visual environment. Also, of course, this product would
`be dead on arrival if it was ever exported to a non-English speaking country.
`
`There is no substitute for having “real” graphic designers involved from the
`beginning m the design of any important interface with major visual ele-
`. Given this fact, other user interface professionals are still often called
`ments
`upon to get involved in graphic design. This book makes it possible for the
`larger community of interface designers to improve their graphic design
`skills and understanding of graphic design concepts. Not only will this
`enable them to communicate better with their visually trained colleagues on
`interdisciplinary teams, but it will also enable them to do some designs on
`their own. Face it, we will never bring in enough professional graphic
`designers to fine tune every last dialog box in all the interfaces m the world,
`but at least there is no excuse any longer for leaving those dialog boxes to
`the tender mercies of people with zero understanding of graphic design.
`
`Jakob Nielsen,
`Mountain View, California
`May 1994
`
`Foreword
`
`Patent Owner Gree, Inc.
`Exhibit 2006
`
`

`

`
`
`
`
`
`
`Patent Owner Gree, Inc.
`
`Exhi
`
`it 2006
`
`Patent Owner Gree, Inc.
`Exhibit 2006
`
`

`

`Preface
`
`To design is to plan, to order, to relate, and to control. In short, it
`opposes all means of disorder and accident.
`Emil Ruder
`Typography
`
`This book describes a set of fundamental techniques used routinely by prac­
`titioners of communication-oriented visual design. With a little practice,
`these techniques can be applied by anyone to enhance the visual quality of
`graphical user interfaces, data displays, and multimedia documents. Because
`all graphical user interfaces (GUI’s) are communication systems, their design
`should be held to the same standards of functional and aesthetic relevance
`that have evolved over the centuries for traditional print media. While the
`electronic media differ greatly from print in many important ways
`new
`- they are inherently dynamic, for example, and their raster displays provide
`lower resolution but greater freedom to manipulate color and contrast -
`there is nevertheless a significant static component to all interactive displays,
`and much of the knowledge gained from centuries of print design is directly
`applicable within this domain. Our focus is on optimizing the static displays
`that provide the building blocks for any dynamic, interactive system.
`
`The approach we describe has its roots in the rational, functional aesthetic
`seen in modern graphic design, industrial design, and architecture. We
`believe that the orientation, process, and training of these visual design dis­
`ciplines are especially well-suited to the problems of visual interface design.
`Unfortunately, the typical software developer, development manager, or
`human factors engineer receives little or no formal training in these areas.
`Designing Visual Interfaces attempts to address this problem by describing a
`number of important design rules and techniques internalized by every
`
`Preface
`
`Patent Owner Gree, Inc.
`Exhibit 2006
`
`

`

`visual designer through coursework and studio experience. While we don’t
`mean to imply that readers of this book will be instantly transformed into
`believe there are neverthe-
`expert (or even proficient) visual designers, we
`less valuable insights that can be exploited with minimal training in a few
`basic “tricks of the trade.” Although mastery of these techniques depends
`heightened sensitivity born of extensive practice, the guiding princi-
`on a
`pies are not overly difficult to understand and most can be applied immedi­
`ately - even imperfectly - to produce noticeable improvements in real-
`world product development.
`
`This book is a direct outgrowth of a tutorial {Applying Visual Design:
`Trade Secrets for Elegant Interfaces) we have presented at various profes­
`sional conferences (the X Technical Conference, INTERCHI‘93, and CHI 94,
`among others) over the past several years. Feedback from tutorial attend-
`confirms that practical applicability is a reasonable claim. Numerous
`ees
`non-designers have credited the tutorial with stimulating their interest in
`further study as well as their successful application of the techniques we
`describe to produce a visible impact on their user interface designs. While
`we do not mean to suggest that professional design talent is unnecessary,
`we would be delighted to see the book fill precisely this role. In addition,
`have been particularly surprised and pleased with the positive response
`we
`from graphic designers who have taken the tutorial. We welcome this
`endorsement of communication-oriented design principles and we hope
`that graphic designers will find the book equally stimulating.
`
`The basic plan of the course is reflected in the arrangement of chapters in
`the book, the choice and structuring of the examples, and the presentation
`of the techniques themselves. Because the typical reader is engaged in com­
`mercial product development, we strive to keep the focus on visual phe­
`nomena as they are manifested in current software products. Instead of the
`usual organization (e.g., color, typography, layout) seen in the typical aca­
`demic design curriculum, we present our topics in an order that relates
`them to the specific problems of GUI design. Following the Introduction, in
`which we characterize the discipline of visual design and qualify our own
`particular niche within it, we present six chapters addressing the major
`visual concerns in present-day GUI’s: Elegance and Simplicity addresses
`poorly scoped or overly complex designs; Scale, Contrast, and Proportion
`describes ways to establish clear yet harmonious contrasts within a compo­
`sition or coding system; Organization and Visual Structure explains how
`
`XII
`
`Preface
`
`Patent Owner Gree, Inc.
`Exhibit 2006
`
`

`

`exploit characteristics of human perception to structure displays more
`to
`effectively; Module and Program describes how to extend the structure of
`individual display to produce a unified system spanning many displays;
`an
`Image and Representation provides guidance on the production and effec­
`tive use of abstract and concrete imagery; and finally, So What About Style?
`considers common GUI standards and cross-platform design issues. Each
`chapter begins with an overview of several important Principles governing
`the phenomena in question and concludes with a description and step-by-
`step summary of three or four practical Techniques relating to the phenom-
`just described. Marking the boundary between these discussions in each
`ena
`chapter is a catalog of Common Errors drawn from existing GUI applica­
`tions and environments to illustrate problems to avoid.
`
`Designing Visual Interfaces will be useful to anyone responsible for design­
`ing, specifying, implementing, documenting, or managing the visual appear­
`ance of any form of computer-based information display. Software
`engineers and development managers, in particular, are our primary audi­
`ence, both because these groups may have little exposure to the ideas we
`present and because successful interface design is impossible without their
`active participation and support. Readers from the psychological and
`human factors communities should be more familiar with the principles and
`effects we describe, but visual design - particularly its aesthetic component
`- will still be unfamiliar territory for most. Practicing graphic designers will
`be familiar with most of the techniques we describe, but they too should
`find the application to interface design both interesting and informative. We
`hope every reader will gain a new perspective on product development as
`well as an appreciation for the contribution visual design can offer their
`products and users. Whether you’re doing the work yourself, participating
`in a design team, or directing the work of others, this book should help you
`understand your communication problem, establish reasonable design
`goals, and evaluate your progress toward them.
`
`The principles we describe - and the examples we present - are truly generic
`in that they are equally applicable to any of the existing GUI standards.
`While the implementation of a particular design goal may vary from widget
`set to widget set, the principles of effective visual communication do not.
`Many of our examples happen to have been drawn from the OPEN LOOK
`GUI-an open GUI standard found primarily in UNIX environments-which
`be unfamiliar to some readers. There are two reasons for this. First, as
`may
`
`Preface
`
`xm
`
`Patent Owner Gree, Inc.
`Exhibit 2006
`
`

`

`employees of Sun Microsystems, much of our own work has been in OPEN
`LOOK during the past several years, so examples of both good and bad
`design were readily at hand. More importantly, OPEN LOOK remains the
`ly GUI standard attempting to address-however imperfectly-many of the
`on
`communication oriented principles we describe, so it is in many cases the
`only available example of a particular design goal. To learn more about
`OPEN LOOK, see the Functional Specification (Sun, 1989) and Application
`Style Guide (Sun, 1990).
`
`Like any large project, Designing Visual Interfaces would not have been
`possible without the cooperation and support of many individuals and
`organizations. We are deeply indebted to all those who offered their time,
`their material, or simply their advice and encouragement during the devel­
`opment of the project. Without their help this book would not have been
`possible. In addition to the many we cannot thank individually, we would
`like to explicitly acknowledge the following friends, as.sociates, and col­
`leagues for their generous contributions.
`
`For help in selecting examples of good design and/or permission to
`thank; Deirdre Quinn, Melinda
`we
`reproduce copyrighted work
`Maniscalo, Neil Shakery, and Sarah Haun at Pentagram; Erik
`Spiekermann, Terry Irwin, and Bill Hill at MetaDesign, Mark Johnson,
`and Mark Goldberg at The Understanding Business; Peter Spreenburg at
`IDEO; Stephanie Harwood at Clement Mok designs, Inc,; Craig Syverson
`and Julian Schmidt at frogdesign; Josef Miiller-Brockmann; Annin and
`Dorthea Hofmann; Rudi Ruegg; Paul Rand; Inge Druckrey; Phillip Meggs;
`I.inda Meyers at the Division of Publications, US National Park Service;
`Martin Fox at RC Publications, Inc.; Lynn Briber at Michael Graves
`Architects; Eric P. Chan and Jeff Miller at ECCO Design, Amy Edelson at
`Swatch US; Audrey Hirschfeld at Sony, Bob Panzer at VAGA, Professor
`Emeritus Shozo Sato, Northern California Center for Japanese Art and
`Aesthetic,s and the University of Illinoi.s at Urbana-Champaign.
`
`For artwork and examples from various hardware and software products,
`thank: Debra Coeiho at Sun Microsystems Computer Corporation,
`we
`Tony Floeber at Go Corporation; Lorraine Aochi at Apple Computer, Inc.;
`Heidi Bollan. at NeXT Computer; Steve Anderson at Hewlett-Packard,
`Todd Fearn at Visual Cybernetics, Gabriella Pacini of Regis Mackenna,
`and Alesha Marie Guyot of Sunnyvale, California,
`
`XIV
`
`Preface
`
`Patent Owner Gree, Inc.
`Exhibit 2006
`
`

`

`Many people provided helpful comments on earlier drafts. We are especially
`grateful for comments, suggestions, and insight provided by Diane Schiano,
`Mihai Nadin, Rob Mori, Jay Guyot, Jarrett Rosenberg, Sean Curry, Jakob
`Nielsen, Rolf Molich, and Stacey Ashlund.
`
`Phyllis Bregman at Prentice-Hall and Karin Ellison at SunSoft Press showed
`patience and encouragement throughout the often arduous publication
`process. Management support from Bob Glass and Rick Levenson in
`SunSoft and from Nancy Yavne and Kevin Whiting in SunPro was also
`invaluable.
`
`Finally, we extend our special thanks to Jakob Nielsen for the Foreword and
`to Jean Orlebeck for the cover design.
`
`Preface
`
`XV
`
`Patent Owner Gree, Inc.
`Exhibit 2006
`
`

`

`Introduction
`
`1
`
`To design is much more than simply to assemble, to order, or even
`to edit: it is to add value and meaning, to illuminate, to simplify, to
`clarify, to modify, to dignify, to dramatize, to persuade, and perhaps
`even to amuse.
`Paul Rand,
`Design, Form, and Chaos
`
`This book is about visual design for graphical user interfaces. We have found
`the orientation, process, and training of the visual design disciplines to be
`especially well-suited to the problems of graphical user interface (GUI)
`design. When we speak of the visual design disciplines, we include communi­
`cation-oriented graphic design (often described as visual communication
`design), industrial design, and architecture (including interior space design).
`These are the professions concerned most directly with the user’s experience
`of a form in the context of a specific task or problem, as opposed to its func­
`tional or aesthetic qualities in isolation. Other visual disciplines - such as
`painting, sculpture, illustration, filmmaking, or photography - while they
`have much in common with the visual design disciplines, typically adopt a
`more specialized focus or a less applied orientation. Other design disciplines
`- including most branches of engineering - also have substantial overlap,
`particularly in process and methodology, but they tend to focus largely or
`even exclusively on functional issues, often at the expense of aesthetics.
`Visual design attempts to solve communication problems in a way that is at
`once functionally effective and aesthetically pleasing.
`
`By communication, we mean the full process by which the behavior of one
`goal-seeking entity comes to be affected by that of another through the recip­
`rocal exchange of messages or signs over some mediating physical channel.
`Research in communication theory (see Cherry, 1978) has investigated the
`statistical properties of communication channels, the structure of language
`
`Introduction
`
`1
`
`Patent Owner Gree, Inc.
`Exhibit 2006
`
`

`

`The Mess We're In
`
`, the psychological and social characteristics of message senders and
`systems
`receivers, and the effectiveness of various coding techniques. All of these fac­
`tors must be considered in communication-oriented design. Even more fun­
`damental is the field of semiotics - the general theory and practice of signs
`briefly in Chapter Six. The
`(Peirce, 1931, Morris, 1938) - which we review
`1 of communication-oriented design is to develop a message that can be
`goa
`ately transmitted and correctly interpreted, and which will produce the
`accur
`desired behavioral outcome after it has been understood by its recipient.
`
`We refer frequently to visual language, by which we mean the visual charac­
`teristics (shape, size, position, orientation, color, texture, etc.) of a particular
`of design elements (point, line, plane, volume, etc.) and the way they are
`set
`related to one another (balance, rhythm, structure, proportion, etc.) in solv-
`particular communication problem. Any language system defines both
`mg a _
`a universe of possible signs and a set of rules for using them. Every visual
`language thus has a formal vocabulary containing the basic design elements
`from which higher-level representations are assembled, and a visual syntax
`describing how elements may be combined within that system. We will re­
`turn to these topics shortly, but first we must review the state of the art.
`
`With a few notable exceptions, present-day GUI applications leave much to
`be desired from a communication standpoint. The arrival of GUI technology
`has opened up new degrees of freedom in the use of color, typography, and
`. Most of the world’s character-based applications are rapidly being
`imagery
`ported to Microsoft® Windows™ (hereafter denoted simply as Windows),
`the Macintosh, or OSF/Motif (a GUI for UNIX workstations). The results are
`reminiscent of the early days of desktop publishing, when computers first
`gave people without the appropriate background and skills the mechanical
`
`m
`
`a
`
`Si■
`
`Mjidlr -
`tA-'fmi
`
`UMO't.
`ilTtlVlht.
`
`1: Imagery that distracts, confuses, or simply bewilders the uninitiated user is all too common in the
`current generation of graphical applications. (Palettes from Builder Xcessory by ICS.)
`
`2
`
`introduction
`
`Patent Owner Gree, Inc.
`Exhibit 2006
`
`

`

`Strokes
`
`■%
`
`16
`Density; 50 Sr
`0 Random Layering
`O Ordered Layering
`O Paint Layering
`I Randomize ] t
`
`TOOL$
`
`I Load... I
`Brush: Standard Stroke- Wide
`— Positioning------------——
`Horizontal Uariation: &
`Uerticai Uariation:
`50 Or
`
`-Saued Styles:-
`Styie: [Default
`Sa»e ] [saue fls.,.]
`
`[ Preuieiu ](Mem...]
`[ Cancel ] |flpplyjj
`
`(liemoue..,)
`
`2: Non-standard graphical elements intended to differentiate an application from
`its competition undermine the opportunity for transfer of learning offered by the
`GUI environment. Do you want users thinking about fbe/rwork or your sliders?
`
`capacity to produce “realistic” printed materials. While the technical level of
`production was indeed impressive, the aesthetic quality left much to be
`desired simply because powerful tools had been placed in the hands of peo­
`ple without the training needed to use them correctly. Today’s GUI applica­
`tions suffer from exactly the same problem, as shown in Figures 1-4.
`
`The public is more familiar with bad design than good design. It is,
`in effect, conditioned to prefer bad design, because that is what it
`lives with. The new becomes threatening, the old reassuring.
`Paul Rand
`Design, Form, and Chaos
`
`Ironically, given the graphical nature of the GUI revolution, imagery is one of
`the biggest problems. The Windows user, in particular, has been “blessed”
`with a hieroglyphic outpouring of tool bars, icon bars, button bars, help
`bars, QuickAccess bars, SpeedBars, and Smarticons. The vast array of icons
`needed to satisfy this burgeoning demand (it is now customary to provide a
`configurable toolbar with an icon for each function in one’s application)
`combined with the need to support low-resolution 16-color displays has led
`to an astonishing proliferation of low-quality images (1, see also 212-218,
`Note: our convention is to cite figures parenthetically by number only, with
`multi-part examples labeled from left to right: (a), (b), (c), etc.) that sacrifice
`
`Introduction
`
`3
`
`Patent Owner Gree, Inc.
`Exhibit 2006
`
`

`

`(
`[ Nem... J
`list:| DragirDrop images
`
`(i) Open ALL
`O Require
`
`□ Don't go into subfolders
`
`I Batch Saue mSSSmmssm
`“ifFor each image in List
`• Do Script: NOTHING
`Pause foTTseconds
`• Display:
`I Ruto Naming Options... ]
`• Saue:
`(S) To: fS6t...)Scanirni'f :Uti1s :D*Bab.eliz«-;
`OTo; Folder image came from
`OTo: Manually select
`▼ I normal
`PICT2
`Type:
`fluto set
`'25i)
`Colors:
`g! Uerify replace
`_____
`□ (Slice... I
`□ Picture Preuieiii Ql
`□ 1
`□ Picture Icon
`El Bypass marning messages
`□ Hit OK in unattended dialogs
`it mith settings I [Help ■■
`DO IT
`
`3: Reducing the number of dialog boxes may improve the organization of your application, but there
`will be little net benefit to the user if the dialogs are this crowded and disorganized as a result.
`
`valuable communication bandwidth in a welbintentioned pursuit of graphi­
`cal glitz and “fun.” Unfortunately, many of these images are so poorly
`designed as to be practically unintelligible, even when (as is rarely the case)
`even within) applications.
`there is some degree of consistency across (or
`
`well designed and fairly well standardized environment such as the
`Biven in a
`Macintosh desktop, it has proven difficult to stem the tide of application-
`specific styles, arbitrary mappings, and idiosyncratic imagery (2). Flexible
`authoring environments such as HyperCard extend the “naive desktop pub­
`lisher” phenomenon to the design of even the GUI primitives themselves. The
`situation isn’t much better in the Windows world, where at least four major
`“house styles” are now evident among main