Highlighting lines in multi-page lists on the web

    On websites, lists and tables are often found, divided into many pages with the ability to navigate between them. Sometimes you can perform some operations on the lines of such lists. Here are some examples:
    • Web forum moderation: mass transfer, blocking, deleting topics.
    • Email client: mark selected letters as (un) read, add a tag, transfer to spam.
    • Scientific data processing system: highlight lines of interest in a subset, mark with color, as worthy of attention.
    In all of these cases, usability problems arise when there are more than one page. Is it possible to select all the lines of the list, and not just the current page? And all without one? Correct invert selection? Select all the lines from the 1245th to the end, despite the fact that on one page there are only 100 lines, and there are 5000 lines in the list?

    I came up with a simple thing that allows you to solve all these problems. It is implemented in one commercial web application and has proven itself. I have not seen a more convenient solution, therefore I am presenting it to the public for trial.

    To start, a couple of existing solutions. Here is GMail (using the spam folder as an example):

    You can select the current page, and GMail is twisted off, showing the inscription “select all chains”:

    Now, if I uncheck one box, what will be selected, 2735 messages or only 24 on the current page? I’m not sure anymore, and it’s not written anywhere. In fact, 24 is obtained, that is, removing everything except one becomes a non-trivial task. If I unchecked and checked again, it was as if I had returned everything as it was, but in reality only the current page became highlighted, and they no longer offer me to highlight everything. The ability to invert the selection is not provided at all.

    The old phpBB is twisted differently:

    You can select only on the current page, but there is an action "delete everything except the selected", that is, the tasks of inverting the selection and applying the action to all lines except one are solved. However, an extra button is added to each action and intuitiveness is lost. If there are many actions, you can make the switch “perform an action for selected lines / for all lines except selected lines”, but selecting lines that you want to leave alone is somewhat awkward and incomprehensible.

    My solution looks like this:

    If the page is not the first, an additional checkmark “+ X entries on previous pages” appears above the list. If the page is not the last, a checkmark “+ Y entries on subsequent pages” appears below the list. There are separate buttons "select page" (without these two checkmarks) and "select all". If the list occupies one page, the “select page” button disappears.

    I see the following pluses:
    • Unlike GMail, it is always clear which particular lines are highlighted, including lines on other pages.
    • Removing and returning any checkmark brings the selection back to its previous state.
    • It’s easy and intuitive to select everything, deselect a couple of lines and apply the action to all lines except this pair. It is also easy to apply an action only to all lines of a given page except a few. There is no need for the “execute for all lines except the selected” buttons.
    • The “invert” button simply switches the state of all checkmarks and at the same time, it really inverts the selection in the entire list correctly.
    • You can perform actions on the lines “from the beginning of the list to the given” or “from this to the end of the list”, regardless of the location of this line. Highlighting such ranges is easy and intuitive with shift, capturing one of the new checkmarks. Of course, this range is also correctly inverted.
    • New checkmarks, along with the page switcher, additionally indicate whether this page is the first or last. This is convenient and reduces the number of erroneous actions.
    As always, there were some cons:
    • Additional implementation complexity. If ordinary checkmarks can refer to a unique line identifier, then installing new ones should either transmit the identifiers of all lines on other pages to the server, or the server should be able to restore which entries go on the following pages. If the list can be sorted and filtered in different ways, this also needs to be taken into account.
    • Difficulties may arise if the list could change during the work. Say, in the above example, a new letter arrived, and I checked the “+25 on previous pages” and clicked “delete”. Do I need to apply the action to the new letter too, that is, actually +26? This may depend on the semantics of the list. If not, then the server should be able to restore the list in the same form that it was at the time the page loaded. Store row order in session? If a user within the same session in different windows at different times opened a list? Issue a unique identifier and store all of these lists? In general, there are some difficulties.
    • It is incomprehensible to support such features as "select read letters." Apparently, this will still work within the current page, which is not very convenient.
    It was easier in our application, since once the created list could not change, any changes created a new copy. Therefore, when the list action was performed, the current sorting and filtering parameters were transferred, and the server could accurately restore the order of the lines. We did not have the last problem either.

    I would be glad if someone comes in handy. If anyone saw something like this or better, please write in the comments.

    Also popular now: