New badge design

[rstacruz]

The current badge style has been in place for many years now and feels a little out-of-place with current design trends.

How would you guys feel about a more simplified look?

Here it is in the context of a Github readme:

[rstacruz]

Just updating the thread with conversations over twitter.

@espadrine: https://twitter.com/espadrine/status/492951493784657920
That is very clean, it's really nice! Right now, there is some interest in making the flat style badge the future / and I'm tracking it's adoption rate (over the last month, 19.63% of raw badges used are flat). I could add this new style / and track its adoption rate as well, and make the winner the default badge in a few months. What do you think? @olivierlacan

@olivierlacan: https://twitter.com/olivierlacan/status/493123077803237377
I think we should stop fragmenting our solution because people's preferred aesthetic doesn't matter & will change. / So let's pick the one we think is best and stick with it otherwise we will lose what little consistency we've managed. / Let's continue the conversation on GitHub. :-)

[kura]

I have allowed for usage of the flat style badge in pypip.in but my users don't want to use it. All of the usage is for the original rounded corner styling (due to it being the same as what they already know and use from coveralls and travis).

I personally like the flat style and use it myself but, I'm not keen on this new style shown above which feels very iOS/Apple to me.

If we could keep the original rounded corners (pypip.in has to default to this) as well as the current flat style if this new one is also used, that would be good.

[espadrine]

If we could keep the original rounded corners (pypip.in has to default to this) as well as the current flat style if this new one is also used, that would be good.

That is something that was requested elsewhere, multiple times. Right now, flat badges have between 14% and 20% usage on Shields. If I change the flat design to have rounded corners, I'm not sure whether there will be unhappiness. It is a small design change for the better, so I feel it is unnecessary to fork the current flat design into, say, "?style=rounded-flat".

All of the usage is for the original rounded corner styling (due to it being the same as what they already know and use from coveralls and travis).

The request for a flat design originated from Travis, actually. They felt it would be good eventually to change. As it turns out, @maxogden implemented a patch a month or two later. I assume it is unrelated, but I don't know.

By the way, @maxogden, what do you think of changing the flat design to have rounded corners?

[kura]

As long as the old-old design stays in place, I think my users should be happy.

As for the flat design, I personally like it without rounded corners, maybe if we could get a colourised mock up of the changes to the flat design. I really am not a fan of the white background with the coloured text.

I have to admit it's a little hard for me to read. I have perfect vision but I am red-green colourblind, maybe that has something to do with it? Outside of that, I personally just don't like the lack of colour compared to the existing flat design/

[olivierlacan]

As @espadrine pointed out, this conversation has been happening over and over again. And every single time, the arguments for a new design boil down to:

1. "I like this design better."
2. "It's more trendy."

My response sadly hasn't changed:

1. If we changed the design every time someone likes something different, we would never stop changing, and we would have a bigger mess than Shields originally was designed to solve. Please read the project README which describe this problem in detail.
2. Trends change perpetually. When the flat badge design was introduced, the design community was already getting tired of flatness and had started experimenting with "long shadows". I'm glad trends exist, they keep things moving forward. Shields badge don't have to be trendy, they have to be legible, useful, and consistent. Again, please read the specification document I wrote on January 8th 2014.

Now @rstacruz, the current badge has not been in place for many years. It's barely more than 1.5 years old, which shows you how fleeting the aesthetic trends tend to be. As we've discussed at length in #95, I don't think we should consider a new design unless it specifically improves on the design goals stated in our specification.

If you can suggest a new design that does this, I think it's absolutely fair that we should consider switching to it. Although as @espadrine showed with his stats, this is not a small undertaking and brings the risk of fragmenting the landscape since it might take a long time for the existing badge users to update.

Here's what I think isn't satisfying with your design:

1. As @kura mentioned, legibility is poor. The problem is mainly due to low contrast. The absence of a background color on the value part of the badge makes any font color choice beyond your limited examples hard to read.
2. By limiting click affordances to a very subtle rounded corner you make it seem like these badges are just data displays when they're meant to be obvious links to more detailed information that is merely succinctly described on the badge itself. Since images can't have hover states, you can't fall back on this alternative link affordance. This is why I chose a button appearance with the original badge, they're meant to invite a click.

I'm closing this issue as a dupe of #95. Please feel free to continue the conversation there since there are many contributors to this project who have a stake in hearing what you have to say.