Did you know that there are specific website layouts that actually improve the natural readability of websites? Crazy right? This goes to show that a well-designed website not only looks better but really does offer more… it will connect better with the viewer. There are a two main website layout techniques that are often implemented which include the F-Pattern Layout and Z-Pattern Layout.(Look for an examination on the Z-Pattern in an upcoming blog post.) These patterns focus on different layouts of visual information in a website, that correspond to the natural reading pattern of users.
The F-Layout showcases where a user’s’ eyes are naturally drawn to in terms of reading the information a website. Such studies have determined that users read a website in an “F” pattern. For this example, we will show how the F-Layout is loosely used in our homepage.
How the F-Layout Works
– Begin at the top left of the page.
– Move horizontally across the top of the page.
– Come back to the left and do another horizontal scan across the page (doesn’t extend as far as the first horizontal scan).
– Finish by vertically scanning the left-hand side.
– Users only occasionally glance at the right side of a website, which means a right sidebar receives little attention.
This pattern suggest that users scan a website much like they read a book; left to right and top to bottom.
How does this affect the layout of a website?
What this means is that when planning a website, the most prominent information should be placed towards the left-hand side/top of a website to be the most effective as this will be read first. Such information may include a logo or main navigation. The next most important element in hierarchy is imagery as visually, images receive the greatest amount of attention. Headlines and text come last. It’s important to remember that text typically is not always read but is scanned, which means important information should be bolded or have another type of treatment to stand out.
R2F Creative LLC provides graphic design + branding and web design solutions for clients nationwide and locally in Ankeny and Des Moines, Iowa.
