6

Originally, drop-down lists appeared at a static position below the control (or above it if space was restricted):

Old style drop down example

However, in recent user interfaces, these lists appear in front of (i.e. layered on top of) the control, with the list being positioned dynamically such that the chosen item appears exactly in the same position:

New style drop down example

Why is the new behaviour advantageous and gaining acceptance?

Improve this question
3
  • Where have you noticed this? I know my IE10 does this so I assume IE11 as well. Are you referring to Metro UI apps? Does Apple do this? The latest Chrome and FireFox on Win7 abide by your first example. It is my understanding that Metro UI apps can actually be constructed using HTML code so they would have to tap into the rendering powers of the IE version installed.
    – MonkeyZeus
    Commented Jun 4, 2014 at 12:31
  • Yes, IE11 and Windows 8 & above does this. And Mac OS did this for a long time, I think. But I thought it's a Mac quirk until Microsoft started copying it. There must be a reason why they did when the old style still works very well.
    – ADTC
    Commented Jun 4, 2014 at 13:31
  • I cannot seem to find any documentation as to why MS chose to do this. You might have better luck asking this question on answers.microsoft.com/en-us/ie/forum/ie11?tab=Threads
    – MonkeyZeus
    Commented Jun 4, 2014 at 14:07

2 Answers 2

Reset to default
10

The overlay is faster when picking neighboring values.

font size combo-box

Selecting the next (or previous) value is useful when...

  1. Making a font size a little bigger (or smaller).
  2. "Trying out" each font in the list (one at a time) to find the "correct" one.
  3. Changing the quantity when ordering a product.
  4. Picking the correct option, after overshooting (with the mouse) and picking the wrong option.

Side Note: Top-aligned labels ("Font Size" in the example) are temporarily obscured by the overlay. Place the label on the left to avoid this issue.

Improve this answer
2
  • Love the illustrations!
    – ADTC
    Commented Jun 10, 2014 at 2:43
  • 1
    Good example... The only thing i would add is that for top aligned labels, you lose context with the overlay. Not a huge deal, but for long lists with unfamiliar items to choose from, users may lose context, as they cannot view the label.
    – Mike M
    Commented Jun 10, 2014 at 16:10
1

Probably a little bit of two things.

  • Reduced mouse movements
  • Reduced space consumption
Improve this answer

Your Answer

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

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