Inline Editing for Select Lists?

Question

Our application is very heavy on data entry and must display pertinent data quickly and in an easy to peruse format. We have been moving towards an inline edit functionality wherein forms are by default in read only mode and become editable on click.

This has been fine for regular text fields and drop downs etc., but we've hit a wall with select lists. What we want to do is by default display only the selected or 'active' list items, and on click reveal the full list for users to select from. In our testing the read only and click to edit has been very confusing and we need to figure out a better solution - thoughts?

Answer 1

Hmm... good question. Personally I would find it intuitive as all other elements worked the same way. I'm assuming on hover you also show the word "EDIT", if not , you should.

One thing to try is in the read only view, add a last line to the view in smaller font

[V] option 1
[V] option 2
+3 more unselected options...

It would help if you explained the exact problem in your testing. Is the problem with all edit options or only with select? The hover EDIT should help with both the problems I'd think.

Answer 2

Consider the difference between a label and an input. The inputs are <input type="text"> and <input type="checkbox">. Each input has a corresponding label.

So let's say you have a text input with a label of "Name." Until the user clicks on the data entered, the label is still visible. So why would you hide the label of the checkbox that is not selected?

This is why users are confused. You are hiding labels and inputs. Checkboxes are inherently editable. Leave all the checkboxes visible and users will understand they can change a checkbox just as they can change a text input.

Are you also hiding labels and input fields is a text input is empty? Then how would anyone know that they need to provide that? You are asking users to somehow know what is hidden.