9

enter image description here

My Android app has a screen that displays the details of an item selected from a list, as shown above. The screen allows the user to scroll to the next or previous item in the list by swiping horizontally, and I have added a couple of icons to try to indicate this. The icons are also clickable, and when clicked they perform the same actions as the swipe gestures.

The icons are not exactly intuitive, because the swipe gestures are in the opposite direction to the movement of the screen in the list. Swiping from right to left moves the screen to the next record, but the arrow implies that it will move to the previous one. I am constrained by space though, and this is the best I could come up with.

Should I scrap the icons altogether, or leave things as they are? Would it be better if the icons displayed some help text when clicked, rather than scrolling the list? I really want the user to swipe the screen rather than trying to use the buttons as icons.

Update: on further consideration, I decided to remove the icons. The Android design guidelines discuss swiping but make no mention of providing the user with any visual clues. That settles the matter as far as I am concerned. Android is implying that the user should be smart enough to work it out for himself, given the context.

5
  • I was going to say leave the icons off - but then you still need some indication that the user must swipe to navigate through the records...
    – ChrisF
    Dec 2, 2012 at 12:06
  • That is indeed the crux of the matter. Dec 2, 2012 at 13:44
  • What part scrolls? Android's guidelines make sense for some things (full page switching, removing single items) but not for partial-screen things like carousels. I'm not sure which your example is.
    – Ben Brocka
    Dec 2, 2012 at 17:31
  • When the screen loads why not show an animation of what would happen if the user swiped a little and then snap back? Do this (once per screen load) until the user actually swipes between pages.
    – powerj1984
    Dec 3, 2012 at 15:14

3 Answers 3

10

You could try something like this:

enter image description here

Note the line breaks at left and right as well as the cut off text.

Omit the left line breaks if nothing to swipe to at left.

Even the line breaks alone would be a very simple cue that would be better than nothing if the cut off text is a problem to implement:

enter image description here

1
  • While this isn't the most common on Android, it's also not unheard of; it's often used in contexts where swiping is the only way to view another pane. An example of this hint is the lock screen in Android 4.2; when you first open it you see borders around otherwise not-visible items to the left/right
    – Ben Brocka
    Dec 2, 2012 at 17:33
6

One of my favourite soluion for this is pulse's: on first run, display an overlay with help:

Pulse tutorial screen

you can show this once, and never worry about it again. Of course it has downsides as well: user forget it quickly, or ...

But you should thick to the Android 4.x design conventions, section swiping between tabs.

Also a good idea would be something like the Play Store's swiping methods: Google Play Store's swiping indicator there is a display title in top, and you can see, whats next on the left and right.. or the Phone's tabs: Google Jelly Bean phone screen tabs

2
  • Thanks, I had not spotted that page. It seems to imply that I should let the user discover the swipe gestures for himself, and that the context alone should be a sufficient clue. Dec 2, 2012 at 13:19
  • You have more reputation now so you can post some images / extra links if you had more info you wanted to share.
    – JonW
    Dec 2, 2012 at 19:13
0

I'm unclear as to your case. In the screen above you're showing customer information but are saying you want to display different products?

Assuming your picture is to give us indication of what the layout will look like, I suggest you do what is becoming more common, which is show just the tip of the next page faded to the right side, to indicate to the user that they can swipe left or right for next.

I'm not sure how to apply it here, but for example, if on this screen, the user would swipe to the next page which is product, I'd add the tip of the product icon (like 20% of the icon) on the top bar in blue (where it says customer) and fade it into the border. This way the user knows that there's more to see when swiping.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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