How To Use Status to Style a List

As computer programmers we often get stuck thinking in binary.  Things are either true or false, black or white, on or off, good or bad, pass or fail.  Although computers think this way, the people who use the software typically do not.    We can use our skills as human beings to create a better user experience for our customers.

One particular place I like to take advantage of this is on list pages.   A list page is simply a page, usually with a table on it, full of data that the user can interact with.  It may be a list of pending orders, a list of products, or in my example here, a list of coupon codes that can be used as a discount on orders.

This is a good simple data form.   The columns were chosen carefully to make the data concise and easy to understand.  Lets examine how we can use status to our benefit to make this even more clear.

We have 4 coupons in the list.  The first 2 are active and will remain active forever (or until we manually cancel them).  The 3rd one has an expiration date on the first day of next month, so it will expire shortly.  The last one is already expired.

Using our typically binary mentality, we might wrongfully use status to format our data:

At first glance this looks ok, because it helps us differentiate active coupons from expired coupons.

Pet Peeve: Using red for off/inactive states.  Red is a warning indicator.  It indicates something is wrong, or alerts you that something is about to happen.  The list above is neither of those.  While we were correct to differentiate our active coupons from our expired coupons, our use of red made the problem worse.

The correct answer here is to determine what information is most important to the user and to prioritize it.  Currently our expired coupons are the primary focus, which is backwards.  I like to switch into greyscale for inactive states like this as it subconsciously gets itself out of the viewers eye.

We can take this even a step further and style our warning state as well.  The 3rd item in the list will be expiring soon.  It’s not a problem indicator, so using the red style isn’t appropriate.  Rather, I like to use an alert icon which draws attention to the line without taking much away from the other coupons.

This provides much more value to the customer without cluttering up the interface with more data.  There are many online applications which could benefit greatly from these small details.   Online banking, social networks and medical applications especially need this kind of help.