Have you ever tried to book a flight and found yourself overwhelmed by the endless dropdown menus? You're not alone. We've all been there, clicking through multiple options, often unsure of what to choose. Not to mention, their placement is often inconsistent across different sites, which makes it hard to get accustomed to a single UX design choice.

Enter <b>Human Readable Filters</b>. Put simply, they're here not to fully replace traditional filtering options, but to significantly simplify interaction and enhance the user experience. In other words, they allow you to <b>replace confusing dropdowns with simple and clear sentences</b> that you can adjust as easily as you speak.
<blockquote>Do people struggle to get used to your app? <a href="https://appsilon.com/ux-design-of-shiny-apps-7-steps-to-design-dashboards-people-love/" target="_blank" rel="noopener">Here are 7 steps to design R Shiny dashboards that people will love</a>.</blockquote>
<h3>Table of Contents</h3><ul>  <li><strong><a href="#problem">What's Wrong with Traditional Website Filters?</a></strong></li>  <li><strong><a href="#solution">Human Readable Filters - A Solution That Speaks to You in Your Language</a></strong></li>  <li><strong><a href="#benefits">More Advantages of Filters in a Natural Language</a></strong></li>  <li><strong><a href="#summary">Summing up Human Readable Filters</a></strong></li></ul>

<hr />

<h2 id="problem">What's Wrong with Traditional Website Filters?</h2>
Just to reiterate once more - Human Readable Filters aren't here to fully replace traditional filters. They are still valuable, but getting less so by the day.

<b>The reason?</b> We have a few:
<ul>  <li><b>Complexity: </b>The problem with traditional search filters is that they're often intricate and have numerous options and categories to choose from. As an end-user, you might find it challenging to find the information you need, especially if it's your first time visiting the website.</li>  <li><b>Placement: </b>The position of website filters depends on their quantity and variability, but you'll mostly find them positioned either on the sides or at the top of the screen. The problem with that is they consume a significant portion of the website's content. Designers and developers often address this by hiding filters behind buttons or in sliding panels, but this only complicates their accessibility and interaction. If you need to tweak the filters frequently, it's an even bigger issue!</li>  <li><b>Lack of consistency: </b>The problem with websites is that everyone thinks their UI/UX implementation is the best. It isn't. Traditional search filters often don't have a consistent or standardized appearance between applications and websites. For you as an end-user, this means an extra step in understanding where to find the filter parameters and how to use them.</li></ul>
In short, all of these 3 issues have a common denominator: <b>the time users invest in the search process</b>.

Everyone knows that the best user experience can be represented as the shortest route from point A to point B, as shown in the following image:

<img class="size-full wp-image-22738" src="https://webflow-prod-assets.s3.amazonaws.com/6525256482c9e9a06c7a9d3c%2F65e9e6837ec01bfbc1af9c63_849f83c6_Image-1-Suboptimal-top-and-optimal-bottom-user-experience-scaled.webp" alt="Image 1 - Suboptimal (top) and optimal (bottom) user experience" width="2560" height="1325" /> Image 1 - Suboptimal (top) and optimal (bottom) user experience

But still, most websites fail to implement this "straight line" user experience. Poorly designed filters represent a big portion of the top curvy line, so next, we'll explore what you can do about it.
<h2 id="solution">Human Readable Filters - A Solution That Speaks to You in Your Language</h2>
By now, you know the shortcomings of traditional filtering systems on websites, and this section will introduce you to <i>Filters 2.0</i>, or Human Readable Filters.

If you skim through Jacob Nielsen's <a href="https://www.nngroup.com/articles/ten-usability-heuristics/" target="_blank" rel="noopener noreferrer">10 Usability Heuristics for User Interface Design</a>, you'll find that the second principle tells us that the <b>system should "speak" to the user in their language</b>. That's the main idea behind Human Readable Filters.

In a conversational language, a "search query" would be a single sentence with a set of specific conditionals. Typically, this is a logical sequence arranged by priority. This single sentence should be sufficient to convey the user's position to the listener.

<b>So, what does this mean to you?</b> Put simply, you arrive at the idea of wrapping the query system into a single human-readable sentence, like the one below:

<img class="size-full wp-image-22740" src="https://webflow-prod-assets.s3.amazonaws.com/6525256482c9e9a06c7a9d3c%2F65e9e6833f16a980cf5d03e9_ab56359e_Image-2-Human-readable-filter-example-scaled.webp" alt="Image 2 - Human readable filter example" width="2560" height="321" /> Image 2 - Human readable filter example

Each blue and underlined piece of text is interactive and opens up a filter dialog when clicked (or pressed) on.

Let's dive into the anatomy to really drive the point home.
<h3>Anatomy of Human Readable Filters</h3>
Every Filter 2.0 starts with a <b>Call to action</b>. You can think of it as the beginning of the sentence that helps to form a query, similar to real-life conversations.

In the example below, the call to action is the free state at the beginning of the sentence:

