20

The current project I am currently working on has one screen we display a list of contents which you can scroll vertically and when user taps on the share button on content it loads a list of people with whom you can share the content.

Instead of opening a new screen/activity to show a list of people, I have shown a list of people on the same screen in the bottom. The list has pictures of people along with the name shown below those picture. The list can be scrolled horizontally.

Problem - I am not sure how to make horizontal obvious. There are several ways to do that but all of them has some sort of problem

Sol 1- Show the last item [picture+name] partially visible on the screen but that does look like a bug in the app.

Sol 2 - Give a arrow pointing on the right and when user taps on it, the list will scroll to the left but that it not natural. If something is horizontal scrollable people will scroll it horizontally by swiping horizontal

Or may be I am overthinking that people might not understand the horizontal scroll.

4 Answers 4

33

I think that the idea of an item partially visible (sol 1) is nowadays something acquired (it comes from windows metro UI, back in 2010!).

In my opinion to make it look less bugged you should try to use on the list of items a gradient to transparent on the border and maybe to do the same on the left side (and creating a "ring" of items that circles the items).

Something like this: enter image description here

3
  • 1
    Apple does something similar with some of their horizontal interfaces, but they also enlarge the items closer to the middle and, at least in older versions of software (iTunes, etc.) the items would be tiled such that the ones in the middle would show as "closer" in terms of z-index. Not sure if they have any trademarks/patents/whatever that would prevent you from using that look yourself (personally, I find the concept of patenting a stylistic choice for displaying information to be ludicrous, but there was that whole thing with their touchscreen gesture patents a while back, so).
    – JAB
    Feb 19, 2016 at 14:23
  • I thoroughly agree with the fade, but I don't know if the "ring" setup is a good idea - It leaves the user unclear on which way they want to scroll to select the person or people they want.
    – recognizer
    Feb 19, 2016 at 16:57
  • 1
    To make sure users understand, I'd show a horizontal scrollbar as well Feb 19, 2016 at 19:06
18

I think Marco T's answer is an excellent solution for your first option. I'd like to offer a solution for your second suggestion

Give a arrow pointing on the right and when user taps on it, the list will scroll to the left but that it not natural. If something is horizontal scrollable people will scroll it horizontally by swiping horizontal

Why not offer both? For desktop users, it makes perfect sense to have an arrow to the right that will show the items to the right of the currently visible range, i.e. scroll left. Maybe a small horizontal scroll bar / handle that only shows when hovering the bottom edge is useful, so that you can grab it with your mouse and quickly move through the list while keeping the button pressed.

For touch screen devices, swipe is the most natural operation. Since the right arrow button at the right of the strip indicates that the list will scroll horizontally, it makes sense to try swiping the list, and moderate to expert users will be pleased to see this work. Novice users may resort to just pressing the arrow button.

I hope the text is clear, here is a crude sketch that shows both elements (the right arrow, as well as the scroll handle that shows up when hovering the mouse)

enter image description here

1
  • This solution is better for devices with less graphical processing power because it does not require alpha blending.
    – Pharap
    Feb 21, 2016 at 5:34
10

My recommendation is don’t use horizontal scrolling. Use left-right swipes instead.

Generally speaking, users know to scroll vertically, and they know to swipe horizontally. The metaphor is scrolling down a page and swiping forward and back through a stack of pages.

Where you are looking to have them scroll horizontally you might be able to create an interface where they are supposed to swipe left and right instead. If you show a centered photo with the left edge of the next photo to its right and the right edge of the previous photo to the left, you can make it obvious that you have a little carousel of photos to swipe through.

4
  • 8
    This seems like only a difference of semantics. How is swiping different from scrolling? I think you could put "swiping" into the OP in place of "scrolling" and it would be the same question.
    – Octopus
    Feb 19, 2016 at 18:34
  • @Octopus: The difference is that with scrolling you are moving a page, while with swiping you are moving between items, usually with snapping. Picture the iOS home screen swiping horizontally versus scrolling a web page vertically, for instance.
    – user69458
    Feb 22, 2016 at 2:25
  • @FighterJet I don't believe that is at all a well defined use in wording. To improve this answer, it should make a clear definition for his usages of the words.
    – Ben
    Feb 22, 2016 at 6:00
  • @Ben: it's not my answer, but Simon did define his wording. See the "The metaphor is..." above.
    – user69458
    Feb 22, 2016 at 17:45
1

Have an overlay on the top of it.

Or You can go with a background color with some opacity so that it gives a faded look.

Gradient also is a good option to try.

Your Answer

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

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