Expandable topic progress bar


(Jeff Atwood) #1

The current progress bar has two clickable areas

If you click or tap on the left, you go to the top. If you click or tap on the right, you go to the bottom.

I propose we make this behavior a little more discoverable and flexible, by making a panel appear above the progress bar when you click on it:

The three buttons (there might be more here later, I have some ideas, but let’s keep it simple for now) are:

  • big giant “go top” button at the top
  • big giant “go bottom” button at the bottom
  • smaller “go to specific post number” input field in the middle, with “go” button.

This should solve a few problems for us.

  1. Gives people a visible UI “navigate to arbitrary post in the stream” function, other than editing the URL address.

  2. Makes the “what does this do?” of this UI widget clearer and less obscure.

  3. Bigger click and tap targets for touch, as the whole bar is a click target now, rather than two half-size targets, and the go to top and bottom buttons are larger.

Downside is, moving to top and bottom become two tap/click actions instead of one but I think the tradeoff is worth it.

Also @eviltrout we can drop the little arrow glyphs on the progress bar itself (as they will be on the buttons in the expansion), so this becomes cleaner! Sweet!

Natural breakpoints or "chapters" for long topics?
(Sam Saffron) #2

I am fine with this, but think we need to make it clear it is expandable, perhaps add a hint like ^ or something on top of the page number thing, in a subtle bar.

@awesomerobot do you have any ideas here?

Otherwise discovering that it is clickable is kind of impossible.

(Jeff Atwood) #3

Agreed but how do you know a scroll bar on an existing gui window is “clickable?”

(Alexander) #4

I’d guess that most people don’t know that.

Anecdata: in Chrome on a Mac, the scroll…bar? pill? lozenge? disappears, at which point you can no longer click on it to scroll. When the scroll-lozenge is visible, hovering over it (before it disappears) makes the area expand slightly and look somewhat more like a normal scrollbar, at which point you can click to scroll.

(Jeff Atwood) #5

How about this?

It’s fa-angle-up.

(Dave McClure) #6

Isn’t there room to make the bar longer?

Why not just make it act more like a normal scroll bar?

On click down, show a popup with the post number corresponding to the relative position clicked.

On drag, update the number in the popup.

On up, go to that post.

Make the ends a little ‘sticky’ so it’s still easy to get to the first or last post.

Does this idea sound worthy of a mockup?

(Jeff Atwood) #7

I barely use “normal” scroll bars, and they are suppressed to the point of near non-existence in today’s OS X. That’s also not the role of the progress bar, it’s more like… an install meter, or dare I say, a progress bar. :wink: So saying “hey, make this behave more like a normal scroll bar” doesn’t really make sense to me.

There is some discussion of implementing a 100% JS scrollbar in addition to this, like slack.com does. Maybe that’s what you are thinking of? Try slack.com.

(Sam Saffron) #8

Note, one other advantage of a pure js scrollbar is that the browser will not try to reposition the scrollbar after refresh. We are constantly fighting with jitter due to this.

Natural breakpoints or "chapters" for long topics?
(Dave McClure) #9

Ignore that phrase then.

My point is that the user would be able to go to an approximate location in the topic stream by directly manipulating the big green thing that also shows them feedback about where they are in that stream.

Seems more natural and would take less clicks than a weird expando thingy. :slight_smile:

And I know people have asked for the ability to go to a particular post but wouldn’t it be just as good to be able to quickly get to an approximate location? Do they really need to go to post #113? Or can they scrub to post ~107 on the progress bar and then scroll down a few posts?

The progress bar is a nice sized hit target already. It doesn’t resemble apple’s disappearing scroll bar.

I will play more with slack in the mean time.

(Kris) #10

I think this functionality is really cooool… buuuut, I’ve been out of the loop (and in the South) for the past week, so coming back and seeing it for the first time was kind of confusing.

The single arrow in relation to the page location made me think clicking on it would bring me back to the top… and then there’s no button to go to the bottom… so I actually thought it was a bug and I couldn’t jump to the bottom. Only after testing to see the button was there and the icon wasn’t rendering did I realize how it worked. If I wasn’t looking for a problem I wouldn’t have realized there was even a way to jump to the bottom there…

There might be a better way to represent the functionality?

(Jeff Atwood) #11

Stop getting out of the loop! Get back in the loop, man!

(Jeff Atwood) #12