This article was originally posted on uxpatterns.org, which now redirects here.

With the increasing adoption rate of mobile devices, I have noticed that more and more apps and web sites utilize horizontal swipe gestures on touch screens to access different functionality. Of course, this interaction isn’t very helpful unless the user knows that it’s there. The way of indicating that an action is available or that there is a particular way to get a particular result somehow is called an affordance. If we don’t give the user an affordance, they may never know how to access certain functionality. Conversely, if we follow a pattern that looks like an affordance but isn’t, as in the Facebook example to the right, we may frustrate our users as they try to interact and get a puzzling result or no result at all.

Without further ado, Here are the different ways I found that UX designers are affording horizontal swipes:

Beyond borders

A very common way of indicating that the user can swipe to move the viewport side to side is to have content overlap the edges of the content area or move past the sides of the screen. Sometimes, designers give a peek at what swiping left or right will reveal. Windows Phone is a good early example of this technique being used system wide. Since its release in 2010, settings screens and many other screens across different applications had a built-in method of swiping to traverse tabs.

Dots

Many apps have a user interface design that includes dots at the bottom to indicate multiple screens that users can swipe left and right to get to. This affordance goes all the way back to the original iPhone home screen that used this to let users know there were more apps on subsequent screens.

Arrows

Arrows are far less prominent as a user experience pattern these days as they send a confusing message. An arrow may indicate something to the left or right, but does it tell the user to swipe in the direction of the arrow to get to it? Is it a button that I can tap? Trial and error will surely reveal the answer, but as UX professionals, we want our users to intrinsically know where the content is and how to get to it. Still, there are uses for arrows when interfaces need to be multi-purpose. Not all touch devices support gestures natively, and if you are building an app that needs to be almost the same across multiple platforms, these may be the way to go.

Angry Birds Rio sports an arrow on the right, indicating there is another screen of levels over there.

Summary

Screenshot of poor alignment
Google now allows users to swipe left or right to remove cards

There is no clear cut winner among these affordance methods. However, the Beyond Borders method was more often used for galleries. The Dots method was more often found where there were discrete pages or cards to flip through. The Arrows method was not as popular, but I did find a couple of games that used it paired up with the Dots method.

In my search I also found several apps that allow sideways swiping but didn’t show me that it was there except maybe in an instruction screen when I first ran the app. Google Now uses sideways swiping to “push away” cards that aren’t important at the moment. In IOS, the messages app allows swiping to access a quick delete function, but doesn’t tell you about it as it’s not essential to the experience. Pinterest allows you to swipe between tabs.

The bottom line is if you’re building an app or site that uses horizontal swipe gestures as a key interaction, be sure to inform the user somehow—even if its just a clever hint that there’s more to see to the right or left.