In a study done in 2006, Nielsen discovered that people read Web pages in an F-shaped pattern that consists of two horizontal stripes followed by a vertical stripe.
What is the F-Pattern?
The F-Pattern is the way our eyes move when we read content online. In a matter of seconds, our eyes move at outstanding speeds across website copy and other visual elements, scanning the page in this order:
1. First, across the top of the page to read important headlines.
2. Then, down the left side of the page to view numerals or bullet points.
3. Lastly, across the page again to read bolded text or subheadlines.
This reading pattern has the following three components:
Users first read in a horizontal movement, usually across the upper part of the content area. This initial element forms the F’s top bar.
Next, they scan a vertical line down the left side of the screen, looking for points of interest in the paragraph’s initial sentences. When they find something interesting they read across in a second horizontal movement that typically covers a shorter area than the previous movement. This additional element forms the F’s lower bar.
Finally, users scan the content’s left side in a vertical movement. Our eyes are trained to start at the top-left corner, scan horizontally, then drop down to the next line and do the same until we find something of interest.The scan patterns are not always of exactly three parts. When the reader finds something they like, they begin reading normally, forming horizontal lines.
Why should we use it?
F-shaped pattern will help you create a design with good visual hierarchy, a design that people can scan easily. F-Layout literally gives the designer more control over what gets seen firstly.Why should we use it?
The F-pattern is the go-to layout for text-heavy websites like blogs and news sites. If there is a lot of content,especially text, users will respond better with the layout that is designed according to the natural scanning format.How should we use it?
Include the most important points in the first two paragraphs on the page. Use headings and subheadings. Ensure they look more important, and are more visible, than normal text so users may distinguish them quickly. Start headings and subheadings with the words carrying most information: if users see only the first 2 words, they should still get the gist of the following section.
Visually group small amounts of related content — for instance, by surrounding them with a border or using a different background. Bold important words and phrases. Take advantage of the different formatting of links. Use bullets and numbers to call out items in a list or process. Cut unnecessary content.
Scanning on the web is dictated by:
Users motivation, Goals they are trying to achieve, Layout of the page, formatting of text and Page content.It’s hard to control people’s motivation or their goals, but you can optimize content and presentation using F pattern so that users can find what they need quickly.We at FanTaskTick help brands increase sales and conversions by focussing on improving the customer experience of their websites and mobile applications.
A Digital Marketing Coach and Consultant, having 9+ years of experience in User Experience Design, Web & Mobile Product Management.