UX: Replace horizontal scrollbar with arrows #250

New issue

Closed

opened 2017-06-16 11:09:51 +02:00 by jasperjansz · 6 comments

jasperjansz commented

2017-06-16 11:09:51 +02:00

(Migrated from github.com)

The Issue

Horizontal scrolling, albeit effective on mobile, does not translate well to desktop. Especially for those using a mouse instead of trackpad. Also it looks bad and takes attention away from the content.

Steps to reproduce

Open LBRY

Expected behaviour

Expected behaviour, not only based on usability research but based on household names such as YouTube and Netflix using similar patterns, would be using arrows at the edge of the screen to scroll left/right.

Actual behaviour

You have to hold and move the scrollbar to scroll.

System Configuration

LBRY Daemon version: 0.11.0
LBRY App version: 0.12.0
LBRY Installation ID: 2tCTvcMLmPUE46D8mHVAVJXUxy8U4HX6xdV7TKQU25jsj3H6G2EnoUmxXEVhdb8hoa
Operating system: OS X Sierra

Anything Else

Some research on the matter:
https://www.nngroup.com/articles/horizontal-scrolling/

## The Issue Horizontal scrolling, albeit effective on mobile, does not translate well to desktop. Especially for those using a mouse instead of trackpad. Also it looks bad and takes attention away from the content. ### Steps to reproduce 1. Open LBRY ### Expected behaviour Expected behaviour, not only based on usability research but based on household names such as YouTube and Netflix using similar patterns, would be using arrows at the edge of the screen to scroll left/right. ### Actual behaviour You have to hold and move the scrollbar to scroll. ## System Configuration - LBRY Daemon version: 0.11.0 - LBRY App version: 0.12.0 - LBRY Installation ID: 2tCTvcMLmPUE46D8mHVAVJXUxy8U4HX6xdV7TKQU25jsj3H6G2EnoUmxXEVhdb8hoa - Operating system: OS X Sierra ## Anything Else Some research on the matter: https://www.nngroup.com/articles/horizontal-scrolling/

kauffj commented

2017-06-16 22:48:54 +02:00

(Migrated from github.com)

@seanyesmunt want to try this one?

neb-b commented

2017-06-17 00:14:43 +02:00

(Migrated from github.com)

@kauffj I would love to give this a try!

benhohner commented

2017-06-30 21:16:40 +02:00

(Migrated from github.com)

Addendum: perhaps Netflix has discovered that making users horizontal scroll while displaying video details on the top half of the screen makes people spend more time considering what to watch and gives more time to sell a user on a show. The best way to test these hypotheses would be to implement at least 2 versions of scrolling and show them to a bunch of users, then survey them afterward.

I imagine Netflix has done the most research on horizontal scrolling, since it's basically their whole business model, so mimicking their desktop implementation as closely as possible would be a good idea. That, or do away with horizontal scrolling completely and display all the videos with multiple rows of videos per section with an optional (show more) toggle if necessary. The use of horizontal scrolling on desktop is debatable in general. The main point is to allow a user to view a list of categories then browse items in a specific category without breaking flow or changing pages. LBRY doesn't have enough content yet that it can't just display it all while still remaining easy to skim categories by scrolling vertically. Horizontal scrolling makes the most sense on mobile devices where there is less screen real estate. It may be better to avoid on the desktop when there isn't a large volume of content. Addendum: perhaps Netflix has discovered that making users horizontal scroll while displaying video details on the top half of the screen makes people spend more time considering what to watch and gives more time to sell a user on a show. The best way to test these hypotheses would be to implement at least 2 versions of scrolling and show them to a bunch of users, then survey them afterward.

kauffj commented

2017-06-30 23:20:50 +02:00

(Migrated from github.com)

I agree, Ben. But part of the reason horizontal scrolling is nice is that
it's easier and more flexible, in terms of display sizes and amounts of
content, even if it's not absolutely optimal.

I'd certainly be open to alternative display methods, but it'd need to work
for a wide variety of screen sizes and amounts of content we're featuring.

On Fri, Jun 30, 2017 at 3:16 PM, Ben Hohner notifications@github.com
wrote:

I imagine Netflix has done the most research on horizontal scrolling,
since it's basically their whole business model, so mimicking their desktop
implementation as closely as possible would be a good idea. That, or do
away with horizontal scrolling completely and display all the videos with
multiple rows of videos per section with and optional (show more) toggle if
necessary.
The use of horizontal scrolling is debatable in general. The main point is
to allow a user to view a list of categories then browse items in a
specific category without breaking flow or changing pages. LBRY doesn't
have enough content yet that it can't just display it all while still
remaining easy to skim categories by scrolling vertically.
Horizontal scrolling makes the most sense on mobile devices where there is
less screen real estate. It may be better to avoid on the desktop when
there isn't a large volume of content.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/lbryio/lbry-app/issues/250#issuecomment-312351713,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAgZVhZSgWiu7m7r3xPPwmNN8Dxdavr8ks5sJUmYgaJpZM4N8Nr_
.

Jeremy Kauffman, Founder, LBRY http://lbry.io/
(267) 210-4292

Build LBRY: get https://lbry.io/get, follow https://twitter.com/lbryio,
like https://facebook.com/lbryio

I agree, Ben. But part of the reason horizontal scrolling is nice is that it's easier and more flexible, in terms of display sizes and amounts of content, even if it's not absolutely optimal. I'd certainly be open to alternative display methods, but it'd need to work for a wide variety of screen sizes and amounts of content we're featuring. On Fri, Jun 30, 2017 at 3:16 PM, Ben Hohner <notifications@github.com> wrote: > I imagine Netflix has done the most research on horizontal scrolling, > since it's basically their whole business model, so mimicking their desktop > implementation as closely as possible would be a good idea. That, or do > away with horizontal scrolling completely and display all the videos with > multiple rows of videos per section with and optional (show more) toggle if > necessary. > The use of horizontal scrolling is debatable in general. The main point is > to allow a user to view a list of categories then browse items in a > specific category without breaking flow or changing pages. LBRY doesn't > have enough content yet that it can't just display it all while still > remaining easy to skim categories by scrolling vertically. > Horizontal scrolling makes the most sense on mobile devices where there is > less screen real estate. It may be better to avoid on the desktop when > there isn't a large volume of content. > > — > You are receiving this because you were mentioned. > Reply to this email directly, view it on GitHub > <https://github.com/lbryio/lbry-app/issues/250#issuecomment-312351713>, > or mute the thread > <https://github.com/notifications/unsubscribe-auth/AAgZVhZSgWiu7m7r3xPPwmNN8Dxdavr8ks5sJUmYgaJpZM4N8Nr_> > . > -- Jeremy Kauffman, Founder, LBRY <http://lbry.io/> (267) 210-4292 Build LBRY: get <https://lbry.io/get>, follow <https://twitter.com/lbryio>, like <https://facebook.com/lbryio>

neb-b commented

2017-07-01 00:49:24 +02:00

(Migrated from github.com)

I have been trying to mimic Netflix as close as possible in the work I've done so far. I do agree that with the limited amount of content in the horizontal rows, it doesn't take much scrolling to get to the end of the row. However, I don't think that vertical content would be better, especially as the content size grows. If there is anything specific that Netflix is doing, or that another app is doing related to horizontal scrolling or "jumping" by clicking a left/right arrow, I would be happy to try and add that.

Should have a lot of time this weekend, so I'm hoping to get the open PR in a testable state soon.

kauffj commented

2017-07-29 20:17:49 +02:00

(Migrated from github.com)

In master now.