Vertical Mobile Scroll Bar Post / Date Text

The awesome new change that @sam committed for the mobile scroll bar works great.

https://github.com/discourse/discourse/commit/1bf0b2a5f44ec0c8d62fe62285f9cd20364cbcfb

I have found though that if you are a right-hander using the interface, you can’t see the text pertaining to the date or post number that you are trying to scroll to because your thumb/finger/hand covers it.

Perhaps those numbers could be underneath, or even floating somewhere else in that overlay?

1 Like

hmmm but the click target extends beyond the text, you can try grabbing a few pixels to the right of those numbers

totally open to tweaking this tough

2 Likes

Got it … that works.

On my iPhone 6S+ it works to about half way across that overlay, so that’s totally practical.

What if the slider indicator thing itself was a horizontal line going to about that point that the text floated on?

I mean, I have no idea about interface design - just didn’t think to slide beyond the vertical space itself!

It is a tricky problem, on mobile you tend to give tons of affordance for cases like this, but you are right that flipping may be a more intuitive design, issue though is that it would be very very ugly imo.

2 Likes

Totally agree - I think it’d look ridiculous.

Maybe a floating circle/square that sits to the right of the text.

I’m just shooting into the breeze.

Best way to make stuff move in the ux category is post screenshots of proposed designs :blush:

I’ll get to the drawing board!

1 Like

Still thinking about this - whatever it is will probably need to take the specific posts locator into account when considering anything.

Perhaps that existing rectangle with the post number in it could remain in that spot even after being pressed so that people can still type a post number in, but in between them in that space somewhere there could be a simple up/down indicator.

Now, it’s ugly and dodgy, but something like this where the post/date text moves slightly right so that lefties can use the existing scroll structure and righties can use another floating object (arrow/line/no idea) and both can see the number they’re scrolling to.

2 Likes

We need to add a “jump to specific post” option here @sam

2 Likes

A not entirely related thought here, but this timeline looks very odd IMO on mobile. The action items that are most common (go to top/bottom of the post) are quite small and not very obvious. Plus, this covers the whole screen which makes it impossible to scan the contents as you drag the timeline up/down. (I am thinking of trying to limit this to half the screen on the site i am running, see whether it makes sense.)

Anyway, sorry, going on a rant here. But I find this is worse than what was there before, especially since on mobile the title is not available as a way to go back to top of the post.

3 Likes

This is probably the thing that makes me find it difficult as well.

I do think that if the text was further away from the bar or there was some kind of other floating object to indicate that you should ‘touch this’ to scroll it’d be ok.

But, it kind of does feel a bit like a desktop function requiring a mouse pointer that has been brought to mobile at this point. I’m sure with some tweaking it’ll be great.

2 Likes

Making the title a link to the top is a very sound suggestion, will add that

4 Likes

We could also embiggen the font a bit for mobile, but I still worry about height on this thing…

… and we need a jump to post button.

2 Likes

Yeah bigger font and inability to see forum content when scrolling … is something I’m finding.

Could the whole thing be skinny, or even horizontal (unconventional).

Yeah, skinny was my thought as well. I did try it out on my Discourse site with some CSS changes, and skinny works for me.

Screenshot:

I also added icons to the up/down actions. The full CSS for this is below:

.timeline-container.timeline-fullscreen {
    left: auto;
    width: 140px;
    padding-top:0px;
    box-shadow: -1px 0px 3px 2px rgba(0,0,0,0.1);
}

.timeline-container.timeline-fullscreen h3 {
    font-size:15px;
}

.timeline-container .topic-timeline .start-date:before {
    content: '\f106';
    font-family:'FontAwesome';
    margin-right:6px;
    color:#454545;
    font-size:18px;
}

.timeline-container .topic-timeline .now-date:before {
    content: '\f107';
    font-family:'FontAwesome';
    margin-right:6px;
    color:#454545;
    font-size:16px;
}

.timeline-container .topic-timeline .start-date, 
.timeline-container .topic-timeline .now-date {
    font-size:13px;
}
6 Likes

What about making it horizontal instead?

  • Frees up a lot of screen real estate; user gets proper preview of the posts they’re skipping to
  • Ends the lefty/righty dilemma

Here’s an even more compact version. Would have to hide the date of currently viewed post when it gets too close to the Oldest or Most Recent timestamp though (or hide the oldest/recent instead):

Also added a hide-button to the top-right, because I think we ought to give the user a clear exit.

9 Likes

I like the narrow solution … perhaps an additional function to allow specific post jumping would be such that if the post number is clicked on above the indicator bar, it brings up the overlay that asked for a post to jump to.

That solves both issues with the new scroller in one compact area.

It could all still just be triggered by the existing long rectangle post indicator.

Actually, why is that so important? Do we have any usage data on this feature? My guess would be it’s hardly ever used, even on desktop. I’ve certainly never had a use for it.

On mobile I think it’ll be more in the way than anything. Doesn’t the interactive scroll bar pretty much make jump-to-post redundant?

1 Like

Unfortunately because of the way that scrolling with fingers works, you can move the scrollbar a tiny amount and on larger topics it will move the post number several hundred posts.

I think something where you can post the topic number in is a smart idea, as implemented in the previous iteration of this feature.

1 Like

99% of topics are composed of <100 posts. I also tested finger-scrolling on a 1000 post topic and the smallest amount of skipping I was able to do was ~3 topics at a time. Assuming I’d be skipping 30 at a time in a 10’000 post topic, I think that’s fine. It’s roughly equivalent to a “next page” on an older forum platform.

I’m fine with the jump-to-post feature on desktop, but on mobile I’m not too keen on adding an obscure click target for an obscure feature. I also question people’s ability to recollect specific post IDs. I’ve never once wanted to go to “post#47”. If I’m looking for a specific post, I’ll jump to the general date range that I know it was posted in and then start scanning for the right one from there.

OK, so all that argumentation aside, if we must have jump-to-post, I think the click target should be the gaps in between, like so:

  • It’s very easy to misclick this space and get disoriented (thankfully we have our custom Back button)
  • It’s a fairly pointless click target otherwise, because there’s no way you’re gonna know which post you’re actually jumping to by clicking some empty space.

If possible this click target should not be available at all if it’s smaller than a certain size, i.e. like at the bottom of this picture.