We have a mobile music application that has a header with a floating button underneath it, something along the lines of this crude image:
People understand to click the button to play a song, but it is not obvious to them that can swipe the button left or right to move to the previous or next track.
Is there a cue we can use? Or does anyone have any guidance on creating a tutorial we can fire up when the user first starts the app?
The interaction here is kind of similar to a screen unlock or a phone pickup interaction—I recommend looking into those.
Here's my shot at the interaction design:
At rest, arrows next to the button would indicate that you can slide it. To make this interaction clearer, the play button should animate when tapping an arrow in the direction that the arrow is pointing.
While dragging, indicators would appear, giving a clear example of the meaning of each drag. A drag of a certain length would be required, to ensure that a person doesn't accidentally activate a drag when he just wants to tap the play button. Plus points for highlighting the icon that a person is dragging forward and fading the icon that they are dragging away from.
As for an up-front tutorial, there are various strategies. You could animate the arrows or the play icon from time to time if the user hasn't discovered the interaction yet, just like some lock screens do. Alternatively, you could do an overlay tutorial, but be careful about not overwhelming your user with too many things to learn when starting your mobile app.
With regards to the @Tin Man UI, the play button could give more sense of a sliding feel if it looks like below.
