Close Form

Have An Upcoming Project? Call 301.656.1144 We would love to discuss how we can help!

Thanks for the business! A representative will contact you within 24 hours.

Faux-Button Frustration


February 15, 2017

Too Bad Reality Is Not As Easily Adjusted As the Web

I’ve recently paid more attention to things that I try to imitate on the web, but use in every day life. The thing that I find the most irksome and concerning is the lack of visual and/or physical interaction with a lot of buttons. The web, especially of late, has done a great job to emphasize the importance of this for user experience, conversion rate, and just general sense of accomplishment. But the real world, unfortunately, didn’t think that far ahead, or at least it didn’t always think with their users in mind.

Image from http://static.happyplace.com/assets/images/2011/11/4eca796a01161.jpg

Push, Push, Push, What The, Oh Wait, It Is Working

We’ve all had experiences with some sort of electronic device that has buttons on them. Elevators, coffee machines, computers, treadmills, etc. And for the most part, they do a good job of telling the user when they’ve been engaged — either by lighting up or by depressing inward/outward. But, I’ve run into a few examples, seemingly most exercise related, of late where the feedback is just entirely lacking. This is especially annoying when on some sort of moving equipment and you keep pushing a ’button’ but are not sure if it’s working or not, and are not sure if where you are pushing matters or not either. This happens with both physical areas of where buttons are supposed to be, as well as new touch screens which seem to be all the rage. These would be fine, if they followed the same good practices that web and mobile apps do of showing users that you’ve pushed a button, but the ones I’ve seen have missed this critical element: feedback.

Good Job Jefff, You Did It

Humans are simple and petty. We want to feel like we’ve done something, and we’ve done it well. Feedback and a sense of accomplishment is key to a lot of things in life, and even when it’s as simple as blinking or ’faux-depressing’ when a button is being pushed, we need some sort of instant feedback. The beauty of the web, and the ever forward pushing that is being done with it, is this concept has been fully embraced by a good amount of designers and developers. When pushing, er clicking, a button on the web, most often you will see a reverse of the gradient or shadow, or a different color for the background and the text, or the button will just move down the page a little bit. Whatever way it happens (some more successful at replicating real buttons), this provides (albeit minute) feedback to us and makes us feel like something is happening, or about to happen. The same thing happens on smart phones. And since I’m a Mac-fanboy, I’ll use the iPhone as an example. Even when it launched, Apple realized the power of ’showing’ us that when we hang up on a call, the button(s) need to look like and act like real buttons. And since the iPhone (& other smart phone OSs) has opened up to designers and developers, this interaction (for the most part) has only gotten better.

So, This Is Just Some Sort of Rant?

Seemingly so, yes. I had been noodling on this for a while and a recent tweet I saw by @blazepollard jogged my memory and got me to write this up.

While a :hover state is definitely very important, especially for accessibility reasons, it’s the :active state that really defines the interactivity of a [clickable] element on a web page.

Long Story Short

Attention manufacturers and product designers: take a tip from web designers (who are not perfect, still lots of room to grow for us all of course), visual feedback is key to successfully interacting with and enjoying a product. It seems simple enough of a concept, but often times things like this are overlooked, or taken for granted, in the real world—and this can lead to user confusion, and worse, user frustration.



BrowserMedia, LLC

1424 K Street Northwest
3rd Floor
Washington, DC 20005
301-656-1144
K StreetK StreetMcPherson SqMetro Station