## 1 Abildayeva T.,

## Master student, ORCID ID: 0009-0005-2983-3377

e-mail: t\_abildayeva@kbtu.kz

## 1 *Shamoi P.,

PhD in Engineering, Professor, ORCID ID: 0000-0001-9682-0203,

*e-mail: p.shamoi@kbtu.kz

1 Kazakh-British Technical University, 050000, Almaty, Kazakhstan

## FUZZY LOGIC APPROACH FOR VISUAL ANALYSIS OF WEBSITES WITH K-MEANS CLUSTERING-BASED COLOR EXTRACTION

## Abstract

Websites form the foundation of the Internet, serving as platforms for disseminating information and accessing digital resources. They allow users to engage with a wide range of content and services, enhancing the Internet's utility for all.  The aesthetics of a website  play  a crucial role in its overall effectiveness and can significantly impact user experience, engagement, and satisfaction. This paper examines the  importance  of  website  design  aesthetics  in  enhancing  user  experience,  given  the increasing number of internet users worldwide. It emphasizes the significant impact of first impressions,  often  formed  within  50  milliseconds,  on  users'  perceptions  of  a website's  appeal  and  usability.  We  introduce  a  novel  method  for  measuring  website aesthetics  based  on  color  harmony  and  font  popularity,  using  fuzzy  logic  to  predict aesthetic  preferences.  We  collected  our  own  dataset,  consisting  of  nearly  200  popular and frequently used website designs, to ensure relevance and adaptability to the dynamic nature of web design trends. Dominant colors from website screenshots were extracted using k-means clustering. The findings aim to improve understanding of the relationship between aesthetics and usability in website design.

Keywords : Web Aesthetics, Web Design, Fuzzy Logic, User experience, k-means clustering, color harmony.

## 1. Introduction

In the present-day world, the number of Internet users is increasing rapidly. More than 5.35 billion people, representing over two-thirds of the global population, use the internet [1]. Websites  are  core  to  the  Internet,  providing  a  platform  for  sharing information and accessing online resources. They enable users to access various content and services, making the Internet more useful for everyone. However, the probability of retaining a user decreases as the number of websites increases. To differentiate yourself from  the  competition,  it  is  important  to  focus  on  both  the  quality  of  content  and  the overall user experience.

First  impressions  are  crucial  in  determining  personality  attribution  in  various contexts  [2].  This  is  especially  true  for  websites,  as  they  strongly  influence  users' perceptions  of  appeal  and  usability  [3],  [4].  The  visual  design  of  a  website  can  elicit positive  emotions,  enhance  user  satisfaction,  and  capture  visitors'  attention  [5].  It  is possible to make a reliable decision on whether users like the visual appeal in just 50 milliseconds  [6].  Lindgaard  et  al.'s  research    illustrates  how  visual  appeal  may  be closely  linked  to  other  design  elements,  such  as  layout  and  color,  influencing  overall impression.

Garrett [7] considers aesthetics a subjective judgment, as it varies from person to person and  is highly dependent  on  that person's culture and personality. Some researchers have created models for measuring aesthetic values when considering it as a measurable  object.  If  we  view  aesthetics  as  something  that  can  be  measured,  then models for assessing aesthetic values can be developed, similar to the work of  Zane et al. [8] and Filonik and Baur [9]. However, these works do not consider all aspects of the site, and only a few people participated in assessing aesthetics.

The paper is structured as follows. Section I is this introduction. Sections II and III present  the  main  provisions  and  literature  review.  Next,  Section  IV  describes methods,  including  data  collection  and  annotation  and  a  fuzzy  approach.  Section  V presents  experimental  results  along  with  the  performance  evaluation  and  discussion. Finally, concluding remarks are given in Section VI.

## 2. Main Provisions

The  current  paper  presents  a  model  that  utilizes  the  fuzzy  logic  approach  to determine websites' aesthetic preferences using color harmony and font aesthetics. Over 200 sites were collected. The overall methodology is presented in Fig. 1.

Figure 1. Methodology figure illustrating the proposed approach

