A Researched Guide to Landing Page Layout

There is no 100% tried and tested layout to a successful website - in fact, with the number of variables that need to be taken into account (including the speed of change online) it’s hard to work out the ‘rules’.

That being said, I’ve looked over studies and articles from as recent as this year, and stretching back to the early internet. And I have found some very followable guidelines: 

Keep it Simple

In a study of the effects visual clarity and prototypicality upon first impressions of websites, Tuch et al found that ‘ Websites of high visual complexity lead to a more negative first impression than websites of medium or low complexity and prototypical websites

create a better first impression than less prototypical ones.’ 

Specifically, users will judge a website as visually attractive or unattractive within 1/50th to 1/20th of a second. They judge busy, or visually complex websites as less attractive than simple ones. So, sticking to simple, expected designs is key to keeping users on a site long enough for them to click through or interact with your site/products. 

What does this mean practically? 

Firstly, don’t reinvent the wheel. As Tuch notes, ‘In the course of time, through interaction with the Internet, users develop certain expectations of how websites look’. So, stick to whatever is standard practice - or recognizable visual language - for the type of site you are putting together. 

That being said, a site being too similar to others creates its own issues. A 2018 study by Lulu Cai et al focusing on Chinese students' E-Commerce site preferences, states that while visual language must be consistent with what is being sold, ‘the layout design should have a distinct personality, and it must be different from other similar categories of websites.’

Solutions to this include: 

• A unique logo up top

• A color scheme or choice of font that catches the eye of the user immediately while still portraying the desired visual style

• High-quality images of the product/services offered (and particularly their USP) being introduced as soon as possible.

F and Z Patterns

In the absence of specific design/visual cues, users will usually take in a site in an F pattern, concentrating on the top few lines of text and paying less attention as they move down the page, always reading left-right (in languages which read in this direction). So, they notice what is at the top, and down the left side. When tracked, it looks something like this:

According to the Nielsen Norman Group, who carried out most of the eye tracking studies on web design, the F pattern is most common with the following coming as runners up:

• ‘Layer-cake pattern occurs when the eyes scan headings and subheadings and skip the normal text below. A gaze plot or heat map of this behavior will show horizontal lines, reminiscent of a cake with alternating layers of cake and frosting.

• Spotted pattern consists of skipping big chunks of text and scanning as if looking for something specific, such as a link, digits, a particular word or a set of words with a distinctive shape (such as an address or signature).

• Marking pattern involves keeping the eyes focused in one place as the mouse scrolls or finger swipes the page, like a dancer fixates on an object to keep balance as she twirls. Marking happens more on mobile than on desktop.

• Bypassing pattern occurs when people deliberately skip the first words of the line when multiple lines of text in a list start all with the same word(s).

• Commitment pattern consists of fixating on almost everything on the page. If people are highly motivated and interested in content, they will read all the text in a paragraph or even an entire page. (Don’t count on this to happen frequently, though. Assume that most users will be scanning.)’

Overall, the message is - people scan blocks of text unless they are extremely invested in a topic or given cues like bolded text, images, and bullet points. Frontloading information is also a good idea, with subheadings carrying maximum information and the first few words of sentences designed to include keywords. 

The Z pattern is similar, but occurs when a page is organized more loosely, with less text and less visual information. 

As you can see, attention is focused in the corners. 

To take advantage of the F or the Z pattern, placing key information and calls to action in positions the eye naturally lands allows you to game the system. 

Image Placement

Image placement should be carefully selected, specific, and start early. Stock images are wasted space unless very relevant. 

Writing in an early paper on page structure back in 2000, Stephanie Hass posited that ‘an important function of an advertising page is to make the reader “feel good” about the product. The technical means by which this is accomplished may change over time, progressing from eye-catching graphics to moving images’. 

‘The product’ here is key. Users don’t primarily care about images of people looking happy, or pretty city views - they want to see the product (or service, etc) and what is special about it. Remember how quickly they make decisions on liking or not liking a site? You need quality and content quick. Original (if possible), specific images should appear as soon as is remotely practical.

Alongside images, though, context (usually through text) is needed. Cai says, ‘Although graphics have a strong visual attraction, it often requires some text to effectively explain and convey information to users. Appropriate changes in the text color, size, shrinking, etc., and interface layout can more clearly express the affiliation between product information and content.’ While Papadopoulou says of web pages generally on a web page it is, ‘the richness of information which determines the level of a customer’s involvement with it’.

This is slightly at odds with recent trends for multiple tangentially connected images with little info inspired by DIY web design 2.0, like Squarespace, and designed for with the info-light Z pattern in mind. 

From my research generally, I would conclude that (as stated earlier) looking modern and recognisable for your market is important, but you might gain an upper hand by  jettisoning the unexplained stock images and using relevant pictures with short explanations beneath them displayed in the same style. 

Gestalt theory

