Improvements to the translation interface’s pagination

Pagination is essential for web applications to provide faster page load times when displaying large data sets. However, classic pagination (using “previous page” - “next page” links) is a poor solution to remediate this technical limitation: it requires the user to click a button to request the next page, and then wait until the page loads. It feels awkward, especially when it makes the user wait for the page to load to pursue her work.

To palliate this inconvenience, Web Translate It’s translation interface use “infinite scrolling”. It is a pagination technique to serve users the next pages without needing to click on a pagination link: the more you scroll down, the more content magically streams in at the bottom of the page.

This is the best kind of pagination: it allows translators to focus on translating instead of focusing on manipulating a translation tool.

Despite this obvious advantage, this technique also has one major inconvenience: it is impossible to restore a position in the list, since the user doesn’t know where she is in the list. This makes sharing a link in the translation interface with a collaborator pretty difficult.

Endless scroll with stateful position

Thankfully technology improve and modern web browser such as Google Chrome, Firefox 4 or Safari 5 have implemented the new HTML5 history API, which allows websites to update the current URL without reloading a page. The translation interface now use this technique on available browsers to dynamically update the URL when you select a string in the interface. This way, you can link and refer to a specific position in the list of strings.

Here’s a live example: https://webtranslateit.com/en/projects/406-Web-Translate-It/locales/en..fr/strings?current_id=140420

Scrolling upwards

Since we’re now able to recover any position in the translation interface, I also added the ability to scroll up to load strings positioned upwards.

So wherever you are in the list, you can scroll up and down, just like if the list of strings wasn’t paginated at all.

I hope you will find this improvement useful. Thank you for using Web Translate It.