Is it a good idea to use shadows on buttons?
TL;DR
Yes, using shadows on buttons is a good practice in UI design. Shadows effectively indicate that buttons are interactive, suggesting they can be clicked or tapped. This is particularly important for Floating Action Buttons (FABs), where a prominent shadow highlights their role as a primary action. Additionally, dynamically adjusting shadows during user interaction provides visual feedback, enhancing usability.
Detailed answer
Yes, using shadows on buttons is generally a good idea in UI design, as it enhances the user experience by clearly indicating interactivity and actionability. Here's why:
Indication of interactivity
Applying shadows to buttons can effectively signal to users that these elements are interactive. The shadow suggests that the button is elevated above other elements on the page, which intuitively communicates that it can be clicked or tapped.
By creating a sense of depth, shadows also make it clear which elements are more important and which are less important, which helps users focus on the most important information.
Enhanced visual feedback
When users interact with buttons, such as hovering over them or clicking them, dynamically adjusting the shadow (either increasing or decreasing its intensity) can provide valuable visual feedback.
This interaction design technique helps reinforce the action, making the experience more satisfying and understandable for the user.
Common practice with Floating Action Buttons (FABs)
In many modern UI frameworks, especially Material Design by Google, it's a common practice to apply a prominent shadow to Floating Action Buttons. This not only highlights the FAB as a primary action but also separates it visually from other elements on the screen. The shadow makes the FAB stand out as an important, actionable item, thereby guiding user engagement.
Related reading: Where are shadows most effectively used in the design?
📚 Keep exploring
Never stop growing. Explore resources thoughtfully handpicked by Cieden’s designers.
- Rules to Perfect Button Shadow on Figma by Mariia Gurkina
- Designing in the Shadows: How to Use Shadows to Enhance Your UI by Nanzing Johnmark