How to tell users that more content is available - ie. indicating horizontal swipe
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.
TabsFirst 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 indicatorAndroid 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 contentIf 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 detailSometimes 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.
(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)