2

I'm creating a mobile application, sticking to Material Design guidelines and components for the most part.
In that application I want the user to select a group and then get some detailed info on that group. The group info is displayed below the selector component so you can do a selection any time. The groups are numbered consecutively.

I want those groups to be as easy to select as possible, because most of the time the users will want the last groups and I'll probably default to the first group

That's why I want to create a component that allows instant selection of whatever option. The group labels are going to be 0-8 digits (repeated Group feels awful), so I feel like a MD dropdown is a waste of space and the options will feel empty, lacking something, as they are very spacious and meant to be used with long labels

dropdown

So I thought that segmented control would be a good idea. But it turned out that the buttons were pretty small on a mobile screen (9 choices in a single row, splitting it into more rows also kind of doesn't appeal)

So my thoughts circled around something that looks like an MD seekbar, but without the "progress" part to the left of the handle.

seekbar

And still I'm not satisfied, I feel like this is an entirely different component that has a different meaning. But at least it should work well on a small screen, as it is easy to drag the handle around.

What option should I choose? Am I even on the right track with this and are these final options appropriate?

  • So, there is no 'selected' state, where there's a group info already showing, correct? It's only when a selection is made... – Mike M Sep 24 '17 at 2:15
  • @MikeM edited the post, hopefully it's clearer now – illright Sep 24 '17 at 5:42
  • I feel like the selector should be some kind of button at the top that open a custom control that would ressemble a number pad keyboard, this component would overlap from the bottom of the screen (I use an iOS device daily so this is how keyboard appears most of the time, if that speaks to you better). The 9 states would be displayed on a 3x3 grid with the current selection highlighted in your accent color. – Chnossos Sep 25 '17 at 8:24
  • @Chnossos I'm not sure that would fit in with the Material theme. Because I personally don't like the way the iOS's numpad is designed – illright Sep 25 '17 at 10:58
  • Whats your target audience level of experience with the web products? is this expected to be on web and mobile? If mobile please consider how the UX will be for users. The dropdown on mobile phones will be drastically different then what you posted above and its widely understood. – Bromox Aug 9 '18 at 12:22
1

If you are looking to stick with a Material component, perhaps using a simple card layout would be appropriate? Because your values are not that long, you would be able to use some generic material backgrounds for the card image to help distinguish the choices for your user. Once selected, the card would expand to reveal the description below.

This is not the most compact choice but if you are against using the "menu" or drop down for your selector, that makes things trickier as scenarios such as yours are what it is designed for.

Using a card displays all the options for the user rather than hiding them but it does take up more screen space. You should consider how much value this choice places on the rest of the interactions in the app.

I whipped up a little example. Might not be the exact feel you are going for but maybe a visual will help get ideas going. https://material.io/design/components/cards.html#actions enter image description here

  • No, the info that's displayed on selection of a group is far bigger than what is sensible to put inside a half-sized card. So such a thing probably won't be an option – illright Jul 10 '18 at 15:11
0

What about using Tabs? As tabs can horizontally scroll, a UI can have as many tabs as needed.

Material Design Tabs example

To make the targets a bit bigger, write out the numbers as text: ONE, TWO etc.

  • This could be an option, though it leaves no space to put the "Group" word at least once. The app could definitely use a little helpful label such as "Select a group from somewhere". And since the appbar is going to have a different text, the user may be confused as to what the "one", "two", etc. refer to – illright Jul 10 '18 at 15:10

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.