Initial Discourse badge design spec

Feature
61

Very well put. I’m not suggesting this as a feature, but just for the sake of conversation, on my FOSS community forum, instead of having “bronze, silver, gold” badges, we’d probably want to have different categories:

  • Support
  • Documentation
  • Engine Dev
  • Game Dev
  • Community

These are distinct areas of contribution as well as expertise in our community. So on our forum, instead of choosing which particular badge you’d want to show next to your avatar, you’d choose the badge category, almost like an RPG class. “Oh snap, check this guy out, he’s a grade 22 documenter!”

We’re planning to gradually introduce working teams similar to WordPress Make. Badges would be a great way of facilitating such a structure. Two quick examples:

User tries to join Documentation group

Sorry, you need to have at least 2 documenter badges before applying to this working group. It’s easy though! All you have to do is…

User hits 10 badges and gets reminded about working group

Seems you’ve racked up quite the badge-count as a documenter! Please consider [applying for the docs working group], we’d be happy to have you!

62

I like the idea of badges not being in the immediate periphery of a reader. I also like the idea of a trophy-case / display-case kind of display for them, but it also has to be limited to some degree, display wise. I did some thinking, here’s a rough draft of my ideas (also if you can’t tell I ran out of iconography pretty quickly)

(looks best large)

Pasted image1920×1080 68.3 KB

It would have to be subtle / not taking over everything but of course it would have to scale in the case that the forum used a lot of badges. This is really rough and a little bit off but something like this would be neat. Perhaps there could be an “expand for all of the badges” type button on the right, to expand it into a full on trophy/badge display type thing?

I also like the “sticker” design for badges, but that’s really up to the individual forum, isn’t it?

63

Can you do a few mocks here? I feel pictures say way more than words.

64

One thing I don’t like about allowing a user to select three badges to display under their username is that it would tie us to badge images of about the size in @pakl’s mockup:

//assets-meta-cdck-prod-meta.s3.dualstack.us-west-1.amazonaws.com/original/2X/7/7d7ab8da601039b3e32d3daa1210b34f1e05907d.png

I don’t like having badge images of that size because:

  • it is difficult to come up with meaningful glyphs of that size to represent every badge, especially if you have a large number of badges defined,
  • it is harder to make out what a badge represents, as an end user, and
  • it reduces the “coolness” associated with a badge.

This size works better in my opinion:

We could still let the user select three badges to feature, except that these would end up being featured on their user card and profile page, and we could have simple numbers displayed below the username in the left gutter.

Also I was wondering whether being able to classify badges into custom categories makes sense. I don’t mean as a replacement to the “gold / silver / bronze” categorization that @erlend_sh mentioned but in addition to it, similar to the badge categories on SO. I can see it being pretty useful in situations where you have a large number of badges.

5 Likes
65

So this is what I was thinking.

UI presence

  • a user selects their “spotlight” badge, and this is shown underneath their name in the gutter on the topic page. generic icon, with the badge name. (hopefully this addresses @radq’s points about @pakl’s mockup)
  • clicking on the username/ badge expands the profile card, which has the user’s selected badge spotlighted. there are links to the users’ other badges.
  • each badge is gold/silver/bronze and has an associated “artwork,” which is shown if it is featured. There is a default artwork if one isn’t set.
  • clicking on an individual badge shows who has that badge (like stackoverflow).
  • there’s a badge display cabinet on a user’s full profile page, which would look a lot like the profile popout.

Mockup of a post on topic page

badge-context_01.png899×151 5.92 KB

Mockup of a profile popout

badge-context_02.png899×448 42.1 KB

Badge levels

The gold/silver/bronze system implies the concept of levels within a badge. Each could have a different name/ artwork/ description text, but that’s not necessary. To illustrate the concept:

__“Read a long thread all the way to the end” __

  1. read a 1000 post thread from beginning to end! Yeah!
  2. read a 5000 post thread from beginning to end! Yeesh!
  3. read a 10,000 post thread from beginning to end! Yowzer!

I think this is a neat way to show progression in an area*.

Badge groups

I like the idea of each badge belonging to a category, suggested by @erlend_sh. So for example if there were a forum game, like Mafia, you could create a bunch of Mafia badges which would all be linked together. I haven’t shown this in my mockup but I’m thinking a little label above the badge name in the popout would do. Maybe not necessary for v1.

Actual badges

So in my other post I was talking how badges should be meaningful (perhaps the tone was unfair but I still agree with the general gist), this final section is an attempt to transform @codinghorror’s original list.

Ain’t no scrub
Level: bronze
Casted 1 like, quoted a post, read the community guidelines and FAQ, and filled out your user profile.

