Increasing User Control with Sort and Filter using List.js
In this tutorial, I will use the plugin to create a list of items (using the
<a> tag), count them (with jQuery), then make the list sortable and add some dynamic filters.
Do lists with sort and filter improve user experience?
Lists provide a convienient way to consume a large amount of (text-heavy) content. They are great for scanning and finding important information, as the user flow runs in a single vertical direction, and they generally take up less space than a grid so they work on smaller displays.
Also, just about every app contains some form of list, so the user behaviour is established and consistent.
“The time it takes to make a decision increases with the number and complexity of choices.”
Laws of UX: #4 Hick’s Law
But, according to Hick’s Law, having many options increases the time taken to make decisions.
By using filter logic on a list users can reduce the amount of items they see. Sorting empowers users to order items in a way that meets their interests and needs. When implemented properly, filters and sorting will increase the likeliness of the user finding what they are looking for in a list.
For further reading, check out the these UX best practices for implementing filter and sort.
Initializing the List
Before you start, download and reference the following scripts:
Then, we need to build our HTML template for the list and add some simple styling.
- In this example we will compile a list of
.listelement must be used to contain the items.
.list__itemin the list, each item will have an
.headercontains an empty
span.countelement, we will populate this later with the number of items in the list.
Here we set a few basic variables, such as color and font. As well as the global styles for our list container.
I have used flexbox to quickly position the
.count at the top right of the header.
List Item Styles
Of course you can style your list however you like, for simplicity, I have applied a simple ‘card’ effect to each item, grouping the artist and date below the album title. Each item is also a link so I have added a simple shadow hover effect.
Create the List
- To populate, filter and sort the list we need to specify the
valueNamesin the list options.
- I have used album, artist and date - make sure these values correspond to the element classes used in the HTML item above.
- Adding more items to the list can be done with an array of
- Each item should include album, artist, date.
- This array can be repeated indefinately.
- Finally, we can run the list, passing in the options and values above.
- I want my list to automatically sort on page load, so I have set the list to sort by album name in accending order too.
Check out the List.js documentation for more details on how to initialize the list.
Add the Sort Controls
List.js makes it super easy to sort our list, we have already set our list to sort by album name on load, but we can also create some controls that will dynamically sort the list when clicked by the user.
#albumsin this example).
- Each button should have the
.sortclass and a
data-sortattribute that matches the
- Clicking the sort button will automatically add the
.descclasses respectively, so we can add some styles to indicate when the sort button has been triggered.
- Note, I have used Material Icons here to display the sort-direction arrow at the end of the button.
Add the Filter Buttons
Unlike sort, filters require a little more effort to initiate effectively. The logic I wanto to create here is as follows:
- Filter button will filter the list on click
- A filter will only be applied to a single list value (e.g. album, artist or date)
- Only one filter can be applied at a time
- The active filter should be highlighted
- All filters can be cleared
To implement this, first we need to build out the HTML for our group of filters and style it.
- Styling is attributed to the
data-filterattribute are used to control the logic.
The filter logic is controled by some simple jQuery. I decided that I only wanted to let users filter by date.
- When the filter is clicked the script will reference the
data-filtervalue, checking to see if any items in the list return a
- The results are returned, and an
.activeclass is applied to the filter button.
Return the Number of List Items
Lastly, I want to show users how many items are in the list. THe HTML and styling for this is already included in our header.
- A simple script can be used to append the size of the list to the
- Using the List.js
filterCompletefunction means we can also return the number of items in the list after it has been filtered
Putting all the code togther we can see our generated list of albums! You can get the full code on Codepen