How to tell users that more content is available - ie. indicating horizontal swipe
by
Join the DZone community and get the full member experience.
Join For FreeHorizontal 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.
Workspace
app
Indicator (metadata)
Android (robot)
Google Docs
Web apps
Google (verb)
Interface (computing)
Design
Form (document)
Published at DZone with permission of Juhani Lehtimaki, DZone MVB. See the original article here.
Opinions expressed by DZone contributors are their own.
Trending
-
RBAC With API Gateway and Open Policy Agent (OPA)
-
File Upload Security and Malware Protection
-
Getting Started With the YugabyteDB Managed REST API
-
Merge GraphQL Schemas Using Apollo Server and Koa
Comments