Designing Visual Interfaces Communication Oriented Techniques Kevin Mullet Darrell Sano SunSoft Press A Prentice Hall Title© 1995 Sun Microsystems, Ine. — Printed in the United States of America. 2550 Garcia Avenue, Mountain View, California 94043-1100 US.A. All sights reserved. This book is protected by copyright and distributed under licenses restricting its use, copying, distribution, and decompilation. No part of this book may be reproduced in any form by any means without prior written authorization of Sun 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)(1)(ii) and FAR $2.227-19, TRADEMARKS Sun, the Sun logo, Sun Microsystems, SunOS, OpenWindows and NeWS are 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 countries exclusively licensed through X/Open Company, Ltd. OPEN LOOK® is a registered trademark of Novell, Inc. All other product names mentioned herein are the 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 Upper Saddle River, NJ 07458 Phone: 800-382-3419 or 201-582-2863, Fax: 201-592-2249 E-mail: dan_rash@[Link] CREDITS Editorial/production supervision: Lisa larkowski Manufacturing manager: Alexis R. Heydt Acquisitions editor: Phyllis Eve Bregman Cover designer: Jeart Orlebeke Text printed the United States at Offset Paperback Manufactures in Lafin, Pennsylvania. Printing 18 October, 2006, ISBN 0-13-303389-9 ‘SunSoft Press ‘AProntice Hall TieTable of Contents Introduction The Mass We'e In ‘What Visual Designers 00 Artand Design Functional vs. Aesthetic Conceins Form, Funetion, and the Question of Universal Aesthetic Design and ationalty Elegance and Simplicity Princiies nity Refinement commen Enors Clutter and Visual Nowe interference Between Compating lernents Using Explicit Structure asa Crutch Belabocng the Obvious (Overy Lira Translation, Excessive Detail end Embalishment Table of Contents 2 29 30 3 32 EsGratuitous Dimensionaty 3 Ail ofthe Above os 6 Techniques a Reducing a Design tts Essence 38 Feguarzing the Elements of a Design a Combining Elerents for Maximum Leverage 46 Scale, Contrast, and Proportion Background: Visual Variables Principes 7 Carty 58 Harmony 8 ‘Activity we Restraint 8 Common Erors . 69 Insutficiont Contrast 8 Excessive Contrast 70 Visual interference n Spatial Tension : 2 Overextension 3 ‘Awhward Dimensions 4 Techniques 6 ‘The Sauint Test 6 Establishing Perceptual Layers 6 Sharpening Visual Distinctions 80 Integrating Figure and Ground a Organization and Visual Structure .. cy Background: Perceptual Organization a Principles 98 Grouping 9 Hierarchy : 9 Relationship 99 Balance 102 Common Ears 105 Haphazard Layout 105, Contcting Symmetries 108, 'v Table of ContentsAmbiguous intemal Relationshins 107 Aligning Labels but rt Controls 108 Alignment Within but not Across Controls 109 Folge Svucture 10 Excossve Display Density m Al ofthe Above a2 Techniques 19 Using Symmetry to Ensure Balance 4 Using Alignment ro Establish Visual Relationships 18 ‘Optical Adjustment for Human Vision 122 SSaping the Display with Negative Space 126 Module and Program wt Background: Grid Based Design 133 Principles 137 Focus 138, Frexiity 141 Consistent Application vas commen Ears “7 Arcivary Component Posivons: 7 ‘Abitrary Component Dimensions, 148 Fandom Window Sizes end Layouts 149 Unrelated Icon Sizes anc imagery 180 Inconsistent Control Presentations 181 Inconsistent Visual Language 182 Techniques 152 Reinforcing Structure through Repetition 154 Establishing Modular Units 158 Creating Grid Based Layout Programs 162 Image and Representation Background: Semiotics m Princes 5 Irnmeiacy 176 Generaty 179 Coheswveness v2 CCharscteraation 185 Table of ContentsCommuricabilty 168 Common Erors 191 Mistoacng Syntax 191 Poorly Integrated Structure 12 Dominant Secondary Elements 198 Using Type as image 194 Using Images for Abstract Concepts 198 Images Based on Obscure Alusions 196 Culture or Language Dependencies 7 Offensive or Suggestive imagery 198 Techniques : 199 Selacting the Right Vehicle 200 Refinement through Progressive Abstrsction 208 Coordination to Ensure Visual Consistency 208 ‘So What About Stylo? .. Princites 25 Distnctiveness 216 Itearity 28 Comprenensiveness 2a Appropriateness 228 ‘commen Enors a Unwarranted Innovation 2 Combining Uncelatod Elements 228 Peril Futilment 229 Internal and Extemal Inconsistency 230 Incompatible Concepts 232 Techniques 238 ‘Mastering the Sivie ne Working Across Stvies 238 Extending and Evolving the Ste 202 Conchision sane 247 Further Information About the Authors Table of Contents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-looking, 1 program, Admittedly, I was in a somewhat unusual situation since [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 fon 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 ar best have a ‘minute oF two in which to seduce the customer. Intuitive appeal will thus be essential for the survival of sofeware products in the future. In fact, we maynot even talk about software as “products” any more ifthe model turns out to be more that of service provision through subscription and browsing. Graphic design isthe 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 possibilty of a profusion of icons, windows, panes, and dialog boxes. Even after having graduated to the expert user stage, people still have to look atthe icons and other visual design elements oftheir 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 paint over the wall with a more agreeable color. This example leads me to 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 isthe ultimate abdication of the designer's responsibilty to provide a quality product, and ‘many studies have shown that users are in fact very poor designers and often customize their interface in ways that are detrimental to their produe~ tivity (€4. 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, i is absolutely essen- tial for the designer to give the users a carefully thought-out set of defaults to start out with, Also, users will be much more likely to end up with an appropriate customized design if they are given some pre-specified (and ‘well-designed) options to chose from as done, for example, in 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ser interface business is nor just a matter of aesthetics. There is much more at stake than simply pretty pictures, and good graphic design can signif 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- ton. 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 +o the principles of graphic design discussed in this book. I is amazing how much software gets released with horrible interfaces. because the developers did not bother to apply a few simple graphic design principles like those explained in this book. For example, I recently saw a system where the concept of a “queue” was represented by an icon of a bil- Jiard ball (“cue ball,” get it?) Such visual puns may be fun to throw around in a design session bur they ace often detrimental to the novice user trying to make sense of a new visual environment. Also, of course, this product would bbe dead on arrival ifit was ever exported to a non-English speaking country. ‘There is no substitute for having “real” graphic designers involved from the beginning in the design of any important interface with major visual ele- ‘ments. Given this fact, other user interface professionals are still often called "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 graphie design concepts. Nor only will his enable them to communicate better with thei 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 rune every last dialog box in al the interfaces in the world, but at leat 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Preface ‘ols st pln torr trea, and iconrl In shor. it Emit Ruder ‘ypoaranhy This book describes a set of fundamental techniques used routinely by prac- titioners of communication-oriented visual design. With alittle practice, these techniques can be applied by anyone ro enhance the visual quality of graphical user interfaces, data displays, and multimedia documents. Because all gaphical user interfaces (GU1s) 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 new electronic media differ greatly from print in many important ways = 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 ehe 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 thar the orientation, process, and training of these visual design dis- ciplines ace especially well-suited to the problems of visual interface design. Unfortunately the typical software developer, development manager, or Jhuman factors engineer receives little or no formal training in these areas. Designing Visual Interfaces atempts to address this problem by describing a number of important design cules and techniques internalized by every retacevisual designer through coursework and studio experience. While we don't mean to imply that readers of this book will be instantly transformed into expert (or even proficient) visual designers, we believe there are neverthe- less valuable insights that can be exploited with minimal training in afew basic “tricks of the trade.” Although mastery ofthese techniques depends ‘on a heightened sensitivity born of extensive practice, the guiding princi- ples 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 CHT'94, among others) over the past several years. Feedback from tutorial attend- «ees confirms that practical applicability is a reasonable claim. Numerous non-designers have credited the tutorial with stimulating their interest in farther 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 ths role. In addition, wwe have been particularly surprised and pleased with the postive response 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 cours 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 Gut 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 GUY'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 Prtaceto exploit characteristics of human perception to structure displays more effectively; Module and Program describes how to extend the structure of idual display to produce a unified system spanning many displays; 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 Gut 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:b} step summary of three or four practical Techniques relating to the phenom- cena just described. Marking the boundary berween these discussions in each 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 GUt standards. ‘While the implementation ofa particular design goal may vary from widget set to wider se, the principles of effective visual communication do not. Many of our examples happen to have been drawn from the OPEN LOOK ‘Guan open Gui standard found primarily in UNIX environments-which ray be unfamiliar to some readers. There are two reasons for ths. First, a8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 only Gut standard attempting to address-however imperfectly-many of the ‘communication oriented principles we describe, o its 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, ‘heir 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, associates, and col leagues for their generous contributions. For help in selecting examples of good design and/or permission to reproduce copyrighted work, we thank: Deirdre Quinn, Melinda Maniscalo, Neil Shakery, and Sarah Haun a 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, Ine; Crag Syverson and Julian Schmidt a fogdesigns Josef Mille-Brockmann; Armin and Dorthea Hofmann; Rudi Ruegg; Paul Rands Inge Druckrey; Phillip Meges; Linda Meyers at the Division of Publications, US Nacional Park Services Martin Fox at RC Publications, Ines Lynn Briber at Michael Graves, Architects; Eric P. Chan and Jeff Miller ar Ecco Design, Amy Edelson at Swatch US; Audrey Hirschfeld at Sony, Bob Panzer at VAGA, Professor Emeritus Shozo Sato, Northern California Cente for Japanese Art and Aesthetics and the University of Hlinois at Urbana-Champaign. For artwork and examples from various hardware and sofeware products, ‘we thank: Debra Coelho at Sun Microsystems Computer Corporation, ‘Tony Hoeber at Go Corporation; Lorraine Aochi at Apple Computer, Ines 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, PrefaceMany people provided helpful comments on earlier drafts. We are especially srateful for comments, suggestions, and insight provided by Diane Schiano, Mihai Nadin, Rob Mori, Jay Guyor, 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.Introduction To designs much mote han sly oats, ere, o even ‘o-ost to 9d voli and mening tomes, osm, ‘lot to mos. to any 0 arate. fo persue, ond pethaDe| Paul Ran Design, Form, and Chaos ‘This book is about visual design for graphical user interfaces. We have found the orientation, process, and training ofthe visual design disciplines to be especially well-suited to the problems of graphical user interface (GU) 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 ofa specific task or problem, as opposed to its func tional or aesthetic qualities in isolation. Other visual disciplines ~ such as painting, sculpture, illstration, filmmaking, or photography — while they have mach in common with the visual design disciplines, rypically 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 ven exclusively on functional isues, often atthe expense of aesthetics. Visual design attempts 0 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 sgoal-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 rvscon‘The Mess We're In systems, the psychological and social characteristics of message senders and receivers, and the effectiveness of various coding techniques. All ofthese fac- tors must be considered in communication-oriented design. Even more fun- damental is te feld of semiotics ~ the general theory and practice of signs (Peirce, 1931, Mortis, 1938) — which we review briefly in Chapter Six. The ‘g0al of communication-oriented design isto develop a message that can be accurately transmitted and correctly interpreted, and which will produce the 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, postion, orientation, colo rexture, ec.) of a particular set of design elements (point, line, plane, volume, etc) and the way they are related to one another (balance, rhythm, structure, proportion, et.) in solv- ing a particular communication problem. Any language system defines both 4 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 frst we must review the state of the art. ‘With afew notable exceptions, present-day GUI applications leave much to be desired from a communication standpoint. The arrival of GUt technology hhas opened up new degrees of freedom in the use of color, typography, and imagery. Most of the world’s character-based applications are rapidly being. ported to Microsoft® Windows™ (hereafter denoted simply as Windows), the Macintosh, or OSF/Motif (a Gut for UNIX workstations). The results are ‘reminiscent ofthe early days of desktop publishing, when computers first save people without the appropriate background and skills the mechanical i AG Seee 1: mapery at csvacts, confuses, sey bade the unitate use it too commen the ‘erent generation of aap appicars, Plots fom Buller Xeesor by ICS) IrrosuetonPAINT ALCHEMY | Sy So | =o —— ‘Stendam Legerig | Stator |) (Cenaomiee fi) L a Ela 2 Nontandaa raphcal laments intancadoaferatate an appleation tom {5 competion unceite b soportanty fa wana few ores byte Sneronment Do you wart vers ting abut th wart ce yours es? 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. peed desen ineflect condaned a peter Sod design, Docte tat 8 what les nth The new bacomes weston, theo easing aut Rand Design Farm and Choe Ironically, given the graphical nature of the Gut revolution, imagery is one of the biggest problems. The Windows user, in particulas, has been “blessed” with a hieroglyphic outpouring of foo! 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 rmudti-part examples labeled from left to right: (a), (6). (c) et.) that sacrificeCoarse far ouch hnage nO 80 set gone © To: BET emer se Dover (Oo: Felder image came trom (Oo: Monvolly select Twp J Colors 250 THe] Ea ute set OGiiee lierty Cricture preview Gs imovute [@ aren Dpicture teon__C1) ammanianétite fo ncquire El Bypess warning messages Ini OK in unettended dioiogs Coon go nt sunrorsers [Hem J Cone Gat with settings) Ge.) '3:Rosucng the numberof deg boxes may improve the renzatono your option, bt here wld tenet wana ote uso he cogs are the comded ona Seogens as 8 eau. valuable communication bandwidth in a well-intentioned pursuit of graphi- cal gitz and “fun.” Unfortunately, many of these images are so poorly designed as to be practically unintelligible, even when (as is rarely the case) there some degree of consistency across (or even within) applications. Even in a well designed and fairly well standardized environment such as the 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 atleast four major “house styles” are now evident among mainstream applications (Berst, 1992 4a-b), In fairness to application developers, existing user interface toolkits have provided very litle support for communication-oriented visual design. In fact, most toolkits impose unnecessary design restrictions as aside effect of their own implementation or internal architecture. Another problem that has been around as long as the GUI itself is evidene in the haphazard, devil-may-care arrangements of conteols in windows and dialog boxes (3). In fact, the typical application interface was probably structured more effectively in the days of character-oriented displays, sincethe limited number of positions in a character-mode screen had to be man- aged more carefully ~ and permitted less variation in the first place ~ than today’s high-resolution raster displays. Basie principles of visual organiza tion developed through centuries of experience with print media have rarely been applied to the on-screen media, and communication has suffered as a result. Graphical interfaces have generated a prodigious body of research (Shu, 1988, Eades and Tamassia, 1989, Myers, 190) leading to dozens of com- mercial products based on visual programming, program visualization, and ‘graphical data display. A wide variety of scheduling tools, project manage- ment systems, and personal information managers, not to mention visual progcamming environments (4) employ visual representations to help users make sense of complex serial dependencies and interleaving or concurrent processes. Despite their commercial success, these applications are plagued by the generally low quality of their visual displays. There appears to be a tacit assumption in each of these areas that simply using a graphical display will automatically confer all the benefits of effective visual presentation on a ‘4 Eating “su” apleatons have gonoraly made supisngly por use of vu anguge and Seana organzaton ne grape! aspiays, Both Dis vaul programming enorme lara TN, ‘yapheal projet manager bdo por of ating the esenta nermaton obvious “ats lance “mnaciuesion6 complex problem domain. Unfortunately, a spatial representation must use visual (and non-visual) language effectively for the potential of graphical dis- plays to be realized. The fact that it takes a very good picture to be worth a thousand words has rarely been appreciated within this domain (one notable ‘exception can be seen inthe elegant BALSA algorithm simulation environ- ment [Brown and Sedawick, 1984). The use of color has created similar problems. The limitations of a small color palette have long been com- pounded by the tendency to fil the color table with colors that are easy to aaa py B @ Preferences po S Oo B @ sar 710 om scobent design cane foundn modern Gul envtcnments abet most the system sohware love as eveancad by tus coligo of facie arapiclelrvntslnchGnecbed foresee inthe chops to come) om vanes graphical pptesions end Gu tants. describe digitally. Ths practice inevitably produces the familia range of intense, over saturated colors that sill predominates in many computer dis plays. Eventually, the problem should diminish as displays with higher color resolution become the norm, but better solutions will only arse if the prob: Jems with current displays are recognized. As with any dimension of visual language, color can enhance communication, but only fit is used correctly(Of course we don’t mean to imply that the industry has been completely without success in the area of visual design. On the contrary ~ a number of successful products have led the way with excellent visual solutions. Most of the familiar operating environments, for example, employ some visual ele- ments, and occasionally a comprehensive visual language, that are effective for thei target markets (5). These elements sueceed from a visual design standpoint largely because their sponsors have made the commitment t0 involve professional designers. For large system software vendors, the invest ‘ment is easily justified by th leverage gained in standard user interface tool- sits that can be re-used by all developers. Unfortunately, development organizations have rarely shown the same vision at higher levels ofthe software food chain, and much of the momen- tum provided by standardized toolkits has been squandered asa result. Today, simply using the low-level rootkit components does lite to ensure a high quality (or even a style guide compliant) application because the wary the pieces are put together is usually as important as the pieces themselves. ‘The remainder ofthis book will describe ways in which these higher level Jssues can be addressed. We expect that real success will only be achieved through close collaboration between system-sensiized visual and conceptual designers and desiga-sensitized software engineers and managers. The rest of this introduction describes the feld of visual design and the contribution that a competent visual designer can make to che development team. Design is nor something that can be applied after the fac, when the funda- ‘mental organization of the product has already been determined ~ though this is indeed a common misconception. To be effective, design must be an integral part of the product development lifecycle. The process employed by visual designers is comparable to the typical engineering methodology. An initial understanding of the problem based on thorough background rescarch is followed by an iterative cycle of generation and evaluation until the solution that best meets the requirements is selected for production. The designer serves typically as a planner, coordinator, and orchestrator of many specialist subcontractors. Areas of direct responsibilty typically include background research and problem definition; high level design and concept! program development; planning, coordination, and design specification; production supervision and quality control. Some designers produce their ‘own copywriting, illustration, photography, or pre-press production, but more commonly these tasks are contracted out to production specialists. srodvstion What Viewal Designers Do‘Art and Design {8 The aint, Number TAB Jckson Polo usvates the concamf he tne tr erpur for - deen comply Fo kno: ereseiatona Erte nat xoosson of te personal eestbate wise oe st 1 1800 Poocktresner Foundaton AR, New York The designer is not an artist, atleast notin the sense in which that term is commonly understood. This remains a point of confusion for many in the software industry. The aris, like the poet, is engaged in the manipulation of the formal qualities ofa particular medium to produce an aesthetic response. [Aside from the technical ability of the artisan and the imitations of the ‘medium, there are few if any constraints on the forms produced by the artist. That forms can be taken from their original context and experienced on their own terms isa central tenet of modern art. This concept underlies the work of modem artists from surrealist sculptor, painter, and conceptual art- {st Marcel Duchamp to abstract expressionist painter Jackson Pollock (6. ‘The designers 8 vauly Herat person, uta an edtors ‘xpected by toning and innaton to be versed in ge 98 Freer, but acl the fom an orist by socupatonse 9 oeurd {stoveterto th teres = post, Douglas Martin Bock Design Artis valued for its originality and expressiveness. Its focus is on individual artifacts crafted through the manual and aesthetic virtuosity of the artist. Design, in contrast, is valued for its frness toa particular user and task. Cer- tainly, design is concerned with producing a life-enhancing aesthetic experi- tence where possible, but the design aesthetic is always related to the intended function of the resulting product. Design is focused on the specification of products intended for mass production and widespread distribu: tion. Whereas art strives to express fundamental ideas and perspectives on ‘the human condition, design is concerned with finding the representation best suited to the communication of some specific information. The choice and arrangement of elements in the concert poster by Inge Druckrey (7), for example, are constrained by the need to effectively communicate the date, ‘ime, place, and event in question. The elegant manner in which this infor mation is conveyed within the context of a formal aesthetic statement that reinforces and enhances the message is a hallmark of good design. Designers are constantly asked to resolve conflicting demands imposed by Funetional va. the problem, the budget, the schedule, and the desired quality level. As in Aesthetic Concerns any engineering discipline, trade-offs must be continuously identified, evalu- ated, and decided on the basis of the best information available. Among the 1n sources of contention isthe apparent opposition of functional and aesthetic criteria. Communication-oriented visual design views these forces not as irreconcilable opponents, but as symbiotic components of every high-quality solution, rues Dean by Inge rene tintin 9Some ofthe best examples ofthe synergy between form and function ean be seen in the dynamic compositions and active constructivist typography of the so-called Dutch Constructivists including Piet Zwart, Paul Schuitema, sind Gerard Kijan, among others ~in the 1920's and 1930’. Faced with the seed to produce visually interesting advertising material for some rather sedinary looking industrial equipment, telephone cabling, and public ut tis, theve designers turned the problem on its head by celebrating rather thon obscuring the formal characteristics ofthe products being advertised, Unconventional orientations and viewing angles and dynamic graphical devices ~ including photomontage and superimposition ~ were used t0 ‘underscore relationships among elements throughout the composition. ‘8: Te sting formal tapoiton of batona tae cove ypegphy, ana wtivig graphs Beets avs {hs avertaoment cent by Goad Kon fore Dutch ow funnel a eaten Tole Gerard Kiljan’s poster for the Dutch PTT (8), for example, uses diagrammatic ‘elements and close-ups of callers superimposed in multiple ayers upon a “Gramatic aerial view to show the telephone's ability to transcend physical distance. Note how closely the elements in each layer work together to con- vey the message of the poster while a the same time producing an aestheti Cally delightful statement. Similar effects can be seen in the advertising materials and catalog spreads produced by Piet Zwart and Paul Schuitema (0), Unusual framing, scale, and viewing perspectives are in each case used yo tvcuetionto produce images that are visually arresting and yet intimately related to the product itself. Superimposed graphical devices (the square on the left; the Circle on the right) are again used to draw the viewer's atention to a partic: ular area of the display and co relate elements to one another. By drawing attention first ro the advertisement as a whole, and only secondarily to the image of the product, the formal aesthetics of the design complement the information content of the advertisement. Good design defuses the tension between functional and aesthetic goals pre cisely because it works within the boundaries defined by the functional requirements of the communication problem. Unlike the fine ats, which steom| cnventoral vowing a9 and namie compostion~ which suparmpased rail ‘a 2 functoral le by hghighang te prac these ns J" Pet ZardWAGA, New Yor 1983 and Paul Schuterra exists for their own sake, design must always solve a particular real-world problem. Functional criteria govern the range of possibilities that can be explored; aesthetic possibilities that are not compatible with this minimum standard of usability must be quickly discarded, if chey are considered at all, Fortunately, there is almost always a wide latitude for aesthetic expression within these bounds, and experienced designers realize that solving a prob: lem in a manner that is uniquely appropriate brings an aesthetic satisfaction all its own,Form, Function, and Universal Aesthetic 30: Good seston sume, sot wives Graca, economy, and ttness of pups canbe {ten Both the monument Reman earton fom Tra Colm the eins Jeoanese gardena's acstous ‘The timeless quality ofa classic design is immediately apparent. From the ‘majestic capital leterforms of the Roman inscription (10-a) to the towering [grace of the cathedral’ apse to the simple, natural forms of traditional Japa- nese craftsmanship and design (10-b) the human race has delighted informs reflecting widespread agreement on basic qualities of scale, rhythm, propor tion, balance, harmony, and craftsmanship. The same formal characteristics have been appreciated in advanced civilizations throughout human history and they are central to any coherent philosophy of design. An elegant sol tion is both an artistic and an intellectual achievement that ~ while it may ome to be taken for granted ~ never becomes tite or irrelevant. Modern design arose out of the Arts and Crafts movement of the late 19th Century, which in turn had its roots in the depredations of the early years of the industrial revolution. Inthe torrent of manufactured goods that followed the introduction of mass production, there was little concern for the quality of the design, the integrity of the materials, or the humanity of the produc- ‘ion process. The resurgent concern for quality ~ in materials and construc- ‘tion as well as design — fueled a manufacturing explosion that has continued ever since. Phillip Megas (1992) writes that, “the history of design isthe his11: Snatr cabinetry snows te sre sagas of evan purely uticaa option when ‘rata ae sna ntogty Does 8 wrcsran-emed wl Sahoo’ 03), {he spa ago aust? Pmotog'any by hoe Freeman, tory of technology and craftsmanship.” While design today remains ‘grounded in mass production, che technology of manufacture is viewed as 2 means rather than an end. The ultimate focus is on the appropriateness of the design in relation to both the function the product i intended to fulfill and the materials from which it is constructed. [An appreciation for the inherent beauty of natural materials is unavoidable for anyone who has taken the time to reflect on the fine grain of properly fin ished hardwood, the texture of cleanly cut stone, of the ft of a well made artifact. Objects constructed from genuine materials are always valued more highly than those that use a cheaper substitute. The imposition of simulated ‘woodgrain on aluminium siding or simulated leather on vinyl upholstery reflects nota preference for these surrogate materials, but rather, a deference toward the cost or availabilty of the genuine article. Compare the typical false wood dashboard of an American automobile to the delicate grain and careful seamless construction of Shaker cabinetry (11). The irony in this dis- hhonest substitution is that che natural material qualities of the plastic or vinyl themselves ~ which often hold their own fascination (cf, Tecce and. Vitale, 1990) ~ are prevented from revealing themselves. InweductionDesign and Rationality canbe constructed gsomaticay, yet provides he bai fo counts banuttl tems produced by be growth of ving organisms Proughout te natal wor Is design fundamentally a rational or an intuitive endeavor? The great inter- national design movements arising since the end of the 19th century have all advanced the belief that good design isa reflection of some higher truth, whether in form, method, or materials. From the beginnings of the Arts and Crafts movement, through the Vienna Secessionists and the Deutsch Werk- bund, the De Stil movement in the Netherlands and Constructivism in the ‘emerging Soviet Union, through the Bauhaus and on tothe rest of the world following the rise of National Socialism in Germany ~ modern design has been predicated on the rationalist belief that all design decisions should in principal be justifiable on objective grounds. While Modern design has occa- sionally been charged with mistaking post-hoc rationalization for functional determinism (ef, Banham, 1960, Margolin, 1989), there can be no serious question that the intent of these pioneering design movements was to pro- ‘mote appropriate design solutions that addressed the needs ofthe modern consumer as well as the requirements of mass production. ‘As to our initial question, of course both approaches to knowledge are essential. Modern design movements have emphasized the rational dimen: sion, without rejecting completely the use of intuition as an important gener- ative element. As with most classic dichotomies, there is value on both sides of the equation:Methed hee tution hon isnot antormed int dears Intuton augments maths # does roslyn evry ‘momento our remote sxstenoe, method ard niton Comparent ene arene. inal Nain Imcrface Design and Evaluation ~ Semitic implictions Without minimizing the value of intuition as a problem solving tool, we pro- pose that systematic design programs are more valuable from a communica- tion standpoint than are ad hoc solutions; that intention is preferable to accident; that principled rationale provides a more compelling basis for design decisions than personal creative impulse. When designing for human- computer interaction, communication is the overriding concern and creative expression is simply one means to this end. This isthe orientation we con- sider most effective for designing visual interfaces and the perspective we adopt throughout this book. The following pages describe some ofthe most important design rules and technigaes leaned by all students of the visual design disciplines that apply directly to Gut design, Most of the techniques we describe can be easly mas- tered and applied to your next product, We have tried to formulate the rules as crisply as possible, both ro distinguish them from more general principles or guidelines that frequently conflict with one another, and to make them as seul as posible for addressing real-world problems. We do not mean to suggest, of course, that any of these rules should never be broken. As design- ers have realized for centuries, all rules are made to be broken — at least by the experienced practitioner. Sore consider nol te nawo 9 mathod thers consi noble otto have aretod Noto have a ath act ston ene Stvethodis worse stil. One should fre cbeerve rues Sere, yhan change them nan tligant vay. The amo Goesessing metodo seem fay 2 fone hd no mathod ‘The Mustard Seed Garden Manual of Painting We maintain that a rational approach to design is not only possible, bur that itis essential, if high-quality design skills are to be replicated and transmit- ted across the generations.uyElegance and Simplicity Inanynng atl, natoction fray atalned no when ris na lngor ayn to 30a but wn hee s "longer nymng ace aay Antoine de Saint Exupery ‘The term, elegance derives from the Latin eligere, meaning to “choose out” ‘or “select carefully.” The same Latin root gives rise as well to terms such as elect and select ~ both of which carry a similar implication of reflection and careful decision. More recently the term has acquired the familiar connota- tions of refinement and grace, reflecting thoughtfulness and good taste. Achieving the latter, of course, depends upon the former. Visual design is, intimately concerned with careful decision making and judicious selection of formal elements. Visual design decisions extend beyond the surface to the very heart of the product concept. The visual designer enhances communica- tion by carefully selecting the elements to be emphasized ~ and this may involve selecting the elements to be included ~ and ensuring that they are presented so as to be perceptualy salient. Elegance in design is seen in the immediately obvious success of a novel approach that solves a problem completely yet in a highly economical way. ‘The importance of simplicity can hardly be overstated. In fact, the sheer sim- plicity of an elegant solution is often its most startling and delightful aspect. Elegant solutions reveal an intimate understanding of the problem and an ability co ensure that its essence is grasped by the consumer as well. Econ omy of expression the ability to cut directly to the heart of the matter ~ provides the basis for aesthetic evaluation in art and science alike. Simplicity abounds in the beauty of nature, from the laws of physics, to the symmetri- cal growth of crystals to the structure of living organisms ‘Elensnee end Simolicay13: The Belmont Rao estes cee nes sd smo, approachabe contol, The a's base ‘ora so tant stograte wth te crauar al tha bres oe ocl pot, Horn Rds: The olsen Agety Pp Colles 61587, pusisned by Crone Book, ‘Simplicity plays a central role in all timeless designs. We appreciate solutions that~ all other things being equal ~ solve problems in a clear, economical, fashion, The most powerful designs are always the result of a continuous process of simplification and refinement. We will return repeatedly to sim- plicity in the chapters to follow, as many of the other design goals depend critically on simplification as a means to their own particular end. Before you do anything else to improve the quality of a design, make sure you have reduced its formal and conceptual elements to the absolute minimum, The benefits of simplicity are functional as well as aesthetic in nature: Approachability. Simple designs can be rapidly apprehended and under- stood well enough to support immediate use or invite further exploration ‘The Belmont Radio (13) includes only three sets of controls ~ the volume knob, tuning knob and dial, and station presets. The functional relationships of each control group are readily apparent in the absence of competing ele- ments. Anyone can tell “ata glance” how to operate this simple design, Recognizability. Simple designs can be recognized more easily than theit ‘more elaborate counterparts. Because they present less visual information to the viewer, they are more easily assimilated, understood, and remembered. 18 Elegance end Senty‘The function of the Belmont radio is a readily identified by its tuning dial and louvered speaker enclosure, both of which are emphasized by the absence of competing formal elements. Immediacy. Simple designs have a greater impact than complex designs, precisely because they can be immediately recognized and understood wit a minimum of conscious effort. The radio's simple color scheme ensures that the eye is drawn immediately and involuntarily to the bright white controls. The most powerful symbols in human culture are always reduced to their absolute minimal form. Usability. Improving the approachability and memorability of a product necessarily enhances usability as well. Simple designs that eliminate unneces- sary variation or detail make the variation that remains more prominent and informative. Infact, its nearly impossible to operate a simple desiga like the Belmont radio incorrectly Principles Underscarement can be a difficult quality to grasp through conscious effort. Unity Apart from the obvious focus on economy, or minimization of component Refinement parts and simplification of the relationships between parts, simplicity in Fitness design depends upon three closely related principles. The elements in the design must be unified to produce a coherent whole, the parts (as well as the whole} must be refined to focus the viewer's attention on their essential aspects, and the fitness of solution to the communication problem must be ensured at every level potataly dangerous stuatons. Each sgn fers toa go reicags frat wtmaconeeson3n9 ser road. 8 and SnoUnity 2 ‘ers hve bon sat, formed, ond eines Elegant tools and utensil such as the Japanese chasen tea whisk (15) pos- sess a unity that derives from the intimate relation of a minimal set of parts in pursuit of a common goal. Whenever a single part plays more than one role, the unity of the overall design is enhanced. Elegant solutions produce a ‘maximum of satisfaction from an absolute minimum of components. stare fused together inthe Image coureny of Daimier-Benz Stata. Elegance and SoiBritish poster designer Abram Games recognized the key to communication- oriented design in his philosophy of “maximum meaning, minimien means” (Livingston, 1992). Visual identity programs, like posters, must be very con- cise to cut through the torrent of competing messages encountered in every day life. Identity symbols have evolved over the centuries from the highly pictographic trade-marks of the medieval shopkeeper to the more abstract, symbolic marks used in today’s brand and corporate identity programs. The classic Mercedes Benz identity symbol (16) isa familiar example with a strong symbolic quality. Its unity derives from the powerful integration of the three-pointed star with the center of the circumscribing circle. The axes of the star focus the viewer's attention on the origin of the ring. This conver gence maximize the integration of the basic forms and the unity of the resulting design. The EC2 phone from ECCO Design, Inc., (17) displays a similar unity of form in the common curvature of its handset and cradle, Instead of resting in a cavity carved into or molded onto the surface of the phone, as in most con temporary designs, the handset is held in place by virtue of its integration with the contours of the base itself. The relationship of the two elements was clearly planned from the beginning rather than a tacked-on as an alter thought. Visual unity in product design ensures that all of the individual components work together toward a common purpose. The role of the hous- ing is to provide not merely an enclosure, but also a visual feld within which control elements and visual displays can be properly related unt torm otha EC2 Pane rom ECCO Deen ne. a mast sopra nthe thought S00 a0 ol plat 12 ——_- 418: common secig anguge canbe saenin the NeXTStaton naa anesthe NoxTSton GU Regus fn ama at the coordination of en sores mage ta pyoeal product uncaecae tha pression of ot soto" Visual unity in the human-computer interface may take many forms. The foremost consideration isthe integration of the visual language elements, used throughout an application. Ideally, the same visual language should be apparent in the system software as well, and indeed, throughout the entire end-user environment. NeXT pursued this ideal to its logical conclusion by using a single design language to unify even the hardware with the system and application software (18, 19). This elegant design contrasts sharply with the colorful workstations from Silicon Graphics (e.2. Indigo, Crimson, Onyx), which awkwardly share the same egg-shell colored monitor. With the demise of the NeXT hardware business, this admirable unity will disappear for most NeXTStep users 10: By matching he visu! quits of th hravone, NexTStep toners ‘he orga! grayecle pay rom 2 mrketng ily to hgnstve seer, ogance and Smpicty20: Th stwerk gram for he London Underground reiectsaproblemrented ‘einemantf tested s phys gecyrenhy By adel compressingine astarces Satwogn ouling statons ts darn bacare the ist "Tsheye" nw Desa by ery ©. Beck, 1955 See asa cle pate 2 Reduction through successive refinement is the only path to simplicity. To Refinement create an elegant solution, anything that is not essential to the communica~ tion task must be removed. Public transportation maps have for years applied this principle to present complex routing information in an under: standable way. one of the earliest and most famous examples is the route diagram for the London Underground system (20), which has retained its basic form since 1935, Instead of maintaining the geographically correct position and orientation of each line, these diagrams maintain topological e ~ é oe st “ LLP OG ELA ELLE OOOO 221: The esesartation a singe ine pris oven ther tinement of he agra form, sins {vars or ead soetahetan need en corcem themealves winthe sequonG@ of SDs Bree avo of connections.accuracy while introducing simplifying generalizations that regularize the positions and orientations of lines, stations, and transfer points. In addition, the diagram provides a primitive fisheye view (Furnas, 1988) by compressing physical distance in outlying areas. By reducing and regularizing the spacing between stations, the diagram can accommodate more information in the same physical space. The same approach is used in the route diagram for the London Underground's Victoria Line (21). In this case, however, the general ization is even more extreme, since the orientation with respect to the sur rounding geography or even the relative distance between stations is not important to riders who are already on the train. All that matters is the sequence of stops and availability of connections. 2 Simp, fina, far convey the besiunetonalyf the thse pointing devices fom Moen (cog by IDEO reduc Asocates ar Apple Computer). The athena an ergonomes ot ‘20h deagn ee superior to ther resem repacerent 4 Refinement of physical form can be seen in the original Microsoft Mouse and Apple ADB Mouse (22). The elegance of each design surpasses tha of ‘competing designs created before and since. Both designs feature button ele- ments integrating tightly with the basic curves or planes of the mouse while still retaining a distinct identity. In the Microsoft Mouse, the left button (the Primary control in the Windows environment) i half again as wide as the right button. This simple visual cue for button targeting is supplemented by 2 tactile cue in the form ofa subte ridge separating the two buttons ‘The external appearance of GUI software has changed very little over the years, Researchers have experimented with minimalist interfaces that reduce the prominence of window borders, scrollbars, and other familiar GUI con: trols, but few tangible results have been obtained. One problem is that hid: ing “distracting” controls also removes the visual affordances (things that 24 Elegance and Spicysuggest interaction possibilities) those elements provide. The scrollbar itself, for example, reminds the user of its availability as well as its operation. Removing visual cues is disorienting, particularly for beginning users, but also for experienced users who can be disrupted by the abrupt transitions as controls materialize and disappear again. ‘An alternative approach can be seen in PenPoint, where some controls were replaced with simple gestures. PenPoint’s elegant notebook metaphor (23-a) climinates all extraneous details (note the absence of spiral bindings, perto- rations, rounded comers, ruled lines, etc.), depending largely on its vertical orientation and, of course, the tabs that have inspired a whole new genera- toga highly ined intreataton of 3 paper notbook in the PerPoint user nertce sharply eth Pe tus, very aa "notepad cues rode by he Share Ward Thatemor conveys gota mprossion of netacook ass, whl te ates dopands on crud bes, tion of notebook-builders. Compare the elegant PenPoint display to the busy Sharp Wizard sereen (23-b) with ts bulky spirals and axonometrc rendering showing the dimensionality ofthe pad. Note how the spiral must sometimes be shortened due to space constraints. How interesting that ths product, With its much smaller display, chose the more costly (in terms of screen real estate) route of a highly detailed litera representation. seconee and Sinpiety 2S.2 ‘2A: The ga desi of ts Shakar sewing desk makes use af the many smal encosed spaces whe powing constant fceess tothe wok surinoe. Photo by Machol Fosman Designs are never evaluated in absolute formal terms, but rather, succeed or fail on the basis of how well they solve a particular problem. Solutions can bbe more or less appropriate in their method, their process, or their outcome. Elegant solutions solve problems with maximum effectiveness through ave- rnues that are desirable in their own right. In addition to its fine construction, the Shaker sewing desk (24) reveals a design of remarkable compactness and i 28: The Jnanese tartan sgn ents the type of good or Seraces ore by tis estatichmet wl tending atl ‘ith eacion| bldg materi Used te facade, laganoe and Spysue cat at teen eenete Beet age Bt ea Ds tneernen 20: The meus cegn goals and locus an cane unctonatyaprentin te orga Mactan Paint aopieaon ofc the comment oan seeoprate blsce Btw capbity Sra comply seen a te est wave of software cieted fr "he est fs.” economy. The maximum use is made of the space consumed by the desk The depth and accessibility ofthe drawers, as well asthe leg-room under the desk, ae all increased by allowing the drawers fo open to the side, rather than the front. Tiny storage compartments throughout the desk reflect the need to accommodate materials and supplies. In shor, every element refleets the practical concern of supporting the task of sewing. ‘The traditional kanban sign on many Japanese storefronts (25) reveals a similar sensitivity to the qualities of che material. In Japanese architecture, the concepts of subdued beauty (shibui) and elegant simplicity (wabi) are seen in the refinement and natural character of the buildings themselves. The aban is an att form in its own right, but its Fness as a signage element is apparent in its visual compatibility with the surrounding material context. In user interface design, the material choices are typically much narrower, but the digital medium can stil be presented more or less appropriately. The ‘original MacPaint and MacWrite applications (26) exemplified (and in some ‘Bagance and Simplicity asense, defined) the philosophy of the early Macintosh software environment, ‘These simple, straightforward, and highly graphical applications were appropriate for the technical level of the target user as well as for the limited ‘capabilities of the original machine. The presentation in each case is concrete and explicit, with visual affordances or reminders to help users recognize the tools available to them. Simple mechanisms such as the memorably vivid “Fat Bits” magnification mode in MacPaint helped users understand the novel technology while exposing them to some ofits power and flexibility. {As simple as they were, these two “bundled” applications met the needs of ‘many early users al by themselves. abcdefghijkimnopgqrstupwxyz ABCDEFGHIJKLMNOPQRSTUUWHYZ $1234567890(.,'"-; 2: The Chicago son fort was designed with the Itstons a reqiroments otha oe Tesolin Macmtoch spay n mind, Te sk vara elemontsenare hat aachenorarter romans ctie when ammad wit he starsat 0-petcen pay sate ‘The Chicago screen font used for widget labels throughout the Macintosh system software (27) provides an even better example of matching a design to the material qualities of the medium. The font was designed to ensure adequate legibility and contrast on low resolution (72. dots per inch) video displays. The chick vertical elements provide characters that remain legible even when some of their pixels are removed by the standard fifty percent gray pattern used to indicate the inactive tate on the Macintosh. The Chi- ‘ago font’ unique typographic character and fitness to the display task helped make ita defining feature of the Macintosh interface from its earliest ‘days on. The original design continues co thrive even as the technological limitations it was designed to accommodate have begun to disappear. Apple’s recently introduced TrueType fonts include a scalable, outine-based version of Chicago even though the need for the pixel-level runing seen in the original bitmap font is largely eliminated by the higher resolution output devices for which scalable fonts are intended. 28 Bogance en SimpyCommon Errors ‘Common errors related to elegance and simplicity can usually be atributed 10 poor planning, poorly communicated structure, or attempts to go beyond the scope of a coherent, focused design. The inevitable results visual or con- ceptual complexity and confusion. The mistakes described below ar all (00 typical in today’s GUI application. lL See (or 01 osha : cone Tinwreer| eve | ‘Bieter ledewe ey a Stara . 7 Sms LG Fit — } eile Sith 2 tat | 28: Cluter and visual noise. The advent sible to scan, The window contsins so ofthe Gurhas meant more, notless visual much functionality thatthe usual 1x6! clterin most computing environments. ines were net prominent nough to divide Today software products are designed, the layout into matte regions. insted, ‘marketed, evauated (and all too often, the design uses heavy 4-ninel horizontal purchased) onthe basis cf their agoregate and vervcal dividers that do more to attract feature set, even though many features attention to themselves than to create ‘reused rarely, ever, bythe vast majonty meaningful highersevel units. In addition, of users. The only way to dea effectively the window's gray backround wns 8 36- with this unfortunate realty isto ogically ies of carelessly positioned text ilds Structure the presentation so thet each th thei bright wate interiors) into a cis- {snlay contains a manageable amount of racing pattern snaking randomly through information. Appicatons that ty to pack the left-hand sie ofthe display. While {a much information as possible nto each functional overoad is clearly a problem sotean create orobiems that rival the with this deign effective use of visual an worst charactarbased displays. Tis win- guage and display structure would bring a Gow trom a personalinformstion manage: noticeable improvernents, is crowded, confusing, and almost impos: Begance and Simpy© Horizontal: Delete Tanseetion cuted Vertical: Woid Transaction Cui Memorize Tanseaion _Gulew PIE oar eux | center: @ 2 Interference between competing _phabetic characters, and because there is flements. Menu accelerators ie. indivi less visual information in the surrounding ‘dual keyboard shorteuts that invoke menu area, the Macintosh accelerator characters ‘commands direct in Windows (a) use are far more readable than ther Windows purely textual cues for both the qualifier equivalents. They cen be noticed in periph- (eg. Ct At, Shift-the keys youpressto eral vision while choosing items with the indicate thatthe next Key should invoke @ mouse, which makes the logic of the ac ‘command and accoleratorkeys. These a-celeretor scheme mors apparent and inc ‘phabetic qualifiers along withthe “=” dental lesning move ikely, Tha same kind ‘symbol used to separate quater and ac- of visual interference is apparent in the Ccelertor-interere with the accelerator Aignmenticns from the OFEN LOOK De Characters, andsometimes withthe menu veloper’s Gude (). The readability of items themselves. Contrasting these ac- these images suffers from an ielevant celerators with their Macintosh counter-- variation in shape within each icon that pars (b) demonstrates the effectiveness serves to obscure the relevant variation in fof the simpler approach in which a single alignment ‘graphical symbols used as the quali {or all accelerators. Because the "propel ler” symbols not confusable with the at Evgance ana Smokeysort aris) | Rese) Overceneing — | Oessending | Otersentng | nanoang ie Otustom: [| Coes) ce tb) a 130: Using explicit structure as a crutch. nate dslog above (a, where a single The presence of nestedboundngboxesis texted is sureunded by fourlevals of usualy symptom of 2 poorly organzed _boundaryintormation When proper spatial layout. Packing information as densely @s relationships and sufficient margins are possible and surrounding the esultng maintained, expict structure rarely Groupings with explicit borders never 8 needed ensure proper visual separation. {00d Substitute for structuring the layout Unfortunately many appleations include 2 covwestous (me) tee) 31: Belabonng the obvious. Users of GUI Like the presence of tapedon instructions | applications remain totaly unfamiliar with in the physical workoace, the presence of the sopication functionality ony for arela- help text n the interface i tse a reliable tively shot period. Unnecessary naviga- _inkcator of laws i the undertying design. tional aids that might be usefl the firsts many as fvo edltiona items could time a user sees 8 product quickly get in have been included in thelist (o the win the way as soon as even abasic familarty dow made smaller simply by emoving ‘with the appiation hes been estabished. (perhaps optional) the redundant text Excessive “assistance” doesn tjust stow Similay, the pointing hands inthe Smart semiexpetienced users down itcanaiso Pics clog box (b) meray lead the eve Prevent users from understanding the ap- along a path it would have folowed natu- plication nthe frst place iit obscures the rally n any case. Such seitconscioushy Lunderving structure ofthe window. The “heloful feedbsek does lite more than lexcossve verbal prompting inthe file se- parrot the viewer's natural movement lection disog sbove(alconsumes valuable through the dialog In fac. it may well i space to tell users something that should pede performance by interfering with oth have boon cbvous from the argarizasion _erwise obvious spatial relationshas. Of the window and abasic understanding Of the ubiquitous task of opening file 32 Elogance era Simply-32: Overy itera translation Even ifthe ‘mataphor can be realized completely, pre senting a software ertact os a drect ana- log ta physica object almest always imposes unnecessary vsual ard concep- ‘tua resvictions onthe design. Most GU calculators, for example, simpy cepliceta the heavily moded, poorly labeled, and at ficult to manipulate designs of existing physical designs. The model onthe lai) ‘ven goas 80 far as to repicate shtted functions (de, ect, hex! eventhough decicated software buttons coua have ‘been pronded within the same space While they may be familiar to experienced users ofthe physicel analog thase de: ‘97s Go litle 1 leverage the power and fewlity f thee computational ost. The aS [Bema “Cale Option Help iteet Lnestical soeptance of the material con Siraints ofa physica caleustorarevents ‘these calculator designs from focusing on sence ofthe problem of eaculation in any meaningtul way. PentaCate (bn contrast, is only loosely pattemed ator a physical calculator (why shouldn't every {41 ealevlator provide tho valuabie tape feature, which i vial to implement?) Wile pethons ise similar to "ea-woid” esigns, thas boon more carefully adapt 29 t0 the capabilities and imitations of the uri features tlexible display modes, Closely spaced buttons (wich minimize musing, and provides an excellant koy- oars interface, Eiogance and Simplicity 33‘33: Excessive detall and embelishment ‘Tho siten song of photographic realgm ie difficu to resist. particulary iven the atu human receptiveness to visual ‘stimulation. Inthe GU a in any new me- cium, more etfort has been expended on faithfully replicating familiar themes than Con uncovering the unique characterises and qualtes ofthe new electronic mac lum itself. Electronic media alow us to fo- cus to an unprecedented extant onthe essental elements of @ design, but ony i the avaiable bandwidths not squandered ‘on graphical cichés and self conscious o« narmentaton, Graphica embelishments ‘that serve only to underscore the “ras. sm" of th design suchas the sheen of ‘simated brushed aluminum buttons (a ‘the sparkling splash screen forthe sae legece and Senpty — @ ular etlectons on spherical plastic buttons {c) eventually grow tresome despite the inal “oohs" and "ahs", These qualities rarely add to the longterm visual appeal of the product because they subvert rather than enhance communication. The extent to which this quest for graphical pazaze has eplacad concer for effective commu: nication canbe seen inthe subtle highight- ing ofthe spherical "OK" and “No” but tons (c). The buttons change colar whan ‘press (woe tothe user with colr-def- ‘Gent vison, but otherwise rovide none ofthe essential visual feedback that pro- vides the illsion of manipulating 2 tangitie object.Ble love the sense of tangibilty imparted to-a wigget sat by the popular pseuge-3D rendering techrigue in which highighted and shedowed borders simulate a chyst cally cased surface. It can even be argued that ths visual restment pays @ valuable role in identiying “pushable” controls, “The increasing use of 3D in situations that ‘Go not take advantage of he add dimen ‘sionalty, however, more dificult to de- fend. inthe examples above, the chiseled inactive" feedback n the toolbar icons a) and the 2D treatment of the textual abe! {b1 both impede the legibity of th resut ing signs. Legality is also reduced by the Unnatural foreshortenng ofthe sides of ‘the 3D palate the Button Cube). This aD stueture actualy completes acomplox {and slow! animated tation whenever the user switches toa diferent set of tools. While the obvious atficancy andscaabity concerns thow do the design handle mere than faut palettes? are serous enough ‘the design hes problems even as a state ‘dpay. The view ofthe “next” palete is ‘00 narow and distorted tobe very recog nizable, so the complexity introduced by the thd dimension provides iti sécion al information over its 2 equivalent. Like ‘he upturned page comer inthe bottom of 2 "book" wirdow (a, its simply decors tion attempting toweo the consumer with its seductive splendor “Elopanee and Simoes os38: Al ofthe above. The mast spectacu lac faling of simpy is often seen in ‘those produts trying mast eamesty to ‘simplify the Gu for non-technical users Applications ~ even whale environments ‘such as MagjeCap from General Magic — attempting to leverage users’ knowledge ‘bout the physical word through a "3D OF fico" (or 3D world) metaphor are begin ring to reach the marketoiace, This approach has always been something of@ rite of passage for GU designers. Wile ‘many would admit (when pressed) to hav- ing ther version ofthe 3D desktop tucked neatly away in tht fes, its basic flaws are widely recognized, The extremly iter altranslaon of the “rea” worid sean inal such attempts, for examole, virtually en: sures that users wil find the resulting en- “Clagene and Sienpteiny. vironments cumbersome an inetficen, ‘and probaly just as clutere as ther ret world ofice. Interestingly enough, the 3D fice nearly aways suffers trom both an ‘unnatural point of view and an awkward rendering style tat effectively eliminate the impression of being in areal physical space, Ironical, this preromenan can be traced direct to the 3D representation it- self, since accurate perspective contcts with effective use of splay space wher fever two-dimensional ecting tasks ore- ‘dominate. When the standard Fie Manager, Task Manager, and Program Manager sppesrinrontf the virus desk {25 nthe Windows desktop replecernent ‘shown here, any ilusion of true three ‘mensionaly that might have arisen is ‘vicky shatteredWhats simple shouldbe tested simply, what fcuk should be reduced othe simplest ore. Joset Miler-Brockmenn The Graphic Designer and His Design Problems Techniques Elegance cannot be easly summarized in a few rules of thumb. It depends Reduetion heavily on taste, and taste can only be developed through proonged expo- Regularization sure toa series of high quality examples forming che benchmark against Leverage which subsequent solutions can be judged. Because complex designs rarely scem elegant, simplification is an important step in the development of any elegant solution, Three basic techniques can be used to simplify a design solution: ‘Reducing a Design to its Essence *Regularizing the Elements of the Design *Combining Elements for Maximum Leverage ‘To the extent that the overall approach is appropriate to the task, the ele- sgance of the resulting solution will be enhanced as these techniques are applied. With practice, these techniques become second nature. You will begin to apply them almost unconsciously ~ to every emerging solution. EogancearaSimpicty 7Reducing a Design to Its Essence 2 38: Tis mao ofthe Son Frarciso ty aes ram Utes shows vee of educton to arod2e eve 23 deta appre for he tended sadorce. The sere das speeds oration an ‘cttaes reg at 9 garce. Desin by The indrtaneing Buses. (Soe ao cle pete 5, ‘The most fundamental design technique is reduction. An elegant design _must be reduced to its essential elements and each element reduced to its ‘essential form. The travel maps produced by The Understanding Business (36) make extensive use of reduction as part of its distinctive visual lan- ‘suage. This map of San Francisco and the surrounding area of Northern California eliminates any detail that is not likely to be needed by someone traveling through the area (the audience for the atlas in which these maps appear). The results a truly elegant solution in which the simplified presen- tation solves the navigation problem for is target user in a way that makes the maps aesthetically effective on purely formal grounds as well. 37: Roaucton plays the cir of eronesiing carci fst in thse publeintorstion icons coveloned fo the US Desrument of Tanapataton oa by the Ameren nett of (Garnic As AG. Design by Gook 8 Shanosty Associate. parce and SimpyGood design is simple, bold, and direct. It ensures that significant design cle- iments will be noticed by removing insignificant elements wherever possible. ‘The familiar public information signage (37) developed for che U.S. Depart- ment of Transportation (DOT) was commissioned by the American Institute of Graphic Arts following an extensive study comparing the legibility and aesthetic qualities of 28 existing signage programs (AIGA, 1981). The picto ‘graphic signs focus on elements typical of an entre class of objects rather than on the details of any one instance. All visual details except those needed to identify the objects category are removed. This reduction of iconicity makes the images more portable across cultural and linguistic boundaries, Even “essential” elements can often be removed to good effect. Images are ‘often more visually appealing ~ and just as identifiable ~ when portions of the image are suggested rather than explicitly depicted. This technique is «specially common in visual identities and signage systems where impact and recognizability ae critical. The partial contour ofthe “A” in the identity for London's Victoria and Albere Museum (38-2), for example, is easily com- pleted by the viewer, thanks to graphical cues provided by the serif ofthe ampersand and the top of the pail ltterform, Similarly the upper portion of the wheel of the wheelchair inthe DOT pictogram se (38-b) is only sug gested, with no loss in clarity. Viewers are not only abe co fil n “missing” contours. They delight in doing so. The ative involvement ofthe viewer ean sake recognition easier and communication more effective, ‘To apply this technique to interface design, the designer must simplify the presentation as much as possible and question the functionality being pre sented when the resulting display is still roo complex. Every aspect of the When te overa orm ler te ayes gute ving to sup mating deta, a 7 tie ery for the Vitra nd Albert Museum Laon fl = dosgnby Pantaram andthe OOTs access eon Clecance nd Simplicity 8.{38 Sips iconic mage ia necessity athe sal scale required byte Note workgrou por ‘messaging sytem, om Visual Cyaametes Reaucng te images to ar essence ane ‘trina unoaceaayvrton hab the cons commune cesy even sts ea ae «Note pop-up messaging system (39) is devoted to conserving display space so that the window to remain open on the sereen most ofthe time. The sim- ple, elegant, imagery used for the button labels communicates effectively ‘without a need for verbal labels and the additional space they would require (che process of reducing an image to its essence will be discussed at length in Chapter 6). Bur the designers did not stop there. Most ofthe product func- tionality has been off-loaded into separate, task-specific dialog boxes. This design keeps the main window small and simplifies its window management tasks: since the window need not be resizable, even the window header and. borders can be reduced to a simple outline. [An even mote ambitious reduction can be seen in the Macintosh start up screen, Instead of a stream of cryptic and often confusing textual status mes- sages, the Macintosh operating system displays a simple image (the “happy Mac” icon in 40-a) that conveys the system status while introducing person- ality and occasionally even a litle humor into a potentially stressful situa "sion, A textual error message (and the *sad Mac” icon in 40-b) is displayed only ifa problem is encountered during the stat up sequence. {40 The minima owdback provided arng the Mecnosh boot sequance simply ens the ‘System stats as rama of anormal 40 —Elgarceand Spicy‘Spicy doos not mean want or overt, toes sat mean he 3 Senea of ny doce, oF absolute rusty tony rears that he decor ‘Stout bstang timate to he design prope, and hat anyting for ‘ign tt should be ake aay Paul Jacques Grito Form, Funeion, and Design In all of these examples, the message is reinforced, not weakened, by ‘Summary: removing non-essential elements from the design (or by resisting the tempta- Reduction tion to add them inthe frst place). Even experienced designers depend heavily on trial and error to determine which elements are erly essential. ‘The use of reduction as a design technique should be approached as a three-step process: 1 Determine the essential qualities (typically a shortlist of adjectives) that should be conveyed by the design, along with any fixed formal elements, such as a name or label, an essential control, or a color, texture, pattern, or image. 2 Ccitically examine each element in the design and ask yourself why itis needed, how it relates to the essence of the design (identified above), and how the design would suffer without it. If you can't answer any of these questions, remove the element. ‘3 Try to remove the element from the design anyway. What happens? If the design collapses, either functionally or aesthetically, the clement must be replaced. Otherwise, consider omitting it from the final solution. Don’t be afraid to remove peripheral features or redundant information. ‘These can always be replaced if users subsequently demand them. Effective design often involves oversimplifying to help make a point. An ounce of inaccuracy can be worth a pound of explanation ~if it helps the viewer gain 4 basic understanding of the message you are trying o convey. egunee end impietyRogularizing the Elements of a Design Te SS Ww 441: nis elogat route degra fr to commuter system nor of Mian {he areraions a! he staton el are eguared ang the came pon sod vo govern he placement of te ines arses. ‘When further reduction is not feasible, the remaining elements cam be regu larized to further simplify the design. Regularity reduces information by repeating elements according toa discernible rule, principle, or rhythm, Human perception and memory operate more efficiently on regularized stimuli since the visual complexity of the display is reduced while its struc- ture is enhanced, The predictability of regula patter allows the viewer to “scan ahead” more easily to the area of interest when making a comparison ‘or answering a question. Regularity also introduces significant aesthetic ben- efits, as evidenced by the near-universal human fascination with the decora- tive effect of repetitive patterns. Regularity can be achieved by aligning or reflecting elements along common axes, by standardizing or repeating sizes and spacing of components, or by reducing components to basic geometric forms wherever possible. In the dia- sram in Figure 41, the placement of the station labels on the same 45-degree diagonal used to govern the lines themselves underscores the schematization of the line orientations. Regularizing the weight of the lines throughout the diagram enhances communication by making the one discontinuity ~ the double width portion in the lower right ~ immediately apparent. egance and SipityC\A|FIE yee ‘hos te raplr soacna ote vara! rls to maguate hese cotast ey ‘Samanta morro creat senee of stabety nthe dame wal Bont. Effective design balances contrast with regularity. The signage program for the Oxford Museum of Modern Act (42) uses regularization to balance the playful contrast between thick and thin forms seen throughout the system, Note how the regularity introduced by the absolutely consistent spacing berween characters lines, and vertical rules creates the impression of rigid vertical alignment at the global level (even though characters on two lines fall on different axes entirely), while exhibiting playful variation locally (ohere the three-letter words can be seen to break the alignment). This inter play between global and local readings produces a dynamic visual identity that is stable, yet active and visually interesting, aces by Partagfam fe the Routers news agony empoys steer cain ©‘44: Te elogant NoXTStap browse sey unum spacng or column to caum As the ‘wow i rsze, i "srape tothe mel amenson fo artan constant spec Effective design establishes a predictable rhythm. The importance of predict- ability ina keyboard layout (43) is obvious, but simpler tools benefit as well. ‘The simple elegance of the NeXTStep browser, like that of a well-designed ‘page, owes much to the regularity of its column widths (44). Columns can be added or removed by resizing the window, but the width remains con- stant throughout. Note how the thythm is disrupted when the widths of the columns are reduced to the minimum required to display the labels at each level ofthe hierarchy (45). The irrelevant variation in column widths merely introduces visual noise and distracting apparent motion as the hierarchy is traversed, so the minor reduction in screen space is hardly justified. 45: Racing cur ws tothe miner needed to capay he widest ‘tar mey soem kee od doe, but the regu’ path tat reautsis vay ‘Ssoting. Th impact onthe readabity ofthe resuitag dssiay more an sts te mio: savingsin tre ol Sree es estat tet ese ‘Begence and SimplicityCortauty'snot nly th uninterunte eps rom ‘nm onto anatnar but tals the cea force ‘hat hls a dere comacs'ion peter Donis A. Dondia [A Primor of Veal Literacy Establishing a pattern simplifies the design by moving the viewer's experi- Summary: ence to a higher level of abstraction, Thus, a series of black and white rect- Regularization angles becomes a “checkerboard” when suitably arranged, Design elements ‘must be regularized on many levels simultaneously to produce this effect. Some generally useful strategies include: 1 Use regular geometric forms, simplified contours, and muted colors wherever possible. 2 If multiple similar forms are required, make them identical, if possible, in size, shape, color, texture, lineweight, orientation, alignment, of spacing, 3 Limit variation in typography to a few sizes from one or two. families. 4 To reap the benefits of regularity, make sure critical elements intended to stand out in the display are not regularized. Any irregulacity will be interpreted as significant by the user, who will cheer- fully ascribe to it a meaning even where none was intended. By regularizing non-critical design elements throughout the work, you will be able to attract the user's attention reliably by introducing an obvious irregularity whenever you do wish to make a distinction. Grogince and Simoicty 45Combining Elements for Maximum Leverage ‘48: The ubiquitous cape anives ts mara of smplty by caming te tensioning snd ‘g2spng uncionsreeced by any clppng ave within # sing wire wemant. The Nowepan veto earn Vleet wath tho ign deslgn in 1858. ‘The most challenging means of simplification involves finding points of leverage at which design elements play multiple roles. When one part does the work of two, the elegance of the solution is always enhanced. The hum ble paper clip (46) shows that elegant design is not limited to expensive lux- ury items. The effectiveness ofthis familiar commodity is not compromised by its incredible simplicity. The clip combines the tensioning and grasping functions needed by any clipping device in a single strand of carefully stressed wire. Though we rarely pause to appreciate this elegant solution (an unfortunate consequence of effective design is that it tends to “disappear” as use of the product becomes transparent, its grace is hardly diminished by its ubiquitous presence and utilitarian role v. \ S «47: Indi dosgn elements play maple n thas entity mare or the Ob Deperomont of Eaucston ~Offee of Sex Eauty and he oa mages fost service egince an SinpiyEffective design is visually efficient. Both of the identity marks in Figure 47 incorporate multi-functioning visual elements. The rectangular element in the symbol for the Office of Sex Equity (47-a), for example, forms part of ‘the “E” in equity while forming the square that serves as counterpoint to the circular element in the underlying “different but equal” theme. In the second example (47-b), the vertical stroke of the “F” (for Floral Images) curves ‘organically through a transitional flourish to double as the stem of the mark's bird-of-paradise flower, Leverage is particularly important in user interface design, where screen real estate (the amount of display space available to the application) isa precious. ‘commodity that’s always in short supply. Successful designs use leverage extensively to simplify standard elements that recur throughout the environ- ‘ment. One of the best examples is a Gut window's tile bar (48), which pro- vides not only a place for labeling the window, but also an area for locating SSS lags Sees Name Size Kind Last Mosifeg D Freehand Tk dooument on, Jan 11, 1993) D Freehand 2 3K document Mon, Jan 11, 1998 D Freehand 3 10K document Mon, Jan 11, 1998 D Pictures 17K document Mon, Jan 11,1998 rain a window hese which t once label atag wa, ond a pace win rt window mangemant carvas Th ines sta to hehight the See window Tevrage by toring eappaity even ab tay neroase te windows prominence ‘window management controls, indicating when the window is active, and allowing the user to drag the window to a new location. Similarly, a scroll bar provides not only a handle with which to scroll the window content, but also an indication of the current location in the document and (in some Guts) the portion of the document that is currently visible (44, 48). Leverage is difficult o achieve because it requires insight into the users task domain. When it becomes apparent that two controls or displays are almost perfectly coordinated (or perfectly complimentary) the designer can use the same mechanism to support them both. A clever example ofthis technique is seen in WordPerfect Office (49). Instead of adding an extra message line to Eagance ndSemplety 715 Busnes Boncead 148: Leverage in a ut rosotation soften ade posible when two aspocs of th user atk ‘remutualy exclusive nis window tem WNedPerect Office the window Hels eplaced with = Sting deserting th corer fneton ae the veer browses Praugh 8 menu ceach window, the design re-uses the window's tite bar to display help infor- ‘mation while browsing items in the menu. Because users necessarily choose the correct window before they begin looking for the menu command, they are unlikely t0 need the contextual information provided by the title while navigating the menu system (which is the only time the help display is used). Effective design utilizes every component to is fullest. While every GUI eon- trol requires some form of label, each control doesn’t necessarily require a label all its own. Indeed, identification ean often be provided by context. ‘When controls have different logical priorities, labeling items uniformly across levels (50-a), obscures the relationship. Combining labeling functions allows the logical relation of the subordinate parameters to be conveyed by ‘ Stheir position and “indentation” while making it clear that the higher level labels to apply to the subordinates as well (50-b). The consolidation of iret evant detail makes the important information immediately apparent. sie: [Bienen [sens] ve Stee: [Bivens [oeaTag —] 0 Uae trea Poses ere Ports Whe £0} tos “ea gy torte it 200 I of ori! e062) + forint with reson Cr ao lun ott 32 cn 2D ontone Tere: 30 ED om 2 ED ontenon ‘50: Leverage can ote be acrioved by excoting contextual formation provid te selay ‘oot isu interference Setween adacet nel if) can be rediead by allowing eath bod be ‘re afthand column oat te conte or ever subordinate conto ent ih Elegance and Simoticitygare is achieved wnan a varety of is scant by sech eat. poring tn whol to aperato at soveaevels of Seraness, th inenwesvng functions mating one 03> Shrerin a sate of sauibram ans he Krome Barrett Logie and Devon Achieving maximum leverage for each element in your design requires a Summary: ‘thorough understanding of both the communication problem at hand and Leverage the design elements at your disposal. As a design nears completion, it should, be systematically examined to determine if any unneeded redundancy 1. Review the functional role played by each element in the design. (This information should be a natural product of the reduction phase.) 2 Look for situations where multiple elements are filling (or partially filling) the same role, 3 Question whether an elements role could be filled as well by an adjacent component, possibly after minor modifications 4 Combine redundant elements into a single, simpler unit or replace the lot with a common higher-level idiom from the target ‘environment designed to address the situation. ‘Maximum leverage is not desirable in every design. Particularly in user inter- face applications too much leverage can cause problems if it introduces complex mappings that must be remembered by the user. The classic exam- ple is the digital watch whose multiple functions and modes of operation are accessed through a pair of tiny buttons. The difficulty of remembering which buttons to press (and how many times!) quickly ourweighs the aesthetic advantages ofthe economical design. When leverage can be used to reduce the complexity of the interface, however it enhances both the usability and the aesthetics of the product. FepancearaSingiey 9Scale, Contrast, 3 and Proportion Inlermation consis of frances thar make a aterece Edward Tufte Envisioning Information The subtle interelaionship of scale, contrast, and proportion ean be seen in every harmonious design. The effectiveness of a clear composition always depends at last as much (often more) on the relationships among the parts as it does on the parts themselves. These relationships, which emerge at the tlobal level of the display, mast nevertheless be manipulated locally, by mod- ifving the attributes ofthe displays component pars. Unforeunately his is one of the mos difficult problems in visual design ~and the one that requires the most practice to develop. Altering even a single ateibute of one part in a complex composition ean have a significant impact on the balance, the unity, and ultimately the harmony of the whole. When a single clement is too large or too small, t00 light or too dark, foo prominent or indistinct, the entice design suffers. Ths section describes ways in which relationships between ‘elements can be manipulated to produce the desired global eect. Scale describes the relative size or magnitude of a given design element in relation to other design elements and the composition as a whole. Grillo (1960) describes scale as, “the feeling of a design fitting its space and its sur- roundings.” Scale is never meaningful in an absolute sense ~ if nothing else, itis defined in relation to the human viewer. Achieving the right balance between point and counterpoint, between pattern and focus, between figure and ground, depends on careful manipulation of the graphical qualities of ceach element in the display. The magnitude of the differences required to «establish this balance are governed by the principles of contrast. Sele Contrast snd Proporton2 Contrast results from noticeable differences along a common visual dimen- sion that can be observed between elements in a composition. Contrast pro- vides the basis for visual distinctions, which are the building blocks of meaning in a visual message. The dimensions along which visual contrasts can be drawn include shape, size, color, texture, postion, orientation, and movement. Effective visual design consist of selecting -for each part and for the whole composition ~ the visual treatment that most effectively real- izes the communication goal. Visual design, however, is lifeless when its only concern is for communication efficiency. Scale and contrast must be modu lated to produce the right balance between interesting visual dynamics and pleasing, harmonious proportions. Proportion, described by Grillo (1960)as, “a rapport between two dimen- sions,” deals in ratios rather than fixed sizes. It determines the balance and harmony of the relation between elements. Proportion is the metric that ‘Buides the choice of scales in a contrast relationship. Classical systems of proportion codify relationships known to please the mind as wel asthe eye. In practice most designers manipulate proportion on the basis of a highly developed perceptual sensitivity acquired through years of experience, rather than through mechanical techniques, but classical systems such as the Golden Rectangle are the inevitable starting point. Regardless of its source, the effective use of scale, contrast and proportion confers many benefits: Differentiation, Contrast is essential for differentiating elements from one another ~ for allowing form to emerge from the void. We see Cassandre's steamship (51-2) first, for example, asa large rectangular form emerging from the lighter background. Similarly, the hands in Armin Hofimann’s the ater poster (S1-b) depend on high-contrast contours to differentiate them from the dark background. Their size, weight, and organic form help to fur- ther distinguish them fom the hard-edged typographic message. Emphasis. Scale and contrast can be used to emphasize important elements ot areas in the composition. In Cassandre’s poste, the framing of the minus- cle tugboat within the dark mass of the ocean liner emphasizes both the smaliness of the tug and the colossal scale of the liner. The name of the ocean liner (*L' Atlantique”) is emphasized by contrasting its size and value with those ofthe other typographic elements to make it the most prominent piece ‘of text in the display despite its location at the bottom ofthe poster In the ‘Hofmann poster, the high-contrast photography highlighting the contours of Sele, Conrast and Praportoncontrasts to rst flat The poster's nage must be suficenty #. Designaby etme Base the fingers and hands adds emphasis to their evocative gestures ~ the orienta- ton of the fingers is more apparent as background detail is removed ~ and provides a heightened sensation of movement throughout the composition, Activity. Scale and contrast move the viewer's eye through the composition ina predictable sequence that can be used to support a particular commun cation goal. Note how the eye is drawn almost involuntarily to the tugboat in the Cassandre poster, despite its small size. This tendency is reinforced by the careful merging of the smoke trails from each vessel. The medium value smoke contrasts with both the dark hull and the light sky to provide a prom: inent path leading the eve from smaller to larger vessel and back again, Interest. Scale and contrast add visual interest to a composition by juxta posing elements with strongly opposed visual qualities to create tension, ddrama, and excitement. In the Hofmann poster the contrast in orientation and gesture of the five hands projects a strong sense of theatrical movement and emotional involvement that draws the viewer in to the point where the poster’s message can be delivered. Delivering the message effectively depends (on appropriate use of visual language, which we now review brieflyBackground: Visual Variables @ @ cS ° Oenke V oe 0 @ @ # O O° ‘52: Bern's real vriabies” form te bose foal forms of visu eadng A vu code can be Dasedon tomato rat const se, vous, orentian texture, srepe, poston in 20 or 30 sce. Hue evomatc cl prodes an acivnel dmansion not Btred hee Effective design respects the capabilities and limitations of visual language, which, at its most basic level, concerns the primitive visual distinctions that are available in human vision. Visual contrasts must be established by ‘manipulating the perceptual qualities (52) of size, value, hue (not shown), orientation, texture, shape, and position. These characteristics are described by Bertin (1983) asthe retinal variables, because they are perceived immedi- ately and effortlessly “above” the picture plane and across the entire visual field, This automatic perceptual characteristic makes the visual variables the fundamental units of visual communication. inthe hands ofa skilled visual designer, they can be manipulated to structure and enhance the experience of a composition, package, environment, or user interface. Bertin (1983, 1989) provides a comprehensive survey ofthe visual variables and the rules governing their effective use. All of the material in this chapter depends critically on these phenomena, so we will review them briefly. The information to be represented in a visual display is characterized by the number of dimensions (i. che things being measured), their length ([Link] ‘number of possible values on each dimension), andthe scale of measurement (¢., nominal, ordered, quantitative) for each dimension. The nominal scale supports two kinds of reading, so Bertn’s taxonomy considers four styles of perception: associative, selective, ordered, and quantitative. The visual vari ables differ greatly in their suitability for the four types of analysis. Learning to use them correctly is essential ro effective visual communication. ‘Scale, Contrast, and ProoortionIn using a nominal scale, the user is concerned only with categorizing or dif- ferentiating (nomin = name) the chings being observed. In associative percep tion, the viewer ignores variation on one visual dimension in reading the remainder of the display. A visual variable is considered associative if it does not affect the visibility of other dimensions in the elements to which it is applied. We can recognize the hue of an object, for example, regardless of its orientation. Conversely, a visual dimension is dissociative if visibility is sig- nificantly reduced for some values along that coding dimension. It can be diffculr, for example, to determine the hue of a very small dot or thin line. Al visual variables excepr size and value are associative ~ they can be “over looked” when necessary. Size and value are dissociative because they domi- nate perception and disrupt the processing of other correlated dimensions. In selective perception, the viewer attempts to isolate al instances of a given category and perceptually groups them into a single image. The task is to ‘ignore everything but the target value on the dimension of interest ~to see at aaglance where all the targets are within the display. A visual variable is selective only if the grouping is immediate and effortless. All of the visual variables except shape are selective (orientation is selective when represented by points or lines, but not when represented by area). The fact that shapes ‘must be identified individually under focused attention while other visual variables can be perceived across the entire visual field explains why a graph is more effective than a table for certain communication tasks. NZKMN NZKMN MZNZ MZNZ 15: Spe the ony vast that dose nat sari sec ‘ia because tha ctor characters in he sua ol whe hiv etectvemenicoron ass, is oot sated to econ ek Saale, Contrast ona ProportionIn ordered perception, the viewer must determine the relative ordering of values along a perceptual dimension. Given any two visual elements, a natu- ral ordering must be clearly apparent so that the element representing “more” of the corresponding quality is immediately obvious. When a vat able is ordered, there is no need to consulta key to determine the ranking of the various levels. Position, size and value are ordered in human perception: rankings based on these qualities are immediately obvious and readily apprehended. Texture is also ordered to the extent that value covaries with the granularity of the texture. ‘A: Order sna quanttatve poreptn. A natural orden is sparet-he tems can be ranged objectively rom gastet ic eaten oct ary ns vl, posson a} Oy Se a poston however, pesmi obetwejudgnent of how much rete the SHaronce i In quantitative perception, the viewer must determine the amount of differ ence between two ordered values. When a variable is quantitative, the user ‘does not need to refer to an index oF key to determine how much more of a ‘quantity is represented by a given mark. The relative magnitudes mast be immediately apparent, The viewer can immediately see, for example, that ‘one line is twice as long or half as wide as another. Only position and size are quantitative: they permit accurate approximation of the true ratio from the observed visual differences. The visual variables also differ substantially in cheir length, o the number of| disceribly different measurement levels each ean support. Shape is the “Longest” visual variable. We can recognize an almost infinite varity of dif ferent values along this dimension (ie. recognizably different shapes), mak- ing i particularly well-suited fr identification (“what is the thing located bere?) Postion in ewo-dimensional space also supports an infinite ‘number of values in theory, but in practice the limits of display size and res- ‘Sele, Cones nd Proportion‘lution normally constrain its effective length. Because even stall relative Jifferences are easily discriminable, however, position nevertheless supports ‘more fine-grained variation than any other variable. Orientation is the “shortest” dimension, with frequent visual confusions arising if more than four levels are attempted. The other dimensions fall somewhere in between. Value and texture support fewer than ten levels; size and color can support a few more, depending on the communication task. Bertin’ findings are based largely on experience, but they are supported by experimental research on pre-attentve processing in vision by Treisman (1984, etc.) and on graphical perception by Cleveland, etal. (1983, 1984), In addition, two excellent surveys have been produced by Tufte (1989, 1991), A command of these principles is essential for the design of effective information displays, to which we now return. Principles Scale, contrast, and proportion are powerful tools in the hands of an experi- enced designer. If proportion sets the rhythm of the display, then the scale of its components determines its forcefulness and their contrasts determines its excitability. These powerful elements must be used with care, particularly in user interface design, where the goal is rarely to shock, to arrest, oF £0 per suade. Contrasts must be clear enough to convey the intended distinctions, yet subtle enough to produce a harmonious relation between the elements in the display, The dominant contrasts must be strong enough to produce an effective dynamic within the display, yet sufficiently restrained to permit the viewer to remain in control of the experience. 155: Close! she cosing canbe etectva in stustont-such aac contre! and eaahazaa sseinnge-sohere dont featon supersedes instants tuned a hoice 3) aha apps {36ng2oaaiway. A ca shape ede proses 8 resundat ce thei Went en atuntors Sale, Contrast ans Prorion Clarity Harmony Activity RestraintClarity ARCHITEKTUR poe, POELZIG_ {8: cis’ yponecic itary conveys information nis ost Srnouncing 9 arhtestreexrton the Beuue,Deton by Horst Soy © 1055 ARS, New Yaa/VG-BioKurst. Bonn Contrast like any other aspect of design, is effective only when itis clearly intentional rather than random or accidental. Clarity of intent ensures that contrasts can be easily perceived and that values can be clearly equated or i gorisan | 3 i Ore Com | ty Joooelm™ wy |: Hertz] ese fo a Go | sprue BEB So, | me ExriPanl tothe across 68 conto une ‘eona tonewe Seen acedwnetevr thy woud wee ‘epntortner tecton magananton ore nso feo In contrast ro these classical composition systems, which evolved over hun dreds of years and embodied the craftsman’ respect for the integrity of the sacred artifact, today’s windows and dialogs are ad hoc and highly arbitrary, seemingly thrown together with litle thought or consideration for the rela tion of one element to another, or of anything to the whole (65). This is beginning to change, however, as design firms increase their involvement with large scale, multimedia information systems (66), and asthe focus of GUI software moves increasingly beyond the realm of graphical editing tools to the much broader world of content delivery and presentation. 166: Te systemic your schame used inthis muted poducton fr Asp Computer alae ‘ements nthe competion ane rote and tote svean-space ifarnaton presented athe eosin and nghhane margin. Oesgn by Clemant Mok dete, neAotivity o (07: Sharp const a act to posters by Horbrt Mato fa and Joseph Mole Broctmenn fb) Elements in contrast exert an influence on each other that exaggerates their contrasting qualities, Posters depend heavily on the resulting compositional dynamics to draw the viewer's attention tothe focal point of the message. Herbert Matter’s travel posters (67-a) exhibit strong contrast berween fore ground and background elements. The ewisting mountain road contrasts ctfctively with the foreground close-up of the roadway surface as wel as withthe monumetal Alps in the distant background. In similar fashion, Josef Miller-Brockmann’s concert postr (67-b)caprures the dynamic ten- (8: The superarepie Sans creates tame tension tough conta Doth ht oF he Big a # “nomal" sgnage, Frm Bas T0370 with Leto by Rusa Roepe. ABC Varag,2ureh, 1067. Oengn by Gale Cate Sle, Contrast and Propostonsion apparent in the music of these 20th Century composers with the drama of its strongly contrasting thick and thin forms and its disquieting diagonal orientation, Contrasts such as these provide visual interest, especially when familiar elements are presented in unexpected ways. Giulio Cittato’s super- «graphic building sign (68) is an example of the excitement that can be cre- ated by juxtaposing familiar objects at unusual scales. Such monumental signs may be inappropriate in some circumstances, but when used to support an important communication goal, their effects can be powerful indeed. Graphical user interfaces can exploit the activity generated by effective con- «rasts to help users maintain orientation and context, In the graded, three- level input focus feedback provided by NeXTStep windows (69), for exam- ple, the black header of the active window is easily distinguishable from the lighter headers ofthe inactive windows. When a pop-up window receives the input focus, the window header of is parent lightens to a medium gray that contrasts with both the black header of the key window and the lighter gray (88: The usa, mut-evel put focus feedback in NeXTStn uses const in vai to recy ica Shen window ie nve,aswhon a scondan window bosomes stench pst wow tis vcated with Gecaise vee an ores mansion the mappings bth rata ans OvONS, of the inactive windows. Because value is dissociative (Bertin, 1983), the per- ceptual dynamics of this coding scheme are affected by the medium gray of, the sereen background and the white of window data panes, both of which ccan act to disrupt the code in certain window arrangements. When the user's attention is focused on the window headers, however, the naturally ordered perceptual scale allows the gradation from light to dark to map naturally to the semantic relationships among windows. Sala, Contat and PrpertenRestraint 70: Tho subsist psi ananogatve space nthe Japenese shojcreen sade posse Iytnesosoute equity ote spacng between ements song tha hruonal nd verte eves, byte ecko stactngvaraton nthe foo! the earants hemes, Phot by Sexo Sat Contrasts should be strong, but few in number. When too many contrasts are drawn, when too many scales are applied within the same design, when too many proportional relationships are established among elements, the resulting chaos makes effective communication impossible. The most suc- cessful designs rely on a few basic contrasts to establish order and visual identity within the work. The elegant Japanese Shoji screen (70), for exam- ple, employs only a few different modules in the thickness of its structural ‘components and the widths of its paper panels. The regularity produced by climinating all other variation makes the critical proportions more apparent and enhances the transparency of the screen as a whole. 71: Understatement ned not imi communication i ag basad on ste contasts each cof hase erarpec. 2 ste verti postion lo atertaton cl snag o cone he rtanded meaning (Design oferty program for Tachi cosmetes oy Pear See, Contras ane Proartensystemtechniseh 1 systemtecbriseh cond Software wl Software 4 anwendungs- ) Inlegration Tex? tecnnech 2 Grabieund'aia ~t > QUALIFIKATION: icorbeiter/Serzer susrecnender Kennnsstand a/osin Nachechulung a/s0in “Inbaber /Disponent-quies taclich/technaches Nivea [a/nein uaitstenterosee gut/fundiet |a/nein starkeskaulmannisches Interest ja/nein Schulung site angeboten werden ja/nein 72: Thavenraneduse of contastn hi ory MetaDesign ensures hart! panting ments 9. the ed trang and bd heaainel wil emarge atoraticay Vom the ge. The ea tanga be iohncton lec asan ateactorprecsly cause tere are ered asratorsin te depay ‘Contrast is always most effective when limited to one ora few dimensions. Note how the visual impression of a bunch of grapes can be captured by varying only the spacing between grapes (71-a)-There is no internal detail and practically no variation in size. Effective visual identity progeams are often based on simple repetition based on translations ofthe same basic forms. The identity marks for Tactics cosmetics (71-b) and Sun Mierosys- tems, Inc. (71-c} both rely exclusively onthe selective rotation of elements in 2 regular pattern. Eliminating distracting contrasts on other visual dimen- sions makes the movement and articulation of the basic forms more appar cnt, When the user can see how the configuration is constructed, the surprise of an unexpected approach adds visual interest tothe resulting display. Effective visual design uses the compositional dynamics produced by effec- tive use of contrat to enhance communication, not simply to add variety oF interest. Contrasts are conscious, few, and never overwhelming, Gratuitous graphical embellishment are never added as decorative afterthoughts or used simply because the technology is available. The small red triangle in the form above (72), for example, is designed to draw the users attention to a critical area not simply to entertain, The subtle background texture created through the use of a consistent gray tone forthe questions and even the check boxes ensues that the suitably emphasized titles will “pop” visually Seale, Conrast ena Prosaren 6?© Te 4 Oo 6 ao dd 1 B &@ 4 ao & 2 7: Resvaines visual osngin those images from Aldus nora focuses atantion on te es Irsctantterences and ows the alignment cvs fo be pected ave esiy and sce from the display and become immediately apparent to the user. This princi ple has been understood by cartographer for years. The predominance of ‘muted, unsarurated colors inthe large background areas of a well-designed ‘map provides the setting needed for the striking prominence of small satu- ‘ated color elements used to identify important landmarks and other points of interest (Tufte, 1990). 1c Libary parts the contest of aisingushing te non-stngushng esues = ‘inmge thin ‘The same principles apply to the visual codes used throughout GUt applice- tions and environments. The diagrams in Figure 73, for example, represent various options for aligning and distributing graphical elements ina drawing program. By limiting contrast in the elements being aligned, the relationship between elements (or more accurately, between the elements and the line that indicates their alignment point) becomes cleat. (Compare these exam- piles with those in Figure 29-c, where the much greater variation in shape, size, and orientation of the sign elements makes the “reading” of the rela- tionship far more dificult.) The same technique is used in the icons from the Zine Intepface Library (74), By abstracting away non-critical detail elements (text becomes lines, etc) instead of faithfully rendering every pixel, the icon- set helps users focus on the critical differences between images (such as the various field-specific punctuation characters) In each case, limiting contrasts to those needed specifically co communicate the information of interest ‘works to enhance selective perception and thus simplify the task of extract- ing meaningful information from the display. Seale, Contrast ana ProsrtonCommon Errors ‘Common errors involving scale, contrast, or proportion typically involve contrasts that are too sharp oF not sharp enough, or figures that relate poorly to their ground. Some specific examples include: Mignment__ ss Cx«_) Eitercat w@ mga Covtebute te ca Stener Stum OOO Shige "os | Stan Seanar Sait, Ome [Leanonscntt Saige” @atnore © 78: insufficient contrast. The effects of tion can be called out to help guide the eve teomuch andoa itis contrast are surris- through the layout when the typagraphie ingly smiar. Both make laments cffiult_unitorrsty is this dominant. Sometimes te dstinguish resutng in an undirected contrasts must be exaggereted beyond Uniformity atthe one extreme and utter “realistic” levels in ord to have the e- chaos atthe other. Lack of typographic sted effect hI these folder icons, the contrasts a problem n many esy Mac- upper image is mare physical accurate, intosh dislog boxes, Mostreiod exclusive: buttheimpression ereatesis weaker due lyon the Chicago font, which made it to inadequate contrast between folder Oitficut to vsualyestinguish labels trom height and ta height, The lower examcle values and subsidiary labels - both within exaggerates tha tab to move strongly cor ‘and across controls. Note the homoge- vey ts identity as a folder. in essence, the neous “wallpaper” eect thet effectively Gut depends on caricatures ofthe objects ‘masts the intemal structure of this dialog being reprsonted, so tis approach is per box from Aldus Freehand fa). The word fecty appropriate, “ign” appears in four diferent places, ‘with three siferent meanings, but wth no typographic coding to help underscore the distinctions. Very ite structural informa ‘Scale. Contrast, and Proportion” @ Ascending Obescending 76: Excessive contrast. The excessive ‘ypoarephic convast seen in these aaiogs from the Kudo Image Browser i also @ problem. This dialog box contains no less than fve diferent ype sizes in three dit- ferent fonts. Note the apparent ack of 0 son behind many of the typographic Cecisions ~ why is th Chicago font used inside the “content ares” of ane clog but nt the other), why does ane win ‘dow (o) contain a bution wth alight sans sori labo, why da the tw dialogs use ‘iterent fonts to label their bounding box: ‘957 To make matters wore the fonts are similar, but not visual compatle, A ca Ginol le of typographic design i that fonts rar aitfcent families in the eame ‘Seale, Conrast and Proportion style of face (eg, serif or sans seri) should not be mixed under any ecu: stances. Finaly the fonts are used incor ‘ect, since in one window (a, the loss ‘prominent ypatace serves a @ higher lev be! forts more prominently abel in ‘Chicego) subordinate control, Gaish color schemes are another familar example of ‘the same problem. In both cases, somany contrasts ae being drawn that rone of them can emerge and contrioute to the ‘organization ofthe display.@ File Edit view Fonts Amber » Blue » Avant Garde Conery Yellow D Bodors Green Bookman Grey » Chicago Mustord » Courier orange Futura ‘fchre » Monaco » New Century Schoolbook Red New York sand EyuBoa violet Zapf Chancerg sOevAe oy 7: Visual interference. Contast an one textithinwich to splay subte variation visual mension often disrunts the ro- in color and font. Perception fs dominated cessing af visual informaton on other d+ by both the background and the surround: ‘mensions. Ths isthe phenomenon ing elements, and the smal sie and it termed oissocative porceotion by Bertin ed scope ofthe label aely provides an 11975} One common example is seen adequate preview in ny case. The resultis \snen font names are Geplayedin air c- almostalwaye a viualy disorienting ds ‘ual fonts a or color names in their actual play that makes processing al ofthe infor- colors fbr, Aside rom the fact that some mation move etic. ‘values (such asthe current background Color and any Symibal or Dingbat fonts), are inherectt pathological, this wellinten- tioned coding is rarely Sufiien to identity ‘he target. The thi, inar elements of ‘clabals provide a very poor con “coals Commact ond Prenortion (o)© Spatial tension. Because screen resh lest is always ata premium, the ternata- ‘ion fo consume as litle space as pessioe for each window ie often overhaiming, ‘Spatial tension occurs when contrls (or Contos and woe's are placed 10 cosely tone another. I's hard to magine a bet- ter example of his problem than the ex ‘wemely tight even overapaing, spacing betwen labels and contros in the Macin- tosh System 6 Print Monitor i. Tension also arises whan figural elements are 100 large to fit comfortabiy in the avaisbie 10und, as in the various arrow controls Above (bln each case, the arrows ox tend 00 close tothe border, and the unity ofthe sign sutfers asa result. Misery win ‘dows era thar contents and make un ‘Seale, Conta, and rosortion necessarily ficult to extract information by fang to prowde an adequate ground Upon which an appropriate gba! figure can be formad. The Preferences cslog shove (cl exnibits this problem wel 3s. intererence between its closely soace0 controls. Note the contention between the boundanes ofthe stacked textfilds 93 ‘wells the tension created by the very narrow gaps atthe top and bottom of the og,<=} [sr (a) = Jb) 178: Overextension. Aess common, but window. Unless an extravagant — even ar- sbllsarouspratlemarises whenwindows — tistic- effects intended, the action of {ar8 too lage forthe information they con- this much space in the margins and be tain, Usualythisoceursaecause the seme tween controls both wasteful and vsus- window's Being used to display mutiple iy discomfortng. The extra space does chunks ofinformation one chunkat atime, ite except obscure contextual informa as inthe orginal Genera contro panel). tion thet might otherwise be proved by \When the chunks vary widely in siza, tho restof the aislay. In ths exarale tO) some afe bound tobe too smal to te- a ansiant tested can appear inthe gap grate etectvely withthe space in which below te frst sroling Ist, but ts used ‘hey re disolayed. The problem can usual- fa too rarely to justly the wasteful lyout. Iy be addressed by reorganiang the infor ‘ration to reduce the variably betwoen ‘groups. Other prablems with overexten- Sion involve poor use of space within the Seale Contrast end Propertion ogHae i. ae ‘20: Awkward cimensions. Exremely place. Windows or controls that are aispro- large or small windows (a) relate poory to portonately tal or wide (b) can produce the sorsen or window context within _simiely awkward resus. Dialog boxes hich they appear. Aside fom the obvi designed to handle very tong message {us functonslarobiem of obscuring the stings often introduce this problem. Th testof the dsalay, very large windows ate mote general awkwardness a “incorrect” visually iscomforting because they a proportions is aso seen frequently when ‘most fout not quite fil the cispsy. They fami objects that cfer widely in scale ‘20 tend tobe visualy disorienting, see and proportion ae forced inte a commen ‘they obscure most, f nt al ofthe win- display unit, 98 n the e350 of the widget {dow from which they were invoked. Vary icons used in many Gut development env ‘small windows that are simlary unsuited ronmects, to the contextin which thay apoea” can be ‘equaly troublesome, They are easy to “mispiace™ during the norm course of window management and in busy dis- play, may never be noticed inthe fst 74 Seale, Conrast and FropocionVisual amtiguty, ike val ambiguity, cbseues nat ony urposetly uncaa hey shou mamense o canvas, tact oF ‘Arima of Vial Literacy Techniques Scale, contrast, and proportion are among the most subtle aspects of design. The populacity of classical systems of proportion reflects both the difficulty ofthese problems and the desice for foolproof mechanical solutions. Theee simple techniques, while falling short of an automatic solution, ae relevant ‘to most interface design problems: ‘Establishing Perceptual Layers ‘*Sharpening Visual Distinctions ‘Integrating Figure and Ground Mastery of these techniques requires extensive practice, but the underlying Principles are not difficult. The ability to perfectly balance the interplay of scale and contrast comes only with experience. The boundaries of insuffi ciency and excess, however, are easier to define, and itis here that we begin. (One trick that is especially helpful in al ofthe following techniques (and ‘many in the subsequent chapters as well) can be described as the squint test. ‘The squint test can be used to simulate the early visual processes that form the basis for perceptual organization and any coding effects operating across the entire display. To apply the technique, simply close one eye completely and “squine” the other eye to reduce the light and disrupt the focus. Looking atthe entire display, try to identify the features of interest using only that eye. Lean back from the work, if necessary, to make it easier for your eye take in the entire composition. Anything not readily apparent to the squint. ing eye i will not be apparent “at a glance” in the finished display. “cca, Comumet arch Promarvion Layering Sharpening Integration ‘The Squint Tostfted reve ne densi om dominting entre (See aso Clr Pate 8). Establishing Scale and contrast can be used to divide the display into a few distinct Porcoptual Layers regions or layers that are processed selectively or in a predictable sequence ‘Maps for aeronautical navigation (81) replace most ground detail with addi ‘ional information relevant to the pilot. Because flght-related and geograph- ical information are often spatially contiguous, an effective layering scheme is essential. Contrasting color, value, and texture are used to segregate Be0- ‘graphical from flight-related information. This allows the most important features (airports, radio beacons, altitudes, et.) to emerge clearly from the Focus munication-oriented visual design. The central element of any successful Flexibility program isthe gid, which provides a unifying framework for the diverse Consistent Application elements of the system. This framework must exhibit a focus that is natural for the information being conveyed while retaining the flexibility needed to eal with a varity of communication problems. The need to reinforce the program through consistent application of the framework must be balanced against the need to make conscious exceptions in dealing with unanticipated material. o =z cc x 140: Tale coo sgnageamptoys stand vu anguage combining textual and graohic rotatons, Because the sgn a0 used fay constr troughout a ain’ roadways et ‘neansge Desome Sarat agance: ta the experenceé aver.Focus 147: Aviso osu onthe unt causes sxpsreta bot paste ana negatve soacein fis concen pottery Jose! Miler Stockman [Any successful program should have a clear focus on one or a small number ‘of modular units that reveal the underlying spatial logic of the program. In this exquisitely-structured concert poster by Josef Miller-Brockmann (147), the square embodies the basic unit of composition. Virtually every layout decision can be traced back to the size and position ofthe squares in the central vertical column. Major spatial divisions are multiples of one, one half, or one-fourth of the unit embodied in the basic square. The resulting display ensures that each element is tightly integrated with the emergent ‘whole while retaining the playful sense of randomness and freedom needed to characterize the music it promotes. "The same crisp focus on a central module is seen in the Japanese tatarni meaning, “grid”) mat system. The tatami system uses a dynamic symmetry based on the double square (148) to produce a space with clearly defined subdivisions upon which the traditional tea ceremony is based. The module "sed in the tatami system is based on an appropriately human-centered scale to bring important points on the “grid” within easy reach. By using the same grid to structure the dimensions ofthe tea room itself, the tatami sys- tem allows the common focus to unify the person, space, and actions.148 Th han scale 5x8) fhe aa ‘hat gavin bth te actone ot partons A clear focus enhances the readability ofa display by introducing a ehythm and regularity chat makes make the structure predictable and explicit. These qualities simplify the movement of visual attention across the display by allowing the viewer to unconsciously estimate the distance between resting points and to skip over uninteresting portions when necessary. In this sense, the well-focused progeam functions very much like a spatial map of the information domain, Musical scores (149) provide one of the finest exam- ples ofthis characteristic. Despite their flexibility and occasional complexity, they must communicate clearly and concisely to allow the musician to effec- tively divide attention between instrument and music. 149: 4 can focus on a wellchaean mode reduce 9 sual yt tha asses he oye vhs pataming eae Acer unaaring unt alco allows an mage obo read as 2 spats) ‘rap representing tereorlosnisteal phenomena Mode and Progam 139“0 au stabi [GREETS] son rewsen Sau [aaa [a srousings | | Paseo seoe Tis.) i | sre = eesty| [ETE] = is ~Lengthi [7TH] characters. 1150: The focus ona key dimension nthe design of wipe set allows a sive, parameteczed ia sytem to Be wrod trousren the OH ods. Bosse each tages suctred nteltan to he beeine oe fypegraanc lee, he wpe cn bo try combines wth unorn seca na sana gs [A well-defined focus is essential in the graphical user interface as well. Indi- vidual applications and even layouts within an application will inevitably define their own higher-level seeuctute, but important structuring devices are established most effectively at lower levels. A GUI standard, and ideally the user interface toolkits that support it, should provide mechanisms that make the systematic sizing and positioning of user interface elements the path of least resistance for the developer. In the OPEN LOOK Gut, for example, elements are scaled and positioned according to a module based on one of four standard font sizes. Because the user interface elements are designed around an common module (the font size) and specify a common reference point (typographic baseline), a simple set of layout rules defining the canonical property window layout yields su prisingly credible results using only a single parameter. Designers position clements relative to the layout grid shown in Figure 150, Controls fil the window uniformly from top to bottom with the designer leaving one unit of space between controls, two units between groups of controls, and no extra space within controls spanning multiple rows. ‘Module and Program,Tre ince Patty an nar rnge of Aran Frutgars Univers typgracle rogram at tone oft most usaf Tarts aver easton The rt Sait the nuboreg sytem estes the weight al he oc, wlth secendineates btn fhe eet wd ana ant even numbers denote ‘icles oda nears conote erasing naow Roman faces wth" th norm mother {ise From Typographic Design Form and Cammuneston, Cater, Day. an2 Maggs 65) Flexibility in dealing with unanticipated situations isa hallmark of any sue- «cessful design program. The best systems are consciously designed to encom- pass boundary conditions, since this is where breakdowns most often occur. Few systems provide a better example of this approach than Adrian Fruti- ‘er's Univers typographic family (151). The boldest and lightest faces push the limits of legibility, and the remainder of the program is designed to uni formly fil the space berween these two extremes. The individual faces shaze aseender, descender, and character heights, allowing the varieties to be freely intermixed and the broad selection of available weights allows the family to represent almost any typographic contrast. A similar flexibility is seen in the identity program created by Paul Rand for the design studios of DEO (152). The individual elements can be presented in a wide range of permutations while still retaining the connectivity that "Ba Masta ye Men BSG gap 182: Th oni ott eoyam created by Pal Rand for Pont Assocatesrefactshe este, exalrtary ayrame athe design proces tea nts ogra, the weiyng ert ot "err in wien he clomants pea, bt ater, Ee rules tet Sove tek connect “Mowlule and Progran Floxibitity1188: These unusual rid designs by Kart Gerstner a and Josef Mile Brockmann ndescoethe feta of gebaed design, The gis aol reficig the oveing ‘heme ot the rogram, nota svaghscket mo which ean new design must Do coors ‘nen the esurements ta prog exarge, the ed mur change a defines the corporate identity. The flexible application is particularly appro- priate in this program, since it emphasizes the wide range of capabilites and creative focus of the company. The importance of flexibility, it should be noted, does nor eliminate the need for focus: in fact, flexibility makes focus even more important if the programmatic nature of the design is to be made apparent. based on ne gi in iu 163) shows te ‘orator of te neta stu fhe photographic slmnts wh the 9s ‘treed down by the gid Oaogn by Jost Muar Bockman ‘Module and ProgamLayout grids can provide flexibility as well. Karl Gerstner’s grid for the Swiss magazine Capital (153-a) is complex but recognizable asthe internal struc- ture i grasped. The grid provides fortwo, thee, fous, ive, oF six column layouts, each defined by a series of squares that grow smaller as the number of columns increases. The wide variety of layouts possible within such a flex- ible system contrast sharply withthe closely synchronized advertisement series (154) designed by Josef Miller Brockmann using a much more prob- lem-specific grid (153-b). This example shows thar grids need not be restricted to simple, regular constructions, and that they can be varied to suit the unique requirements of the composition of the task domain. Layout programs developed for Gut applications demand an additional dimension of fiexibility in supporting dynamic layout. Since windows can ‘generally be resized by the uses, they must be able to recompute thei layout ion demand. Most toolkits for the X window system, for example, support some kind of higher-level geometry management system based on con- straints satisfied continuously asthe window is resized (155). In this system, the grid is defined relative to the current size of the window (expressed as a percentage of its overall dimensions) rather than in absolute terms. While the designer may choose to enforce @ minimum of maximum size for the window, users are otherwise free to tailor its dimensions to address the demands of the task. 188: Corstsint based tools permiting “onthe layout a windows ere ceszed bythe use ‘nur gna sstems vith te leit a support dynam contguationConsistent Application 1186: consistent you, tyograny, mapery, and cle characterize the exquste Dutch pet cu tency designed by ROE, Oneras From to 820 a poston of te dovomination ota sry tte porvats, hese ls exeroty te untyn doers tat fos be coe ot vey poga S0e oor Pte 8 or actor wampes) Pans couresy of RC Pulstone, Ie, New York For any design program to be effective it must be used consistently wherever it appears to ensure that its programmatic aspects will become visually apparent after even minimal exposure. The rich visual texture and extensive use of color and layering in the Dutch paper currency (156) are central aspects of the visual identity of cis widely recognized progeam. The rich, coloefl designs play a functional as wel as an aesthetic role. The high end materials and processes needed to reproduce the delicate engravings and pat tered overlaysare intended to make counterfeiting difficult, if not imposst- ble. In addition to is saturated colors and rich textures, the Dutch currency 157: .crpratecarty bncomes apparent only en the sul inguge senna ideny ‘with the modern corporation. The program becomes the public mage of the company. (Module and Procramemploys a standard layout grid to produce a tight structural consistency across denominations. Note the consistent size and position of the portrait, denomination (both verbal and numeric}, and texture band in each note. This visual consistency ries the bills rogether in a coherent system and is an essential aid to users who frequently need to thumb quickly through a wad of bills under poor viewing conditions Corporate identity programs depend heavily on the consistent use of color, imagery, and typogeaphy to establish a clear visual expression of the values, culture, and image of the ethereal corporate entity. These programs pose reat challenges for consistent application because of the bewildering variety of objects that must receive the corporate mark (157-158). The program's elements must be applicable with minimal alteration to objects of vastly dif- ferent scales, ranging from monumental architectural signage and vehicular graphics through product, packaging, and collateral, and on down to forms, stationery, and business cards, Successful identity programs may exploit nearly any visual characteristic, but the selected characteristic must hold up across the full range of applications and it must be applied consistently in ceach of these contexts Interface applications for programmatic design have requirements that are surprisingly similar to the corporate or product identity program. The famil iar “look and feel” of standard Gut environments such as the Macintosh Desktop or Microsoft Windows helps users know what to expect when a new dialog box appears. The consistent appearance, placement, and mean- ing of important visual cues make i easier for users to interpret and respond to new situations as they arse. Like the harried consumer thumbing quickly 1158: neon tothe pedir manvctzed by he cororaton, a sorperaeaentiy rogrm cross ho pysical ar, equprant, ito cola nator «wise vaely veto an ols ters, eh wth ts own spac aeaie and material requ6 | cover Page Paper Source: @ Paper Cassette © Manual Feed 1189; The stances Prin aig used consent by vtuly al Macioeh apleatons {resting common part of reference even fr elavelymexparncos vers through a stack of bills, users often scan quickly through the dialog boxes in a GUt application, searching for a command or control whose location they have forgotten. Visual and steuctural consistency across windows, menus, and dialog boxes is as important in this context as in che paper currency described above. ‘A coherent layout program extending across applications (159, 160) per- mits the user to momentarily “ignore” familiar areas such as the response buttons and dialog title and concentrate on the areas containing the relevant information, When a portion of a dialog box’s functionality is shared throughout the environment, its consistent presentation allows users to insanely recognize the common functionality and use tor ignore it as nec- essary. The template for the basic Laser Writer dialog (159), for example is Incorporated as a unit by most vendors, even when the vendor adds signifi- cant application-specifc functionality of their own (160). The global consis tency that results enhances the transferor learning across applications and helps users work more efficiently: ge: NOC First Page Cast Page Paper Source: @ Paper Cassette CManual Feed int Selected Area Only Encosing: {Glerint setectea thonnet Oniy ‘asc Clrrint using Cotor Postscrint on Cearrect ror Printing Colors 160: Fr apaicason-spects extensions tothe basic Pt Hector, progerng the layout an unctonaty of te stand dag tan grove fara an forte ey ‘ctenaiy od and ProgrCommon Errors Programmatic design applies within as well as across windows at both the application and system sofeware levels. Failure to establish a coherent design statement at each of these levels is all coo common, 161: Arbirary component postions. By {ar the most common shortomring in the ayout of exstng Gul apoiations isthe naphazard placerant of contels and un- systematic vaianan in corto sizes. The rent goneravan of Gu took, again, atleast partially responsible. Since the de- ‘ult bouton width in mosttookksis based ‘rectly on the length ofthe button label the sizes of he buttons ae oer no more closely related than the lenaths ofthe lx bels. The policy is especally disruptive when the buttons are stacked vertically, ‘raking the length ¢soarity particulary ap- parental. While this approach may con serve. small amountof screen realestate 1 extension ofthe texted into space “barrewea" from the Prt button) the savings are minor and hardy justity the isorganizaton that results. The mislead ing "inforration® provided by the vaiaton button lengths has po relation tothe us- les task, Its simply an artifact of the la bale chosen, Similar distractions are ‘created by components whose sizes are aimost but not auite-idonticaland which Droduce the soc of "near alignments” de- Serbed in the preceding chaptor(). The tight spacing ofthe conta in these pal l’ttes makes the near total lace of aig ment painfully cbvious. Effective program ‘atic design establishes positions for tach element, inaction to controling the forma qualities ofthe elements them sabes, Module ad Program148 Keywords ® 4162: Arirary component dimensions. In the oxginal Bugtoo UI a, the space conserved by shvinking burton widths to ‘match abel lengths was immediately squandered on the seemingly arbitrary po: Stoning of the buttons themseves and in the distracting large and non-uniform 1208 that separate the buttons inthe top row. Even in the vertical button stack, the reclaimed space has not been re-used, since te fields ae (as they shouldbe left aligned. Note the shortening of even the button whose label ("Resp Mar." has been abbreviatos, While other component groups are at ines aligned internal, there ae few i any relstionshins across ‘9r0ups throughout the window. Ineonss {ert sizing onthe vertical dimension cre ates 2 similarly disquieting eect in tas edule and Program Catalog “current Cama) directory eta of calog buttons trom a disk catlog- ing uty), Note the use of fou ferent button heights each with norelation tothe ‘thers. While Undoubtedly based on de- fensible reasoning (the larger buttons functions ae presumably more important than tose of the smal buttons), this style i both globally inconsistent - when ‘compared to calogs in other Macintosh apatcations ~ and local inconsistent ~ ‘when considered in salaton, Users of his dialog are more likely tobe distractec than teightenec by the unfamiar code based Con variation in button heights. With such 9 small set of vsual elements, these ofthe ominant porcuptual eves clearyoverk particulaly when each ofthe elements a Feady has a “cancriea” locaton inthe stander lsyout paradigmmec 8 en 163: Ranciom window sizes ad isyous. Programmatic design of secondary win- dows and dialog boxes is rarely seen in to- 1ey's Gut applications. Because they tend ‘0 appear in Soltion, dialog boxes are not Usual viewed as part of a series by the veloper. The user, however, encounters ‘zens if not hundreds of dialog boxes na typical workday, andthe ack of ary ral cporsination has functional as well as aes ‘thetic costs, Each ofthe five window aye outs in this example displays diferent subse of the funciona in the Wo: space Properties ciziog or OpenWindows 2 Each layout corespords 10a choice n the “Catesory" menu, which can be used tonavigate direct to anyother "page ‘within the same window. This high e- ‘quency operation should be simple and swsightforward, but because the layout ‘822s are completely urvelated Inote that ‘no two dimensions match on any ofthe ‘windows ~ nat even positons of the erith al Apply ang Reset buttons), the process 'S slow, awkwar, and disorienting, The window grows, shrinks, and changes its proportions so racially thatthe familiar im pression of paging through a porsstent ‘wondow ebject i completly cirupted, When deaing with unconnected dislog boxes the effect i less pronounced, but stil significant. Tough some variation in ze inevtable, gen varying levels of Content, the dimensions and certainly the layouts can and should be more modular than this, Mocks ana Penman twa.160 $64: Unelated icon sizes and imagary. Jeon, ike buttons, are typically presented in arrays and should therefore be sized consistantly to aveid alnment prblees ofthe kind seen in Figure 163). These desktop icons ftom OpenWindows 2 (a) are consistent (with two notable excep- ens) in ther overal size, but vary greatly in their layout and typogranhy, and in me scale, viewpoint, and density of the imag- fs themselves, Some images are 0 ge ‘that ha label must be tendered within ‘hei boundaries, while others re so smal {co player or ight older as to seer out of place wen compared tothe rest ofthe icons. Substann! variation in line thek= nessand eve of detilcan be seen across icons (co player, calculator, wastebasket, and atleast four diferent typefaces and Modul na Program three siferent capitalization policies re apparent nthe abe’, As might be expect- fd, these inconsistencies aase largely be- cause esch icon was produced by the evelones of the corresponding tol with litle er no coordination among deveion- ment groups, with exstng artwork rom ‘muttple sources) being used wherever possible, Whenever the images in@ set cannot all be produced by the same de Signer, the role of expt. wntten sta: {ards is elevated from helpful design tool ‘© essential coorsination technology. The redesigned icon set for OpentWindows ‘Version 3 fb] adopted & more consistent image ze, orientation, [Link] {7058 Tools, resulting ina heightened i ‘98 aualtyanga stronger sroduct entityTema! CIB 168: inconsistent contol presentations Fathful adneranca to the conventions 28: ‘ablshed by the target Gu enviconment appears tobe one of the more ciicut Challenges facing the develop today. While the urge for creative expression is increasingly being suppressed in mal stivar application development it conte 15 0 the among developers of utes and periperal applications in nearly every fenuzonment, This deta rom the Anubis armating Utity ia shows one ofthe ‘rote energetic voiatons of tha Macin tosh conventions to date, The t-olored radio buttons n which the curren choice 's marked by a blue dot contered in Centric whita and ed crcl, are remins Cent of the colorful oundels used as a ‘att insignia. For added interost. the dark iotmss convent DM, Denes Display: (5 Future UW (Bees ‘eckgrounds “marbled” wth a random dot pattern. An even more unusual form of radio butonis seen in the E-Machines ‘moniter configuration pane (o. This wi dow features 3 row of conrls that 100k lke cornmand buttons tn a different Gu ‘stondara) but act ike radio buttons, since ‘they retain state tthe button onthe far lft selected, not dsabled) and conto! the Ceantents of the window. Stil ath visu inconsistencies must be atvibuted to shortcomings inthe Gu standora ise The unusual slider contols seen inthis and ‘many other Macintosh apptcation, for 8x smple, ae a by-ptoduct of Apple's curious failure to specty the sont of generic sie sual defined by most other Gut environHeskscon tt ===! oe re 166: Inconsistont visual language. When the wsvallanguaget a particular GUI sta dard isnot used consistently hyoughou the user's envionment, its ality 19 ren force communication is great cimir ished. Racca! departures from convention often produce adverse effects that extend wel beyond the offencing produ. The DeskScan uty fam Hewlett-Packard ia uses nonstandard “reverse video” wir ‘dow Borders that disrupt the Macintosh active window feedback, since the dark {ray tte ares is are prominent than the ‘ctive window header even wh DeskScan does not have the input fous, Uitmay also be tho onty Macintesh app tion ever wth menus inside the main win ow) I sma fashon, Apple's CO Remote desk accessory (b) shows that Prom Caen is) & ‘even utlities supplied by the vendors ‘thomselves dont necessary respect the visual language conventions of thst ver dor's own environmert. The window ‘ich pays uso Co's on co reer, typically remains on the ceplay after users return other primary applications. There, its age black rectangle itorteres visually with both selection and window focus feedback, since its easily the most pxor inant ebject onthe eispiay. Nor-stancard ‘applications fe these always feel out of piace in standard Gul envionmant. Even ‘when competently executed, the overly istinctve aplcation eventually becomes fan aesthetic tant, pot an ovtnght det: ‘ment to performance,‘Te essence of rythm ene tuslan of sarpaness and novelty othe sstle never esas the esse unity of he pater, the oes Ceo the const ain am ho novo th Seta [Alfred North Whitehead Pringles of Natural Knowadge Techniques ‘Module and program are especially relevant to graphical user interfaces. Unlike a poster, letterhead, or logorype (any of which may involve only a single, static layout), a graphical ser interface almost always includes many different displays ~ in the form of main windows, secondary windows, dia- log boxes, and tool palectes. Three important techniques can be used to help the displays work together and bring a sense of regularity and predictability to the user's experience: ‘Reinforcing Structure through Repetition ‘Establishing Modular Units +*Creating Grid-Based Layout Programs ‘When creating design programs, the techniques of organization and visual seructure for static displays must be extended to develop common local structures into themes that recur across displays. The rules of static layout still apply, but special attention must now be paid to the global ramifications of every local design decision. Med an Poor Repetition Modular Unite Grid-Based Design 183Reinforcing Structure through Repetition _sructue that binds togetner this stananery progem by MetaDesign - A progcam’s thematic character can be reinforced by repeating common ele ‘ments throughout the individual participants. Simply repeating several ele: ‘ments in a standard location can hold a loosely defined program together. In the stationery system in Figure 167, the bright red bars and reversed typog- raphy at the top and right of each piece unify the diverse formats while keeping most of the “image area” free for content.A similarly non-incrusive repetition can be seen in the “droplet” pattern used in the Trevi identify progeam (168). The repetition of circular elements throughout the program reinforces the nature of the product while enhanc- ing the continuity of the system as a whole. In addition, the emergence of an incelligible foreground image from a regular background composed entirely of the same formal elements is inherently interesting ~ as witnessed by the near-universal fascination with repetitive pattern throughout human history. Structural repetition is particularly important in user interfaces to online information systems where effcient navigation is of critical importance, The online catalog for Intellimation (169) exemplifies the orienting function pro- 169: Srucual lenis nat ar rapeted across sr0ens eg, th con in the upper th He ath murine bude eral pp or onntaton sna nevgtn hese Sean dosers rom a alin state xteg| Design by Haen Wares and Assocates, vided across screens by the careful repetition of structural elements, The continuity ensured by consistent placement of icon (upper let), ttle area (upper right), and navigation buttons (lower left) across the various screens is essential for efficient movement through the product space defined by the catalog. While every region contains standardized content, these critical areas exploit visually invariance ~ their size and color do not change from screen to screen ~ co maintain visual momentum across displays,186 ‘Thin lines ~ or rules ~ can also be used effectively as repeated structural ele- ments. Rule reinforces implicit structure by making it tangible and visible. It provides natural lines of movement that lead the eye from one part of a ‘composition to another and satisfies the human desire for order and struc- ture in the visual field. The rather ordinary layout progeam in Figure 170 depends heavily on the rule linking dialog title with response buttons in cach window, Rule is the most flexible clement on which to base repetition, since it occupies practically no space and can be introduced to any region without significantly affecting the balance of the display as a whole. = —_ ———— (etm set 1170: The sola epcttono sane comeonent groupie Ine inking tio deauk ton rest entances te apparont consistoncy of hace aalogs om Aus Freehand Except or he Fewievelyponaphe canveton, none, the sin nous Pave i le commen Rule is most effective in splays that are otherwise devoid of linear ele- iments. The biggest source of interference for any rule is another rule com peting for the viewers’ atzention and offering to lead them through the composition along its own route. Instead of beating the user over the head by expliccly delineating each contout, consider suggesting the visual organi- zation implicitly using negative space and alignment ofthe elements them selves. The three lower components of the ubiquitous bounding box, for ‘example, are usually redundant and merely add visual noise. A simpler sys- tem using only the topmost line is usually just as effective. Modul a Programule has the additions rareotepropey af seeming to ered ‘weak design ean ance a recaiou ayo ja 8a Shope i preserved his pol canbe ded aan aternought rosness of badly calsatad pega Fo ry unnng though nla predsby ts Douglas Martin ‘The Form ofthe Book ‘The programmatic effect of repetition can be based on content or visual Summary: characteristics and can be established using virtually any design element. Repetition ‘The powerful human tendency to perceive egulavty inthe display leaves the designer with a wide latitude for choosing an element whose repetition facil itates communication while providing the comforting familiarity of a well- defined program. Effective use of this technique depends fst on leveraging the inherent structure of the display, and only secondarily on the introdue- tion of subsidiary structure: 1 Start with rough sketches of the series of layouts to be produced. 2 Look for common margins or functional units that must be clearly perceived across displays. Individual displays should be adjusted to ‘ensure consistent positioning of major structural elements. ‘3. Look for widely-spaced elements that should be visually related but which cannot be positioned next to one another. 4 Look for paths the user's eye needs to follow through the display. Repeated structural elements can serve a landmarks and guides that hhelp users with the navigation task as they become familiar with the program. 5. Use standard locations and a consistent presentation style for rules, text, or images introduced to visually reinforce the naturally repeating elements of the design. Failing other inspiration, the top and/or bortom of the layout can always be effectively emphasized using a light rule, since these normally appear in the same position in each layout. If both rules are used (an early warning sign of the addiction co the narcotic properties” described by Bringhurst), the lower rule should normally be of lighter weight to establish a contrast that helps lead the eye through the display. Module and Program - 167Establishing Modular Unita 17% Me dosgncrvies the bei forthe funciona as wal sthe ‘esta excatonce ofthe progr n ths stcttle tatlewere sys Gesigred by Hans Roun fr Tamas Rosenthal AG From the perrangst Proper choice of module is the key to any effective design program. The tableware in Figure 171 can be viewed as a system whose horizontal param «ters are governed by the spatial layout of the place setting (whic i in eurn determined by human ergonomics) and whose vertical dimensions are gov~ ered by the volume requirements for each piece. Grid-based design gener ally requires the specification of both a vertical and a horizontal module. In 4 purely typographic grid, the vertical module is based on the point size and {eading of the primary text font while the horizontal module is a function of both page size and oprimum line length for the chosen font, In the grid program developed by Vignelli Associates for the AIGA, a basic ‘module is repeated to produce multi-columa formats keyed to various stan

You might also like

• Interface Design. An Introduction To Visual Communication in UI Design (PDFDrive)

  

  100% (2)

  Interface Design. An Introduction To Visual Communication in UI Design (PDFDrive)

  192 pages
• The Pocket Universal Principles of Design by William Lidwell

  

  80% (5)

  The Pocket Universal Principles of Design by William Lidwell

  332 pages
• User Experience Design PDF

  

  No ratings yet

  User Experience Design PDF

  192 pages
• Sketching User Experiences Getting The Design Right and The Right Design Interactive Technologies - 1-235

  

  100% (2)

  Sketching User Experiences Getting The Design Right and The Right Design Interactive Technologies - 1-235

  235 pages
• User Interface Design

  

  No ratings yet

  User Interface Design

  333 pages
• Dieter Rams - Good Design

  

  100% (1)

  Dieter Rams - Good Design

  31 pages
• Top 10 UX Books

  

  No ratings yet

  Top 10 UX Books

  2 pages
• Web Typography Guide

  

  No ratings yet

  Web Typography Guide

  22 pages
• User Experience Guidlines For QlikView

  

  No ratings yet

  User Experience Guidlines For QlikView

  30 pages
• 2015 Pocket Universal Principles of Design - Sample, The - William Lidwell

  

  33% (3)

  2015 Pocket Universal Principles of Design - Sample, The - William Lidwell

  29 pages
• The Design of Everyday Things - Don Norman PDF

  

  100% (10)

  The Design of Everyday Things - Don Norman PDF

  270 pages
• Heuristic Evaluation Workbook 1 Fillable

  

  No ratings yet

  Heuristic Evaluation Workbook 1 Fillable

  6 pages
• Product Design Recommended Reading List

  

  100% (1)

  Product Design Recommended Reading List

  3 pages
• Sanet - Me - The Best Interface Is No Interface

  

  100% (4)

  Sanet - Me - The Best Interface Is No Interface

  282 pages
• The Language of Design

  

  No ratings yet

  The Language of Design

  40 pages
• Design Systems Smashing Ebooks

  

  100% (2)

  Design Systems Smashing Ebooks

  284 pages
• Principles of Product Design

  

  100% (2)

  Principles of Product Design

  183 pages
• STORYTELLING FOR VIRTUAL REALITY - John Bucher

  

  No ratings yet

  STORYTELLING FOR VIRTUAL REALITY - John Bucher

  40 pages
• Uxpin Web Ui Design Patterns 2016 Volume

  

  100% (2)

  Uxpin Web Ui Design Patterns 2016 Volume

  143 pages
• Mobile Design Pattern Gallery PDF

  

  100% (8)

  Mobile Design Pattern Gallery PDF

  278 pages
• Designing Web Interfaces PDF

  

  100% (6)

  Designing Web Interfaces PDF

  334 pages
• 10 Heuristics Defination PDF

  

  No ratings yet

  10 Heuristics Defination PDF

  6 pages
• Uxpin The Critical Components of Web Ui Style Guides PDF

  

  No ratings yet

  Uxpin The Critical Components of Web Ui Style Guides PDF

  49 pages
• Building A Design Driven Culture

  

  100% (1)

  Building A Design Driven Culture

  49 pages
• Uxpin The Visual Storytellers Guide To Web Ui Design

  

  100% (5)

  Uxpin The Visual Storytellers Guide To Web Ui Design

  68 pages
• Design Systems

  

  86% (28)

  Design Systems

  289 pages
• Product Designer Interview Questions

  

  No ratings yet

  Product Designer Interview Questions

  3 pages
• Uxpin Mobile Ui Design Patterns 2014

  

  100% (1)

  Uxpin Mobile Ui Design Patterns 2014

  135 pages
• (2003) Universal Principles of Design

  

  86% (14)

  (2003) Universal Principles of Design

  217 pages
• Dan Saffer Designing 4 Interaction PDF

  

  100% (1)

  Dan Saffer Designing 4 Interaction PDF

  402 pages
• The Design of Everyday Things

  

  95% (56)

  The Design of Everyday Things

  270 pages
• 100more Things Every Designer Needs To Know

  

  35% (26)

  100more Things Every Designer Needs To Know

  28 pages
• Nielsen's 10 UI Design Guidelines

  

  100% (1)

  Nielsen's 10 UI Design Guidelines

  31 pages
• The Basics of Ux Design

  

  100% (3)

  The Basics of Ux Design

  73 pages
• Steve Krug Dont Make Me Think Second Edition

  

  100% (61)

  Steve Krug Dont Make Me Think Second Edition

  216 pages
• User Interface Design

  

  No ratings yet

  User Interface Design

  424 pages
• About Design System

  

  No ratings yet

  About Design System

  33 pages
• Uxpin Mobile Ui Design Patterns 2014 PDF

  

  100% (3)

  Uxpin Mobile Ui Design Patterns 2014 PDF

  135 pages
• How To Use Graphic Design To Se Bierut Michaelpdf PDF Free

  

  0% (1)

  How To Use Graphic Design To Se Bierut Michaelpdf PDF Free

  641 pages
• Uid 1

  

  No ratings yet

  Uid 1

  30 pages
• Introduction To HCI 2024

  

  No ratings yet

  Introduction To HCI 2024

  16 pages
• 3.3 User Experience Design

  

  No ratings yet

  3.3 User Experience Design

  8 pages
• UIANDUXCH4pdf 2025 07 17 23 27 18

  

  No ratings yet

  UIANDUXCH4pdf 2025 07 17 23 27 18

  39 pages
• Design For Developers

  

  No ratings yet

  Design For Developers

  183 pages
• Design For Developers

  

  No ratings yet

  Design For Developers

  183 pages
• Ui & Ux - Unit 2

  

  No ratings yet

  Ui & Ux - Unit 2

  30 pages
• Visual Design Principles for Usable Interfaces

  

  No ratings yet

  Visual Design Principles for Usable Interfaces

  23 pages
• Vital Role of Interface Design in HCI

  

  No ratings yet

  Vital Role of Interface Design in HCI

  6 pages
• Java Applet & Interface Design Guide

  

  No ratings yet

  Java Applet & Interface Design Guide

  32 pages
• Interface Design An Introduction To Visual Communication in UI Design Dave Wood Latest PDF 2025

  

  No ratings yet

  Interface Design An Introduction To Visual Communication in UI Design Dave Wood Latest PDF 2025

  166 pages
• Lecture 9 - User Interface Design

  

  No ratings yet

  Lecture 9 - User Interface Design

  56 pages
• HCI F

  

  No ratings yet

  HCI F

  40 pages
• User Interface Design Fundamentals

  

  No ratings yet

  User Interface Design Fundamentals

  31 pages
• Interactive Media Design Guide

  

  No ratings yet

  Interactive Media Design Guide

  9 pages
• 9 - Design Concepts & Visual Design

  

  No ratings yet

  9 - Design Concepts & Visual Design

  48 pages
• Hci Unit1

  

  No ratings yet

  Hci Unit1

  63 pages
• UXUI Design 2021-2022 Tutorial

  

  100% (6)

  UXUI Design 2021-2022 Tutorial

  237 pages
• Unit 1

  

  No ratings yet

  Unit 1

  25 pages
• SPINK 378 - Jewelry, Silver & Objects of Vertu - E-Auction

  

  No ratings yet

  SPINK 378 - Jewelry, Silver & Objects of Vertu - E-Auction

  22 pages
• Celtic Coins: History and Significance

  

  No ratings yet

  Celtic Coins: History and Significance

  16 pages
• Tauriscan Coins of Đurđevac

  

  No ratings yet

  Tauriscan Coins of Đurđevac

  12 pages
• Spink Numismatic e-Circular 23

  

  No ratings yet

  Spink Numismatic e-Circular 23

  191 pages
• Celtic Coin Catalogue from Hunterian

  

  No ratings yet

  Celtic Coin Catalogue from Hunterian

  88 pages
• Spink CSS33

  

  No ratings yet

  Spink CSS33

  376 pages
• The Lionheart' Collection of Great Britain and British Empire - Part X

  

  100% (2)

  The Lionheart' Collection of Great Britain and British Empire - Part X

  116 pages
• Rhodesia 1910-13 Double Head Issue The Cottonwood Collection Robert M. Gibbs Trustee

  

  No ratings yet

  Rhodesia 1910-13 Double Head Issue The Cottonwood Collection Robert M. Gibbs Trustee

  156 pages
• Spink 19025

  

  No ratings yet

  Spink 19025

  204 pages
• The Lionheart' Collection of Great Britain and British Empire - Part X

  

  100% (2)

  The Lionheart' Collection of Great Britain and British Empire - Part X

  116 pages
• Spink Auction 17042

  

  No ratings yet

  Spink Auction 17042

  84 pages
• SPINK Auction 18024 - RHODESIA 1910-13 DOUBLE HEAD ISSUE THE ROYAL PALM' COLLECTION

  

  100% (1)

  SPINK Auction 18024 - RHODESIA 1910-13 DOUBLE HEAD ISSUE THE ROYAL PALM' COLLECTION

  84 pages
• Chartwell: of Australian States and Commonwealth

  

  No ratings yet

  Chartwell: of Australian States and Commonwealth

  260 pages
• Coinex Auction: Rare Ancient Coins

  

  No ratings yet

  Coinex Auction: Rare Ancient Coins

  76 pages
• Chartwell: of Australian States and Commonwealth

  

  No ratings yet

  Chartwell: of Australian States and Commonwealth

  260 pages
• A158 PDF

  

  No ratings yet

  A158 PDF

  170 pages
• ASP.NET MVC 4 Overview and Features

  

  No ratings yet

  ASP.NET MVC 4 Overview and Features

  22 pages
• Master: MOO Cover For PDF 2/24/97 7:15 PM Page 1

  

  No ratings yet

  Master: MOO Cover For PDF 2/24/97 7:15 PM Page 1

  82 pages
• PEPPOL Documentation For Java Sample AP Implementation, Version 2.1

  

  No ratings yet

  PEPPOL Documentation For Java Sample AP Implementation, Version 2.1

  22 pages
• Tesla Banknotes

  

  No ratings yet

  Tesla Banknotes

  12 pages
• Book Repair Basics For Libraries: Peter D. Verheyen & Marianne Hanley, Syracuse University

  

  No ratings yet

  Book Repair Basics For Libraries: Peter D. Verheyen & Marianne Hanley, Syracuse University

  28 pages
• Hungarian Hyperinflation Analysis

  

  No ratings yet

  Hungarian Hyperinflation Analysis

  24 pages
• PEPPOL D3 - 2 - Attachment A Profile 1a

  

  No ratings yet

  PEPPOL D3 - 2 - Attachment A Profile 1a

  19 pages
• Short CV Hassan Nov 2022

  

  No ratings yet

  Short CV Hassan Nov 2022

  2 pages
• I.Lte Optimization 1.lte Optimization Principles

  

  No ratings yet

  I.Lte Optimization 1.lte Optimization Principles

  6 pages
• Optima IGS 320 Optima IGS 330 Optima IGS Plus - MIS Maps - SM - 5849801-1EN - 1

  

  No ratings yet

  Optima IGS 320 Optima IGS 330 Optima IGS Plus - MIS Maps - SM - 5849801-1EN - 1

  1 page
• Digitalme FAQ: Unifi Digital ID Guide

  

  No ratings yet

  Digitalme FAQ: Unifi Digital ID Guide

  6 pages
• R5-183272 38508-2 v100 Clean

  

  No ratings yet

  R5-183272 38508-2 v100 Clean

  14 pages
• Visual Studio 2008 Installation Guide

  

  No ratings yet

  Visual Studio 2008 Installation Guide

  10 pages
• SAP Master Data Governance For Material Data - Overview

  

  100% (2)

  SAP Master Data Governance For Material Data - Overview

  113 pages
• HC-42 Bluetooth Module User Manual

  

  No ratings yet

  HC-42 Bluetooth Module User Manual

  17 pages
• Labview Help Labview Application Builder User Guide

  

  No ratings yet

  Labview Help Labview Application Builder User Guide

  4 pages
• OD327135765440352100

  

  No ratings yet

  OD327135765440352100

  6 pages
• 002 GB C - White Paper Vilink WW - 0

  

  No ratings yet

  002 GB C - White Paper Vilink WW - 0

  6 pages
• Autonomic Logistics Information System ALIS F 35 @FLIGHTENGINEERS

  

  No ratings yet

  Autonomic Logistics Information System ALIS F 35 @FLIGHTENGINEERS

  2 pages
• Episode I Battle For Naboo™: Star Wars

  

  No ratings yet

  Episode I Battle For Naboo™: Star Wars

  4 pages
• Intel I7 Cache

  

  No ratings yet

  Intel I7 Cache

  3 pages
• Tax

  

  No ratings yet

  Tax

  48 pages
• CCST 9047 Lecture8

  

  No ratings yet

  CCST 9047 Lecture8

  49 pages
• Lab Manual PCS 408 "Java Programming" (B-Tech CSE IV Semester) 2021-2022

  

  100% (1)

  Lab Manual PCS 408 "Java Programming" (B-Tech CSE IV Semester) 2021-2022

  67 pages
• Data Warehouse Unit 3 CS3551

  

  No ratings yet

  Data Warehouse Unit 3 CS3551

  18 pages
• Scei Model

  

  No ratings yet

  Scei Model

  9 pages
• Key Concepts in Computer Graphics

  

  No ratings yet

  Key Concepts in Computer Graphics

  4 pages
• Mini Project Report

  

  No ratings yet

  Mini Project Report

  19 pages
• Oracle Apps Technical Consultant CV

  

  No ratings yet

  Oracle Apps Technical Consultant CV

  2 pages
• IOT Architecture and Protocols Unit-1

  

  No ratings yet

  IOT Architecture and Protocols Unit-1

  122 pages
• Unit 2 Python

  

  No ratings yet

  Unit 2 Python

  13 pages
• bq20z90EVM-001 SBS 1.1 Impedance Track™ Technology Enabled Battery Management Solution Evaluation Module

  

  No ratings yet

  bq20z90EVM-001 SBS 1.1 Impedance Track™ Technology Enabled Battery Management Solution Evaluation Module

  17 pages
• Prode Properties User Manual 1.2

  

  No ratings yet

  Prode Properties User Manual 1.2

  97 pages
• Automation With Ansible Playbook - Online MCQS, Quiz and Questions

  

  No ratings yet

  Automation With Ansible Playbook - Online MCQS, Quiz and Questions

  5 pages
• Amazon ECS - User Guide For AWS Fargate

  

  No ratings yet

  Amazon ECS - User Guide For AWS Fargate

  528 pages
• UMRR-11 Type 44 EMC Test Report

  

  No ratings yet

  UMRR-11 Type 44 EMC Test Report

  89 pages
• Modicon Easy M200 - TM200CE40T

  

  No ratings yet

  Modicon Easy M200 - TM200CE40T

  11 pages