GitHub Filter Syntax

Screenshots powered by

GetScreenshot Screenshot API

✋ What is it?

This is a solution found in GitHub that mixes fuzzy search with free text syntax for filtering/search. This solution is used in some of GitHub's contextual interfaces, mainly search functionality for issues and pull requests.

🤲 How does this interaction or solution work?

When users are searching for existing Pull Requests or Issues within a GitHub repository, GitHub provides a fuzzy search bar where users can type for specific keywords. However, there's also additional syntax that can be used to filter down the searches to specific parameters.

A filters button to the left of search bar has pre-selected queries that are passed to the search bar to facilitate the process of searching specific scopes. For example if users are looking specifically for open Pull Requests assigned to them they can select the "Your pull requests filters" which would pass the syntax for that specific query. In this case that query looks like this:

is:open is:pr author:author

Of course, users can use type these queries directly into the the search bar without using the filter dropdown. For example if they want to search all the pull requests of another author with the word "ssh", they can do it by typing the following query:

is:pr author:author ssh

🙌 How does this interaction or solution work?

Familiarity, Flexible Navigation and Optimized Real Estate.

GitHub audience is usually familiar with keyboard exclusive user-interfaces like the Command Line.

By surfacing this type of filtering into the free text search fields, they allow users to build strong mental models around dome of their service concepts (like PRs and Issues).

It also increases the flexibility of the navigation and the search itself without resorting to additional user interface elements. This results in a powerful functionality with a light user interface.

That's it! If you like the content, consider subscribing to Waveguide Next, a newsletter / blog where I share new examples and lessons on User Experience.