I have a news app & site. It's educational, so the idea to encourage users to read lots of items.

What are good visual design markers to indicate an item is read?

Things I can think of are... greying out the item, putting a little corner downfold...

  • 2
    I think you need to provide more information. Who are the users? College kids, grade school? Do the users have incentive to read the items?
    – Mayo
    Commented Feb 3, 2016 at 20:55
  • Adults. It's a responsive site which is also deployed as a phonegap app. Incentive would be... that it's an interesting headline!
    – Alveoli
    Commented Feb 3, 2016 at 21:14
  • 1
    I'm a little confused. What is the objective? To encourage specific user behavior? Or to let users know at a glance that they've already viewed certain content? Commented Feb 3, 2016 at 21:30
  • 1
    Definitely need more context here. You have one answer so far that assumes content is presented as icons. What if it's not? What else is in the view? What similar patterns already exist in your app? Commented Feb 3, 2016 at 21:58
  • Within the context of SE, here's how my userscript solves the problem of distinguishing read vs unread. Commented Feb 3, 2016 at 22:03

2 Answers 2


I think you need to work out all the different types of interactions and states that the element can have before you can decide on the best way to represent it, because you will need to take into account of what are some of the expected user behaviours, what the standard conventions are and whether you can cater for changes easily in the future.

Just to give you an idea, some of the behaviours I know of and have seen in the past:

  1. Read - represents something that the user has read, either because there has been a scrolling action associated with the page/content, or it has been actively marked as read by the user.
  2. Mark as read - not necessarily read by the user, but can also be used to differentiate it between items that the user has not even looked at so that they can skip it next time they are looking through the content
  3. Save for later - different from mark as read because the user may have not finished reading or want to come back to it later
  4. Favourite - marked as significant for various reasons by the user, but mostly so they can come back to it at another time

And as mentioned before, the interactions can also be based on whether it is user driven (i.e. they click a button to change the state), or if it is implied by the user behaviour (i.e. they scroll through a page).

So I think if you look at all the information and states you want the object to have and consider all the different points from the answers provided then you will be able to come up with something suitable.


There are so many ways in which you can show an item is read. You can play with greying out, using green highlights, showing a 'read' label hovering over the thumbnail of the document, showing a green tick, etc. Here are some quick sketches - enter image description here enter image description here

I think based on the user group you are targeting and the kind of data you have, adding slight gamification elements would be great to encourage users to read more. If you could provide more details about your platform and user group, it would help everyone give you specific feedback.

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.