Are side borders abused or they are actually useful?

Question

Lots of desktop applications and websites add a border at the edges of the application area.

• Some are clearly made for a good reason. For example, a left and right side border on User Experience.SE actually serves as a tab and shows the current area of the website.

• Other seem to bring nothing to UX, instead of wasting the space and makes it impossible to use Fitts's law by positioning critical controls on the edges of the window/page. For example, Windows Defender contains a large border, while:

  1. The application is already in a window which has, as any window, a border displayed by the OS itself,

  2. The content is moreover positioned in inner borders.

Is there a reason I ignore which explains the usefulness of those edge borders? Or is it just a designer's mistake?

Answer 1

Side borders like all other borders have 2 purposes:

1. delimit unrelated elements or group related elements;
2. fill in empty space when there's too much of it.

Therefore, even if borders may not seem as necessary when elements are grouped by proximity, the abundance of empty space will require them simply for aesthetic purposes. Removing the borders around the inner elements in Windows Defender (your example) makes the window feel even more empty (it wasn't a great design from the beginning):

As for, "[making] it impossible to use Fitts's law by positioning critical controls on the edges of the window/page", it seems you misunderstand the law.

What the law really means is that the larger the travel distance to reach a target, the wider the target needs to be along the axis of motion in order to complete the movement in the necessary time. And the corollary is that if a target is positioned at the physical edge of an area where the movement is taking place, it possesses an unlimited width along the axis of motion because you can't move past it.

A border of an application window can't be a physical edge, along which elements can be placed, because windows can be resized and moved away from the screen's edge (the true physical limit in GUIs). In addition, there's an art rule of not placing meaningful objects on the edge of the canvas, making it virtually impossible for elements inside application windows to take advantage of the unlimited width property.

Answer 2

I wouldn't call it a mistake necessarily, but more of an aesthetic decision. White space isn't a bad thing.

At the same time, if you look at modern OSX apps like iTunes, they do away with borders entirely. So, again, I think it's more of an aesthetic decision more than anything.

Answer 3

Those borders clarify your container; this makes it easy to see where the "real" area of a page is and what the extra bit is. Borders help break or maintain connectivity to create logical associations through Gestalt Psychology.

The borders and rounding in the Windows Defender application show some clear connectivity; there could be multiple sections but they would clearly be contained in their container.

Mac OSX's windows have mostly but not entirely done away with borders; they're still on the top. Combined with the contents of the window this genearlly creates the appearance of a border, as you can see where the content stops.

This however causes the rare issue where the (non)border of one window appears to melt into the border of another window when the windows are not visually distinct. With borders (as in Windows) the containers are always clearly distinct. There's a bit of aesthetics in there of course; no borders can mean less visual noise, but the visual "noise" might also be helpful or aesthetically pleasing.

Answer 4

If the size of the margins does not consider the window and font sizes, then yes it is a mistake.

The margins/whitespace should:

• Grow when the window grows

• Shrink when the window shrinks

• Grow when the font is reduced (zoomed out)

• Shrink when the font is increased (zoomed in)

If resizing of the window automatically causes font resizing, then perhaps the whitespace is redundant altogether (other than some minimal spacing from window borders).