Improving discovery of the badge title feature

[erlend_sh (Erlend Sogge Heggen)]

I’d like to suggest some simple UX changes to increase the discoverability of badge titles.

Badges used to be a big deal on my old forum. Users would be proud of their newly earned “Contributor” badge, and would sometimes congratulate one another at the sight of it. After migrating to Discourse I re-granted the “Contributor” title to all of our existing contributors. However, hardly any of them seem to have picked up on the fact that they can use it as a title for an extra piece of flair.

I’d like to suggest two simple UX tweaks that I believe could result in a significant uptake in the use of badge titles.

First, I’d like to add an extra snippet of text underneath badges that have this special property. The titlehyperlink at the end would be the same as the main link; it’s just there to draw the eye to something a little out of the ordinary.

(No, Read Guidelines can’t actually be used as a title)

Second, it should be possible to start using the title via the badge page itself, because that’s where the link takes you.

There’s been some talk about overhauling the badges interface, but until that’s on the agenda I think this would go a long way.

[erlend_sh (Erlend Sogge Heggen)]

As an added measure, being able to assign a default title would go a long way. @sam

I’d like to force-assign the Contributor title to every user who receives the Contributor badge and does not already have a title selected.

[tobiaseigen]

@erlend_sh I’m with you on both of these suggestions. Awesome, exciting ideas.

[erlend_sh (Erlend Sogge Heggen)]

[quote=“erlend_sh, post:2, topic:27372, full:true”]
As an added measure, being able to assign a default title would go a long way. @sam

I’d like to force-assign the Contributor title to every user who receives the Contributor badge and does not already have a title selected.
[/quote]This is possible now, yay!

Meanwhile, the main topic stills stands. My users can still not fully appreciate what comes with a badge. Not only are Title-granting badges frequently overlooked, but users who attain Regular status don’t notice!

This little textfield addition would help with the latter problem as well, because then I could link to my Lounge’s intro topic. Furthermore, promotional PMs would also be a fantastic addition.

[designbygio (giorgia)]

Explain a feature (use badge as title) can help users but is also a sign that something in the UX is not working, otherwise users will just disocver alone these feature.

Since we are aweare of potencial bigger improvements for Discourse badges UX system, i would say that is a nice compromise until a more solid solution is found for highlight badges.

In addition to

• add text under notification
• use title from badge page/link to title setting

we could:

• give hover state to title/link next to each user (i discover just now that you can click on it!)
• show user card on hover instead of click (at least on big screen)

[erlend_sh (Erlend Sogge Heggen)]

@designbygio

give hover state to title/link next to each user (i discover just now that you can click on it!)

Can you take a screenshot of the title you’re talking about? I thought you were talking about something like your “Contributor” title:

… but that title is not clickable.

@designbygio

show user card on hover instead of click (at least on big screen)

I don’t agree. Start a new topic for this if you’d like to push this further.

In short: While an on-hover display might be slightly beneficial to badge discovery, many users would surely find this annoying. There are extremely few (good) examples of modal boxes displayed on-hover in mainstream application, and for good reason: On-hover is not a guarantee of intent, and so the usefulness of the on-hover action relies entirely on how likely the user is to hover their mouse over that avatar when they do in fact mean to view the avatar. Every time that is not the user’s intent, it’s an annoyance, and a pretty disruptive one at that.

[designbygio (giorgia)]

@erlend_sh

Can you take a screenshot of the title you’re talking about? I thought you were talking about something like your “Contributor” title:

yes i’m talking about that title. The thing is that i “test” it on title like: Team or “co-founder” which are links but i didn’t notice that other title like “Contributor” or “Customer” aren’t link.
Any particular reason for that?

About your disagreemnt on hover display, i disagree
What i mean is that I understand and agree with your theorical explanation of on-hover state but it always dipend by different case and different site/ui.
I believe in this case it wouldn’t be that annoying for user since the avatar icon is quite out of the way of normal user’s mouse path. It will not popup wile writing or replaying to a post.
And it will be actually very beneficial for badges, user page, title, … in general to discover other user and create more connections between users.

Anyway, i will create a quick test-branch and open a new topic for this, so we can see directly if is more annoying or useful

[Mittineague]

I wouldn’t’ dare try to decide what is “out of the way of a normal users mouse path” nor would I judge what level of annoyance they might have.

I think if a user is interested in using an available title they would eventually discover it. By going to a Badge page there is the checkmark icon.

But perhaps an improvement would be to display a count of the available titles near the Preferences -> Title setting when more than zero?

[designbygio (giorgia)]

@Mittineague

I wouldn’t’ dare try to decide what is “out of the way of a normal users mouse path” nor would I judge what level of annoyance they might have.

well this is not trying to deciding, this is studying the habits of usual user’s behaviours and design an application and functionality based on those data.
Of course there would be some users that are out of the “common” behaviours nevertheless we need to make the title feature more intuitive for the majority of the users. At least at the beginning.
There is always time for corner case.

Sure a count near to the title dropbox can be helpful but:

• select box already imply there are more options to select
• Our main problem is that most of the people don’t even get to the setting page to change the title because they don’t know what is it. Or rather they know about title feature but they update with new badges much later because they were not aware they can use also that title.

