How to suggest sliding interaction on mobile app?

Question

I'm helping a friend revamp a voting application.

During vote creation we would like to let the user remove a proposition by sliding it to the left (rows 3 to 5 in the preview below).

Update

I might have be more precise about the fact it's a mobile app without authentication, which mean we keep no track of user. So, if a user revisit we don't want to block him with a tutorial he already saw (which is something that become annoying after a few times)

Question

How would you hint that interaction?

Answer 1

Show a one-time tutorial that explains such features, and provide an option to have it re-displayed if the user wishes. You may want to make it interactive, e.g. have this for one of its screens:

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

After swiping away, the tutorial ends (or goes to another screen, if you have more things to explain).

With the growing list of apps that use this feature, this might soon not be needed to explain, since users will get used to swiping items.

Answer 2

So here is what we designed

1. simply suggest there is something more by adding partially visible trash bin.
   • want to see more? Well, move the row.
2. it will reveal the trash, and maybe some slighty visible text (e.g. "slide to remove")
3. once you went all the way to the left, it will show on undo button/link for a few seconds

Pros

It has a simple regression on desktop if you prevent the row to overlap the trash button/link.

Cons

Open to comments.

Answer 3

I've seen apps include an affordance for sliding UI by using animations. When the page loads, some or all of the slideable elements move off-screen, maybe by 10% of the screen width, revealing underneath an indication of the action that sliding will achieve, before snapping back into place. If it is subtle and quick, it should not be too annoying that it happens every time, but you may want to validate that with testing.

Also, make sure to style slideable elements consistently with one another, and keep to other affordances of interactivity, such as text styles, shadows, etc. If it looks like they should touch it, they will!!

Answer 4

I'm not sure that "sliding" give a good user experience.

This "system" exist on my Galaxy S3 (for a contact, sliding left for a message, sliding right for a call) and if a hint wasn't displayed on my first usage, I never guess this feature!

IMHO, you should prefer a light grey cross (or garbage, or whatever you want) on the right of the rows.

If you still want to propose the sliding experience, I haven't any idea except a tip box.