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.