How to tell users that more content is available - ie. indicating horizontal swipe

Horizontal scrolling on desktop apps or web apps is something designers try to avoid. It often makes interface more complex to use. We have seen horizontal scrolling become more common place in touch interfaces. On Android we have a UI design pattern called workspaces. Workspaces are pages that can be navigated by swiping horizontally or often also using tabs.

In many tablet UIs similar content navigation has been extended beyond the workspace pattern. A tablet screen allows designers to add more data and more logical sections to a single screen. Often content on these sections can be navigated with horizontal swiping not unlike small workspaces. 

While workspaces use tabs to indicate availability of more content using tabs doesn't always make sense when navigation target is only small section of the screen. So how can we let the user know that there is more content available by swiping? How does user know how many pages of information is available in each direction?

In short, you should always make sure that user sees:

• that he or she can reveal more content by swipe horizontally.
• where he or she currently is in the content ie. how much more content is available on the left and on the right. Or at lest tell user in which direction more content is available.

Tabs

First option is to use tabs if possible. This is an implementation of the workspaces UI design pattern. 

The new Android Market app is a brilliant example how to combine swiping and tabs. 

As a simper example Google Docs uses simple indicator to display where more content is available but this indicator doesn't function as tabs ie. they cannot be tapped to navigate between workspaces.

Dot indicator

Android phone home screen is navigable through swiping. OEMs tend to customise their home screens but most of them retain the dot indicator form Google's default home screen in one form or the other. This approach clearly tells user where he or she is in the content and in where more content is available.

This example is Sony Ericsson's home screen: 

The same approach also works on tablet UIs where only a small section is horizontally scrollable.

Partially visible content

If elements at the edges of the scrollable container are only partially visible user can see that there is more content is available. This approach has a flaw though. User has no understanding how much content there is and where in the content he or she is currently. Using scroll bars could solve this issue. This approach could be good when the content is not paged. 

If this approach is used I would recommend to use Android's default scroll area highlights. Using it lowers chance that the content happens to be perfectly spaced and doesn't indicate that scrolling is available.

Overview besides detail

Sometimes it is possible to show a zoomed out overview or partial overview of the content besides the scrollable area. This is very suitable approach for reading apps. In case of magazines or books adding page numbers in the overview is a good idea to improve user's sense of context.