We're building a web application based on Material UI. Throughout the app there are select components, which behave like shown in the example below: The default label informs about the functionality of the select and when a value is selected, this label shrinks and moves up, so that it is still shown above the selected value.
We use those components mainly for standard "organizational" bulk operations, such as
group etc. Therefore, no value is selected by default, the default label is shown and the user should know what the control is there for.
However, we also have a settings page (and forms), where there are already set values, like
language. This leaves the select in the state where that informational default label has already shrinked to its smaller size (and would always stay that way, since a language can't be unselected).
Because of this, I'd like to change the select component here, so that the label isn't shown at all and instead introduce another easy-to-read label that is placed above, like shown on the picture below.
I feel like this would be a good approach in terms of usability, making the controls easier to recognize and thus helping the user change their settings. (Imagine a multitude of settings and looking for a specific one to change).
However, it also introduces inconsistencies, since there would be two kinds of select throughout the application.
I'd like to know whether those kinds of incosistencies are acceptable for the sake of better usability. Do the benefits outweigh the possibility of irritating the user? Maybe you could provide any related research or real life examples of similar inconsistencies for the sake of usability. Maybe there's even a way to quantify those "pains vs gains"?
Any input is greatly appreciated!