blink design library

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.

Highlighting the current row

Rather than using alternating row shading (a common technique to help differentiate rows), the Netflx queue highlights a row when you roll your mouse over it. This, combined with the generous amount of white space between rows, makes it easier to read across rows. It also makes for a cleaner, simpler layout compared to using alternating row shading (click to see full-sized image).

Password recovery without a required trip to email

If you forget your password on the Fine Cooking web site, you gain access to the site without waiting for your password to be delivered via email.

Step 1:

Step 2:

Step 3: (Note the option here to automatically log the user in.)

Step 4: I'm logged in

This process obviously relies heavily on the security question and may not be as secure as requiring the password recovery via email. But it has the advantage of being quick and easy... in just a few short steps the user has access to the logged-in version of the site.

Selecting Items Across Multiple Pages

Every web-based application I've worked on recently requires some degree of paging when the system returns large number of search results. The reason is performance constraints. While some search engines are able to present results using an infinite scroll (see Live image search), most systems seem to bump into performance limits as to how much can be loaded into a page.

Commonly, items that are distributed over a number of pages are subject to a "Select All" command. In this situation, the following question always comes up: Do we just select the items on the current page or do we select all items across all pages?

Gmail has a nice solution to this: give the user a choice.

By default, Gmail just selects the items on the current page. But it gives you a handy link at the top of the list to select across all pages (click to see full-sized image):

Here's how it looks when items are selected across pages:

This approach doesn't completely resolve the question, though, because you must select default behavior here (select single page or select across all pages).

In a study I recently completed, I found that  users expected "Select All" to do just that--select all items across all pages. The interface we tested gave users feedback on the number of items selected, but participants still wanted to check at least one other page to confirm that everything was indeed selected. This was a system participants used on a daily basis, and a few stated that they would just do this check the first time, but would subsequently feel comfortable the system had selected absolutely everything.