When is appropriate to include buttons and or swipe command in a Responsive Design off-canvas layout.

Question

When is appropriate to include buttons and or swipe command in a Responsive Design off-canvas layout?

While doing some Responsive Web Design research for sites using the off canvas navigation technique, I have noticed a level of inconstant in closing these menus.

Example: Facebook off-canvas menu is access by click/touching the menu button but not does not provide a close button or a swipe to close gesture. The user simply is expected to know they must touch the main feed to close the menu.3

Example: Google on the other hand require click/touch to menu button to upen, but to close requires the user to swipe close, or click/tap the main content section to close.

In both cases it seems to create a poor user experience because the user is left with no obvious way of getting back. Is this affordance of including a static button for closing these menu simply not high/important enough?

Answer 1

On small devices with large content navigation is key. You, as a designer, have to support all sorts of navigation technique to make this work for as many users as possible. Small mobile devices are highly constrained to begin with.

One application that implements both button click and the swipe-right to access the menu is Spotify. Its' new look and feel have rendered some critique among my familys youngest users, but I think this will be convention in the near future.

If you want to further than this, there are guidelines to follow:

Make it clear to the user what can be selected, tapped or swiped (this is known as affordance), especially on touchscreen devices. One of the big findings of Nielsen Norman Group’s usability studies of the iPad was that users didn’t know what was touchable or tappable. Another issue was swipe ambiguity: when the same swipe gesture means different things in different areas of a screen. Ensure that touchability is clear and that items such as links, icons and buttons are visibly tappable.

Reference: The Elements Of The Mobile User Experience

But so far (this being march 2013) I still havn't found anything but Windows Phone that implement ques for swiping. Only problem is that the user may know that they can swipe left - but not if there are something to swipe for in the opposite direction:

When is appropriate to include buttons and or swipe command in a Responsive Design off-canvas layout?

As often as you can you should implement both botton and swipe actions. It is the same theory here as in cut'n'paste where you have over 100 combined options to cut and paste text. The more navigation actions you support, the better.

Answer 2

Here's how I see it. You should probably have a swiping gesture to get back AND a button at all times. Facebook's method is not highly intuitive, sure it's not really hard, but it could be easier. Google does a good job with this.

When a user wants to get to a menu that is commonplace these days, they want to look for something, the "three horizontal lines" is what they are looking for. When they press it, it should stay available. At this point they can be 100% sure of how to escape the menu. If the button disappears, or you do something like Facebook, then for a while they could get irritated. You should keep the button, and perhaps add the swiping as well.

But when can I use swiping only?

In most cases, don't. However there are times when it could be useful. If you have it set up to be gesture oriented, and you make it clear that opening the menu requires swiping, then closing it with a swipe makes the most sense. This idea can be seen from the UX-loving Apple.

First, they teach you and expect most users to use swiping for their Notification Center.

Now, although you could use ONLY this approach, a much better UX is to ALSO do what Apple does.

Here, Apple adds a button as well, which is what I was talking about in my first point. You should have both. For desktop uses, you don't need to move this "active button", but on mobile devices, there really aren't many cases where you could put this button instead.

Conclusion: Almost always use the buttons, feel free to add swiping in addition, and don't allow the user to get back by having them touch a part of the screen that is implied to be "out of commission" like Facebook does. Tapping in particular, is not very realistic, and doesn't really make sense.

Hope this helps, if you have any other questions, let me know.