We went with this version first.

Whe we discussed the beta-version of our new design, I proposed to use the tree idea for badges as well. Badges should be nodes: gold badges are roots, silver badges inner nodes, bronze badges leaves.

Paweł ran with that. Zoomed in, these are the current badge icons:

For me, the metaphor does not work: I see control nobs rather than tree nodes: bronze is more "tuned up" than gold. Also, silver just visually looks like "more" than gold.

What do you think? Do you have other ideas?

• I don't see control knobs. But I agree that the hierarchy isn't conveyed: silver looks like it's more than gold. – Gilles 'SO- stop being evil' Feb 2 '16 at 14:01
• Hey, thanks for bringing this up. I'll take a look and update badges on site so we can see them live. – Paweł Feb 5 '16 at 8:30

My second concern, the gold looking like "less" than the silver could be addressed by given the root more edges:

[svg] [source]

Now they have equally many edges, and gold clearly is the root.

(I left the stub lengths longer than I prefer, because another answer deals with that. This is about the number of stubs on the gold badge.)

• If the silver stays ø-shaped then I prefer the ¤ (4-pronged) shape for the gold. But I liked your original idea more (gold is ^, silver is |, bronze is '). – Gilles 'SO- stop being evil' Feb 2 '16 at 13:59
• @Gilles I guess that one didn't work as well with square dimensions, the circle ending up being too small? I'll add a mockup later so you all can vote on that as well. – Raphael Feb 2 '16 at 14:01
• 1. I like the idea in the first half of this answer more. (I actually think my top choice would be that shape, but for all three badges, with just color to differentiate the badges rather than shape.) 2. I suggest you split this into two separate answers, as these are really two different ideas. – D.W. Feb 2 '16 at 18:14
• Ah, @D.W., feel free to use my TikZ to create your own proposal set! – Raphael Feb 2 '16 at 21:50
• The issue about these badges and any other badges is that they need to look well in small sizes too. I'm not saying that this example looks bad in small sizes - I'm just pointing it out. Let's go with this proposal, I'm gonna implement them and we can all see how it looks like in real life. – Paweł Feb 5 '16 at 8:31
• This proposal has been live since Feb 5. – Raphael Feb 5 '16 at 13:21
• @Paweł I like this a lot better. It'd be interesting to hear the opinion of people who see it for the first time -- I may get some from colleagues -- but I think the tree metaphor is a lot more clear now. The stubs are clear enough to support that, but not too long as to become distracting. – Raphael Feb 5 '16 at 13:23
• I'm happy every time I see little root guy now. :) – Raphael Feb 9 '16 at 12:02

By popular request, my original proposal in nicer form (lengths are like v0 and v-2):

[svg] [source]

We could also go one step further as in my other answer, leave the tree metaphor behind and make the gold badge a "central" node in an implied graph:

[svg] [source]

Now the degree sequence from bronze to gold would be (2^0, 2^1, 2^2) -- but who cares? ;)

(I left the stub lengths longer than I prefer, because another answer deals with that. This is about the number of stubs on the gold badge.)

The control-knob impression may be caused by the arrow shape of the edge stubs. Here's a crude mockup of a rounder stub of different lengths:

[svg] [source]

I think I may like the shortest stubs (v-2) the most. v1 and longer, I don't like so much.

• I notice that the stubs of v0 and shorter are hard to see when you zoom to the size the badges actually appear at. So we should probably have at least v1 for visibility. Which implies that I'm for v1, or the shortest length at which the stubs are clearly visible (whichever that turns out to be). – Raphael Feb 3 '16 at 12:06
• Maybe you could update this answer with an actual size preview of the stubs? In fact you might want to include actual size visualizations in addition to zoomed size for most or all answers... – intcreator Feb 4 '16 at 7:33
• @brandaemon You can open the SVG linked in every post and change the zooming level to get an impression. (In my FF, the smallest level is about right.) That's better because a PNG of that size is going to be quite pixelated but the site uses SVG anyway. – Raphael Feb 4 '16 at 7:37
• Maybe bronze with one node, silver with two and gold with three nodes would be good? Also it will resemble logo. – Evil Feb 4 '16 at 21:22
• @EvilJS I'm afraid that's infeasible given the size/space restrictions. Look at the actual size of the things! – Raphael Feb 5 '16 at 10:02