Feb 24, 2025
Negative Gap: Micro interaction in Gmail
A clever microinteraction in Gmail’s icon buttons uses overlapping hit areas to improve usability and efficiency.
Interaction Design
Microinteractions
A Subtle Detail in Gmail’s Design
Gmail’s buttons hide a smart UI trick that improves usability without adding visual clutter.
Balancing efficiency and interaction space
I recently noticed a clever design detail in Gmail’s icon buttons that balances space efficiency with usability, aligning perfectly with Fitts’s Law. Each icon button has a nested icon centered within a slightly larger button body.
To keep the layout compact, Gmail uses a negative gap between buttons, so the edges of neighboring buttons overlap slightly.
How the Interaction Works
The hover and clickable behavior is designed for speed and accuracy.
The hover state activates when the pointer enters the icon area but only ends when the pointer exits the entire button body. This gives users a larger clickable area, reducing misclicks and improving speed.
The design works smoothly because only one button can be in a hover state at a time. Even with overlapping hit zones, there are no conflicts.
The Takeaway
Smart design hides in the details
This subtle trick is a great example of how thoughtful interaction design can enhance usability without changing layout or visuals. It’s simple, efficient, and makes the UI feel more intuitive.
More Works
FAQ
01
What kind of projects have you worked on?
02
How do you usually collaborate on projects?
03
Do you take freelance or consulting projects?
04
What tools do you use?
05
How do you approach new projects?
06
Can you help set up a design system?
07
How can I get in touch?
Feb 24, 2025
Negative Gap: Micro interaction in Gmail
A clever microinteraction in Gmail’s icon buttons uses overlapping hit areas to improve usability and efficiency.
Interaction Design
Microinteractions
A Subtle Detail in Gmail’s Design
Gmail’s buttons hide a smart UI trick that improves usability without adding visual clutter.
Balancing efficiency and interaction space
I recently noticed a clever design detail in Gmail’s icon buttons that balances space efficiency with usability, aligning perfectly with Fitts’s Law. Each icon button has a nested icon centered within a slightly larger button body.
To keep the layout compact, Gmail uses a negative gap between buttons, so the edges of neighboring buttons overlap slightly.
How the Interaction Works
The hover and clickable behavior is designed for speed and accuracy.
The hover state activates when the pointer enters the icon area but only ends when the pointer exits the entire button body. This gives users a larger clickable area, reducing misclicks and improving speed.
The design works smoothly because only one button can be in a hover state at a time. Even with overlapping hit zones, there are no conflicts.
The Takeaway
Smart design hides in the details
This subtle trick is a great example of how thoughtful interaction design can enhance usability without changing layout or visuals. It’s simple, efficient, and makes the UI feel more intuitive.
More Works
FAQ
01
What kind of projects have you worked on?
02
How do you usually collaborate on projects?
03
Do you take freelance or consulting projects?
04
What tools do you use?
05
How do you approach new projects?
06
Can you help set up a design system?
07
How can I get in touch?
Feb 24, 2025
Negative Gap: Micro interaction in Gmail
A clever microinteraction in Gmail’s icon buttons uses overlapping hit areas to improve usability and efficiency.
Interaction Design
Microinteractions
A Subtle Detail in Gmail’s Design
Gmail’s buttons hide a smart UI trick that improves usability without adding visual clutter.
Balancing efficiency and interaction space
I recently noticed a clever design detail in Gmail’s icon buttons that balances space efficiency with usability, aligning perfectly with Fitts’s Law. Each icon button has a nested icon centered within a slightly larger button body.
To keep the layout compact, Gmail uses a negative gap between buttons, so the edges of neighboring buttons overlap slightly.
How the Interaction Works
The hover and clickable behavior is designed for speed and accuracy.
The hover state activates when the pointer enters the icon area but only ends when the pointer exits the entire button body. This gives users a larger clickable area, reducing misclicks and improving speed.
The design works smoothly because only one button can be in a hover state at a time. Even with overlapping hit zones, there are no conflicts.
The Takeaway
Smart design hides in the details
This subtle trick is a great example of how thoughtful interaction design can enhance usability without changing layout or visuals. It’s simple, efficient, and makes the UI feel more intuitive.
More Works
FAQ
What kind of projects have you worked on?
How do you usually collaborate on projects?
Do you take freelance or consulting projects?
What tools do you use?
How do you approach new projects?
Can you help set up a design system?
How can I get in touch?