6

I've been playing around with material design and was making an app where the user can interact with an element by either swiping it right or left (pressing it does a third thing). The idea is that swiping it to one side is the user giving feedback that this is "bad" and swiping to the other side is feedback that it is "good".

Now I have been looking around for which direction is usually good and which one is bad. I found many different opinions. First there is the well known Tinder way ("good" right, "bad" left), but the android email app that comes with the phone you swipe the other way (deleting to the right, moving to the left).

On the other side, to me (haven't done any user testing or anything, so maybe this is just me) it feels much easier to swipe right. I this sense then the right option should be the one that I expect the user to do most often or that I want him to employ most often.

Any more "scientific" ways to decide this?

What I am talking about

10
  • 1
    Well in a lot of situations you can swipe left on something to delete it, which is similar to "bad"
    – mginn
    Commented May 28, 2015 at 13:26
  • 4
    It looks to me like you're putting visuals over usability. Ask yourself: is this behavior the right one for the user? You're adding too much friction by adding this swipe behavior, when it could be easily solved with buttons with no friction. Still, if you want to do it just for fun, think that most people uses phone with one hand and performs actions with their thumbs. So grab a phone, try to perform your action with one hand and you'll automatically have your answer
    – Devin
    Commented May 28, 2015 at 15:07
  • @Devin that is very true. The reason for the swipe functionality is that the content uses quite a bit of space, and small thumbs (or something equivalent) where (and have always been for that matter in different apps) hard for me to hit right. Most importantly I liked this solution because it allows the user to "grab" any part of the element instead of a specific button. Is this approach wrong?
    – Marshall
    Commented May 28, 2015 at 15:20
  • wouldn't a radio toggle work better, with good|bad and one of them clearly selected?
    – user428517
    Commented May 28, 2015 at 18:41
  • I proposed something like that once, and my (left-handed) manager rejected it on the (rightful) basis that regardless of the direction we'd end up choosing, one of us would have more trouble understanding the UI than the other. Commented May 28, 2015 at 18:46

5 Answers 5

3

Consider:

  • Mental Models : There's no a massive use of swiping to choose between yes/no - good/bad to take as "common use", so you will not confuse anyone comparatively more if you set the actions one way or the other.
  • Familiarity and flow: It's common in mobile applications to place the option that let you advance in some process (confirm/yes/continue/next) on the right, that's the one hint could help to approach this.

As @Devin mentioned in the comments, I don't see swipping offering better usability, just fancier interaction.

Alternatively you could offer both options, the buttons and the swipe, so "buttons" users could use them and the ones who discover the swipe action could use it if they want (although you would have to get sure that it doesn't interfere with other action)

8

Conventions for this micro-interaction are weak

I haven't seen a study, but from a usability perspective I really don't like this microinteraction.

  • There is no usability cue/affordance. Users need to be trained or they may not know the interaction even exists. Even if they are trained, there's no cue for what direction causes what action, so it's easy for the user to forget when she returns to the app.

  • It's inconsistently applied. Different apps use card swiping differently, so there is no solid convention.

Even Gmail, one of the most used/learned interfaces on the planet, can barely get away with this interface. I wouldn't be surprised to see it evolve (to include better affordance) or removed in the future.

If you are going to use this design, it's very important that actions are undoable, because users may not remember what direction to swipe, or may swipe by accident because they don't realize/forget the action is available.

2
  • 5
    Last point is very good :)
    – Marshall
    Commented May 28, 2015 at 16:31
  • Google's "Inbox" mobile app uses this feature and it works really well. The training is very quick, and if you forget you can start to slide, see what's underneath, and slide back without having to trigger the action.
    – Luke
    Commented May 28, 2015 at 21:48
3

Using Gmail and Inbox by Gmail as examples we can see a clear difference in ideas regarding this matter. Unless you are in a serious fight for space within the object I would recommend using icons that reflect the action. This would remove any learning curve that results in removing actions from clear view.

Gmail:

  • Swipe left: archive
  • Swipe right: archive

Inbox by Gmail:

  • Swipe left: snooze
  • Swipe right: done (archive)
3

You mention the way Tinder handles swiping (right -> good, left -> bad), but in addition, Tinder offers buttons which perform the exact same behavior and are visible to the user at all times. These buttons are placed in the same location as their corresponding swipe directions (i.e.: dislike button on left, swipe left to dislike).

Assuming these swipe-able elements are in a list, consider the following:

Tapping on an element to expand it, with buttons for the "good" and "bad" action appearing under the element. The orientation of the buttons would then be aligned in the direction of their corresponding swipe, which you would be at your discretion to determine.

1
  • I would even place little arrows at the End of the buttons and upon pressing one create a swiping out animation into that direction, so the user can guess from that to use the swipe action in the future
    – Falco
    Commented May 29, 2015 at 8:08
1

I am not sure if there is a study done on this. Sliding left can mean delete in many cases but it can also mean going forward and sliding right could mean going back. In your case, I think, the feedback should be more intuitive. Do you think sliding left/right is enough to tell users what is happening? Can you have slide up and down? thumbs up/thumbs down?

Your Answer

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

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