0

There has been previous discussions and debates relating to the way or the direction that the arrow should be displayed on a dropdown UI component for the hidden and shown states.

This question relates to a slightly different but related issue, which arises when the component is viewed near the bottom of the page and there isn't enough room to display all of the items that belong to the dropdown list (whether a scrollbar is provided or not). An example of a dropdown list where the contents are displayed above rather than below the triggering component is provided in the screenshot:

enter image description here

So in the case when the dropdown menu is expanded above the UI component in its initial state (when the user clicks on the arrow), should there be any changes to the way the menu behaves in terms of where the arrow is pointing and how the user might scroll through the list of items in the menu? That is, should it be the same as when the menu of items is expanded above the UI component (when the component is more towards the top of the screen) compared to when it is expanded below the component (when it is more towards the bottom of the screen)?

Here is a breakdown of the dropdown list UI component for reference.

Improve this question

1 Answer 1

Reset to default
1

In general, lists with multiple elements are usually accompanied by keyboard help. When clicking on a letter, the first element of the list is the one that begins with the letter pressed.

At a graphic level, we have this situation resolved horizontally but not vertically. Although the example is a list whose elements are arranged vertically, one below the other, it's still a sequence. This translated in horizontal timeline is the same situation as a video frames sequence and for this there is a graphical solution:

enter image description here

For a situation as special as a long list with items to choose, in addition to the keyboard help with the initial letters, when the list is expanded I would not hesitate to change the expanding icon for a set of controls that facilitate a quick selection, for example the first item, last item and close list:

enter image description here

Improve this answer
3
  • +1 I like this idea, but has it been used somewhere before?
    – Michael Lai ♦
    Sep 22, 2021 at 5:59
  • I don't think so, I will make a search
    – Danielillo
    Sep 22, 2021 at 6:02
  • I'd accept this as answer if it has actually been implemented somewhere before :)
    – Michael Lai ♦
    Sep 23, 2021 at 22:43

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.