Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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.

The screenshot of UX.SE shows that a border serves as a tab

  • 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.

A screenshot of Windows Defender shows that real content is separated from the border of the window by two other borders

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

share|improve this question
add comment

4 Answers

up vote 4 down vote accepted

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):
enter image description here

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.

share|improve this answer
    
+1 For clarifying Fitts law –  Bevan Feb 9 '12 at 6:14
add comment

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.

share|improve this answer
add comment

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).

share|improve this answer
add comment

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.

share|improve this answer
    
I notice that iTunes (my only OSX looking app) often melts into any white area underneath it's window, creating an effect I'm not particularly comfortable with in a Windows 7 context. –  Ben Brocka Feb 8 '12 at 21:09
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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