2

I have a container that's used for pagination (as you scroll down it loads more elements). I rounded the edges out and added a box-shadow, but I'm not sure if this was the right decision. Is there some sort of a rule for where/when/how box-shadows should be used?

enter image description here

p32094
  • 155
  • 3
  • This sounds a lot more like a design issue than a user experience issue. – James Coyle Feb 05 '20 at 13:16
  • @JamesCoyle Sorry, I thought it could've been either so I decided to put it under the layout tag. – p32094 Feb 05 '20 at 13:18
  • It might help if you provide more details regarding your concerns. Rounded corners and box-shadows in themselves are purely decorative and don't really have much impact on UX. I think in your question you need to discuss how these choices may be affecting user experience and identify what problem you think you may have so we can then try to offer solutions. – James Coyle Feb 05 '20 at 13:25

1 Answers1

2

Is there some sort of a rule for where/when/how box-shadows should be used?.

Short answer: No. Generally, a box-shadow is just a visual element as much as a background colour or a border.

Long answer

Box shadows are known to work very well for

- Hover states on boxes/modals to call user attention:

enter image description here

- Introduce visual depth as a signifier of clickability of elements and containers

enter image description here

And very recently in dashboards:

- As a layout element to emphasize action dashboard areas

enter image description here

So depending on how much of visual elements are already in use on your dashboard, and how much a box-shadow on your container will fit into that composition, feel free to use it.

Oluwatobi Mayowa
  • 1,648
  • 8
  • 12