Benchmarking / Competitive Analysis

Behavior	Plaxo (status)	Facebook (status)	Google Calendar (event info)	Flickr (photo info)
Highlight to indicate inline edit	No	No	Yes	Yes
Hover message	No	No	No	Yes
Character limit	Yes	Yes	Yes	Yes
Show character limit/total	Yes	No	No	No
Default/prompt text	Yes	Yes	Yes	Yes
Paste multiple lines (single line context)	No	No	No	No
Paste multiple lines (multiple line context)	n/a	n/a	Yes	Yes
Submit html/code/scripts	Yes	Yes	Yes	Yes
Validate entry	No	No	No	No
Use explicit save button	Yes	No	Yes	Yes
Save on click outside	No	Yes	No	No

An interesting note, the new facebook interface does not use inline edit for status, but returns to a standard input form with submit button.

Google Calendar (editing event details)

Notice the double line at the bottom of each event that allows the event timing to changed by dragging the box. You can also drag the entire box around.

On rollover... user is required to go into edit mode to change the event. See below for screen shots of the editing.

Following 2 screen shots are from Google calendar a few months ago:

When editing the event, editable fields turned yellow on rollover (notice "When" field):

When clicked in the (yellow) editable field, appropriate controls/fields shown (in case of "What", it was just a simple field, but "When" provided 2 fields, checkbox and dropdown:

What's interesting is that when I look at Google calendar today, they're not making use of the "yellow on rollover" and all fields are already expanded (i.e. you don't have to click in the When field to show all its components; all components are shown from the get-go). Wondering if user research was what led them to change the design? [fluid:DO] Since the user is required to go into edit mode I think new, completely open design, makes sense. The user has already said I want to edit so when they go to the new page they should be able to quickly change anything they want to.

Toodledo.com (editing the columns of a tabular To-Do list)

This seems to be a fine example of a general problem, where you have a standard set of metadata displayed in a table of some sort. Editing the various properties (in columns) might otherwise call for pulling up a new edit form containing all the properties

?

On rollover

?

Cell selected. No save required - leaving cell saves changes

\

Facebook.com (editing status)

From the home page of Facebook, you can click to quickly edit your status by clicking on your current status (or their "What are you doing right now?" if you haven't updated your status in a while).

-->

|

Wordpress.com (editing the URL of a blog-post)

After you type in a title for your blog post, it generates a URL for the post. You can edit this URL using the in-line edit.
The Edit link shows that you can change the URL, the yellow highlight shows which part you can change:

When you click on Edit or the yellow highlighted part (the editable part), you can change the URL for your post:

Digg.com - after posting a comment

After posting a comment on Digg.com, the ability to edit the comment is available to the user for a short period of time. If "Edit" is clicked in that interval, the user can edit their comment inline without having to reload the page.

Flickr.com - Inline editing of any text field

On Flickr.com, title and description fields are inline editable, and this pattern appears throughout the Flickr site. Assuming you are the author of the content, clicking an editable field will bring you to an inline editor with a save and cancel button.

Below: Default view

Below: On mouse hover

Below: On mouse click

Below: On save

Interface (c) Flickr.com / Yahoo Inc.
Image (c) Jonathan Hung

vBulletin Example - Quick / Advanced reply

In certain instances of vBulletin, admins have implemented a "Quick Reply" feature which offers a quick inline reply without reloading the page. In that Quick Reply box, you can select an "Advanced" reply mode which reloads the page and gives the user a richer editor.

Below: A forum post with a Quick Reply and Regular reply buttons.

Below: Quick Reply presents an inline reply box without reloading the page.

Below: Users still have an option of using a more advanced editor with rich features, but requires a page reload.

UI: vBulletin
Source: NotebookForums.com