How to create a custom textbox with a label and value

Question

I am not a designer but I am dealing with a task to implement a functionality. I have to develop a working UI where a user can enter values into text-boxes inside a grid. While entering these values the user should have a reference value, which is different for each text-box in the grid. I therefore want to design a text-box where the user sees the reference value while entering the values. Can anyone suggest a good design to solve this problem?

What I have thought of is having a custom text-box with an uneditable label on the top left of the text-box, while the other area of the text-box is editable (to enter the value).

So as seen in the image above, the top left is where I will show the value to be referred, while the white space is a text-box where the user can enter the value.

Below is another image with what I want to finally achieve:

If my proposed solution is a good one then how do I implement it? Are there other solutions anyone can suggest?

Answer 1

I find the approach you present quite clear. I would simply organise the values without adding oblique lines and use some opacity to differentiate the elements.

In the image one of the fields is hovered, so it's buttons edit field and edit comment appear, which would open a simple dialog:

Normally the edit icon wouldn't be necessary as it is the only action. But in your case you have an extra action which is add a comment. These could be the possible interactions.

1. Click in empty Field T (there are no edit/comment icons)
2. Add value in Simple Dialog from Field T
3. Enter
4. Add comment in Simple Dialog from Field T
5. Enter

Finished. Edit field:

1. Click in Field T (not in edit or comment icon)
2. Edit value in Simple Dialog from Field T
3. Tab
4. Edit comment in Simple Dialog from Field T
5. Tab
6. Edit value in Simple Dialog from Field U
7. Tab
8. Edit comment in Simple Dialog from Field U

etc.

Depending on the situation if the values will be changed without the need to change the comment, you could skip the comment edit (4+5) in the above workflow.

Answer 2

Use color coding

Color coding differences between reference and actual values could help users quickly locate problematic fields. You can use colors or simply highlight a table cell with grey color.

---

Update:

when there is a mismatch between actual and reference value a reason should be entered

To put descriptive information in the intended field you could use a Popover. They are great for quick edits and entries. An input field is presented in-context to the related data so users don’t lose orientation in the data table.

Then the entered description could be displayed as a tooltip. When you want to check why a particular cell has a mismatch user just hovers over it and reads the description. This way a lot of screen space is saved.

Answer 3

You can have a textbox and reference value as a placeholder text and when the user clicks on the textbox the old value disappears and he can enter the new value. For example : Search Box

Answer 4

Like all elements of a UI’s design, consistency with label positioning helps users and minimizes errors. This means it’s best if you can use the same approach in this form as in the other forms.

I suppose you will use an inline editing for this table (datatable probably) and you will have an input in every cell with the reference value as a label.

As development method, the label shouldn't have an absolute position necessarily. You can have a smaller height for the input than the cell and position the label before.

The advantages of having the label on the top of the input are:

• the user may be able to see the label and the field within one glance;
• allows for different label lengths and the width is bigger than if is in the corner;
• easy to implement.