Please use a bigger device :')

What is a button?

Do a quick intro

About this project
We spend a lot of time using web pages, but how often do you really take note of the interactions that are happening on the screen? I noticed that we click on buttons all the time yet one click and it is gone, bringing us to the next page. These little elements connect the vast spaces of the Internet and enable us to navigate and carry out complex operations. Yet, they are so quick and simple that we hardly ever give much thought to our clicks. But could there actually be more to a button than we are used to?

Buttons as a journey
This project asks a very basic question of "What is a button?" and investigates our familiar micro-interactions with them. I looked into the conventions of buttons—what they are, how we interact with them, how they respond to us. I then broke down the ubiquitous “click” of a button into a user journey and introduced a new way for designers and developers to design for them. By looking at the click of a button as an entire journey, we can give it the ability to convey new messages and create new experiences. For instance, if the button ran away as a user tries to check out on a shopping site, would that perhaps make us pause and reevaluate our decision?

Methods to generate button journeys
In my research to explore how buttons might look like as a user journey, I used two methods to create these unconventional buttons: metaphor and personification.

The first method looks at a button’s role as a metaphor in the traditional graphical user interface. I then proposed an alternative metaphor for buttons—doors. Since buttons separate the different virtual environments on the Internet and connect us from one place to another, perhaps we could view them as doorways. I compared our interactions with doors to that with a button and created new “door buttons”, such as a button that acts like an automatic door, or one that is like a door with creaky hinges.

The second method gives buttons the agency to react to the cursor in different ways. For instance, a nervous button might tremble more as the cursor moves closer towards it. Meanwhile, a clingy button might follow the cursor around the screen.

These are only two of the many possible methods to generate buttons under the framework of designing buttons as a journey. Some of these explorations can be found in the library page.

Sharing this approach
I decided to create this website so that other designers and developers of UI buttons can experience this new approach.

The button maker is a sandbox that lets you play around with the CSS attributes of a button. It shows you many of the conventional styling attributes that guide and constrain the design of a button.

The not-a-button maker questions our understanding of a button and introduces the method of designing a button journey. For this not-a-button tool, you can use the method of personification to create the unconventional buttons.

Finally, you can export the code for your very own buttons to use in your own websites. Hopefully, this gives you a new perspective on looking at UI buttons and perhaps consider using this approach in your next design. Or at the very least, take a moment to appreciate the intricacies that can go into the little interactions we take for granted daily.