What would your opinion be of a "reading position" indicator on DEV?

We have this open PR and I'd love to hear opinions on the value of a feature like this:

Reading position indicator #1626

sabatesduran posted on Jan 22, 2019

Is your feature request related to a problem? This is not a problem but I find nice that you have this bar that tells you the amount of scroll left until the end of the article.

Describe the solution you'd like My solution is to add a progress bar inside the #top-bar in nav and depending in the current position of the scroll it will change the percentage of this progress bar. The idea will be also that the bar color is the same as the user profile color, in my case dark green.

How to see an example? (GIF at the bottom) I created this code snippet that you can add in the Chrome Dev Tools > Sources > Snippets, and execute it with Ctrl+Enter (at least in Linux), be aware that you need to be in a post/article page for this to work.

const addProgressBarCSS = () => {
  let css = document.createElement('style');
  css.type = 'text/css';
  css.innerHTML = `
    progress::-webkit-progress-bar {
      background-color: transparent;
    }

    progress::-webkit-progress-value {
      background-color: #0D4D4B;
    }

    progress::-moz-progress-bar {
      background-color: #0D4D4B;
    }
  `;
  document.querySelector("head").appendChild(css);
}

addProgressBarCSS()

let topBar = document.querySelector("#top-bar")
let articleElement = document.querySelector("article");

let readingBarElement = document.createElement("progress");
readingBarElement.id = "reading-bar";
readingBarElement.setAttribute("style", `
    width: 100%;
    position: absolute;
    height: 5px;
    top: 49px;
    bottom: 20px;
    left: 0;
    right: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: none;
    background-color: transparent;
    color: #0D4D4B;
`);
readingBarElement.setAttribute("value", pageYOffset);
readingBarElement.setAttribute("max", articleElement.getBoundingClientRect().height);

topBar.appendChild(readingBarElement);

window.addEventListener('scroll', () => {
    let currentScrollPosition = pageYOffset;
    let readingBar = document.querySelector("#reading-bar");
    let article = document.querySelector("article");
    let articlePositions = article.getBoundingClientRect();
    let start = articlePositions.y;
    let end = articlePositions.height;

    if (currentScrollPosition >= end) {
        readingBar.value = end;
    } else if (currentScrollPosition > start) {
        readingBar.value = currentScrollPosition;
    } else {
        readingBar.value = 0;
    }
});

Screenshot andd GIF explanation Gif link

View on GitHub

This is the example:

My only technical concern here would be ensuring it doesn't add jankiness to the scrolling behavior, but otherwise this is more of a UX discussion.

Feel free to weigh in.

Comments

[Alexandre Plennevaux]

for me: not needed. I'd rather look for ways to declutter the dev.to interface, than add more onto it.

[Chris Achard]

I just use the browser scrollbar for that; though I guess that can be a bit deceiving if there are a lot of comments/recommended posts at the bottom.

[Jorge González]

I don't thinks is necessary, for me at least.

[Casey Brooks]

I usually find them unnecessary at best, and distracting at worst. Having the "reading time" listed at the top of the article here is enough to give me a sense of how long the article is. But some people really like having them, so maybe there could be a setting for users to turn it on/off per their personal preferences?

I think the reason I don't care for a generic progress bar is that it doesn't really give me meaningful information about my reading progress. I might be halfway through the text of an article, but how much of the remaining article is code snippets, interactive examples, videos, prose, conclusion, etc? The actual progress of me getting through the article may be massively skewed by things that aren't raw text, and so it tends to feel quite arbitrary, generally-speaking.

A better measure of progress might be to enumerate the Headers in the article content, and highlight progress by which headers I've passed. A good example of this is the right-side menu of the Android docs. Seeing that I've got 2 content sections, an example, and a conclusion left until I finish the article is much more meaningful than some arbitrary measure of text. In addition, it allows me to skip directly to a specific section on the page.

[Ryan Furrer]

I think this is a great way to do it as well is what I was going to recommend. On longer posts I find myself looking for some sort of indicator of where I am and this would be perfect.

[Dian Fay]

Tables of contents would be good, but depend on authors getting their headings in order.

What about using a round "pie chart" indicator on the left sidebar, under the "bookmark" button? I know I've seen this sort of thing before but can't recall exactly where. I think that'd be less obtrusive than the bar across the top.

[Tyler V.]

I could see this being implemented with/near the ❤️/🦄/🔖 icons

[Areahints]

how did you get those icons to show up? I need the sauce

[Tyler V.]

On Windows, the emoji keyboard (win + ;)

[Richard Deming II]

I personally enjoy these indicators, but feel they are only useful for longer articles/docs. Most posts I find on this site are relatively short.

[Flavien Rebattet]

Yes it can help to differentiate post length and (post + comment) length (scrollbar)

[Dan Silcox]

Not necessary IMHO, unless it’s in conjunction with an audio screen reader - this comes in super useful in, for example, my bible app which I use every day - I find it really useful to be able to read along while the audio plays.

[Amara Graham]

I usually scroll up and down to see the scrollbar as an indicator, but I only do this in longer tutorials. Usually the reading time calculation at the top is enough for me.

I share your technical concern though, but if it can be added quietly and remain unobtrusive I wouldn't mind its existence.

[Charles Landau]

I don't think this should be turned on by default. Hear me out:

An example of this feature really working is spaCy, in my opinion. spaCy is displacing NLTK to some extent, so compare their website: NLTK

For spaCy.io all the design choices in their website hint at their modernity. It feels like a subtle way of doing the bit from the old spice commercial

That works for spaCy to help convince you: "we are the new hot stuff. We do the sexy. Look how slick our site is. It has all the bells and whistles."

dev.to needs none of that. When you first come here it feels busy but uncluttered. It has everything you want a modern blog platform to have. It feels like it's for devs.

"Busy but uncluttered" is hard to do. I feel like adding this feature would unnecessarily risk that asset.

Disclaimer: I'm no design expert.

[Theo]

👌🏻

[Jesper Høy]

I know that a number of big sites do this now, but I don't think that having an indicator that goes in a different direction that the scrolling (horizontal vs vertical) is all that intuitive.

Is there even consensus as to what this type of indicator means?

For example, anything developed with Quasar Framework will by default show the same thing to indicate the progress of background Ajax request...

Perhaps this is a job better left to the scroll bar?