Inline Edit Benchmarking - Competitive Analysis
Benchmarking / Competitive Analysis
Behavior | Plaxo (status) | Facebook (status) | Google Calendar (event info) | Flickr (photo info) |
|---|---|---|---|---|
Highlight to indicate inline edit | | | | |
Hover message | | | | |
Character limit | | | | |
Show character limit/total | | | | |
Default/prompt text | | | | |
Paste multiple lines (single line context) | | | | |
Paste multiple lines (multiple line context) | | | | |
Submit html/code/scripts | | | | |
Validate entry | | | | |
Use explicit save button | | | | |
Save on click outside | | | | |
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.