6

I have a panel in the lower part of my page. It has a dropdown in it that will contain lots of items (>20 for the sake of argument) as well as some other controls and fields all related (for sake of discussion it's a mini calculator, so the dropdown contains a list of the products the user will calculate the cost against, with the product information and then the price of the transaction showing underneath).

mockup

download bmml source – Wireframes created with Balsamiq Mockups

In usability testing it has come up that users who haven't already manually scrolled down the page don't know that anything has opened up because the dropdown will open to display its contents 'below the fold'..

What is the best option for dealing with this?

1) Is it acceptable to automatically (smoothly) scroll the window itself so the whole panel ends up towards the top of the page so that the contents of the dropdown then become visible?

mockup

download bmml source

2) or should I set the dropdown content to just pop 'upwards' to show the contents that way, but that means the rest of this panel (which has other controls and fields etc) are not visible, so the user would have to scroll the page themselves anyway to see the impact of the item they chose.

mockup

download bmml source

  • Option 3: scroll down just enough to show the first half-item in the droplist so that users know it has opened up. Then they know to scroll down to see the full contents in their natural setting. – Graham Herrli Jan 29 '15 at 18:23
7

I would suggest that the first issue is that the wrong type of drop down is potentially being used.

In the case of "custom" drop down, such as those produced by Bootstrap, the menu system is a part of the HTML content. As a result, it is possible to produce a situation where the menu is indeed "below the fold"

enter image description here

However, standard drop downs (ala: <select> tags) do not suffer this. They will render above the chrome of the browser if necessary. In the image below the drop down is bring opened near the bottom of a second window, over top the one my answer is being typed in.

enter image description here

This is true of Chrome, Firefox and Safari on Mac; as well as Chrome and Firefox on Windows (based on my testing).

On Mac, the drop down is also displayed relative to the selected value instead of "fully below" or "fully above", which helps to orient the user in the list:

enter image description here

So, if you're using a standard <select> the issue shouldn't present itself on (most?) modern browsers.

But, to the direct points of the question -- perhaps assuming we are using a Bootstrap (or similar) generated drop down, as it does seem that your options are indeed being hidden below the fold.

1) Is it acceptable to automatically (smoothly) scroll the window itself so the whole panel ends up towards the top of the page so that the contents of the dropdown then become visible?

I would avoid it.

Forcing a scroll changes the context of the page the user is looking at. There may be information on the page they are referencing in order to complete the task. Scrolling forces the user to reevaluate where they are in the page.

Animation captures attention. If you scroll the page automatically the user's attention will shift from the drop down to the page contents. They will have to refocus back to the drop down before continuing.

From NN.group: http://www.nngroup.com/articles/animation-usability/

Before adding animations to a web page or application, ensure that their goal and purpose are well defined. When considering an animation, contemplate the following questions:

User attention: Where would the user’s attention otherwise be focused at the time when the animation occurs?

In this case the focus should be on the drop down, not the scrolling page.

An unlikely real-world example would be if you blind folded someone and then magically shifted them 10-feet to the right. They are going to be confused for a few seconds but quickly figure out what happened and reorient. It isn't the end of the world, but it sure was annoying!

2) or should I set the dropdown content to just pop 'upwards' to show the contents that way, ...

Yes.

It is technically possible to do this. Gmail does it with there menus -- they show the drop down below the button unless there is not enough space, in which case they shift it up by the appropriate amount:

enter image description here

This allows the user to maintain their point of reference within the context of the page without having the refocus their attention.

... but that means the rest of this panel (which has other controls and fields etc) are not visible, so the user would have to scroll the page themselves anyway to see the impact of the item they chose.

But, given your mockup and likely your end site design, there are clear demarkations that imply to the user there is more content below the fold. The box border, for example, doesn't have a bottom -- implying that there is more content below.

Users do scroll. From UXMyths: Myth #3: People don't scroll, many references are sited that demonstrate that additional content below the fold is generally expected by users. One of the bullet points reads:

Heatmap service provider ClickTale analyzed almost 100.000 pageviews. The result: people used the scrollbar on 76% of the pages, with 22% being scrolled all the way to the bottom regardless of the length of the page.

Users will look for more content, especially if your page design properly implies that additional content is there.

While you may be forcing the user to scroll for additional content, they are doing the scrolling which allows them to maintain reference points and clarity of what is happening with the page.

When you walk 10-feet to your right (instead of being magically transported there) you don't have any issues with it. You maintained your spacial queues the whole time and don't have to reorient yourself once you reach your destination.

  • You are correct that it is not a standard <select> box, it is more akin to the Gmail example you use here - an icon alongside the text for each item in the list. Your point of "{the list appearing upwards...} allows the user to maintain their point of reference within the context of the page without having the refocus their attention." sums up the overall problem perfectly, so I agree with you here. – JonW Jan 30 '15 at 9:29
1

What would the user expect to see? In this situation, by the user clicking the dropdown, the user's intention is to see the contents and they would expect to see the contents. For that reason, I believe it would be ok to automatically scroll for them (this seems preferable to opening the box upwards because 1) that's not as common of a behavior and 2) the user would still have to scroll anyway to see the impact of their choice).

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.