Patterns for Ejfective Interaction Design
`
`MemoryWeb Ex. 2033
`Apple v. MemoryWeb – IPR2022-00033
`
`

`

`Designing
`Interfaces
`
`Jenifer Tidwell
`
`O’REILLY°
`
`BEIJING ¯ CAMBRIDGE ¯ FARNHAM ¯ KOLN ° SEBASTOPOL ¯ TAIPEI ¯ TOKYO
`
`MemoryWeb Ex. 2033
`Apple v. MemoryWeb – IPR2022-00033
`
`

`

`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 North,
`
`Sebastopol, CA 95472.
`
`O’Reilly books may be purchased for educational,
`business, or sales promotional use. Online editions
`
`are also available for most titles (safari.oreilly.com).
`
`For more information, contact our corporate/
`institutional sales department: (800) 998-9938 or
`
`corporate@oreill~com.
`
`Editors: Andrew Odewahn and Mary O’Brien
`Production Editor: Genevieve d’Entremont
`Cover Designer: Mike Kohnke
`Interior Designer: NOON
`
`Printing History:
`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
`
`related 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 designations
`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 RepKover, a durable and flexible
`
`lay-flat binding.
`
`ISBN: 978-0-596-00803-1
`
`[9/083
`
`MemoryWeb Ex. 2033
`Apple v. MemoryWeb – IPR2022-00033
`
`

`

`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 newdesigns for the data tools in MATLAB, whichis
`usedby researchers, students, and engineers worldwide to developcars,
`planes, proteins, and theories about the universe. She has been knownto
`design websites, and was an early enthusiast for rich Internet application
`(RIA) technology, having helped design and develop Curl
`in the early
`P0100
`
`Apple v. MemoryWeb — IPR2022-00033
`
`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
`http:/jtidwell.net.
`
`MemoryWebEx. 2033
`
`MemoryWeb Ex. 2033
`Apple v. MemoryWeb – IPR2022-00033
`
`

`

`Apple v. MemoryWeb — IPR2022-00033
`
`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 coverof this book,
`based ona 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. 2033
`
`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 galericulata), 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 England, 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 woodland 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 female who decides her
`mate. Mandarin ducklings instinctively follow
`their notoriously protective mothers, who will
`
`MemoryWeb Ex. 2033
`Apple v. MemoryWeb – IPR2022-00033
`
`

`

`CONTENTS
`
`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 choices
`
`incremental construction
`
`habituation
`
`spatial memory
`
`prospective memory
`
`streamlined repetition
`
`one-window drilldown
`
`36
`
`Show each of the application’s pages within a single
`
`window. As a user drills down through a menu of
`
`options, or into an object’s details, replace the
`
`window contents completely with the new page.
`
`alternative views
`
`39
`
`Let the user choose among alternative views that
`
`are structurally different, not just cosmetically
`
`different, from the default view.
`
`wizard
`
`42
`
`Lead the user through the interface step by step,
`
`doing tasks in a 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 unexpected
`
`3
`
`5
`
`7
`
`10
`
`]1
`
`]]
`
`]]
`
`12
`
`]3
`
`]4
`
`]4
`
`]5
`
`]6
`
`places, and label them in a way that attracts the
`
`curious user.
`
`multi-level help
`
`49
`
`Use a mixture of lightweight and heavyweight help
`
`techniques to support users with varying needs.
`
`GETTING AROUND:
`
`NAVI(;&} ION, Sl(;Nl’O~;lt~.
`
`ANI) \’(~AY FI N DI N (;
`
`Staying Found
`
`The Cost of Navigation
`
`The Patterns
`
`55
`
`56
`
`63
`
`64
`
`keyboard only
`
`other people’s advice
`
`The Basics of Information Architecture:
`
`Dividing Stuff Up
`
`Physical Structure
`
`The Patterns
`
`two-panel selector
`
`]7
`
`q7
`
`]8
`
`22
`
`28
`
`30
`
`31
`
`Put two side-by-side panels on the interface. In the
`
`2]
`
`clear entry points
`
`first, show a set of items that the user can select at
`
`will; in the other, show the content of the selected
`
`item.
`
`canvas plus palette
`
`34
`
`Place an iconic palette next to a blank canvas; the
`
`user clicks on the palette buttons to create objects
`
`on the canvas.
`
`Present only a few entry points into the interface;
`
`make them task-oriented and descriptive.
`
`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.
`
`C()NTENTS v
`
`MemoryWeb Ex. 2033
`Apple v. MemoryWeb – IPR2022-00033
`
`

