I believe there is much to say behind every small, unannounced UI tweak a large web product rolls out. Are they correcting a mistake? Are they AB testing? Just a fidgety design team? Due to the subtle nature of these changes, we might never know – which makes speculation all the more enticing.
Small UI tweaks started to grab my attention after reading this excellent article from the LayerVault blog. Terms such as “Progressive Reduction” and “Experience Decay” describe the practice of scaling UI elements to a users’ proficiency and recency of interaction. The practice reduces clutter and streamlines the UI the more the user becomes familiar with the feature.
In light of this, I’ll introduce the title example, Facebook Graph Search. The images are in order of date released starting with the launch design and ending with present day.
When the last design update rolled out, I chuckled and thought “Nice try with the flat search field guys. Looks like you’ve come crawling back to the white inset pillbox.” Then started to look for an explanation.
My assumption: people weren’t using the Graph Search feature.
My insight: the original flat design held no indication of a text field and violated UX best practices. They wanted it that way for aesthetic.
My conclusion: they gradually tweaked the design to make the functionality more explicit. Initially with a subtle outline/inset and finally with the same vanilla search box they had before.
With hindsight and the knowledge of experience decay/progressive reduction, how could they have better rolled out Graph Search?
- Launch with the white inset pillbox. Make the functionality and utility as clear as possible.
- As users become familiar with the feature, scale back the contrast for more visual harmony in the header. Test. How does this affect the usage of the product?
- If results from action 2 are positive, further strip back the design to a flat field. Test. If positive: design purity achieved thanks to progressive reduction!
This entirely assumes that their goal laid in aesthetics and a particular design nuance. What if there was another factor in play here? Surely, Faceboook knows what it’s doing. Could there be a clandestine overarching strategy that would forgive their UX transgressions? Perhaps.
There is one factor that I ignored throughout this analysis: the pre-launch UI. Lets have a look and compare it to the above suggested launch design.
All in all, the new search looks like the old search. The only difference is the gray placeholder text where the new one says “for people, places and things.” You almost wouldn’t notice – which is when I realized I might have been mistaken. “For people, places and things” is the product. That’s what differentiates Graph Search, what makes it bigger and better than old search. People wouldn’t use it if they didn’t notice it. Sure they launched with a “take the tour” pop up but when closed, it’s closed. Their launch design put the message first, right there in white on blue: “Search for people, places and things.”
The old, bad search was history, out the window, and that’s the point. To rebrand their search they had to be dramatic, even if it meant implementing crappy UX. Once the message was clear, “Facebook has a new, better, awesome search,” they began to layer back in the visual utility. They did so over a long enough period of time that you forgot the old, useless search that hung up there before ever existed.
My assumption: Facebook made some poor choices and corrected them.
My insight: Facebook doesn’t often make poor choices.
My conclusion: There are many aspects to releasing a feature, and maybe sometimes you have to break some rules.