0

I like material design, when using one of the material design components (select box/dropdown), I got confused about which interaction is correct, the link below has 2 interactions filled and filled enhanced. If you click on the filled examples the dropdown box list covers the field label, on the other hand, the list item is opening below the dropbox, which help the user to read the field label easily. So which is the correct interaction for this component? Or does simply saying filled enhanced mean that the correct interaction has been updated?

enter image description here

https://material-components.github.io/material-components-web-catalog/#/component/select

  • It's a design choice. There's no UX implication. Also, I'd like to request you to add a screenshot of the interactions in your question in case the url becomes invalid in the future – Shreyas Tripathy Aug 12 at 4:18
  • They are basically the same. Difference is in the code level and explained on the source's readme. github.com/material-components/material-components-web/tree/… – locationunknown Aug 12 at 5:31
  • Thanks Shreyas & locationunknown for the clarification. I completely agree with your clarification but to leading to your clarification, I have a scenario where my persona age range is between 35 - 55, and I have multiple drop box with at least 15-20 items. are. If the user uses the first interaction, they may not be able to view the label that makes it difficult for the user to understand what the field is about. e.g. Like select previous employer and select current employer. So, in this case, which is more suggestive. – user2799269 Aug 12 at 8:44
0

As so often in the world of digital design, neither UI choice seems 'right' or 'wrong' to me, and I'm not sure the creators of Material would sway you either way, or else they would have articulated an unambiguously didactic 'Do this... don't do that...' type recommendation, as they often do.

Instead, I'll share a couple of observations about each of the choices, looking at them from various angles. This is how I typically go about decisions like that; Ultimately, project timeline and budget permitting, you can always prototype both and ascertain user preferences in an AB test, but with authentic content.

Indeterminate States

It looks to me as if the simple Filled option does not make provisions for leaving a selection in an non-selected state, for instance at the beginning of a profile setup workflow, where a range of choices remain noticeably void (or in a neutral setting) pending user action. One choice is always 'on'; while you can modify that choice - types of fruit in your example - there's no obvious way of selecting 'nil'. Other than providing an explicit 'none' label in your dropdown.

An indeterminate state of that type is more easily accommodated by the Filled Enhanced variant. Also, and more importantly, the category label ('Fruit') remains visible while the dropdown picker is deployed - whereas the ordinary Filled variant leaves that to user deduction. With types of fruit that sort of thing is blatantly obvious, but if your real-world example calls for more complex categories, explicit and assertive labelling helps your user.

Clarity of Affordance

The way the 'Materialisers' have handled the typography of the category labelling is also quite deliberate. The label 'Fruit' very noticeably retreats from the actual choice, so the picker field in the indeterminate state clearly misses something - this is more amenable to prompt your user into action.

Ergonomics for Mobility

Lastly, consider that the more generous spacing of the Filled Enhanced picker presents better fingertip tap targets in a mobile environment whereas the tighter spacing in the simple Filled variant is somewhat conducive to 'mis-tapping'.

Operating System Driven Pickers

The simple Filled variant seems to deploy whatever picker is provided by the OS, which is okay in a desktop environment. And you might automatically get a more mobility-minded picker when using the same application on a tablet - in fact, iOS and Android have mobile-device specific pickers that heed the tap-target size concerns mentioned earlier (and tons of user research has gone into both, to be sure).

Stylistic Detailing

I believe the Filled Enhanced variant is called that because it intentionally overrides the OS-standard picker with an enhanced Material-style language. Visually, and this is my personal style opinion, the simple Filled picker stands out as slightly foreign (or generic) in an environment that's otherwise very 'Material'.

I hope that helps with your decision. Good luck!

  • Thanks Andreas, for the clarification and carried out with other scenarios also. My perception is also same. – user2799269 Aug 13 at 13:57

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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