3

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"

dropdown

"sophisticated dropdown"

sophisticated dropdown

"offcanvas menu"

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.

enter image description here

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 enter image description here button at "bottom right" of the viewport? does this seem to be recognizable?

Any thoughts would be greatly appreciated.

2
  • 1
    I don't have any clear evidence, so this is a comment rather than an answer, but if you're going to put the button somewhere besides where the emerging convention says it should go (top left) you should probably visually upweight it slightly more than you normally would.
    – Racheet
    Mar 20, 2014 at 9:45
  • 2
    The other issue with putting it on the right is that doing that precludes ever using a swipe-right interaction or carosel anywhere else in your site design, since the two interactions will clash. Swipe-right is such a common and useful idiom that you probably will want to use it somewhere on any non-trivial site.
    – Racheet
    Mar 20, 2014 at 9:49

2 Answers 2

2

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.)

0

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.

Your Answer

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

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