Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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

share|improve this question
    
Somewhat related, an emerging pattern for discovery (new in Android 4.0) is long-pressing action buttons for a tooltip indicating the title of the action. This is kind of a touch-equivalent of hover-based discovery on the web. –  Roman Nurik Jan 5 '12 at 3:13
2  
So basically setting an View.OnLongClickListener() that brings up a Toast with a help text right? Cool idea. –  Manfred Moser Jan 5 '12 at 4:26
    
You're making me reboot my HP TouchPad into webOS to take screenshots of the pattern there. Will post them shortly. –  dnbrv Jan 5 '12 at 5:32
    
Sounds good. Looking forward to it. –  Manfred Moser Jan 5 '12 at 6:05
    
The Gmail app for iPhone works this way, swipe to reveal left-side navigation. –  Naoise Golden Jan 5 '12 at 11:37
show 1 more comment

3 Answers 3

up vote 4 down vote accepted

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)

hp touchpad email app 3 panes vertical

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.

hp touchpad email app 2 panes vertical

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)

hp touchpad tweepad 2 panes vertical

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.

hp touchpad tweetpad 2 panes vertical minimized navigation

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.

share|improve this answer
    
I like the 3 bars indicating draggable. –  Naoise Golden Jan 5 '12 at 11:39
    
I am doing pretty much what TweetPad is doing with my navigation, but the gesture detection is on the navigation rather than the main screen since it just makes room for whatever is on the right. And there are many different layouts. I agree that the problem is that there is no style guide and well established patterns and as such I will add a button that does the expand/collapse action. –  Manfred Moser Jan 5 '12 at 17:18
add comment

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: Swipey tabs

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: Expanding area

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.

share|improve this answer
    
I am truly expanding and collapsing the menu and as such I will add a icon with an error sort of icon pointing left and right.. –  Manfred Moser Jan 5 '12 at 17:20
add comment

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.

gmail app for iphone


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.

share|improve this answer
    
How did you discover the slide-out side menu? –  dnbrv Jan 5 '12 at 13:08
    
I can't remember... I was discussing with a colleague this new trend of having the navigation concealed on the left (facebook also does it) and somehow I already knew. I think it's because of the affordance that being concealed gives. –  Naoise Golden Jan 5 '12 at 14:01
    
I want to encourage the users to discover it and all these patterns are too hidden imho. –  Manfred Moser Jan 5 '12 at 17:19
    
An option to educate your users are coach marks. –  Naoise Golden Jan 5 '12 at 17:58
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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