A Look at Desktop Website Search: Evolution and Current Trends

Share this: Tweet about this on TwitterShare on LinkedInShare on FacebookEmail this to someone

Website search continues to evolve in order to accommodate the changing needs of users over time. Because information discoverability has become a central focus point of websites – site search received the attention it deserved to become a much more intuitive feature.

In recent years, powered by faster processing and increasing internet speed search results came back quicker, and new and exciting ways to search emerged.

In this article I examine how desktop site search changed over time to become what it is today, and take a closer look at current trends.

A quick look back

The act of searching online was introduced into the mainstream by search engines (for a neat infographic on the history of search engines checkout http://www.wordstream.com/articles/internet-search-engines-history), only later did searching make it’s way into other types of websites; once we were building websites with dynamic content which could actually be searched.

In those early days searching was quite simple:

Enter a keyword – > Hit Search -> Get a list of results

Though site search introduced a very useful functionality – making information on websites more discoverable, it also brought along a few user experience issues, such as:

  • Users not knowing what keyword/s to type to get the best results
  • Search algorithms not being sophisticated enough to understand what the user really means

In other words, using a site search used to be unpredictable.

Solving the predictability issue, Incremental Search began to appear on websites; sometimes called “search as you type”, typeahead searching, or inline search, this feature was added to Google in 2010, though it existed in software way before the Internet.

Incremental Search returns real time suggestions based on what the user is typing into the search box, and it has a tremendous usability advantage – giving the user guidance as to what they might find, and reduces the time it takes for them to come up with a keyword to search by.

Reducing the mental workload on the user’s part is always a UX improvement; therefore “search as you type” functionality has become a standard seen across many websites today.

The Search Interface

 

Search

The interface design for searching has gone through an evolution as well.

From the “search” label within the field, to a “search” label on the button only, and many other variations in between, designers have gone through much iteration; eventually landing on the magnifying glass icon as the universal symbol for search.

According to a Nielsen Norman article users associate the magnifying glass icon with search functionality even without text indication.

Though the history of the icon’s origins is not very clear, according to this article the magnifying glass icon can be traced back to 1987 as an icon in the UI for NeXT Workspace Manager.

Over time, the magnifying glass has been “flattened” much like the rest of our current interface elements.

The current state of desktop website search

Today, we have great variety in the way desktop website search is presented to users, and in recent years desktop search has been greatly inspired by search functionality on mobile apps.

Mobile UI design is subject to certain constraints, which, in a strange way, have actually contributed to the creation of new and more usable design patterns, later to be adopted by desktop UIs as well.

The constraints of mobile apps largely stem from the limited screen real estate designers have to work with, resulting in:

  • More clarity in their design patterns
  • Less frivolous details
  • A conservative approach to interaction

Thus users were introduced to more streamlined UI and interactions via their mobile devices, expecting desktop UIs to follow those trends as well.

THE “ADVANCED SEARCH”

Of course, complex data structures sometimes necessitate a feature known as “Advanced Search”. Still, even when designing for more complex search functionality, designers have adopted a more streamlined approach to UI.

According to an article from Nielsen Norman, an interface should not show advanced search options right away, but simply have the option available via a link.

Furthermore, Incremental Search has introduced some “advanced” features by displaying additional information about search results directly within the dynamic “search as you type” results set. This makes the actual “Advanced Search” less likely to be used.

CURRENT TRENDS IN DESKTOP SITE SEARCH

Following is a breakdown of the different site search UIs used on desktop websites today:

Amazon:

 

Amazon

This is a terrific example of complex data that is easily digestible.

Amazon doesn’t always win on the UX front, but their search never fails the user. Amazon’s whole purpose is rooted in the discoverability of the products users want/need so the search here is critical.

Amazon uses “search as you type” as a convenient way to help the user know what to search for and what department to search in.

The “All” menu (1) is a way to narrow down the categories of results before the user starts typing.

The dynamic results display the actual categories the keyword is found in (2) as well as product types that are related to the keyword (3).

LinkedIn

 

LinkedInLinkedIn is another great example of highly complex data presented in a simple interface.

Search results begin to appear as the user types a search phrase in the search box.
Next to the search field there is an icon that lets the user select a category to search in, otherwise it searches in all categories (people, companies, etc.)

LinkedIn Advanced Search

Side note: I never noticed this sorting feature before; only after I examined the Amazon search did I check to see if LinkedIn has a similar feature. And there it was! I use LinkedIn quite a bit so it seems that this feature works better with a text label such as the one in the Amazon example.

LinkedIn has a lot of data to search through, but they leave “Advanced” search as an option (2). As you can see from the advanced search screenshot, that would be a lot of functionality to bring forward right away.

Not only are results dynamically displayed as I type, they are also categorized, making it easier for the user to distinguish between companies (3), universities (4), people (5) and more, making their search quicker, as well as hint to the type of searches they could perform in the future.

Apple

 

AppleApple’s site redesign just a few days ago solved a number of usability problems, such as allowing for exploration and shopping as a unified experience (and yes, usability problems plague even the best of us).

On the Apple site, the only indication of the search functionality is the magnifying glass icon, there is no search field (1) until the user clicks on the icon – this is when the search field expands over the entire site navigation (2).

With this, apple is essentially treating the navigation of the site as another way to search. Theoretically, navigation and search are really part of the same mechanism by which users sort through information, so treating the navigation as “not-so-sacred” is an intuitive way to break from the mold.

The search icon is replaces with an X – but remains in the same exact position. This ensures that the user comprehends the X as an alternate state of the search icon. Moving it would disassociate the two and create confusion.

Before the user starts typing they see a few quick links in the place where “find as you search” results normally appear. This is a great way to use this space before there is any data to display.

Once the user starts typing (3) they see dynamic results appearing below the search filed.

Conclusion

Desktop website search has been transformed through the years to accommodate more complex data, rising standards of usability, and user expectations.

Here are some key takeaways from the examples explored above:

  1. Make “Advanced Search” available, but only as an option – make the main search intuitive in such a way that the user doesn’t need to resort to the advanced search feature.
  2. The use of the magnifying glass is favored over the “search” text label.
  3. Categorizing the dynamic results enhances “Search as you type” functionality.

Over the years, we’ve seen the exponential growth of data complexity, but we’ve also seen a decline in interface complexity. This supports the notion that users are becoming more concerned with speed, ease of use, and discoverability surrounding content.

According to recent studies users are now spending more time on their mobile devices (60%) than desktop (40%), still, even though we are past that tipping point, desktop use is going to be around for a while.

As new devices and the Internet of things bring along new ways to consume information, these changes will likely inspire similar trends in desktop website design.

Share this: Tweet about this on TwitterShare on LinkedInShare on FacebookEmail this to someone