Is an off-canvas slideout menu usable when placed on the bottom-right instead of the top-left?

Question

As I'm going into CSS frameworks(Toast, Yaml ,Bootstrap, Foundation, etc) I've hooked into the usability of navigation menus when viewed in smaller screens, some frameworks convert it into a

"dropdown"

"sophisticated dropdown"

"offcanvas menu"

For me in terms of usability, i may prefer the off-canvas menu for the following factors:

• Easy to notice rather than html dropdown
• The page content is still partially visible when viewing the navigation items w/o scrolling down unlike the sophisticated dropdown

Now, here is my question: Is a "RIGHT" off-canvas navigation a good UX?

Based from the article of Parham Aarabi:

Usually, application UI elements are either placed at the bottom of the app (most common) or at the top.

However, the way most users hold their phone is by using their thumb as the primary finger for touching buttons. If the user is right-handed, the thumb will more easily reach the region at the bottom right of the screen (or, for left-handed users, the bottom left). Reaching the top screen corner that is opposite to the thumb is much more difficult, and more intrusive with the application flow since the user has to reach over the screen.

So that principle is also applicable in web ui elements(navigation)?

It is a good idea having "RIGHT" off-canvas navigation, and I will place the button at "bottom right" of the viewport? does this seem to be recognizable?

Any thoughts would be greatly appreciated.

Answer 1

On the one hand, controls on the bottom right are easier to target with the right thumb. On the other hand, hamburger buttons, also known as off-canvas menus, are conventionally positioned in the upper left. So the question is, "Which is more important, ease of targeting or cultural convention?"

Let's see what Don Norman has to say:

"A convention is a cultural constraint, one that has evolved over time. Conventions are not arbitrary: they evolve, they require a community of practice. They are slow to be adopted, and once adopted, slow to go away. So although the word implies voluntary choice, the reality is that they are real constraints upon our behavior. Use them with respect. Violate them only with great risk." (my emphasis)

--Don Norman, Affordance, Conventions and Design (Part 2); see also Affordances and Design

Now this does not imply that every new design should follow past conventions. Designers should break with convention when the net benefit of changing to a new behavior outweighs the cost.

So in the present case one weighs the benefit of improved targeting against the cost of changing a culturally conditioned behavior that lives in the muscle memory of millions of users. Given the time and effort required to change established habits and expectations, it is unlikely that moving the hamburger button will improve usability in the aggregate.

Moreover, if menu invocation is infrequent, moving the menu's entry point to prime real estate deprives more important and frequent controls of the same space. (Note: the targeting heat map above is specific to the right hand. The hot spot for left hand use is in the lower left.)

Answer 2

Placing hamburger icon and back button on the left side of the header in iOS make sense when you want to group all navigation functions in one place. On the right side of the header there are displayed other functions like editing or filtering.

Suppose that user on one screen could: go back, see all menu categories (hamburger icon), search and filter results. Mixing hamburger icon with search and filtering icons won't a good idea in my opinion, cause the similar function should be group together, so navigation functions should be displayed on the left, and filtering and searching option on the right.