Tables are an essential part of the user interface that helps users to visualize large data at once in an organized form. Providing an easy to use experience for a data table is a challenging task when you are dealing with large data.

Tables have several elements including pagination, editing, filtering, sorting, show/hide columns, search, etc. that a UX designer needs to take care of while designing a table. This article describes a few ways of displaying input validation messages when users are performing inline editing of table content.

What is Inline editing?

Inline editing provides a way of editing the table content while remaining within the same page without navigating to any other pop-up, dialog, or page. The users can simply click on a row or cell and edit its text. This helps to change the content instantly without moving away from the current view.

This is a convenient and quick way of editing the table’s content. If you take the user to another view like a pop-up or dialog, they will lose the context of the current view, items, and their details.

The layout of a table and its content
Inline editing of content in the table’s cell

---

How to do inline editing and input validation?

When you are giving the users an option of inline editing the table content, there is a need to provide an approach of input data validation. This input validation approach can easily be related to a form where users enter the input and the validation is being done at the same time along with the input control.

However, since the table is a container that can have large data, finding an appropriate way to display the validation messages can be a challenging design problem. Below are a few ways to display UI messages when the user is entering and editing the text in the table.

Along with the cell that is being edited

The simplest option is to provide the error indication along with the cell the user is currently editing. Just like inline validation in input forms, display an error icon along with the cell that helps the user identify that he has entered an invalid input in the cell.

Hovering on the error icon displays a help tip explaining the error and the way to resolve it. User can follow the given guidelines and enter a valid input in the cell to remove the error.

Below the row or cell that is being edited

Another option is to display the error message below the row where user has entered the invalid input.

Using this method requires an extra space below the affected row in the table.

And providing the error below each erroneous row will require additional space in the table unless the user removed the error and entered the correct input.

---

---

On top of the current view

Another good option is to display the error message on top of the table. When the user has entered an invalid input in a cell in any row, the error message displays on the top.

The affected cell will display in red color so that the user can identify the error easily and make the necessary corrections.

The important point is to keep the error message on top of the current view otherwise error message can hide if the user has already scrolled down the view for a large table.

The same error message will display the detail of errors if it occurs on multiple rows. The error message will hide when the user removes all the incorrect entries in the table.

Changing the row color

One more option is to change the background color of the row to indicate the invalid entries. The details of the error can be displayed on the top of the current view that will hide when the user resolves the error.

Following in any of the ways given above can help you better handle the input validation problem in table design.

---

Thanks for reading.

Subscribe for more related articles at UX World.

If you have any questions, contact here: Facebook | YouTube | Twitter| Instagram | Linkedin