In an early test, Facebook changed the color of the search box for small portions of users. The white field performed more than twice as well as the next best option, which was the dark blue search bar.

The team also thought a permanent search icon would make the feature less confusing. When they tested the bottom version, they found out they were right.

These are design explorations intended to clean up the look of the new search bar. Facebook tested the middle one.

Finally, Facebook tested the new search bar design to make sure it wasn’t decreasing engagement with notifications. The position of these icons had negligible effects on people’s interaction with them, so they ended up on the right.

Finally, Facebook tested the new search bar design to make sure it wasn’t decreasing engagement with notifications. The position of these icons had negligible effects on people’s interaction with them, so they ended up on the right.

Co.Design

How Facebook Fixed The Biggest Design Flaw In Graph Search

When Facebook rolled out its search feature, it seemed to hold great promise. The hitch: No one could actually find it.

Facebook’s graph search, which as of today is active for all U.S. English users, does a lot of amazing things. It can show users "friends of friends who work at Google," or "restaurants my friends like in New York," or "photos of girls’ friends." It has the potential to be a tour guide, recruitment tool, and dating site, all in one.

There’s just one problem: When it started rolling out in January, many users couldn’t find it.

Graph search’s original design had no search icon or search box, just a clean blue line that stretched across the top of the page. Users inserted their queries on the upper left-hand corner by an "F," which then turned into a search icon as they typed.

"The design goal was to marry the idea of a page title and a search field to create a unique, almost magical page title where you could describe something you wanted to see and it would appear below," says Russ Maschmeyer, the lead designer on the product. Maschmeyer hoped to reduce the visual noise that would come with a high-contrast white box and a prevalent search button. "It looked wonderful and sounded great on paper," he says, "but in reality it led to a lot of confusion for our users."

Facebook was inundated with bug reports from people who couldn’t find the search bar, and in interviews with users, the research team reported the same problem.

So Maschmeyer and his team began testing new designs to target that problem. In one test, they changed just the color of the search box for a small percentage of users. The white search box performed more than twice as well as the next best solution, a darker tone of blue than Facebook’s blue background. After making this discovery, the team tested smaller tweaks, such as adding a permanent search icon to the search box, a written prompt, and the position of other icons.

The results are in the box that you see today:

Maschmeyer declined to provide specific metrics about how the renovated box improved graph search use. "But after testing these various designs," he says, "we’re certain the experience we’ve built is both easier to discover and use for everyone."

Add New Comment

3 Comments

  • Andy Parker

    Some companies want to test for the sake of testing rather than putting their instincts first and ruling out stupid for the flippin' obvious.

  • welcomebrand

    Wait. So you're saying a nearly invisible search bar with little indication it's a search bar didn't get used much and when the design team updated it to a visible form field with more clues about its purpose people started using it more?

    This is indeed impressive news.