Design to persuade: the 9 most dominating design principles on landing pages

In a previous article, we asserted that our life develops in complex environments [1] that saturate the capacity for analysis. In response to this fact, and incredible as it may sound, much of the decisions we make are automatic [2] and are based on a few stereotyped and internalized traits in our unconscious. This is evident when browsing the web, an environment that qualifies as complex due to the number of stimuli it offers, against which the user must make decisions in fractions of seconds, thus affecting their attention span. This has led to the creation of pages with psychological foundations, such as the case of the landing page, whose structure is determined by the discourse of persuasion, using rapport, mass opinions of third parties, criteria of authority, or the association with positive aspects; all this with the sole purpose of influencing the user's decision.

A sharp mind could interpret the landing page game as a kind of ruse that takes advantage of the automatism with which we usually make many decisions, but the issue behind all these persuasion methods focuses more on an attention problem.

As we stated before, the web is a complex environment, whose stimuli cannot only saturate our capacity of analysis but also our capacity of attention, that brain mechanism that allows us to process the relevant stimuli and ignore those that are not [3]. The question is, then, a competition to capture the attention of a visitor, maintaining it and focusing it to carry out an action, since this is a “limited mental resource” [4].

This is the reason why the different persuasion methods on the landing page exploit our automatic behavior because, as on the web, the mental resource is limited, the time of action is shortened and a quick decision is needed. However, for these methods to be effective and favor quick action, an easy-to-read structure is required, which captures the visitor's attention and guides them to persuasive arguments, thereby maximizing the visitor's limited attention span.

In this context, phenomena of perception such as pre-attention visual properties (preattentive visualize attributes [5]), present in another of our articles where we described the impact that visual properties such as color, shape, movement, or spatial position have had on design are particularly relevant.

These properties imply a process in which information is unconsciously extracted, being stored in the subconscious without the effort of consciousness. This fact facilitates the understanding of what is presented through design, since visual relationships are established in fractions of a second, thus facilitating understanding, which added to the elements of persuasion, should further simplify decision-making and time of action, thus helping care.

Design for care

According to these facts, it can be affirmed that the landing page is a discursive structure designed based on a limited mental resource, so its goal is to capture the attention of the visitors, maintaining it and focusing it so that they perform an action in a very short time. However, to achieve this, it must be well designed; otherwise, it will have the same effect of a loquacious speaker who, despite his flowery expressions, fails to convey the message. Therefore, to achieve its objective, the maxim of the landing page must be to reduce visual complexity to its minimum expression, for which, Gardner [6] proposes 23 principles that allow establishing visual relationships between design elements. These principles contribute to the objective of capturing, maintaining and directing attention, since they give the message logic and efficiency in a visual sense.

These principles are variants of the basic design elements that express relationships within a composition. In this sense, the relationship can be expressed through principles such as direction, which indicates the trajectory of the elements of the composition, whether it is horizontal, vertical or oblique, thus guiding attention to a certain point in space. In the same way, it can be expressed through the movement of dynamic elements, which also allows to guide the attention throughout the composition.

Other principles use characteristics such as color, shape or texture to represent relationships, such is the case of contrast, which exploits chromatic opposition, thus allowing elements or areas in a composition to be highlighted through the opposition between them. Perspective is another principle whose foundation is to direct attention through depth perception. On the other hand, the superposition and the scale express dominance of one element over another, or the affordance that describes the suggestive character of the objects that incite the touch, as well as the contact or the proximity that can also express a degree of relationship within a design.

In the same way, we can point out the consistency or degree of similarity that the design elements maintain, as well as the symmetry or exact correspondence in shape, size, and position, all of which converge in intuitive designs.

On the other hand, the expression of relationship can also be represented through the interaction of other elements that interact with each other. In this sense, it can be represented through grouping into sets, encapsulation, dissociation through anomalies, or ruptures. Moreover,  you can't omit negative spaces, highlights, element alignment, nesting, repetition, distraction, and continuation.

A tailored suit: peculiarities of the landing page

Now, these principles can be used in a wide variety of designs for different purposes; however, the landing page has a structure that follows persuasive enunciation. Therefore, to what extent can these principles be used? Are they more effective in the very specific design of the landing page? Do they vary according to the type of industry? Intuition leads us to suppose that there are fundamental elements, while others may be optional and may be determined by other variables, such as the type of industry, for example.

In order to verify this hypothesis, we have developed a case study applied to three types of industry: SaaS, E-commerce, and Services. This study has started from the analysis of 30 landing pages cataloged as pages that convert [7],and has allowed us to answer some of these questions, thereby determining the design principles that prevail in landing pages.

Synopsis of the case studies

