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

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.