<img class="size-full wp-image-22742" src="https://webflow-prod-assets.s3.amazonaws.com/6525256482c9e9a06c7a9d3c%2F65e9e684a25310f3344d60b6_962b8309_Image-3-Call-to-action-scaled.webp" alt="Image 3 - Call to action" width="2560" height="462" /> Image 3 - Call to action

Up next, we have one or more <b>Conditions</b>. These are 1:1 replicas of your familiar filters, just represented in a sentence. Clicking on each reveals a set of options every condition might have.

You can represent conditionals with a single select, multi-select, search bar (in a single or multi-select), date/time picker, range, counter, and so on:

<img class="size-full wp-image-22744" src="https://webflow-prod-assets.s3.amazonaws.com/6525256482c9e9a06c7a9d3c%2F65e9e684bd925799426a9598_4afb537e_Image-4-Condition-scaled.webp" alt="Image 4 - Condition" width="2560" height="599" /> Image 4 - Condition[/caption]

Then you have prepositions which aren't dynamic at all, but are used simply to link conditions. Think of the words such as <i>Any, Of, At, All, By, For, In, With, To, Since, Until</i>, and similar:

<img class="size-full wp-image-22746" src="https://webflow-prod-assets.s3.amazonaws.com/6525256482c9e9a06c7a9d3c%2F65e9e6856a5fdc930ab35ae2_383c55b1_Image-5-Preposition-scaled.webp" alt="Image 5 - Preposition" width="2560" height="761" /> Image 5 - Preposition[/caption]

These are the must-have components of Human Readable Filters. If you're wondering how they look in a <b>real-world example</b>, continue reading.
<h3>Human Readable Filters Example - Flight Aggregator</h3>
Imagine your typical flight aggregator page. You typically need to enter information such as from and to destination, departure date and time, return date and time, passenger class, and the number of people for which you want to buy a ticket.

In a traditional (Filter 1.0) world, that webpage system could look like this:

<img class="size-full wp-image-22748" src="https://webflow-prod-assets.s3.amazonaws.com/6525256482c9e9a06c7a9d3c%2F65e9e686447f2063fd1e6e73_751b21e0_Image-6-Flight-aggregator-example-without-human-readable-filters-scaled.webp" alt="Image 6 - Flight aggregator example without human readable filters" width="2560" height="702" /> Image 6 - Flight aggregator example without human readable filters

It looks fine on a desktop version of the site, but the mobile version might hide these filters behind a button or somewhere else on the page.

Human Readable Filters (Filters 2.0) exchange all of that for a <b>simple natural language text</b> that can be modified:

<img class="size-full wp-image-22750" src="https://webflow-prod-assets.s3.amazonaws.com/6525256482c9e9a06c7a9d3c%2F65e9e6866266aa46f4022b2d_e4611909_Image-7-Flight-aggregator-example-with-human-readable-filters-scaled.webp" alt="Image 7 - Flight aggregator example with human readable filters" width="2560" height="544" /> Image 7 - Flight aggregator example with human readable filters[/caption]

Here, you see everything we described in the previous section - call to action, conditions, and prepositions.

The first condition requires you to <b>specify who is flying</b>. You can select the number of passengers based on their age group, as shown below:

<img class="size-full wp-image-22752" src="https://webflow-prod-assets.s3.amazonaws.com/6525256482c9e9a06c7a9d3c%2F65e9e68748d812f53709a36b_7844c7e0_Image-8-Single-filter-example-1-scaled.webp" alt="Image 8 - Single filter example (1)" width="2560" height="1156" /> Image 8 - Single filter example (1)

Immediately after you select your option, the natural text of the condition will change to form a fluent and short sentence.

The preposition <i>to</i> connects us to the next filter which is a date/time picker. This one will <b>specify when are you flying</b>:

<img class="size-full wp-image-22754" src="https://webflow-prod-assets.s3.amazonaws.com/6525256482c9e9a06c7a9d3c%2F65e9e687dc84ffc94c0fb3fe_3fb28060_Image-9-Single-filter-example-2-scaled.webp" alt="Image 9 - Single filter example (2)" width="2560" height="988" /> Image 9 - Single filter example (2)[/caption]

After the following preposition, we arrive at the double single select with the search bar condition. This one will make you <b>specify where you are flying</b> in a simple and convenient way. Note that you might want to separate <i>From</i> and <i>To</i> into two filters, or you can leave them as is:

<img class="size-full wp-image-22756" src="https://webflow-prod-assets.s3.amazonaws.com/6525256482c9e9a06c7a9d3c%2F65e9e6886a5fdc930ab35d74_3e5094f9_Image-10-Single-filter-example-3-scaled.webp" alt="Image 10 - Single filter example (3)" width="2560" height="908" /> Image 10 - Single filter example (3)

Almost done! The second to last condition is the simplest one so far - you only need to <b>choose the class</b> for your flight:

