The tale of naming components in design systems
When creativity in naming leads to confusion and looking around becomes a lesson.
The breadcrumb is an established user interface element expression, derived from the fairy tale Hansel and Gretel. This component is intended to take the user back to the start page, just as in the well-known fairy tale, but in the digital world. Fortunately for all users, breadcrumbs on a website cannot be eaten by birds.
UI design has no uniform language
The names of components attempt to reflect their function and/or appearance. However, the extent to which a name is established varies greatly. If you compare several design systems with each other, you will find different names for components with identical functions and a similar appearance. For example, a well-known synonym for switch is toggle. In the GitHub design system, the designers were perhaps unsure which of the two names was more appropriate. Here, the component is called ‘Toggle switch’. Currently, there is no truly standardized design language for components. However, there are terms that are much more common than others. The reason for this could be that many designers have the same favorite design system which inspires them. Or because they are established terms for some components in code languages.
Unicorn names of components
Some names are very rare and therefore perhaps an original, unique creation. Have you ever come across the component ‘Blankslate’? In GitHub’s Primer Design System, a ‘Blankslate’ is used when content is missing. A more common name for this would be ‘Empty State’.
‘Broadcast Message’ is also a very specific name that you may only find in the Pajamas Design System. It is used to display an announcement or notification from an administrator to all users. It might be possible to deduce what type of component is being referred to. The ‘Tray’ component from Spectrum, Adobe’s design system, is perhaps a little more difficult. And the ‘Indicator’ component from Gestalt (Pinterest’s design system) could go in many directions. Is it similar to the ‘Busy Indicator’ from Siemens? Just because you have a certain image in your head doesn’t mean that others have the same association.
The risk of unusual component names
If you invent names for a component, there is a risk that the stakeholders will not be able to recognize the component at first. Designers and developers search for a component using other terms, and may even come to the conclusion that the component has not yet been built. Even if you look it up in the documentation, the component may not be found because the chosen name is unfamiliar.
It is therefore worth taking several design systems as a source of inspiration to find out which name is widespread. Designers like to be creative — but creativity is not always the best choice.
An exception to this naming rule are very specific or innovative components that cannot be found in other design systems.
Which component are you?
Another factor to consider when naming components is its clarity. There are names that are a too general so that they do not give many clues to what the component looks like and how it functions. The component ‘Loading’ of IBM’s Carbon Design System could be a ‘loading bar’, ‘loading spinner’ or maybe a ‘skeleton loader’. There is a risk of confusion here.
‘Progress bar’ (synonym: loading bar) and ‘progress indicator’ (synonym: progress steps) are used for very different situations, even if they sound very similar. One shows the status of a process being carried out, e.g. a software update, and the other is used to divide entries into smaller steps like when checking out an online shopping cart. A software update and a shopping cart should be two very different user experiences, the latter probably accompanied by more joy. But the language of UI design is not immune to false friends. To avoid confusion, the names ‘loading bar’ and ‘progress steps’ would be better.
Never change a running system
Do you have a component where you realize that a different name might be more suitable? Once a name has been given, it is difficult to change. Imagine you have a pet that you rename. Think of how confused the pet will be. With components there can be no identity crisis, but all stakeholders have to learn the new name and on top of that, wherever the component is already built in, the name has to be changed.
Sometimes a deprecated component with the perfect name for a new component exists, preventing from choosing the name. Fellow designers remember that in Figma or other design tools a name change may be easy and quick, but in the code it leads to breaking changes.
Conclusion
When you are naming a component, it is advisable to look around to see what others are doing. At the same time, make sure that there is no risk of confusion with future, already implemented or known components. If you want to create new names, you have to accept that not everyone will know what the component is about, and might have a hard time finding it, initially. The inventor of the expression ‘breadcrumb’ was certainly very creative, nevertheless he managed to spread the name. So far, I have not come across a synonym for ‘breadcrumb’.
Every design system shows an approach
It’s great that there are so many public design systems, all of which offer various solutions. These design systems set standards and are part of the terminology of UI design. Some are more influential than others.
The following awesome and detailed design systems were used as sources for this article:
Primer Design System (GitHub), 15.12.2024
Pajamas Design System (GitLab), 15.12.2024
Spectrum (Adobe), 15.12.2024
Gestalt (Pinterest), 15.12.2024
Siemens, 15.12.2024
Carbon Design System (IBM), 15.12.2024
