Your Trusty Upper-Left Corner
I’m thinking more and more about the relationship between visual art and user-experience (UX) design. In that mode of thinking, let us examine diagonals going into corners.
In drawing, you must learn to live with your corners, all four of them. They are always there, every time you sit down to work on your art. It sounds simple enough, but it’s not. Fact: Corners determine the success of a composition.
As a general rule, you don’t want diagonal lines touching your corners. Why? This leads the viewer out of your picture. If her eye leaves the picture, is there a chance she won’t come back? I don’t have statistics, but you get the idea. You probably want to keep people in your picture, visually and mentally, rather than send them away.
What else does this diagonal do? It reminds us we are looking at a picture. We become aware there is a corner, aware there is an edge, aware of the wall, and now we realize we’re standing in a white gallery again holding a glass of wine. This all happens in a fraction of a second, a fraction of a second that could cost you a sale. OK, maybe a few of you want to address the artist-viewer relationship in a new way, using diagonal lines. So it’s a rule you can break, easily, and maybe the consequences are not Earth-shattering, but it’s a rule nonetheless. There are other rules about corners, but I’ll save those for later.
Why bring up this rule of diagonals in terms of user experience? Because your website has four corners! Of course. But here’s the rub. You can only count on one of those corners. Which one? The upper-left corner. Why? Screen sizes have diversified tremendously. Check your stats lately? Today there is no “standard size” to design for, the range is all over the place, percentage-wise and in terms of pixels. Your viewer might have a tiny mobile phone, an old garage-sale 640×480 CRT, or a new 1920×1080 LCD.
So when you think about corners for web pages–how we use them, how we react to them, how we design around, into and out of them, focus most on your trusty upper-left corner. It’s the only corner that’s truly a corner. The other three exist only virtually.