Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

I'm working on an app that displays a list of ten items (text items) on the screen at a time. If there are more than ten items, the user should be able to "swipe" from right to left to see the next 10, or left to right to see the previous 10.

Is there a well-understood symbol I can use to indicate that the user should swipe? Even if not, is there a symbol that will make sense to the user once they've learned that they can swipe?

If not, please address a different model of going through a large list of items in your answer, and I'll change my question :)

share|improve this question

closed as off topic by Rahul May 19 '12 at 12:29

Questions on User Experience Stack Exchange are expected to relate to user experience within the scope defined by the community. Consider editing the question or leaving comments for improvement if you believe the question can be reworded to fit within the scope. Read more about reopening questions here.If this question can be reworded to fit the rules in the help center, please edit the question.

6  
Would someone please explain how this is off topic? What site does it belong on? –  glenviewjeff Sep 14 '12 at 15:07
add comment

9 Answers 9

up vote 20 down vote accepted

Why not try some variation of the following (crude) sketch, with the circle indicating a touch point and the arrow a swipe?

swipe icons

share|improve this answer
    
+1 a definite improvement over a plain arrow. This might be "as good as it gets." –  ashes999 Oct 11 '11 at 12:55
1  
You could animate this to make it more clear to the user. –  rightfold Oct 12 '11 at 10:04
add comment

Maybe an approach... Show the user in page indicator under the list, there a more items available. The beneficial: the arrangement corresponds with user mental model and user sees the current page.

enter image description here

share|improve this answer
    
+1 I was actually thinking the same thing, with boxes instead of dashes. But this does seem to imply a swipe. Awesome. Maybe an arrow pointing would be even better. –  ashes999 Oct 10 '11 at 16:51
    
+1 That was a really smart idea. –  Xan Oct 11 '11 at 15:08
1  
+1 This is close to the Apple approach, which is recognizable. I would say this is the best option other than doing exactly what Apple does. –  Matt Rockwell Oct 11 '11 at 19:52
add comment

Apple's original unlock screen design seems as good as any:

enter image description here

share|improve this answer
    
Apple's is a good way to approach it as it provides both a virtual object to manipulate and instructs the user on the action to take at the same time. –  Nick Bedford Oct 12 '11 at 3:21
1  
I like the high affordance of the track and arrow on the button -- it really feels intuitive and logical. It would be interesting to apply this model to a set of several pages (perhaps have the button fly over and stack or something). –  Andrew Shipe Oct 13 '11 at 17:27
add comment

There is not yet any standard, but a good place to start for any touch symbols is the Touch Gesture Reference Guide. In that the gesture would be (depending on what you mean by swipe)

enter image description here

share|improve this answer
    
+1 good link and reference. But sadly, that's a huge icon. I'm working (obviously) with very restricted real-estate. –  ashes999 Oct 10 '11 at 13:52
    
what size icon are you looking for? –  JohnGB Oct 10 '11 at 14:37
    
My minimum screen size is probably 320x480. I was hoping for something that would look good as a 32x32, since I need one for both sides (swipe back, swipe forward). –  ashes999 Oct 10 '11 at 16:51
add comment

Because it's a touchscreen device there might be a few other solutions instead of using icons or buttons. In the design projects I've been working on I've ben trying to envision how the content can function as the interface so the UI can be more directly engaged with, well at least as much as possible.

One option would be to continue the vertical list (like Mail on the iPhone). Then at the end of the list, which is a single screen, you could provide a "Load more [list items]" control. This avoids overwhelming the users with a really long list of items they need to initially review.

The second option would be to create "Panels", each contain a screen's worth of list items (8-10). Conceptually the panels would line up along a horizontal axis (like the panorama view in the Windows Phone 7 UI). In this option the right panel (next set of list items) would peek out from the edge of the screen and indicate a) its presence and b) that the current panel can be swiped to the left to reveal the next panel. This functionality (only visible on the right) should be enough to indicate that the UI swipes l-to-r so there might only be a need for the hinting of the next panel and not the previous panel.

Not knowing the audience and their goals, etc these options might be off base but I hope this helps a somewhat.

Here's a quick sketch to illustrate the two options

share|improve this answer
    
+1 this is a great alternative solution that's more obvious. –  ashes999 Oct 11 '11 at 12:53
add comment

For a similar requirement I'm using an arrow and the title of the next page as vertical text in the margin - indicating that there is something available in that direction without taking up as much space as an icon.

It's also clickable so that the user doesn't need to know that they can swipe - it's just a whole lot easier once they realise that.

The same applies to a next button with a regular arrow icon if you have room for a toolbar at the top/bottom of the screen - Most users will try swipe fairly quickly, that being the normal way to move to the next item on touch devices. The button doesn't need to be big enough to easily use, but it does need to be there to indicate that more content exists.

If you are concerned that users won't discover the gesture, you can provide some contextual help - use JohnGB's large icon as an overlay that appears whenever you use the button instead of the gesture.

share|improve this answer
add comment

Or use what Apple uses in iOS (which is similar to @sysscore's answer):

enter image description here

Here, each dot represents another screen of icons

share|improve this answer
    
Dots indicates more, doesn't indicate "swipe." –  ashes999 Oct 11 '11 at 19:19
    
To anyone who has ever used an iPod or iPhone it does, what platform is your app for? –  Matt Rockwell Oct 11 '11 at 19:23
    
Android. I'm not a heavy mobile user, so for me, there must be more than just an expectation that I'll try to swipe. –  ashes999 Oct 11 '11 at 20:24
add comment

If you have a simple list of items, why not just use the usual interface of a vertical list with a scrollbar? Handheld users will naturally try to scroll the list by swiping vertically, since that's the norm with those kinds of devices. No icon necessary!

share|improve this answer
add comment

The Apple iPhone has a standard indicator which is a row of gray dots, one per page. The dot representing the current page is white. This article has a good picture of it (http://mactips.info/2009/03/arrange-application-icons-on-the-iphone-or-ipod-touch). Personally I find it subtle and I've found that novices tend to miss it, but it is the Apple standard, so lots of people either know it or will eventually learn it. :)

share|improve this answer
add comment

Not the answer you're looking for? Browse other questions tagged or ask your own question.