`

`2:
`
`hub and spoke
`
`68
`
`33
`
`center stage
`
`]O3
`
`Isolate the sections of the app into mini-applications,
`
`Put the most important part of the UI into the largest
`
`each with one way in (from the main page) and one
`
`subsection of the page or window; cluster secondary
`
`way out (back to the main page).
`
`tools and content around it in smaller panels.
`
`24
`
`pyramid
`
`7]
`
`34
`
`titled sections
`
`107
`
`Link a sequence of pages with Back/Next links.
`
`Define separate sections of content by giving each
`
`Combine this sequential presentation with a main
`
`one a visually strong title, and then laying them all
`
`page that links to and from all pages in the
`
`out on the page together.
`
`sequence.
`
`2~:,
`
`modal panel
`
`35
`
`card stack
`
`109
`
`74
`
`Put sections of content onto separate panels or
`
`Show only one page, with no other navigation
`
`"cards," and stack them up so only one is visible at a
`
`options, until the user solves the immediate problem.
`
`time; use tabs or other devices to 9ire users access
`
`2~; sequence map
`
`76
`
`On each page in a sequence, show a map of all of
`
`to them.
`
`closable panels
`
`111
`
`the pages in order, including a "You are here"
`
`Put sections of content onto separate panels, and let
`
`indicator.
`
`27
`
`breadcrumbs
`
`78
`
`On each page in a hierarchy, show a map of all the
`
`parent pages, up to the main page.
`
`2S
`
`annotated scrollbar
`
`80
`
`the user open and close each of them separately
`
`from the others.
`
`37
`
`movable panels
`
`114
`
`Put different tools or sections of content onto
`
`separate panels, and let the user move them around
`
`to form a custom layout.
`
`Make the scrollbar serve double-duty as a map of the
`
`content, or as a "You are here" indicator.
`
`29
`
`color-coded sections
`
`82
`
`38
`
`right/left alignment
`
`116
`
`When designing a two-column form or table, right-
`
`align the labels on the left, and left-align the items
`
`Use color to identify which section of an application
`
`on the right.
`
`or site that a page belongs to.
`
`animated transition
`
`84
`
`Smooth out a startling or dislocating transition with
`
`an animation that makes it feel natural,
`
`39
`
`diagonal balance
`
`118
`
`Arrange page elements in 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 or link that clearly gets the user out
`
`of that page and back to a known place.
`
`ORGANIZING THE PAGE:
`
`LA\’OUT OF PAGE EI.IiMENTS
`
`4
`
`The Basics of Page Layout
`
`The Patterns
`
`32
`
`visual framework
`
`88
`
`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.
`
`Use a two-column or form-style layout to show the
`
`user that an object’s properties are edited on this
`
`page.
`
`4]
`
`responsive disclosure
`
`123
`
`Starting with a very minimal UI, guide a user through
`
`a series of steps by showing more of the UI as he
`
`completes each step.
`
`42
`
`responsive enabling
`
`]25
`
`Starting with a UI that’s mostly disabled, guide a
`
`user through a series of steps by enabling more of
`
`the UI as each step is done.
`
`CONTENT~
`
`MemoryWeb Ex. 2033
`Apple v. MemoryWeb – IPR2022-00033
`
`

`

