Open access peer-reviewed chapter
Abstract
The primary web design method is user experience-based “landing page” web design. It enables you to expand the reach of a particular company, institution, or application. It aims to present́ the most relevant information on the owner’s website. A simple approach, such as split A/B testing, can provide reliable data because it includes an appropriate set of alternatives. This article provides an overview, analysis, and interpretation of the results obtained. It presents good and bad practices of existing landing pages. The approach showed optimal solutions in aggregate, segmented, and individual site users.
Keywords
- UX
- user experience
- landing page
- Adobe creative suit
- website
- webpage
- A/B tests
- CTA
- dark patterns
1. Introduction
Nowadays, when creating a brand, or a product, one should take proper care of its advertising and kind of image. You need to clearly define the vision - what the product will be associated with, whether it is good enough and whether there will be demand for it. In the online world, achieving such a goal is much simpler than in the past - you can set up a website to present your offer. However, there are challenges involved - competition is even more significant than ever. You need to be original and, at the same time, follow current trends and outlined guidelines. It is necessary to exist and prove that life with our product will turn out to be simpler, more functional, and easier to use. A landing page was created to understand our clients and know their needs to encourage them to buy or make a specific profit. This page contains all critical information about the potential customer while offering relevant product information. Creating a catchy landing page requires a wealth of knowledge in the fields of user experience, web architecture, marketing, and analysis of the data collected by the owner. This study aims to analyze and interpret the perception of website landing page prototypes and their templates created with Adobe software by users of different age groups based on user experience.
2. Overview of methodologies and techniques for creating a landing page based on user experience
A landing page, otherwise known as a landing page, allows you to expand the reach of a particular company, institution, or application. Its purpose is to present the most relevant information on the owner’s website. Users are redirected to a landing page when they click on a link, advertisement, newsletter, or even online shopping. Thus, it is a page to which one is redirected - usually from other portals. However, one can also be redirected within a given system, site, or application - for example, to another tab, such as purchasing or signing up for a mailing list. Profit is the key word - a landing page is supposed to provide profit - in the form of financial, more observers, more demand for a particular product, or simply visitors to the site [1].
A landing page is directly related to concepts such as Google Ads, Google Analytics, or at least the user experience itself - its task is to gather information from users - or, more specifically, to motivate them to perform the actions on the page. For example, registering on a website, signing up for a newsletter, or purchasing a specific product or service [2]. The task of a landing page is to attract as many users as possible to act. For this reason, tools such as Google Ads and Google Analytics are needed to control, and analyze users’ data, track their movements inside the site and advertise to get them to the landing page. Google Ads and Google Analytics are undoubtedly some of the more critical user experience tools - with them, you can improve the content found on portals or web vortals.
A landing page has several essential elements that must be present on it. Among the most critical components of a properly executed landing page are:
Clarity - little scrolling on the page, focus on the primary purpose,
Simplicity - the least amount of text and elements is advisable,
Visual appeal - corresponding to the basics of color scheme and typography on websites,
Catchy and short CTA (call-to-action), i.e., a call to action - for example,
“ Create an account” instead of“ Create an account on our site today.”
Like any website, a landing page should also be fast, mobile-friendly, and secure [3]. The landing page can be divided into:
Sales Landing Page - for selling goods, services,
Lead Generation - for collecting customer data,
Coming Soon - to inform about the event that will happen/product that will be on sale,
Click Through - to direct to another page.
A landing page is an excellent tool for market research, competition, and analysis [4].
2.1 Methodologies for creating and elements of UX-oriented landing pages
Google Ads and Google Analytics play a significant role in landing page design. Thanks to them, the portal owner, or UX designer, can create the ideal marketing persona or document for the prospects who use a given site. Thanks to these tools, we can find out who is interested in the content appearing on a page. We can find out, for example - where the person is from, their age, education, or employment. Of course, these are not the only supporting tools. Based on this information, an experienced UX designer can determine a prospect’s motivations and concerns. What influences their decisions, what their typical day looks like, or what goal they want to achieve by using the service are additional information that can infer from this information [5].
2.1.1 CTA, or call to action
A vital landing page element is the so-called CTA button or calls to action button. It is usually located in a prominent place in the very center of the site. It should stand out from other elements. This button is supposed to convey clear and precise information - what will happen when the user clicks on it? The information should be short, concise, striking, and simple in its message.
2.1.2 Graphic interface and typography of the landing page
The essence of most websites, including landing pages, is their design. The characteristic elements of a landing page, for example, are the CTA mentioned in Section 2.1.1. However, a call to action is not the only element of a landing page.
Limited text is a must. Fineness and detail are by no means advisable when designing such a page. What matters is the quick transmission of the essential information. Usually, it is the first seconds of the reception of a given site that determines the attraction of the viewer’s attention [6].
The text is naturally connected with the font, size, type, or placement. Typography is an essential aspect of a landing page. The placement of typography depends mainly on the background and the page’s image. In addition, it is a good idea to vary the size of fonts for headings and buttons versus the page content itself. Line spacing is also crucial, as well as line width - the maximum width is about 70 characters, corresponding to the width of A4-sized text [7]. The text must also contrast well so that it is easy to read. At most, the site should have two fonts - for example, headlines and text. It is also good practice to choose “standard” fonts - ones that the user has probably seen before (e.g., Helvetica or Arial).
Testimonials or customer logos are an exciting element that may or may not appear on our landing page. Testimonials are short videos usually containing a customer’s opinion about our product. In it, he expresses his experience with it. They help and encourage a potential future observer of our site to make a purchase. Logos of known or existing customers, on the other hand, will inspire confidence that our product is made reliably and that someone is already using it. Any certificates, awards, or prizes in competitions can also be an additional asset [8]. Another confidence-inspiring element can be to show your contact information, such as your phone number, email, or business address.
2.1.3 Dark patterns
Dark patterns are deliberate practices that various companies or institutions use to achieve certain benefits, usually marketing or financial [9]. While these practices are legally legal, they are hardly ethical solutions. Therefore, it is quite a risky user experience practice.
These are online behaviors designed to manipulate viewers into doing something they
Dark patterns can include, for example, bait and switch, forced disclosure, roach motel, forced continuity, friend spam, misdirection, sneak into the basket, confirm shaming, trick questions, privacy Zuckering, triggering fear, and disguised advertisements [10]. In Figure 1, you can see a typical example of a dark bait and switch pattern. This is one of the more commonly used dark patterns. It deceives the viewer by displaying several links, buttons, or redirection options on a given area of the website. In this situation, the user is often misled and does not necessarily click on the link they wanted. Clicking on another can, for example, download an unwanted program or, as in the example below, update your computer system.
Figure 1.
Example of recipient deception, bait, and switch [
Dark patterning is very controversial among the design community or web architects. Undoubtedly, they can bring a lot of benefits to a given site. However, it can also harm it. Viewers can easily be discouraged by such practices and thus abandon visiting a particular site. Equally, many corporations use them for their profits, but many abandon them for the sake of ethics and certain unwritten norms [12].
2.2 Examples of good and bad practices in landing page design
A landing page is also a website, so creating it should be guided by existing design principles. The fundamental rules are user experience,
2.2.1 Good practices
One of the correct practices is a
Another important aspect is the
From a marketing perspective, page load time is essential for a landing page. According to a Google study, only 15% of respondents met the goal of loading a page in no more than 5 seconds [16]. This is an essential factor as it affects the final audience.
Another good practice in landing page design is a
Critical practice is
2.2.2 Malpractices
If the page takes
A
3. Landing page prototypes
They made four pairs of prototype landing pages to test users’ general knowledge of web design and user experience. In each of the five pairs of landing page prototypes, you can see the differences between versions A and B. For simplicity, version A is at the top of a given pair - version B at the bottom. The prototypes were made so that in some of the pairs, the differences were already apparent when first looking at them. In others, the differences are only apparent on closer inspection. The prototypes presented were also arranged the same way in the survey - as the first set varies the most. Thanks to this procedure, it was also possible to differentiate the approach of the respondents - whether they focused their attention on the general, the whole, or the details of the pairs of prototypes. A pair of prototypes that differed little would define the respondents’ approach to focusing only on the details. The landing page prototypes differed in typography, color scheme, overall visual aspect, as well as on the quality of the selected images, and a modern approach in design such as neomorphism, in which 2D or 3D elements take on a background color giving the impression of being very uniform, even merged.
During the creation of the prototypes, followed both good and bad design practices to determine whether the average web user can perceive these differences and has a basic knowledge of web design, in this case, landing pages.
The prototype presented is “Veggie’s,” whose differences are immediately apparent - the A version has less opacity and has only one typographic font. The elements do not generally contrast as well as in the B version. Version B additionally uses two font types - for the informational text and a standard font for the logo and the button with the CTA. In addition, the A version logo washes out the background color is taken from the darkest point of the background photo, whereas in the B version, the white color contrasts with the photo. It enhances the logo, and it is more readable.
Therefore, version B is the correct version regarding user experience and design principles (Figure 2).
Figure 2.
First pair of prototypes.
The next pair of prototypes show the hotel accommodation search service “hotelandresortspa.eu”. The main difference in this pair is the color scheme of the two versions - the first is dominated by purple-blue, while the second is pink. In both versions, they are
Figure 3.
Second pair of prototypes.
However, many users subconsciously choose solutions that feature contrast, characteristic of design trends in the past. Thus, it can conclude that both are done correctly in this pair of prototypes, but one is more in line with today’s standards. However, it is likely that both, with a larger sample of users, would be considered correct - depending on the user’s age, i.e., the likely seniority of Internet use and their preference for site design (Figure 4).
Figure 4.
Third pair of prototypes.
The final prototype is a prototype in which current web design principles create versions A and version B. Version B uses neomorphic elements - elements that merge colorfully with the background elements modeled on 3D graphics (Figure 5).
Figure 5.
Fourth Third pair of prototypes.
On the other hand, Version A is a more conservative version, probably appealing to a larger audience in general. Version B is the version for younger users who may have been exposed to the trend of neomorphism in many applications - it is nothing new or revelatory for them. It is more natural. It is worth noting that in the pairs of prototypes produced, it is impossible to determine which version is prettier clearly - this is a very subjective evaluation of each user. However, one can be guided by current design trends and user experience principles in such a way that one can determine which version is better and more functional. Also, notably, it included no dark pattern in the manufactured prototypes. Research on the manufactured prototypes is presented in the following subsection of the paper.
4. A/B testing analysis of the created landing page prototypes and surveys
Performed A/B testing of the created prototypes and surveys for testing. The purpose of A/B testing was to test the knowledge of the basic principles of website creation websites - in this case, landing pages - of users of different age groups and their personal preferences. The survey involved 451 users, including both men and women.
4.1 A/B tests
The user was allowed to make a single choice in the choice tests between two versions of the prototypes - versions A and B (Figure 6).
Figure 6.
Query in the test.
The command “Choose the version of the site that you think is better” has been specially constructed - so that the user does not suggest only one factor but the whole and complete site. Not necessarily just the appearance but also the functionality or a more modern approach to design. It assigned the command to each of the five pairs of prototypes.
4.2 Survey construction
The survey for A/B testing consisted of seven questions. Each question in the survey was mandatory and had clear answer guidelines - only one answer was always possible. The survey did not contain open-ended questions. It avoided answers that were not detailed enough or answers that were not relevant to the topic of the work.
The first question was a gender question, in which one could choose the “Female” and “Male” answers.
In addition, users were divided into four age groups:
10-22 years old - users who have been in contact with the Internet and computers since they were young and are mainly only familiar with the latest web design trends;
23-30 years old - users whose contact with the Internet and computer most likely began in their teenage years, having an idea of existing design trends in the early 21st century;
31-45 years old - users whose contact with the Internet and computer probably began in adulthood during their teenage years, who are definitively familiar with the design of Internet and computer content and trends of the early 21st century;
46+ years - users whose contact with the Internet began in adulthood are less likely to browse the web and are unfamiliar with today’s trends and web design standards.
The next question asked about the frequency of Internet use. The question was asked in the form of a linear scale, from 1 to 5, where 1 - very rarely and 5 - very often. The amount of time spent, such as the answer “5 hours a day,” was unnecessary in this question. What mattered was the user’s subjective assessment, which made it clear whether they had daily contact with websites.
The next question was, “Do you often pay attention to the appearance of websites?” The answers were:
- “Yes, I pay attention to the appearance of websites; it is the most important.”
“I pay attention to the website’s appearance, however, more to its functionality.”
“I pay attention to the appearance of the website to a moderate degree.”
“No, I don’t pay complete attention to it.”
Responses to this question in a later survey made it possible to divide users into those who pay more attention to the details of the sites, the esthetics, and those who are not influenced by the site’s appearance—also tested familiarity with the concept of a “landing page” during the survey execution. The next question was about this term - not everyone may have been familiar with it (Figure 7).
Figure 7.
Survey query for A/B testing.
The next question in the survey was, “When performing A/B tests, did you pay attention to page details?” Possible answers to mark were:
“I looked carefully before choosing an A or B version, e.g., font size and type, color scheme, etc.”
“I looked at the pages more generally, holistically, seeing some differences on them.”
“I didn’t pay particular attention to the differences between versions A and B.”
Since users can be divided here into visual and more interested, this is a fundamental question for the survey. This is because some users may not have noticed any differences between the A and B versions despite the specially selected order of prototypes in the A/B tests. Others, on the other hand, may have looked all too closely for some hidden content on the site after the first pair of prototypes without focusing on the site.
The last question was about performing A/B tests in the past. This question was strictly informational and did not change the subjective feelings about a particular pair of user prototypes. One can only assume that a user who had once performed such tests would approach the task more generally because he knew what to expect when performing the test.
5. Analysis and interpretation of the results of A/B tests of surveys
Simplified in work where the analysis and interpretation of data, A/B testing, and a survey through a single form via Google. This allowed us to see correlations between users’ choices regarding their age, gender, or frequency of Internet use. The form was divided into the A/B tests and the survey. Completed the form by 451 people, including 180 men (39.9%) and 271 women (60,1%). 85 participants (18.8%) were aged 10–22, 148 participants (32.8%) were aged 23–30, 111 (24.6%) were aged 31–45, and 107 participants (23.7%) were over 46 years old. For the question “Do you often use the Internet?”, where 1 is very rarely and 5 is very often, the number of respondents was as follows: 1–3 respondents (0.7%), 2–7 respondents (1.6%), 3–29 respondents (6.4%), 4–61 respondents (13.5%), 5–351 respondents (77.8%) (Figure 8).
Figure 8.
Survey results relative to the frequency of Internet use.
About 67.6%, or 305 of those filling out the form, pay attention to the functionality of the site, not the look of it. In contrast, as many as 17.7%, or 80 respondents, believe that the website’s appearance is the most important thing. 11.3%, or 51 respondents, focus only partially on the website’s appearance. The rest, or 15 people (3.3%), do not focus on web design (Figure 9).
Figure 9.
Survey results relative to paying attention to website design.
Of all respondents, as many as 55.2%, which equals 249 recipients, knew what a landing page was. The rest, 44.8%, 202 recipients, did not know the term (Figure 10).
Figure 10.
Survey results on familiarity with the landing page concept.
Before choosing version A or version B, A/B testing of landing page prototypes was looked at by 274 people. They paid attention, for example, to the size of the fonts, their type, and the color scheme of the prototypes. 37.9% of the respondents, or 171 people, looked at the prototypes more holistically. However, they noted differences between the A and B versions. Only six individuals (1.3%) did not pay particular attention to the differences between the A and B versions.
Of those surveyed, as many as 241 had already performed A/B tests in the past (53.4%). The remaining 210 (46.6%) performed such tests for the first time (Figure 11).
Figure 11.
Survey results on prior performance of A/B tests.
For each pair of prototypes, the results were as follows:
“Veggie’s” - A version 11.5% (52 respondents), B version 88.5% (399 respondents) (Figure 12)
Figure 12.
A/B test results for a pair of prototypes “Veggie’s”.
The results by gender are as follows: For prototype one, 34 women chose version A (12.5% women), and as many as 237 women chose version B (87.5% women), whereas 18 men chose version A (10% men), while version B was chosen by 162 (90% men). This means that the results for the first pair of prototypes were very similar in percentage terms. There is no significant difference in gender with the first pair of prototypes.
“hotelandresortspa.eu” - Version A 64.5% (291 respondents), version B 35.5% (160 respondents) (Figure 13)
Figure 13.
A/B test results for a pair of prototypes “music.com”.
In this pair of prototypes, as many as 168 women chose version A (62% women) and 103 version B (38% women). Men chose very similarly in percentage terms - 123 chose version A (68.3% of men) and 57 version B (31.7% of men).
“homeDESIGN” - version A 86.5% (390 respondents), version B 13.5% (61 respondents) (Figure 14)
Figure 14.
A/B test results for a pair of prototypes “homeDESIGN”.
In this pair of prototypes, there are slight differences in the choice between versions A and B regarding gender. As many as 227 women (83.8% women) chose version A, whereas 44 women (16.2% women) chose version B. 163 men (90.6% of men) chose version A, while the rest (9.4% of men) - 17 men - chose version B.
Figure 15.
A/B test results for a pair of prototypes.
In the last pair of prototypes, there were also no significant differences in the choice between the sexes. Women chose as follows: Version A by 83 women (30.6% of women), Version B by 188 women (69.4% of women). Among men, the results were as follows: 57 men chose version A (31.7% of men), while version B was chosen by 123 men (68.3% of men).
Because of the respondent’s answers, the conclusion is that they prefer the appearance of prototypes that conform to generally accepted design principles 36 regardless of gender. The differences in the choices of the different versions were insignificant in the survey.
In the entire survey, a total of only 10 people very rarely or rarely (responses with values of 1 and 2) used the Internet. These included two men and eight women. All users, except for one woman in the 31–45 age category, were over 46 years old (Figure 16).
Figure 16.
Distribution of responses for very infrequent and infrequent use of the Internet in terms of paying attention to the appearance of websites.
In Figure 16, we can see that three people chose “I pay moderate attention to the site’s appearance,” Four chose “I pay attention to the site’s appearance, but more to its functionality,” and the rest chose “No, I don’t pay attention to it at all.” In the first two pairs of prototypes by a majority (9 out of 10 votes), these people chose version B - the correct version in terms of user experience. In the third and fourth pairs of prototypes between versions A and B, the scores were 5 for both versions. In the fifth pair of prototypes, there were 4 A, and 6 B responses - the correct version here was B.
For the question “Did you pay attention to the details of the pages when doing A/B testing?” Six respondents did not pay particular attention to the differences in the prototypes. All of these people, except one in the 10–22 age group, were older than 46. Only three of them knew what a landing page was, including the person in the youngest age group.
In the question “Do you often pay attention to the appearance of websites?” many as 15 respondents do not pay attention. Only one of these people knew what a landing page was. These people also answered the frequency of Internet use - each gave a different answer from 1 to 5, in the same question, seven users. Interestingly - as many as 7 of these people answered, “I looked carefully before choosing the version they looked at before choosing version A or B, e.g., the size of the fonts and their type, color scheme, etc.”. This indicates that they probably pay attention to the appearance of websites daily, however.
Additionally, in the question: Paying attention in the prototype to the details between versions A/B - 159 women (58.6% of all women) and 115 men (62.8% of all men) said they looked at the site closely before choosing the better version.
In contrast, in the general question: The appearance of websites - 49 women (18% of all women) and 31 men (17% of all men) believe that the look of a website is most important.
In addition, I calculated the mean and median for the Internet frequency rubric on a scale of 1 to 5. The mean was 4.66, while the median was 5. Thus, most users have constant contact with websites.
6. Conclusion
The paper presents an analysis and interpretation of the perception of website landing page prototypes and their templates created with Adobe software by users of different age groups based on user experience. The analysis presented shows that, depending on age, users have different preferences about the appearance of the websites in question. It is due to contact only with the latest design trends of younger people. Most likely, users have not all been exposed to other web design principles. From a young age, users are present with more
Due to the respondents
The appearance of websites has changed dramatically over the years. Over time, sites have evolved both functionally and
References
- 1.
Ash T, Page R, Ginty M. Landing Page Optimization. Indianapolis: John Wiley & Sons; 2012. p. s.4 - 2.
Detante. 2022. [Internet] Available from: https://delante.pl/definicje/landing-page/ . [Accessed: 17-05-2022] - 3.
Wix Blog. 2022. [Internet] Available from: https://pl.wix.com/blog/artykul/tworzenie-landing-pages?utm_source=google&utm_medium=cpc&utm_campaign= 14050035777^133862885908&experiment_id=^^536052956531^^_DSA&gclid=CjwKCAjwj42UBhAAEiwACIhADgEjBrBsVbIdEvomxjvN_UNcGdHA3gnsgTaAkcsVIIobTPZ0 PKcUhoCBOsQAvD_BwE#viewer-9blrs . [Accessed: 12.01.2022] - 4.
Prodesigner. 2022. [Internet]. Available from: https://prodesigner.pl/co-to-jest-landing-page/ . [Accessed: 17-12-2021] - 5.
Marczak. 2022. [Internet]. Available from: https://marczak.me/efektywny-landing-page/#mcetoc_1d5c0ebdr3 . [Accessed: 08-06-2022] - 6.
Landingi. 2018. [Internet] Available from: https://landingi.com/pl/blog/4-techniki-optymalizacji-landing-page-potencjalnie-szkodzace-konwersji/ . [Accessed: 17-05-2022] - 7.
Raidboxes. 2019. [Internet] Available from: https://raidboxes.io/pl/blog/webdesign-development/typographie-grundlagen-webfonts-tipps/ . [Accessed: 24-04-2019] - 8.
Damianrams. 2019. [Internet]. Available from: https://www.damianrams.pl/landing-page/#8_dobrych_praktyk_w_tworzeniu_landing_page . [Accessed: 12-02-2019] - 9.
Koduje. 2022. [Internet] Available from: https://www.koduje.pl/dostepne-materialy/dark-patterny-na-kodu-je . [Accessed: 23-05-2022] - 10.
RekinySukcesu. 2022. [Internet] Available from: https://www.rekinysukcesu.pl/blog/internet/dark-patterns-czyli-ryzykowna-praktyka-ux . [Accessed: 20-07-2022] - 11.
Netsolution. 2021. [Internet] Available from: https://www.netsolutions.com/insights/dark-patterns-in-ux-disadvantages/ . [Accessed: 09-07-2021] - 12.
Gray CM, Kou Y, Battles B, Hoggatt J, Toombs AL. The dark (patterns) side of UX design. In CHI 2018 - Extended Abstracts of the 2018 CHI Conference on Human factors in Computing Systems: Engage with CII (Conference on Human Factors in Computing Systems - Proceedings; Vol. 2018 - April). Association for Computing Machinery. DOI: 10.1145/3173574.3174108 - 13.
Gupta S, Kumaraguru P. Emerging Phishing Trends and Effectiveness of the Anti-Phishing Landing Page. Birmingham, IEEE; 2014. p. s. 39 - 14.
Marczak. 2021. [Internet] Available from: https://marczak.me/efektywny-landing-page/#mcetoc_1d5c0rjic7 . [Accessed: 08-06-2021] - 15.
Gofman A. Consumer driven multivariate landing page optimization: Overview, issues, and outlook. Transactions on Internet Research. 2007. p. 2. Available from: http://tir.ipsitransactions.org/2007/July/Paper%2003.pdf . [Accessed: 15-12-2022] - 16.
Unbounce. 2021 [Internet] Available from: https://unbounce.com/page-speed-report/ . [Accessed: 17-05-2022] - 17.
Ash T, Page R, Ginty M. Landing Page Optimization. Indianapolis: John Wiley & Sons; 2012. p. s.31 - 18.
Landingi. 2022. [Internet] Available from: https://landingi.com/pl/tworzenie/landing-page/ . [Accessed: 17-05-2022]