I am planning on using the great isotope plugin for displaying a list of contacts and then allowing them to be filtered. The issue I have is that it works great for a small data set but i'm not sure the best way of scaling it up for 1000+ pieces of data.
So far the ideas I had were:
I'm not sure if these will work well and I was hoping others had faced this situation and could give me some ideas.
The situation you describe is pretty common: how to give your user access to more data than they can possibly see in detail at once.
There are several ways to answer the question and the correct answer is completely subjective: it depends on what your user is trying to see or do with the contacts. Before you can really get a satisfactory solution, you need to know what the users are going to use the contacts for.
Just guessing (but you would know better than me!), I'd expect there are two things they're doing:
If you do filtering for all the solutions, then the Lookup goal is pretty much in the bag. The Explore goal is the one you want to design for:
I think if I were in your shoes, I'd introduce some clustering of the contacts. I doubt that the 1000+ contacts is much of a performance problem (in less you're talking a million!), so the 10000+ is really a user constraint: they just can't view 1000 contacts at once.
I'd suggest introducing some clustering, probably by the last name or last name and first name. Then present the user with a way to drill into one cluster but fold up all the other contacts so they're aren't immediately visible. Something in the ream of the accordian/rollodex paradigm. This gives your user the illusion that they are working with 'all the contacts'. Probably introduce a minimal number for each cluster so that if the cluster is sufficiently small you don't bother showing it (ie, why show a cluster for 2 or 3 or 5 contacts - just show the contacts). As filters are applied then, the clusters melt away.
Taking the idea of Read Through Cache, something like:
Loading area could be simply:
<html>
<body>
<!-- the page stuff -->
<div id="loader" style='display:none'>
<!-- all elements are loaded here -->
<div class="item">...</div>
</div>
</body>
</html>
This way you can load all elements step by step in the DOM, and you can display only what is needed.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With