Understanding User Experience in Web Design

This document provides a comparison of three websites - Reddit, Paypal, and YouTube, focusing on their styles, layout design, versatility, and preferred platform. It analyzes the fonts, colors, and layout of each website, as well as their responsiveness and user experience on different platforms. The document also includes screenshots and references for further reading.

Running head: UNDERSTANDING USER EXPERIENCE IN WEB DESIGN
Understanding User Experience in Web Design
Name of the Student
Name of the University
Author note

1UNDERSTANDING USER EXPERIENCE IN WEB DESIGN
Table of Contents
1. Comparison of Three Websites................................................................................................................2
1.1 Reddit (www.reddit.com)..................................................................................................................2
1.2 Paypal (www.paypal.com).................................................................................................................4
1.3 YouTube (www.youtube.com)..........................................................................................................7
References.................................................................................................................................................11

2UNDERSTANDING USER EXPERIENCE IN WEB DESIGN
1. Comparison of Three Websites
1.1 Reddit (www.reddit.com)
1.1.1 Styles used
The styles used within the website of Reddit can be discussed under the following headings:
The body of the website has been designed in such a manner that the min-height of the elements
within the page have been presented with a calculation based on 100vh – 48 px. The height within each of
the lines have been set as 1 point (Singer et al. 2014). The font-family, which has been used during the
design of the website is Arial font, IBMPlexSans and sans-serif. The –webkit-font-smoothing have been
set at antialiased.
1.1.2 Layout design
The layout of the website have been set at a certain format that would easily be accessible by
many users. According to the analysis over the website, it can be analysed that the website is not fully
responsive. At a face value, the website would become un-usable for users as the size of the fonts have
been set at 650px. The layout of the website cannot be found better when used in a mobile phone.
(Figure 1: The Home Page of Reddit)
(Source: Reddit.com 2019)
The website when viewed within a mobile phone would seem to be unwieldy and it might look
unresponsive as different news articles have been brought together in a single corner. Moreover, the
website application always prompts the user to download the mobile application. Pop ups and banners are
always popped up, which further lessens the user experience. However, on the other hand, different
aspects in relation to the layout for the website are:
1. Posts – The website provides a submit button in which all kinds of posts could be submitted.
2. Search Box – An advanced and basic search box is provided within the website that helps
users to locate any kind of article.
3. Sub-reddit Extras – Some amount of added functionality such as guidelines and description
have been provided within the sub-reddit sections.
1.1.3 Versatility
Versatility can be defined as one of the most important criteria that could be impactful for
determining the use of a website. Based on the factor of versatility for this website, it can be discussed
that the website would be highly convenient for use and users would have an enriched experience (Yi et
al. 2015). Based on analysis over the website, it can be discussed that the website of Reddit might differ

3UNDERSTANDING USER EXPERIENCE IN WEB DESIGN
from the other compared websites such as PayPal and YouTube. This is primarily due to the reason that
every information is visible on the front page. Based on comparison over other similar websites in which
users can post comments such as YouTube, it can be discussed that users would be able to see every kind
of content on the top. However, the headings of each comments can be seen on the top of the page and in
order to gain a detailed view, users need to visit every sub-forum offered within the site (Spaendonck, de
Vries and Gieseke 2016). Multiple boards should be visited by the user within the website.
1.1.4 Preferred Platform
Based on the analysis over the three websites, it can be discussed that most of the websites can be
viewed in a suitable format in mobile view, tablet view or desktop view. However, in this section over the
focus over Reddit website, it can be discussed that users might feel a sense of trouble when they would
move to the mobile website after having a view on the desktop version of the website. One of the most
preferred solution is that users would need to scroll to the bottom of the Reddit page within the desktop
website. In this section, users would need to select the heading of ‘apps and tools’ (Mills 2018). They
would thus need to click on the link of ‘mobile website’ within that heading. However, cookies would
also be need to be cleared in order to gain access to this particular website.
1.2 Paypal (www.paypal.com)
1.2.1 Styles used
The PayPal website offers a wide range of style options that helps in enhancing the overall feel
and look of the website (West and Prettyman 2018). A smart payment button is also supported at every
section of the website that further enhances the entire visibility of the website.
(Figure 2: The Style options within the page of PayPal)
(Source: Paypal.com 2019)
The logo of the website has a maximum size of 190 * 60 (pixels). The header image located at the
top section of the website has a size of 750 * 90 (pixels). Users might be able to specify a certain number
of hex values for different colours in order to match with the viewer suitability of the website.
1.2.2 Layout design
The layout of PayPal forms a major aspect in making the look and feel of the website to be
appropriate in the context of making online payments.
(Figure 3: The Home Page of PayPal)

