Visually compose APIs with easy-to-use tooling. Learn how IBM API Connect provides near-universal access to data and services both on-premises and in the cloud, brought to you in partnership with IBM.
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
- 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.
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
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.
The Mobile Zone is brought to you in partnership with Strongloop and IBM. Visually compose APIs with easy-to-use tooling. Learn how IBM API Connect provides near-universal access to data and services both on-premises and in the cloud.