Better labels, better libraries

Twelve items need no help. A hundred do: recipes, case studies, products, places. Once a grid is bigger than one screen, it becomes a library, and visitors find things in it through its labels: the names on the filter buttons, the counts beside them, the text in the search field.

Good labels cost nothing but thought. This guide shows four habits, on a small travel library you can try.

Try it

Name filters the way visitors think

A filter name is a promise. “Coast” promises the sea; “Category 3” promises nothing. Name filters after what visitors look for, in their words, not in the words of your filing system.

• Use nouns people say. “Coast”, “Mountains”, “Desert” rather than “Maritime”, “Alpine”, “Arid”.
• Keep names short. One or two words per button; a filter row is scanned, not read.
• Make them distinct. “Landscapes” next to “Nature” leaves people guessing which one holds the forest.
• Name the “All” button. “All places” tells people where they are and what they get back. Its text is yours to set.

Filter names come from the grid’s content: the categories and tags of its posts, or the names you give your own items under Filter(s) in each item’s Item Settings. Changing a category’s name changes the button.

Counts set expectations

A count beside each filter says, before the click, how much is behind it. “Desert 3” is a small collection; “Desert 48” is a section worth exploring. Counts also make empty or tiny filters visible, which is a hint to merge or drop them.

Turn them on per filter group: Show counts. A count is the size of the filter, the items on the page and those Load more would still bring; it does not change while other filters are picked.

Two questions, two groups

One long row of twelve filters mixes questions: where, when, how long, for whom. Split them. Each filter group is its own row of buttons, so each row answers one question. In the library above, the first group asks “Which landscape?”, the second “Best in which season?” (the names above the rows are each group’s Dropdown text, which this site’s CSS shows with the buttons).

How the groups work together is set for the whole grid:

• Visitors pick › Several lets people pick in more than one group.
• Show items that match › All shows only the items that match every pick: Coast and Summer gives the summer coast. Any shows every item that matches one of the picks, which widens the result instead.

Give the second group no “All” button of its own (its “All” button on Hide): one “All places” that clears everything is clearer than an “All” in every row.

Two groups are plenty for most libraries. Three is the most a visitor will use; beyond that, the search does the work better.

A search that finds

Some visitors know exactly what they want and type it. The search field should invite that and then deliver.

• Write a useful placeholder. “Search 12 places” says what is searched and how much there is. “Search…” says nothing.
• Write the words people search for into the items. The search looks in the items’ titles and texts. If people search for “boats”, the harbour’s description should say boats, not only “fishing vessels”.
• Search more than the titles. For a grid of posts, Extended search in Global Settings also finds categories, tags and custom fields.

In the library above, the search starts when you press Enter or the search button, or leave the field, and × clears it. A new search starts from all the items; pick a filter afterwards to narrow its results, such as “stone” in the countryside only. Screen readers hear how many items match.

When nothing matches

Every library has searches that find nothing. Say so plainly, and give a way back: the message for an empty result is yours to write (No matching items in Global Settings › Content). “Nothing matches these filters. Try fewer, or All places.” helps more than an empty space. On the new front end of Essential Grid 4.0 the message shows in the grid and is announced to screen readers.

Where you set it

The filter groups are on the grid editor’s Navigation page, in the row Filters, each under its own head (Filter – 1, Filter – 2 …). Each group has its “All” button (Show or Hide) and “All” button text, its Filter style (Buttons or a Dropdown), Show counts, Sort A–Z and, in Filters in this group, the filters it offers: tick the ones of this group and drag them into your order. The + below the groups adds a group; place each group’s control, Filter 1, Filter 2, above the grid in Where the controls sit.

The search field’s text is in the row Search: Placeholder. Place the Search control in a zone like the filters.

Extended search is in Global Settings › Search, under What search finds. It counts for every grid of the site.

Good to know

• Sort A–Z puts a group’s filters in alphabetical order; otherwise they keep the order you gave them. For a short list, put the most used filter first instead.
• On a phone, many buttons wrap into several lines: the library above lets each group scroll sideways, and Phones: dropdown turns the filters into one menu (Small screens, strong grids).
• How the grid changes when a filter is picked is the change effect: Make changing layouts feel natural.

Read on

• In the manual: Filters, sorting and search, Custom grids, Global Settings
• The guide before: Make changing layouts feel natural
• The feature: Filters, sorting and search