4UNDERSTANDING USER EXPERIENCE IN WEB DESIGN
(Source: Hsieh et al. 2015)
The Home page of PayPal is highly designed with the best kind of CSS tools and web interactive
tools. The development team at PayPal make a varied use of grey and blue colours at the background in
order to give the website a premium look. Custom photography is also been used within the website,
which further offers a consistent form of brand identity (Tanjung and Dhewanto 2014). In the Home
Page, there are two options present for user login process, which includes ‘Personal’ section and
‘Business’ section.
The layout of the website for PayPal could be further be changed and customised. Hence, the
background colour, header section, sub header section and the colour of the pay button can be changed.
The payment pages incorporated within the PayPal website have been optimized for access within the
mobile and desktop browsers.
1.2.3 Versatility
The website of PayPal is versatile in nature. It is thus discussed that the different styles and layout
design that are integrated within the website have been highly responsive in nature.
(Figure 4: The Mobile View Home Page of PayPal)
(Source: Mills 2018)
There are different kind of display features within the website and hence the website when
viewed from a mobile platform can be easily viewed. Different changes to display within the website
could lead to responsive nature of the website (Hong 2018). Users would need to scroll down in order to
view each sections of the website application. The font style is presented in such a manner that it could be
easily be viewed and understood by users.
(Figure 5: The Sign up Page of PayPal)
(Source: Wang and Chu 2015)

5UNDERSTANDING USER EXPERIENCE IN WEB DESIGN
The above images depicts the fact that in order to prepare for sign up process, users need to scroll
down till the bottom of the page in order to enter necessary information. However, this is an easy and
viable option. Users would also be able to change the language settings of the webpage application
according to their preferred choices. Hence, from the comparison over the feature of versatility, it can be
concluded that PayPal provides a versatile nature of usage for users.
1.2.4 Preferred platform
The choice of the preferred platform is considered as the most important aspect of a website.
Hence, from the perspective of comparison of the website use in desktop, mobile or tablet version, it can
be discussed that the website is highly optimized in nature. The change in platform does not affect the
view and use status of PayPal and its in-built features. Although the view capability might changes and
vary across devices, it can be discussed that different elements can be viewed perfectly.
1.3 YouTube (www.youtube.com)
1.3.1 Styles used
Based on comparing of the other websites such as Reddit and PayPal, it can be discussed that
YouTube, which is one of the product offerings of Google Inc., offers an interactive font style, which
helps users to understand every content easily (Welbourne and Grant 2016). The font-size of the website
is set at 10 px and the font-family is a combination of Arial, Roboto and Sans-serif.
(Figure 6: Code snippet of YouTube Home Page)
(Source: Stephen 2016)
1.3.2 Layout design
The layout of the website is dynamic in nature. The target audience aimed by YouTube is located
globally and hence they would have to think of innovative ways in which they could produce content that
could be viewed by every kind of user. From previous researches, it can be discussed that the company is
planning to implement video thumbnails in a large form within their homepage. However, the mobile
application of the website offers big kind of thumbnails in order to allow the images to be visible.
(Figure 7: Different Elements and Categories of YouTube)

