Overlay Edit patterns bring the editing form just a layer above the page. While still not leaving the page for editing, it does not attempt to do the editing directly in the flow of the page. Instead a lightweight pop-up layer (e.g., dialog) is used for the editing pane.
There are several reasons for choosing Overlay Edit instead of Inline Edit.
Sometimes you can't fit a complex edit into the flow of the page. If the editing area is just too large, bringing editing inline can shuffle content around on the page, detracting from the overall experience. A noisy transition from display to edit mode is not desirable.
At other times you might choose to interrupt the flow, especially if the information being edited is important in its own right. Overlays give the user a definite editing space. A lightweight overlay does this job nicely.
An Overlay Edit is a good choice if the editing pane needs dedicated screen space and the context of the page is not important to the editing task.
Yahoo! Trip Planner is an online place for creating and sharing trip plans. Trips contain itinerary items that can be scheduled. When scheduled, the itinerary contains the dates the item is scheduled. Each item can be edited in an overlay (Figure 1-9).
Figure 1-9. Yahoo! Trip Planner provides a complex editor in an overlay for scheduling an itinerary item
"Sun Jun 4 12:00am—Mon Jun 5 12:00am" is easier to read than a format appropriate for editing (Figure 1-10). Using an editor prevents errors when entering the start and end dates for a specific itinerary item.
Since the range of dates is known, Trip Planner uses a series of drop-downs to pick the start and end dates along with the time.
It should be noted that using multiple drop-downs for choosing the hour and minute is not the best experience. Although not in the context of an overlay, a better example of choosing an event time when creating an event can be found at Upcoming.org (Figure 1-11).
The experience of picking a time from a single list (or typing the time in) is more direct than navigating multiple drop-downs.
The editing module is considerably larger than the display values.
Opening an area on the page for the editing module would be distracting or push important information down the page.
There is concern that the opened information might go partially below the fold. An overlay can be positioned to always be visible in the page.
You want to create a clear editing area for the user.
What you are editing is not frequently edited. Having to click on an edit link, adjust to the pop-up location, perform your edit, and close the dialog is a tedious way to edit a series of items. In such cases, opt to either dedicate a space on the page for each item as it is selected, or allow the editing to occur in context to remove some of the time required to deal with an overlay.
What you are editing is a single entity. If you have a series of items, you should not obscure the other similar items with an overlay. By allowing the edit to occur in context, you can see what the other item's values are while editing.