User Experience Problem - Continuous Scroll aka. Lazy Loading and Dynamic Data
Continuous Scroll is a great solution for those who are looking for alternatives for the standard pagination. Now sometimes, one may come across a question - "Will implementing Continuous Scroll be helpful when the data is huge & dynamic?"
The straightforward answer is NO! for certain cases.
Continuous Scroll with Lazyloading is good. But for certain cases, it is advisable to implement some add-on measures or use the Pagination pattern.
Let's consider an easy example. You are the network admin of a big enterprise whose 1000 employees have individual laptops. Imagine you are looking at a web user interface which shows the status of all active Laptops at any point of time. The whole UI gets refreshed every 5 mins. This means once is 5 mins, each record will refresh with a new value.
Assume you are looking at 563-rd information, which shows IP 192.168.5.22 is online and active. It also belongs to the user called JOHN DOE and it is running some services like Apache, Tomcat etc. This information has a valid lifetime of 5mins only. On the 6th min, this information may go invalid (if the user plugs out of the network / shuts off the laptop) or it remains valid until the next refresh cycle or some part of the information may change.
This is a intense TIME BOUND situation. What happens do if the UI refreshes when you are checking out the 563rd information?
By default, the browser will populate the first few sets of information and wait for you to scroll down. This means - 563rd information is a dozen scrolls away. Scrolling down is a big exercise. 9/10 users will get frustrated.
REMEMBER THE ANCHOR - A trick which can be implemented with the help of some front-end JavaScript coding. For each information assign a named Anchor. Write a code in JS such that the anchor which is close to the top of the page is remembered, and passed on as a parameter in the URL when refreshing.
REFRESH VIEWPORT INFORMATION ONLY - Using Ajax, you can update the information that is currently visible to the user in the viewport. Again this can use Anchors. When the user scrolls up or down, populate the new values dynamically. This requires some clever coding.
ASK THE USER - Alert the user that the page is refreshing. This is not a very useful way. It just alerts the users that a refresh is about to happen. Options can be offered to skip or postpone the refresh.
STORING THE HISTORY - A Timeline approach where the data from last 3 or N number of refresh is stored. The user can browse through the history to refer the previous value and current value as needed. This is memory intensive.
Are there any other solutions?
May be. But I am not aware of any good practices yet. But generally dynamic data and continuous scroll don't go well with each practically.
The straightforward answer is NO! for certain cases.
Continuous Scroll with Lazyloading is good. But for certain cases, it is advisable to implement some add-on measures or use the Pagination pattern.
Let's consider an easy example. You are the network admin of a big enterprise whose 1000 employees have individual laptops. Imagine you are looking at a web user interface which shows the status of all active Laptops at any point of time. The whole UI gets refreshed every 5 mins. This means once is 5 mins, each record will refresh with a new value.
Assume you are looking at 563-rd information, which shows IP 192.168.5.22 is online and active. It also belongs to the user called JOHN DOE and it is running some services like Apache, Tomcat etc. This information has a valid lifetime of 5mins only. On the 6th min, this information may go invalid (if the user plugs out of the network / shuts off the laptop) or it remains valid until the next refresh cycle or some part of the information may change.
This is a intense TIME BOUND situation. What happens do if the UI refreshes when you are checking out the 563rd information?
By default, the browser will populate the first few sets of information and wait for you to scroll down. This means - 563rd information is a dozen scrolls away. Scrolling down is a big exercise. 9/10 users will get frustrated.
I don't have a choice! I have to use Continous Scroll. But how to avoid this whole UX issue?
Here are some add-on measures that could help solve this UX problemREMEMBER THE ANCHOR - A trick which can be implemented with the help of some front-end JavaScript coding. For each information assign a named Anchor. Write a code in JS such that the anchor which is close to the top of the page is remembered, and passed on as a parameter in the URL when refreshing.
REFRESH VIEWPORT INFORMATION ONLY - Using Ajax, you can update the information that is currently visible to the user in the viewport. Again this can use Anchors. When the user scrolls up or down, populate the new values dynamically. This requires some clever coding.
ASK THE USER - Alert the user that the page is refreshing. This is not a very useful way. It just alerts the users that a refresh is about to happen. Options can be offered to skip or postpone the refresh.
STORING THE HISTORY - A Timeline approach where the data from last 3 or N number of refresh is stored. The user can browse through the history to refer the previous value and current value as needed. This is memory intensive.
Are there any other solutions?
May be. But I am not aware of any good practices yet. But generally dynamic data and continuous scroll don't go well with each practically.
Comments