20

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 :)

Improve this question
3
  • 8
    Would someone please explain how this is off topic? What site does it belong on?
    – glenviewjeff
    Commented Sep 14, 2012 at 15:07
  • Likewise, how on earth is this "off topic"? I found it because I'm trying to answer exactly this issue.
    – Andy Dent
    Commented Aug 14, 2014 at 5:15
  • This question may be off topic according to the community rules, but it was very helpful to me. Thank you.
    – Ryan Burnette
    Commented Oct 16, 2015 at 14:46

8 Answers 8

Reset to default
23

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

swipe icons

Improve this answer
2
  • +1 a definite improvement over a plain arrow. This might be "as good as it gets."
    – ashes999
    Commented Oct 11, 2011 at 12:55
  • 1
    You could animate this to make it more clear to the user.
    – user371
    Commented Oct 12, 2011 at 10:04
17

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

Improve this answer
2
  • +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
    Commented Oct 10, 2011 at 16:51
  • 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
    Commented Oct 11, 2011 at 19:52
9

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

enter image description here

Improve this answer
2
  • 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
    Commented Oct 12, 2011 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
    Commented Oct 13, 2011 at 17:27
7

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

Improve this answer
3
  • 1
    +1 good link and reference. But sadly, that's a huge icon. I'm working (obviously) with very restricted real-estate.
    – ashes999
    Commented Oct 10, 2011 at 13:52
  • what size icon are you looking for?
    – JohnGB ♦
    Commented Oct 10, 2011 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
    Commented Oct 10, 2011 at 16:51
3

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

Improve this answer
1
  • +1 this is a great alternative solution that's more obvious.
    – ashes999
    Commented Oct 11, 2011 at 12:53
2

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

Improve this answer
3
  • Dots indicates more, doesn't indicate "swipe."
    – ashes999
    Commented Oct 11, 2011 at 19:19
  • To anyone who has ever used an iPod or iPhone it does, what platform is your app for?
    – Matt Rockwell
    Commented Oct 11, 2011 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
    Commented Oct 11, 2011 at 20:24
1

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.

Improve this answer
0

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. :)

Improve this answer

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