Better in Black: Rethinking our Most Important Buttons

If there’s one button you employ each time you open Spotify, it’s the play button. No matter should you see it in your telephone, in your laptop computer, or in your fridge, tapping or clicking it is going to at all times begin taking part in one thing. There’s cause why we have not modified the way it seems through the years — it is the universally acknowledged image for audio playback.

However, we’re at all times searching for methods to enhance the consumer expertise of our merchandise, and that features preserving a detailed eye on their accessibility.

Based on our analysis on accessibility, we’re making important adjustments to the buttons you see throughout the Spotify expertise — when it comes to coloration, textual content formatting, and measurement. In this text, you’ll learn all about our adjustments and why we made them.

It’s not inexperienced, it is Spotify inexperienced

Ever since we launched in 2006, the colour inexperienced has been an integral a part of our model. You can discover it in apparent locations, like our brand, however we additionally use it all through the consumer expertise, most notably for lots of our buttons.

Back in 2015, we launched a refreshed model that launched our distinctive Spotify inexperienced. Deliberately created to be vibrant, we rapidly acquired began on implementing it all over the place—earlier than we realized it would not work in our UI. That’s why we developed UI inexperienced, a barely darker model that improved distinction and accessibility when utilizing white textual content or icons on high.

However, we just lately determined to additional enhance the distinction of our inexperienced buttons. If distinction isn’t excessive sufficient, it could possibly be troublesome for low-vision, non-sighted, and visually impaired customers to make use of our app to the fullest extent. Lower distinction may additionally situationally influence anybody, relying on environmental circumstances like lighting and reflections.

Searching for an answer

As it seems, making our inexperienced play effectively with a white overlay wasn’t straightforward. We explored completely different options, like baselining the white textual content or brand with a high-contrast inexperienced, or eliminating our beloved inexperienced altogether(!). Both weren’t slicing it.

Next, we explored our choices. We may work with the unique Spotify inexperienced, the particular UI inexperienced, or create a brand new resolution. In order to succeed in the advisable distinction ratio of 4.5:1, we wanted to darken these colours loads. The end result turned out to be one thing that is decidedly much less Spotify, and extra… Christmas tree.

While we weren’t pleased with our UI inexperienced, this was even additional faraway from our model coloration. We wanted to give you one thing higher — and it turned out that one of many easiest options was additionally one of the best.

Back to black (and inexperienced)

When we tried utilizing black for our foreground coloration, we measured a distinction ratio of 10.9:1 with Spotify inexperienced — an infinite enchancment for the legibility of any textual content or icons. 

This meant that we might be capable to use our unique Spotify inexperienced as an alternative of UI inexperienced, which makes our most vibrant coloration pop much more. On high of the grey background coloration we use in our UI, Spotify inexperienced has a 9.7:1 distinction ratio — higher than the 7.2:1 that UI inexperienced would get us.

Improving localization

While updating their coloration is critical, it’s not the one one change we’re making to buttons at this time — we’re additionally taking the chance to enhance the best way our buttons work with localization.

Our previous buttons used a mix of beneficiant padding and an UPPER CASE kind fashion that might trigger points with localization to sure languages. Because Spotify helps greater than 60 languages from the world over, this meant we might generally run out of house in languages with longer string lengths. 

By switching the buttons over to condemn case and making use of much less padding, the brand new fashion takes up 20-30% much less house. This allows us to show extra textual content in the identical quantity of house, which implies we will present the total string extra usually. The button additionally feels much less shouty, extra human, and is healthier optimized for readability at bigger kind sizes.

Accessibility by design

All in all, we’re making textual content simpler to learn and buttons simpler to identify. It additionally places our digital expertise extra consistent with our model, which makes for a extra constant consumer expertise.

We care about creating an inclusive expertise, which is why consumer analysis with folks with disabilities has been the driving pressure behind our design initiatives, like our new buttons and the just lately introduced enhancements to the Desktop app. Also, with the inner launch of Encore, our household of design techniques, we’re in a position to extra effectively streamline our efforts to create an app that works for everybody.

Designing for inclusivity is necessary if you’re a part of the day by day lifetime of over 356 million folks. Even a comparatively small change can considerably enhance the lives of many, making it simpler to take heed to the songs and podcasts they love.

We can’t wait to roll out our new buttons throughout all Spotify platforms very quickly. Also, we’re excited to share extra of our learnings round coloration theming and accessibility, coming to you on this weblog within the coming months. Stay tuned!

Join us!

Are you keen about creating accessible experiences on a world scale? We’re at all times searching for nice folks to hitch the band — and with our new Work From Anywhere coverage, you get to choose the place you’re employed from. Head over to our jobs web page to see if there’s one thing you want.