Make changing layouts feel natural

A filter is a question: “show me only the gardens.” The grid answers by changing in front of the visitor: some items leave, the others move to new places. Done well, the visitor sees what happened and keeps their bearings. Done badly, the grid jumps, everything blinks at once, and they have to look for what they had just seen.

Four things make the difference: the filters say what they will give, they stay where they are, the change is short and calm, and the result is said out loud.

Try it

Counts tell people what they will get

“Gardens 3” says, before the click, how much a filter will show. It also says that a filter is not empty, and how big the collection is. Counts cost one switch: Show counts in the filter group’s settings.

Counts help most when the numbers differ. Three photos in one subject and forty in another is useful to know; twelve filters that all say “4” are noise, and then you can leave them out.

In Essential Grid a count is the number of items in that filter, the ones on the page and the ones Load more would still bring. It does not change while other filters are picked, so with several filter groups it says how big each filter is, not what a combination leaves.

Filters stay where they are

A filter row is a control, and controls should not move. Keep the row above the grid, in one line where it fits, and keep the same order every time. When a visitor picks a filter and the buttons jump, they lose the button they were about to press next.

• One filter at a time is easiest to follow: Visitors pick › One filter. The preset Buttons · one at a time sets it.
• Several filters suit a library where people narrow down step by step: Visitors pick › Several, and Show items that match › Any or All. The preset Buttons with counts · several sets several filters, items that match any of them, and the counts.
• “All” first. The “All” button brings everything back. Its text is yours: “All photos” says more than “All”. (More on names in Better labels, better libraries.)

On a phone a long row of buttons wraps into several lines. Phones: dropdown turns them into one menu below a width you choose (Small screens, strong grids).

A change effect that explains, not decorates

When the items change, the change effect plays. It has one job: to show where things went. The items that stay move from their old place to the new one; the others go, and new ones come in. A visitor who follows one photo across the grid knows what happened.

Change effect	What the items do	Good for
Glide & scale	The items glide to their new places; the ones that come and go scale a little.	Most grids: a new grid starts with it
Glide	The items glide to their new places; the ones that come and go fade.	Text cards, where scaling feels busy
Spring glide	The items glide on a soft spring; the new ones rise in.	Playful grids
Glide & blur	The items glide; the ones that come and go blur.	Picture walls, sparingly
Crossfade	The grid fades from the old items to the new ones; nothing travels.	Results that share few items with the last ones

Keep it short. The five bring their own timing: each change is over within about 0.6 seconds, long enough to see, short enough that nobody waits. The grid above keeps a classic effect, Fade at 400 ms with a small delay between the items, so you can see what the classic timing settings do: there a change takes 0.43 to 0.88 seconds, longer the more photos move, because each one starts a little after the one before. With Glide & scale the same four filter changes took 0.46 to 0.61 seconds in our measurements (Chromium and WebKit, desktop and phone width). One second, the classic effects’ starting value, is a long time to wait for a photo you asked for; with a classic effect, try 300 to 500 ms.

Visitors who ask their system for less motion (reduced motion) get no travel on the new front end of Essential Grid 4.0: a quarter-second fade from the old result to the new one.

Say the result out loud

Not everyone sees the grid change. On the new front end of Essential Grid 4.0 the filter buttons are real buttons that say whether they are pressed, and the result is announced to screen readers: “Items shown: 3”, or the message that nothing matches. A keyboard user whose focused card was filtered away lands on the chosen filter, not on the top of the page.

Your part is the words: a filter named like the thing it shows, and a short message for an empty result (No matching items in Global Settings › Content).

Where you set it

Everything is on the grid editor’s Navigation page. Its presets at the top start with the navigation styles, then two menus: Placement and Filters. The menu Filters has Buttons · one at a time, Buttons with counts · several and Dropdown, which set the filters’ style and behaviour in one click; once you change a setting it says Custom and names the closest preset.

The row Filters holds the rest. Its first part, How filters behave, is for the whole grid: Visitors pick (One filter or Several) and, with several, Show items that match (Any or All). Each filter group below it has Show counts, its “All” button text and the filters it offers.

The change effect has its own section, Change effect, with the five as tiles. A grid that keeps a classic change effect, as the grid above keeps Fade, shows it as one more tile, Classic · Fade, with its Speed, Delay and Stagger by (Items, Columns or Rows); the five have no such settings. Once you pick one of the five, the classic tile is gone (Undo brings it back).

The same change effect plays when visitors sort the grid or turn a page.

Good to know

• Filter buttons come from the categories and tags of the grid’s posts, or from the filter names you give your own items (Filter(s) in an item’s Item Settings).
• Filter in address puts the chosen filter into the page’s address, so a link can open the grid already filtered.
• The lightbox can follow the filter: with Click › Lightbox › Pages through set to the filtered items, its arrows page only through what the visitor chose, as in the grid above.

Read on

• In the manual: Filters, sorting and search, Motion, Accessibility and reduced motion
• The guide after: Better labels, better libraries
• The feature: Filters, sorting and search