The first step in this study was to identify in the sample the 23 principles established by Gardner, which allowed us to differentiate those that were common to all pages, from those that, although they were found in the sample, did not become frequent in all pages. The table below represents the principles whose frequency has been greater than or equal to 50% in the sample. This index has allowed us to determine that the principles that have more dominance in the landing pages are: Direction, Affordance, Contrast, Nesting, Whitespace, Consistency, Alignment, Size and Proximity, as can be seen in the table, in which the + and - signs indicate a frequency rate greater than or equal to 50% or less respectively.

In total, those that stand out add up to nine principles, since their frequency of appearance represents at least 50%. Other principles are possible, such as Motion, Highlighting, Anomaly, Distraction, or Interruption, but their incidence is very low. In fact, it suggests two facts to us: first, that there are nine principles that have greater dominance; second, that we are dealing with a very consistent form of design, not very prone to experimentation. The reasons why this occurs are not determined in this study, but it opens up a research topic that could provide interesting data.

The nine design principles of the most dominance in landing pages

(1) Direction

As we stated in previous lines, this is a principle that expresses a relationship through the trajectory described by the elements of the composition, whether it is horizontal, vertical, or oblique. In the middle of the sample, we could observe that it can be expressed through elements such as arrows or lines, as in image 1, but also through images that draw imaginary lines, as evidenced in images 2 and 3 in which it is also evidenced the preference for locating elements such as the CTA and the Unique Selling Proposition on the left side.

However, it is important to note that the remaining half of the sample seems to maintain this principle neutral since, in general, the composition of these pages is usually expressed in a block that keeps the main elements in the center, which does not mean that there is no direction, but it remains neutral. This fact tells us that there are two ways to express this principle in landing pages: one active and the other neutral.

This last form is especially frequent in Services pages, the majority of which tend towards the location of their elements in the center, unlike SaaS and E-commerce that can place them in the center or on the sides.

(2) Affordance

As we already know, it is about the ability of suggestion that some objects have, such as buttons, whose three-dimensional shape uses our knowledge of material objects to be perceived. Throughout the sample it could be observed that this principle predominates in all the pages; nevertheless, it presents a gradation between strong and soft, which is generated by the intensity of the color and the shadows: the greater the color, the greater the intensity and vice versa. In most pages, this principle is strong but it usually happens, although to a lesser extent, that it can be soft and, generally, it is evidenced in the CTA buttons, as can be seen in the lower image in which a strong affordance versus a soft one are contrasted. This last fact is common, above all, on Services pages where affordance is usually soft.

(3) Contrast

Contrast is generated in a design when there is a notable difference between two elements, so it is a very broad principle that can involve aspects such as size, shape, or color. Therefore, in this study, we have only considered it from the chromatic point of view. We have found that this principle predominates on almost every page in the sample, and is generally produced by the opposition of neutral colors such as white, gray, or beige, as in 1, and cool colors such as blue and green, as in 2. On rare occasions, neutral or cold colors are contrasted with warm colors such as red, yellow, or orange, as in 3. This is a dynamic that can be observed in different types of industry: Saas, Services, and E-commerce.

(4) Nesting

This principle is a way of grouping elements that represent a sequence. In our sample, it generally matches text elements that express a relationship of continuity, chain, or process. The pages that most tend to present nested elements are those of SaaS industries and to a lesser extent those of Services,and E-commerce.

(5) Blank spaces

Although this is a principle common to all pages, it is not presented in the same way in all of them, as there are variations in the amplitude of these spaces. In this way, the spaces can be moderately wide in the Saas and Services pages, as seen in 1 and 2, while the E-commerce pages tend to use narrower spaces, as seen in 3.

(6) Consistency

Consistency is the coherence of style and appearance that is reflected in elements such as fonts, color, or design style. It is also reflected in the persistence of symbols, icons, buttons, and more that are maintained throughout the composition. It is common for landing pages to maintain the same style of illustration, as well as the color and scale of the font. In the same way, the background maintains the combination of neutral and cool colors, as well as the shape and color of the buttons, throughout the page. Generally, in most of the observed cases, consistency occurs in this way, so it can be said that it is one of the most dominant principles.

(7) Alignment

This principle not only applies to the text, but to all the elements of the composition, its function is to generate "unity at a visual level by distributing the elements along rows or columns or along a common center[8]", which gives the composition a feeling of aesthetic stability. Although there are more complex forms of alignment such as diagonal alignment, it is generally defined in terms of rows and columns. In the case of landing pages, we have been able to observe that the alignment of the composition, not that of the text, occurs in two ways: justified and centered, as seen in the image below, where you can see how it is perform alignment on some landing pages.

According to our sample, justified alignment is a proprietary resource of E-commerce pages, while SaaS and Services use both types of alignment in equal proportion.

(8) Size

