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