Home > Navigation > provide access to contextual actions? > Swipe for action

Swipe for action

It works like this:

  1. The user performs a swipe gesture on an item in a list. Here he swipes to the right.

  2. The item in the list gets covered by a layer, which quickly slides into the screen in the same direction as the gesture.

  3. Immediately when the item is covered, icons are shown which can be tapped to perform corresponding actions on that item.

Use when

The 'swipe for action' pattern has not been applied in many apps so far, but it provides a nice and quick way to let the user choose an action he can directly perform on a certain item. The actions that are taken up should be the most important and obvious ones that can be performed on the item.

This pattern can exist in two forms. The first is explained in the wireframe: after swiping, the user can choose to perform an action by tapping on an icon. The second kind is when the action takes place directly after swiping over the item. The second set of screenshot examples show how this kind works. The user can swipe over the item in both directions. It is possible though, that the action that is performed after swiping is different in both directions.

Because of the contextual character of this pattern, you can also let a long press gesture instead of swiping, invoke the layer with actions.

The actions that can be called for on swipe, need to be contextual to the selected item, and cannot be global to the current screen. For that you should put actions in the options menu. Or, when the item was tapped and displayed on a detail page, actions can be added to a toolbar.

Instead of swipe for action, you could also use quick actions, or a context menu, but the latter is definitely less 'fun' or quick.

The Good

  • It's fast
  • It's fun
  • When the user gets acquainted with it, he will be seriously engaged and perform the gesture all the time
  • Hello! Very good job(this site)! Thank you man. (JohnBush)

Add Good

The Bad

  • It's very hard to discover, because of the absence of a visual cue
  • The item that is swiped over gets covered by a layer, so it could confuse the user which item he just selected
  • It may take a while for users to get acquainted with it
  • The user doesn't know which actions can be performed before he swipes over the item
  • The object has to be big enough to perform a swipe over it. (Alex Debkalyuk)
  • it\'s not that\'s trival to close the context menu, you have to click the Back key (cheng)

Add Bad

Examples

Twitter

1 All items in the list of tweets can be swiped over to the left or to the right...

2 ... to unveil 5 actions the user can perform.

3 The user can swipe over a second item...

4 ... and over an other one. All uncovered actions are the same: reply, retweet, favorite, show user profile and share. The user can also perform a long press on an item to reveal these actions.

5 When an action is selected, here the first action, reply...

6 ... a screen in which the user can reply to the selected tweet is displayed.

Samsung Galaxy S - List with contacts

1 On the Samsung Galaxy S, it is possible to quickly perform actions on a contact in a list, i.e. 'call' and 'compose a message'. These contacts can be displayed in the call log, the favorites, the regular contact list, or the list of messages. In the latter the list displays the contacts the user has had conversations with.

2 When the user swipes his finger to the right over a contact, he can directly make a call. By doing that, the contact is highlighted in blue, and its picture and name move, like the movement of the finger, to the right, revealing on the left in green a phone icon and the action 'Call'.

3 The contacts picture and name are completely slid out of the screen now, and the list item has turned green, indicating the call is being made.

4 Right after that, the call screen slides in from the right. The call can be ended by pressing the 'End call' button.

5 Here's the same screen from the beginning, showing the list of contacts. When the user swipes to the left, he moves directly to the messages screen in which he can compose a message.

6 The user could have also reached the compose message screen by just tapping on the contact in the previous screen. This gesture however does work on all lists of contacts (phone related). When users get acquainted with this gesture though, he will use it all the time to call or compose a message.

10 Responses to Swipe for action

  1. Alex Debkalyuk says:
    March 3, 2011 at 3:12 pm

    That’s a great pattern. I believe that in a not so distant future people will recognize this easily. But before that a visual cue is necessary. :(

  2. Joshua Osbiston says:
    March 9, 2011 at 4:08 am

    I think for swipable material there should be a coloured tab on the right hand side or a little |> arrow on the right showing to swipe, if that makes sense :-)

  3. Giovanni says:
    March 9, 2011 at 1:15 pm

    I think this pattern is more about iOS than Android. Android users use to longpress items to show a context menu, see http://www.androidpatterns.com/uap_pattern/context-menu

  4. caat@unitid.nl says:
    March 14, 2011 at 9:07 am

    @Giovanni You’re right about that. The Twitter example originally came from Twitter for iPhone. I don’t agree however that it’s not about Android. The nice thing is that Android can embrace all new kinds of gestures and patterns, coming from other operating systems. This pattern is a great and fast way to perform contextual actions. And the longpress will still be available.

  5. Ziv Meltzer says:
    March 15, 2011 at 4:26 pm

    The problem I see with this gesture is once you make it, the “call” option appears with no indication on the user you swiped on and about to call. A call to action phrased “Call Joris Van Heukelom” (with the full name as it appeared before the swipe) would be much better.

  6. Frank M. Eriksson says:
    March 21, 2011 at 4:41 am

    @Giovanni: I hate looooongress..

    About the swipe menu, it would be better if the options fell out below the item with a common border to show that they belongs to each other.

    The companies should invest in hiring an UI and usability expert, just my one cent.

  7. R says:
    March 22, 2011 at 12:37 pm

    @Giovanni, @caat: Actually, I think that swipe pattern is related to webOS, the Palm/HP OS. It is implemented all over the core functionalities.

  8. nikhil says:
    June 13, 2011 at 11:12 am

    Share the code as well

  9. Viktor Reiser says:
    September 18, 2011 at 4:27 pm

    Since there is no public implementation of that I will publish my work on that,

    Check this post: http://stackoverflow.com/questions/7398184/twitter-for-android-like-swipe-to-side-quick-menu/7462204#7462204

  10. Lorenzo says:
    September 30, 2011 at 12:32 pm

    There patterns are useless without tested, working, open code.

Leave a comment