Designing Web Interfaces

Part I. Make It Direct

On a recent trip to Big Sur, California, I took some photos along scenic Highway 1. After uploading my pictures to the online photo service, Flickr, I decided to give one of the photos a descriptive name. Instead of “IMG_6420.jpg”, I thought a more apt name would be “Coastline with Bixby Bridge.”

The traditional way to do this on the Web requires going to the photo’s page and clicking an edit button. Then a separate page for the photo’s title, description, and other information is displayed. Once on the editing page, the photo’s title can be changed. Clicking “Save” saves the changes and returns to the original photo page with the new title displayed. Figure 1 illustrates this flow.

Figure 1. Web applications have typically led the user to a new page to perform editing

In Flickr you can edit the photo title just like this. However, Flickr’s main way to edit photos is much more direct. In Figure 2 you can see that by just clicking on “IMG_6420.jpg”, editing controls now encapsulate the title. You have entered the editing mode directly with just a simple click.

Editing directly in context is a better user experience since it does not require switching the user’s context. As an added bonus, making it easier to edit the photo’s title, description, and tags means more meta-information recorded for each photo—resulting in a better searching and browsing experience.

Figure 2. In ...