Visual Hierarchy - the F-Pattern
A website or app is a form of visual art in its own right, and follows many of the same rules as more traditional art forms. It is the science of aesthetics, mixed with the principles of business, and a good interface must feel effortless and inviting. More than being creative, a good designer must also consider subtleties like composition, colors, size, what to include, and more importantly, what to leave out.
The visual presentation of an interface is essential for informing users, communicating content relationships, and evoking emotions. Like an invisible hand, the interface should guide users from one action to the next without feeling overbearing with relevant calls to action each step of the way. The interface should present content in a way that matches how users prioritize information. People visit restaurants for more than just to eat. They want taste, texture, presentation, and a memorable experience. Interface design is no different. The goal of any good UI design is to address three factors. How useful is it to the user? How easy is it to use? And most importantly, Why should the user want to use it?
Just as with a movement in the corner of your eye, the human eye is drawn automatically to certain points of interest. While some of this depends on the person, the majority of people tend to follow definite trends including how they view an interface. There are two predominant reading patterns for cultures who read left to right. The F-Pattern is typically for text heavy websites like blogs. The F-Pattern comes from the reader first scanning a vertical line down the left side of the text looking for keywords or points of interest in the paragraph's initial sentences. When the reader finds something they like, they begin reading normally, forming horizontal lines. The end result is something that looks like the letters F or E.
Nielsen Norman Group conducted a readability study based on 232 users scanning thousands of websites and found that users will rarely read every word of text. The first two paragraphs were found to be the most important and therefore, should contain our hooks. Keeping the F-Pattern in mind, designers should start paragraphs, subheadings and bullet points with enticing keywords.
The F-pattern can be very helpful for interfaces that want to embed advertising or calls to action in a way that doesn't overwhelm the content. Just remember that content is always king, and the sidebar exists to get users involved in a deeper level. As with all patterns, the F-Pattern is a guideline rather than a template. This is because the F-pattern can feel boring after the top rows of the "F."