I was on Digg the other day, scrolling, clicking next, scrolling some more, clicking next again, and then it hit me; with all the really great stuff we can do now with AJAX, why haven’t I seen anything to change this saw tooth process going through lists? This had me thinking and so I decided I wanted to try some things. I created a Digg-like mock site with a bunch of fake data. My only gotcha is that I want to assume the site knew how many items have been added since my last visit, say 150.
Our main area is a scrollable DIV filled with news (ok, it’s randomly generated letters and numbers just so I could quickly populate a database). There is a slim, timeline-like DIV below it that show us: How much is loaded (the green area), how much we can see (the red area), and what we have yet to see/load (the white area).
As we scroll down, notice the red area moving to show us where we are in the list of news items.
As we close in to the end of the list, our request is called to deliver more content. A yellow area now appears in the timeline to show us that something is loading.
The new request is complete and the new news items are added to our scrollable area. The timeline updates to reflect what’s load and where we are in them.
After developing that, I felt like the only thing I accomplished was duplicating what the scrollbar already does, so that’s not really any help. The only unique thing it does, is gives us a timeline-like measurement of how far we are into the unseen results. However, that information can easily be conveyed with a line of text much like: 30 of 150 items shown. It was overkill.
So, I thought maybe I should simplify it a bit, and only alert the user that something is loading, as such:
Here we have a regular looking page with a regular looking scrollbar.
As your scrolling nears the bottom of the DIV, a loading DIV appears to give the user visual feedback that additional content is loading.
Now that the additional content is loaded, it is placed in the scrolling DIV after the existing content (notice the scroll bar change) and the loading DIV hides.
Each new delivered segment is wrapped in a DIV as well, so if I wanted to keep the list from getting too long, I could just remove the older DIVs and re-fetch them if the user scrolls up.
I want to think about this some more, I’ve a few other ideas. I hope putting this out there will spark some really good ideas. What’s yours?
Here’s some ideas from Ajaxian.