What’s the proper design for a ‘play’ button?
It’s a funny thing; we see them all the time. Play icons are ALWAYS a right-facing triangle. Sometimes they add a container, sometimes they’re alone hovering atop a thumbnail. Even my three year-old daughter knows that if you want the video to play you press the triangle.
Almost always the ‘play’ icon is isolated within an app or a screen in it’s own ecosystem. You’re in iTunes and you see play icons. You’re on soundcloud and you see play icons. You’re in the YouTube app and you see several play icons. Of course they all look the same within each of these experiences. It’s only when you see two experiences side by side, as I did on my phone notifications that you might realize that the icon is drawn uniquely for each of these apps.
With so many uses for the ‘play’ icon, and such universal agreement on the basic architecture of the icon I thought it might be worthwhile to gather the data and see if I can determine the average (or median) ratio of that triangle to create a workingman’s spec. I’ve included apps from Android and iOS ranging from the big players like YouTube, Hulu, Spotify, and Netflix, down to smaller players like PocketCasts and SiriusXM.
In my examination of 32 ‘play’ icons across apps on both Android and iOS, my determination is that the correct ratio for a ‘play’ icon is…(drumroll please)
0.86 : 1
With ratios ranging from 0.68:1 up to 1.04:1, this number represents the average and the median of the sample. It’s very reassuring to note that both Hulu and Netflix fell right in this range.
YouTube, which I would have expected to set the convention, came in at about 10% narrower.
Let me also note that the YouTube logo is about 10% wider than the median. Strange that the play button within YouTube isn’t the same ratio as the YouTube logo, right?
That’s it. I officially offer this spec to the internet as the de facto standard.