This is a principle that creates a relationship between various elements by means of scale. In the case of landing pages, we have been able to observe that it is often essential to establish a hierarchical relationship in the composition. It is not only about drawing attention to an element, but also about pointing out to the user those elements that have more or less relevance in reading the page. The element that stands out the most due to its large scale on the landing page is the hero, the place where the unique selling proposition and the CTA appear, which are sine qua non conditions of every landing page. Other elements, due to their smaller scale, are considered secondary, such as benefits, social proof, authority, or simplicity, as can be seen in the image below.

(9) Grouping

According to Gestal psychologists[9], there are several perceptual grouping principles that depend on the perception of certain elements. Proximity is one of them, as well as common trajectory, similarity or symmetry, and even encapsulation. The most common way of grouping the elements in our sample has been “through proximity”. This is a form of grouping, according to Lidwell [10], et al, in which nearby elements are perceived as a single group or fragment, and are interpreted as more related than elements that are further apart. In landing pages, this seems to be a common principle with which the user is indicated which groups of elements are associated, but above all, it is used to complement images and text and for functions such as buttons. These characteristics are expressed in the same way on the pages of the different types of industry.

Final thoughts

Remember that the persuasion methods applied on the landing page use automatic behavior since on the web, attention is a limited resource, which causes the action time to be reduced and requires quick decisions. However, for these methods to be effective, visual complexity must be reduced in order to obtain an easy-to-read structure that captures the user's attention and directs them towards persuasive arguments.

With this goal in mind, Gardner[11] proposed 23 principles that allow visual relationships between design elements. Now, as the landing page has a structure that is tight to persuasive enunciation, we have wondered which of these principles are most effective in this very specific design; in addition, we also wonder if these principles vary according to the type of industry. Our hypothesis holds that there are certain fundamental principles in the design of every landing page, while others may be optional and may be determined by the type of industry. Our findings allow us to conclude that:

• Based on the frequency of appearance in the sample, there are nine principles that have greater dominance: Direction, Affordance, Contrast, Nesting, Whitespace, Consistency, Alignament, Size and Grouping. This finding supports our hypothesis that the landing page supports its structure in certain design principles that serve to capture, maintain and direct attention. It also suggests that we are dealing with a very consistent form of design that is little given to experimenting with other principles.
• There are two ways of expressing the Direction principle in landing pages: one active, by scrolling in the vertical, horizontal and oblique planes, and the other neutral, without scrolling in the planes.
• The Affordance principle is strong on most pages, although to a lesser extent it can be soft and is generally evidenced by CTA buttons.
• Generally, the Contrast principle is produced by the opposition of neutral and cold colors; on rare occasions neutral or cold colors are contrasted with warm ones.
• The Nesting principle generally matches text elements that express a relationship of continuity, chaining, or process.
• There appear to be two forms of alignment on landing pages: justified and centered.
• The Size principle is essential to establish a hierarchical relationship in composition.
• The most common form of grouping in our sample has been proximity.
• The different types of industry can be characterized by the frequent use of certain principles, this allows us to say that:

1. SaaS industry pages, requiring the description of processes, are often characterized by the use of nesting.
2. The Services industries pages are characterized by keeping the Direction principle neutral, that is, opting for a block that keeps the main elements in the center, without displacement in the vertical and horizontal planes. They are also characterized by the use of a soft affordance on the buttons.
3. E-commerce industries pages are characterized by the almost exclusive use of justified alignment and the use of narrow white spaces.

‍

References

[1] Rojas, N. (2021). The landing page: technology and persuasion. Recovered https://www.quo.agency/insights/the-landing-page-technology-and-persuasion.

[2] Langer, E. J. “Rethinking the Role of Thought in Social Interaction,” New Directions in Attribution Research, Vol. 2., ed.,Harvey, Ickes, and Kidd. Potomac, Md.: Lawrence Erlbaum Associates, 1978.

[3] Gazzaniga,  Ivry  y  Mangun,  (2014). Cognitive Neuroscience: The Biology of the Mind. New York, W.W. Norton.

[4] Gardner, O. Attention-driven design: 23 visual principles for designing more persuasive landing pages. Unbounce. Recovered https://get.unbounce.com/attention-driven-design/.

[5] Interaction Design Foundation. Preattentive Visual Properties and How to Use Them in Information Visualization. Recovered from: https://www.interaction-design.org/literature/article/preattentive-visual-properties-and-how-to-use-them-in-information-visualization.

[6] Gardner

[7] Bailey, L.,  Loughran C. (2020). 34 Best Landing Page Examples of 2021 (For Your Swipe File). Unbounce. Recovered https://unbounce.com/landing-page-examples/best-landing-page-examples/.

[8] Lidwell W. et al.

[9] Wagemans, J. (2015). The Oxford Handbook of Perceptual Organization. Oxford, Oxford University Press.

[10] Lidwell W., Holden K. Butler J. (2003). Universal Principles of Design. Massachusetts. Rockport Publishers, Inc.

[11] Gardner