1

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.

standard use case

We use those components mainly for standard "organizational" bulk operations, such as sort, 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.

pre-select use case

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!

2
  • 1
    Also, here is a recent article on text fields that has been tested and improved in Material Design that you might find useful: medium.com/google-design/…
    – Michael Lai
    Nov 5, 2019 at 3:04
  • That's so cool! The devs and I were already wondering why the removed that "classic" underlined text field. Of course we didn't find the article back then as it hasn't been published yet. Thanks again, @MichaelLai Nov 5, 2019 at 11:19

2 Answers 2

1

There are different perspectives to answering this question, and they have been addressed in previous questions separately that you can consider:

Internal Consistency vs. Consistency across the Industry, which is based on balancing what is considered best practice and consistency with your own product and users. If you have a new product and new users this would be different to improving an existing product with a large proportion of existing users.

Design for Application consistency or follow OS convention?, which is based on balancing the range of products that you offer (which may follow different platform conventions) against the internal branding and design guidelines.

Support consistency or primary user journey?, which speaks more to the point that you are making about balancing consistency with user needs and requirements.

But in the end it is about trying to address all of the points above when talking about consistency and what it means for your products/service as well as the users.

2
  • Thank you for your answer, those links were pretty insightful. However, I feel like there is no general conclusion reached with any of those answers. The consensus is that consistency is very important (but there might be instances where other principles are even more important). To conclude: it needs to be decided for each individual case if the benefits outweigh the costs and possibly test the different approaches via user research. Do you agree with this statement or is there anything you would like to add? Nov 4, 2019 at 10:27
  • 1
    @QWERTZdenker you are absolutely right! I don't think I have ever found a 'hard and fast' rule when it comes to UX Designer. Sometimes you also have to try and not listen to what the user is saying because it can lead you down the wrong path if you ignore other pieces of information as well. But I hope that there are enough factors for you to consider to help you weigh up your decision by taking a more holistic view about the overall user experience when it comes to consistency.
    – Michael Lai
    Nov 4, 2019 at 23:42
0

To paraphrase, the point is that in the new solution there is an initial variability, while in the previous ones it is not?

In order to make the whole application more consistent, you can add an initial value to all sorts (all option by default) - but this is definitely more work :O

What if the proposed language label is identical to the previous one after the interaction?


enter image description here

4
  • Thank you for your answer, but tbh I'm not sure what to make of it...Maybe I'm misunderstanding you or you misunderstood my question....however, could you please elaborate what you are suggesting? Nov 4, 2019 at 9:34
  • Sort input haven't label - so maybe language input shouldn't have label too? Language label - required to have constructor value Sort by label - doeesn't required to have constructor value
    – Piotr Żak
    Nov 4, 2019 at 11:15
  • Okay, I think you have misunderstood because that's what I was asking: Does it make sense that the language input has a label when the sort input doesn't? It's not so consistent but the user knows immediately what the language input does. Do you know what I mean? Nov 4, 2019 at 11:50
  • Yes, i can guess, I meant input style, in the sense that it should be the same, whether it contains the initial value or not
    – Piotr Żak
    Nov 5, 2019 at 11:40

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.