Speak Intelligently About Your App Anatomy (Material Design Glossary)

Following my previous post on terminology from the iOS HIG, I want to create a guide for Material Design. While the style guide itself is dense with specifics on use cases, measurements, and exceptions, I extracted key terminology and pictures for quick reference. If you are a designer working with engineers on a product for Android or Chrome, understanding this vocabulary will help you to improve your ability to communicate those designs. If you download HoverSee extension for Safari or Imagus for Chrome, you can preview the images without leaving the page.

A

Android navigation bar- houses the device navigation controls: Back, Home, and Overview. It also displays a menu for apps written for Android 2.3 or earlier

App bar- formerly known as the action bar in Android, is a special kind of toolbar that’s used for branding, navigation, search, and actions

Auto-complete text field- Presents real-time suggestions or completions in dropdowns, so users can enter information more accurately and efficiently

B

Bottom navigation bar- Makes it easy to explore and switch between top-level views in a single tap

Bottom sheet- Slide up from the bottom edge of the screen to reveal additional content

Branded launch screen- Provides momentary brand exposure, freeing the UI to focus on content

Button- Clearly communicates what action will occur when the user touches it. It consists of text, an image, or both, designed in accordance with your app’s color theme

C

Card- A sheet of material that serves as an entry point to more detailed information. A card could contain a photo, text, and a link about a single subject.

Cascading navigation drawer (desktop only)- If you have a deep navigational hierarchy, you may use cascading menus to expand navigation drawer content horizontally. Each collection of views is presented in its own panel, and a level closes when a subsection is selected

Check- Menu control that indicates that the list item has been selected. The selection is done through a different control

Checkbox- Can either be a primary action or a secondary action within a list control

Chip- Represent complex entities in small blocks, such as a contact

Chrome OS shelf- houses the app launcher, application icons, and system settings on Chrome OS

Clipped navigation drawer- Apps focused on productivity that require balance across the screen

Column name hover (desktop)- If there is a need to provide definitions to column headers, display a tooltip on hover. If sorting is enabled, display a light sort icon upon hover, which indicates that the column is sortable

Confirmation dialogue- Requires users to explicitly confirm their choice before an option is committed. For example, users can listen to multiple ringtones but only make a final selection upon touching “OK.”

Contact chip- Contact information that users have for people may be represented in a compact way using contact chips. The chips are invoked and inserted into a text field (usually the “To” field) when the user starts typing a contact’s name, sees the contact’s addresses, and selects the correct one. Contact chips can be added directly to a text field from a menu of contacts

Content block- Cards can be constructed using blocks of content which include an optional header, a primary title, rich media, supporting text, or actions. These blocks can be organized to promote different types of content. For example, numbers may be emphasized by increasing their typographic scale

Continuous slider- Use when subjective settings that do not require a specific value for the user to make meaningful adjustments

D

Dark status bar- By default, the color of the status or window bar is a darker shade of the app bar color. It can also use color from another element in the layout or be translucent

Data table- Display raw data sets. They usually appear in desktop enterprise products

Date picker- A dialog picker is used to select a single date on mobile

Deep linking- Modal bottom sheets may be used to provide deep links to content or controls from another app. These span the full screen width

Determinate indicator- indicate how long an operation will take when the percentage complete is detectable

Dialogue- The goal elevation that a component moves towards, relative to the component’s resting state. They ensure that elevation changes are consistent across actions and component types. For example, all components that lift on press have the same elevation change relative to their resting elevation

Discrete slider- The discrete slider thumb snaps to evenly spaced tick marks along the slider rail. Use for objective settings that require specific values for the user to make meaningful adjustments. Each tick mark should change the setting to a level that’s discernible to the user. The values are predetermined and aren’t user-editable

Dismiss- Gesture originates on a swipeable element, such as a list item or card, orthogonal to the direction of scrolling

Dividers- Group and separate content within lists and page layouts. The divider is a thin rule, lightweight yet sufficient to distinguish content visually and spatially. (see full bleed and inset dividers)