`43
`
`liquid layout
`
`]28
`
`As the user resizes the window, resize the page
`
`contents along with it so the page is constantly
`
`"filled."
`
`DOING THINGS:
`
`/\(~] IONS AN[)
`
`Pushing the Boundaries
`
`The Patterns
`
`44
`
`button groups
`
`133
`
`136
`
`]37
`
`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.
`
`The Basics of Information Graphics
`
`The Patterns
`
`.
`
`overview plus detail
`
`161
`
`173
`
`]74
`
`Place an overview of the graphic next to a zoomed
`
`"detail view." As the user drags a viewport around the
`
`overview, show that part of the graphic in the 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
`
`45
`
`action panel
`
`]40
`
`tooltip or some other floating window.
`
`Instead of using menus, present a large group of
`
`dynamic queries
`
`178
`
`related actions on a UI panel that’s richly organized
`
`and always visible.
`
`46
`
`prominent "done" button
`
`]44
`
`Place the button that finishes a transaction at the end
`
`of the visual flow; make it big and well-labeled.
`
`47
`
`smart menu items
`
`]46
`
`Change menu labels dynamically to show precisely
`
`Provide ways to filter the data set immediately and
`
`interactively. Employ 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.
`
`data brushing
`
`181
`
`Let the user select data items in one view; show the
`
`same data selected simultaneously in another view.
`
`what they would do when invoked.
`
`48
`
`preview
`
`]47
`
`Show users a preview or summary of what will happen
`
`when they perform an action.
`
`49
`
`progress indicator
`
`]49
`
`Show the user how much progress was made on a
`
`time-consuming operation.
`
`50
`
`cancelability
`
`151
`
`Provide a way to instantly cancel a time-consuming
`
`operation, with no side effects.
`
`51
`
`multi-level undo
`
`153
`
`Provide a way to easily reverse a series of actions
`
`performed by the user.
`
`$2 command history
`
`156
`
`As the user performs actions, keep a visible record of
`
`what was done, to what, and when.
`
`5~
`
`macros
`
`158
`
`Macros are single actions composed of other, smaller
`
`actions. Users can create them by putting together
`
`sequences of actions.
`
`local zooming
`
`184
`
`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
`
`187
`
`189
`
`Show the data in a table, and let the user sort the
`
`table rows according to the column values,
`
`jump to item
`
`19]
`
`When the user types the name of an item, jump
`
`straight to that item and select it.
`
`new-item row
`
`193
`
`Use the last row in the table to create a new item in
`
`place.
`
`cascading lists
`
`195
`
`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
`
`1
`
`MemoryWeb Ex. 2033
`Apple v. MemoryWeb – IPR2022-00033
`
`

