Inline Edit Benchmarking - Competitive Analysis

Version 23 by Gary Thompson
on Aug 12, 2008 18:30.

<< Changes from 22 to 23

compared with

Current by Erin Yu
on Sep 19, 2008 16:21.

Key

This line was removed.

This word was removed. This word was added.

This line was added.

Changes (23)

View Page History

h1. Benchmarking / Competitive Analysis

|| Behavior || Plaxo (status) || Facebook (status) || Google Calendar (event info) || Flickr (photo info) ||

|| Behavior || Plaxo (status) || Facebook (status) || Google Calendar (event info) || Flickr (photo info)

| Highlight to indicate inline edit | (x) No | (x) No | (/) Yes | (/) Yes |

| Hover message | (x) No | (x) No | (x) No | (/) Yes |
| Character limit | (/) Yes | (/) Yes | (/) Yes | (/) Yes |

No | (x)
No | (/)
Yes | (/)
Yes |
| Hover message | (x)
No | (x)
No | (x)
No | (/)
Yes |
| Character limit | (/)
Yes | (/)
Yes | (/)
Yes | (/)
Yes |

| Show character limit/total | (/) Yes | (x) No | (x) No | (x) No |

| Default/prompt text | (/) Yes | (/) Yes | (/) Yes | (/) Yes |

Yes | (x)
No | (x)
No | (x)
No |
| Default/prompt text | (/)
Yes | (/)
Yes | (/)
Yes | (/)
Yes |

| Paste multiple lines (single line context) | (x) No | (x) No | (x) No | (x) No |

No | (x)
No | (x)
No | (x)
No |

| Paste multiple lines (multiple line context) | (?) n/a | (?) n/a | (/) Yes | (/) Yes |

| Submit html/code/scripts | (/) Yes | (/) Yes | (/) Yes | (/) Yes |
| Validate entry | (x) No | (x) No | (x) No | (x) No |

n/a | (?)
n/a | (/)
Yes | (/)
Yes |
| Submit html/code/scripts | (/)
Yes | (/)
Yes | (/)
Yes | (/)
Yes |
| Validate entry | (x)
No | (x)
No | (x)
No | (x)
No |

| Use explicit save button | (/) Yes | (x) No | (/) Yes | (/) Yes |

Yes | (x)
No | (/)
Yes | (/)
Yes |

| Save on click outside | (x) No | (/) Yes | (x) No | (x) No |

No | (/)
Yes | (x)
No | (x)

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.

h2. Google Calendar (editing event details)

...

!google-editeventdetails2.png!

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.

h2. 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 !toodledo before edit.jpg!

h4. ? 

On rollover
!toodledo rolloever.jpg!

h4. ? 

Cell selected.  No save required - leaving cell saves changes
\\ !toodledo selected.jpg!\\
\ 

h2. 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).
| !Picture 74.png!\--> | !Picture 76.png!\--> | !Picture 77.png!\--> | !Picture 79.png! \| |

h2. 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:
!Picture 72.png!
When you click on Edit or the yellow highlighted part (the editable part), you can change the URL for your post:
!Picture 85.png!\\

h2. 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.

!Digg-In-Line-Edit-1.png!\\
\\ !Digg-In-Line-Edit-2.png!\\

h2. 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*
!Flickr-01-crop.png!
 
 
*Below: On mouse hover*
!Flickr-02-crop.png!
 
 
*Below: On mouse click{*}* *
!Flickr-03-crop.png!
 
 
*B{*}{*}elow: On save*
!Flickr-04-crop.png!
 
Interface (c) Flickr.com / Yahoo Inc.
Image (c) Jonathan Hung
\\

h2. 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.* !vBulletin-QuickReply-1.png!
 
 
*Below: Quick Reply presents an inline reply box without reloading the page.* 
!vBulletin-QuickReply-2.png!
 
*Below: Users still have an option of using a more advanced editor with rich features, but requires a page reload.*
 
!vBulletin-QuickReply-3.png!
UI: vBulletin
Source: NotebookForums.com

h2. Flickr.com

Normal display  !Flickr 1.png!
 
On rollover...
!Flickr 2.png!
 
After clicking in the field...
!Flickr 3.png!
 
 
 

h2. Inline editing in a WordPress blog

!http://farm1.static.flickr.com/32/42230987_5083773a85.jpg?v=0!

h2. inline editing of display name on GolfTrac

!http://farm3.static.flickr.com/2235/2008022759_166d59bd5d.jpg?v=0!

h2. Inline editing on Booksiamreading.com

!http://farm3.static.flickr.com/2395/2531273140_0e12c8d60e.jpg?v=0!

h2. Inline editing of numbers

!http://farm3.static.flickr.com/2197/2213957103_ed5c09f667.jpg?v=0!
!http://farm3.static.flickr.com/2141/2213957055_e2d1a9136e.jpg?v=0!

h2. Inline editing at SalesForce.com

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

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

h2. Yahoo\! Developer Network implementation of Inline editing

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

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

Infusion v1.3 Documentation

Inline Edit Benchmarking - Competitive Analysis

Changes (23)