How to Use the F-Pattern Correctly
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?
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.
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.
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.
Interesting read. What is your opinion about horizontal menu bars? Do you think they interfere with the standard F-pattern that users’ eyes tend to follow?
Actually, horizontal menu bars are often better as they reduce clutter and keep the eye reading left-to-right before top-bottom.
For more in-depth information on menu bars, beyond just thoughts on horizontal vs. vertical, check out “Mega Drop-Down Navigation Menus Work Well” by Jakob Nielsen, “Mr. Usability” himself.
Sorry, here’s the link: http://www.useit.com/alertbox/mega-dropdown-menus.html
Those mega drop-down navigation menus are awesome if done right.
Note on Mega Drop-downs : for this type of menu, you really need to have in relation, mega-content. If I may say so… At least enought categories and sub-categories to fill-out the “mega drop”. For a small to medium site, I wouldn’t advice mega drop-down. They will suffer from not beeing “mega” enougth.
@debadeep.
Usually horizantal navivation bars are usually placed between header and content sections. So they as well come handy to visuablly separate those 2 UI elements and allow to keep the eye below the header section thus focus the user’s attention on the content.
Great comment!