Swipe to expand/collapse left hand navigation

Question

My Android application has a left hand navigation menu similar to the Google TV left hand menu bar. I can programmatically collapse and expand it to make more or less room on the screen. In the narrow view there are just buttons with icons and in the wider view there is also text with each button.

Now I am playing with letting the user expand and collapse this navigation with a left/right fling gesture. It all works nicely but I kind of doubt that users will actually discover the feature. I had a similar problem with the long click in the past and ended up adding buttons that do the same as the long click.

Should I do that for that collapse/expand feature and the swipe gesture? Are there other options helping the user discover this feature. A help text or new feature release note or so would probably never be read I assume..

Answer 1

The thing about gestures is that they should have consistent behavior across all apps on a platform. Otherwise, they'll be confusing and hard to discover.

As I've mentioned in my comment to the OP, HP's webOS uses sliding pane a lot (it's actually a part of the official style guide). Here're a few screenshots showing how the layout is implemented in apps (native email client and a 3rd-party Twitter client). Scroll below the pictures for recommendations.

E-mail (native)

The sliding option is indicated by the 3 vertical bars in the lower-left corner of each pane that can be slid. The left-most pane doesn't have any special symbols & doesn't respond to the dragging gesture. Also, note how the right-most panel is shown only partially inviting to pull it out to the full view. In horizontal orientation, the screen width is enough to show all buttons but not enough to display an email entirely.

Now, the left-most pane is hidden. However, there is no visual indicator how many panes are hidden. We know only that there's at least one more pane because there's the sliding icon in the lower-left corner. When the right-most pane is expanded full-screen, there's also no indication of how many panes are hidden.

TweetPad (3rd-party)

The first view consists only of 2 panes: navigation & the feed. There's no indication that a 3rd pane can appear (it appears only when you press a tweet and it contains all of the controls for individual tweets). There's also no indication that the feed can slide. Sliding is accomplished by a right-to-left dragging gesture starting anywhere on the pane.

When we maximize the feed pane, the navigation pane doesn't disappear. It slides just enough to cover the labels to the icons but leaves them completely functional, similar to the pattern the OP is using. You can press any of the icons and get to the destination without the panes changing their layout. At the same time, there is still nothing to indicate that the feed pane can be slid to the right exposing more of navigation.

Recommendations

These 2 applications plus the official design guidelines cover all of the interactions with paned layout. The obvious troubles with this approach are 1) indicating the possibility of expanding & collapsing panes and 2) indicating the number of collapsed panes.

Given that such a layout isn't common on Android yet, creating a well-denoted hot zone or a toggling button on the left-most pane (for 2-pane layout) is better than just enabling an uncommon gesture.

Also, if any of the panes goes full-screen with others hidden, there needs to be a clear indicator of how many panes are hidden and which way the user should swipe or press to expose them.

Answer 2

A couple more examples of this pattern in touchscreen applications:

While on the iPad version the navigation sidebar is always visible, the Gmail app for iPhone reveals the left-hand side navigation by swiping the whole screen (see a screenshot and description). Notice how it also has a redundant Menu button for the same action.

[The app] slides your messages over to the right to reveal the Gmail menu hiding underneath. It’s pretty slick, and makes navigations between folders or subfolders quicker and more streamlined.

---

Also, it is common to have one (or more) sides with outside-in dragging to reveal notifications or menu: iOS and Android top side for notifications, BBX bottom side for menu.

Answer 3

Swiping left to right in Android is generally used for previous/next item (as in Google Reader or Calendar) or previous/next tab (as in the Android Market: http://www.pushing-pixels.org/2011/08/11/android-tips-and-tricks-swipey-tabs.html).

Note that, on tablets, this can work to only fill half the screen with content as when you swipe to the left to show sub-categories from the first genre (Apps, Games, Books, Music)you picked:

The current Android pattern for expanding content is also found on the Market right now but it is the downward-pointing arrow that you'll see in app descriptions and the like:

So if you are truly collapsing and expanding content, you may want to use the second design here, but if you want to swipe the navigation into view a la Market categories, you may want to implement "swipey tabs" so the menu is more discoverable to users.