I have a coworker who loves to place every element on a page in a box. In the previous decade, he was enthralled with fieldsets and legends. Every grouping of data had to have a fancy outline around it.

Just recently, we adopted a subset of Bootstrap's components for use in our SaaS and he immediately fell in love with the 'well' element. There ends up being a well around every block level element in the code that he touches. Sometimes I wonder why he doesn't just change the background to gray and call it a day.

I would like to bring up his overuse of boxing elements but would like some good reasons as to why he should stop doing so. Does anyone have any good resources that I can point him to?

Edit: Here is a small example of a recent project:

enter image description here

  • Well, from your writing is obvious that you don't like that aesthetic, but you haven't proved that he is overusing it. For instance, using fieldset and legend is very important and one thing that is usually missing in hundreds of forms just because the designer/coder didn't think of it or didn't know how to use it. Of course I don't know the specifics of your coworker, but I think you may start asking him why he uses that pattern? May be he has a good point or may be you spot a weak point on his reasoning and you can convince him to use it less.
    – PatomaS
    Feb 5, 2014 at 5:21
  • Radvansky has shown that crossing event boundaries can upset short term memory, but he's not looked on this granularity.
    – Erics
    Feb 5, 2014 at 6:10

4 Answers 4


The boxes are great for creating distinction between different elements.

The question is, should there be?

In the example you gave users have to fill in a form. The boxes break up the form giving the idea the different elements are independent from each other. No boxes or just one box will group the elements making them belong together.

  • I can see your point, @Paul. Boxing elements can definitely bring order to a page and create clear boundaries for connected elements. I guess my issue is that I see them being used too granular. In the example above, I see all of those elements, collectively, belonging to one 'report' and not 4 separate elements belonging to one 'report'. Feb 6, 2014 at 16:13

Making areas easy to identify is a good accessibility practice. It makes easier for the user to scan the page and find what he is looking for. It also helps to see things as different items.

But, overused (in a bad way) it adds clutter to the page which became then hard to read or at least "unpleasant". Your coworker must keep in mind that using this kinds of box tends to make the items indepent (they became groups actually).

That been said there is a lot of ways to create groups and help to identify blocks. He could use a background color, separators, borders, spaces, and so on. It's part of the design job to make a site nice and pleasant.

If you are developers working without designers (which could mean your boss didn't realized how important is to have a designer in your team) then I think it's already a good thing to do it that way.Your first goal is to make things work, doing your best to make it accessible is a great plus.

However, I think you have to discuss with your coworker and tell him what you feel sincerely with the right arguments. Suggest him other ways to make (or not) boxes. Do it together and see how it works.


I absolutely share this pet peeve. Once everything is in a box, whether it's a background shading or border outline, it can too easily become a blur of objects. Also, I think you lose visual hierarchy-- everything gets the same weight.

I'm not sure how best to approach this particular situation, but maybe share with them some basics of Gestalt Grouping theory -- maybe pitch it as something that is new and exciting to you that you want to share. You can then get into the idea of trying other approaches to grouping objects.

Some resources:

https://archive.org/details/DesigningWithTheMindInMind http://sixrevisions.com/web_design/gestalt-principles-applied-in-design/


I agree to asking him about that. But with example you provided I think you right. He is overusing this method. There is no need to boxing every single field.

The question is about boxing element. But if we refer to "group" keyword Wikipedia says

"A group is a number of things or persons being in some relation to one another."

Also if we search what is a fieldset we get this from W3:

The element represents a set of form controls optionally grouped under a common name

So the main fact is number of elements that is placed under the box.

  • Why? You've not given any reason as to why there isn't any need to box on every field.
    – JonW
    Feb 5, 2014 at 7:37
  • Because each field is actually a box. And he place a single field in a box again.
    – SAMPro
    Feb 5, 2014 at 7:44
  • That's not a reason, that's just opinion. He's saying 'I like it in a box' you're say 'I don't like it in a box' but there's no reasoning about why that's the case. Is it bad for accessibility? Does it break the logical flow of the page? Is it an incorrect use of markup thereby failing W3C standards? Just saying 'You don't need to do it' isn't an answer unless you say why.
    – JonW
    Feb 5, 2014 at 9:03

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.