Having the "Hamburger Menu" to the right, shouldn't menu items be right-aligned as well?

Question

It's clear that the Hamburger Menu should be to the right of a native app and web application. At least our community concluded (through voting) on the question Hamburger menu icons - should they be on the left or right? that this should be the case.

That's because aprox. 67% of users use the right thumb (so that means the right hand) and in several studies have proved that the screen area is more difficult to reach with this hand posture is the top-left one.

For the same reasons, wouldn't menu items also be right-aligned to make it easier to navigate the menu? The full menu item area may be selectable, but It's not always obvious (and not always implemented). Or do I miss something here?

Example

Answer 1

I would strongly advise against right text alignment from the readability point of view, at least for countries where the text is read from left to right. It is the same case as reading a book, if it would be right aligned, your eye would get quickly tired by searching the start of every line. See the image:

Also when user knows what he is searching for, he can just scan through the first letters until he finds a match. That is much harder on the right example.

The case of left handed users, covering parts of the menu while scrolling, can be solved by placing icons on the very left. You increase the legibility and make some space for the finger. See the example:

Answer 2

If the menu takes the complete screen, as in your screenshot, left alignment is just fine. It's more natural and users are used to it. And as Rob said, thumb wouldn't obstruct the menu text.

But if your menu takes only half of the vertical screen, or less, on the right side, only then right alignment can look better.

Maybe because of this text alignment anomaly many apps that show the menu on the half screen choose the left half and hence keep the button on the less accessible top left corner.

A relevant answer

Answer 3

The majority of users will read left to right which makes it important for navigational elements to be left aligned.

The best way for usability would be to float the hamburger menu to the right (or align center even), expanding the menu full width with each full width menu item being clickable. This would prove greater accessibility all around.

We recently implemented something similar on our website which launched this week.

Hamburger menu collapsed by default and center aligned.

Hamburger menu expanded with full width menu items text aligned left.