20

I’m currently working on a project where we have a screen that displays a vertical list of content. When a user taps the share button on any content item, a list of people they can share with appears.

Instead of opening a new screen or activity to show this list, I’ve implemented it so the list of people appears at the bottom of the same screen. The list displays each person’s picture along with their name below the image and can be scrolled horizontally.

The problem: I’m unsure how to make it obvious that the list is horizontally scrollable. I’ve considered a few solutions, but each has its drawbacks:

Solution 1: Show the last item (picture and name) partially visible on the right side of the screen. However, this might look like a UI bug rather than an intentional design choice.

Solution 2: Add a right-pointing arrow that users can tap to scroll the list to the left. But this feels unnatural since horizontal scroll usually works through swipe gestures. Or maybe I’m overthinking, and users will intuitively understand the horizontal scroll without any extra hints.

Improve this question

4 Answers 4

Reset to default
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

Improve this answer
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). Commented 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. Commented Feb 19, 2016 at 16:57
  • 1
    To make sure users understand, I'd show a horizontal scrollbar as well Commented 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

Improve this answer
1
  • This solution is better for devices with less graphical processing power because it does not require alpha blending. Commented 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.

Improve this answer
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. Commented 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. Commented 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. Commented Feb 22, 2016 at 6:00
  • @Ben: it's not my answer, but Simon did define his wording. See the "The metaphor is..." above. Commented 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.

Improve this answer

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.