Gestalt theory is also big in web page layout. In Web page segmentation based on gestalt theory, Xiang says, ‘If the semantic relationships between contents are inconsistent with the perceived structure, the page would be hard to browse. Thus, for well designed pages, we believe that visual cues like layout and style coincide with the semantic relationships between contents, and the design of these cues follows the general laws of Gestalt theory.’ 

This essentially means websites (and information generally) is most understandable when like-things are grouped together. For example, a block about what you do, a block about the product, a block about who your customer might be. 

Visually distinct blocks also break up F and Z scanning, maximizing the benefit users are getting from your website. Make them visually distinct using:

• Background colors

• Outlines

• Distinct styles

• White space 

This might sound really simple, but look through the copy/images for any site and you are likely to find confusion or overlaps. ‘Is this gestalt’ is a good question to ask before you publish. 

Here’s a particularly bad (aka, confusing and visually illogical) example:

A good example, on the other hand, is This Isn’t Meat. The site is reactive, clean, gestalt, and the F-pattern has been kept in mind:

Regular Interaction

The next big lesson for customer retention and click-through involves interaction. Often, people try to achieve this with a glut of video, but that can be too much interaction. According to Yang, ‘perceived interactivity was significantly more effective than objective interactivity’. This might be as simple as including rhetorical questions in text, or unique and arresting images within the page. 

Trust-building moments like these should probably come at a point that attention might be lost, as traditionally that’s when interaction is encouraged in web pages. Inserting them after long blocks of text might be a good idea, or else at calculated intervals throughout a long page (every X reading seconds, for example). Bottom left of a page or block works particularly well, as it takes advantage of how pages are read in both the F and Z patterns. 

Darley et al make the claim that, ‘Trust is found to be pivotal in Internet buying behavior, and it affects behavioral intentions. This is because low trust

or apprehensiveness regarding Web security is less likely to affect behavioral

intentions.’

And while trust is hard to guarantee, it can be built by positive language. 

As long as you are fulfilling needs previously (with the data-rich imagery and trustworthy site design previously discussed), positive language is the icing on the cake. For example: ‘We protect our customers’ data’ VS ‘No spam ever sent’. 

‘No spam’ brings to mind online danger and is phrased as a negative/passive statement, while ‘We protect our our customers’ brings to mind safety and is an active statement. 

Finally, social proof is best placed as a lead-in to action. Relatively small nudges have been proven to shift the needle in terms of personal behavior, as proven by the WSJ in a 2010 study on environmentally friendly consumer behavior.

In close proximity to asking for interaction from users (which in itself is active interaction that will strengthen their relationship to a site/product), social proof is a strong toll to build loyalty. 

Overall, the decisions you make about your site design are a huge part of that site’s success. With decisions about trustworthiness made in seconds, unclear headlines, poor layout and boring or irrelevant imagery cannot be made up for by excellent copy or a great product or service.

 Tuch, Alexandre N., et al. ‘The Role of Visual Complexity and Prototypicality Regarding First Impression of Websites: Working towards Understanding Aesthetic Judgments’. International Journal of Human-Computer Studies, vol. 70, no. 11, Nov. 2012, pp. 794–811. DOI.org (Crossref), https://doi.org/10.1016/j.ijhcs.2012.06.003

Cai, Lulu, et al. ‘Research on B2B2C E-Commerce Website Design Based on User Experience’. Journal of Physics: Conference Series, vol. 1087, Sept. 2018, p. 062043. DOI.org (Crossref), https://doi.org/10.1088/1742-6596/1087/6/062043

 Haas, S. W., & Grams, E. S. (2000). Readers, authors, and page structure: A discussion of four questions arising from a content analysis of web pages. Journal of the American Society for Information Science, 51(2), 181–192. https://doi.org/10.1002/(SICI)1097-4571(2000)51:2<181::AID-ASI9>3.0.CO;2-8

Papadopoulou, P., & Kanellis, P. (2018). Online trust and the importance of interaction. International Journal of Technology Marketing, 13(1), 21. https://doi.org/10.1504/IJTMKT.2018.099849

Xiang, P., Yang, X., & Shi, Y. (2007). Web page segmentation based on gestalt theory. 2007 IEEE International Conference on Multimedia and Expo, 2253–2256. https://doi.org/10.1109/ICME.2007.4285135

Yang F, Shen F. Effects of Web Interactivity: A Meta-Analysis. Communication Research. 2018;45(5):635-658. doi:10.1177/0093650217700748

 Darley, W. K., Blankson, C., & Luethge, D. J. (2010). Toward an integrated framework for online consumer behavior and decision making process: A review: Online Consumer Behavior. Psychology & Marketing, 27(2), 94–116. https://doi.org/10.1002/mar.20322

MacCoun, R. J. (2012). The burden of social proof: Shared thresholds and social influence. Psychological Review, 119(2), 345–372. https://doi.org/10.1037/a0027121

https://www.wsj.com/articles/SB10001424052748704575304575296243891721972