The Most Important Design Real Estate on Your Site

Categories Articles, Web Design

This is a guest post from Anthony Licari – a sponge that’s regurgitating information and data in a functional manner on his amazing blog.

Your site is full of real estate and almost all of it is trying to grab the visitors attention as quickly as possible. It could be argued that all real estate on your site is important, if you feel like being a pedantic whiny face. There are some areas, one in particular, that deserves extra love. Over there in the right hand sidebar near the top. That’s one of the main focal points for directing traffic around your site. Have no worries, I’ll be getting to her lips later.

… Why?

I realize you might have paid for a big fancy logo and installed some nice jQuery menu to direct visitors but this little piece of real estate is as valuable. Now I’m not arbitrarily declaring this important because I can, there is some logic behind it. In grid(page layout) you have two main schools of thought, symmetrical and asymmetrical. Almost everyone uses asymmetrical layout design on the web. Meaning we don’t have a left column that’s 450 pixels wide and a right column 450 pixels wide. Most two column sites will make the body(content) of their site the left column and give it the most space. It’s actually three columns if you want to be technical where as the left is 2/3rds and the right is 1/3rd. Correction, it’s actually 12 or 16 columns if you’re using a 960 layout but that’s an entirely different discussion.

“Cool, I know the definition of asymmetry, so what?” You have a point, random quote from nowhere, let’s go somewhere with this. The first place most people look at when they look at anything is about 1/3rd from the top and 2/3rds from the left. This is any visual’s immediate focus. Have a look at these sites, the highlighted area is where visitors are most likely to look at.

screens

I used the same overlay for both images and yes both are landing on white space or inbetween elements. There are elements surrounding that focal point to slightly move the readers eyes. It’s no surprise that on CNN that’s where their prime advert is located as well as a user control panel and on Facebook their prime advertising location with the user notification area. I’m not saying that just because Facebook and CNN say it’s prime means that it is but really if you’re Facebook and your whole model is built on interaction, where are you going to put your new notifications? In the prime real estate.

Now take into account that if your site is in English it is going to read from left to right where people are focused on the left and then take focus away on the right. After each line they have a choice to find and continue on the next line or do something else. You have this invisible subconscious trailing off after every line. Mix this with the page’s immediate focus and you have your formula of where visitors will always, always be looking at if they spend more than a split second on your site.

What Should I Do With My Real Estate?

We’ve determined what is most likely your primary real estate if you have an asymmetrical two column web site. Now what the heck do we do with it? This is where it gets tricky and is definitely a case by case determination. This space can be used for advertising, for information, a user control panel, et al. There are some rudimentary formulas to follow for your space. If you are a typical blogger and don’t offer any newsletter subscriptions or products then you have prime real estate for advertisements. For community sites or sites with a newsletter you will usually see some sort of newsletter promotion or user control panel in this area. Of course it’s the easiest area for them to find, it’s where they’re looking at.

How to Devalue Your Real Estate

During the last Presidential elections I started a site with a few friends of mine. We focused mostly on design and made sure our site was very pleasing to the eye. We were really just opinionated jerks that were critical of everything. Anyway, when I was scoping out the blogosphere for the conservative and liberal blogs I noticed something really, really strange. Most of the conservative sites had god awful designs YET they had as much or more conversations and commenting going on with their sites than the liberal opposition. This is indicative of content vs. design. Without content there is nothing to design.

The quickest way to devalue your content is to over design. If you start incorporating drop dead gorgeous designs all over your site the visitors will have no idea what to look at or how to determine what’s important. It wouldn’t be much fun reading a newspaper that has every font the same exact size. How could one quickly determine what’s important? I realize some designers want to design outside of the grid completely but it really leaves havoc on the visitor. Humans are logical and need things to be organized in a sensible manner, that’s how we process information and you will never be able to escape that. As long as your audience is humans that is. Minimal design is better than over design.

So What Can Her Lips Do?

lipread2

Look at the image to the right. Look again, you may have missed something. Do you see what it is? There’s nothing there but I’m guessing a few of you looked over at it before reading on. The power of suggestion and subliminal site design can help you organize your site and determine what’s important. It can keep focus on the prime real estate and spark curiosity.

Her lips along with a provocative message can do a number of things besides what you were probably thinking when you first saw it. For starters it will make someone stop and have a look. Most probably looked at the lips first and the type second. Then you add a little message to prod that curiosity and sure enough you have someone reading a blog post. Like you are right now. Not to suggest the image is the only reason why you are reading this post but I did make that image to illustrate a point. You have more control over what other people do than you might think. Take those lips, add a little provocative message and throw it into your prime real estate. People would be looking, becoming interested and clicking all day long. I’m not suggesting being subversive as to trick people but when conveying where you want your visitors to look and read… understanding this is important. Lips, interestingly enough, have an evolutionary history that draws a persons attention. I will be going more into that on my site.

What Have We Learned?

First, what real estate your site visitors will consistently look at and second, how to direct your visitors subliminally. Obviously I skimmed the surface making mere conversational points. I strongly encourage you to do as much reading on color psychology, grid layout, human behavior et al. You can’t force any visitor to do something but if you play your cards right you can give them one hell of a suggestion.

