FRONT–END DEVELOPMENT
41
Highlight real-time changes Failing to notice changing information has consequences. When you fail to notice a friend’s haircut, you only risk social embarrassment. But when a user fails to notice information that just updated on a page in your application, the consequences are more dire – she may not know what to do next, and you may lose her as a customer. Build in visual cues to draw attention to information that has just changed. Here are some ways to transform the text on your page: • Change the background color surrounding the item in question • Change the font color or font weight • Consider adding in some animations, either via CSS3 or JavaScript
Todoist briefly highlights text that was just added.
Tip
Regardless of your choice of transformation, you can gradually “fade” the effect back to normal to signal to the user to continue on her journey.