I need a simple yet elegant solution for making the rows highlighted in red standout from other rows.

Description: The highlighted rows are the new rows that the user has not looked at yet. So we need to mark them somehow so that the user is drawn to these rows. The check boxes are used to depict these new rows. Once the user unchecks the checkbox, the rows become of the same color as other rows.

My Ideas so far:

I give the checkbox at the main product level (image 1), and once the user unchecks that box, the items associated with that row, all become of the same color as other rows.

Checkbox per item

We highlight the new rows with a light color and once the user unchecks the box, the color of the new rows turn into the same color as other rows. This is done at each new row i.e. the checkbox is present at each new row. So the user has to manually uncheck each box once he's done processing it. (image 2)

Checkbox per row

My question: I feel these 2 ideas are decent but could be better. I want to either improve upon these or get some new ideas from the community. Thank you for any help!

  • What do you mean by saying, "....once he's done processing it." What kind of action does the user take?
    – Amit Jain
    Apr 21 '17 at 6:31
  • I simply mean once the user has looked at it and changed the prices of the item according to him. Apr 21 '17 at 6:34

As I understand there are two conditions before the new rows turn noticed/read rows:

  1. The user has read the new row
  2. The user has changed prices according to him (as you mentioned in your comment)

You can make it simpler by:

  1. Display the content of new rows in Bold without any background color to keep the content clean.
  2. On mouse-over of each row display a checkbox on the left and two icons/links on the right that would read 'Mark as read. Edit to change price'.

This will allow a user to choose required action and proceed. In case if a user doesn't want to change price of a particular record they can just mark a row as read.


According to your wireframe, if there are check box in front of each new row, I will feel a little strange. Also, the user must click on those checkboxes. What happen when it comes to responsive view? What happens when a user selects a checkbox? Is the check box kept there or hidden?

For my solution, I will highlight these new row when the page loads. When the mouse is over the new row, the highlighted color will disappear. If on a cell phone or tablet, the highlighted color will disappear when I press the new row.

Pros: Easy to operate and get notified.

Cons: When the page loads, it is very easy to hover over these new lines and gets ignore with those new row.


A new checkbox will appear above the table or below the table. At the beginning, when the user hover the new row, the highlighted color will disappear. When the user checks it, the highlight returns. The user must use this check box to display or not to display the highlight.

Hopefully this will make sense.

  • Okay I understand what you're saying. Lemme try that out. Apr 21 '17 at 6:46

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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