p-ISSN 2980-4868 | e-ISSN
2980-4841
https://ajesh.ph/index.php/gp
Adaptation of Parallax Scrolling Effect Technique in LegitCheck
Website Interface Development
Aditya Khawandi Putra1*, Nungki Selviandro2, Gia
Septiana Wulandari3
1,2,3 Universitas Telkom,
Indonesia
Email: Adityakhawandi@student.telkomuniversity.ac.id, nselviandro@telkomuniversity.ac.id, giaseptiana@telkomuniversity.ac.id
ABSTRACT
This research focuses on developing
LegitCheck's website interface by applying the Parallax Scrolling Effect
technique, which is considered as a potential solution to support the startup's
promotional strategy. LegitCheck, as a startup that needs an effective way to
introduce its services and business concept to consumers and brands, requires a
website that can serve as an attractive promotional medium as well as a
comprehensive information center. The purpose of this research is to examine
the effectiveness of the Parallax Scrolling Effect technique compared to a
website without the effect in increasing the effectiveness of the LegitCheck
website as a promotional tool. The research method used includes the design and
implementation of the Parallax Scrolling Effect technique on the LegitCheck
website, followed by evaluation using the A/B testing method. The results
showed that the implementation of the Parallax Scrolling Effect technique
provided significant benefits, including improved information accuracy, service
quality, user satisfaction, and company net profit. Although there are
constraints related to page loading speed, the majority of respondents prefer
websites with Parallax Scrolling Effect because it provides a more interactive
and engaging experience. The implication of this study is that the use of
Parallax Scrolling Effect can be an effective strategy for startups such as
LegitCheck to increase interaction with users, strengthen brand image, and
increase the effectiveness of the website as a promotional tool, although it is
necessary to pay attention to technical aspects such as page loading speed to
minimize potential disruptions to the user experience.
Keywords: Website, Parallax Scrolling Effect,
Effective, A/B Testing, Legitcheck.
INTRODUCTION
The circulation of counterfeit goods has become an increasingly
troubling issue in today's global society. This event not only has an impact on
the economic sector, but also has implications for social, health, and security
aspects for consumers, where cross-border trade is increasingly open and
technology continues to advance, the spread of counterfeit goods has
experienced a marked increase (Mardiatmi et al., 2022). One example
of a violation that often occurs is the increase in cases of counterfeit goods,
which has resulted in an increase in public demand for counterfeit goods (Guin et al., 2014). As a
result, this phenomenon has increased the distribution of counterfeit goods in
the community (Kasih, 2017). According
to (Intan, 2022) losses due
to the circulation of counterfeit goods reached Rp 291 trillion.
Various efforts have been made to prevent the circulation of counterfeit
goods. Law No. 8 of 1999 on Consumer Protection affirms "a prohibition for
business actors to produce or trade goods or services that are not in
accordance with the information provided in labels, etiquette, descriptions,
advertisements, or sales promotions" (Nomor, 8 C.E.). In
addition, there are various platforms or applications that can be used to check
the authenticity of an item, such as Depatu, Legit App, and Barcodelookup (Apriadi & Saputra, 2017). However,
each app has its advantages and disadvantages.
Based on the advantages and disadvantages of the application, LegitCheck
was created which is designed to overcome these challenges. LegitCheck is
designed to provide a comprehensive and reliable solution for checking product
authenticity, including more comprehensive features such as QR code generation
by brand owners, QR code management, automatic checking of item authenticity
through QR codes, and more intuitive user interface elements.
To introduce and promote LegitCheck, a website is needed that will serve
as an information center explaining the concepts, goals, and services offered
by LegitCheck to consumers and brands. This website will be an effective
channel to communicate the value and benefits provided by the LegitCheck
platform to the audience.
According to (Nizam & Jaafar, 2018) websites
have become a key element in efforts to promote products, services, and brands.
Websites are considered the main channel for customers when they are looking
for more in-depth information, and are considered more efficient than using
print media as a means of communication and promotion (Horng & Tsai, 2010). The use of
a website with the application of the Parallax Scrolling Effect technique aims
to increase the effectiveness of the website as a promotional tool (Rani et al., 2023).
In interface development, there are various techniques such as
"Single Page Application" (SPA) and "Component Based
Architecture". SPAs are suitable for websites that contain a single page
without page movement, such as Gmail and Facebook. Meanwhile, Component Based
Architecture is a front-end technique for creating reusable components, such as
YouTube. However, for the purpose of developing an interface aimed at promoting
and providing information about the concepts, objectives, and services offered
by LegitCheck to consumers and brands, the appropriate technique is parallax
scrolling. The parallax scrolling effect is often used by large companies such
as Apple, Ripple, Tag Heuer, and Porsche. Parallax Scrolling Effect can improve
the user experience when presenting a website (Wang & Sundar, 2018).
By applying parallax scrolling, elements that appear in the foreground
can move at a higher speed than elements in the background, creating the
illusion of an interesting three-dimensional effect (Kusumo & Hartono, 2019). This
technique provides a dynamic and creative aspect of web design and enriches the
user experience by providing impressive visual depth (Wang & Sundar, 2018).
The use of the Parallax Scrolling Effect would be considered to increase
immersion and effectiveness in the context of the web, compared to the web that
does not use the Parallax Scrolling Effect (Ilbratt, 2021). Parallax
Scrolling Effect improves the user experience, connecting a more satisfying
user experience with the fulfillment of variable usability, satisfaction,
enjoyment, fun, and visual appeal (Frederick et al., 2015).
Based on the
above background, the purpose of this research is to implement the Parallax
Scrolling Effect technique on the LegitCheck website, and evaluate and test its
effectiveness using the A/B testing method. By achieving these goals, it is
hoped that the LegitCheck website can provide a more attractive and satisfying
user experience, as well as become a more effective promotional media and be
recognized by the wider community through the use of the Parallax Scrolling
Effect technique. The benefit of this research is to contribute to the
development of interactive and functional web design strategies to increase the
attractiveness and effectiveness of a startup's promotion.
RESEARCH METHODS
This study uses the design and implementation method of the Parallax
Scrolling Effect technique on the LegitCheck website and evaluates its
effectiveness through the A/B testing method. The first step is to determine
the specific requirements for the LegitCheck web design project. At this stage,
functional and non-functional needs are identified which involves a team
brainstorming session to gather various perspectives and ideas. The result of
this stage is comprehensive documentation that includes functional requirements
such as detailed descriptions, destination information, services offered, FAQ
integration, product visualizations, interactive features, and links to social
media, as well as non-functional requirements such as easy-to-use, attractive
design, clear navigation, page loading speed, and credibility of the
information.
The design stage involves creating a website design from wireframe to
high-fidelity design. This design includes two versions of the website: one
with a parallax scrolling effect and another without a parallax scrolling
effect. The high-fidelity design is then translated into code that can be
executed by the browser, including HTML, CSS, and JavaScript, to realize both
versions of the website.
A/B testing is carried out by comparing two versions of the website,
namely the version with the parallax scrolling effect and the conventional
version. The author conducted a questionnaire survey with respondents selected
through purposive sampling. Respondents include people who often buy genuine
goods but are vulnerable to counterfeiting, care about genuine products, like
to shop for branded goods, and often access the internet, with the number of
respondents being more than 30 people. The survey process involves a live
demonstration of both versions of the website, where respondents are asked to
explore the existing features and provide their assessment through a
questionnaire that includes aspects of system quality, information quality,
service quality, usage, user satisfaction, and net benefits. The data collected
from this survey is then analyzed to provide recommendations regarding the
application of the parallax effect in website design.
RESULTS AND DISCUSSION
Test Results
This section presents the results of tests conducted to assess the
effectiveness of using the Parallax Scrolling Effect technique on LegitCheck
websites compared to websites that use non-parallax techniques. The author
conducted a questionnaire survey by comparing two different versions of
websites, namely websites that use the parallax technique and conventional
websites that do not use the parallax technique. During the questionnaire
survey, the author gave a demo of the two versions of the website to respondents
directly and alternately to get objective feedback. The sampling technique used
in this survey is purposive sampling.
Respondents are selected based on certain criteria that are relevant to
the purpose of the survey. The criteria for selecting respondents include
people who often buy genuine goods but are prone to counterfeiting, people who
care about genuine products, people who like to shop for branded goods, and
people who often access the internet. The number of respondents in this survey
is more than 30, considering that there is no limit to the number of
respondents set (Alwi, 2015).
This test was carried out through a survey
involving 76 respondents, where they were asked to give an assessment of
several predetermined variables. These variables include System Quality,
Information Quality, Service Quality, Usage, User Satisfaction, and Net
Benefits, Current Need Approach, Everyday Need Approach, Exhaustive Need
Aproach, Catching-up Need Approach, and Website Preferences. The following are
the results of the survey that has been conducted, accompanied by a pie chart
to visualize the data obtained.
Figure 1. Question
1
This pie chart shows the results of a survey of 76 respondents
regarding their experience with counterfeit goods or product authenticity
issues. From this survey, 100% of respondents, or all of those who answered,
said that they had experienced or heard of counterfeit goods and product
authenticity issues. This shows a high awareness among respondents about this
issue.
Figure 2. Question
2
This pie chart shows the results of a survey of 76 respondents on the
importance of ensuring the authenticity of the products they buy. From this
survey, 100% of respondents answered "Yes," indicating that all
respondents consider it important to verify the authenticity of a product
before purchasing. It emphasizes that product authenticity is an important
factor for consumers.
Figure 3. Question 3
This pie chart shows the results of a survey
of 76 respondents regarding their habits when searching for information about
new applications. As many as 90.8% of respondents answered "Yes,"
they searched for information on Google and visited the official website of the
application. Meanwhile, 9.2% of respondents answered "No," they did
not do so. This shows that the majority of respondents tend to use Google and
official websites to obtain information about new applications.
Figure 4. Question
4
This pie chart shows the results of a survey of 76
respondents regarding their habits of visiting official websites before trying
a new application. As many as 82.9% of respondents answered "Yes,"
they visited the official website before trying a new application. Meanwhile,
17.1% of respondents answered "No," they did not visit the official
website before trying a new application. This shows that most respondents tend
to check the official website first before using a new application.
Figure 5. Question 5
This pie chart shows the results of a survey
of 76 respondents regarding the influence of website design and interactivity
on their decision to try a new application. As many as 81.6% of respondents
answered "Yes," website design and interactivity influenced their
decision. While 18.4% of respondents answered "No," website design
and interactivity did not influence their decision. This shows that the
majority of respondents consider the design and interactivity of the website
when deciding to try a new application.
Figure 6. Part
1
Variable 1
System Quality
In this section, as many as 81.6% of
respondents chose a parallax website when they found the information they
needed on the website, while as many as 18.4% chose a non-parallax website.
Figure 7. Part
1
In the section on page load speed between websites that
use the parallax effect and those that do not use the parallax effect. As many
as 97.4% of respondents answered that non-parallax websites are faster in
loading pages. Only 2.6% of respondents answered that websites use parallax
faster.
Figure 8. Part 2
Variable 2
Information Quality
The quality of information presented by a website with a parallax effect
is compared to a website without a parallax effect. As many as 81.6% of
respondents think that websites that use the parallax effect are more accurate
in presenting information. Meanwhile, 18.4% of respondents think that
non-parallax websites are more accurate.
Figure 9. Part 2
The completeness of the information provided
by a website with a parallax effect is compared to a website without a parallax
effect. A total of 59.2% of respondents think that non-parallax websites are
more complete in providing information. Meanwhile, 40.8% of respondents think
that websites that use the parallax effect are more complete.
Figure 10. Part
3
Variable 3
Quality of Service
Responsiveness of support services provided by websites with a parallax
effect compared to websites without a parallax effect. As many as 55.3% of
respondents think that websites that use the parallax effect are more
responsive in providing assistance services. Meanwhile, 44.7% of respondents
think that non-parallax websites are more responsive.
Figure 11. Part 3
The friendliness and assistance provided by a website with a parallax
effect is compared to a website without a parallax effect. As many as 57.9% of
respondents think that websites that use the parallax effect are more friendly
and helpful in providing assistance services. Meanwhile, 42.1% of respondents
think that non-parallax websites are more friendly and helpful.
Figure 12. Part
4
Variable 4
Usage
This pie chart shows the results of a survey of 76 respondents regarding
the websites they use more often, between websites with a parallax effect and
websites without a parallax effect. As many as 96.1% of respondents answered
that they use non-parallax websites more often. Only 3.9% of respondents
answered that they use websites with a parallax effect more often. This shows
that the majority of respondents prefer to use websites without the parallax
effect.
Figure 13. Part
5
Variable 5
User Satisfaction
User satisfaction in using a website with a
paralax effect compared to a website without a parallax effect. As many as
96.1% of respondents felt that websites that use the parallax effect provide a
more satisfying user experience. Only 3.9% of respondents found non-parallax
websites more satisfactory. This shows that the majority of respondents are
more satisfied with the experience of using websites that use the parallax
effect.
Figure 14. Part
6
Variable 6
Net Benefits
The net benefit provided by a website with a
parallax effect compared to a website without a parallax effect. As many as
77.6% of respondents think that websites that use the parallax effect provide
greater benefits. Meanwhile, 22.4% of respondents think that non-parallax
websites provide greater benefits. This shows that the majority of respondents
feel that websites with a paralactic effect are more profitable.
Figure 15. Part
7
Variable 7
Current Need Approach
Websites that more often meet their current
needs. As many as 64.5% of respondents think that websites that use the
parallax effect more often meet their needs. Meanwhile, 35.5% of respondents
think that non-parallax websites more often meet their needs. This shows that
the majority of respondents feel that websites with a parallax effect more
often meet their current needs.
Figure 16. Part 8
Variable 8
Everyday Need Approach
A website that is more helpful in meeting
their daily needs. As many as 60.5% of respondents think that non-parallax
websites are more helpful in meeting daily needs. Meanwhile, 39.5% of
respondents thought that websites that use the parallax effect were more
helpful. This shows that the majority of respondents feel that websites without
the parallax effect are more helpful in meeting their daily needs.
Figure 17. Part
9
Variable 9
Exhaustive Need Aproach
Of the
75 respondents, 64% (red) chose a non-parallax website as the more complete one
to meet all their needs, while 36% (blue) chose a parallax website. This shows
that the majority of respondents feel that non-parallax websites are more
comprehensive in providing the information they need.
Figure 18. Part 10
Variable 10
Catching-up Need Approach
A website that is more
helpful in catching up with information or delayed needs. A total of 53.9% of
respondents thought that websites that use the parallax effect are more helpful
in this regard. Meanwhile, 46.1% of respondents think that non-parallax websites
are more helpful. This shows that the majority of respondents feel that
websites with a paralux effect are more useful in catching up with delayed
information or needs, although the difference is not too large.
Figure 19. Part
11
Website
Preferences
Regarding
their preferences between websites with a parallax effect and websites without
a parallax effect in conveying LegitCheck information and features. As many as
71.1% of respondents think that websites with a parallax effect are more
effective in conveying information and LegitCheck features. Meanwhile, 28.9% of
respondents felt that websites without a parallax effect were more effective.
This shows that the majority of respondents prefer websites with a parallax
effect to convey LegitCheck's information and features.
Table 1.
Analysis of Test Results
|
Variable |
Website
Parallax Scrolling Effect |
Website
Non-Parallax Scrolling Effect |
|
System Quality (Easier to
provide Information) |
81.6% |
18.4% |
|
System Quality (Faster) |
2.6% |
97.4% |
|
Quality of Information (Accurate
Information) |
81.6% |
18.4% |
|
Quality of Information
(Completeness of Information) |
40.8% |
59.2% |
|
Quality of Service (Responsive to
provide assistance services) |
55.3% |
44.7% |
|
Quality of Service (More Friendly
to provide assistance services) |
57.9% |
42.1% |
|
Usage |
3.9% |
96.1% |
|
User Satisfaction |
96.1% |
3.9% |
|
Net Benefit |
77.6% |
22.4% |
|
64.5% |
35.5% |
|
|
Everyday
Need Approach |
60.5% |
39.5% |
|
Exhaustive Need Aproach |
36% |
64% |
|
Catching-up Need Approach |
53.9% |
46.1% |
|
Website Preferences |
71.1% |
28.9% |
In this section, the author will analyze the test results
of the survey that has been conducted to assess the effectiveness of the LegitCheck
website with and without the use of the Parallax Scrolling Effect technique.
The analysis was carried out based on the variables that had been determined in
the study, namely System Quality, Information Quality, Service Quality, Usage,
User Satisfaction, and Net Benefits, Current Need Approach, Everyday Need
Approach, Exhaustive Need Aproach, Catching-up Need Approach, and Website
Preferences. In addition, the author will also look at user preferences related
to the techniques used in the LegitCheck website.
Based on the analysis of the test results, it can be concluded that the
application of the Parallax Scrolling Effect technique on the LegitCheck
website provides a number of significant advantages in terms of information
accuracy, service quality, user satisfaction, and net benefits, current need
approach, everyday need approach. While there are drawbacks in terms of page
loading speed, the majority of respondents prefer websites with this technique
because they offer a better and interactive user experience. However, the
website using the parallax scrolling effect needs a lot of improvements such as
increasing the loading speed of pages on the website (Pandey, 2021), increasing
the completeness of the information presented to meet the needs of a wider
range of users, optimizing the Parallax Scrolling Effect technique to maintain
a balance between aesthetics and functionality (Frederick et al., 2015). Thus, the
LegitCheck website can be more effective as a promotional tool and information
medium for users.
CONCLUSION
Based on the
results of the research and analysis conducted regarding the application of the
Parallax Scrolling Effect technique to the development of the LegitCheck
website interface, several conclusions can be drawn. First, the application of
Parallax Scrolling Effect is proven to be effective in improving the quality of
information and service delivery, where websites with parallax effects are
better able to present accurate information and provide more responsive and
user-friendly services. This is supported by the survey results, which show
that the majority of respondents feel that websites with parallax effects excel
in these aspects. Secondly, the level of user satisfaction increases
significantly, with 96.1% of respondents stating that they are more satisfied
using websites that implement Parallax Scrolling Effect. This shows that this
technique has a great positive impact on user satisfaction compared to
non-parallax websites. Third, websites with Parallax Scrolling Effect provide
greater benefits, with 77.6% of respondents stating that these sites offer
significant added value. This indicates that the use of this technique not only
enriches the user experience, but also provides clear advantages for brand
owners.
However, some of
the weaknesses identified in this study, particularly regarding page load
speed, need to be addressed. Although non-parallax websites are generally
faster in terms of load speed, user preferences still lean more towards
websites with Parallax Scrolling Effect as they offer a more interactive and
satisfying experience. Some suggestions include optimizing the page load speed
to address one of the major drawbacks, as well as improving the
comprehensiveness of the information presented to better suit user needs.
Continuous development and testing of the Parallax Scrolling Effect technique
is also necessary to maintain a balance between the aesthetics and
functionality of the website. By implementing these suggestions, it is hoped
that the LegitCheck website can be optimized to provide a pleasant and
effective user experience, and further strengthen its function as a reliable
and quality promotional tool..
REFERENCES
Alwi, I. (2015). Kriteria empirik dalam menentukan ukuran
sampel pada pengujian hipotesis statistika dan analisis butir. Formatif:
Jurnal Ilmiah Pendidikan MIPA, 2(2).
Apriadi, D., & Saputra, A. Y. (2017). E-Commerce berbasis marketplace dalam upaya mempersingkat distribusi
penjualan hasil pertanian. Jurnal
RESTI (Rekayasa Sistem Dan Teknologi Informasi), 1(2), 131–136.
Frederick, D., Mohler, J., Vorvoreanu, M., &
Glotzbach, R. (2015). The Effects of Parallax
Scrolling on User Experience in Web Design. Journal of Usability Studies,
10(2).
Guin, U., Huang, K., DiMase, D., Carulli, J. M., Tehranipoor, M., &
Makris, Y. (2014). Counterfeit integrated circuits: A rising threat in the
global semiconductor supply chain. Proceedings of the IEEE, 102(8),
1207–1228.
Horng, J.-S., & Tsai, C.-T. S. (2010). Government websites for
promoting East Asian culinary tourism: A cross-national analysis. Tourism
Management, 31(1), 74–85.
Ilbratt, C.-S. (2021). Parallax Scrolling in a hedonic context: Does it
influence the reader’s experience?
Intan, N. (2022). Kerugian Negara Akibat Peredaran Barang Palsu Capai
Rp 291 Triliun. Ekonomi.Republika.Co.Id.
https://ekonomi.republika.co.id/berita/riaxa8349/kerugian-negara-akibat-peredaran-barang-palsu-capai-rp-291-triliun
Kasih, P. (2017). Perlindungan Hukum bagi Masyarakat Terhadap Peredaran
Barang Palsu. UAJY.
Kusumo, A. H., & Hartono, M. (2019). The evaluation of academic website using eye tracker and UEQ: a case study
in a website of xyz. IOP Conference Series: Materials Science and
Engineering, 703(1), 12049.
Mardiatmi, A. B. D., Dirkareshza, R., & Argo, J. G. (2022). Literasi
Dan Sosialisasi Sebagai Upaya Menghindari Efek Hukum Dan Ekonomi Bagi Penjual
Dan Pembeli Barang Tiruan Atau Barang Palsu Pada UMKM Di Kecamatan Cinere
Depok, Jawa Barat. Selaparang: Jurnal Pengabdian Masyarakat Berkemajuan,
6(4), 2162–2168.
Nizam, N. Z., & Jaafar, J. A. (2018). Interactive online advertising:
The effectiveness of marketing strategy towards customers purchase decision. International
Journal of Human and Technology Interaction (IJHaTI), 2(2), 9–16.
Nomor, U.-U. (8 C.E.). tahun 1999 tentang Perlindungan Konsumen.
Pandey, S. (2021). An usability and universal design investigation of
parallax scrolling. OsloMet-storbyuniversitetet.
Rani, A. S., Santika, A., & Nugraha, T. (2023). Perancangan Website
Papua Tourism Sebagai Media Promosi Wisata dengan Teknik Parallax Scrolling. JSI:
Jurnal Sistem Informasi (E-Journal), 15(1), 2942–2958.
Wang, R., & Sundar, S. S. (2018). How does parallax scrolling
influence user experience? A test of TIME (Theory of Interactive Media
Effects). International Journal of Human–Computer Interaction, 34(6),
533–543.
|
Aditya Khawandi Putra, Nungki
Selviandro, Dia Septiana Wulandari (2024) |
|
First publication right: Asian Journal of Engineering, Social and Health (AJESH) |
|
This article is licensed under: |