IxD textbook - patterns
Grid of Equals
Arrange content items in a grid or matrix. Each item should follow a common template, and each item's visual weight should be similar. Link to jump pages as necessary
Menu Page
Basically a ToC. Show enough information about each link to enable the user to choose well. Show no other significant content on the page. e.g. craisglist
Input Hints
Beside or below an empty text field, place a phrase or example that explains what is required.
Pagination
Break up a very long list into pages, and load them one at a time. Provide controls for the user to navigate the list—next, previous, first, and last pagesHow a document is divided into pages.
Center Stage
ONe primary thing htat is main focus
Overview Plus Detail
Place an overview of the graphic next to a zoomed "detail view." As the user drags a view- port around the overview, show that part of the graphic in the detail view.
Hover Tools
Place buttons and other actions next to the items they act upon, but hide them until the user hovers the pointer over them.
Same-Page Error Messages
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.
Bottom Navigation
Place global navigation at the bottom of the page, below the fold. (e.g. footer content)
Prominent "Done" Button
Place the button that finishes a transaction at the end of the visual flow; make it big and well labeled
Sign-in Tools
Place utility navigation related to a signed-in user's site experience in the upper-right corner. Show tools such as shopping carts, profile and account settings, help, and sign-out buttons.
Input Prompt
Prefill a text field or drop down with a prompt that tells the user what to do or type.
Thumbnail-and-Text List
Present a selectable list of items, with each item containing a thumbnail image, some text, and possibly smaller text as well. If appropriate, use bold colors, icons, and other visual differentiators.
Clear Entry Points
Present only a few main entry points into the interface; make them task-oriented and descriptive. Use clear calls to action. (e.g. Word initial modal, or a few links on Apple's homepage)
Button Groups
Present related actions as a small cluster of buttons, aligned and with similar graphic treatments. Create multiple groups if there are more than three or four actions.
Multi-Level Undo
Provide a way to easily reverse a series of actions performed by the user.
Cancelability
Provide a way to instantly cancel a time-consuming operation, with no side effects.
Settings Editor
Provide an easy-to-find, self-contained page or window where users can change settings, preferences, or properties. Divide the content into separate tabs or pages, if you need to manage large numbers of settings.
Dynamic Queries
Provide ways to filter the data set immediately and interactively. Employ easy-to-use stan- dard controls, such as sliders and checkboxes, to define which slices or layers of the data set get shown. As the user adjusts those controls, show the results immediately on the data display.
Tree Table
Put item fields in table-like columns, but use an indented outline structure in the first column to illustrate the tree structure.
Accordion
Put modules of content into a collinear stack of panels that can be closed and opened independently of each other.
Module Tabs
Put modules of content into a small tabbed area so that only one module is visible at a time. The user clicks on tabs to bring different modules to the top
Movable Panels
Put modules of content into boxes that can be opened and closed independently of each other. Arrange the boxes freely on the page, and let the user move them around into a custom configuration
Collapsible Panels
Put secondary or optional material into panels that can be opened and closed by the user.
Two-Panel Selector
Put two side-by-side panels on the interface. In the first one, show a list of items that the user can select at will; in the second one, show the content of the selected item
Canvas Plus Palette
Place an iconic palette next to a blank canvas; the user clicks on the palette buttons to cre- ate objects on the canvas
Navigational models
1) Hub and spoke (iphone home screen) 2) fully connected (most website where you can get to any page from any page) 3) multilevel (subg pages only accessilbe from sub pages) 4) stepwise (wizard, slideshow) 5) pyramid (e.g. medium article with back and next) 6) pan and zoom (maps) 7) flat navi (photoshop, excel) 8) modal panel 9) clear entry point 10) bookmark 11) escape hatch - can be used interchangeably -sometimes you want tlimit navi - can be rendered in diff ways
Thumbnail Grid
Arrange a list of visually interesting items into a "small multiples" grid of thumbnail im- ages. Let the user select one or more thumbnails to view or manage those items
Carousel
Arrange a list of visually interesting items into a horizontal strip or arc, and let the user scroll or swipe the image thumbnails back and forth to view them. Enlarge the center item, if appropriate
Dashboard
Arrange data displays into a single information-dense page, updated regularly. Show users relevant, actionable information, and let them customize the display as necessary Your site or application deals with an incoming flow of information from something— web server data, social chatter, news, airline flights, business intelligence information, or financials, for example. Your users would benefit from continuous monitoring of that information.
Fill-in-the-Blanks
Arrange one or more fields in the form of a prose sentence or phrase, with the fields as "blanks" to be filled in by the user.
Diagonal Balance
Arrange page elements in an asymmetric fashion, but balance it by putting visual weight into both the upper-left and lower-right corners.
Filmstrip
Arrange top-level pages side by side, and let the user swipe them back and forth to view them one at a time
Datatips
As the mouse rolls over a point of interest on the graphic, put the data values for that point into a tool tip or some other floating window.
Data Spotlight
As the mouse rolls over an area of interest on the graphic, highlight that slice of data and dim the rest.
Command History
As the user performs actions, keep a visible record of those actions—what was done to what, and when
Liquid Layout
As the user resizes the window, resize the page contents along with it so that the page is constantly "filled.
Autocompletion
As the user types into a text field, anticipate the possible answers, show a selectable list of them, and automatically complete the entry when appropriate.
Infinite List
At the bottom of a long list, put a button that loads and appends more items to the list.
Deep linked state
Capture the state of a site or app in a URL that can be saved or sent to other people. When loaded, it restores the state of the app to what the user was seeing e.g. share a link to a very deep state
Smart Menu Items
Change menu labels dynamically to show precisely what they will do when invoked.
Fat menu
Display a long list of navigation options in drop-down or fly-out menus. Use these to show all the subpages in site sections. Organize them with care, using well-chosen catego- ries or a natural sorting order, and spread them out horizontall
Text Clear Button
Clear a text field with one button press.
Small Multiples
Create many small pictures of the data using two or three data dimensions. Tile them on the page according to one or two additional data dimensions, either in a single comic- strip sequence or in a 2D matrix.
Visual Framework
Design each page to use the same basic layout, colors, and stylistic elements, but give the design enough flexibility to handle varying page content
Cascading Lists
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.
Treemap
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.
Dropdown Chooser
Extend the concept of a menu by using a drop-down or pop-up panel to contain a more complex value-selection UI.
Password Strength Meter
Give the user immediate feedback on the validity and strength of a new password while it is being typed.
Types of Navigation
Global navigation is what's found on every main screen. It usually takes the form of menus, tabs, and/or sidebars, and this is how users move around the formal navigational structure of the site. (In an earlier version of this book, global navigation was defined as a pattern. But by now, it's so common and well understood that it really doesn't need to be called out as such anymore.) Utility navigation, also found on every main screen, contains links and tools related to noncontent aspects of the site or application: sign-in, help, print, Settings Editors (see Chapter 2), language tools, and so on. Associative and inline navigation embed links in or near the actual content. As the user reads or interacts with the site, these links present options that might be immediately relevant to the user. They tie content together thematically.
Richly Connected Apps
Inside your mobile app put direct links to other apps, such as the phone dialer, map, or browser. "Prefill" them with data from the user's current context.
Action Panel
Instead of using menus, present a group of related actions on a UI panel that's richly or- ganized and always visible
Structured Format
Instead of using one text field, use a set of text fields that reflect the structure of the re- quested data.
Data Brushing
Let the user select data items in one view; show the same data selected simultaneously in another view.
Macros
Macros are single actions composed of other, smaller actions. Users can create them by putting together sequences of actions Provide a way for the user to "record" a sequence of actions and easily "play them back" at any time. The playback should be as easy as giving a single command, pressing a single button, or dragging and dropping an object
Annotated scrollbar
Make the scrollbar serve double-duty as a map of the content, or as a "You are here" indicator.
Generous Borders
On devices with touch screens, put large margins and whitespace around buttons, links, and any other tappable control.
Breadcrumb
On each page in a deep navigational hierarchy, show a list of all the parent pages, up to the main or home page.
Sequence Map
On each page in a sequence, show a map of all the pages in order, including a "You are here" indicato If the navigation topology is large and hierarchical (as opposed to linear) you may want to consider using Breadcrumbs instead
Escape hatch
On each screen that has limited navigation options, place a button or link that clearly gets the user out of that screen and back to a known place.
Vertical Stack
Order the mobile page's content in a vertical column, with little or no use of side-by-side elements. Let text elements line-wrap, and let the page scroll down past the bottom of most device screens.
Forgiving Format
Permit users to enter text in a variety of formats and syntax, and make the application interpret it intelligently.
Sitemap Footer
Place a site map into the footer of every page in a site. Treat it as part of the global naviga- tion, complementary to the header. Abridge the site map if you need to make it fit into a compact space
List Inlay
Show a list of items as rows in a column. When the user selects an item, open that item's details in place, within the list itself. Allow items to be opened and closed independently of each other
One-Window Drilldown
Show a list or menu of items in a single window. When the user selects an item from the list, show the details or contents of that item in the window, replacing the list
Local Zooming
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. e.g. macbook doc
List Builder
Show both the "source" and the "destination" lists on the same page; let the user move items between them, via buttons or drag-and-drop.
Modal
Show only one page, with no other navigation options, until the user finishes the immedi- ate task.
Sortable Table
Show the data in a table, and let the user sort the table rows according to the cell values in a selected column.
Alphabet Scroller
Show the letters of the alphabet arrayed along the scrollbar of an alphabetized list.
Progress Indicator
Show the user how much progress has been made so far on a time-consuming operation.
Newstream
Show time-sensitive items in a reverse chronological list, with the latest items at the top. Update it dynamically, and combine the items from different sources or people into one single stream.
Touch Tools
Show tools only in response to a touch or key press, and put them in a small, dynamic overlay atop the content.
Preview
Show users a preview or summary of what will happen when they perform an action.
Animated Transition
Smooth out a startling or dislocating transition with an animation that makes it feel natural.
Multi-Y Graph
Stack multiple graph lines in one panel; let them all share the same x-axis.
Responsive Enabling
Starting with a UI that is mostly disabled, guide a user through a series of steps by en- abling more of the UI as each step is done
Responsive Disclosure
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
Feature, Search, and Browse
These three elements are found together on many, many successful sites Feature: easy hook; browse for open-ended browsing, search for zeroing in
Pyramid
This is the classic buzzfeed go pic by pic thing Link together a sequence of pages with Back/Next links. Create a parent page that links to all of the pages in this sequence, and let the user view them either in sequence or out of order.
Multi-Level Help
Use a mixture of lightweight and heavyweight help techniques to support users with vary- ing needs. You're designing a complex application. Some users may need a full-fledged help system, but you know most users won't take the time to use it. You want to support the impatient or occasional user too, to the extent you can. In particular, you might need to tailor your design for intermediate-to-expert users—but how will you help beginners become experts? Captions, tool tips, hover tools, help texts in collapsible panels, intro material
Many Workspaces
Use multiple top-level tabs, tab groups, and windows so that users can view more than one page, project, file, or context at a time. Let users place these workspaces side by side if possible. Use when You're building an application that views or edits any type of content—websites, docu- ments, images, or entire projects that include many files.
New-Item Row
Use the last or first row in the list or table to create a new item in place.
Picture manager
Use thumbnails, item views, and a browsing interface to create a familiar structure for managing photos, videos, and other pictorial items. People use your software to work with lists or collections of pictorial things: photos, draw- ings, video clips, and so on. The list might be in a web page, or in an application, or both. It might allow editing by the owner of the content, or it might simply show the content to the public for browsing, viewing, and comments. Thumbnail grid + Single item view
Row Striping
Use two similar shades to alternately color the backgrounds of the table rows.
Streamlined Branding
Use your organization's logo, colors, and other brand elements on the mobile site or app, but keep them small on the screen and fast to load.
Right/Left Alignment
When designing a two-column form or table, right-align the labels on the left and left- align the items on the righ
Jump to Item
When the user types the name of an item into a table or tree, jump straight to that item and select (e.g. CTRL+F brings you straight to the first instance of what youre looking for)
Good Defaults
Wherever appropriate, prefill form fields with your best guesses at the values the user wants.
Loading Indicators
While a page or page section is loading, show a progress indicator in the place where it will be (or where the user tapped or clicked).
Alternative Views
e.g. google maps views Let the user choose among alternative views that are substantially different from the de- fault view.
Wizard
nLead the user through the interface step by step to do tasks in a prescribed order. You are designing a UI for a task that is long or complicated, and that will usually be novel for users—not something that they do often or want much fine-grained control over (such as the installation of a software package). You're reasonably certain that the designer of the UI will know more than the user does about how best to get the task done Tasks that seem well suited for this approach tend to be either branched or very long and tedious—they consist of a series of user-made decisions that affect downstream choices. The catch is that the user must be willing to surrender control over what happens when Think about moving through an unfamiliar airport—it's often easier to follow a series of signs than it is to figure out the airport's overall structure. You don't get to learn much about how the airport is designed, but you don't care about that. But in other contexts, it backfires. Expert users often find Wizards frustratingly rigid and limiting. This is particularly true for software that supports creative processes such as writing, art, or coding.