Dropdown button- Selects between multiple selections. The button displays the current state and a down arrow. Available states may be shown as a list of strings, a palette, or icons, for example. (see generic overflow and segmented dropdown button)

E

Editable stepper- Allows users to return later to edit a step. These are ideal for workflows that involve editing steps within a session

Edge swipe- Gesture originates outside of the screen to reveal off-screen content. It invokes content separate from the current view.

Empty state- Occurs when the regular content of a view can’t be shown. It might be a list which has no items, or a search which returned no results. Although these states aren’t typical, they are important opportunities for good design to avoid user disappointment or confusion

Error state- Occurs when an app fails to complete an expected action

Expand/collapse- Secondary action within a list control. Expands and collapses a list view vertically to show and hide details of existing list items

Expanded navigation drawer- If you have a deep navigational hierarchy, you may expand that hierarchy within the navigation drawer. Upon selecting a level, the level of navigation below is revealed. Selecting a collapsed section expands that level in-line, hiding all levels outside of it

F

Fingerprint detection- Can be used to unlock a device, sign in to apps, and authenticate purchases with Google Play and some third-party apps

Flat button- A button made of ink that displays ink reactions on press but does not lift

Float label- Refers to when the user engages with a text input field and an inline label transitions to above the field

Floating action button- A circular material button that lifts and displays an ink reaction on press

Floating navigation drawer- Apps that require less hierarchy

Full bleed dividers- Separate distinct content sections (e.g., biographic details from contact information) or distinct content elements (e.g., list items) in both lists and page layouts. Full-bleed dividers can also indicate seams in material where the material will expand when content is expanded.

Full-height navigation drawer- Apps focused on information consumption that use a left-to-right hierarchy

Full-screen dialogue- Groups a series of tasks (such as creating a calendar entry) before they may be committed or discarded. No selections are saved until “Save” is touched. Touching the “X” discards all changes and exits the dialog

G

Generic overflow dropdown button- displays an arrow or menu button by default. When the button is pressed, the menu appears. Pressing an option on the menu navigates to further settings for that option

Grid list- An alternative to standard list views. Grid lists are distinct from grids used for layouts and other visual presentations. It is best suited to presenting homogenous data, typically images, and is optimized for visual comprehension and differentiating between similar data types

H

Horizontal stepper- Ideal when the contents of one step depend on an earlier step

I

Icon toggle- Icons are appropriate for toggle buttons that allow a single choice to be selected or deselected, such as adding or removing a star to an item. They are best located in app bars, toolbars, action buttons or toggles

In-context navigation- (used with tabs or navigation drawers) allows nimble movement between related sets of data. In-context navigation integrates into an app’s content and is typically less linear in nature

Indeterminate indicator- Request that the user wait while something finishes when it’s not necessary to indicate how long it will take

Inline menu- Instead of editing text, users may need to select from a predefined list of options. In this scenario, embed a menu component directly in the table

Inset divider- Separates related content, such as sections in a list of contacts or emails in a conversation. Inset dividers should be used in conjunction with anchoring elements such as icons or avatars aligned with the Title Key Line

Launch screen- A user’s first experience of your application. Because launching your app while displaying a blank canvas increases its perceived loading time, consider using a placeholder UI or a branded launch screen (see placeholder UI and branded launch screen)

Leave-behind- An informative hint as to what swiping a list item away will do to that item. The leave-behind can transform into an action

Left navigation- The content appearing in the left nav is ideally navigation- or identity-based

Light status bar- With dark icons, better harmonizes with light content and can be used an alternative to the dark status bar

Linear progress indicator- Should always fill from 0% to 100% and never decrease in value. It should be represented by bars on the edge of a header or sheet that appear and disappear

Linear stepper- Requires users to complete one step in order to move on to the next

List control- Icons that appear to the left or right of the list text. They indicate the state of a list item, information about a list item, or serve as an action related to the list item. Leave-behinds are list controls, which are revealed only upon swipe

List- Presents multiple line items vertically as a single continuous element

M

Menu- A temporary sheet of paper that always overlaps the app bar, rather than behaving as an extension of the app bar

Menu open- A drag originating from a menu or picker reveals a menu. Upon lift, the highlighted menu option is selected

