Size Doesn’t Matter

I’m playing with some design changes for MarsEdit’s main window, and thinking it will probably end up mimicking the classic “Mail source list utility bar” appearance, where a few small buttons appear beneath a source list at the left-hand side of the window.

With things in flux while I moved bits and pieces of the UI around, I was able to observe a pretty stellar example of how the visual placement of objects within a container can dramatically change the appearance of the container’s size. Consider these snapshots, taken from Mail and this experimental version of MarsEdit. Stare at the buttons on the Mail version (top), then at the buttons on the MarsEdit version. Which section is taller?

Answer? They’re exactly the same height. 23 pixels tall. The crowdedness of the MarsEdit version makes the whole section seem way shorter than it really is, while the Mail version has miles and miles of room to breathe.

It occurs to me that this illusion might not affect everybody the same way. To me the difference is stark, unless I start fixating on the blank part of the bar, when I can more easily accept they are the same size.