The number in notification icons is generally displayed on the right side of the bell icon, what is the reason behind this?
Is there anywhere you have seen the reverse where the numbers are on the left of the bell icon?
-
Usually when one has a list of numbers like on any bill or receipt, if numbers are aligned right it is easy to do the calculation as there decimal place matches on below the other number. This might be the reason behind putting that count on the right side. Personally I haven't seen the reverse where the numbers are on the left of the bell icon. – Codesigner Dec 27 '19 at 6:23
From your description, I believe you are referring to a Badge component. Badges are used as status indicators on many places like user profile, mailbox and bell icons and sometimes it can be in the form of a numeric counter for a running tally or just a dot indicating the status.
About the positioning, there is no rule that states explicitly to position the Badge on either left or right, however, If you are designing for users who read LTR then by default it is expected to be on the right side to be consistent with the rest of the content. Also, It will help users (who read from Left to Right) to check the icon first for the context, then the badge for additional info.
According to Material.angular.io, The default position of the badge is 'above after' (Top right) and this can be changed if necessary.
Material-ui.com also gives the option to place the badges on either of four corners.
You can read more about it here:
https://material.angular.io/components/badge/overview
Following is my interpretation:
The numbers are placed on the right of the notification icon, to go with the user's reading pattern, which happens to be Left-to-Right (LTR) as per your example. I suspect that the position would be on the left side of the notification icon, for the users who read from right to left.
Notification with the icon on the left and the count on the right, tells the user the following:
Event Type (notification) + How Many (the count).
The common pattern followed everywhere is placing the count in the top right corner. The interpretation is easier when the count is placed on the top right rather than top-left because the first you will check is what the icon represents then the count.
