Show count of bounties earned or offered on Profile Page

Question

The Bounties section could do more to show what's been earned or offered with counts on the tabs.

The Bounties section of the Profile Page shows three tabs, "active", "offered" and "earned". Not much is appealing/enticing in this area, and it could be improved for better user engagement by applying a minor styling tweak.

As of now, unless you click either one of these three tabs (except the default tab you're on), you would not know if the user has offered or earned (assuming that you're on active tab) any bounties.

I propose a minor styling tweak by displaying the count of bounties next to those Bounties tabs.

To illustrate this better by examples.

Current view of the Bounties section looks as:

Proposed Bounties section with new UI tweak:

Notice, the count shown next to "offered" and "earned". I purposely avoided giving count next to "active" tab (underlined in orange) as you can see the tab is active and current UI does show the count on the left side. But, if the user is on other bounty tab then all the remaining tabs should display count next to it. Or, lets make it even more simple, just display the count for all the bounties tabs irrespective of their status i.e active or non-active. I would love to hear from Stack Exchange's UI/UX experts team and the fellow SO members suggestions, any additional thoughts on improving this feature request.

Having the counts displayed next to these bounties tabs not only gives the quick summary of it but also appeals/entices (in turn more engagement) other users to visit/explore them. Definitely encourages on-site action.

Answer 1

Although a userscript will never be better than default implementation by Stack Exchange, here's one I just wrote to add the numbers of offered and earned bounties to the tab names.

---

Using gnat as an example (again) :)

The script sends a GET request to the appropriate tab to get the numbers in case you're wondering, because it seems the API doesn't give these values...

Install from Github Gist

There's a guide at StackApps if you're unsure on how to install userscripts.

Code:

// ==UserScript==
// @name         Bounty count on user profile page
// @namespace    http://stackexchange.com/users/4337810/
// @version      1.0
// @description  Adds the number of bounties someone has offered/earned to the tab names on their profile page
// @author       ᔕᖺᘎᕊ (http://stackexchange.com/users/4337810/)
// @match        *://*.stackexchange.com/users/*
// @match        *://*.stackoverflow.com/users/*
// @match        *://*.superuser.com/users/*
// @match        *://*.serverfault.com/users/*
// @match        *://*.askubuntu.com/users/*
// @match        *://*.stackapps.com/users/*
// @match        *://*.mathoverflow.net/users/*
// @grant        none
// ==/UserScript==

function getCounts(tab, callback) {    
    $.get($(location).attr('href').split('?')[0]+"?tab=bounties&sort="+tab, function (x,y,z) {
        callback($(x).find('div.subheader.user-full-tab-header > h1 > span.count').text());
    });
}

function addCounts() {
    var offered = getCounts('offered', function (offered) {
        var earned = getCounts('earned', function(earned) {
            $('body').find('#user-panel-bounties > div.subheader > div a[data-sort-id="offered"]').text("offered ("+offered+")");
            $('body').find('#user-panel-bounties > div.subheader > div a[data-sort-id="earned"]').text("earned ("+earned+")");
        });
    });
}

$(document).on('click', '#user-panel-bounties > div.subheader > div a', function() {
    addCounts();
});

addCounts();

Answer 2

Another possible solution (apart from what's proposed in the question) would be showing the total count of bounties e.g. 'Bounties (25)' on the left of bounties sub-tabs. The total 'Bounties (25)' will be linked to user's 'bounties' tab (the same way how it's currently linked). Here, I would like to give an example of user 'gnat' profile.

Here is how gnat's current bounties section looks like:

Since the default is on 'active' bounties sub-tab (underline) and the user 'gnat' has no active bounties, the current view is not appealing and doesn't give any clue to explore his 'offered' or 'earned' bounties. I was totally surprised to see that gnat has "256 Offered bounties for 24,950 reputation" and also "8 Earned bounties for 950 reputation". That's very impressive (24,950 hard earned reps. in the offering) and decided to explore his various bounties posts. Not only it helped to attract attention, but also help me to gain knowledge.

Here is a possible mock-up for bounties section: (using gnat's profile as an example)

Displaying the total count e.g. 'Bounties (264)' on the left of bounties sub-tabs does makes it stand out and would help to attract attention. Definitely encourages on-site action. Also, the above mock-up nicely aligns with the current 'Questions (n)' and 'Answers (n)' sections of the profile activity page. It would add a certain symmetry to the UI.