-1

I have an array with length of 1.5k, each entry needs to be shown (set of DIV's per entry) but when I'm showing it all at once the browser hangs most of the time. I'm trying to figure out the most flexible, easiest and user friendly way to present this data. All my ideas were hard to make or not user friendly. What I've thought of so far:

  • show the DIV's that are in user's viewport (hard to make it work on all screen configurations)
  • group the entries by pages and switch them on scroll event (not user friendly - no visible scrollbar)
  • load more entries when "Load more" is pressed (not user friendly, user would have to click 100 times on the button if he'd like to get to the 1000th entry, and it would hang the browser anyway)

What is the best way to present this data? I already know that it has to be shown in parts, but I'm looking for the best way of doing it.

I need this for my file explorer application so I can't use something like an input with "search if user wrote >=3 chars".

closed as off-topic by Matt Obee, Benny Skogberg, greenforest, Bart Gijssens, JohnGB May 12 '14 at 10:59

This question appears to be off-topic. The users who voted to close gave this specific reason:

  • "Questions about Implementation are off-topic because this site is for User Experience design questions, not questions around how to implement these designs. Therefore, questions around the use of programs like Photoshop or languages such as CSS or JavaScript are off topic." – Matt Obee, Benny Skogberg, Bart Gijssens, JohnGB
If this question can be reworded to fit the rules in the help center, please edit the question.

  • 1
    While I think that this is a UX problem the question is asked in a way that it's easy to confuse with an implementation problem. Rather than focusing on the best solution using jQuery I think users of ux.stackexchange could better help if the problem was described more from a user point of view, i.e. what data you are presenting, who your audience is, what the use cases are and, connected to all this, what options you already looked at. – greenforest May 11 '14 at 19:22
3

It is impossible to answer this question without further details. Nearly all questions on this site that has 'best' in the title show lack of understanding of what UX design is all about.

If there would be best solutions to problems, someone would have long ago documented these and we'll all be out of job because UX design would be reduced to a mere searching process. UX design doesn't work this way - each problem is unique and has many variables that inform the design. For your question some of them would be:

  • What is the information in each entry?
  • Why users would even need to see such list?
  • How the content contribute to a completion of a task?
  • What sort of interaction is needed as part of the task model?
  • What's above or below the table?

Thus I can only give you pointers:

General

  • Scrolling is becoming one of the most dominant patterns on which designs are based. This is partly due to:
    • its popularity within tablets and mobile devices (a necessity due to small displays),
    • advances in technology, where nearly everyone has a vertical mean of scrolling on their mouse/trackpad.
  • More and more evidence is building showing that users are extremely comfortable with scrolling.
  • A particular research has shown that 70 entries is on average as far as users will go down scrolling with search results. Implicitly this means that 70 similar entries is about what's usable for searching behaviour.
  • What is important to consider that 1500 entries are hardly usable to anyone, although simple clustering can markedly change this (think of index pages in books). So what really matters here is what in these 1500 entries, and what users need to get out of them?

Infinite scrolling

This pattern is somewhat overused and being utilised in many places where it shouldn't.

The pattern lands itself nicely to exploration behaviour (ie, when users explore the data, rather then searching for something) particularly with information feeds. Thus it is very popular within social networks.

However, consider a single example to how terrible the pattern may be for searching behaviour - what if the user knows that the item they are after is at the bottom or far way down?

The fact that you have mentioned that there are 1500 entries, already suggests that this isn't the pattern for you. It would be if you said there could be (a theoretical) infinite number of entries.

Pagination

Amongst its advantages:

  • It allows bookmarking
  • It allows users guessing where an entry will be, and fairly quickly zoom on the requested item (so long some sorting is involved).
  • Relatively easy access to the entries at the end of the collection.
  • It can minimise the entries display space, which may be important if there are important controls above or below the list.

Amongst its disadvantages:

  • It could require quite a few clicks and guess work to find an item.
  • Not as quick as scrolling.
  • With big lists and small amount of items per page, the pagination controls themselves can introduce more usability issues.

In general, and based on current trends, pagination with around 50-100 results per page can be considered ideal; but even this could not be the case depending on other variables.

0

You should use continuous pagination(aka infinite scrolling)

The idea is that when the user scrolls to the end of the "page" you automatically load the next page. You can also load the next page before they reach the very end of the current page so the user won't have to wait(unless they are scrolling really fast).

Since you are using jQuery, check out this list of continuous pagination plugins for jQuery.

Some reading material - a relevant Coding Horror entry

  • I know about infinite scrolling but I didn't want to use it because the scrollbar updates when user scrolls the content, and it could be confusing. "The hell? I've scrolled and there's more content?" – user3561694 May 11 '14 at 21:50

Not the answer you're looking for? Browse other questions tagged or ask your own question.