How to make user understand differences in swipe actions

Question

In an iOS application the user can swipe a card left or right and each has a different meaning.

• Swipe left skips the card and presents the next one.
• Swipe right spreads the content to other users.

I watched users as they use the application but they don't understand the meaning of the actions. They just randomly swipe left or right. I made a simple tutorial with 1 sentence in a page (4 page long) but realised they won't read the tutorial.

How can I make the users read the tutorial or somehow make them realise what the swipe action means?

Answer 1

Let's start by understanding why users are behaving this way:

• Carousels are a very common interface on mobile devices. They're used in Facebook, Twitter, and iOS, etc. So there are almost 2 billion smartphone and tablet users who are used to this interface, particularly with cards. In a carousel, swiping left and right are symmetrical actions which move cards forward and backwards.

• Your interface breaks this behavioral pattern for users. So users not only have to learn how your interface works, but they have to unlearn their muscle memory around swiping carousels to use your app. The unlearning process is further complicated by the fact that you are breaking symmetry in the swipe directions, which makes it cognitively more difficult to overcome.

Assuming you want to stick to this design, what does this mean?

• A tutorial will certainly not be enough. The tutorial is helpful, but in order to overcome habit, you will need to provide a clear reminder onscreen around what the swipe actions mean.
• This is why convention-breaking apps like Tinder provide a clear, onscreen reminder of how the swipes work. Tinder also allows you to click on the directional buttons as an alternative to swiping...this elegantly provides a secondary way to navigate the cards in case "unlearning the carousel" is just too unintuitive for a user.
• I don't think there is any way around doing this if you want your interface to be effective. There are some apps (include gmail) which try to hide the slide indicator and only reveal it when you touchstart the slide, but this is quite presumptuous design and while Google can afford to do this due to its entrenched installed base, I am guessing that you want your app to be popular so I would not try to be presumptuous with your design.

Here is one design which incorporates these behavioral constraints:

Whether or not this works for you, hopefully the observations above will help you design a better solution.

Answer 2

Two solutions :

• a ultra light demo (but can be annoying)
• Display arrows (you can also hide them with a little timer)
• a clever call to action, for instance when you launch the app for the first time, you can see other cards then it scroll to the first one. In that way, the user understand that He can see more than the screen display. If it's possible the best choice is to make it clearly visible with a little bit of the other card showed on the screen edges.

Answer 3

There are two ways to do it.

1. Walkthrough tutorials when a user opens the app for the first time.
2. When a user swipes right for the first time, a confirmation pop up can be opened. If the user taps ok, it remembers and the pop up never open again.

Answer 4

François D. has already provided ways to do it, I would just extend it by differentiating between left / right actions. I would give you an example of Mailbox

Inbox by Google (Android)

or even Tinder (I could not find a good screenshot which exactly shows swipe).

If you try these apps, they visually distinguish each swipe action with different colors, different notifications/messages even with different screens.

In addition, If your left/right actions are contextually different and have different frequency of operations, you might even try playing with the target area which allows the swipe. For more common and frequent action you might use a 50% vertical space, for less prominent action you would use a 10-15% vertical screen space of the other side.

Answer 5

Here's my attempt at a possible solution. (I couldn't rotate the squares in Balsamiq so just imagine they rotate a little in the direction you're swiping).

But the idea is that text or an icon that says or symbolizes the action appears when the card is being swiped in a certain direction. Swiping through or releasing will perform that action.

^{download bmml source – Wireframes created with Balsamiq Mockups}

You can explain the interaction without the need of a walkthrough or a tutorial at the beginning of the app. I mean how often do you yourself skip these walkthroughs or blaze through them? Right, the same will go for a lot of other users.
Here is a well read article about it from a while ago.

I expect with this solution the user will at first read the explanation, but will quickly remember the controls and speed up their interaction by not having to read it anymore.

Two other solutions shown in answers on this post (the mailbox examples) are similar, but to my opinion are not usable with cards.
I took my idea from Tinder where they add stamps to the photo when swiping in a certain direction. They also added two big buttons at the bottom for the same actions.

Answer 6

Besides of contextual help like others suggested you should consider offering ways of instantaneous feedback to allow users learn through interactions in addition to reading hints and checking out info boxes and tutorials beforehand.

Try out to display alert boxes (as @Hawk Nick suggested) with a short description of the impact of the action the first time users are going to swipe left and right so they can distinguish between both actions and learn to anticipate different results while executing the task.

These results should reflect somehow the users former behavior to reinforce learning the pattern, like “You’ve skipped X cards, would you like to review them again“ or “A card you’ve shared was shared X times again.“.