Modal bottom sheet- Alternatives to menus or simple dialogs. They can also present deep-linked content from other apps. They are primarily for mobile

N

Navigation- Guides users between different parts of your app

Navigation drawer- Slides in from the left. It is a common pattern found in Google apps and follows the keylines and metrics for lists

Navigation icon- At the left side of the app bar can be a control to open a navigation drawer, an up arrow for navigating upward through your app’s hierarchy, or omitted entirely if no navigation is required from this screen. Icons on the right side of the app bar are app-related actions

Navigational transitions- Movements between states in an app, such as from a high-level view to a detailed view. Most, but not all, transitions are hierarchical in nature

Nested menu indicator- The glyph indicates that a secondary menu will fly out upon hover, focus, and/or selection

Nested navigation- When you have multiple levels of navigation, sibling views should be nested underneath their parent

Non-linear stepper- Allows users to enter a multi-step flow at any point

Notification- Informs your app’s users about relevant and timely events in your app. You can create notifications to draw attention to messages from friends, alert a commuter to traffic slowdowns, show the progress of a new app being installed, and more

O

Overflow menu- Typically placed in the upper-right corner of cards, but can be in the lower right if the placement improves content layout and legibility

Overscroll collapse- Navigates up in the content hierarchy via a paging swipe at the top or bottom of scrolling content

P

Pan- An omnidirectional one- or two-finger gesture that expands the field of view. Drag is typically used with pan. Fling will maintain gesture velocity, resulting in a significant pan of the content along the direction of the fling gesture

Paging swipe- An on-screen, in-content swipe that reveals related off-screen content. It reveals one page/tab per paging swipe

Peaking notifications- When a high-priority notification arrives, it is presented to users for a short period of time with an expanded layout exposing possible actions. The notification then retreats

Persistent bottom sheet- Displays in-app content that supplements the main view. It remains visible even when not actively in use, resting at the same elevation as an app and integrating with its content

Persistent footer buttons- If your app requires actions to be persistent and readily available to the user, consider using the floating action button or persistent footer buttons

Persistent navigation drawers- Can toggle open or closed. The drawer sits on the same surface elevation as the content. It is closed by default and opens by selecting the menu icon, and stays open until closed by the user. The state of the drawer is remembered from action to action and session to session

Picker- Provides a simple way to select a single value from a pre-determined set

Placeholder UI- The most seamless launch transition — appropriate for both app launches and in-app activity transitions

Q

Quick entry / Search bar- When an app supports large amounts of information, users should be able to quickly locate content by searching

R

Refresh indicator- the manual refresh method requires users to initiate content updates via an action or gesture. Manual refreshing can supplement syncing while maintaining a current scroll position, as when checking for new mail in a Gmail account. The refresh indicator shows this progress

Responsive elevation- Meaning they change elevation in response to user input (e.g., normal, focused, and pressed) or system events. These elevation changes are consistently implemented using dynamic elevation offsets

Radio button- Allows the user to select one option from a set. Use radio buttons for exclusive selection if you think that the user needs to see all available options side-by-side

Raised button- A typically rectangular material button that lifts and displays ink reactions on press

Reorder- Secondary action within a list control that allows dragging of the list item to other locations within the list. It usually appears in list editing mode

Reveal-upon-scroll- Means that reversing the scroll direction in a content area reveals hidden in-app elements. E.g., scrolling up in Chrome shows the Omnibox

Right drawer- Content should be secondary to the main content on a page.

Row hover (desktop)- Displays a background in a table row if a user hovers over any part of that row. If there are separate hover states on individual table cells, display both the hover state of the cell and row at the same time

Runtime permission- Apps may request permission to access information or use device capabilities at any time after installation. When a user needs to perform an action in an app, such as using the device camera, the app may request permission at that moment

S

Scroll- A vertical or horizontal swipe in a single direction within the content body

Segmented dropdown button- Has two sections: the current state and the dropdown arrow icon. Pressing the current state will cause that state’s action to fire within the screen. Pressing the dropdown arrow will display all the state options. Selecting one will change the displayed state

