Preface: My issues with modern select bars

  • When you mousewheel up/down, it's possible that you will skip over elements at the "borders" and will completely miss what you're looking for without having to manually adjust the select bar by clicking on the slider manually.
  • Requires at minimum (2) actions to find what you're looking for (not counting cursor movement) to navigate up/down: 1) Click to select the bar 2) Nav up/down via scroll wheel; or via touchpad gestures; or via manually dragging the slider

A new approach: Check out the select bar at http://www.pullandbear.com/inditex-sel/?redirect=true

  • Requires (1) action to find what you're looking for (on non-touch screens): Click on select bar. The rest is just moving your mouse which is VERY easy/natural.
  • The select bar automatically moves the borders as you nav to a new item.

What are the usability concerns of this? Should I just look up a library for this (anyone have any links ;)?) and use it by default from now on? I personally think this is REALLY good, and only elderly users perhaps may be confused by the change from the default.

Mobile addendum:

  • They do things a bit different on mobile too.. the select menu appears to expand into the page itself, letting you scroll up/down a lot faster through selection items.
  • it's still difficult, if you haven't something else to help users finding easier what country they are looking for. i might add an input search element there. However, it looks user friendly. Well done. JM – user68777 Jul 19 '15 at 0:39
  • 3
    Please add a screenshot or video to this question. Linking to a site will cause the question to obsolete itself once the site changes. – tohster Jul 19 '15 at 3:13
  • @tohster: Frankly, I cannot even identify anything that I would call a "select bar" on the linked page as it is now. Where is it? – O. R. Mapper Jul 19 '15 at 8:33
  • @O.R.Mapper OP refers to the funky dropdowns on the country selection screens – Vitaly Mijiritsky Jul 19 '15 at 8:54
  • @VitalyMijiritsky: Funny. When I tried the link before, I was redirected automatically to the German page and thus didn't come across the country selection screen. Now, when I open the link again, I get the country selection screen. – O. R. Mapper Jul 19 '15 at 8:59
  1. Not only elderly users are confused by the change from the default - everyone is. Elderly users may be more confused than other people.
  2. You say that moving the scroll wheel / touchpad / slider counts as "an action", but moving the mouse does not because it's "easy/natural" and because you're discounting cursor movement. I don't see why it should be different and why cursor movement should be discarded. It may or may not be easier, but an action is still an action and while in the old approach users accomplish it by moving the slider, in the new approach they move the mouse.
  3. One usability concern with automatic movement of the window is that you get too many moving parts. With a standard dropdown there's one moving part - the selection/cursor. Here, once you move the cursor, two things begin to change - the window scrolls in one direction and at the same time the selection moves in the other direction. Potentially this could provide greater speed since they move towards each other, but in reality what happens is that you lose track of the item that you wish to reach, because now it's a moving target. So you slow down, cancelling the gain in speed but also becoming frustrated in the process. In a standard dropdown the target remains in place and getting there quickly is just a matter of hand-eye coordination. (You do feel the gain in speed with the new control after you've moved away from the currently selected item and you want to get back to it - this happens because the black bar is very noticeable and easy to track). This is the biggest problem with this approach in my opinion, it's really very bad usability - not so much because of the speed as because you're forcing your users to track a moving target.
  4. Another way in which the interaction is actually slowed down is that you place the selection "on an escalator moving in the opposite direction". Let's say that you're at the top of the list and you need to get to the middle. You move your mouse down, the selection moves down, and the list moves up. Notice how much more time it will take you to get to the middle, as opposed to a standard dropdown. This is because each item drags your selection a little bit up. Each of these is just a few pixels, but in a long list this accumulates into a very noticeable difference. I've made a recording where you can see both the accumulating effect and the actual backwards drag when I scroll slowly. And the equivalent interaction in a standard dropdown, for comparison.
  5. Finally, it does completely contradict the users expectations, confusing and disorienting them. You mention it in passing, but I would treat it as a much more serious issue than you seem to think.
  • Sounds like, as usual, breaking from the expected design confuses uses more than one might hope it does. I am fairly sure you are correct.. but I also prefer the design I linked so much that I still would like to be able to A/B test it sometime... I really hate the fact that scroll bars can skip over items when you mouse wheel up/down, if you know what I mean. – HC_ Jul 20 '15 at 16:46

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