"Reading time" for articles: improving the user experience

Intro

What is «reading time» and why is it needed?

«Reading time» — is a kind of label that indicates the estimated time required for a user to read an article. This information helps readers estimate how much time they will spend reading the material and decide whether they should continue reading now or postpone it for later.

This option is especially useful for blogs and news sites where users are often looking for short and accessible articles. For example, if a person is on a break at work, they can choose an article that can be read in 5 minutes instead of a longer article that requires more time.

User benefit and impact on behavioral factors

Adding reading time to your Joomla site can bring several advantages:

• Improving the user experience: users get a clear understanding of how long it will take them to read an article.
• Increase of trust: an accurate reading time indicator shows your respect for users and their time.
• Optimization of behavioral factors: a read time indicator can increase the time spent on the site, reduce bounce rates, and improve overall user engagement.

When a user sees that an article takes only 3-5 minutes to read, they are more likely to read it in full. This has a positive effect on SEO performance, as search engines take into account the time spent on the site and the number of complete articles read.

Ways to add reading time to a Joomla site

Independent implementation via code

Although it is theoretically possible to implement the function of displaying the read time through the code yourself, we will not do so in this case. This approach has several significant drawbacks:

• Difficulty and time: implementing such functionality requires deep knowledge of PHP and JavaScript. You will have to write code to calculate the number of words in an article, set the average reading speed, and format the result. This can take a significant amount of time and effort.
• Potential mistakes: your own code may contain errors that lead to incorrect calculation of the read time or problems with the stability of the site. Testing and fixing such errors can be a complex and time-consuming process.
• There is no need for: modern CMS systems, such as Joomla, offer ready-made extensions that can be easily installed and customized. These extensions have already been tested and optimized to work within the system, which ensures reliability and ease of use.

Implementing it yourself through code does not make sense, as it takes much longer and can be an impossible task for those who do not have deep programming knowledge.

Using ready-made extensions

It will be much faster and easier to use ready-made, free extensions, such as Estimated Reading Time from «Hepta Technologies» and the YOO CCC Reading Time element for the YOOtheme Pro builder by «COOLCAT creations», which automatically calculate and add reading time to your articles. This approach will allow you to focus on creating content rather than on the technical details of its implementation.

Installation and configuration Estimated Reading Time

Where to download the extension

Estimated Reading Time extension can be downloaded on the official website of the developer «Hepta Technologies» or through the Joomla extension manager. Make sure you download the latest version of the extension to avoid compatibility issues with your version of Joomla.

Step-by-step installation instructions

1. Download the extension: go to the «Hepta Technologies» website and download the latest version of the plugin. If you use the Joomla extension directory, you can find the plugin right there.

2. Install the extension: log in to the Joomla admin panel, go to the System > Extensions > Install extensions and install the downloaded file.
3. Configure the extension: after installation, go to the section System > Plugins and find the Content - Reading Time plugin. Activate it and select a category (or several) for which you do NOT want to display reading time.

4. Progress bar and additional settings: if you wish, you can display a progress bar — this is a dynamic, moving bar that will be located in the header (i.e. at the top of your site) and will act as a kind of indicator of how much text you have already read. In addition, if you are not satisfied with its style, you can write your own CSS code in the Advanced > Custom Style tab.

5. Check the result: go to the frontend of your site and check if the reading time is displayed correctly on your articles. If there are any problems, go back to the settings and fix them.

Integration of reading time into YOOtheme Pro

Overview of the YOO CCC Reading Time element

If you are using the YOOtheme Pro builder, you can apply the third-party YOO CCC Reading Time element to add reading time, developed by COOLCAT creations. Looking ahead, the key advantage of the element is that you can make the reading time deducted from any other elements of the constructor by using the CSS selector.

Install and configure an element

1. Download an element: go to the GitHub platform and download the Reading Time element for YOOtheme Pro. You can find it at this link.

2. Install the extension: log in to the Joomla admin panel, go to the System > Extensions > Install extensions and install the downloaded file. Then you need to turn on the plugin. Go to System > Plugins, use the filter or search, find the YOO CCC Reading Time plugin and turn it on.

3. Configure the element: open the YOOtheme Pro builder, select the desired template, and add the Reading Time element in the place you need.

4. Next, you need to go to the settings of the element that displays the article. In my case, this is the Text element, so I open it and go to Advanced > Classes and write textarticle.

5. Then I return to the елемент Reading Time and write a CSS Selector .textarticle (Note that there is a period here!).

And that's it. Now your website users can see how long it takes to read a particular article.

Conclusion

Adding reading time to your Joomla website can significantly improve the user experience and increase visitor engagement. You can choose between using ready-made extensions such as Estimated Reading Time by Hepta Technologies or integrating the YOO CCC Reading Time element by COOLCAT creations into the YOOtheme Pro builder.

Given the importance of reading time for user experience, this feature will be a valuable addition to your website. With it, your readers will be able to better plan their time, and you will gain an advantage over your competitors' sites by improving the UX/UI performance of your web resource.

Frequently asked questions

• How do I add text and an icon to the left of the reading time for the YOO CCC Reading Time element?

  Unfortunately, the element does not allow adding text or an icon. However, you can solve this problem: first, create a row in YOOtheme Pro and divide it into 2 columns. Then go to the row settings and for Column 1 > Phone Portrait set the option Auto,and for the Column 2 > Phone Portrait set the option Expand. Now add the Headline element to the left column and the Reading Time element to the right column. After you have written the words «Reading Time» in the Headline element, you can add a clock icon if you wish — just write this code before the word:<span class="el-image uk-icon uk-margin-small-right" uk-icon="icon: clock;"></span>

• Can the Estimated Reading Time plugin be integrated into YOOtheme Pro in any way?

  Yes, there is an effective way. By the way, this plugin is used on this site). So, you need to do the following: after installing and configuring the Estimated Reading Time plugin, you need to enter the YOOtheme Pro builder, open Templates and select Single Article. Then add the «HTML» element to the place where you want to see the indicator (for example, under the article title). Open the «HTML» element, go to Advanced > Dynamic Content and select Article. Next, go to the Content tab and select Events Before Display Content in the dynamics for Article.

• Can I install the YOO CCC Reading Time element if YOOtheme Pro is powered by WordPress?

  Yes, but you need to download another archive. Follow this link to find a version of the element that is developed specifically for WordPress.