I'm designing a page that needs to let a user upload a spreadsheet with content to be imported into my database. I anticipate that some of these rows will contain data that's fine in Excel, but invalid in the destination table, for instance, a string field that's too long, or a user id that's a duplicate of one already existing: standard validation stuff.

So I need some intermediate UI to take the proposed import and show the rows that are valid and invalid, and for the invalid rows, to indicate what the problem is. So far, I can imagine something like this:

enter image description here

The problem is that I'm not seeing how to indicate what the user needs to change in a granular way. I could highlight only the invalid cells, but I'm not sure where to put a more detailed message, like Reference name must be a maximum of 6 characters (which would be true for the whole column) or This user id is already in use (which would only be true of the one cell).

Normally, I'd put this next to the offending input control, but the message might not fit in the cell, and I can't put it before or after the grid, because there might be dozens of them, and I can't see how to stack the messages for a single row before or after that row, because there might still be a few of them per row.

What's a good UI pattern for a situation like this?

1 Answer 1


Try outlining the rows with an indicator which describes the specific formatting error. Provide a link with further explanation if needed.

One thing you can do is to provide specific invalid formatting hints at the row level, by a means of a tooltip/icon, or even a pseudo row you create underneath that explains the exact error (and how to recover or fix it if possible)

Since you may have lots of records, consider a toggle so users can quickly filter on exactly the invalid rows. You can also display a count above the table indicating the total records, and total invalid.

enter image description here

  • Ooh, that's good! Let me give that a try. Nov 20, 2019 at 14:36

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.