Table of content
- Introduction
- Buttons
- Single Choice Components
- Multiple Choice Components
- Sections/Content-Filtering Components
Introduction
At Krasamo, working in Mobile App and Web User Interface and User Experience Design, we regularly encounter situations in which we need to trigger behaviors in an app to satisfy user needs. To fulfill this need for action, we have components.
We define components as touch/clickable elements that represent an action or actions. Depending on the design and use, components can also provide and edit information about parameters (such as controllers).
In this article, components are grouped and explained by type and functionality.
Buttons
Buttons are components that resemble physical control. Their primary purpose is to trigger specific actions within the app.
Buttons for digital platforms must be:
- Identifiable: The text or graphic of the button should be clear to the user. The trigger should be obvious.
- Tap-able: A button should be large enough to be tap-able without problems, yet not situated in such a way as to be activated by accident.
There are several different types of buttons:
Text Buttons: Often appearing in the navigation bar, a text button primarily uses a verb to indicate an action relating to the event that will be triggered by tapping on it. Sometimes an icon is not the best solution to represent the user’s action, and in these cases, a text button has the functionality to clarify the operation of the button.
Shape Buttons: Also called ghost buttons, these are buttons with a specific shape, complemented with text. The design of these buttons serves to attract the attention of the user.
Icon Buttons: These are graphic-based buttons that simplify the user interface by allowing conventions between graphic elements and actions. It is essential to mention that the icon must accurately represent the operation the button will perform. The user must have no doubt about what each icon will accomplish.
Floating Action Button: This component is part of the Material Design UI used for Android designs. It consists of a floating button located at the bottom-right of the screen that, at the touch, will display more buttons with available actions.
Single Choice Components
Single choice components allow the user to select from a list of items, with the restriction of only one item per selection. For this type of mobile/web component, it is essential to consider:
- Number of Items: For usability reasons, the available list must not be too long. If the item list is lengthy, talk to your development team to see if it is possible to incorporate dividers, a search, or another way to filter it.
- Scrollable: If the item list is long, make sure users understand that the component is scrollable and that they can continue exploring the list if needed.
Single choice components may include:
Dropdowns: Consisting of an element that looks like a shaped button, a dropdown expands to reveal a list of available items when the user clicks on it. After the user chooses one of these items, the list will collapse, and the button-shaped element will show the chosen option as selected. The expanded item list should be scrollable if needed. The dropdown component is mostly used and recommended for desktop website designs. Websites shown on desktop allow users to scroll with a trackpad or a mouse while the dropdown is expanded, as opposed to a mobile app, where a tap could dismiss the dropdown. In a mobile version, it is essential to mention that the dropdown is the picker.
Radio Buttons: This type of component presents a list either in a screen, a modal, or a dialog with items, and the user will choose only one by tapping on the item selected. The selected item will then be highlighted by coloring the component. Radio buttons apply mostly to website designs, but they are also found in Android’s Material Design. The mobile version of a radio button often appears as a modal screen list with a checkmark in the selected option.
Pickers: This is the iOS version of a dropdown. A picker is a full-screen component that allows the user to navigate within the item list by swiping inside. Pickers are similar to a physical wheel in that the user can turn the wheel to see more options. It is essential to mention that this component works within a fixed size, meaning the user will always see the same number of options in the available space, regardless of the total number of items. Still, the design works in such a way that users know when they have reached the beginning or end of the list. When an item is selected, the component closes, and the screen returns to normal. The Android version of a picker refers mostly to date pickers.
Multiple Choice Components
Multiple choice components allow the user to visualize items and pick a free or fixed number of items from that list. Multiple choice components share some of the same characteristics as single choice components with regard to the number of available items in the list and the need for a scrollbar if necessary.
Multiple choice components could be:
Checkboxes: Using a list presented either in a screen or a modal, checkboxes allow users to select two or more items from a list. Checkboxes may or may not be limited, meaning users could be restricted to choosing two, three, four, or a specific number of items. If the user only needs to choose one, then a single choice component would be the best component choice. If there is a need to present a significant number of choices, we recommend providing users with a way to search or filter the list.
Chips: A Material Design component, chips consist of button-shaped elements that represent actions or selections. Chips provide a way for users to select multiple items for a filter, but they also serve as buttons to trigger actions.
Sections/Content-Filtering Components
This component allows the user to access a screen with sections. The main goal of this control is to allow users to view/filter different information on the same screen by selecting the section they want to see from the component.
In using the sections component, it is essential to consider:
- Number of Sections: In consideration of the user’s experience, make sure not to overcrowd the screen with a significant number of different sections. If you need numerous sections, you may need to consider a different experience or option. If the user needs to scroll too much in the component to search for a section, using this feature may become an unpleasant experience.
- Naming of Sections: Choose section names that are short and straightforward. Consider how to convey content most efficiently. Long names may cause UI issues when using segmented controls and UX issues when using tabs.
Content-filtering components can include:
Segmented Controls: With the shape of ghost buttons, segmented controls are elements that divide themselves into two or more spaces. Each segmented area represents a section of the screen with different content. It is essential to mention that segmented controls have restrictions on screen size as well as the length of each section’s wording. (The size restriction for this component is the width of the screen.) Segmented controls are used more often on the iOS platform.
Tabs: While similar to segmented controls, tabs are not limited in length. They are placed graphically on the screen as part of the top bar. Tabs are scrollable to find more sections. This component is most often used in the Material Design platform for Android.
Are you having fun learning about Mobile and Web Components?
For additional tips, please see our post entitled “All about Mobile and Web Components: Part 2.“
