Expressive Button Behaviors
UX+Web
Buttons are everyday elements of interaction design. There are certain rules to make the best practice for buttons in creating a smooth UX flow in web and apps.
What if the button has personalities? My expressive button behavior experiment explores the possibilities of how buttons express emotions through simple interaction.
I use HTML, CSS, and Javascript to create 8 button behaviors.
1. Timid
The timid button will avoid the cursor once on hover.
2. Needy
The needy button will follow the cursor once the cursor gets close to it.
3. Itchy
The itchy button will wiggle when on click.
4. Stubborn
The stubborn button will do nothing.
5. Scared
The scared button will wiggle on hover and run away on click. The wiggle range is smaller than the itchy button.
6. Cold
The cold button will wiggle, shrink and turn blue on click.
7. Hot
The hot button will be bigger, move down a little, and turn red on click.
8. Lazy
The Lazy button will act slower than a regular button on click.
Ideation
I list several potential emotions and human behaviors that can be expressed by web language. Then sketch out each button behavior. During the sketching, I noticed some interesting details: The jitter of the scared button is subtly different from the itchy button, people will shake more when being tickled, so I put larger numbers in the itchy button animation translate attributes. Also, people will shake when the tickle action is being performed, so I use jitter on click in the itchy button and jitter on hover in the scared button.
There are so many details to notice when I try to mimic the emotion precisely. Many of them can be presented by combining 4 simple attributes: position, scale, color, and interval.
The whole experiment gives me a deep understanding of how to improve button-human interaction. By slightly changing/combing simple attributes, the button will express totally different meanings.