This section presents a series of various components that have been created based on Google Material guidelines. As YUMI has its own specifications and measurements, they have been adapted following the requirements of the terminal.
- App bars
- Bottom navigation
- Bottom sheets
- Text fields
- Selection control
- Expansion pannels
App bars are frequently used to display relevant actions, as well as navigation buttons. They can be displayed at the top or the bottom of the YUMI terminal, remarking not only actions that the user could take but also action buttons.
Both top and bottom app bars can be changed and customised depending on the needs of the screen, the product or the client’s.
It is recommended to use them in screens that have more than two actions to separate them in a neat and organized way.
Bottom app bars can include floating action buttons, known as FAB, that help emphasise an important action. They also frequently include navigation menus placed on the left side of the screen. As seen in the examples below, bottom app bars can combine different types of elements, such as icons and captions. Regarding FABs, they can appear overlapped (which has an elevated appearance) or inserted on the bar.Top app bars are useful when a screen needs to display content or actions related to it. They are frequently used for titles, actions and navigation. The user can choose between using a top bar with or without icons, titles or items.
Bottom app bars
Bottom navigation bars are components able to display three to five destinations to other screens on the same app, all located at the bottom of the screen on the terminal. Each destination can be represented by text labels, icons or a combination of both. Depending on the product and the number of destinations, the user might be interested in using only icons or only text labels to display each destination.
Bottom navigation bars also allow users to make combinations of text labels and icons on the same bar, depending on if the destinations are active or inactive, to emphasize the current location of the person using the YUMI terminal.
The following section displays a collection of examples of bottom sheets, which are surfaces that contain supplementary or additional content. Equally as bottom navigation bars, they are found at the bottom of the screen.
There exist three basic categories of bottom sheets that have been designed by Google Material in order to be functionable on different use cases.
- Standard bottom sheets show content that goes along with the screen’s most relevant content, remaining visible while a user interacts with the content on the background.
- Modal bottom sheets can be used as an alternative to dialogs and when there exists a need to provide additional items or information. For the user to be able to interact with the underlying content, they need to be resolved first.
- Expanding bottom sheets are condensed surfaces that expand when the user interacts with them. They provide access to key features or tasks.
As indicated previously, some of them can be displayed on an expanded list style as well as on a contained style, with or without details and/or icons.
Buttons allow users to take actions and make choices with a single tap. They are usually placed in dialogs, modal windows, forms, cards, toolbars and more, and are easily distinguishable from the rest of the content. Their different types and appearances should be used keeping in mind their hierarchy, as we will see on the examples below.
Flat, contained and outlined buttons can be placed over a variety of backgrounds, as they present different containers to maintain accessibility.
- Flat buttons (squared and circular) are used for less important or secondary actions.
- Contained buttons (squared and circular) present higher emphasis and are used to highlight more relevant actions.
- Outlined buttons are typically used for intermediate actions or tasks.
Dropdown buttons can present different states, as well as contain hidden layers.
Toogle buttons. Frequently used on group related options, they present different states and can be used on their own or combined.
Cards are used to display content and actions that are related on a single topic, and can be active or inactive. As seen below, they are one of the most versatile components, that is why we have set a number of different examples that have been adapted to suit the requirements of the YUMI terminal.
It offers a wide range of possibilities in terms of sizes, forms and combination of the inner elements. They contain text, images, buttons icons that can be fully customisable to meet with the client’s specifications.
- Header cards contain a title, a subtitle or additional text, and an optional icon.
2. Content cards are simple containers of information. They can be adjusted in size depending on the length of the displayed text.
3. Action cards are used to display buttons, icons or a combination of both. They can contain up to two action buttons, organised in a single card or in two parallel cards with the same appearance, having the option of including up to two actions.
In this category, we introduce chips and their characteristics. Chips are compact elements that, in a somewhat similar way to buttons, represent attributes, actions or inputs. They allow the user to access information, select different elements on a screen, help filter content and information or lead to actions.
They are always composed of text and a container, and can include an optional thumbnail, or a removing icon. They can appear in different ways, such as inline with a text input, a stacked list or a horizontal scrollable list.
- Action chips
- Outlined action chips
Tabs are useful to organise content in different screens and data sets. They simplify the navigation for the user, so they can switch freely from one screen to another without missing or losing any content.
Tabs help organise content that has equal relevance on all screens, and can be paired with other components such as top app bars. They can also be used in a nested way with cards or different types of sheets.
All tabs present the same width, and the ones that are active can be distinguished from the rest by using a bold font or highlighting its bound.
A menu is a component that displays a list of choices on surfaces that, similar to dialogs, are temporary or need to be dismissed in order for the user to be able to interact with underlying information. They appear as a consequence of an interaction with a button, an icon or other components that trigger the action.
Usually, they have a reduced appearance compared to selection controls or action buttons. When triggered, they unfold in different ways depending on the action they hold, such as:
- Dropdown menus, which display options in a listed way.
- Exposed dropdown menus, which include the selected menu that triggered the action above said list of options.
Text fields allow the user to write text into empty boxes. The can appear both in forms and dialogs, and they present different appearances that can be customisable that fit best the needs of a YUMI product.
There are two types of text fields: complete text fields, and text areas. Both types use containers, which can be outlined or clear (with a line underneath), and they have the same utility. That allows the user to choose between the one that best adjusts to the style of the product.
Both of them include a label that specifies what kind of content the box is asking for, as well as an optional helper text. Text fields can also include an icon positioned on the right end of the box to help as a visual guide for the user.
In this section we present sliders, which are a component that allow the user to make selections from range values. They appear as a bar with an interactive element placed over it, that the user will have to move in order to increase or decrease a specific value. As most components, they have four states: normal, focused, clicked and disabled.
In order to represent a relative scale, sliders can include icons at the beginning and the end of each bar, which can also at the same time be combined with a number to illustrate said scale.
When the user interacts with a slider, they can see that the action has immediate effects. That allows the user to adjust the selection freely and keeping a visual guide of the process.
- Continuous sliders reflect the state of the controls.
- Discrete sliders are used on screens or actions that require te user setting a value under a specific range.
Selection controls are used to display a series of different tasks or information that involves the user making choices. They are used to select options or switching actions on and off. They are frequently used on screens that demand the user to show their preferences, such as settings on a terminal.
There are three usable types:
- Checkboxes, which allow the user to select one or multiple options from a list, as well as turning on and off a specific item.
- Radio buttons, which are frequently used when a screen demands the user to select a single option from a list.
- Switches, which have the function of activating or deactivating a setting or action.
As most components, they have different states: hovered, focused, clicked, disabled and disabled focused. Below you can see a few examples.
The examples below display two types of steppers, which are components that are used mainly to indicate the state of a process. They usually appear as a bar that can come with icons or numbers, as seen in the first image.
They are also frequently designed with smaller indicators, known as navigation bullets, between an action bar that indicates not only which screen is currently active, but also how many steps or screens are left. These action bars can appear with arrow buttons on each end of the bar, or can be horizontally scrollable.
They are useful for screens that ask for the user to complete forms with multiple steps, as well as on content cards.
Similar to previous components in this entry such as menus, expansion panels contain lists that allow the user to interact with them. They can appear alone and collapsed, as well as stacked in a collapsed list, and they are able to hold multiple types of other components such as titles, labels, inputs and icons.
Expansion panels should always include an icon on the right end of each bar to indicate if the panel is open or closed.
- Closed – list type
In this section we have included a visual guide of standard spacing values, known as paddings. Each component has its own padding and must respect the following values when putting it together with other components.
Dialogs are a series of components with multiple variations and combinations that are to inform the user about relevant information. They can require to take a decision, or engage in a task in order to dismiss them.
As defined by Google Material, dialogs are modal windows that appear overlapped on screens in order to provide information that should be confirmed, dismissed or resolved with the demands they expose.
It should be kept in mind that dialogs are interruptive, so it would be best to use them sparingly.
Dialogs can have a closed – list type appearance or an expanded appearance. The later one fills most of the screen, and it should be used to display large amounts of information or important actions that need to be addressed.
The function of datepickers is to allow the user to select dates or a range of dates. They can appear as calendars or as clocks, but they can also have a more simplified look that allows the user to select the desired range or information by each digit.
- Text fields