Like button Revamp | xDocFooter Revamp 1

[amilica]

Hello everyone!

As started in this xdocFooter revamp discussion, the like button has certain issues.

Wanting to make the whole revamp easier to tackle, I want to split that initial proposal in multiple parts, this being the first one.

New look

Description

The new like button is a default button with a full or outlined heart icon (depending on the state of the like button) and the number of likes shown in its right.

• if it’s liked - full heart
• if it’s not liked - outlined heart

The tooltip messages could be improved at the same time with the revamp or at a later time:

• tooltip for state 1: Click to like this page. 10 other people already liked it!
  • I think it’s shorter, it’s got more personality, it invites the user to join the other 10 people.
  • This does require conditional rendering. For 1 or 0 people the message would sound weird so we change it to: Click to like this page. 1 person already liked it!
• tooltip for state 2: Click to unlike this page. Current number of likes: 11.
  • slightly shorter, doesn’t repeat words

Looks (standalone)

Looks (contextual)

HTML

The only things that changed in the HTML:

• taking out the badge class (there are many other instances in which it just shouldn’t exist)
• changing btn-primary into btn-default
• using icons for each state (let me know if I didn’t use icons the right way in the XWiki context, would like a practical example because I don’t know another way of doing this better)

Not liked state

<div class="like-container">
<input id="is-liked" type="hidden" value="false">
<div class="like-button btn btn-default" title="Click to like this page. 10 other people already liked it!">
<span class="fa fa-heart"></span>
<span class="like-number">10</span>
</div>
</div>

Liked state

<div class="like-container">
<input id="is-liked" type="hidden" value="true">
<div class="like-button btn btn-default" title="Click to unlike this page. Current number of likes: 11.">
<span class="fa fa-heart-o"></span>
<span class="like-number">11</span>
</div>
</div>

CSS / LESS

The font-size would be the same with the body size. Is the @font-size-base variable the right one to use for that?

.like-button {
display: inline;
font-size: 14px;
}

What do you think about all of this? Should we move forward with this proposal?

[mflorea]

@amilica

This does require conditional rendering. For 1 or 0 people the message would sound weird so we change it to: Click to like this page. 1 person already liked it!

This can be done directly from the translation value, though it can confuse some less technical translators.

@amilica

Looks (contextual)

The like button is not aligned with the tags. Can we fix this?

@amilica

<div class="like-button btn btn-default" title="Click to like this page. 10 other people already liked it!">

Shouldn’t this be an actual button element, so that it is accessible (focusable, reachable by keyboard, etc.)?

+1 for the idea.

Thanks,
Marius

[mleduc]

Thanks a lot. Overall it looks good.

It might be useful to also present how the like button looks currently to ease the comparison.

@amilica

let me know if I didn’t use icons the right way

In practice, we don’t hard code icons like this in the html, we instead use a velocity script service (see https://extensions.xwiki.org/xwiki/bin/view/Extension/Icon%20Theme%20Application#HDisplayinginaScript).
And the list of available icons: https://design.xwiki.org/xwiki/bin/view/Proposal/XWiki%20Icon%20Set
The problem is that we current don’t have a heart icon that would match what you propose for the “already liked” button (i.e., fa-heart-o). This would require a independent proposal to introduce a new icon.

@amilica

Is the @font-size-base variable the right one to use for that?

yes

[CharpentierLucas]

I agree with the proposal.

I had a couple issues with the implementation (div button and using standard icons) but they are already pointed out

Thanks for your work on this revamp!
Lucas C.

[vmassol]

Thanks for the proposal! Keep them coming that’s great

@amilica

Looks (contextual)

I’m not 100% sure what this proposal is about as the screenshots shows a lot of different changes:

• like button colors (no more blue when unclicked) + outline
• tags have a different look
• like is no longer aligned with tags (as noticed by Marius too)
• there’s some concept of live viewers
• there’s a listing of editors and the removal of the page creator concept

I can guess that these are other changes you’d like to propose but it makes it hard to see your proposed change in context. It would be nicer IMO if you could just focus on one proposal, or you could show both if you also want to show it could look like in the future with other changes. Personally I had to start an XWiki instance to see how it looks like ATM.

Current:

So if I understand you’re proposing to change:

• the like button colors
• add an outline to the like button
• change the tooltip text

Currently:

Is that correct?

Globally it looks fine to me. However I don’t like too much the Click to like this page. 10 other people already liked it! text. Sounds slightly too “marketish” to me, especially with the exclamation mark. I think I prefer the current text which is more neutral.

Thanks

[amilica]

@mleduc

In practice, we don’t hard code icons like this in the html, we instead use a velocity script service (see Icon Theme Application (XWiki.org)).

Thanks for letting me know!

@mleduc

The problem is that we current don’t have a heart icon that would match what you propose for the “already liked” button (i.e., fa-heart-o). This would require a independent proposal to introduce a new icon.

Oh, I thought we have the whole set. Will look into that.

@CharpentierLucas

I had a couple issues with the implementation (div button and using standard icons) but they are already pointed out

Will rework the implementation and come back on this, Thank you for your feedback!

@vmassol

It would be nicer IMO if you could just focus on one proposal

I did link the initial discussion and current version of the like button, though I do agree that a visual reminder would’ve helped. Will keep it in mind

@vmassol

So if I understand you’re proposing to change:

• the like button colors
• add an outline to the like button
• change the tooltip text

yes, + also, changing the icons, but as @mleduc reminded me, we don’t yet have the specific icon I’d want for this proposal

[amilica]

@vmassol

However I don’t like too much the Click to like this page. 10 other people already liked it! text. Sounds slightly too “marketish” to me, especially with the exclamation mark. I think I prefer the current text which is more neutral.

I understand your point. I’m thinking that a more friendly tone can improve slightly the perception of the user on the functionality. Liking a page is anyway focused on showing appreciation. The number is there to show how appreciated is that page. It makes sense in my mind to increase the habit of showing appreciation by encouraging it.

[vmassol]

@amilica

It makes sense in my mind to increase the habit of showing appreciation by encouraging it.

I think we need consistency. We don’t write “Edit the page to make it better with your own content!” or something like this when the mouse is over the Edit button. Same for any other alt text we have. So far we use a neutral tone everywhere. For me, using your proposed text is not in the spirit/tone of what we have elsewhere. Now, we could decide to change our style/tone and progressively change all our alt text everywhere. I think that would require a discussion and personally I prefer a neutral tone.

BTW do we say “10 other people” or “10 other persons” in US/English? Also, I don’t think a sentence should start by a number (but I could be wrong).

I’m ok with the current text but if we want to remove some redundancy, we could have: Click to like this page (10 likes)or Click to like the current page. Number of likes: xx.

[tkrieck]

+1 for this change. The new look keeps it clean and in check with the secondary function of this feature.

As for the tooltip IMO we could simplify it as only “Like” and let the number speak for itself as I cannot like a page more than one time and the number will go up when I do the action. In case we really need to be clear (I don’t think we need) maybe we could have the icon and the text separated. Like my mockup made of emojis right here → 20 likes

[amilica]

Oki doki, agreed that we don’t really need to explain a like button too much. Will modify the HTML

[amilica]

The look of the like button has been changed after discussing with @lucaa. The conclusions can be seen in this discussion.

[lucaa]

Can we mark this topic as “solved” given that there is the other thread about the look & feel of the Like?