So we need to figured out a solution before the user get to the settings page.

[designbygio (giorgia)]

Start to work on this feature.
But I would need some Rails guideline here.
I figured out that the notifications are created from this file
https://github.com/discourse/discourse/blob/7b6242bfbb52486318d0136d230bc2c5790a52dd/app/assets/javascripts/discourse/widgets/notification-item.js.es6

which display badge name and link. The attributes that this file got are

• badge id
• badge name
• badge slug
• username

In order to add the “this badge can be used as title” just to the badge that can be used to has title, i wanted to send another attr: allow-title
I believe the file that handle the attrs to send is
https://github.com/discourse/discourse/blob/5dbd6a304bed5400be481d71061d3e3ebb4d6785/app/jobs/scheduled/badge_grant.rb

I added badge: @badge to the grant method to see what’s inside of badge but it doesn’t display nothing, not even an error.
I’m also having hard time to debug this part, i’m not rails devs so i really don’t know how to do it properly but i try with debugger, pry and byebug.
The console never stop.

I’m i looking at the right file? How can i properly debug this part?

this is what i change inside the grant method:

user_badge = UserBadge.create!(badge: @badge,
                                       user: @user,
                                       granted_by: @granted_by,
                                       granted_at: @opts[:created_at] || Time.now,
                                       post_id: @post_id,
                                       seq: seq)

unless @badge.badge_type_id == BadgeType::Bronze && user_badge.granted_at < 2.days.ago
            I18n.with_locale(@user.effective_locale) do
              notification = @user.notifications.create(
                notification_type: Notification.types[:granted_badge],
                data: { badge: @badge,
                        badge_id: @badge.id,
                        badge_name: @badge.display_name,
                        badge_slug: @badge.slug,
                        username: @user.username}.to_json,
              )
              user_badge.update_attributes notification_id: notification.id
            end
          end

[Mittineague]

@designbygio

I’m i looking at the right file?

I don’t think so. “spec” files are for running Ruby tests.

I’m not 100% clear on exactly what you want to do, but I think it might be possible to do with a CSS customization. eg.

<span id="ember1688" class="ember-view">
 <a href="/badges/107/contributor?username=designbygio">
  <span title="contributed an accepted pull request" data-badge-name="Contributor" id="ember1689" class="user-badge badge-type-bronze ember-view">
   <i class="fa fa-certificate"></i>
   <span class="badge-display-name">Contributor</span>
   <!---->
  </span>
 </a>
</span>

the <a> could be targetted by the href value, and the <span> by its data-badge-name value.

This would mean needing a CSS rule for every Badge, which is less than ideal, but doable.

More work, but better, would be to assign some type of “can be used as a title” class value to an element, or maybe a title attribute to an <a> tag.

[designbygio (giorgia)]

thanks @Mittineague!
I posted the wrong file link, now i correct it. Is actually badge_grant.rb not the spec file.

What i try want to do is to “update” the attributes that the badge has in notification-item.js
That badge now has: id, name, slug and username.
I want to pass to that badge var also allow_title attribute. Which i now it exist in the ruby part.
Once i have a boolean value for each badge that tell me if allow_title or not, is easy to add title link.

I’m not sure i understand your idea with the different css classes (do you want to give to each <span> the name of the badge as class name?) but with your or mine approach, i still need to know at one point, if the badge can be use as title or not.
And that’s something that has to come from the backend, as attributes, as far as i know.

[Mittineague]

For CSS something like this could work

span a span[data-badge-name="Regular"]::after {
 content: "\2611";
 color: #050;
}

If you wanted to add a more general “can be used as a title” attribute value to a tag, yes, you could use the allow_title boolean from badges. It might be good to also use the enabled boolean.

[designbygio (giorgia)]

Finally, I create a PR for this feature:

https://github.com/discourse/discourse/pull/4854

[codinghorror (Jeff Atwood)]

I agree with your suggestion for the badge page but I strongly disagree with this notification change:

There is nothing so important about badge titles that warrants this radical change.

[Lutz (Lutz Biermann)]

I must respectfully disagree. Gamification or the feeling of having achieved something and being able to show that plays a big role for a lot of users. Badge/User titles are a very important thing for this group. It may sound strange, but it is a fact. Especially for the younger generation.

[codinghorror (Jeff Atwood)]

I will not support making notifications into a two line UI atrocity.

[designbygio (giorgia)]

I definitely agree with @Lutz and that was all the idea about “improving badge title feature”

I agree also with @codinghorror, is not the best UX/UI solution.
But at the beginning of this post we thought it could be a good intermediate steps to move in the direction of make all badges more discoverable.
Since is difficult to make big changes in discourse, this would be a middle step.

[designbygio (giorgia)]

Another good idea was the one to have a temporary visual callout on the header:

Header bar: improvements?

I think some type of callout for “new badge!” might be useful. I wouldn’t want a permanent button there, but I could see some equivalent of a “What’s new” type notification that appears only when you’ve earned a new, noteworthy badge: [image]

[codinghorror (Jeff Atwood)]

I would refocus this on the badge page itself, redefining notifications is not in scope.