Don’t play Tetris with your web layouts!
Trend: Geometric Layout vs. Logical Layout
All too often I find myself in a room discussing a design layout for a web application or web site when someone suggests moving elements around to “save space”. Unfortunately, because they are focused on screen real estate alone, they forsake usability for geometric efficiency. They attempt to fit elements geometrically, like a game of Tetris, with total disregard for the logical order and relationships of the objects. All that seems to matter is that things are packed as tightly as possible, tossing whitespace, visual hierarchy, and logical arrangement out the window!
It is much better to have a logical, learnable, easy to use layout that takes up more vertical space than to have a tightly packed layout that forces the eye to forage for what it needs each time the product is used. If you’re lucky you can achieve both, but don’t forsake the former for the latter.


Austin
Nov 16, 2009
5:40 pm
What if you could have the geometric fit but the steps went in order?
Also, the link to tetris.com caused me to waste quite a bit of time playing tetris. ;)
Tweets that mention Don’t play Tetris with your web layouts! | User Interface Trends -- Topsy.com
Nov 16, 2009
5:44 pm
[...] This post was mentioned on Twitter by Russell Wilson and Sean O'Grady, Jeff Noble. Jeff Noble said: Reading: "Don’t play Tetris with your web layouts!" (http://twitthis.com/47uj3l) [...]
Russell Wilson
Nov 16, 2009
8:41 pm
@Austin – that’s certainly possible and I’ve done it many times before. BUT my point is that we need to think of the logical order before we worry about fitting things as tightly as possible. And we shouldn’t sacrifice simple usable layout for the sake of packing things as close together as we can. Thx! Russ
Chris
Nov 17, 2009
7:40 am
Quote:
“And we should sacrifice simple usable layout for the sake of packing things as close together as we can.”
Huh? Is the ’should’ supposed to be shouldn’t?
Russell Wilson
Nov 17, 2009
8:31 am
@Chris – yes, thanks for catching that. I corrected it.