`

`tree table
`
`]97
`
`autocompletion
`
`227
`
`Put hierarchical data in columns, like a table, but use
`
`As the user types into a text field, anticipate the
`
`an indented outline structure in the first column to
`
`possible answers and automatically complete the
`
`illustrate the tree structure.
`
`entry when appropriate.
`
`multi-y graph
`
`]98
`
`dropdown chooser
`
`230
`
`Stack multiple graph lines, one above the other, in one
`
`Extend the concept of a menu by using a drop-down
`
`panel; let them all share the same X axis.
`
`or pop-up panel to contain a more complex value-
`
`small multiples
`
`200
`
`Create many small pictures of the data using two or
`
`selection UI.
`
`illustrated choices
`
`233
`
`three data dimensions. Tile them on the page
`
`Use pictures instead of words (or in addition to them)
`
`according to one or two additional data dimensions,
`
`to show available choices.
`
`either in a single comic-strip sequence, or in a 2D
`
`matrix.
`
`treemap
`
`list builder
`
`235
`
`203
`
`Show both the "source" and the "destination" lists on
`
`the same page; let the user move items between
`
`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.
`
`them.
`
`good defaults
`
`237
`
`Wherever appropriate, prefill form fields with your
`
`best guesses at the values the user wants.
`
`same-page error messages
`
`2:39
`
`Place form error messages directly on the page with
`
`the form itself; mark the top of the page with an error
`
`The Basics of Form Design
`
`207
`
`message, and if possible, put indicators next to the
`
`originating controls.
`
`Control Choice
`
`The Patterns
`
`forgiving format
`
`209
`
`218
`
`219
`
`Permit users to enter text in a variety of formats and
`
`8 BUILDERS AND EDITORS
`
`syntaxes, and make the application interpret it
`
`The Basics of Editor Design
`
`intelligently.
`
`structured format
`
`The Patterns
`
`220
`
`~ edit-in-place
`
`244
`
`248
`
`249
`
`Instead of using one text field, use a set of text fields
`
`that reflect the structure of the requested data.
`
`Use a small, dynamic text editor to let the user change
`
`text "in place": position the editor directly over the
`
`fill-in-the-blanks
`
`222
`
`original text, rather than using a separate panel or
`
`Arrange one or more fields in the form of a prose
`
`dialog box.
`
`sentence or phrase, with the fields as "blanks" to be
`
`;:~
`
`smart selection
`
`251
`
`filled in by the user.
`
`input hints
`
`Make the software smart enough to automatically
`
`224
`
`select a coherent group of items, rather than making
`
`Beside an empty text field, place a sentence or
`
`example that explains what is required.
`
`the user do it.
`
`composite selection
`
`253
`
`input prompt
`
`225
`
`Use different gestures--or mouse clicks in different
`
`Prefill a text field or dropdown with a prompt that tells
`
`the user what to do or type.
`
`screen areas, such as the composite’s edges versus its
`
`insides--to determine whether you should select a
`
`composite itself or allow its contained objects to be
`
`selected.
`
`viii
`
`CONTENTS
`
`MemoryWeb Ex. 2033
`Apple v. MemoryWeb – IPR2022-00033
`
`

`

`’ one-off mode
`
`255
`
`90 corner treatments
`
`297
`
`When a mode is turned on, perform the operation
`
`Instead of using ordinary right angles, use diagonals,
`
`once. Then switch back automatically into the default
`
`curves, or cutouts for some of the interface’s box
`
`or previous mode.
`
`spring-loaded mode
`
`corners. Hake these corner treatments consistent
`
`257
`
`across the interface.
`
`Let the user enter a mode by holding down a key or a
`
`91
`
`borders that echo fonts
`
`3OO
`
`mouse button. When the user releases it, leave the
`
`When drawing borders and other lines, use the same
`
`mode and go back to the previous one.
`
`color, thickness, and curves used by one of the
`
`constrained resize
`
`259
`
`design’s major fonts.
`
`Supply resize modes with different behavior, such as
`
`92
`
`hairlines
`
`303
`
`preserving aspect ratio, for use under special
`
`Use one-pixel-wide lines in borders, horizontal rules,
`
`circumstances.
`
`magnetism
`
`and textures.
`
`261
`
`93
`
`contrasting font weights
`
`306
`
`iVlake the objects "magnetic" to the things a user
`
`Use two contrasting fonts--one thin and lightweight,
`
`positions them against, When the user drags an
`
`and the other heavier and darker--to separate
`
`object very near one of these things, it should stick.
`
`different levels of information and add visual interest.
`
`guides
`
`263
`
`94
`
`skins
`
`508
`
`Offer horizontal and vertical reference lines to help
`
`Open up the look-and-feel architecture of your
`
`users align objects.
`
`paste variations
`
`application so users can design their own graphics
`
`266
`
`and styles.
`
`Provide specialized paste functionality in addition to
`
`the standard paste operation.
`
`R I: F F h’ IF: N (" F S
`
`] I 2
`
`9
`
`MAKING IT LOOK GOOD:
`
`\’|S|IAI S [’YI.E AND AFSTHEI-ICS
`
`Same Content, Different Styles
`
`The Basics of Visual Design
`
`What This Heans for Desktop Applications
`
`The Patterns
`
`deep background
`
`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 most three major color hues to
`
`use in the interface. Create a color palette by selecting
`
`assorted values (brightnesses) from within those few
`
`hues.
`
`CONTENTS kX
`
`MemoryWeb Ex. 2033
`Apple v. MemoryWeb – IPR2022-00033
`
`