![image](https://ac.marcodsn.me/arxiv-markdown-images/2408.00774v1-figure-87c7d736-7e1a-4c85-a266-4d829b4e3bd4.jpg)

The contributions of this study are:

- · Application of Fuzzy Logic to create a model in website design aesthetics. We propose  a  new  way  to  quantify  subjective  elements,  such  as  color  harmony  and  font aesthetics, and determine the site's aesthetics.
- ·  We  collected  our  dataset  of  the  most  popular  and  frequently  used  website designs  from  the  Internet. This  is  important  due  to  the  dynamic  nature  of  web  design trends.  Our  analysis  focuses  on  projects  that  gained  prominence  and  were  frequently used in 2024.

## 3. Literature Review

In this section, we provide an overview of measuring aesthetics.

Aesthetics can be defined as the philosophy of beauty and the perception of what is  visually  pleasing  [10].  Lee  and  Koubek  [11]  suggest  that  the  usability  of  content  is processed  later  than  perception.  Several  authors  have  pointed  out  [12],  [13],  and  [14] that  the  first  impression  of  a  website  is  greatly  influenced  by  its  aesthetics.  It  is  now known  that  our  immediate  emotional  reaction  to  products,  based  on  how  they  look, strongly affects how we later judge their usability  [15]. Beautiful websites are seen as more  usable  [6],  [16].  Several  works  applied  a  fuzzy  approach  to  modeling  aesthetic preferences [17], [18], [19].

Developers strive to create web pages that can create a specific experience and fit well  into  the  overall  website  strategy  [20].  In  doing  so,  they  carefully  select  various components such as text, photographs, and other media elements, complementing them using  a  variety  of  styles,  color  palettes,  fonts,  and  animations.  These  elements  work together to create a unique aesthetic and provide a cohesive visual impact to site visitors.

According to study [21], the use of color is crucial in the design of a website. It's important to consider the diverse range of users who will access the site, including those who may be color blind and unable to differentiate certain colors. Therefore, choosing colors should be carefully considered when  developing  a website.  Additionally, "balance"  is  also  significant.  As  mentioned  in  study  [22],  a  balanced  website  makes users feel psychologically balanced.

Choosing the right distance between website elements such as photographs, color schemes, fonts, and others is also important. There is a close relationship between the number  of  design  elements  and  the  space  they  occupy,  so  it's  crucial  to  maintain  a balance [23], [24]. Designing a website with appropriate white space can enhance both its usability and aesthetics [24].

When  evaluating  the  visual  appeal  of  websites,  it  is  important  to  consider  the elements mentioned earlier and the design style, which is divided into 21 types by study [25].

The aesthetics of a website significantly impact its perception and usability. These include  emotional  reactions,  color  and  balance  in  design,  and  spatial  relationships between elements.

## 4. Materials and Methods

## 4.1. Data

## 4.1.1. Data Collection

For  the  experiments,  a  dataset  containing  approximately  200  websites  was collected 1. The process of collection and preparation involved several key stages. The first phase focused on gathering all site links and their associated names. The selection of sites was based on frequent use and other significant criteria, ensuring their relevance and popularity among  users. When selecting websites, particular attention was paid  to including  diverse  fields  to  cover  various  topics  and  interests.  The  effort  was  made  to incorporate  sites  in  different  languages  to  reflect  the  diversity  of  cultural  contexts, thereby making the dataset more universal and beneficial for analysis. Subsequently, the process moved on to capturing complete screenshots of each site's homepage. This was achieved  by  utilizing  a  specific  web  browser  extension  in  Google  Chrome  called "GoFullPage - Full Page Screen Capture."

Finally, the developer tools panel in the browser was utilized to ascertain the fonts used on each site. Particular attention was paid to the most frequently used font family, as this often represents the primary typographic choice of the website designers.

The result of the collected dataset can be seen in Table 1.

Table 1 - Sample records from dataset

|   Webs ite ID | Website Name      | Website Link                  | Website Category   | First color   | Secon d color   | Third color   | Font- Family    |
|---------------|-------------------|-------------------------------|--------------------|---------------|-----------------|---------------|-----------------|
|             1 | YouTub e          | https://www.youtube. com/     | Social Media       | #1010 10      | #5050 51        | #a0a0 a0      | Roboto          |
|             2 | Informb uro       | https://informburo.kz /       | News               | #ffffff       | #1818 18        | #e721 16      | Roboto          |
|             3 | Telegra m         | https://telegram.org/         | Messaging          | #ffffff       | #fdd6 26        | #1a1f 27      | Lucida Grande   |
|             4 | Naver Dictiona ry | https://dict.naver.com /      | Education          | #1f1f1 f      | #6b6c 6c        | #aeae ae      | Helveti ca Neue |
|             5 | Naver             | https://www.naver.co m/       | Web Portal         | #fefef e      | #bcbd bc        | #03c7 5b      | Malgu n Gothic  |
|             6 | IEEE              | https://ieeexplore.iee e.org/ | Academic           | #ffffff       | #1845 5a        | #0294 e1      | Helveti ca      |
|             7 | Kaspi.kz          | https://kaspi.kz/             | Finance            | #f5f5f        | #0303           | #f044         | Roboto          |

| Webs ite ID   | Website Name   | Website Link                 | Website Category   | First color   | Secon d color   | Third color   | Font- Family    |
|---------------|----------------|------------------------------|--------------------|---------------|-----------------|---------------|-----------------|
|               |                |                              |                    | 5             | 03              | 34            |                 |
| 8             | Apple          | https://www.apple.co m/      | Technolog y        | #f5f6f 6      | #0101 01        | #4242 42      | SF Pro Text     |
| 9             | Netflix        | https://www.netflix.c om/kz/ | Entertain ment     | #0101 01      | #fcfcf c        | #4343 43      | Bebas Neue Font |
| 10            | KFC            | https://www.kfc.kz/          | Food               | #ffffff       | #e301 2b        | #440f 1a      | Cera            |
| ...           | ...            | ...                          | ...                | ...           | ...             | ...           | ...             |
| 200           | HealthLi ne    | https://www.healthlin e.com/ | Health             | #f8f8f 8      | #0101 01        | #fcba 44      | Proxim a Nova   |

The  dataset  comprises  information  from  more  than  200  sites  collected  between March  and  May  2024.  Following  the  data  collection  phase,  the  information  can  be organized and distributed based on categories, color schemes, and font types. These sites have been divided into categories, and the relationship between the distribution of these categories is depicted in Fig. 3.

Figure 2. Collected dataset

![image](https://ac.marcodsn.me/arxiv-markdown-images/2408.00774v1-figure-fff8a8be-58fd-42f1-b183-438fd76c66cb.jpg)

![image](https://ac.marcodsn.me/arxiv-markdown-images/2408.00774v1-figure-6af12c3a-51db-4096-8338-a43176f0cfa9.jpg)

Category

Figure 3. Distribution of collected websites by categories

Sample images of the website from our Dataset are presented in Fig. 4

Figure 4. Sample images from our dataset. 1. Spotify. 2. KazHackStan. 3. IITU. 4. Telegram.

![image](https://ac.marcodsn.me/arxiv-markdown-images/2408.00774v1-figure-d418105f-dcaf-443f-a839-3ca465b58ef1.jpg)

## 4.2.Fuzzy Sets and Logic

Fuzzy  sets  and  logic  provide  a  framework  for  dealing  with  uncertainty  and imprecision,  which  are  inherent  in  many  real-world  problems.  Unlike  classical  sets, where  an  element  belongs  or  does  not  belong  to  a  set,  fuzzy  sets  allow  partial membership.

A  fuzzy  set A in  a  universe  of  discourse X is  characterized  by  a  membership function μA (x) that  assigns  to  each  element x in X a  degree  of  membership  in  the interval [0,1] [26]. Mathematically, it is defined as:

$$\mu _ { A } \colon X \rightarrow [ 0, 1 ]$$

The  basic operations in fuzzy logic include  AND,  OR,  and  NOT,  which correspond to intersection, union, and complement in fuzzy set theory. For example, the fuzzy AND operation is defined as:

$$\mu _ { A \cap B } ( x ) = \min \left ( \mu _ { A } ( x ), \mu _ { B } ( x ) \right )$$

A fuzzy inference system (FIS) is a framework for reasoning with fuzzy logic. It consists of the following steps [26]:

- 1. Fuzzification. Convert crisp inputs into fuzzy sets using membership functions.
- 2. Rule Evaluation. Apply fuzzy rules to the fuzzy inputs to obtain fuzzy outputs.
- 3. Aggregation. Combine the fuzzy outputs into a single fuzzy set.
- 4. Defuzzification. Convert the aggregated fuzzy set into a crisp output.

Fuzzy  rules  are  an  essential  component  of  fuzzy  logic  systems. A  fuzzy  rule  is generally expressed as an IF-THEN statement, where the IF part is the antecedent and the THEN part is the consequent. A fuzzy rule can be written as:

$$I F \, x _ { 1 } \, \text{IS} \, A _ { 1 } \, \text{AND} \, x _ { 2 } \, \text{IS} \, A _ { 2 } \, \text{THEN} \, y \, \text{IS} \, B$$

where x1 , x 2 are input variables, A1, A 2 are fuzzy sets representing the antecedents, and y is the output variable with fuzzy set B representing the consequent.

Fig. 5 depicts input fuzzy sets, Color Harmony and Font Popularity. Fig. 6 shows output fuzzy sets representing a website's level of Visual Aesthetics. Table  2 illustrates fuzzy rules used in the fuzzy inference system.

Figure 5. Input fuzzy sets, Color Harmony and Font Popularity

![image](https://ac.marcodsn.me/arxiv-markdown-images/2408.00774v1-figure-eaaf15b7-cfb1-4dea-ad81-df30b247a8a4.jpg)

![image](https://ac.marcodsn.me/arxiv-markdown-images/2408.00774v1-figure-2d3c2320-4e69-49f4-b2ce-d370ebe5dff6.jpg)

Visual Aesthetics

Figure 6. Output fuzzy sets representing the level of Visual Aesthetics in a website

Table 2 - Fuzzy rules in the knowledge base

| Rules   | Color Harmony   | Font Popularity   | Visual Aesthetics   |
|---------|-----------------|-------------------|---------------------|
| Rule 1  | Poor            | Low               | Low                 |
| Rule 2  | Poor            | Medium            | Low                 |
| Rule 3  | Poor            | High              | Neutral             |
| Rule 4  | Good            | Low               | Neutral             |
| Rule 5  | Good            | Medium            | High                |
| Rule 6  | Good            | High              | High                |
| Rule 7  | Strong          | Low               | Neutral             |
| Rule 8  | Strong          | Medium            | Very High           |
| Rule 9  | Strong          | High              | Very High           |

## 4.3K-means Clustering for Palette Extraction

K-means  clustering  is  a  popular  unsupervised  ML  algorithm  for  partitioning  a dataset  into  distinct,  non-overlapping  groups  or  clusters.  It  is  widely  used  in  various fields, including image processing, for tasks such as palette extraction, where the goal is to identify the dominant colors in an image.

The k-means clustering algorithm aims to partition n observations into k clusters, where  each  observation  belongs  to  the  cluster  with  the  nearest  mean.  The  algorithm consists of the following steps:

- 1. Randomly select 𝑘 initial cluster centroids from the dataset.
- 2. Assign each data point to the nearest cluster centroid based on the Euclidean distance. The assignment step can be represented as:

$$C _ { i } = \left \{ x _ { p } \colon \| \ x _ { p } - \mu _ { i } \, \| ^ { 2 } \leq \| \ x _ { p } - \mu _ { j } \, \| ^ { 2 } \ \forall \ j, \ 1 \leq j \leq k \right \}$$

where 𝑥𝑝 is  a  data  point, 𝜇𝑖 is  the  centroid  of  cluster 𝑖 ,  and 𝐶𝑖 is  the  set  of points assigned to cluster  . 𝑖

- 3. Calculate the new centroids as the mean of all points assigned to each cluster. The update step can be represented as:

$$\mu _ { i } = \frac { 1 } { | C _ { i } | } \sum _ { x _ { p } \in C _ { i } } x _ { p } \\ \dots \sim \frac { \dots } { \dots } \dots \dots \dots \dots \dots$$

where |𝐶𝑖 | is the number of points in cluster 𝑖 .

- 4. Repeat the assignment and update steps until the centroids converge, meaning the centroids no longer change significantly.

Euclidean Distance is defined as:

$$\| \, x _ { p } - \mu _ { i } \, \| ^ { 2 } = \sum _ { j = 1 } ^ { d } \left ( x _ { p j } - \mu _ { i j } \right ) ^ { 2 }$$

where xpj is the  -th coordinate of data point j xp and μij is the  -th coordinate of the j centroid μi .

The objective of k-means is to minimize the total within-cluster variance, which is the sum of squared distances between points and their respective cluster centroids. The objective function can be represented as:

$$J = \sum _ { i = 1 } ^ { k } \sum _ { x _ { p } \in C _ { i } } \, \| \, x _ { p } - \mu _ { i } \, \| ^ { 2 }$$

As defined previously, the new centroid μi is the mean of all points xp Ci :

in cluster

$$\mu _ { i } = \frac { 1 } { | C _ { i } | } \sum _ { x _ { p } \in C _ { i } } x _ { p }$$

In  image  processing,  k-means  clustering  can  extract  the  dominant  colors  in  an image. Various  color  spaces  can  be  employed  for  this  purpose  .  The  process  involves treating each pixel's color value as a data point and clustering these points in the color space. The centroids of the clusters represent the dominant colors in the image, which can be used to create a color palette.

The steps for palette extraction are as follows:

- 1. Convert the image into a dataset of color values.
- 2. Apply the k-means clustering algorithm to this dataset.
- 3. The centroids of the clusters are the colors of the palette.

## 4.4. Color Wheel Harmony

We  calculate  color  wheel  harmony  by  extracting  the  dominant  colors  from  a website  using  the  K-means  clustering  algorithm.  These  dominant  colors  are  then converted from RGB to HSV format, focusing particularly on the Hue component. The color wheel is divided into 12 segments, each corresponding to a primary, secondary, or tertiary color, and  each  segment  represents  a  30-degree  slice  of the wheel.  By determining the Hue values of the dominant colors, we can locate their positions on this color wheel.

We then analyze these positions to identify the type of color harmony present. We used traditional harmonies, like "Monochromatic", "Complementary", "Split Complementary",  "Triad",  "Square",  "Rectangular",  "Analogous".  For  that,  we  used color-harmony 1.0.1 python package. For example, Complementary harmony  is identified  when  colors  directly  oppose  each  other  on  the  wheel,  and  Triad  harmony consists of three colors evenly spaced around the wheel. Any combination that does not fit these categories is classified as "Other."

## 5. Results and Discussion

Color  harmonies  were  extracted  using  the  approach  discussed  in  the  previous section. Information about font popularity was parsed from the website www.myfonts.com.  Now,  we  can  illustrate  the  proposed  approach  with  a  specific example.

Fig.  7  illustrates  the  example  of  the  resulting  output,  including  dominant  RGB colors, color wheel harmonies, and the palette illustration.

Figure 7. Example of extracted dominant RGB colors, wheel harmonies and palette illustration

![image](https://ac.marcodsn.me/arxiv-markdown-images/2408.00774v1-figure-ec27e19a-ab1b-4d1b-b1e6-efd6765c57a2.jpg)

To simulate the fuzzy system, we  must  first specify the inputs and then  use the defuzzification approach. Consider the following example: the inputs are Color Harmony and Font Popularity with values of 3 and 37, respectively. Fuzzy aggregation then combines the output membership functions using the maximum operator. Next, we defuzzify to obtain a final result, which is done using the centroid approach. Aggregation  using  fuzzy  criteria  yielded  an  overall  Visual Aesthetics  score  of  57.9%. This process effectively demonstrates how the fuzzy system simulates and visualizes the results.

Figure 8. Defining rules using scikit-fuzzy

![image](https://ac.marcodsn.me/arxiv-markdown-images/2408.00774v1-figure-418da4bb-cb35-426b-8605-a4bd8b45e6ec.jpg)

![image](https://ac.marcodsn.me/arxiv-markdown-images/2408.00774v1-figure-6ef4bd9a-f255-4f5f-a181-173c640c742a.jpg)

a. Applying input 3 Color Harmony count fuzzy set

![image](https://ac.marcodsn.me/arxiv-markdown-images/2408.00774v1-figure-64c75d4b-d07a-4646-bda5-8e1a12438a7f.jpg)

b. Applying input 37 on Font popularity fuzzy set

![image](https://ac.marcodsn.me/arxiv-markdown-images/2408.00774v1-figure-332b1a4a-9d49-4c14-bcc4-bcd810e37acd.jpg)

- c. Aggregated Membership and Result, 57.9%

Figure 9. Simulation Results.

Figure 10. The distribution of color harmonies.

![image](https://ac.marcodsn.me/arxiv-markdown-images/2408.00774v1-figure-5bdbf830-9a64-487d-b6b5-cb19dae52cbe.jpg)

The distribution of color harmonies in categories Education and Entertainment is presented  in  Fig.  10.  As  we  see,  color  harmonies  do  not  vary  significantly  across contexts, which partially supports previous research findings [19].

## 6. Conclusion

This  study  utilizes  fuzzy  logic  and  ML  to  develop  a  model  predicting  website aesthetics.  The  design  of  a  website  is  critical  because  it  significantly  influences  the user's first impression, often formed within milliseconds. A website's visual appeal can strongly affect how users judge its ease of use. A well-designed website is perceived as more  trustworthy  and  usable.  Therefore,  considering  aesthetics  in  website  design enhances user experience and usability.

Our  findings  can  empower  developers  and  designers  to  design  effective  and visually captivating websites for users.

As  for  limitations,  we  consider  only  one  website  page,  neglecting  others.  So, animations  were  not  taken  into  account.  Some  websites  were  simple  but  had  image content,  which  is  part  of  information,  not  design.  We  also  plan  to  integrate  emotionaware  aesthetic  assessment,  considering,  for  example,  Russell's  circumplex  model  of affect, as in similar studies related to music [28].

## 7. Information on funding

This  research  has  been  funded  by  the  Science  Committee  of  the  Ministry  of Science and Higher Education of the Republic of Kazakhstan (Grant No. AP22786412)

## References

- 1 W. A. Social and Hootsuite, 'DIGITAL 2024: GLOBAL OVERVIEW REPORT,' Jan 2024, https://datareportal.com/reports/digital-2024-global-overview-report.
- 2 N. H. Anderson, Foundations of Information Integration Theory. New York: Academic Press, 1981.
- 3 B. N. Schenkman and F. U. J ̈onsson, 'Aesthetics and preferences of web pages,' Behaviour and Information Technology, vol. 19, pp. 367-377, 9 2000. https://doi.org/10.1080/014492900750000063
- 4 N. Tractinsky, A. Katz, and D. Ikar, 'What is beautiful is usable,' Interacting with Computers, vol. 13, pp. 127-145, 12 2000.https://doi.org/10.1016/S09535438(00)00031-X
- 5 P.-Y. Tseng and S.-F. Lee, 'The impact of web visual aesthetics on purchase intention,' 10 2019, pp. 28-31. https://doi.org/10.1109/ECICE47484.2019.8942664
- 6 G. Lindgaard, G. Fernandes, C. Dudek, and J. Brown, 'Attention web designers: You have 50 milliseconds to make a good first impression! behaviour and information technology, 25(2), 115-126,' Behaviour and IT, vol. 25, pp. 115-126, 03 2006. https://doi.org/10.1080/01449290500330448
- 7 J. Garrett, The Elements of User Experience: User-Centered Design for the Web and Beyond, 12 2010.
- 8 J. Mohamad Zain, M. Tey, and G. Soon, 'Using aesthetic measurement application (ama) to measure aesthetics of web page interfaces,' 11 2008, pp. 96 100. https://doi.org/10.1109/ICNC.2008.764
- 9 D. Filonik and D. Baur, 'Measuring aesthetics for information visualization,' 08 2009, pp. 579 - 584. https://doi.org/10.1109/IV .2009.94
- 10 C. Coursaris, 'Exploring the relationship between aesthetics and usability,' 06 2007.
- 11 S. Lee and R. Koubek, 'Users' perceptions of usability and aesthetics as criteria of pre- and post-use preferences,' European J. of Industrial Engineering, vol. 6, 01 2012. https://doi.org/10.1504/EJIE.2012.044812
- 12 G. Geissler, G. Zinkhan, and R. Watson, 'The influence of home page complexity on consumer attention, attitudes, and purchase intent,' Journal of Advertising, vol. 35, pp. 69-80, 03 2013. https://doi.org/ 10.1080/00913367.2006.10639232
- 13 S. Nadkarni and R. Gupta, 'A task-based model of percieved website complexity,' Management Information Systems Quarterly, vol. 31, pp. 501-524, 01 2007. https://doi.org/10.2307/25148805
- 14 A. N. Tuch, J. A. Bargas-Avila, K. Opwis, and F. H. Wilhelm, 'Visual complexity of websites: Effects on users' experience, physiology, performance, and memory,' International Journal of Human-Computer Studies, vol. 67, no. 9, pp. 703-715, 2009. https://www.sciencedirect.com/science/article/pii/S107158190900055X
- 15 A. Sonderegger and J. Sauer, 'The influence of design aesthetics in usability testing: Effects on user performance and perceived usability,' Applied ergonomics, vol. 41, pp. 403-10, 11 2009. https://doi.org/10.1016/j.apergo.2009.09.002
- 16 G. Lindgaard, C. Dudek, D. Sen, L. Sumegi, and P. Noonan, 'An exploration of relations between visual appeal, trustworthiness and perceived usability of homepages,' ACM Trans. Comput.-Hum. Interact., vol. 18, p. 1, 04 2011. https://doi.org/10.1145/1959022.1959023
- 17 P. Shamoi, A. Inoue, and H. Kawanaka, 'Modeling aesthetic preferences: Color coordination and fuzzy sets,' Fuzzy Sets and Systems, vol. 395, pp. 217-234, 2020. https://doi.org/10.1016/j.fss.2019.02.014
- 18 P. Shamoi, A. Inoue, and H. Kawanaka, 'Color aesthetics and contextdependency,' in SCIS-ISIS 2022, 2022, pp. 1-7. https://doi.org/10.1109/SCISISIS55246.2022.10001872
- 19 P. Shamoi, M. Muratbekova, A. Izbassar, A. Inoue, and H. Kawanaka, 'Towards a universal understanding of color harmony: Fuzzy approach,' in Fuzzy Systems and Data Mining IX. Frontiers in Artificial Intelligence and Applications. IOS Press, 2023, pp. 20-28. https://doi.org/10.1145/1460355.1460357
- 20 B. Schenkman and F. J ̈onsson, 'Aesthetics and preferences of web pages,' Behaviour and Information Technology, vol. 19, 01 2000. https://doi.org/10.1080/014492900750000063
- 21 A. Tuch, E. Presslaber, M. St ̈ocklin, K. Opwis, and J. Bargas-Avila, '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, pp. 794-811, 07 2012. https://doi.org/10.1016/j.ijhcs.2012.06.003
- 22 G. Lindgaard, 'Does emotional appeal determine perceived usability of web sites,' in Proceedings of CybErg: the second international cyberspace conference on ergonomics. The International Ergonomics Association Press, Curtin University, 1999, pp. 202-211. https://doi.org/10.1007/s10660-010-9054-0
- 23 C. Coursaris and K. Kripintris, 'Web aesthetics and usability: An empirical study of the effects of white space.' IJEBR, vol. 8, pp. 35-53, 01 2012. https://doi.org/10.4018/jebr.2012010103
- 24 J. Pracejus, G. Olsen, and T. O'Guinn, 'How nothing became something: White space, rhetoric, history, and meaning,' Journal of Consumer Research, vol. 33, pp. 82-90, 06 2006. https://doi.org/10.1086/504138
- 25 Y. Zhang, Web Design. Southwest China Normal University Press, 2015.
- 26 G. Bojadziev and M. Bojadziev, Fuzzy Sets, Fuzzy Logic, Applications. WORLD SCIENTIFIC, Jan. 1996. http://dx.doi.org/10.1142/2867
- 27 P. Shamoi, D. Sansyzbayev, and N. Abiley, 'Comparative overview of color models for content-based image retrieval,' in 2022 International Conference on

Smart Information Systems and Technologies (SIST), 2022, pp. 1-6. https://doi.org/10.1109/SIST54437.2022.9945709

- 28 A. Ualibekova and P. Shamoi, 'Music emotion recognition using k-nearest neighbors algorithm,' in 2022 International Conference on Smart Information Systems and Technologies (SIST), 2022, pp. 1-6. https://doi.org/10.1109/SIST54437.2022.9945814
Tamiris Abildayeva Pakizar Shamoi
Fuzzy Logic Approach For Visual Analysis Of Websites With K-means Clustering-based Color Extraction
Websites form the foundation of the Internet, serving as platforms for
disseminating information and accessing digital resources. They allow users to
engage with a wide range of content and services, enhancing the Internet's
utility for all. The aesthetics of a website play a crucial role in its overall
effectiveness and can significantly impact user experience, engagement, and
satisfaction. This paper examines the importance of website design aesthetics
in enhancing user experience, given the increasing number of internet users
worldwide. It emphasizes the significant impact of first impressions, often
formed within 50 milliseconds, on users' perceptions of a website's appeal and
usability. We introduce a novel method for measuring website aesthetics based
on color harmony and font popularity, using fuzzy logic to predict aesthetic
preferences. We collected our own dataset, consisting of nearly 200 popular and
frequently used website designs, to ensure relevance and adaptability to the
dynamic nature of web design trends. Dominant colors from website screenshots
were extracted using k-means clustering. The findings aim to improve
understanding of the relationship between aesthetics and usability in website
design.