This article is the sixth edition of the Advent of Patterns series. In this series, running from December 1st to December 24th 2024, I will document one design or programming pattern I have noticed recently. Read more about this series.
When you type a phrase into the Firefox address bar, the browser will suggest pages you have been to before. If you press the Enter key, the browser will complete your search using the first suggestion and navigate to the corresponding web resource. You can also use your arrow keys to select another option from the list.
The suggestions are contextual, based on what you have searched before. The more you go to a page, the more likely it is that the page will appear as an autosuggestion for search terms matching the page.
For example, consider the query “ind”. Here are the results Firefox shows:
I can see several pages I have gone to that match the pattern: the IndieWeb Slack, the IndieWeb wiki, a specific wiki page, and more.
This feature is useful because I can navigate to pages without having to type the full URLs. There is a secondary benefit, too: by showing multiple results, I can see a wide search space of pages that I may want to pick from. For example, when I am searching for a particular page on GitHub that I recently visited, I usually know several parts of the URL or page title but not all of them. With the autosuggestion feature, I can read through all the page titles to find the exact match I am looking for.
I use autosuggest extensively in other applications, too.
Firefox Developer Tools supports autosuggest when you add or edit CSS properties in the inspector. This is useful because I can both quickly find the option I want or, if I don’t know what I want, explore the potential options. I have explored many CSS options by scrolling through the automatic suggestions, selecting a new one, and watching how the page changes.
The autosuggestion feature is contextual. It knows the valid attributes for a given property and only recommends those.
GitHub search, too, has an autosuggest feature that takes into account context. With GitHub search, you can filter queries by repository, organisation, and more.
When you type one of the prefixes to start a filter (i.e. repo:), the autosuggestions displayed will be valid given the context. If I type repo:, only repositories will be shown as suggestions, until I complete my filter:
When I press space, the autosuggestions are tailored to my query. In this case, narrowing my query by repository now means GitHub can recommend specific files in the repository because I have set a filter:
Supporting multiple contexts aallows me to benefit from being able to explore valid values for filters and refine my search all while using the same search box.
It is essential that autosuggest meets user expectations: it should assist the user in finding what they want, and do so as accurately as possible. Throughout writing this post, my computer – to be more specific, I think the Apple operating system – has been tying to replace “autosuggest” with “autosuggestions.” This has been a burden, as every time I finish typing “autosuggest” I see something that doesn’t match my intent.
Firefox gets around this problem by liberally defauling to search if it is not confident that you are looking for a specific URL. I am unsure exactly what heuristics are used, but this is an essential usability feature. For instance, if I type “ind airport” (Indianapolis airport), the address bar takes me to Google Search, my chosen search engine. Google Chrome has written about how they navigate autocompletion using predictions.
What autosuggest features do you use?
