F-Shaped Pattern For Reading Web Content

Eyetracking visualizations show that users often read Web pages in an F-shaped pattern: two horizontal stripes followed by a vertical stripe.
F-Shaped Pattern For Reading Web Content (Useit.com)

Your goal as a web author is to put your best stuff in the hotspots. Obviously you can direct the user’s attention somewhat, using whitespace and graphics. But note how little attention readers devote to the boxed content on either side of the main column.

5 thoughts on “F-Shaped Pattern For Reading Web Content

  1. Evan, I’d imagine that the Google logo is centered on the homepage because there aren’t any results yet, so there’s no reason why Google should be coy. If someone goes to Google’s home page, they want to search, so the search box is prominent, and there’s little to distract the user.

    Once they’ve entered a query, the user is going to pay more attention to the results.

    I commend Google for keeping its news and other offerings separate from the home page.

    For geeks like you and me who want to tweak the layout, Google does offer the ability to personalize the home page. And you can of course make your own home page with a Google search box anywhere you want.

    I gather that Google’s logo was a response to what was at one point its main competition, Yahoo! Both date from a time when the internet was hip and trendy and cool. Not too long ago, simply knowing about Google defined you as a person with a certain amount of ‘net expertise.

  2. Personally, I don’t see all the hype of Google. At least on large screens, Google is a bit of a pain.

    First, the first search page is centered. Okay, but the results page changes to a left-justified alignment. Next, the results are automatically collated. It drives me insane! My eyes have to move every couple lines to find entries that I should be able to just skim down to see. Thirdly, (this may sound a bit petty, but…) I want to throw a tantrum every time I have to look at the bloody Gooooooooooogle on the pagination. It’s gratuitous, unnecessary and annoying. I wish Google would take that thing out!

    Sorry to gripe, but the rules Google uses can be improved. (The indentations of entries, for example. Why not use a better method for visually communicating a relationship between results? Color vs. grayscale, perhaps?)

    And consistency would be nice. If the entry page for the search is center-aligned with the logo on top, why is the results page different? Google is spending too much time with drawing your eyes to the Google logo (which makes me nauseated. My grandma has designed better logos.), they might want to start finding a way to draw you to the ads (which make money for Google). The ads are the easiest thing to block out and ignore all together.

    Google is a quasi-minimalistic search engine. It tries to be simple and complex at the same time and fails at both.

  3. Dennis, I agree that Google’s interface is simple, which may explain why users are giving the adword so much attention. Maybe each site’s purpose effects a user’s literacy toward those type of web pages going off of how uncluttered Google’s pages appear.

  4. Bobby, I wouldn’t want to speculate. If these images are typical, they show very powerfully how the eye is drawn to headlines and the first words in each item in a bulleted list.

    It does seem that if you spread all your site’s main resources in a horizontal line, there might be a good chance your reader will see it — but note that the readers are paying attention to the content area, not the navigation area.

    I guess the very clean, uncluttered Google page is an exception. Though I wonder… surely people know Google’s interface so well that I wonder why they feel the need to glance at the navigation anymore… but wow, look at how much attention that first adword gets.

  5. Interesting! Does that mean if the vertical navigation bar became horizontal, then users would pay more attention to it? I am still experimenting with a top-down structure when I build web pages, so I am curious.

Leave a Reply

Your email address will not be published. Required fields are marked *