Principles of Using Labels in Your UI UX Design

Everybody is a creator. Whether we actively do it or not, each of us creates and toggles with many ideas on a day-to-day basis. As UI/UX designers, we have to pay attention to the way we choose and create labels for our sites. 

The three main goals of labels are to help users with:

1. Understanding their place within their environment;
2. Figuring out the way the environment is organized;
3. Grasping what actions they can take;

• Succinct. The fundamental purpose of labels is to explain to users what is required from them. Rather than using details to describe and help the user complete a field, labels have to be as brief and concise as possible. Usually, one or two words should be enough to make your UI/UX element powerful.

‍

• Simplicity. This is not the time to get creative and pretentious! Keeping the content of the labels simple and intuitive is the best path to take. The last thing a user would want to go through is to have the line. Although the page may seem bland and plain, creating a smooth and swift experience for the user is what we are looking for. 

‍

• Implying the proper Possession. If you are a UI/UX designer, you probably are familiar with the proverb, “There is more than meets the eye” - when it comes to the usage of the words “my” and “your”, we should be careful which one we choose because it may alter the outcome. The pronoun “my” should be placed in contexts that imply possession to an absolute degree. On the other hand, “your” is suitable for items that are customized for the user.

‍

• Labels Position. As UI/UX designers and graphic designers, we are familiar with the importance of alignment concerning any type of text, and the case of labels does not stray away from this rule. According to many specialists in the visual field, the best option layout-wise is to place labels above the forms. We should acknowledge that by choosing this placement, we guide the visitor towards a more efficient and quick comprehension of the page. 

When we place a label above the text field, we make it easier for the users to associate these two elements together. They are also not forced to look at them separately which creates a more enjoyable reading experience. 

‍

• Labels alignment. Placing graphic design labels to the left of an input field and using left-aligned labels is not advised. This makes it hard for the reader to follow what is written. As we mentioned, we should strive to place labels above text. However, if you choose to add them left to the input box, you should make them right-aligned.

‍

• Fonts. Remember our focus is on simplicity and straightforwardness. Texts that come in bold or italics are more difficult to read. In the cases where we opt for bold text, we should adjust the aspect of the borders to match it. We can put this into a simple equation:

Bold text + thin borders = aesthetically pleasing result for the eye

‍Bold text + heavy borders = overcrowded and tedious result

‍

• Drop-down list boxes. As they already draw a lot of attention, the best solution would be to make the default value for a list the label. In the UI world, integrating the label directly into the field will help avoid confusion for users.

At a base level, labels act as a bridge between the information architecture and the user. Practically, they help users identify the environment in which we are placed, the way things are organized there, and how we can operate.

When you first access a website or an app, labels will be among the first factors that help you determine if the information on them is useful for you. In that sense, it is crucial to minimize our user’s effort when they navigate our page. 

The Nielson Norman Group came up with an interesting definition for this process, which they called interaction cost. “The interaction cost is the sum of efforts - mental and physical - that the users must deploy in interacting with a site in order to reach their goals". This is why it's always important to implement a user-centered approach in our design processes.

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!