An Obsession With Buttons
This is the longest thing I've written since high school english class. It's all over the place. But if I don't post something, or start somewhere, it will hold all the possible future writings back. On we go then.
Lately I have been obsessed with buttons. Not the buttons on your shirt or trousers, but digital buttons. The clickable, pokeable, tappable, user interface elements. They're simple little things with simple little jobs. One interaction yields one reaction. And yet, it's possible that no other interface component has been iterated over more times in the history of graphics (other than typography perhaps).
A long time ago when I first encountered a button, they were all mostly the same. This was the Windows 95/98 era of buttons. More often than not, programs and webpages simply deferred to the system implementation/styling and called it a day. And that carried over to other elements as well, such as radio buttons, text fields, and drop-downs. Other elements were the focus of design: tileable background patterns, brightly colored text, flashing everything. Buttons were the utility side, uniform and generic. The art came from elsewhere.
It's certainly easy to see the appeal in this - keeping functional things functional. You just have to visit nearly any modern website or open any modern app to see that the actual content and substance takes a backseat to the ui that frames it all. It's to the point where you have to wonder if people even want to create content or share creations, and simply wish to show off their interface design instead - seeing the content as little more than higher-effort lorem ipsum. I often fell the same way about AAA games - the gameplay seems to only exist to help show off the graphics engine.
XP, Vista, 7 - they all painted some form over the buttons function. Everything suddenly needed as much detail and form as possible. Skeuomorphism abound. You don't just want a button that looks 3D - you want a button that looks like real brushed metal - like it's made of colorful glass - or sometimes, a button made of beautiful mahogany wood. But are these buttons that look like a material, or are they materials shaped as buttons?
I certainty remember my fixation with the early Bootstrap v2 style interface elements. Everything simply had a top-down light to dark gradient, and a pronounced shadow under it. It was styled to pop out, where as the paragraphs of text would lie flat. It looked clickable. It looked like a button.
Then I also remember how quickly the next versions of Bootstrap rolled out. Less gradients, less shadows. More "flat". And I remember having a fixation with the flatness as well. But one day, in the pursuit of being flat, buttons and other ui lost one last feature - their border. It was just a single color rounded rectangle. Nothing more. The color and size is now what conveyed that it was intractable - not its styling. This is where I started to lose interest.
I find it difficult to process pages where the content and layout are too faint. I recently opened Google docs for the first time in forever, and the toolbar at the top was a nightmare. White buttons, on a slightly less-white gray-blue background. Such little contrast, that if the buttons didn't have text, you might not even know they're there. I also saw social media sites where there was no longer a horizontal line between posts in your feed. Sometimes, even the line between the sidebar and the feed was gone as well. Like alphabet cereal floating in a wide bowl of milky whiteness.
There was one button that stood out tho. Github's buttons. They styled their buttons in such a way that they looked like buttons without wasting your time focusing on how they looked like buttons. Unless of course you're me, and hyper fixated on them, and rambled about it in a blog post.
The Github buttons had all the web 2.0 favorites: a gradient background to look round, a shadow to look 3D, and a border to hold it together. But they dialed these effects down as low as they could to where you no longer noticed the styling, but still processed the buttons as "sticking out" or being pressable. They were perfect. Honestly, all of Github's ui was perfect in this way. It was cleaned up and "flat", but with expertly snuck in contrast between elements so everything looked just right.
Unfortunately, in the most recent update to Primer (the design guide/kit of Githubs UI) they finally made it too flat. They held out for so long, but, the pressure of outside trends finally took over. Their buttons still have a microscopic amount of jazz to them, but it just doesn't do it for me like the previous version.
I think about those buttons a lot. I've often pulled up MDN playground on my iPad and tried my hand at replicating that button magic while having a coffee break, or laying in bed. I've spent hours browsing button galleries, and reading the source to see how the effects I like were implemented.
I want the magic button that looks like it has depth and form, but it's subtle enough to where you could still think it's flat. Like you're imagining the 3D effect, and just know somehow that it's a button.
Perhaps I'll start collecting all my attempts and put them up on Github. So far, I've come close, but never quite perfect. And writing out this post has made me realize how all over the place my thoughts are on this subject - maybe the perfect design is out of reach until I can explain what I want more effectively.