User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It only takes a minute to sign up.
Sign up to join this community
I noticed that Facebook, Instagram and other well designed apps separate the Like and Comment buttons from their counts. Any ideas why they do not put the counter inside the button? Maybe have a split button to vote or to see who voted?
To may people, combining Likes count and Like button would seem natural.
In my opinion there are three main reasons for that.
First thing is that there are two different on-click (or: on-tap) functionalities of these:
There is a different importance for the user between seeing something and triggering a change (actively liking or leaving a comment). Representing the first with a bare text and the second with a button reflects it quite well.
Secondly, both "Like" and "Comment" have double meanings: one is verbal ("to like", "to comment"), and the other is substantival ("a like", which is a neologism, and "a comment"). Grouping these two meanings would lead to mixing these contexts, so it would not be good for the UX. If you do so, you would have to visually distinguish the two meanings:
The other reason may be the tap zones. If you group both verbal and substantival, you would have to make sure it's easy for an user to click/tap the one he wants (due to the different importance). This would result in a necessity of creating quite big click/tap zones for checking the number of likes/comments (if they were left small, there would be a risk of triggering the actual like/comment, inconvenient for the users). This necessity would lead to a significant waste of space, as extending the numbers would eat up space now used for the buttons. Being given a limited width (especially on mobile) it is therefore good to split buttons from numbers, which allows for quite big buttons and quite separated "number of" texts (grouped together, as misclicking/mistapping does not actually trigger any important action from the user).
In User Experience we like to group things together which have the same logical meaning. It can be a bunch of buttons like video game control or media player control. But you can also group things together based on what kind they are. Such as your example where "Like" count and button can be one group and "Comment" count and button another.
Seem like the designers felt that grouping buttons and counters was more important than likes and comment groups.
This could also be a localization issue. "Like" and "Comment" are fairly short words in English but do need surprising amount of space in some languages. Having the numbers in a separate place from the actual localizable strings would mean it's easier to guarantee everything works out in most languages.
Some reasons I can find for this:
Enabling the reverse action, namely "Unlike".
The famously-quoted Fitt's law: you want the responding areas to be large, so users can click them quickly and accurately, especially in the mobile/touch context. It would be hard to achieve if the command button would be next to the counter.
Aside from hyperlinks, most text labels are not clickable. This makes the counter a non-clickable element
