Let me tell you a secret
Shhh! Content editing is something really important for the user experience in your website, regular project or just an internal page.
You should follow some very simple rules and you will get great usability… and forget about grumpy text fields!
In my last aricle I have told you about the best solution for a great text editor — Medium Editor, currently in use when writing articles on Medium.com.
Inline, inplace? What is inline editing?
When in editing mode of a textfield, a page element will display editing controls when the user is selecting a part of the text.
The elements are highlighted and a toolbar is shown prompting the user edit the element. Once the user selects the text, it is transformed into a hidden input field. There are different methods to enter in editing mode: by default or by clicking a button.
An in-place editor provides an easy way to let the user edit parts of a page without having to be redirected to an edit page. Instead, the user can just click around on a page and edit the elements he or she wishes to change — without reloading the page.
UI Patterns
Which inline editor should I choose?
First of all, inline content editing is trendy.
There are even inline-editing-alike toolbars for social media selection sharing! More inline means not just great editing experience but even more functions, better UX performance.
And a quick question: is the inline content editing the best solution even for a big project? Definitely yes!
Check out some of the most popular solutions compared:
CKEditor 4
- Select any editable element on the page and edit it in-place.
- Appears a toolbar when text selection is done.
- Content looks like the final page.
Check it out here.
TinyMCS
- Pretty popular.
- Choose from a global toolbar or a toolbox.
- Many fomatting tools, tables, image editing, lists.
- Content looks like the final page.
- But… heavy and paid premium functions.
Check it out here.
Medium Editor
- Pure Javascript and no libraries used.
- Appears a toolbar when text selection is done.
- No global toolbar for a grupmy UX/UI.
- 7 design templates and 27 functions.
- Content looks like the final page.
- Available as a Dreamweaver extension.
- Lightweight and blazing fast.
Check it out here. You can find it as a Dreamweaver extension here.
Web text editing at all?
You can find a couple of methods for easy content editing, for example using jQuery. There is a little research on StackOverflow:
Edit in place
When you edit a section of a heirarchy, you edit inline with the rest of the information. This allows you to check how your edits apply to the other information as you’re making them (rather than having to move back and forth between screens).
In terms of usability, a scenario where grouped items are editable all at once is nice as it saves multiple clicks. For example, if a job has the following data items:
Title
Description
PositionsIt’s good to provide a mechanism to edit all at once along with the edit each item in place behavior.
Inline editing also protects the other sections of the hierarchy from being accidentally updated.
Modal Edit
This editing method introduces a barrier between the hierarchy as a whole and the section you’re editing (i.e. the relationship between the information you’re entering and it’s place in the hierarchy isn’t immediately apparent from looking at the UI).
New Screen
As with the modal edit, the relationship of the edited information to the entire hierarchy is lost. However it is a very basic setup that most of your user base will understand immediately. It also protects the entire document from accidental updates.
All Fields Open
This provides the benefit of keeping the edited information in context (as with edit-in-place) and is very simple. There’s no learning curve that requires a user to learn they have to click an element to edit it.
