The problem with user comments and article read time

…and I'm not talking about falling down the deep dark hole of arguing with trolls.

When I arrive on a new page expecting to read an article I’ll do a quick scan to see what I’ve got on my hands, how dense is the text? Is the scrollbar handle large or small? How much time do I have to invest in this?

Medium does a great job of estimating read time and including this at the top of each article.

Read time is based on the average reading speed of an adult (roughly 275 WPM). We take the total word count of a post and translate it into minutes. Then, we add 12 seconds for each inline image. Boom, read time.

This morning I started reading a post The God login, (which wasn’t posted on medium and doesn't have a read time), the size of the scroll bar handle implied that it wasn't brief and my instinct was to give up before even giving it a chance.

As can be seen in the image below, it was a surprise to see that the post actually finished around half way down the page.

User Comments distort the perceived length of content on any given webpage.

We can do two obvious things to remedy this:

  1. Remove or hide the comments.
  2. Indicate the actual length of the content to the reader.

After reading The God login I was inspired to show the true length of the article. My idea was to work out the relative position of the end of the article (page height minus the comments) and reflect that back to the user by pointing to the articles end position on the scrollbar. Here’s my proof of concept solution with the code I hacked together:

And the code:

var pointerEl = “<style>.end-pointer {position: fixed;padding:0.5em;right: 1em;top: 0;background-color: #000;color: #fff;line-height: 1em;font-size: 1em;}.end-pointer:after {content: ‘’;display:inline-block;width: 0;right:-1em;top: 0;position:absolute;height: 0;border-style: solid;border-width: 1em 0 1em 1em;border-color: transparent transparent transparent #000;}</style><span class=’end-pointer’>end of article</span>”;
$(‘body’).append(pointerEl);
var postEndPos = $(‘#discourse-comments’).offset().top,
pageHeight = $(‘.wrap’).outerHeight() + $(‘.site-head’).outerHeight(),
endPointerPos = ((postEndPos / pageHeight) * 100) + ‘%’;
$(‘.end-pointer’).css(‘top’, endPointerPos);

Now I know that the js used will only work on that blog/post, but I feel as though it’s a decent solution; it’s strength is that it indicates to the user right off the bat that the native page length doesn’t reflect the article length.

Add in mediums read-time functionality alongside “end of article” and I think it could be quite useful.

A single golf clap? Or a long standing ovation?

By clapping more or less, you can signal to us which stories really stand out.