Yahoo delivers major search enhancement

Yahoo came out Monday with a new search tool that wraps up three features into one widget. The features are:

• autocomplete
• related searches
• filtering

It's the last of these that's the most interesting, because the first two have been implemented elsewhere, namely on Microsoft Live and Ask.

Yahoo's usability experts boast that with this new tool, their test subjects experienced a 61% increase in task completion. I played with it and found it somewhat confusing, but I think it's a nice feature. It's an important one that I think, will spur Google to make some enhancements to its own search service, which have seen no notable improvements since they introduced image search.

In any case, helping users complete tasks is the most important objective, but the impact of this tool is going to be more search result page views, more targeted searches, more targeted ads and more for Yahoo's bottom line. They chose the term "Explore Concepts" to describe the filtering feature for a good reason: it encourages search "browsing" and exploration that had previously been limited to related searches, none of which were ever very well-implemented.

I said that the tool was a little confusing, and it is. An experienced web user will take a few minutes to figure it out. Here are the things that will cause confusion:

• "Explore Concepts" uses a two-column list and a scroll right to move through it, which in itself is confusing. But there's no visible transition to see that you've moved over one column, and the blank area to the right of the scroll right, with an arrow pointing at it suggests that something is going to appear in that blank area, which doesn't happen.
• The plus sign appended to the "Explore Concepts" term looks actionable (it actually indicates filtering)
• When you click on one of the filter terms, the whole list of filters changes, which is disorienting, especially because the term listed after "Explore Concepts" does not change.
  

Here we search for the World Heritage city Luang Prabang.

Autocomplete at work:
Using right scroll with two-column data with no visible transition:
Is something going to show up on the right?
Explore Concepts now has a new list of terms, even though it still says "Explore Concepts: luang prabang+" and not "Explore Concepts: luang prabang+buddha images+":
On the whole, a promising new feature, but there's enough there to confuse new and even experienced users.

Labels: ajax, search, yahoo

Usability of tabs in Ajax content boxes

I've been looking around at various implementation of these tabbed content boxes, which have become popular in the past year or so. Whether you are just toggling visibility of content or actually using Ajax to fetch the content, these tabbed boxes provide a significant advantage to users, saving them from page reloads or being directed to other pages prematurely.

Properly implemented, these widgets give users a clear idea of where they are. I'll go through some examples of good and bad designs.

Yahoo has always been a leader in usability, and here's why:


Yahoo provides three cues:

• background gradients distinguish selectable tabs from the selected tab
• the selected tab's text is bolded and changed to orange
• the background area of the selected tab and content area constitute a single, bordered field

Few users would be confused by this interface.

The New York Times implementation gets only one thing right: turning the selected tab area and the content area into a continuous bordered field.

What are the problems with it?

• the light gray, 1px borders are too thin to adequately differentiate the areas and make it clear at a glance where you are
• the text of the selected tab is indistinguishable from the text of the other tabs
• all-caps are difficult to read, whether in print or online
  

Compared to the Yahoo box, it's very difficult to tell where you are. Perhaps the New York Times tested their readership and found that they have above-average eyesight?

The following tabbed box from Salon is unclear because it violates the norm for tabs, which is for selected tabs to have the same background color as the body of the content area. If you have three or more tabs, the user has an easier time figuring out which tab is selected, because it will be different from the other ones. But when you have only two tabs, it becomes very difficult:

Can you tell which tab is selected? Most users cannot.

Another example of a tabbed box with the same problem, this one from Time.com:
There you have it. Implement something along the lines of Yahoo, and your users will make the most use of these handy widgets.

Labels: ajax, css, ia, navigation, tabs, usability, widgets