Arborist
Levels: bronze (1), silver (10), gold (50)
Replied as a new topic x times.

127 hours
Levels: bronze (1000), silver (5000), gold (10,000)
Read a long topic with x posts from beginning to end.

Good citizen
Level: bronze
Flagged a topic or post, and it was accepted.

Trusty
Levels: bronze (2), silver (3), gold (4)
Reach trust level x.

Socialite
Levels: bronze (5), silver (20), gold (100)
Get x new unique visitors from topics you’ve shared.

Perfectionist
Levels: bronze
Edit a post.

Frequent flyer
Levels: bronze (3), silver (14), gold (31)
Visit the forum and read posts for x consecutive days.

.* with thanks to StackOverflow and Advance Wars.

4 Likes
66

Member of the Month, of the Year? We have what are called community awards, and at the end of the year, the community nominates members for specific awards (14 different awards, I think), and then they vote. The recipients get a badge of honor to wear for the following year.

1 Like
67

If we have the ability to show one preferred badge under the avatar then do we really still need titles? Wouldn’t it be better to replace the current titles with custom badges?

EDIT: Or alternatively, assign titles to badges and allow setting a title from a badge. That way you can still have custom titles without creating a badge for it and we don’t have to introduce additional clutter under the avatar.

2 Likes
68

That seems like the type of thing that would be much simpler to accomplish with custom titles. That’s what I’ve done in a couple of cases on my forum.

2 Likes
69

Tl;dr: I think our main dispute here comes from the fact that we are trying to implement one system to accomplish two very distinct goals which result in systems of very opposite nature and requirements.

On one side we are talking about training user behaviour with an automatic system of system-trackable actions and events.

It’s basic premise is that the more time a user spends with the system the more badges they get and as it also serves as an motivation in the on-boarding process, those numbers run very high rather quickly. It is the boys-scout-system of badges to keep people motivated putting their time into the system. Therefore wanted to reduce the badges down to some number makes total sense as the “value” of one badge is rather insignificant. I wouldn’t take the count but more a weight for that, but that is an implementation detail. Because of its nature I compared the system before also as a Karma-Points-system. I think other totally fair comparisons are with “levels” (named “tiers” or “category” in this case) or experience points of computer games: those are numbers you collect over time.

This is the system @codinghorror, @awesomerobot and @geek are mainly talking.

On the other hand we have the goal of achievement-visiblity and recognition of extra-ordinary action.

Like the example @sam made earlier for “great contributors”. These badges are awarded for extra-ordinary behaviours, therefore rarely are given by any automatic system. A great example of this kind of badge is the “Medal of Honour” which the US grants for “for personal acts of valor above and beyond the call of duty” (Quote wikipedia). It reward behaviour above the expected. These badges don’t have an direct order or hierarchy, nor can their value be expressed in any number. And if this badge isn’t visible it loses purpose of honouring a great achievement. Another kinda fair comparison would be the “10 kills without being killed”-badge in classic games like quake 3 – it is really hard to do. This is the kind of system that I and @erlend_sh are talking about (not with such hard achievements though)

The problem with the two systems is of their rather opposite nature. While one is about the many, the other is about the few. In the first system the majority of the users will have many badges each, while in the second one only very few will have any at all and still very few each. And I don’t think there is any one visual representation that can serve both purposes. As the second system requires to be very visible and “cry for attention” while in the fist it would definitely be noisy and way to cluttered.

So maybe we should (for spec v1) just pick one of the two approaches and make a kick-ass system for that instead of trying to marry two opposite goals. I’m fine with trying to approach the karma-level-thing first and talk about something like the Mozilla-OpenBadges-Backpack-System after. Maybe we can still marry them then, after we’ve had some experience with it.

4 Likes
70

Good summary but I don’t think we have to just focus on one.

The second goal of achievement-visiblity and recognition of extra-ordinary action is, as I pointed out in my last reply, essentially already covered through the current titles. All we need to do is allow some special badges to set a title and then we have something that we can use for extra-ordinary user without cluttering every avatar.

What we need for the first goal is to agree how and if those badges would be publicly visible and whether we do want to show some form of score near the avatar.

71

What I would hate is if only one preferred badge were to be shown. If there is an accumulated set of things one could be proud of, there is no reason to show only one - all of them are worthy.
And since all of the badges represent positive behaviour or deeds, either all or none should be shown. The former obviously fills the post with rubbish due to the existance of way too many badges.

