0

I'm working on an app and I want to show the user how much he's paying for services he's got enabled.

I want the user to be able to choose to display the cost per day, week, month and year.

To let him switch between this cases, I'm using a spinner with a dropdown menu, but I'm not sure this is the right way to go.

Any advice would be appreciated.

This is how the menu looks right now:

spinner dropdown menu

1

You're using the right component for sure.

The Material design guidelines promote use of menus over dialogs, as they're less disruptive:

In contrast to simple menus, simple dialogs can present additional detail related to the options available for a list item or provide navigational or orthogonal actions related to the primary task. Although they can display the same content, simple menus are preferred over simple dialogs because simple menus are less disruptive to the user’s current context.

As for your concrete use of the menu, I can see a few things being wrong:

  • The text should be left-aligned, not centered. Centering it makes it hard to read.
  • The margins and padding are wrong. It not only looks messy, but the small height of each element makes it harder to tap the correct one.
  • It's not at all clear that the element is actionable—it looks like a text label. Please at least add an arrow to the right, like this:

Material drop-down menu

  • Thanks for the great and detailed answer. I will change the things you suggested – Daniele Mar 24 '18 at 12:31

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.