Are drop shadows on screen elements considered good UX, or distracting?

Question

I have a business site with shadows around boxes, to give a bit of a 3D look.

Our off-shore UX folks feel shadows should not be used.

What is the general UX feeling about this? Are shadows around screen elements a distraction? Should we consider slightly thick borders? The 1 pixel plain border makes the boxes look bland on the screen.

Answer 1

Drop shadows can help UX as one method of introducing elevation. According to Google Material Design's guidelines, elevation is helpful when you need to:

• Allow surfaces to move in front of and behind other surfaces, such as content scrolling behind app bars

• Reflect spatial relationships, such as how a floating action button’s shadow indicates it is separate from a card collection

• Focus attention on the highest elevation, such as a dialog temporarily appearing in front of other surfaces

It's important to add drop shadows thoughtfully, for those reasons. Having too many elements with drop shadows, or adding the wrong elevation for drop shadows, will be visually disruptive and look amateurish.

Answer 2

The question could have been on Graphic Design Exchange.But, since you are already here take an answer home.

There are many revolutions that have happened in Design & Digital Industry on how we can make the look and experience better to make a user feel more comfortable with the device they use that invloves a screen.So, in this regard, there was one study that extensively took place and today it a new normal for having Shadows in the UI.

The research was conducted by Google Design team that added much more significant reasoning on having something like shadow. This has a long history and conceptualization involved on why we have shadows. Do take a look at some videos using the links below:

1. https://www.youtube.com/watch?v=rrT6v5sOwJg - 6 min video Material Design.
2. https://www.youtube.com/watch?v=w2JUhDd0CAA - 3 min video How shadows were added.

These two videos can make you feel more satisfied with the reasoning and you conclude can conclude if it good or bad.

In my opinion : Depending on the purpose, it is a design decision to make.

Answer 3

As long as I know, the basic concepts of using drop shadow should considering these:

1. the priority, which will helps user to aware of the hierarchy from content itself
2. the drop shadow style. the color, x & y-axis light positions and the animation itself. for example if you using drop shadow for button, considering that the drop shadow only show when user hover towards the button. so that user will aware if that is a button that can be clicked. my tips, using the top light, just like the sun. the shadows will only show from y-axis. because that's the usual pattern of shadow, if you try using from bottom so the shadow will appear on top, it will make a sinister vibe, like a horror shot scene movies. try to using very subtle and light color and not too much vibrant because you want to focus on the content not the shadow.