The world of technology has been in full expansion for the past decades. This gave birth to a great need for advancements in UI design, because the more users came to interact with tech devices, the more varied requirements emerged on the market. Countless elements make up a user interface, that we might not realize just how important each of them really is. One of these UI design elements is the indicator.
If we look around, we can see indicators sprinkled throughout our daily lives. When we are driving our car, an indicator points out that we are running out of gas. When we want to cross the street, we see an indicator letting us know which way to go. Even in scientific settings, indicators may show us the pH level of an organism. But what exactly are indicators in the world of UI UX designers?
Also known as status indicators, these UI elements are instrumental in communicating the severity level of information to users. As their name suggests, indicators will point out a certain detail or state of an action. Depending on their shape and color, users should be able to quickly identify what the indicator's meaning is.
Types of Indicators
There are multiple aspects based on which UI UX designers organize and perceive indicators. One of the most common classifications of status indicators is based on their color - and this should not really come as a surprise. Color theory has long been a subject of discussion and a defining subject in UI UX design.
While blue generally makes users think about calming and safety concepts, for status indicators it takes a more neutral meaning. This color symbolizes that the status is active, usually relating to a process or an action.
In UI design, green is generally implemented to symbolize a positive action - it shows completion, The green indicator is meant to let the user know that an operation that was performed was successful. Besides this, it can also show that an object or an item is available.
The color red is widely associated with mistakes and processes that went wrong. This type of indicator points out that an error has occurred, letting the user know that they need to change something about the way they are operating.
The color yellow is usually linked to positive feelings, happiness, and joviality. Indicators that are yellow let users know that a process or an action is currently in progress, as well as the busy state of something. So, in a way, the usage of yellow as the status indicator has strayed away from its original meaning.
Grey is one of the most neutral shades that UI UX designers use. It flies under the radar, which makes it suitable for various contexts. Pause is another status that is revealed by indicators, for which they will appear in a grey shade.
Another way to classify indicators is based on the shape they have. There are a few standard shapes with which users are already familiar that are usually implemented for status indicators:
Circle. The circle is the most common shape used for indicators because it is flexible and can take on various meanings depending on the color they have.
Triangle. The most common use for the triangle indicator is to show the occurrence of a warning.
Diamond. This shape signals to the user that a critical action has been taken.
Square. Indicators that are square-shaped showcase an unknown status.
1. Visibility
Because indicators are meant to draw users’ attention, we have to make sure that we position them accordingly. One aspect we should consider during the design process is placing the indicators near the element they are related to so that users can effortlessly pick up what the indicator is referring to.
Another valuable strategy is to position the indicator at the top, close to the title when it applies to the entire section.
2. Size
Just as it is with other UI design elements, if the message of an indicator is more urgent, then the status should be of a bigger size. For indicators that do not have a high priority, there is no need for them to take up a lot of space.
After all, the last thing we would want from our user interface would be to become cramped and confusing, ultimately affecting the user experience,
3. Content
Indicators need to respect the same structure and ensure coherence. So, an indicator that shows a certain status should always have the same icon, color, and symbol in a document.
For example, if an error icon appears with a red triangle for a login error, then this indicator needs to appear in the same form near all the other types of errors.
There are a couple of design principles that should be respected when designing indicators for websites and apps.
- Drawing Attention. The main purpose of any status indicator is to signal to the users that a new action has been taken or that something special has occurred that requires their attention. That means, that although this UI design element is not disruptive, users need to be able to easily notice them when they appear.
- Low Emphasis Indicators. As the name suggests, these types of indicators do not have a high priority on the user interface. These indicators should generally be used in cases when other status indicators are already in place, so the users are not confused.
- High Emphasis Indicators. At the opposite pole, we have the indicators that present urgency, which makes them more relevant to users. Such indicators should be used for headers and main sections on a page.
We at uinkits understand the importance of great user experiences and creating amazing UI designs. That’s why we’ve developed a Figma UI Kit with design components that include these essential UI elements that enable you to design intuitive and user-friendly interfaces effortlessly.
“You press the button, we do the rest.” – Kodak.
Inspired by this iconic tagline from Kodak, we believe in simplifying the design process for you. Our Figma UI Kit, uinkits, is a complete design system with UI components that allows you, as a UI UX designer, to create your products as quickly as pressing a button.
Our design system includes UI components, icons, variables, cards, buttons and everything you need for your design process. All you have to do is take your UI design component needed, and you’re ready to use it in your designs!
