When is it appropriate to use a “well” UI element?

Question

Are there standard uses for it?

I see it most often when embedding example code...

As see on Twitter Bootstrap: http://twitter.github.com/bootstrap/components.html#misc

Answer 1

It's called a well element because it visually sinks into the surface of the page, like a well sinks into the surface of the landscape. It suggests that there is a (grey) level below the (white) one you're looking at currently.

Most appropriate uses therefore would be to show something that is a subset of what you're currently seeing, eg navigation for the next level down, or more details of the thing you describe. It should not be required to read the well content to make sense of the page therefore, it merely adds information that can easily be skipped. This could work for a block of code, but not so much for a block quote.

Don't overuse the effect though. A well should take up only little space on the page, and not be repeated often on the same page.

Answer 2

I have never heard the term well used for that. Huh. Maybe it's a Twitter term. Visually, I call it a box. Or maybe a frame. In terms of semantics, well context is everything. It could be used as a call out. Or a heading style. Or a block quote. Or, as in the example, a block of code.

It's appropriate to use it whenever it makes sense for you to use it...likely to emphasize or highlight some content.