How Facebook Fixed the Biggest Design Flaw in Graph Search

source: www.fastcompany.com - author: Sarah Kessler

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.”