Repository
https://github.com/esteemapp/esteem-surfer
Components
The suggestion is particularly for the 'editor' while creating a post.
Problem statement
eSteem provides a convenient way to display the number of words we write for a post, if someone want to write atleast 500 words in post then they can easy track how much they have written but what if someone want to write a story which doesn't take more than 4 mins to read ?
Usecase:
If an author want to publish a series of stories(weekly) but want to keep it optimal reading time for the readers, so that the time taken to read is not too short nor longer, then if we have an indicator while creating post then the author will draft the story accordingly.
Proposal Description
The proposal here is to display an approximate time taken to read the post in UI, while creating the post.
Currently eSteem app displays number of words in the post, the proposal is to show 'time to read' indicator next to it, something like '4 min read' or '2 min read'.
How do we calculate reading time ?
Since we know the number of words written it is easy to calculate approximate time to read based on the following formula.
reading time = round(total words/reading speed)
According to research studies, average reading speed of humans is 200 to 250 wpm(words per minute). It varies for different languages but let us consider for English now. We can safely assume 200 wpm even if the user is distracted with images/ads.
Sounds simple calculation ? No, its not. Words alone won't decide the reading time since the user can insert an image or video to the post so we need to consider the images too. We can ignore the video since it doesn't count as 'reading' and we can't be sure every user will watch the video.
So for our calculation we need to consider the words, images and other HTML elements.
Available solutions
Based on the above formula and other metrics like avg wpm(reading speed), avg image reading time we can easily calculate the approximate reading time.
The naive implementation could be a simple function(do not consider this for prod).
function approxReadingTime(postLength) {
const wordsPerMinute = 200; // It can be 200 to 250
const noOfWords = postLength.split(/\s/g).length;
const minutes = noOfWords / wordsPerMinute;
const readTime = Math.ceil(minutes);
return `${readTime} min read`;
}
The above function is just to illustrate the example based on number of words, it doesn't consider the images or other factors(avg wpm for foreign languages).
There are many npm libraries available to calculate reading time, I found read-time-estimate to be appropriate, since it considers images, languages(Chinese, Korean etc) along with words.
Mockups / Examples
Here is a sample mockup to illustrate where we can display the read time.
Currently, it just shows the total number of words in the post.
With the proposed changes, we can see the words as well the estimated approx time to read the article/post.
Benefits
- Authors will get to know how long will it take for the readers to read their post, along with the number of words(already available in eSteem surfer app).
- Convenient for authors who do not want to bore their readers with lengthy posts.
- Good for story writers who want to post short '2 min' stories.
- This functionality can be extended for displaying in the posts, and also in the post summary(along with details of upvotes, no of comments etc)