So if at all, in my opinion only manual badges should be shown next to posts. These really mean something, people care about that. No one really cares if the author of a post once read a 500 posts topic. Automatically assigned badges should only be shown in the user profile because in most cases, all they serve is the purpose of motivation. And if they do serve some kind of bragging purpose (in my eyes e.g. having a total of more than 100 likes or something), one still cannot tell what the history behind that is. Why did user X get so many likes? Why did user Y flag a thousand posts? In that case, it really makes no sense adding this to any badge calculation. There’s a history behind that, and numbers cannot communicate history, they can only communicate amounts. If someone really wants to know more about that history, he will certainly visit the user’s page and filter things by recent badge achievements like on SE.

So why not show the number of manually assigned badges (MABs) below the username? Clicking on that would either open a pop-up showing all the MABs and a link to the corresponding profile section (recognition without leaving the topic page) or it would lead directly to that section.

Alternatively, one could only show MABs in the little user popup. A user’s amount of MABs could then be displayed as plain-text.

72

How would the badges in category 1 (training user behaviour with an automatic system) contrast with trust levels? For a user those would be just about identical. This is analogous to the titles-achievements situation.

I say keep up the good conversation and simplify. simplify, simplify!

73

Frankly I’m fine with v1 just being “a numbers game” and leave the identifying badges for v2 like @lightyear proposes.

If we were to also include some special badges that carried a user title attribute that you could opt to show under your avatar, I think it’d be nice to reflect that somehow in the badge counter as well. One way to do it would be a subtle tacked-on addition to the simple badge counter:

discourse-hat.png664×592 33.1 KB

discourse-olive.png664×592 34.4 KB

Alternative with banner:

Alternative with special glyph for badge counter:


10 Likes
74

Here’s a rough of what I was thinking… it mirrors a lot of the “just use numbers” mocks in here. Keeping these simple as they’ll ultimately have to be themed. Maybe the option to add a glyph could make them a bit more interesting to look at.

Screenshot 2014-03-03 09.14.53.png1265×556 55.2 KB

10 Likes
75

I don’t see them as being separate goals at all. The same badge engine will be used for all badges. Automatic badges will use the rules component of that engine, while manual badges will bypass it and be applied to the user whenever a mod or admin clicks a button. “Liked your first post” and “10 kills without being killed” are both automatic badges. “Great contributor” is a manual badge.

My understanding is that the “only show one” concept is for the avatar card. There would still be a trophy case on the main user profile.

That “just use numbers” thing really grates on me. It doesn’t look aesthetically pleasing at all. I much prefer @haiku’s proposal.

76

It’s tough because ultimately most people end up theming Discourse… so I’d rather start with less and allow admins to add more for their own forums, rather than build in complexity that people end up taking out.

I agree that there’s probably a balance to be struck between simple and visually interesting though…

1 Like
77

What I don’t like about the numbers approach is that it focuses on completely irrelevant granularity.

It doesn’t matter much if user A has 4 badges and user B 6. What is interesting is that user B has 20. That’s why I would prefer a tiered approach to the display of progress. I still question whether the badge-count is really that important and whether it would be better to have a score…

Why not have some form of tier visualization on the avatar for all and then allow special badges to set the title, maybe with an additional icon?

78

Personally, I love the usercard (nitpick not sure about badge styling or bright yellow)

I worry though we are entering specification paralysis here, so want to push forward.

We have enough to go by on this topic for a “version 0”. Since I will likely be maintaining this long term I will take the roll of benevolent dictator for dictating the implementation.

This is what I would like to see for version 0:

  • A badges table with (id, name, type)
  • A user_badges table with (id, badge_id, user_id, granted_at, granted_by)
  • Badge name used as the key to localize name and description for badges, description can include html for links.
  • An API to grant users badges and revoke
  • Usercard UI similar to what @awesomerobot suggested
  • User page UI somewhat like usercard
  • An admin UI to grant/badges badges to users (in admin user page)
  • An admin UI to grant/revoke badges to groups in groups page (and keep them up to date)

That is it for phase 0. I want this PR in first, then we can build on it.

Phase 1 can focus on dealing with numbers vs badges next to users to the left. It can start dealing with automatic awards. and so on. I just want the groundwork in first.

cc @radq

9 Likes
79

I worry though we are entering specification paralysis here, so want to push forward.

Good plan! :+1: There’s little reason that stuff can’t happen while everyone’s still discussing things here.

It might be worth considering the ability to grant badges through a usercard (obviously not a priority)… could add a “grant badge” button there for admins. If I want to grant a few badges in a topic it could save some time as opposed to clicking all the way through to user profiles each time (though maybe that barrier is a good thing…)

80

maybe we should allow for a text comment on why a badge was granted (for manual awards).

1 Like