I am an Android developer and enthusiast with over 10 years of Java development experience. I'm big fan of good design an appreciate well though usability design in applications. Juhani is a DZone MVB and is not an employee of DZone and has posted 109 posts at DZone. You can read more from them at their website. View Full User Profile

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

07.31.2011
| 3516 views |
  • submit to reddit
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.

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.
References
Published at DZone with permission of Juhani Lehtimaki, author and DZone MVB. (source)

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)

Comments

Gagan Peter replied on Sat, 2012/04/14 - 5:06am

Hi, i like your blog a lot. I have a question, do you recommend any tool for designing android UI. I liked something like flowella, but know im looking for some other options. Thanks in advance.

Comment viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.