Child pages
  • Inline Edit Benchmarking - Competitive Analysis

Documentation for a historical release of Infusion: 1.3
Please view the Infusion Documentation site for the latest documentation.
If you're looking for Fluid Project coordination, design, communication, etc, try the Fluid Project Wiki.

Skip to end of metadata
Go to start of metadata

Benchmarking / Competitive Analysis

Behavior

Plaxo (status)

Facebook (status)

Google Calendar (event info)

Flickr (photo info)

Highlight to indicate inline edit

(error)
No

(error)
No

(tick)
Yes

(tick)
Yes

Hover message

(error)
No

(error)
No

(error)
No

(tick)
Yes

Character limit

(tick)
Yes

(tick)
Yes

(tick)
Yes

(tick)
Yes

Show character limit/total

(tick)
Yes

(error)
No

(error)
No

(error)
No

Default/prompt text

(tick)
Yes

(tick)
Yes

(tick)
Yes

(tick)
Yes

Paste multiple lines (single line context)

(error)
No

(error)
No

(error)
No

(error)
No

Paste multiple lines (multiple line context)

(question)
n/a

(question)
n/a

(tick)
Yes

(tick)
Yes

Submit html/code/scripts

(tick)
Yes

(tick)
Yes

(tick)
Yes

(tick)
Yes

Validate entry

(error)
No

(error)
No

(error)
No

(error)
No

Use explicit save button

(tick)
Yes

(error)
No

(tick)
Yes

(tick)
Yes

Save on click outside

(error)
No

(tick)
Yes

(error)
No

(error)
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

Flickr.com

Normal display 
 
On rollover...

 
After clicking in the field...

 
 
 

Inline editing in a WordPress blog

inline editing of display name on GolfTrac

Inline editing on Booksiamreading.com

Inline editing of numbers


Inline editing at SalesForce.com

http://blogs.salesforce.com/.shared/image.html?/photos/uncategorized/2007/07/26/picture_1.png

Yahoo! Developer Network implementation of Inline editing

http://developer.yahoo.com/yui/examples/datatable/dt_cellediting.html