Published on March 24th, 2018

User Interface + User Experience

UI Design Pattern: Edit-in-Place

I implemented a design pattern that could help my team edit content on-the-fly instead of having to navigate through a sea of web pages in a separate portal.

2 minutes read

Two weeks ago, I was thinking of making an improvement on my company website's custom-built Content Management System (CMS) in order to make it easier for my team to edit and push content with ease.

As a matter of coincidence, I came across a book named Designing Interfaces: Patterns for Effective Interaction Design by Jennifer Tidwell, which contains several User Interface and Interaction Design patterns that inspired me to implement one of the patterns that I had discovered in the book, "Edit-in-Place".

What's Edit-in-Place?

It's like a tiny WYSIWYG text-editor that allows users to change the text directly on top of the original text instead of going through a separate portal or dialog box.

Why did I build it?

The fact that my team has to navigate through a sea of pages in the CMS to edit content is annoying and sometimes, it could be just opening a lot of new tabs on the browser. Hence, a feature like this would allow them to edit content "on-the-fly" with zero navigation.

Below, I have made an implementation of it using Javascript and an experimental design for my blog.

How to use Edit-in-Place:

The book claims that Flickr is one of them who implemented this feature, you can find this feature in most modern Content Management Systems like Wordpress, Joomla or Drupal or a better example, you have used this feature while renaming a file on your computer.

However, there are some limits to this i.e. you can only apply this feature on dynamic webpages as you'll have to write a few additional lines of AJAX that sends a POST request to your server to reflect the saved changes on your database.

Hope you guys found this article useful!


Icons used are from is licensed by CC 3.0 BY