How to Use the F-Pattern Correctly

heatmapstudy

Make no mistake, designing a website in an F-shaped pattern is not only important, it is crucial. “Mr. Usability” himself, Jakob Nielsen, shows us that users view websites in an F-shaped pattern consistently across websites. There are websites that follow an F-shaped pattern, and there are those that most definitely do not. Then there are those times web designers don’t quite hit the nail on the head. For we UI afficionados, the culprits are easily spotted right away (in any given order and combination): clutter, E/T/I instead of F, or even the infamous mirrored F.

So today we take a moment honor just a few of these beautiful atrocities. Let’s delve right in, shall we?


Style Birmingham

sb-screenshot

Talk about overload, albeit gentle. Style Birmingham is actually a light sampling of F-gone-wrong. Its modern sense of style seems like it should be minimalist meets fashionista, but that message evidently wasn’t echoed to the web design team. This website suffers from a fairly common trend in websites as of late: it tries to accomplish entirely too much on the front page. Having a few samples from each category is a neat idea, but innovators in magazine-style layouts have gotten apparently lazy. Let’s step it up a notch, people.


Kosh Creative

kc-screenshot

Again, a magazine-style layout, but this time it’s obviously blog-inspired. Kosh Creative employs some neat ideas on their website, though the left-side menu appears to be navigation at first; users might find themselves quickly let down when it’s actually just an animated services banner. My main concern? Columns beget columns beget columns. Word to the wise: if you want to widget-ize your site, do so sparingly. Think of it this way: every time you split a load-bearing beam, its structural integrity lessens; just think of your columns & patterns as load-bearing, as well. Every time you force users to make binary choices about the more salient column, you take them one step further away from your load-bearing F pattern.


Modal Inc.

mi-screenshot

Ahh… the infamous mirrored F-shaped pattern. A truly rare specimen, indeed. Because of the smart use of white space and clutter containment, I don’t personally think Modal’s site suffers much from the mirrored pattern. On the other hand, the navigation menu is left-situated, and as such the user is forced to move their mouse against an F pattern, and much more than they’re used to in general. A simple relocation of the menu to the right might solve this.

The F-shaped pattern is by no means an end-all-be-all solution to make any site great. The only solution to that ever-changing equation is a talented, dedicated designer (or team of designers). Me, I try to encourage all my clients to educate themselves at least a bit in cardinal design rules like the F-shaped pattern. It almost always makes the process go more smoothly for both the vendor and the client.

 

If you liked this article, please help spread the news on the following sites:

  • Bump It
  • Blend It
  • Bookmark on Delicious
  • Stumble It
  • Float This
  • Reddit This
  • Share on FriendFeed
  • Clip to Evernote