Add a 'Kudos'/'Like' Button

[Minenash]

We have view numbers, but that doesn't really tell us if that's a good post, and while comments can give some view, very few people are going to be writing "that was good read", on every post they liked,

[RhettTrickett]

Yep, agreed. We'll add this soon.

[RhettTrickett]

Been working on a prototype, what does everyone think of this?

cc @drenther @Minenash @chauhankiran

[Minenash]

It looks good, but feels a bit out of place being the only raised item on the page besides the comment box. Personally I think it would be either on the bottom of the article. And if it were to stay in the side, where would it go for mobile users?

[RhettTrickett]

Thanks @Minenash - So we want this action to be easy to find and appealing to perform if readers find the post insightful. Also, if someone is reading a long post and they're enjoying it they should able to upvote it straight away without scrolling to the end.

For mobile, though, I was thinking of putting it at the bottom of the post, as you suggested, or keeping it sticky in the bottom right corner. I think the former might be better though.

I've also just finished hooking this up to notifications, so just need to sort out the mobile layout now and then it should be ready to ship!

[Minenash]

Actually there's one problem with the design when there is no upvotes yet: it looks like a back to top button.

[RhettTrickett]

Yes, this is a fair point. Someone else mentioned it too. I've tweaked the button to look more elongated and removed the shadow (which is also common for those buttons) and added an outline to move it closer to the Able style. I've also added a title attribute. Think this looks a bit better. Thoughts?

[Minenash]

How would it look with no outline, and it was the arrow and the number that turned a dark green?

[RhettTrickett]

Okay, I've tried that but it was quite difficult to see when an item had been upvoted/given kudos because a dark green colour that passes WCAG 2.1 AA looks very similar to grey or black.

So instead I've removed the outline when not upvoted and filled the background colour with an accessible dark green. I think this makes it all a bit cleaner than the outline. What do you reckon? I've also added in the mobile button.

[chauhankiran]

If in confusion, why not add +1 e.g. + followed by number of likes as text or like button with number of liked?

[Minenash]

I have to after with ^. The ^ icon still looks like a "to the top", so when their would be 0, it might not be obvious.

What about removing the icon, so it's just Kudos - #(or replacing it with a 👍). Re-adding the outline in the same style as the follow button, and put it underneath the outline

[RhettTrickett]

This has been added to the bottom of posts, for now. This is a simple web and mobile version that I wanted to get out sooner. We can fine tune the right side upvote button to be more balanced and subtle. You can also upvote comments now.

[Minenash]

Looks great! Though, moving some of the padding from the top to the bottom of the button would imo make it look more with the article. Also, the click box should be as large as the button when it's filled it. Also, if you try to upvote your own post, it fails. I'm assuming this is intentional, so imo it should either just not show up or have the word upvote stricked.

I'm still not sure if I like the term upvote though. It usually implies that there is also a downvote and might also catch Hacker News users because while when you first sign up you can only upvote, after you have gotten enough karma then you would get it. However I'm also not sure what to replace it (and possibly the icon). Kudos is fine, but has to be matched with an icon to make it definitely clear what it means. Like is fine, but if it's only a work, it's a bit short. Maybe it could be "Reader Approved" /s

[RhettTrickett]

Okay, have moved the upvote button up a bit closer to the end of article. There needed to be some distance though, so that it would not blend in with the end of the article. For example, it may look like the last <hr> above the author profile was part of the article.

Upvote button size is determined by padding, a button with no upvotes will be slightly less wider than one that has upvotes. The height is always the same.

I'll give some thought as to how to more clearly present the fact that authors can't upvote their own posts. The suggestions you made could cause confusion about upvotes potentially being 'disabled' on a users post, with something like a crossed out state.

As for choosing the upvote term, this is something I've asked a lot of people about and given a lot of thought. Here's some of the reasoning why we're going for upvotes for now:

• Likes are too familiar with traditional social networks like Facebook, Twitter and Instagram. Don't really want to align the Able brand with that. Developers are extremely sceptical of these networks.
• Kudos sounds interesting and new in theory but it's quite awkward to use in practice. I've tested lots of examples for button labels, like: Give kudo, Give kudos, Give kudos 5, Kudos 2 and have never quite been happy with how it appears in the UI. It just never seems as readily interactive as something like the term upvote. Our monochromatic colour scheme doesn't help with this either.

Upvotes was settled on because:

• It's familiar to users of HN, Stack Overflow and Reddit (this is closer to our target users)
• Its meaning and purpose is easily recognisable. Upvotes will be used to drive ranking etc.
• Its grammatical states are simpler and more easily understandable than Kudos.
• Downvotes will be introduced at some stage when you reach a certain level of reputation like on HN as it is a good way to determine if you are adequately familiar with the culture on Able. Downvotes are a useful mechanism to discourage antisocial behaviour and its pros generally outweigh its cons.

This is not set in stone, it's just the first direction and we can evolve and change it over time. However, defining something like this for a platform has to be done very carefully and so this is why we need to play it a bit safe here during the early stages, just so that we can get something out for now.

[Minenash]

Not sure if this should be it's own issue, but it'd be cool if your upvotes were displayed under your view counter. Visual Example:

[RhettTrickett]

Yep, we’re working on this currently!

[RhettTrickett]

Closing this for now. Showing upvote counts is being considered as part of a karma/reputation feature but we haven't got something we're happy with yet. When we do it will be added to the Follower and Post views counts in your summary card on the left of your newsfeed.