`

`
`
`
`PREFACE
`PREFACE
`
`MemoryWebEx. 2033
`Apple v. MemoryWeb — IPR2022-00033
`
`MemoryWeb Ex. 2033
`Apple v. MemoryWeb – IPR2022-00033
`
`

`

`Once upon a time, interface designers worked with a woetkdly smal! 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 9ray.
`
`Things have changed. If you design interfaces today, you work with a much bigger palette of components
`and ideas. You have a choice of many more user interface toolkits than before, such as JavaTM Swing, or,
`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-U! ideas like
`drag-and-drop are integrated into 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 UI toolkits the way they should be used, and if you follow the various style guides
`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 made it
`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 very little
`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 ]0 years.
`
`As an interface designer trying to make sense of all the technology changes in the last few years, I 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 INTI-:I{FACE PIECES. LO()SEI.Y .IOINEI)
`
`Xi
`
`MemoryWeb Ex. 2033
`Apple v. MemoryWeb – IPR2022-00033
`
`

`

`Forms
`
`Graphic editors
`
`Browsers
`
`Calendars
`
`Media players
`
`Information graphics
`
`Immersive games
`
`e!op a space
`t least ~O0 times
`t has ~own man into
`ignificanf~y more than
`
`Ith
`
`¯ Blog: ~
`MOlave California
`
`[dli shopping cart
`
`(O, "~"’ ’° ch~o.~ ]
`
`Web pages
`
`Social spaces
`
`E-commerce sites
`
`A sampler of interface idioms
`
`xii
`
`MemoryWeb Ex. 2033
`Apple v. MemoryWeb – IPR2022-00033
`
`

`

`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 Ion9 been formatted in hypertext anyway, might now have interac-
`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 editors; 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 Windows style-
`
`guide strictures, as Ion9 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 lot harder).
`What characterizes interfaces that are easy to use?
`
`One could say, "The applications that are easy to use are designed to be intuitive." 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 ]0 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 application is identical to some genre-defining product (e.9., 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.
`
`MemoryWeb Ex. 2033
`Apple v. MemoryWeb – IPR2022-00033
`
`

`

`A£OUT PATTERNS
`
`In essence, patterns are structural and behavioral features that improve the "habitability" of
`something--a user interface, a web site, an object-oriented program, 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 complete step-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 tensions in various design contexts. For instance, an inter-
`face designer who 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 designer’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 it contains
`techniques that don’t qualify as traditional patterns. But it’s concise enough to be manage-
`able and useful.
`
`The text that started it all dealt with physical l:)uildings, 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 9rounding 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 the idea 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 use it!
`
`MemoryWeb Ex. 2033
`Apple v. MemoryWeb – IPR2022-00033
`
`

`

`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-
`tijn van Welie’s "Interaction Design Patterns,’’2 and Jan Borchers’s book A Pattern Approach
`to Interaction Design (Wiley). More recently, a full-fledged web site pattern language was
`published, called The Design of Sites (Addison-Wesley). I highly recommend it, especially if
`you’re designing traditional web sites. If you’re building web or desktop applications, or if
`you’re pushing the boundaries in either domain, look at all of these publications; you might
`find inspiration in any of them.
`
`ABOUT THE PATTERNS IN THIS BOOK
`
`So there’s nothing really new in here. If you’ve done any web or UI design, or even thought
`much about it, you should say, "Oh, right, I know what that is" to most of these patterns. But
`a few of them might be new to you, and some of the familiar ones may not be part of your
`usual design repertoire.
`
`These patterns work for both desktop and web-based applications. Many patterns also ap-
`ply to such digital devices as palmtops, ceil phones, and TV-based devices like digital re-
`corders. Ordinary web sites might also benefit, but I’ll talk more about that topic in the next
`section.
`
`Though this book won’t exhaustively descr