what is the best way to use in Material Design a select with next/prev arrows?

i'm working on an area that there are three select (with many items inside) so i want to let the user able to go to the next or previous select item fast without only use the select dropdown.

enter image description here

i prefer B about visual communication but A is better to distance the select drop down in a touch enviroment.

any advices?

  • I'm not sure that specific questions about Material Design work within the remit of this board - Maybe someone else will confirm either way - Maybe if you framed the question more about the UX benefits or working one way versus the other and leave out the Material references. – Andrew Martin Jul 30 '18 at 14:39
  • 1
    Honestly, none of these seem like good ideas. You say you have 'many items inside' the select box? Well it's going to be a huge pain to navigate many items using arrows. Why not just use the select box and allow the user to jump to different items by alphabetically selecting a letter from the keyboard - i.e. native behaviour? Do you even know if people have trouble finding items in the select box as it is? This seems like you're overengineering a solution to a problem that may not even exist. – JonW Jul 30 '18 at 14:59
  • tnx guys, It is a comparison application. In the first select the user choose the area of interest and on other two select the user have to choose what to compare. I can't show the entire lists so i think the select is the only way i can use... or i miss something? there is a case with the user who wants to easly switch to next or previous selection item ...so i think that the prev/next button will be faster than reopen the select and find the next item. Many items but not to much to use alphabet search... – Ugo Nooz Torresi Jul 30 '18 at 15:51

I chose option A because it is easy to use. Customers can quickly identify where are the next and back buttons and what is the drop-down menu. However, plan B will look better but it seems that the customer's eyes will be tangled when seeing the two directions of crossing, one is the horizontal two is the vertical.

| improve this answer | |

Assuming that you have around 30-40 items, which is unlikely but a possibility.

Breaking down what you have now:

  1. In the first select, the user chooses the area of interest

  2. The user has to choose what to compare

Now in the first field, you could probably have a default item say "iPhone" and an up and down arrow next to it... or field for user to type (A-Z format). Or as soon as the user clicks the field, the dropdown with the list shows. This I think will be a good practice as users will be able to see their action on screen rather than toggling with arrows.

| improve this answer | |

Your Answer

