Instantly search with any of your search providers
User choice has always been big for us on the Firefox team. It’s consistent with our mission, and who we are as a company. In our features, it also enables our users to take advantage of the open web.
As for our search experience, we offer customizability and personalization as a way to further that value.
But taking full advantage of this feature has always been a bit difficult. Especially after logging some browsing history, locating your non-default search providers requires some digging. Then there’s the issue of discovery inside our ‘Settings’ page.
We wanted to look at the issue from a user’s point of view. Our user story looked a little like this:
“As a user, I want to be able to add Home Depot as a search provider and quickly search their site (from time to time)”.
While our users could customize these search providers from within ‘Settings’, they couldn’t exactly switch between them easily. Instead of having our users accommodate us by creating their own workarounds, we wanted to be more proactive.
For example, how often have you had to add a website name in your search term so that you would get results from that site? “Interior wall paint homedepot canada” works, but it’s not great. Considering how often you may revisit a specific site. What if I needed more paint?
Easily search with another provider — user choice. By giving this list of providers more prominence in the UI, we can both promote this hidden feature, and make it easier to use.
We believe that this interface enables better discovery for all of our search providers and any that our users may add themselves. But it also provides more value. Like before, it’s fully customizable and you can rearrange the order.
The cost of this is real estate. We overlay this on top of the frecency results so it will cover one of the items further down on the list. In an attempt to minimize this issue, we’re specifying the height of this element to only take up the standard 48 dp (not including the visual 1 dp divider above).
All said and done, it takes up less space than a single frecency result would.
The main goal here was to clean up our user experience and expose this particular feature better, without creating a huge cost of “change”. If we had the chance to polish our interface and experience a bit there as well, all the better.
Presenting these options to our users in some form of a vertical list seemed like the best option. It would be easy to notice, easy to use, and easy to digest. But it would take up a lot of screen space too. We needed an alternative.
We also wanted to maintain an obvious default position for the provider of choice. These limitations led us to the idea of having the sideways scrolling list you saw above (not unlike the new scrollable tabs UI for our Home panels — currently in Nightly).
An important step for us was to unify and update the visual design here. Although some might think a ‘Settings’ page does not require much attention, but this is where a lot of the “user control” (we mentioned earlier) happens. Plus, we wanted to create primary UI elements from these icons.
This change allowed us to present a uniform visual language to our users. One that would lend itself well to being a focal point of action. Instead of looking like the website’s favicon, this made them look a bit more like buttons. They also just look more inviting!
“Search” is known to be a big way users continue their experience between devices nowadays. Between synced bookmarks/history, frecency results, and our Home panels here, this “Awesomescreen” is an area of extremely high visibility. We just thought it warranted a little bit of love.