Designing
`
`YinterfACES
`
`
`
`TASSPreee|aSaaaa
`Patternsfor Effective Interaction Design
`
`O’REILLY*
`
`;
`
`i
`
`Jenifer Tidwell
`
`EXHIBIT
`EXHIBIT
`2018
`201 8
`
`MemoryWeb Ex. 2018
`Samsung v. MemoryWeb — IPR2022-00221
`1/73
`
`MemoryWeb Ex. 2018
`Samsung v. MemoryWeb – IPR2022-00221
`1/73
`
`

`

`Designing
`Interfaces
`
`Jenifer Tidwell
`
`O’REILLY*
`
`BEIJING = CAMBRIDGE = FARNHAM « KOLN * SEBASTOPOL « TAIPE|* TOKYO
`
`MemoryWebEx. 2018
`Samsung v. MemoryWeb — IPR2022-00221
`2/73
`
`MemoryWeb Ex. 2018
`Samsung v. MemoryWeb – IPR2022-00221
`2/73
`
`

`

`Designing Interfaces
`by Jenifer Tidwell
`
`Copyright © 2006 O'Reilly Media, Inc. All rights
`reserved, Printed in the United States of America.
`
`Published by O'Reilly Media, Inc,,
`1005 Gravenstein Highway Narth,
`Sebastopol, CA 95472.
`
`O'Reilly books may be purchased foreducational,
`business, or sales promotional use. Online editions
`are also avallable for most tities(safari.oreillycom).
`For more information, contact ourcorporate/
`institutional sales department, (800) 998-9938 or
`corporate@oreillycom.
`
`Editors: Andrew OdewahnandMary O'Brien
`Production Editor: Genevieve d'Entremont
`Cover Designer: Mike Kahnke
`Interior Designer: NOON
`
`Printing: Histary:
`November 2005; First Edition.
`
`Nutshell Handbook, the Nutshell Handbook logo,
`and the O'Reilly logo are registered trademarks of
`O'Reilly Media, Inc. Designing Interfaces and
`reiated trade dress are trademarks of O'Reilly
`Media, Inc.
`
`Many of the designations used by manufacturers
`and sellers to distinguish their products are
`claimed as trademarks. Where those dasianations
`appear in this book, and O'Reilly Media, Inc, was
`aware of a trademark claim, the designations have
`been printed in caps or initial caps,
`
`While every precaution has been taken in the
`preparation of this book, the publisher and author
`assume no responsibility for errors or omissions,
`or for damages resulting from the use of the
`information contained herein.
`
`This book uses RepkKover, a durable and flexible
`lay-flat binding.
`
`ISBN: 978-0-596-00803-]
`
`[Cj
`
`[9/08]
`
`
`
`MemoryWebEx. 2018
`Samsung v. MemoryWeb — IPR2022-00221
`3/73
`
`MemoryWeb Ex. 2018
`Samsung v. MemoryWeb – IPR2022-00221
`3/73
`
`

`

`ABOUT THE AUTHOR
`
`Jenifer received her technical education at
`MIT and her design education at the Massa-
`chusetts College of Art, but she’s not finished
`learning yet. She has been researching user
`interface patterns since 1997. Photography
`and writing are her creative outlets, and she
`
`Jenifer Tidwell is an interaction designer and software developer for The
`MathWorks, makers of technical computing software. She specializes in
`the design and construction of data analysis and visualization tools, and
`has been working on new designs for the data tools in MATLAB, which is
`used by researchers, students, and engineers worldwide to develop cars,
`planes, proteins, and theories about the universe. She has been known to
`design websites, and was an early enthusiast for rich Internet application
`(RIA) technology, having helped design and develop Curl in the early
`2000s,
`
`4/73
`
`spends as much time as she can in the New
`England outdoors—on a bike, on a boat, on
`foot, on skis, and on belay.
`
`Jenifer’s personal web site can be found at
`anteM/AisieldoAEL-m
`
`MemoryWebEx. 2018
`Samsung v. MemoryWeb — IPR2022-00221
`
`MemoryWeb Ex. 2018
`Samsung v. MemoryWeb – IPR2022-00221
`4/73
`
`

`

`5/73
`
`NOON (wwwdesignatnoon.com) designed
`the interior layout. This book was converted
`by Joe Wizda to Adobe InDesign CS. The
`text fonts are Gotham Book and Adobe Ga-
`ramond; the heading fonts are Univers and
`Gotham Bold. The illustrations that appear
`in the book were produced by Robert Ro-
`mano, Jessamyn Read, and Lesley Borash
`using Macromedia FreeHand MX and Adobe
`Photoshop CS. This colophon was written by
`Jansen Fernald.
`
`feign injury to distract predators such as ot-
`ters, raccoon dogs, mink, polecats, eagle owls,
`and grass snakes.
`
`Mandarin ducks are not an endangered spe-
`cies, but they are considered to be threatened.
`Loggers continuously encroach upon their
`habitats, and hunters and poachers prize the
`males for their plumage. Their meat is con-
`sidered unpalatable by humans, and they are
`generally not hunted for food.
`
`Genevieve d’Entremont was the production ed-
`itor and proofreader for Designing Interfaces.
`Ann Schirmer was the copyeditor. Susan Hon-
`eywell was the page compositor. Phil Dangler
`and Claire Cloutier provided quality control.
`Kelly Talbot and Johnna VanHoose Dinse wrote
`the index.
`
`Mike Kohnke designed the cover of this book,
`based on a series design by Edie Freedman.
`The cover image is from Johnson's Natural
`History. Karen Montgomery produced the
`cover layout
`in Adobe InDesign CS, using
`Adobe's ITC Garmond font.
`
`MemoryWebEx. 2018
`Samsung v. MemoryWeb — IPR2022-00221
`
`COLOPHON
`
`Our look is the result of reader comments,
`our own experimentation, and feedback from
`distribution channels. Distinctive covers com-
`plement our distinctive approach to techni-
`cal topics, breathing personality and life into
`potentially dry subjects.
`
`The animal on the cover of this book is a
`Mandarin duck (Aix ga/ericulata), one of the
`most beautiful of the duck species. Origi-
`nating in China, these colorful birds can be
`found in southeast Russia, northern China,
`Japan, southern Engiand, and Siberia.
`
`The males have diverse and colorful plumage,
`characterized by an iridescent crown, chest-
`nut-colored cheeks, and a white eye stripe
`that extends from their red bills to the back
`of their heads. Females are less flamboyant in
`appearance and tend to be gray, white, brown,
`and greenish brown, with a white throat and
`foreneck,
`
`These birds live in woocland areas near
`streams and lakes. Being omnivorous,
`they
`tend to have a seasonal diet, eating acorns
`and grains in autumn:
`insects,
`land snails,
`and aquatic plants in spring; and dew worms,
`grasshoppers, frogs, fish, and mollusks during
`the summer months.
`
`The mating ritual of Mandarin ducks begins
`with an elaborate and complex courtship
`dance that
`involves
`shaking movements,
`mimed drinking gestures,
`and preening.
`Males fight each other to win a female, but
`it
`is ultimately the fernale who decides her
`mate. Mandarin ducklings instinctively follow
`their notoriously protective mothers, who will
`
`MemoryWeb Ex. 2018
`Samsung v. MemoryWeb – IPR2022-00221
`5/73
`
`

`

`
`
`CONTENTS
`
`Ol
`
`WHAT USERS DO
`
`A Means to an End
`
`The Basics of User Research
`
`Users’ Motivation to Learn
`
`The Patterns
`
`safe exploration
`
`instant gratification
`
`satisficing
`
`changes in midstream
`
`deferred thojces
`
`ineremental construction
`
`habituation
`
`spatial memory
`
`prospective memory
`
`streamlined repetition
`
`keyboard only
`
`other people's advice
`
`O2
`
`CFGAN/ZING TRE CONTENT
`ki shies ides1d
`44
`eed de Airs Sh ea Oey
`
`The Basics of Information Architecture:
`
`Dividing Stuff Up
`
`Physical Structure
`
`The Patterns
`
`two-panel selector
`
`22
`
`28
`
`30
`
`31
`
`Put two side-by-side panels on the interface. In the
`first, show a set of items that the user can select at
`will; in the other, show the content of the selected
`item.
`
`one-window drilldown
`
`36
`
`Show each of the application's pages within a single
`of
`window. As a user drills down through a menu
`options, or into an object'sdetails, replace the
`window contents completely with the new page.
`39
`alternative views
`
`Let the user choose among alternative views t
`are structurally different, not just cosmetically
`different, fram the default view.
`
`wizard
`
`hat
`
`42
`
`Lead the user through the interface step by step,
`doing tasks ina prescribed order.
`extras on demand
`
`45
`
`Show the most important content up front, but hide
`the rest. Let the user reach It via a single, simple
`gesture,
`
`intriguing branches
`
`47
`
`Place links to interesting content in unexpecte
`places, and label them ina way that attracts the
`curlous User.
`
`cl
`
`multi-level help
`
`49
`
`help
`Use a mixture of lightweight and heavyweight
`techniques to support users with varying needs.
`
`03
`
`GETTING AROUND:
`NAVIGATION, SIGNIOSTS.
`AND WAYEIN DING
`
`Staying Found
`
`The Cost of Navigation
`The Patterns
`
`21
`
`clear entry points
`
`55
`
`56
`
`63
`
`64
`
`Present only a few entry points into the interface:
`make them task-oriented and descriptive.
`
`Is
`
`canvas plus palette
`
`Place an iconic palette next to a blank canvas; the
`user clicks on the palette buttons to create objects
`on the canvas.
`
`54
`
`22
`
`global navigation
`
`66
`
`Using a small section of every page, show a
`consistent set of links or buttons that take the user
`
`to key sections of the site or application.
`
`
`
`CONTENTS
`
`
`
`
`
`MemoryWeb Ex. 2018
`Samsung v. MemoryWeb — IPR2022-00221
`6/73
`
`
`MemoryWeb Ex. 2018
`Samsung v. MemoryWeb – IPR2022-00221
`6/73
`
`

`

`hub and spoke
`
`68
`
`Al Kind
`
`center stage
`
`103
`
`isolate the sections of the app into mini-applications,
`each with one wayin (from the main page) and one
`way out (back to the main page).
`
`Put the most important part ef the Ul into the largest
`subsection of the page or window, cluster secondary
`tools and content around it
`in smaller panels,
`
`pyramid
`
`71
`
`titled sections
`
`joy
`
`Link a sequence of pages with Back/Nextlinks.
`Combine this sequential presentation with a main
`page that links to and from all pages in the
`sequence.
`
`modal panel
`
`74
`
`Show only one page, with no other navigation
`options, until the user solves the immeciate problem.
`
`sequence map
`
`76
`
`On each page in a sequence, shaw a map ofall of
`the pages in order, including a "You are here”
`indicator.
`
`breadcrumbs
`
`73
`
`On each page ina hierarchy, show a map ofall the
`Parent pages, up to the main page.
`
`annotated scrollbar
`
`80
`
`Make the scrollbar serve double-duty as a map of the
`content, or as a “You are here" indicator.
`
`color-coded sections
`
`82
`
`Use color to identify which section of an application
`or site that a page belongs to.
`
`animated transition
`
`84
`
`Smooth outa startling or dislocating transition with
`an animation that makes it feel natural.
`
`Define separate sections of content by giving each
`one a visually strong title, and then laying them all
`out on the page together.
`card stack
`
`109
`
`Put sections of content onto separate panels or
`“ecards,” and stack them up so only one is Visible at a
`time; use tabs or other devices to give Users access
`to them.
`
`WW
`closable panels
`Put sections of content onto separate panels, and let
`the user open and close each of them separately
`from the others.
`
`movable panels
`
`4
`
`Put different tools or sections of content onto
`separate panels, and let the user move them around
`to form a custom layout.
`
`38
`
`right/left alignment
`
`NG
`
`When desidning a two-column form or table, right-
`align the labels on the left, and left-alian the items
`on the right.
`
`39
`
`diagonal balance
`
`18
`
`Arrange page elementsin an asymmetric fashion,
`but balance it by putting visual weight into both the
`upper-left and lower-right corners.
`
`escape hatch
`
`86
`
`40
`
`property sheet
`
`120
`
`On each page that has limited navigation options,
`place a button orlink that clearly gets the user out
`of that page and back to a known place,
`
`ORGANIZING THE PAGE;
`LAYOUT OF PAGE ELEMENTS
`
`O4
`
`The Basics of Page Layout
`
`The Patterns
`
`ae
`
`visual framework
`
`38
`
`89
`
`99
`
`100
`
`Design each page to use the same basic layout,
`colors, and stylistic elements, but give the design
`enough flexibility to handle varying page content.
`
`4]
`
`42
`
`Use a twa-column or form-style layout to show the
`user that an object's properties are edited on this
`page.
`
`responsive disclosure
`
`]23
`
`Starting with a very minimal Ul, quide a user through
`a series of steps by showing more of the Ul as he
`completes each step.
`
`responsive enabling
`
`125
`
`Starting with a Ul that's mostly disabled, quide a
`user through a series of steps by enabling more of
`the Ul as each step is done.
`
`vi
`
`CONTENTS
`
`MemoryWebEx. 2018
`Samsung v. MemoryWeb — IPR2022-00221
`7/73
`
`MemoryWeb Ex. 2018
`Samsung v. MemoryWeb – IPR2022-00221
`7/73
`
`

`

`43
`
`liquid layout
`
`128
`
`As the user resizes the window, resize the page
`contents along with it so the page is constantly
`“filled.”
`
`DOING THINGS:
`
`O§5 ACTIONS AND COMMANDS
`
`Pushing the Boundaries
`
`The Patterns
`
`Aa
`
`button groups
`
`a0
`
`133
`
`136
`
`1a?
`
`Present related actions as a small cluster of buttons,
`aligned either horizontally or vertically. Create several
`of them if there are more than three or four actions.
`
`action panel
`
`140
`
`Instead of using menus, present a large group of
`related actions on a U! panel that's richly organized
`and always visible,
`
`prominent “done” button
`
`144
`
`Place the button that finishes a transaction at the end
`
`of the visual flaw; make it big and well-labeled.
`smart menu items
`146
`
`47
`
`Change menu labels dynamically to show precisely
`what they would do when invoked.
`
`181
`data brushing
`Let the user select data iterns In one view; show the
`
`same data selected simultaneously in another view.
`
`preview
`
`147
`
`lacal zooming
`
`184
`
`Show users 4 preview or summary of what will happen
`when they perform an action.
`
`ag
`
`progress indicator
`
`149
`
`Show the user how much progress was made ona
`time-consuming operation:
`
`cancelability
`
`151
`
`Provide a way to instantly cancel a time-consuming
`Operation, with no side effects.
`multi-level undo
`
`153
`
`Provide a way to easily reverse a series of actions
`performed by the user.
`
`command history
`
`156
`
`As the user perfarms actions, keep a visible record of
`what was done, to what, and when.
`
`macros
`
`158
`
`Show all the data In a single dense page, with small-
`scale data items. Wherever the mouse goes, distort
`the page to make those data items large and readable.
`
`|
`
`row striping
`
`Use two similar shades to alternately color the
`backgrounds of the table rows.
`
`sortable table
`
`ig?
`
`189
`
`Show the data in a table, and let the user sort the
`
`table rows according to the column values.
`
`jump to item
`
`191
`
`When the user types the name of an item, jurnp
`straight to that item and selectit.
`new-item row
`
`193
`
`Use the last row in the table to create a new item in
`place:
`
`cascading lists
`
`195
`
`Macros are single actions composed of other, smaller
`actions. Users can create them by putting together
`sequences of actions.
`
`Express a hierarchy by showing selectable lists of the
`items in each hierarchy level. Selection of any item
`shows that item's children in the next list.
`
`
`CONTENTS
`
`vil
`
`MemoryWebEx. 2018
`Samsung v. MemoryWeb — IPR2022-00221
`8/73
`
`06 TREES,
`TABLES. AND COYOELI
`SHOWING COMPLEX DATA:
`INFORMATION ERA DCS
`
`The Basics of Information Graphics
`
`The Patterns
`
`overview plus detail
`
`bedi
`
`161
`
`173
`
`174.
`
`Place an overview of the araphic next to a zoomed
`“detail view.” As the user drags a viewport around the
`
`overview, show that part of the graphic inthe detail
`VIEW.
`
`datatips
`
`176
`
`As the mouse rolls over a point of interest on’ the
`graphic, put the data values for that point into a
`.
`;
`toeltip or some other floating window,
`178
`dynamic queries
`Provide ways to filter the data set immediately and
`
`interactively. Ermploy easy-to-use standard controls,
`such as sliders and checkboxes, to define which parts |
`of the data set get shown, As soon as the user adjusts |
`those controls, the results appear on the data display,
`
`|
`
`|
`
`|
`
`||
`
`||
`
`|
`|
`
`MemoryWeb Ex. 2018
`Samsung v. MemoryWeb – IPR2022-00221
`8/73
`
`

`

`64
`
`tree table
`
`197
`
`autocompletion
`
`227
`
`Put hierarchical data in columns,like a table, but use
`an indented outline structure in the first column to
`illustrate the tree structure.
`
`As the user types inte a text field, anticipate the
`
`possible answers and automatically complete the
`entry when appropriate,
`
`a wn
`
`multi-y graph
`
`198
`
`dropdown chooser
`
`230
`
`Stack multiple graph lines, one above the other, in one
`panel; let them all share the same X axis.
`
`small multiples
`
`2006
`
`Create many small pictures of the cata using two or
`
`three data dimensions, Tile them on the page
`according to one or two additional data dimensions,
`ejther in a single comic-strip sequence, or ina 2D
`matrix.
`
`treemap
`
`205
`
`Express multidimensional and/or hierarchical data as
`rectangles of various sizes. You can nest those
`rectangles to show the hierarchy, and color or label
`them to show additional variables.
`
`07
`
`GETTING INPUT FROM USERS:
`Peet qh ildPN ies
`
`The Basics of Form Design
`Control Choice
`
`The Patterns
`
`65
`
`forgiving format
`
`ne
`
`207
`209
`
`218
`
`219
`
`Permit users to enter text ina variety of formats and
`syntaxes, and make the application interpretit
`intelligently
`
`| structured format
`
`220
`
`Instead of using one text field, use a set of text fields
`that reflect the structure of the requested data.
`
`__
`
`fill-in-the-blanks
`
`222
`
`Arrange one or more fields in the form of a prose
`sentence or phrase, with the fields as “blanks” to be
`filled in bythe user.
`
`input hints
`
`224
`
`Beside an empty text field, place a sentence or
`example that explains what is required.
`
`input prompt
`
`225
`
`Prefill a text fleld or dropdown with a prompt that tells
`the user what to do or type.
`
`Extend the concept of a menu by using a drop-down
`or pop-up panel to contain a more complex value-
`selection WI.
`
`illustrated choices
`
`2335
`
`Use pictures instead of words (or in addition to them)
`to show available choices.
`
`list builder
`
`235
`
`Show both the “source” and the “destination”lists on
`the same page; let the user move items between
`them.
`
`good defaults
`
`237
`
`Wherever appropriate, prefill form fields with your
`best guesses at the values the user wants.
`
`same-Page error messages
`
`239
`
`Place form error messages directly on the page with
`the form itself; mark the top of the page with an error
`message, and if possible, put indicators next to the
`originating controls.
`
`os BUILDERS AND EDITORS
`
`The Basics of Editor Design
`The Patterns
`
`‘9
`
`edit-in-place
`
`vi
`
`244
`248
`
`249
`
`Use asmall, dynamic text editor to let the user change
`text “in place”: position the editor directly over the
`original text, rather than using a separate panel or
`dialog box.
`
`smart selection
`
`251
`
`Make the software smart enough to automatically
`select a coherent group of items, rather than making
`the user do jt.
`
`composite selection
`
`253
`
`Use different gestures—or mouse clicks in different
`screen areas, such as the composite’s edgés versus its
`insides—to determine whether you should select a
`composite itself or allow its contained objects to be
`selected.
`
`vill
`
`CONTENTS
`
`MemoryWeb Ex. 2018
`Samsung v. MemoryWeb — IPR2022-00221
`9/73
`
`MemoryWeb Ex. 2018
`Samsung v. MemoryWeb – IPR2022-00221
`9/73
`
`

`

`one-off mode
`
`255
`
`30
`
`corner treatments
`
`297
`
`When a modeis turned on, perform the operatian
`once. Then switch back automatically inte the default
`or previous mode.
`
`spring-loaded mode
`
`257
`
`Let the user enter a mode by helding down a key ora
`mouse button. When the user releases it, leave the
`mode and go back te the previous one.
`constrained resize
`
`259
`
`“
`
`Supply resize modes with different behavior, such as
`preserving aspect ratio, for use under special
`circumstances,
`
`Instead of using ordinary right angles, use diagonals,
`curves, or cutouts for some of the interface’s box
`corners, Make these corner treatments consistent
`across the interface.
`
`|
`|
`
`oy
`
`borders that echo fonts
`
`300
`
`When drawing borders and other lines, use the same
`color, thickness, and curves used by one of the
`design's
`major fonts.
`
`92
`
`hairlines
`
`403
`
`Use one-pixel-widelines in borders, horizontal rules.
`ures,
`and text
`
`magnetism
`
`26)
`
`95
`
`contrast
`
`ina font weights
`
`306
`
`Make the objects "magnetic" to the things a user
`positions them against. When the user drags an
`object very near one of these things, it should stick.
`
`Use two
`cantrasting fonts—one thin and lightweight,
`and the
`other heavier and darker—to separate
`different levels of information and add visual interest.
`
`guides
`
`263
`
`94
`
`skins
`
`308
`
`Offer horizontal and vertical reference lines to help
`users align objects.
`
`paste variations
`
`266
`
`Open up the look-and-feel architecture of your
`application so users can design their own graphics
`and styles.
`
`Provide specialized paste functionality in addition to
`the standard paste operation.
`
`REFERENCES
`
`NDEX
`
`18
`
`MAKING IT LOOK GOOD:
`
`O9 VISUAL STYLE AND AESTHETICS
`
`Same Content,Different Styles
`
`The Basics of Visual Design
`
`What This Means for Desktop Applications
`The Patterns
`
`88
`
`deep background
`
`268
`
`270
`
`279
`
`287
`
`290
`
`291
`
`Place an Image or gradient into the page's back-
`ground that visually recedes behind the foreground
`elements
`
`89
`
`few hues, many values
`
`294
`
`Choose one, two, or at mast three major color hues to
`use jn the Interface, Create a color palette by selecting
`assorted Values (brightnesses) from within those few
`hues.
`
`
`
`CONTENTS
`
`ix
`
`MemoryWebEx. 2018
`Samsung v. MemoryWeb — IPR2022-00221
`10/73
`
`MemoryWeb Ex. 2018
`Samsung v. MemoryWeb – IPR2022-00221
`10/73
`
`

`

`
`
`
`PREFACE
`
`MemoryWeb Ex. 2018
`Samsung v. MemoryWeb — IPR2022-00221
`11/73
`
`MemoryWeb Ex. 2018
`Samsung v. MemoryWeb – IPR2022-00221
`11/73
`
`

`

`Once uponatime, interface designers worked with a woefully small toolbox.
`We had a handful of simple controls: text fields, buttons, menus, tiny icons, and modal dialogs. We care-
`fully put them together according to the Windows Style Guide or the Macintosh Human Interface Guide-
`lines, and we hoped that users would understand the resulting interface—and too often, they didn’t. We
`designed for small screens, few colors, slow CPUs, and slow networks (if the user was connected at all).
`We made them gray.
`
`Things have changed. If you design interfaces today, you werk with a much bigger palette of components
`and ideas. You have a choice of many more user interface toolkits than before, such as Java™ Swing, Qt,
`HTML and Javascript, Flash, and numerous open-source options. Apple's and Microsoft's native UI toolkits
`are richer and nicer-looking than they used to be. Display technology is better. Web applications often
`look as professionally designed as the web sites they're embedded in, and while desktop-Ul ideas like
`drag-and-drop are integrated inte web applications slowly, some of those web sensibilities are migrating
`back into desktop applications in the form of blue underlined links, Back/Next buttons, daring fonts and
`background images, and nice, non-gray color schemes.
`
`But it's still not easy to design good interfaces. Let's say you're not a trained or self-taught interface de-
`signer. If you just use the Ul] toolkits the way they should be used, and if you follow the various style quides
`or imitate existing applications, you can probably create a mediocre but passable interface.
`
`Alas, that may not be enough anymore. Users' expectations are higher than they used to be—if your inter-
`face isn’t easy to use “out of the box,” users will not think well of it. Even if the interface obeys all the
`standards, you may have misunderstood users’ preferred workflow, used the wrong vocabulary, or madeit
`too hard to figure out what the software even does. Impatient users often won't give you the benefit of the
`doubt. Worse, if you've built an unusable web site or web application, frustrated users can give up and
`switch to your competitor with just the click of a button. So the cost of building a mediocre interface is
`higher than it used to be, too.
`
`It's even tougher if you design products outside of the desktop and web worlds, because there's verylittle
`good design advice out there. Palmtops, cell phones, car navigation systems, digital TV recorders—design-
`ers are still figuring out what works and what doesn’t, often from basic principles. (And their users often
`tolerate difficult interfaces—but that won't last long.)
`
`Devices like phones, TVs, and car dashboards once were the exclusive domain of industrial designers. But
`now those devices have become smart. Increasingly powerful computers drive them, and software-based
`features and applications are multiplying in response to market demands. They're here to stay, whether or
`not they are easy to use. At this rate, good interface and interaction design may be the only hope for our
`collective sanity in 10 years.
`
`SMALL INTERFACE PIECES, LOOSELY JOINED
`
`As an interface designer trying to make sense of all the technology changesin the last few years, | see two
`big effects on the craft of interface design, One is the proliferation of interface idioms: recognizable types
`or styles of interfaces, each with its own vocabulary of objects, actions, and visuals. You probably recog-
`nize all the ones shown in the figure on the next page, and more are being invented all the time.
`
`
`
`
`
`
`
`
`SMALL INTERFACE PIECES. LOOSELY [OINED
`
`xt
`
`MemoryWebEx. 2018
`Samsung v. MemoryWeb — IPR2022-00221
`12/73
`
`MemoryWeb Ex. 2018
`Samsung v. MemoryWeb – IPR2022-00221
`12/73
`
`

`

`
`
`
`dari bape
`|
`PBs
`Edt Mew
`Insert
`Feytat
`Took
`Fa
`
`TenaerA i 1a,
`wong coves
`ro
`‘
`1
`‘
`:
`fet to Current Page
`| PCA!
`me
`31%
`=
`Boewntondi
`Meanwhile, other technological and 9
`TEST
`dita) cameras, and digital mune pla
`», T)
`wanealy — =
`and the technically adept. Once the d
`
`
`ges
`=
`2,Gl)
`they had computers
`become smart
`a7]i
`proliferated Chat and |
`
`eal tre
`iiciedsin:!
`
`=z
`
`Gevalepers'masting
`Beak ring read Che 14
`
`
`
`
`
`
`
`Graphic editors
`
`
`Peer20.0¢REGIMENS
`£20719
`1271S
`5a
`E-2
`:
`5 12e-23[ =i =] S7EGS 0
`oriS z
` -2:5E-24
`120715)
`
`WOFLE
`-<T4E1S
`
`
`
`
`
`
`
`
` Browsers
`
`
`0
`
`| ae
`’
`Last
`Index
` preneeren
`* 1012540
`i
`|
`asap
`1548.52
`ep. Eistad
`
`#* Sap soo
`1130.65
`Liat
`TG)
`Information graphics
`edia players
`
`~
`TT $17.46
`velop-a Space
`ie — —= |
`12
`IEE Milas
`a
`Baanery!
`leant 100 times
`eeeeersen eee
`|
`ee
`has flown man into Veeeeie “re
`1 yeah jstPuiniongabou!Mow itlwere in a teat Wana
`
`
`
`qnificantly mere thanSibiave,(aoe: fotow up win a JetBacay anghare Nice gong |
`+ Gallery Spaceshig
`oe
`-
`Leaea
`Sak
`|
`iboraleeeos
`-
`iain
`+ Interactive: Spaced
`ae
`7
`=
`Edit shopping cart_
`Hacrebatics during
`. Spaced
`Waserthe crigial by: Teen Wealty?
`+E Prize B+
`1 Said Mondays
`iia thie ooieme, but | mine the emagh aagen
`.
`6 but he was
`paues
`Dine ®
`
`ved these and we
`ty Savonte song for soene yaar now |
`
`{the rolls somarrew."
`QUICKVOTE
`Web pages
`Social spaces
`
`cha
`
`
`
`_——
`Immersive games
`
`E-commercesites
`
`
`A samoter of interface idioms
`
`PREPAC
`
`MemoryWeb Ex. 2018
`Samsung v. MemoryWeb — IPR2022-00221
`13/73
`
`MemoryWeb Ex. 2018
`Samsung v. MemoryWeb – IPR2022-00221
`13/73
`
`

`

`The second effect is a loosening of the rules for putting together interfaces from these idi-
`oms. It no longer surprises anyone to see several of these idioms mixed up in one interface,
`for instance, or to see parts of some controls mixed up with parts of other controls. Online
`help pages, which have long been formatted in hypertext anyway, might now haveinterac-
`tive applets in them, animations, or links to a web-based bulletin board. Interfaces them-
`selves might have help texts on them, interleaved with forms or eclitors; this used to be rare.
`Combo boxes’ dropdown menus might have funky layouts,
`like color grids or sliders,
`in-
`stead of the standard column of text items. You might see web applications that look like
`document-centered paint programs, but have no menu bars, and save the finished work
`only to a database somewhere.
`
`The freeform-ness of web pages seems to have taught users to relax their expectations
`with respect to graphics and interactivity. It's okay now to break the old Windowsstyle-
`guide strictures, as long as users can figure out what you're doing.
`
`And that's the hard part. Some applications, devices, and web applications are easy to use.
`Many aren't. Following style guides never guaranteed usability anyhow, but now designers
`have even more choices than before (which, paradoxically, can make design a /ot harder).
`What characterizes interfaces that are easy to use?
`
`Onecould say, “The applications that are easy to use are designed to beintuitive.” Well, yes.
`That's almost a tautology.
`
`Except that the word “intuitive” is a little bit deceptive. Jef Raskin once pointed out that
`when we say “intuitive” in the context of software, we really mean “familiar.” Computer mice
`aren't intuitive to someone who's never seen one (though a growling grizzly bear would
`be). There's nothing innate or instinctive in the human brain to account for it. But once
`you've taken 10 seconds to learn to use a mouse, it's familiar, and you'll never forget it. Same
`for blue underlined text, play/pause buttons, and so on.
`
`Rephrased: “The applications that are easy to use are designed to be familiar.”
`
`Now we're getting somewhere, “Familiar” doesn't necessarily mean that everything about
`a given applicationis identical to some genre-defining product (e.g., Word, Photoshop, Mac
`OS, or a Walkman). People are smarter than that. As long as the parts are recognizable
`enough, and the relationships among the parts are clear, then people can apply their previ-
`ous knowledge to a novel interface and figure it out.
`
`That's where patterns come in. This book catalogs many of those familiar parts, in ways you
`can reuse in many different contexts. Patterns capture a common structure—usually a very
`“local” one, like funky layouts on a combo box—without being too concrete on the details,
`which gives you flexibility to be creative.
`
`If you know what users expect of your application, and if you choose carefully from your
`toolbox of idioms (large-scale), controls (small-scale), and patterns (covering the range),
`then you can put together something which “feels familiar” while remaining original.
`
`And that gets you the best of both worlds.
`
`
`
`SMALL INTERIAGCE PrECES,
`
`LOCPSELY JOINED
`
`xii
`
`MemoryWebEx. 2018
`Samsung v. MemoryWeb — IPR2022-00221
`14/73
`
`MemoryWeb Ex. 2018
`Samsung v. MemoryWeb – IPR2022-00221
`14/73
`
`

`

`ABOUT PATTERNS IN GENERAL
`
`In essence, patterns are structural and behavioral features that improve the “habitability" of
`something—a user interface, a web site, an object-oriented pragram, or even a building.
`They make things easier to understand or more beautiful; they make tools more useful and
`usable,
`
`As such, patterns can be a description of best practices within a given design domain. They
`capture common solutions to design tensions (usually called “forces” in pattern literature)
`and thus, by definition, are not novel. They aren't off-the-shelf components; each imple-
`mentation of a pattern differs a little from every other. They aren't simple rules or heuristics
`either. And they won't walk you through an entire set of design decisions—if you're looking
`for a completestep-by-step description of how to design an interface, a pattern catalog
`isn't the place!
`
`This book describes patterns literally as solutions to design problems because part of their
`value lies in the way they resolve tensionsin various design contexts. For instance, an inter-
`face designer whoa needs to pack a lot of stuff into a too-small space can use a Card Stack.
`What remains for the designer is information architecture—how to split up the content into
`pieces, what to name them, etc.—and what exactly the Card Stack will look like when it's
`done. Tabs? A lefthand-side list or tree? That's up to the desianer’s judgment.
`
`Some very complete sets of patterns make up a “pattern language.” These patterns re-
`semble visual languages, in that they cover the entire vocabulary of elements used in a
`design (though pattern languages are more abstract and behavioral: visual languages talk
`about shapes, icons, colors, fonts, etc.). This set isn't nearly so complete, and jit contains
`techniques that don’t qualify as traditional patterns. But it’s concise enough to be manage-
`able and useful.
`
`OTHER PATTERN COLLECTIONS
`
`The text that started it all dealt with physical buildings, not software. Christopher Alexan-
`der's A Pattern Language, and its companion book, The Timeless Way of Building (both
`Oxford University Press), established the concept of patterns and described a 250-pattern
`multilayered pattern language. It is often considered the gold standard for a pattern lan-
`guage because of its completeness, its rich interconnectedness, and its grounding in the
`human response to our built world.
`
`In the mid-1990s, the publication of Design Patterns, (Addison-Wesley) by Erich Gamma,
`Richard Helm, Ralph Johnson, and John Vlissides profoundly changed the practice of com-
`mercial software architecture. This book is a collection of patterns describing object-
`oriented “micro-architectures.” If you have a background in software engineering, this is the
`book that probably introduced you to theidea of patterns. Many other authors have written
`books about software patterns since Design Patterns, Software patterns such as these do
`make software more habitable—for those who write the software, not those who useit!
`
`
`
`xiv
`
`PREFACE
`
`MemoryWebEx. 2018
`Samsung v. MemoryWeb — IPR2022-00221
`15/73
`
`MemoryWeb Ex. 2018
`Samsung v. MemoryWeb – IPR2022-00221
`15/73
`
`

`

`
`
`The first substantial set of user-interface patterns was the predecessor of this patterns col-
`lection, “Common Ground." Many other collections and languages followed, notably Mar-
`tijin van