Future UI Design Without Buttons

UI Design | 26th April 2018

What are Buttons and Do We Really Need Them?

Since the dawn of graphical user interfaces, we’ve been using buttons. Consider that Xerox PARC’s original GUI is 44 years old, yet our user interfaces still look remarkably like it. I recently traced the history of button styles by creating the Dribbble Timeline. Though buttons evolved in sync with current trends and alongside technology, their origin is undoubtedly inspired by real objects of the past.
 

buttons in ui design
Bottom right corner – Sears First Electric Buzzer 1897 Fall Catalog
 

For more than a decade, we have been creating devices without a physical interface - that don’t depend on human touch but can be activated by voice or gesture. Why do we persist in creating shapes with which to interact that are based on the familiar objects that surround us? The shape of a digital button is still modeled on tools and mechanisms we developed in the 19th century!

We have created completely new, smart electronic devices - we can handle them in almost any way we choose, but out of laziness or force of habit, we continue to force our users to click on a tricky little area just a few pixels wide.
It’s time to do something about it - it’s time to think button-less.

“Button-less” UI – Where Everything Interacts

A “button-less utopia,” is a concept where any attempt to hold on to over 130 years of the way things have always been done is completely shattered. The future is now - we must move on and divest ourselves of our predecessors’ outmoded solutions.

Is it possible for us to imagine an interface completely free of buttons? Something so intuitive, that just by looking at it, you will know how to act? It no longer needs to be only in our imaginations - these interfaces already exist.
 
ui buttons
Microsoft HoloLens: HoloTour
 

Can we, once and for all, eliminate the venerated button? Microphones, cameras, touch screens, vibration, accelerometers, gyros, GPS, extended reality, virtual reality - the list goes on - and all this handled from your smartphone or PC. There is no longer any reason to continue forcing your users to press that one tiny rectangle.

Let’s Eliminate Buttons in UIs

Have you read Type Design - Toptal Designer Michael Abehsera’s concept where interfaces are devoid of any graphic element, and where the only thing that matters is content? Many of you asked: “What about buttons?” We don’t need them any longer - let’s eliminate them completely.

Here are a couple of interesting ideas:

Facebook just asked, “What’s your mood?” No need to press a button to answer - use your voice - just tell it you feel great and head for the beach. Then drag the text that Facebook recognizes from your response to where you want it to appear.
 

future of ui design without buttons

Search by voice Neel Raj
 

Like an article on Medium? A while back on Medium you could simply “recommend” an article. Today we click “claps.” So “clap.” What if there was no need to click this odd little button, just literally clap?
 
clapping as button-less method in ui design
Button-less concept by Wojciech Dobry (...Don't take it too seriously.)​
 

What about some more complex actions? Such as a checkout in an online store. Drag-and-drop an item into the shopping cart, swipe to proceed to checkout, then confirm it with your fingerprint. Easy peasy.
 

drag and drop as a button-less ui design technique
ASOS - Add to cart animation by Zachary Zhao
 

Think Content and the Whole Screen

Let’s start with the surfaces we currently touch to perform an action. Given that the vast majority of modern day graphical user interfaces are touch screen displays - often handled with our thumbs - it stands to reason that such interfaces will be with us for a long time. And we will definitely have that irresistible urge to tap - touch is our most important sensation after all. Touching the surface gives us a sense of real action, of control. How would it be, that instead of clicking on a particular point, we taught our users to interact with the entire surface?

Have you ever seen a button that allows you to browse an Instagram Story and return to the previous Story? Probably not, because all you need do is touch the left edge of the screen to make it happen.

Users have come to expect new ways of interacting with our digital products, and it often does not involve a button. Cards are responsive on all of their surfaces; by clicking on any word, we expect to find its definition; by touching pictures, we expect some action. Users are already accustomed to the fact that entire areas respond to touch.


Originally published by Toptal
Back