Anthony Licari
Anthony authors short stories and prose on his website and Lounge Nouvelle.
  • Interesting read! =)

    Well written. Thanks

  • And what if we apply this same trick to inspiredm.com?

  • borisg

    ^^ agreed

  • Hm, this is very interesting considering there is a banner ad at the top of this site that covers over 50% of that real estate outshining the logo. Then there is a Google ad right above the content and your lips image. We can throw a rough estimate and say the left column with the content covers 66% and even you will admit that is probably being generous. That leaves 33% for the right column which is very ad dominant.

    Considering the content is text and the ads are images do you really believe you are drawing the eye towards the content or the ads? You speak of subliminally directing the reader, but I would be curious to know in which direction do you think they are being directed?

    Psychology (or whatever you wish to call it) suggests that the majority of readers view a page in a Z like fashion. In the instance of this site I would start at the top left, move to the right and since there are more images underneath the one I just skimmed I am drawn to continue to look at them avoiding the left side.

    So I’m curious, do you really feel the left side is the most important design real estate on this page or the right side?

  • I thought the lips were an ad, so I was annoyed by them (they did catch my attention I guess) but only realized they were related to the article as I was reading.

  • Adrian Borkala

    Good read but would be interested to know what info there is to back up the comment about where a visitor first looks on a web site. I can’t now look at a page without being conscious about where I’m looking :-)

  • Excellent post, and yes – I first looked at the lips and began to read this post:)

  • Good article.

    Thanks.

  • colour theory excellent stuff – remember not to use your fav colours think of theemotion they create

  • @Scrivis I can’t speak for how this site is laid out I’m merely guest posting on it. Although I will say that I think all of the advertisements are extremely relevant. A lot of people don’t like behavioral ads because it’s invasive but I say if you’re going to be showing me ads anyway at least make them relevant and useful, something I might need. I’ve checked out a few of the advertisers here and it’s all relevant.

    So even if your implication was correct I’m not sure if anyone would really be upset seeing as they would be viewing another site they most likely think is interesting.

    @Adrian Here is a link to substantiate how readers skim the page and what they’re looking at.

    http://www.useit.com/alertbox/reading_pattern.html

    That’s kind of the idea Adrian. “You will think of me every time you see a chicken.” It’s hard not to think of the person because when memories are saved, especially new memories, other information is stored with it to help us reference it later.

    So if you write an article that provides new information or presents it in a new fashion ultimately your readers are going to think about it probably until they die, every time that information appears.

    Thanks for the comments.

  • Interactive Professional

    It’s a good thing all interactive professionals are men, or that whole blowjob joke wouldn’t work.

  • Of course, such great tips here I completely overlooked them! Awesome post and really great content as always, I’ll have to review my blog’s layout and see what I can do with some extra space.

  • Many thanks for your thought provoking post. I guess my own feeling is that these types of things can be interpreted in many ways, and I’m not sure there is a definite pattern to how people scan sites and the implications of that for interface design. I believe it depends on what they find, which then has on influence on what they do next. If it’s something like a search engine, where they’ve been many, many times, then definite patterns emerge, but a new website? …

    Interestingly, came across this yesterday from Google Labs:
    http://browsersize.googlelabs.com/
    It seems to basically be about browser size, and top left downwards ….

  • @InteractiveProfessional Not a joke rather an example of basic human physiology. By suggesting that it wouldn’t work with females is to say that they wouldn’t understand and I have a feeling most probably do understand regardless of sex. Are you saying that females are stupid?

    @Mark You’re right there is no silver bullet outside of you know general studies and there is nothing better than analysis of specific individual patterns. I will admit that it is hard to write on and get into specifics on a topic that is such a case by case scenario. Ultimately what one can hope to accomplish is getting people as you said “provoked” to do some further analysis and study on their own projects.

  • Figuss

    @InteractiveProfessional … What a funny way of thinking… Are you really saying that interactive professionals are only men? Geez… That so… old school.
    Man or woman, I do think that we are all able to understand the concept of a blowjob joke… I’m sure it provokes both side, maybe in a different way, but it gets the same result wanted, it provokes.

    Anyway, it is an interesting article. It makes me think a little more deeper of how to build and integrate content.

  • What’s a t-shirt flare?

  • Cedric

    I’m pretty sure this is NOT the prime real estate area of a website. From looking at the area highlighted, I can tell that the “Most Important Design Real Estate” has been determined by mining data about where a user places their mouse pointer. Unfortunately the assumption is that where the mouse is, the viewer is looking. Instead, think of this area as the LEAST important area. This is the area where people are placing their mouse so that it is out of the way.

  • @Cedric This post has nothing to do with someone’s mouse pointer, I’ve never even used the word mouse and pointer in the same sentence until now let alone researched anything on that.

    The data that was mined dealt with studies that show where the eyes subconsciously look at first when they see a visual.

    My mouse is sitting on your avatar right now and I can see what you’re saying about that being the least important area.

    Thanks.

  • Interesting post… Some useful insight.

  • Fred

    It’d be interessting to see some of the data that backs up your claim of this “most important” real estate and how it was gathered. The way the article is written seems to me as if it was something sounding plausible to you, Anthony.

    But your last comment seems to suggest you do have data. Why don’t you share it?

  • Sure ;)

    http://www.poynterextra.org/eyetrack2004/main.htm

    As you can see the eyes first look to the left as I said people who read left to right will do and then they move to the right and downward. Notice the yellow to that juts into the green on the right?

    If we assume that the top left will purely be static branding and not dynamic information as it is with almost all sites then the next place, down and to the right is what you should take note of.

    My substantiation for the focal point of a graphic design is from academia. I don’t have any quick references to that unfortunately, only text books. In this article I merged the two together.

  • thanks..ive got a lot of ideas from this for my site..

  • Oh yes, now I remember where the focal point came from. The rule of thirds.