21

There are a lot of mobile UI design patterns that support swiping, and these are designed based on interaction and animation that indicate the behaviour. Examples include the 'swipe/pull down to refresh' and also the page flip when users swipe left or right.

I also know that there are some applications that show swiping interactions for only specific sections of a page, but I generally don't see any cues or hints to suggest that this behaviour is possible. An example of a discussion about this for Android applications here. Are these supposed to be discoverable interactions or are there some standard notations for this type of behaviour?

  • This is a great question. Swiping still seems to me like a hidden/fallback feature. I rarely discover a swiping section that can only be swiped. There's usually at least a pagination hint (arrows, indicators etc.) or an auto-loop (slideshow-ish) that suggests to swipe through. – msp Jun 24 '14 at 7:40
  • I remember I had a hard time to discover the swipe-to-left to get the Delete button in some iOS table entries... But I have no good affordance. And since somewhere, many things can be swiped, indicating this might end up in a similar jungle as all those embedded scrollbars way back when... – virtualnobi Jun 24 '14 at 7:53
  • So would anyone like to offer some suggestions or ideas? – Michael Lai Jun 24 '14 at 22:43
  • @msparer I often accidentally trigger a swipe feature and cannot recover or unde the action. Hence I would like some way to make this more clear to the user. – Michael Lai Jun 21 '18 at 4:54
15

I suppose the first point to make is that you shouldn't depend on invisible interactions to accomplish anything.

The example made in virtualnobi's comment of iOS's swipe-to-delete gesture is a good example; Mail items etc. can be deleted the long way by choosing Edit, then checking the items you wish to delete, then choosing "Trash"/"Archive" at the bottom of the screen, or they can be deleted by swiping the item to the side until the "Trash"/"Archive" state is visible. In this way, the swipe gesture is a useful pro tip, but never a requirement for normal users.

When a swipe action is required by the interface (e.g. to prevent accidental activation), the behaviour should be simply indicated. Animation is a great choice for this. For example, the little shine effect over the "slide to unlock" text on iOS provides a useful hint of the kind of motion required (horizontal slide):

iOS 7 "slide to unlock" animation
Image taken from this Stack Overflow question

Where such an obnoxious animation is not feasible, putting an icon on the screen that indicates that there is an alternative interaction can provide a useful cue. Again, iOS has an example with the camera button on the lock screen—tapping it once can't launch the camera immediately since that would be constantly activated by accident, but expecting users to know that grabbing the icon and swiping up is how to activate the camera is another invisible interaction. So Apple adds a tiny indication of the affordance of that button when tapped once; quickly bouncing the lock screen vertically and briefly showing the camera interface beneath it. The user learns quickly that swiping up a little further reveals a little more of the camera interface, until swiping up in one go unlocks the interface and prevents the lock screen coming back down:

iOS 6 lock screen camera affordance
Animation taken from UI Animations tumblr

This is very similar to the lock screen affordance on Windows Phone, as mentioned in this highly relevant article about animations as affordance:

Windows Phone lock screen affordance

Animation is a great way to provide affordance of content overflowing. In Windows Phone, the transition animations tilt the content being viewed about the y axis so that (for a split second) more than a screenful of content is visible. This is a helpful indication that there's more off to the side of the screen than what is immediately visible. This is a huge pain to find a good example of online (this is the best I can find and it's a real blink-and-you-miss-it example), but it's very apparent when using the device in person. In Windows Phone they also show a tiny sliver of the content on the next screen across horizontally (as a hint that there's more than meets the eye).

This technique (especially the animation example) is an example of what Edward C. Tolman calls "latent learning" (learning through passive observation rather than being told explicitly). There's a good article on the Microsoft website that gives another example:

In the following image, the list box’s contents slide in when the control is initiated, which conveys a lot of information quickly. This transition suggests that users can scroll through this list and that it contains more content beyond the current display, which helps encourage user interaction.

Visuals - Content transition example

If the list box appears empty for just a moment, and then its content slides in, the user sees this movement and can infer that the list box contains more options than what currently appears. Likewise, the sliding movement acts as a clue that users can manipulate the content that appears.

  • Add one more thing: Leaving content partially off-screen. – user46819 Jun 25 '14 at 11:44
7

I have been dealing with designing for swipe gestures recently and you raise a very important question, as the main problem with most mobile gestures is discoverability .

More and more, swipe is becoming a standard and well known gesture with the rise of Tinder. However, mobile users are still very much used to tapping buttons. Tapping is by far the most prevalent gesture in the (smart) mobile world.

With this in mind, the solution I came up with is when the user taps the swipe element, a little teaser animation appears which gives a subtle yet effective hint of how to interact with the element.

I hope this GIF demonstrates the solution well.

enter image description here

I have tested it on multiple users and the teaser never fails to guide the user to the right interaction.

The solution also chimes well with what Luke W speaks about in his talk about gestures.

4

Use cut off content.

Sketch of a mobile phone with two rectangles representing content displayed on screen. One of them is cut-off, suggesting that rest of it is beyond the viewport of the screen.

Really simple visual idiom. I believe it could even be used to signify the elusive drag-down-to-refresh by showing a corner of a circle at the top.

2

Currently the gesture language is not very well defined, so there is no specific difference between a swipe action for an entire page compared to a swipe action for a section of a page. This means that either we need to extend the gesture language or provide a specific visual cue for that part of the page to indicate a different behaviour. But it would still require a different gesture behaviour defined so that it won't be confused with the page swipe behaviour.

I suggest that the one and two fingered swipe is a possible way to differentiate between these different interaction. There are many gesture language icons that provide other possibilities. I don't think the whole hand swipe is used much other than for tables or touch screen PCS.

enter image description here

2

While I don't believe that there is a standard icon out there for swiping left or right, I do know in many cases to slide something left or right with your mouse you would grab a sizing handle. Like this one:

Windows:

enter image description here

Mac:

enter image description here

I'm thinking if you used this at the end of the slidable UI element, it would probably make it clear that the user should slide it.

  • I think there is a difference when it comes to desktop versus mobile (rightly or wrongly), so I would be interested in what other people think. I know that the styling and iconography for menus and navigation when it comes to desktop applications versus browser applications have been debated a lot. – Michael Lai Jun 24 '14 at 23:47
2

I think a combination of animating a slide-in for sections together with a small arrow on the side is the most clear way of indicating the content is slide-able. Bullets can indicate how much content is available and the current position of the user.

http://sliders.webflow.com/
Image taken from sliders.webflow.com

1

This is an old thread, but it's still a current problem. The best example I've seen of demonstrating that something is swipable is in the search results of the Amazon app (iPad version, not iPhone). After the search results load, one of the results briefly animates the swipe effect to show that something is hidden behind the cell.

0

I think gestures are not easy to discover, unless you were taught to do so:

  1. ios and android have their own unique gestures( like swipe to left to delete in IOS, long tap to edit in android ) you won't notice it unless their guideline told us. those gestures are easy but not intuitive.

  2. if you design an app trying to use special gesture interaction. you have to design a tutorial. like Facebook paper, clear.

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.