1

I am a junior product designer (previously a frontend dev) at a startup so I still have a lot to learn. I'm the sole designer working on a SAAS after multiple other designers have worked on it. I'm in the process of setting up a design system and strategy to clean up all the legacy component designs.

At the moment we use the native browser select component , but we also have some features where we use a custom select/dropdown component. This component is used when the selectable options include more than just a label (e.g.: an image, extra details about the option like a price or users where we show the name and email address).

Currently both of those components look very similar. The main difference is the icon we use (besides of course the custom dropdown menu that gets shown when you click the custom select component)

Native select: enter image description here

Custom select: enter image description here

So my question is: does it make sense for these two components to use different icons? Or should they use the same icon?

On one hand I feel like they are both select/dropdown components so it would make sense to use the same icon. On the other hand since one shows the browsers native dropdown menu and the other one shows a custom dropdown menu maybe it makes sense to use a different icon.

Even if the user doesn't actively notice it, maybe they subconsciously know what to expect (native menu vs custom menu) Or maybe it really doesn't matter at all?

1
  • If you choose the native element, then the user gains familiarity. However, I'm hard pressed to think what would happen if I saw a slightly different icon, especially when it's clear that I'm supposed to tap on the button. I'm going to tap on the button and see what happens.
    – Steve
    Aug 10, 2023 at 18:56

1 Answer 1

2

This is a solid case for UI consistency, as there's no real possibility for the user to make an error.

Most of the users won't notice or care about the fact that these are different icons. And you are better off with having less in the design system.

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.