I have a chart that is mostly used for viewing, but can be edited. It is a bar chart of percentages (beneath the bars) that can be edited. Unfortunately, if I display the fields the table becomes more cluttered and more difficult to view. I have seen, in many apps (such as Jira), where a field is only displayed as editable when the user hovers over the field. This is an app that the user will be using regularly.

Does anyone know of any studies that cover this type of UI?


download bmml source – Wireframes created with Balsamiq Mockups

2 Answers 2


The main challenge with inline editing are:

  1. Discoverability
  2. Clarity of state/When does system save

For discoverability, you want to bring up the field outlines when the user moves around naturally. In your example, I would suggest do it on mouse over of the specific bar in the graph and not just the text label. Then on click it should become edit field.

For save, you have two options:

  1. Auto-save : On mouse out, auto-save and transition the field to a display. This communicates the state change to the user. But auto-save comes with a lot of baggage - it should be consitently applies and you have to handle undos.
  2. On mouse out, if the value of the field has changed, keep it as a text field. This tells the user that information has not been saved. This is simpler to implement.

I have used this approach a lot. A product that I designed a while back is a survey creation tool - http://Insightify.com . There I wanted to get a preview of the survey as the user is building it, so inline editing like you described was applied extensively. The user feedback has been great.

  • Thanks. I looked into Insightify, this is exactly the approach I am talking about. Can you elaborate on the kind of feedback you received? Did people have any trouble discovering this function and if so, did you make any changes to account for that?
    – rdellara
    Commented Aug 27, 2013 at 14:52
  • 2
    No discovery was not a problem in our case. Insightify is used by very non-tech savvy people to regular researchers who are active online. I initially targetted the product toward UX folks and the feedback on the affordance in general was very positive. Auto-save was definitely challenging technically and allowing undos was so complex that we had to backburner that.
    – Alok Jain
    Commented Aug 27, 2013 at 16:58
  • Sorry for the technical sidetrack here, but you could just catch the events with JS and store them with Ajax, then undo with a button and/or ctrl+z? (asking because I'm working on a similarly responsive app)
    – Dirk v B
    Commented Sep 11, 2013 at 4:12
  • I agree it's possible.. but requires fair amount of work to define the right granularity, handle any other related events being fired, track it across sessions but then how would multi-user scenarios be handled. Along with Undo, you'll want to offer redo. Just more things to think and define , but I agree the tech exists and it has been done in past.
    – Alok Jain
    Commented Sep 11, 2013 at 14:55

As I rule, I try to avoid using hover for any actions that the user might want to perform. Hover is great for giving out extra information, but an action (or access to an action should be available on click. What will happen if the user is on a touchscreen without hover capabilities? Will that option not be available for him/her?

  • The hover on touchscreens is a concern. The application I am working on has a recommended minimum screen size. Currently the vast majority of screens out there are smaller (tablet, phone) than this size. The app will be responsive, so I could have the fields display at smaller sizes. As this is a datagrid heavy app, it is relatively unusable at phone sizes, and we will have an iPad app, so I think in our case the hover problem is very much minimized.
    – rdellara
    Commented Aug 27, 2013 at 15:00

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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