6UNDERSTANDING USER EXPERIENCE IN WEB DESIGN
(Source: Al-Hajri et al. 2014)
The primary elements within the YouTube page is present within the left side in a column format.
These elements are presented in the form of categories, which are further sub-divided in different genres.
Users would be provided with an option of ‘Sign In’ in case a guest user would visit the website. The
settings option within the page is present in the bottom, which allows users to change the settings of the
page and customise it according to their needs.
1.3.3 Versatility
Versatility within the website of YouTube is considered as an important factor. In the case of the
YouTube homepage, it can be discussed that this is one of the most versatile webpage in comparison to
Reddit and PayPal. YouTube offers different embedded videos, which might slow down the load time of
the page. The page load time can be described as one of the most critical factor in dealing with the
versatility factor. The improvement of accessibility of the website could enhance the experience for users.
YouTube also offers thumbnails with a play button as a default option. There is no kind of additional
HTTP request and heavy loading of web pages. With the implementation of this feature, it can be
discussed that there is no factor of heavy loading within the webpage and slow loading of website
content. In a new update within the website, it can be discussed that YouTube has updated the thumbnail
feature within their application, which provides the user with an experience to view a short version of the
entire video. The entire YouTube video would only be played when a user would click on the play button
and thus access the video.
1.3.4 Preferred platform
(Figure 8: The Mobile Application View of YouTube)
(Source: Mills 2018)
Platforms are highly important to be determined when a user would need to gain access to any
form of content. In the case of YouTube, it can be discussed that YouTube offers a seamless experience
for users in order to view wide range of content. The website could be viewed both in website application
and mobile application. In both of these cases, users would need to scroll down for getting more content
as per their preferred choices. Hence, from the conclusion of the website review, it can be concluded that
users would be able to easily view each of the content within the application irrespective of any kind of
platform.

7UNDERSTANDING USER EXPERIENCE IN WEB DESIGN
References
Al-Hajri, A., Miller, G., Fong, M. and Fels, S.S., 2014, April. Visualization of personal history for video
navigation. In Proceedings of the SIGCHI Conference on Human Factors in Computing Systems (pp.
1187-1196). ACM.
Hong, P., 2018. Practical Web Design: Learn the fundamentals of web design with HTML5, CSS3,
Bootstrap, jQuery, and Vue. js. Packt Publishing Ltd.
Hsieh, T.L., Lo, H.H., Hu, H.H. and Chang, C.C., 2015. The effect of information design on cognitive
processing of website navigation. Human Factors and Ergonomics in Manufacturing & Service
Industries, 25(5), pp.548-558.
Mills, R.A., 2018. Pop-up political advocacy communities on Reddit. com: SandersForPresident and The
Donald. AI & SOCIETY, 33(1), pp.39-54.
Paypal.com. (2019). Send Money, Pay Online or Set Up a Merchant Account - PayPal. [online] Available
at: https://www.paypal.com/us/home [Accessed 15 Sep. 2019].
Reddit.com. (2019). reddit: the front page of the internet. [online] Available at: https://www.reddit.com/
[Accessed 15 Sep. 2019].
Singer, P., Flöck, F., Meinhart, C., Zeitfogel, E. and Strohmaier, M., 2014, April. Evolution of reddit:
from the front page of the internet to a self-referential community?. In Proceedings of the 23rd
international conference on world wide web (pp. 517-522). ACM.
Spaendonck, P.V., de Vries, A.P. and Gieseke, F., 2016. Comparing Web Page Layouts using Tree Edit
Distance.
Stephen, A.T., 2016. The role of digital and social media marketing in consumer behavior. Current
Opinion in Psychology, 10, pp.17-21.
Tanjung, F.A. and Dhewanto, W., 2014. Formulation of E-Commerce Website Development Plan Using
Multidimensional Approach for Web Evaluation. Procedia-Social and Behavioral Sciences, 115, pp.361-
372.
Wang, A. and Chu, R., 2015, June. Study on the Design of Electronic Commerce Website.
In International Conference on Education, Management and Computing Technology (ICEMCT-15).
Atlantis Press.
Welbourne, D.J. and Grant, W.J., 2016. Science communication on YouTube: Factors that affect channel
and video popularity. Public Understanding of Science, 25(6), pp.706-718.
West, A.W. and Prettyman, S., 2018. Expand and Enrich Your Website. In Practical PHP 7, MySQL 8,
and MariaDB Website Databases (pp. 151-190). Apress, Berkeley, CA.
Yi, H., Bao, X.Y., Tiberio, R. and Wong, H.S.P., 2015. A general design strategy for block copolymer
directed self-assembly patterning of integrated circuits contact holes using an alphabet approach. Nano
letters, 15(2), pp.805-812.