Product Notifications can be mainly of two types: informational and actionable. Both these types could have further subtypes depending on the context.
Three common approaches for on screen communication include validation, notifications, and status indicators. These terms are used sometimes interchangeably in product design, but they stand for different communication methods that should be used in different circumstances.
- The type of information being communicated
- The urgency of the information — how important it is that the user sees it immediately
- Whether the user needs to take action as a result of the information
Indicators
An indicator is a way of making a page element(beit content or part of the user interface) stand out to inform the user that there is something special about it that warrants the user’s attention. Often, the indicator will denote that there has been some change to the item represented by that element.
Characteristics of indicators:
- Indicators are contextual. They are associated with a UI element or with a piece of content, and should be shown in close proximity to that element.
- Indicators are conditional— they are not always present, but appear or change depending on certain conditions. For example, a promo indicator, may change to indicate if it is expiring soon or only appears if there is a deal for that product.
- Indicators are passive. They do not require that a user take action, but are used as a communication tool to cue the user to something of note.
Validations
Validation messages are error messagesrelated to users’ inputs: they communicate whether the data just entered was incomplete or incorrect. For example validation messages often involve information such as name, billing address, and credit-card information.
Characteristics of validation:
- A user needs to take action to clear the validation message.
- The information in the validation message is contextual and applies to a specific user input that has a problem.
Notifications
Notifications are informational messages that alert the user of general occurrences within a system. Unlike validation, notifications may not be directly tied to user inputor even to the user’s current activity in the system, but they usually inform the user of a change in the system state or of an event that may be of interest. Notifications can be contextual—applyingto a specific UI element— or global—applyingto the system as a whole.
They are an example of microcopy at play – short snippets of text or content that really need to do their job well. This text needs to convey the most important information really well, so that the user can make an informed decision and/or be incentivized to purchase . There is an opportunity to be creative and vary this micro-copy in interesting“contextuallyaware” ways, that contain messaging based of user behavior data to personalize notifications based on their browsing habits, alert them of relevant offers, provide updates or information on the product they are engaged with.
Characteristics of notifications:
- They are not triggered by users’ immediate actions.
- They announce an event that has some significance to the user.
- There are two main types of notifications, which differ based on whether the user is required to act upon the notification:
- Action-required notificationsalert the user of an event that requires a user action. In this sense, they are similar to validation, but since they were not sparked by the user’s own action, they require a different design. Action-required notifications are often urgent and should be intrusive; for instance, they could be implemented as modal popups that interrupt the user, forcing immediate attention and requiring an action to be dismissed.
- Passive notifications are informational; they report a system occurrence that does not require any user action and they usually announce an event of potential interest to the user. Passive notifications are typically not urgent and should be less intrusive. A typical implementation of a passive notification may be a badge icon or a small nonmodal popover in a corner of a screen.
Color Considerations
It’s a well-known fact that colors can provoke emotions, every color evokes a different feeling or mood in people and therefore results in a different reaction when seeing the color(ofcourse, it is relative since different cultures and countries react differently to different colors).
For example, some color meanings are as follows:
- **Red:**Power, passion, love, negative;
- Green: Growth, money, environment, positive;
- Blue: Trust, peace, loyalty, safety, positive;
- **Black:**Formality, luxury, sophistication, neutral;
- Grey:disabled;
- Brown: Outdoors, food, earth;
- Orange: Confidence, cheerfulness, friendliness;
- Purple: Royalty, mystery, spirituality;