I am trying a new approach in a content management systen interface to make everything that can be edited, editable inline without changing screen. For example, a list of blog post shows a title, an author, a date, and a status. The operator can, without leaving the screen and with minimal steps simply click the title to edit it. They can click the status and get a drop down list of statuses to change to. They can click the author and from a menu choose a new author. And they can click the date which pops out a calendar date picker.

This is currently only being developed for desktop. So hovering on an editable field gives visual feed back via border that it may be edited.

However, the issue now is that if the users intent is to navigate instead of edit... To actually enter the dedicated editing screen for the post where they may change the posts content... I have to introduce a button for navigation. I feel this is a bit of an annoyance when the user expects clicking to navigate. So the alternative becomes to introduce a double click or long press for editing...which seems like not the worst idea but not my favourite idea... Or to add an edit button (which defeats the elegance of the inline editing)

Are there some other possibilities I have not explored? Is there a way to make one of these solutions more elegant and just as simple as clicking to edit?

Not sure there is a good solution.

The way this is done in Atlassian/Jira is to have an edit icon on hover for specific field, in addition to the Edit button.

Jira UI to edit an issue

The only way to navigate to the issue in full screen is to click on the issue ID (which doesn't even appear as a link, but is underlined on hover) [Behavior changed since my first answer]. The edit icon requires an extra step to edit, but no need to change screen, so it's still a time saver.

In Wordpress, they have a "Quick edit" next to the "Edit" link to edit only the data already visible on screen.

Wordpress UI to edit an article

When clicking on Quick edit, the article basic characteristics appear in an editable form within the current screen (list of articles).

Wordpress Quick edit UI

If possible, testing several ideas with actual users will give you the best answer for your CMS.

  • @Jim Jira is nice example. Also, take a look at Trello. – Serg Jun 5 at 12:55
  • I guess the reason why this might not be a good solution is that you don't have a way to distinguish when the site owner wants to view or edit the page, which means you can actually edit when you want to view or view when you actually want to edit. A direct call to action (e.g. edit or login status change) makes this clear. – Michael Lai Aug 4 at 22:37
  • +1 good answer and if you can provide some screenshots it will help to give some context around the actual design solutions for people who are not familiar with those software programs. – Michael Lai Aug 4 at 22:39

Depending on how tech savy your users are you can give them small instruction on begining. And make that just click is editing, and ctrl/cmd + click is going to the editing screen.

When user just hovers mouse over text, cursor is changed to type cursor (vertical thin line), and alternatively to text you can apply some easy background or effect.

When user holds CTRL and hovers text, cursor is changed to pointer / link cursor and when click is done, user is redirected to link aka editing screen.

It is standard pattern in lot of content editing softwares, wysiwyg editors, and so on.

  • To try and provide a more complete response and avoid downvote, try to provide some examples or a more thorough explanation for your answers. – Michael Lai Aug 4 at 22:38

There are multiple patterns to afford both navigation and in-place editing. Here are a few:

  • "File storage" UIs, such as the Mac's Finder or Google Drive, solve this in a way that privileges selection and navigation over editing affordance, with:

    • single click to select
    • quick double click to navigate
    • slow double click or right-click menu option to rename.
  • By default everything navigates, but allow the user to enter an edit mode, pagewide, in which everything is editable. This privileges bulk actions and is somewhat more cumbersome in the single item edit case.

  • When dealing with a master/detail setup, don't allow in-place editing on the list view, only in the details view. This kind of goes against what you're trying but still retains the benefits of in place editing in the details view where it doesn't conflict with navigation.

  • Have a clickable link or icon for navigation next to the in-place editable field, e.g. Open ⬈, that users need to click on to navigate. This privileges in-place editing over navigation while keeping navigation still one click away, at the expense of some clutter. The link can appear on hover only to hide the clutter somewhat but then may not be as usable. This is similar to the way spreadsheet programs handle URL contents.

Ultimately you'll have to choose how much you want to prioritize editing vs in-place navigation as they compete for affordance. If your users are primarily bulk editing using that screen, you might choose a different solution than if they're primarily navigating. Testing with a handful of users should allow you to compare pretty quickly.

Your Answer

 
discard

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Not the answer you're looking for? Browse other questions tagged or ask your own question.