Are you following the f-shaped pattern for your website?

We have already discussed about the types of landing page, today we shall put some light on the arrangement of the web pages in general, but let us do some recap.

While creating a new website or probably re-designing it, it is crucial to keep your target group’s interest in mind. Designing a website is not an easy task as it entails a lot of research and brainstorming. A website essentially is an amalgamation of interrelated web pages. These web pages include text, images, videos, graphics and animation etc.

Now that we know the constituents of our website, it’s the time to arrange them in the correct order. Talking about the web pages, F-shaped pattern is usually taken as the guiding principle for any website, though it may vary from one business to another.

What is the F-shaped pattern?

F-shaped pattern basically defines the eye movement of the visitors on a web page. It is also used to locate the hot spots on a given web page. Hot spots are particular regions where the visitors’ eyes focus the most.

Before explaining this further, first analyze the usual eye movement pattern of a website.

The normal eye gaze begins from top left on a web page, moving horizontally to the right. Moving a little below on the left side, this pattern repeats but the gaze stops around the center and then you scroll the page downwards to have a glance over the important sections placed on the page. This makes a virtual F-shaped pattern on a web page and it is believed to be the normal eye movement pattern of any web page.

Let us understand this with the help of a screen shot below:

This is the ‘About Us’ section of Magnon International’s website. According to the F-shaped pattern, the user eye movement starts from the top left corner of the web page which means that we first see the logo of Magnon International and the company’s contact details on the same horizontal line.

Then we would look at the main navigation bar of this page and then scroll the page vertically downwards just to have a quick idea of what the page consists of. And hence, you would observe the F-shaped pattern marked in turquoise color in the screen shot above.

If we go by what we have already discussed above, we should track the hot spots on this page. The top left portion where the eyes focus is majorly reserved for the logo. You can see Magnon International’s logo here. Other important details like the contact numbers etc. are placed on the same horizontal as it is there on this page.

Then, your hot spot is the main navigation bar and the other details arranged vertically downwards.

This example states the relevance of the F-shaped pattern and the use of hot spots. These hot spots can help us position all the elements of our website in the right order.

Need assistance? Let our web designers, design your website now!

-By Neha Gulati

You can leave a response, or trackback from your own site.

Leave a Reply

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


* Copy this password:

* Type or paste password here:

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>