4

I am just making a website and don't know which direction I should extend my menu for best user experience and most intuitive feel.

The buttons to open the menu are in the top, right corner. I have to decide wether to extend the menu to the left or to the right of the button.

To the right

Ext. right

To the left.

Ext. left

The extension to the left looks better for me. It's more comfortable to move the cursor into the webpage.

Noah Krasser
  • 441
  • 4
  • 14
  • I think this is one case where you can trust that the reason every other OS and website (of which I'm aware) does something a particular way is because it's more intuitive and user-friendly. Those extend menus in the locale's text direction (i.e. to the right) unless forced by space constraints to do something else. – underscore_d Jul 13 '17 at 15:20

2 Answers2

15

In the "general case" (not at the right-hand edge), left-aligning the drop-down and extending to the right (as in the first example) looks best (to me), especially since "the control" (in my mind, and I suspect most users') is the combination of the icon and the label "Deutsch"1 and so the drop-down sits "under" the (combined) control most neatly.

If you are near the right-hand edge of the screen -- and left-aligning would take you off the edge of the screen -- then I would put the right-hand edge of the drop-down just inside the edge of the screen (similar to the right-hand edge in the first image) and extend the drop-down as far to the left as needed to display the options (so as much of it as possible is "under" the menu-bar control). Although in the example shown none of the options are long enough to require this, if an option was long-enough, the left-hand edge might be as shown in the second image.

1 And, ideally, tapping/clicking on either part should activate the drop-down.

TripeHound
  • 2,655
  • 13
  • 17
  • 1
    @ThomasMoors: Why doesn't this suggestion work for longer names? – psmears Jul 13 '17 at 10:57
  • 2
    @ThomasMoors It would only not work if the name is too long to fit on the screen. If there's enough room to the right, use left-alignment. If that would not fit, fix the right-hand edge and extend to the left sufficiently to contain the string. – TripeHound Jul 13 '17 at 11:00
  • @TripeHound Fair point! – Thomas Jul 13 '17 at 11:21
2

Use the extension to the left. There's no room to the right when you have to use longer labels (like 'English (United States)', for example).

Nick Groeneveld
  • 7,925
  • 3
  • 29
  • 51