How to indicate that specific sections of a page can be swiped

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

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

    So would anyone like to offer some suggestions or ideas?

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

  • Kit Grose

    Kit Grose Correct answer

    7 years ago

    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.

License under CC-BY-SA with attribution


Content dated before 7/24/2021 11:53 AM