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.

Vote button examples

  • 2
    I would surmise that the reason for them being separate is so that the Like and Comment buttons are EXACTLY in the same position each and every time and aren't moved about due to the number of likes/comments. At least on mobile devices you you almost have a muscle memory of where things are like this.
    – Jimajamma
    Mar 11, 2013 at 20:35
  • This is what is done on Google Plus. Users (including me) found it confusing to have two "+1" buttons in different spots (assuming exactly one person had +1'd something before you). Mar 12, 2013 at 16:10

4 Answers 4


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:

  • clicking/tapping the text: just shows more details about likes/comments
  • clicking/tapping the button: triggers an action for liking/entering a comment

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:

  • by adding explanatory text for the verbal part, an example: "Likes (43) [Click to like]"
  • or by adding explanatory text for the substantival part "[Like] People who like it: 43)".

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:

  1. Enabling the reverse action, namely "Unlike".

  2. 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.

  3. Aside from hyperlinks, most text labels are not clickable. This makes the counter a non-clickable element

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.