blink design library

Filter controls with keyword search

We've tested a number of search interfaces and in general we've found that people often neglect refinement options. It could be that people are conditioned to the web search experience (particularly Google) and therefore are less inclined to take refinement steps as part of entering their search.

The search function at iStockphoto encourages visitors to refine by displaying the controls dynamically when the cursor is in the keyword search field:

Both the placement (under the search field) and the dynamic behavior (which catches the eye) helps bring these options to the user's attention.

Compare this treatment with that found on the Corbis site (click image to see full-sized):

Here the refinement options appear after the search field and button. Since the user's attention will initially be on the search field and button, the refinement options seem less discoverable in this position.

Controls that expand and collapse

As web pages become more dynamic, behaviors seen in desktop applications have found their way on to the web. One of the most common behaviors is expanding/collapsing an element.

OS file browsers have long used tree controls to allow users to open and close branches of a file hierarchy.

Windows XP uses a "plus/minus" control. The plus indicates there is more available under branch; the minus indicates the branch is open:

Mac OS X uses a "triangle" control. When the branch is closed the triangle points to the right; when the branch is closed the triangle points down.

   

Vista uses a variation of the triangle control. In the closed state, the points to the right, but is rendered in outlined only. When the branch is open, the triangle points at a 45-degree angle and is filled:

The web uses variations of Windows XP "plus/minus" control and the Mac OS X "triangle" control.

Google Reader uses a plus/minus control:

Yahoo Mail uses a triangle control:

The above examples are controlling the display of lists.  In traditional desktop software triangle controls are commonly found open and close palettes, such as those found in Adobe Photoshop:

On the web, this same idea is often seen with web page widgets, as with this example from Netvibes:

Interestingly, iGoogle uses more of a window minimize/maximize metaphor for its widgets. The placement of this control is also on the right side of the widget, similar to the window controls in Windows XP or Vista.

There is one other related convention that is worth mentioning, which is controls to hide/show menus. On the web, this control is commonly represented as a down-pointing triangle, as show in these examples from iGoogle and Netvibes.

Interestingly, pallets in desktop software often use a right-pointing triangle at the end of the widget to display a menu (as shown in this Photoshop example):

Presenting choices in a dialog box

When attempting to copy files that already exist in the destination folder, Vista gives you these options:

This dialog has a lot of explanatory text.  And to my eye the actions--what you are supposed to click--are not strongly distinguished from the other text (a problem of visual hierarchy).  I think  the presentation is a case of a bit too much information that serves complicate the choice.

Compare the above to this Mac OS X dialog for the same situation:

Here, at a glance, I can see there are two choices: stop and replace. The button treatment of the actions makes them pop out from the other elements of the dialog. 

I suspect if we were to do A/B testing of these solutions, there would be significantly lower task times associated with the Mac OS X presentation when compared to the Vista approach.

A single-page multi-step form

Rather than using a multi-page wizard, ebay uses a single-page form, divided visually into separate steps, for posting items for sale (click to see full-sized image):

The strong visual weight given to each section effectively breaks the form into separate steps.

A risk with long, scrolling forms is that users can find them overwhelming.  The single-form approach (vs. a wizard approach) is most suitable where:

• There is little or no conditional logic to the flow
• The overall flow is short
• Each step is relatively easy (both in terms of interaction time and cognition required)

Using a button for selection feedback

A previous post shows how form buttons can be used for in-progress feedback.

Buttons can also be used for selection feedback, as shown in this example from FriendFeed:

This approach can be particularly helpful when users are selecting from a long scrolling list  or over multiple pages.

Constraints or flexibility?

Google Calendar and Yahoo! Calendar use very different mechanisms for the "quick entry" of events.

Yahoo uses separate fields for each component of the event:

Google on the other hand uses a single text field:

Both approaches have advantages and disadvantages.

The Yahoo approach--using separate, specified fields--is probably more suitable to novice users because it ensures entries are in exactly the right format. But, it is likely slower than entering information as a single text string.

The Google approach reflects how people might quickly jot down events in an off-line context. But this also requires more system logic to properly interpret user's entries--and this approach runs the risk that users may not use  syntax that the system can interpret, resulting in errors.

For example, consider this quick entry in Google Calendar:

breakfast w/Tracy at 7

With this entry, Google incorrectly schedules the breakfast with Tracy 7:00 pm rather than 7:00 in the morning (which was the user's intention).

Using a button for in-progress feedback

An effective way to let users know a process is in progress is to use the button they just clicked.

Here is the initial button state on freetranslation.com:

And here is the button state when clicked, while the translation is in progress:

This approach has two great advantages:  it gives the user feedback right where they gaze is currently fixed (on the button they just clicked)--and, by disabling the button, it prevents users from clicking the button twice (which might happen if they think "nothing" is happening).

Summarizing user reviews

When a product has a large number of reviews--both positive and negative--it can be time-consuming to read through them all to understand the range of opinions on a product.  Amazon helps its users by highlighting the most useful positive and negative reviews (click to see full-size image):

This approach, of course,  highlights only a small subset of the review content. But even when users read an entire set of reviews thoroughly, they are getting an unscientific sampling of opinion. Comparing a positive versus a negative review is likely an effective shortcut for those who don't have the time or inclination to read every review.

Asking users to self-identify

I recently visited the web site of a company that provides requirements-management software. Their home page consisted of exactly two "enter here"  links and a check box (to remember my "enter here" preference). This home page demanded I enter the site as either and "IT user" or a "business user." There were no other navigation options; I had to make a choice:

What is particularly interesting about this choice is that it not only forces me to self-identify as one or the other, it also implies some sort of conflict/unrest between the two. The IT user and the business user look like they are having some sort of stare-down. Honestly, I didn't want to choose either one! But aside from that, I truly didn't know which I should select.

Sometimes, it makes sense to organize information by user type. College sites do this (parents, students, faculty and staff...) as do health insurers (members, employers, providers...). These are distinct groups with distinct informational needs. For example, the homepage of Georgetown University prominently features self-identify links in the center of the page, but provides other topic categories on the left side of the page:

Forcing users to self-identify should never be the sole gateway to the site's information. If people can't identify with any of the options, they will feel stuck.

Paging and scrolling navigation--together

As mentioned in a previous post, most web-based systems seem to bump into performance limits that prevent implementing infinite scrolling. And so some amount of paging navigation is usually required.

Tastebook combines both scrolling and paging navigation on a single page. It seems to have a limit of loading 100 items per page--which they've implemented within a scrolling frame. Paging links are at the bottom of the frame (click for full-sized image):

Though the paging links have relatively light visual weight, they are in a highly discoverable location: right at the end of the scroll bar.