6

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?

  • What does swipe-left and swipe-right do in your application? It's hard for me to think about design without understanding what the intent is. – tohster Mar 4 '15 at 17:06
  • left -> skips the card (does nothing else), right -> spreads the content to other users. – Thellimist Mar 4 '15 at 17:23
  • What happens if the user swipes right and then wants to see the previous card again? Is it gone forever? – tohster Mar 5 '15 at 5:03
  • There is a view where user can look at previos swipes but user cant see it on the main screen again. So no undo button – Thellimist Mar 5 '15 at 7:45
  • ok thanks for the clarifications, it helped me formulate an answer. – tohster Mar 5 '15 at 16:36
3

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:

card

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

  • It was definitely helpful thanks a lot however how am I going to explain left -> skips the card, right -> spreads the content to other users. Tinder's like and dislike is pretty simple and can be explained with one word or heart button. Putting icon and one word doesn't seem to avoid the confusion for my use case. – Thellimist Mar 5 '15 at 20:33
  • You can place an info icon between the two arrows to provide ready contextual help for users initially – tohster Mar 6 '15 at 21:01
1

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. enter image description here
  • 1
    They understand that its a card and it can be swiped left and right. They can't understand the difference between left swipe and the right swipe. – Thellimist Mar 4 '15 at 14:13
  • What is ultra light demo? – Thellimist Mar 4 '15 at 14:13
  • just an animated tutorial which briefly explain you how it works. What are the actions related to left and right swipe ? (if it's not secret) – François D. Mar 4 '15 at 14:14
  • I made an animated tutorial which shows to swipe left and right. Also it has sentences which explain what happens when you swipe left and right but the user doesn't read the sentences. They just see the animation of swiping and ends the tutorial. Maybe instead of making an animation of a hand swiping the card I could make an animation which explains what actually happens when the user swipes the card left and what happens when user swipes right? – Thellimist Mar 4 '15 at 14:18
  • Maybe that or try to engage more the user by rewarding him to do this ? (as Stack exchange do it) but it have to be worth. – François D. Mar 4 '15 at 15:18
1

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

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

Left Swipe

Variations of Right swipe

Inbox by Google (Android)

Left and right color difference

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.

  • 1
    Please add images of the examples, not just links. Providing links to resources is fine but an answer should be clear without having to click away from it. – jazZRo Mar 5 '15 at 8:31
  • Just added screenshots. Thanks for your comment @jazZRo – Harshal Mar 5 '15 at 9:56
  • Thanks. Your points are useful. My interface is similar to Tinder. Tinder made this by putting like/dislike over the card while swiping but my users don't know what the meaning of swiping right is. There is text spread on the right of the card but the word doesn't explain enough. – Thellimist Mar 5 '15 at 20:37
1

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.

mockup

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.

1

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.

Swipe Actions

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

  • Popups are considered as a bad UI component (blog.maxrudberg.com/post/38958984259/…). But I liked the idea "A card you’ve shared was shared X times again". – Thellimist Mar 8 '15 at 16:01
  • I’ve to admit it’s not the prettiest UI element (and maybe quite „disruptive“ according to your linked blog post) and I’d always prefer an overall system where actions are integrated in a way users are going to understand them without any further explanation (as I tried to explain using the example which you’ve quoted). But your question was quite focused on the swipe actions and the connected view rather than the overall implementation of the idea of ‚skip' and ‚share‘. A popup maybe acts like a roadblock but will always ensure your users will get the message that both actions differ. – ITJ Mar 8 '15 at 17:55

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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