A component is a basic form that interacts with the user and is the smallest unit that can perform a function in any space. The most important property of a component is reuse, which should be equally understandable and usable by users in any context. Its purpose should be clearly defined so that it is not only available in a specific area, and it should be organized visually, using colors, text, icons, etc.
Definition
It is the smallest unit used by the user that needs to distinguish it from other elements, react to behavior, and communicate information about its current state. A component has five properties.
- Usage: Defines the purpose and role of the component.
- Shape: Defines a shape that distinguishes it from other elements and makes it noticeable.
- Behavior: Defines behavior based on actions such as clicks or touches.
- Status: Defines how to notify the current status.
- Context: Defines different uses depending on the space in which it is placed.
Shape
Define a shape to distinguish it from other components. Use it consistently within your service to make it easy for users to predict how a component will behave. Combine visual elements such as shapes, colors, icons, and text, and adjust attention to hierarchies.
The difference in attention between icons and text may vary depending on the situation.
Behavior
It informs you about the consequences of your actions. It tells you an immediate response to a touch or click, or what state the component is currently in. I tend to follow the visual effects of real physical environments.
Status
Reports the state of the current component. Not only the results of the user’s actions, but also the status according to various conditions, it helps the user to understand the current situation. It may indicate that it is currently unavailable because a condition is not met, or display a loading animation to remind you that the data is being loaded and you need to wait a little longer.
- Normal: Indicates that this is an element the user can interact with.
- Focus: Indicates that the element is selected. This state is for situations such as when you press a keyboard tab to toggle elements and act as a return key.
- Hover: A more powerful announcement of an interactable element when the user hovers the cursor over the responsive element.
- Loading: Indicates that data is still being loaded and requires a wait.
- Disabled: Notifies you that the current condition is not met and therefore cannot be used.
Context
Component usage is different depending on the context. Even the same component can be used differently in different environments. Because all design elements are relative, they define the purpose of the component according to the space in which it is placed, the other component elements used together, and the context in which the user uses it.
- fixed/Variable: Defines whether the size is variable or fixed.
- Narrow/Wide: Defines the usage according to the width of the space.
- Hierarchy: Even the same function defines its use according to a hierarchy.
- Floating: Defines whether it will always float based on accessibility or move based on scrolling.
Type
Component types are as diverse as the history of digital services. Components can be roughly divided into three categories based on when a user operates a digital device.
- Navigation: This component is used to navigate information.
- Input: This component is used when the user enters information.
- Information: A component used to deliver information to users.
Navigation
This is the component you use to explore information. There are a component for the smallest unit that contains information, a component that expands compressed information, and a component that displays other information by updating the screen.
- Card: The smallest unit that contains information
- List: Used to sort information of the same property for easy recognition
- Gallery: Used to display cards or information units in two columns.
- Carousel: Used to scroll horizontally rather than vertically.
- Tab: Used to display large amounts of information with different personalities
- Menu: Used to display large amounts of complex hierarchies that are difficult to display with tabs.
There are countless other components.
Input
This component is used to input information. It is used to convey user’s choice or specific information, and various components are used depending on the type of information to be input. As a component that has been used continuously on various platforms for a long time, it tends to follow the existing shape so that users do not get confused.
- Checkbox: Used when multiple elements can be selected
- Radio button: Used when only one of several elements can be selected
- Text Fields: Used when the user enters text information
- Dropdown: Used when opening a window to check various information
- Buttons: Used to enter information about user decisions in various situations
- Toggle: Used to turn a specific state on/off
Information
A component used to pass information. It is used to convey user’s choice or specific information, and various components are used depending on the type of information to be input. As a component that has been used continuously on various platforms for a long time, it tends to follow the existing shape so that users do not get confused.
- Guide Text: Used to provide detailed information in various situations
Tool Tips: Used to tell a lot of information that is difficult to convey through text alone - Toast: Used to lightly convey the consequences of an action.
- Alert: Used to convey information that the user needs to be clearly aware of
- Dialog: Used to convey information that requires the user to make a choice
- Coach Mark: Used to convey information about an unfamiliar concept that needs to be understood.