<img class="size-full wp-image-22758" src="https://webflow-prod-assets.s3.amazonaws.com/6525256482c9e9a06c7a9d3c%2F65e9e689ee1dd57fbde940fc_fa97d228_Image-11-Single-filter-example-4-scaled.webp" alt="Image 11 - Single filter example (4)" width="2560" height="629" /> Image 11 - Single filter example (4)

The final condition lets you increase or decrease the amount of luggage you're taking with you, which is an additional and <b>optional filter</b>:

<img class="size-full wp-image-22760" src="https://webflow-prod-assets.s3.amazonaws.com/6525256482c9e9a06c7a9d3c%2F65e9e68929658c3a9ad5fb15_65929123_Image-12-Single-filter-example-5-scaled.webp" alt="Image 12 - Single filter example (5)" width="2560" height="508" /> Image 12 - Single filter example (5)

From here, you can either press the <b>green arrow</b> button to display the available flight options, or you can click on the <b>red circle</b> to reset the filters, and bring the sentence to its initial state.

Let's say you opt for the first option. The frontend will then communicate with the backend to fetch results based on your search criteria, and during this time you're shown a nice skeleton loading screen (which has nothing to do with Human Readable Filters):

<img class="size-full wp-image-22762" src="https://webflow-prod-assets.s3.amazonaws.com/6525256482c9e9a06c7a9d3c%2F65e9e68aa8460f13cd30efb7_d949790a_Image-13-Final-results-scaled.webp" alt="Image 13 - Final results" width="2560" height="1444" /> Image 13 - Final results

To conclude, <b>Human Readable Filters allow you to implement everything the traditional approach has to offer</b>, but with a nicer and more consistent user experience.
<h3>Remember This Before Using Human Readable Filters</h3>
If you need more practical examples, this video shows you how it's done on a real dataset:

<video width="100%" height="auto" src="https://wordpress.appsilon.com/wp-content/uploads/2024/01/Screen-Recording-2023-03-17-at-14.05.48.webm" loop="true" autoplay="true" controls="true"></video>

‍

To finish off this section, you need to remember that you <b>always must have your end user in mind</b>.

You should construct a sentence as long as it makes sense, or as long as it follows a natural structure. That's the entire purpose of this refined approach to filtering.

Also, remember that the key to successfully implementing Filters 2.0 in your webpage lies in a good understanding of your user. This will allow you to build a sentence structure that's easy for your target user to follow.
<h2 id="benefits">More Advantages of Filters in a Natural Language</h2>
You've seen what a huge milestone Filters 2.0 is when compared to traditional filtering systems - both in theory and through hands-on examples.

This section aims to provide a couple of more reasons why natural language in search results filtering is the way to go in 2024 and beyond:
<ul>  <li><b>Simplicity and Accessibility: </b>Natural language filters reduce interaction complexity and make the search process intuitive, accessible, and even fun to all kinds of users - even those who aren't tech-savvy.</li>  <li><b>Efficiency and Speed: </b>A single natural language string means the users can quickly express their preferences without the need to learn a multitude of complex filters, which in the end improves efficiency and reduces search time.</li>  <li><b>Flexibility and Variability: </b>The Filters 2.0 approach allows users to dynamically change the applied filters during query formulation. In return, this provides flexibility and extensive possibilities for combining conditions.</li>  <li><b>Increased Engagement: </b>Natural text is intuitive so it contributes to increased user engagement. It also encourages users to explore the data on their own and discover new opportunities.</li>  <li><b>Competitive Advantage: </b>If your organization is among the first to implement Filters 2.0, it will gain a competitive edge by being among the pioneers of simplifying and enhancing the search process.</li></ul>
Today's article was crammed with information and examples, but we hope it was easy enough to follow. Let's make a quick recap next.

<hr />

<h2 id="summary">Summing up Human Readable Filters</h2>
To sum things up - the entire point of Filters 2.0 isn't only to fix the problems we had, but also to set a stage for making websites and applications better for users, supercharging efficiency, and giving us a leg up against the competition.

That's why we'll share two interesting resources with you:
<ul>  <li><a href="https://connect.appsilon.com/NLQ/" target="_blank" rel="noopener">Human Readable Fitlers in Action</a> - A simple Shiny application (with code) that allows you to visualize the difference between traditional filters and Filters 2.0.</li>  <li><a href="https://github.com/Appsilon/natural_language_queries" target="_blank" rel="noopener">Appsilon Natural Language Queries GitHub Repo</a> - So you can download the source code and take it for a spin.</li></ul>
As a final note, Filters 2.0 isn't just about solving issues, but more generally about updating our whole vibe and making things awesome for the users, all while staying ahead in the game.

Make sure to try them out for yourself, and let us know what you think.
<blockquote>Did you find this helpful? <a href="https://appsilon.com/#contact" target="_blank" rel="noopener">Contact us today to explore how we can upgrade the user experience of your Shiny apps.</a></blockquote>

‍