April 29, 2010

Rise and fall of a UI convention: The search bubble

Like commodity markets, the markets for specific UI conventions sometimes go through a boom and bust cycle. Just as on the trading floors, an element’s ascendancy is often driven by popular enthusiasm for a few highly visible successes, and just the same, its downfall can come about in a flooded market that dilutes its value. Today, we’ll look at one UI convention in particular that has seen this pattern over the past decade: The search bubble.

For as long as GUI text fields have existed, there have been search fields. Originally restricted to modal boxes, the 1990s saw them increasingly integrated into non-modal UIs, a concept driven in part by the rising popularity and sophistication of the consumer-facing Web. As users became accustomed to initiating a search for web content right from Yahoo’s home page, or finding a book at Amazon without invoking a separate search window, the integration of the search field into the principal view of an interface grew to become a welcome and even expected practice. But these search boxes had no particular identity apart from other fields.

Identity for searching

iTunes 1.0 proposed a simple, visual code for the search box: semicircular endcaps. Only thing was, it was almost certainly unintentional: A look at the iTunes 1.0 toolbar area reveals a forest of circles; barely a right angle has been left unrounded. Yet this simple coincidence of an in-context search box and a rectilineophobic aesthetic struck a chord somewhere—it’s not clear (at least to me) whether Apple first ran with this or if Apple’s subsequent use of it was inspired by its adoption elsewhere, but either way, the “search bubble” grew to become a strong piece of UI vocabulary, a powerful vernacular for search.

A 2008 Smashing Magazine compilation of web-based search boxes includes frequent appearances of bubble-capped search fields, even outside the section dedicated to the convention. The bubble has found its way to multiple platforms, and essentially all modern Mac OS applications with a non-modal search feature use it, probably thanks in part to Cocoa’s NSSearchField class.

The bubble bubble

The search bubble began its existence as an arbitrary visual choice, and it has certainly found non-search uses even as it became popularly associated with search. But these exceptions tended to exist at the fringe of UI design; one might expect to see a page full of all-rounded fields in the over-enthusiastically decorated signup page of a scrappy web 2.0 startup, but in the mainstream, the style was, in general, dutifully reserved as a signifier for search.

With the release of Firefox 3.0, Mozilla began to chip away at this distinction: The browser’s loved-and-hated “Awesomebar,” a combined location bar and history search, brought the bubble look into a control that existed only partially for search. But next to an identically-styled web search field, and with a toolbar full of identically-rounded buttons, the Firefox 3.0 UI cloaked the significance of the rounded fields in the same mire of homogeneity as the iTunes 1.0 toolbar. The seeds of the search bubble’s undoing were planted.

The first full-on salvo against the uniqueness of the search bubble, though, was from an iPhone app. Not just any app, of course; many lesser-known apps have applied the bubble to non-search tasks; but a consistent chart-topper: Facebook. Unlike so many popular apps before it, Facebook used the same bubble style for status updates as for search, returning the bubble to its origins as an arbitrary visual style. This, however, was only a precursor to the ultimate dilution.

When Steve Jobs showed off iPhone OS 4’s folders feature, App-flush users marveled at the elegance of the solution. But a shadow was cast over this by the unfortunate use, by none other than Apple itself, of the bubble for a non-search feature. It had come full circle: From arbitrary style in an Apple UI, to a widely-used visual cue, back to arbitrary style in an Apple UI.

Like most markets, though, the search bubble may be down, but not out. It’s always had to struggle with the dilution of its meaning, and even if its struggle is harder today, it still has a great install base. Chances are, you won’t have to search hard to find it in the future.