Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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?

mockup

download bmml source – Wireframes created with Balsamiq Mockups

share|improve this question
add comment

2 Answers

up vote 5 down vote accepted

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.

share|improve this answer
    
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 Aug 27 '13 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 Aug 27 '13 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 Sep 11 '13 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 Sep 11 '13 at 14:55
add comment

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?

share|improve this answer
    
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 Aug 27 '13 at 15:00
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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