Selection control- Allows the user to select options. There are three kinds: checkboxes, radio buttons, and on/off switches. Selection controls use the theme’s accent color

Side navigation- Can be pinned for permanent display or float temporarily as overlays. Side navs can be positioned on the left or right side of the screen. (see left nav and right nav)

Simple dialogues- Can provide additional details or actions about a list item. For example, they can display avatars, icons, clarifying subtext, or orthogonal actions (such as adding an account)

Slider- Lets users select a value from a continuous or discrete range of values by moving the slider thumb. The smallest value is to the left, the largest to the right. Sliders can have icons to the left and right of the bar that reflect the value intensity. The interactive nature of the slider makes it a great choice for settings that reflect intensity levels, such as volume, brightness, or color saturation. (see continuous and discrete slider)

Snackbar- Provides lightweight feedback about an operation by showing a brief message at the bottom of the screen. Snackbars can contain an action

Sorted column- If column sorting is enabled, sort the most important data by default and display a sorted state in the column header. If the user clicks on a column that is already sorted, reverse the sort order and rotate the sort icon

Status bar/ window bar- On Android, the status bar contains notification icons and system icons. On Chrome, the top bar contains the window controls: minimize, full screen, and close. In a Chrome app, the top bar can disappear, and the window controls are then brought into the app bar

Steppers- Convey progress through numbered steps. They may also be used for navigation. (see editable, mobile, and optional steppers)

Sub menu- Menu items can reveal nested submenus. Try to limit nesting to one level deep, as it can be difficult to navigate multiple nested submenus

Subheaders- Special list tiles that delineate distinct sections of a list or grid list and are typically related to the current filtering or sorting criteria. Subheader tiles are either displayed inline with tiles or can be associated with content, for example, in an adjacent column. (depicted as “today” lable in image)

Swipe to refresh- Usually occurs in a vertical and downward movement. It is available at the top of a list, or at the edge of any card or container where new content surfaces

Switch- On/off switches toggle the state of a single settings option. The option that the switch controls, as well as the state it’s in, should be made clear from the corresponding inline label. Switches take on the same visual properties of the radio button

T

Tabs- Make it easy to explore and switch between different views or functional aspects of an app or to browse categorized data sets

Text field- Allow the user to input text, select text, and lookup data via auto-completion

Text selection toolbar- The floating toolbar appears above the selection area with primary actions of Cut, Copy, Paste, and More

Three-line list- Each tile contains a maximum of three lines of text. The amount of text can vary between tiles within the same list

Tilt- Moves 3D content forward or backward. The transition from another two-finger gesture (e.g., pinch zoom or rotate) such as in Maps, will result in a two-finger pan

Time picker- Adjusts to a user’s preferred time setting, i.e. the 12-hour or 24-hour format. A dialog picker is used to select a single time (hours:minutes) on mobile

Toast- Similar to snackbars but do not contain actions and cannot be swiped off screen

Toggle buttons- May be used to group related options. Arrange layout and spacing to convey that certain toggle buttons are part of a group

Tooltip- Labels that appear on hover and focus when the user hovers over an element with the cursor, focuses on an element using a keyboard (usually through the tab key), or upon touch (without releasing) in a touch UI. They contain textual identification for the element in question. They may also contain brief helper text regarding the function of the element

Touch activities- The result of a specific gesture. A touch activity (zoom in) may be achieved through multiple touch mechanics (pinch open, double touch, etc.)

Touch mechanic- What your fingers do on the screen. A touch mechanic (such as swipe) may have multiple results (such as enable/disable), depending on the context

Two-line list- Each tile contains a maximum of two lines of text. The amount of text can vary between tiles within the same list

U

UI Controls- Like a slider, placed inline with primary content can modify the view of the primary content. For example, a slider to choose a day, stars to rate content, or a segmented button to select a date range

V

Vertical steppers- Designed for narrow screen sizes. They are ideal for mobile

W

Waterfall toolbar- When toolbars share a seam that transforms into a step

Whiteframes - provide a variety of layout structures using a consistent approach to surfaces, layering, and shadows