This is Part 5 of a 7-part series of the research paper “Towards Usability Guidelines for the Design of Effective Arabic Websites”. Use the table of links below to navigate to the other parts. Table of Links Abstract and I. Introduction II. Previous Works III. Research Methodology IV. Font and Image Inspection Studies V. Results VI. Discussion VII. Conclusions, Future Research Directions, and References V. RESULTS Our technical inspection focused on analyzing a set of characteristics that are related to font and image usage. Below we delve into the current practices of 73 top viewed Arabic websites. A. Practices Pertaining to Font Type and Font Size Chrome extension Font Face Ninja [31] was installed to detect and identify the fonts utilized to format the sample Arabic websites, with a particular emphasis on font aspects such as type and size (reported in pixels). In the inspection, we explored font styling pertaining to three key text elements namely, titles (or headings), navigation menus, and paragraphs. Formatting text with a particular font size has a direct impact on the overall readability and legibility of text on computer screens. Our next analysis explored the various fonts and sizes applied to format the Arabic text. It is worth noting that approximately 40 websites (~55% of the websites) used different font types within their pages raising concerns about internal consistency. The second observation we noticed is the large variability in the font‟s usage across the Arabic websites. In total, 39 different font types were utilized to style the titles of the 73 Arabic websites. The most frequent font type used for formatting titles was Droid Arabic Kufi (7 occurrences). When styling the navigation menus, 38 different font types were used, with Droid Arabic Kufi being the most frequent font. However, 35 different fonts were used to style the paragraphs of 73 Arabic websites, with Tahoma appearing more than the remaining fonts. When font types were ordered according to their occurrence, six main types emerged as clear winners specifically; Droid Arabic Kufi, Tahoma, Arial, Cairo, Helvetica and Times New Roman (see Fig. 7). In respect to page titles and navigation menus, Droid Arabic Kufi, Tahoma and Helvetica were used more frequently. However, for styling paragraphs, Tahoma, Helvetica, Arial and Times New Roman were more dominant (see Fig. 7). With regard to the font size used for the titles, size 28 pixels (8 times), 24 pixels (7 times) and 30 pixels (6 times) emerged as the most recurring sizes. Due to the variability of font sizes used for styling the Arabic titles, we created a histogram with the bins ranging from 10 to 14 pixels, 15 to 19 pixels, 20 to 24 pixels, 25 to 29 pixels, 30 to 34 pixels, 35 to 40 pixels, and more than 40 pixels (see Fig. 8). The below chart shows that the majority of Arabic websites styled their titles using sizes ranging from 15 to 40 pixels. Font sizes less than 15 pixels or more than 40 pixels were scarce. Less font size variability was identified in relation to the formatting of menus of Arabic websites. In total, only 10 font sizes were utilized in the 73 websites, with font size ranging from 11 pixels to 22 pixels. The most recurring font size for formatting navigation menus was 14 pixels (19 times ~ 26%), followed by 13 pixels font size (13 times ~ 18%) (see Fig. 9). When it came to formatting Arabic paragraphs, font size 14 pixels (~26%), 16 pixels (~19%), and 12 pixels (~18%) were more commonly used than the other sizes, as depicted in Fig. 10. Once again, 10 different font sizes, ranging from 12 to 26 pixels, were used to style the paragraphs of 73 websites. Only three websites used font sizes larger than 18 pixels to format the paragraphs. B. Practices Pertaining to Images and Graphics In respect to the use of images, the inspection looked into the content of the websites‟ images with regard to four major aspects, the use of images containing human faces, the gender portrayed in the images, the use of individuals or groups, and the conservatism or openness of the image content with respect to the Saudi values and Islamic religion. The average number of images varied greatly between the site categories. News, entertainment, government and ecommerce websites used approximately 50 images or more on their home pages respectively (Fig. 11). This is an anticipated result. The average size of the images ranged between 135KB and 2900KB. Most of the Arabic websites used images greater than 1500KB in size (Fig. 12). Social media websites produced smaller sizes as the analysis focused on the home pages only. Overall, 66 (90%) Arabic websites embedded images that contained humans and only 7 websites did not include images with humans in them (see Table II). Interestingly, the vast majority of these websites (52 websites) used images that are conservative in nature respecting the Islamic identity and cultural values of the Saudi society. Nonetheless, 14 websites used non-conservative images, for example, pictures of women wearing short clothes. These images are considered unacceptable Islamically and against the values of the Saudi culture. All non-human images were conservative in nature and did not portray things against the teachings of Islam or Saudi society. Moreover, 45 websites (out of 66) used images of men and women; this is approximately 68% of the websites including images containing humans (see Fig. 13). However, 21 websites (approximately 32%) used images of men only which shows that the masculinity in Saudi society still prevails. No website used images containing women alone. 48 Arabic websites (~72%) used a combination of images containing both individuals and groups of people (Fig. 14). This reflects the collective nature of Saudi society. In contrast, only 7 websites included pictures of individuals. A total of 47 websites (~64%) incorporated some form of interactive animations ranging from rotating images, loading animations, to CCS animations (see Fig. 15). However, only 20 Arabic websites (~27%) incorporated videos. C. The Performance of the Arabic Websites We undertook a general site analysis to check the performance of the Arabic websites. To this end, GTmetix1 was used to collect useful data about the speed scores of the websites, the site loading time, and the total page size. The data were collected for all 73 Arabic websites and averaged per category as shown in Fig. 16 and Fig. 17. Site performance scores are rated as a relative percentage (100%) to the performance of other websites analyzed by GTmetrix in the last 30 days. Only social media and entertainment websites scored above than 70% of other sites. However, government, education, and news websites scored less than 50% of the other analyzed sites (see Fig. 16). In respect to the site loading time, GTmetrix extracts metrics that capture the average time spent, in seconds, until the website ceases the data transfer process over the network and the onload events are launched on the designated website. The shorter this time is the better it is for the end user. Reduced loading time is also an indication of good implementation practices (e.g. fewer HTTP requests, compressed files…etc.). Author in [25] suggested that the site should take less than 3 seconds to load fully otherwise users might leave the site. Our analysis showed that all categories took, on average, over 5 seconds to load except the social media sites (approximately 3 seconds). Social media loaded fast for they contain a low number of images on their homes pages prior to signing in. Interestingly, government, education, and news websites showed the worst performance taking 10 seconds or longer to fully load (as depicted in Fig. 17). The government websites contained large images as shown earlier in Fig. 12. Authors:
(1) Abdallah Namoun, Department of Information Systems, Faculty of Computer and Information Systems, Madinah, Saudi Arabia;
(2) Ahmad B. Alkhodre, Department of Information Technology, Faculty of Computer and Information Systems, Madinah, Saudi Arabia. This paper is available on arxiv under CC BY 4.0 DEED license. [1] https://gtmetrix.com/ This is Part 5 of a 7-part series of the research paper “Towards Usability Guidelines for the Design of Effective Arabic Websites”. Use the table of links below to navigate to the other parts. This is Part 5 of a 7-part series of the research paper “ Towards Usability Guidelines for the Design of Effective Arabic Websites ”. Use the table of links below to navigate to the other parts. Part 5 Towards Usability Guidelines for the Design of Effective Arabic Websites Table of Links Abstract and I. Introduction Abstract and I. Introduction II. Previous Works II. Previous Works III. Research Methodology III. Research Methodology IV. Font and Image Inspection Studies IV. Font and Image Inspection Studies V. Results V. Results VI. Discussion VI. Discussion VII. Conclusions, Future Research Directions, and References VII. Conclusions, Future Research Directions, and References V. RESULTS Our technical inspection focused on analyzing a set of characteristics that are related to font and image usage. Below we delve into the current practices of 73 top viewed Arabic websites. A. Practices Pertaining to Font Type and Font Size A. Practices Pertaining to Font Type and Font Size Chrome extension Font Face Ninja [31] was installed to detect and identify the fonts utilized to format the sample Arabic websites, with a particular emphasis on font aspects such as type and size (reported in pixels). In the inspection, we explored font styling pertaining to three key text elements namely, titles (or headings), navigation menus, and paragraphs. Formatting text with a particular font size has a direct impact on the overall readability and legibility of text on computer screens. Our next analysis explored the various fonts and sizes applied to format the Arabic text. It is worth noting that approximately 40 websites (~55% of the websites) used different font types within their pages raising concerns about internal consistency. The second observation we noticed is the large variability in the font‟s usage across the Arabic websites. In total, 39 different font types were utilized to style the titles of the 73 Arabic websites. The most frequent font type used for formatting titles was Droid Arabic Kufi (7 occurrences). When styling the navigation menus, 38 different font types were used, with Droid Arabic Kufi being the most frequent font. However, 35 different fonts were used to style the paragraphs of 73 Arabic websites, with Tahoma appearing more than the remaining fonts. When font types were ordered according to their occurrence, six main types emerged as clear winners specifically; Droid Arabic Kufi, Tahoma, Arial, Cairo, Helvetica and Times New Roman (see Fig. 7). In respect to page titles and navigation menus, Droid Arabic Kufi, Tahoma and Helvetica were used more frequently. However, for styling paragraphs, Tahoma, Helvetica, Arial and Times New Roman were more dominant (see Fig. 7). With regard to the font size used for the titles, size 28 pixels (8 times), 24 pixels (7 times) and 30 pixels (6 times) emerged as the most recurring sizes. Due to the variability of font sizes used for styling the Arabic titles, we created a histogram with the bins ranging from 10 to 14 pixels, 15 to 19 pixels, 20 to 24 pixels, 25 to 29 pixels, 30 to 34 pixels, 35 to 40 pixels, and more than 40 pixels (see Fig. 8). The below chart shows that the majority of Arabic websites styled their titles using sizes ranging from 15 to 40 pixels. Font sizes less than 15 pixels or more than 40 pixels were scarce. Less font size variability was identified in relation to the formatting of menus of Arabic websites. In total, only 10 font sizes were utilized in the 73 websites, with font size ranging from 11 pixels to 22 pixels. The most recurring font size for formatting navigation menus was 14 pixels (19 times ~ 26%), followed by 13 pixels font size (13 times ~ 18%) (see Fig. 9). When it came to formatting Arabic paragraphs, font size 14 pixels (~26%), 16 pixels (~19%), and 12 pixels (~18%) were more commonly used than the other sizes, as depicted in Fig. 10. Once again, 10 different font sizes, ranging from 12 to 26 pixels, were used to style the paragraphs of 73 websites. Only three websites used font sizes larger than 18 pixels to format the paragraphs. B. Practices Pertaining to Images and Graphics B. Practices Pertaining to Images and Graphics In respect to the use of images, the inspection looked into the content of the websites‟ images with regard to four major aspects, the use of images containing human faces, the gender portrayed in the images, the use of individuals or groups, and the conservatism or openness of the image content with respect to the Saudi values and Islamic religion. The average number of images varied greatly between the site categories. News, entertainment, government and ecommerce websites used approximately 50 images or more on their home pages respectively (Fig. 11). This is an anticipated result. The average size of the images ranged between 135KB and 2900KB. Most of the Arabic websites used images greater than 1500KB in size (Fig. 12). Social media websites produced smaller sizes as the analysis focused on the home pages only. Overall, 66 (90%) Arabic websites embedded images that contained humans and only 7 websites did not include images with humans in them (see Table II). Interestingly, the vast majority of these websites (52 websites) used images that are conservative in nature respecting the Islamic identity and cultural values of the Saudi society. Nonetheless, 14 websites used non-conservative images, for example, pictures of women wearing short clothes. These images are considered unacceptable Islamically and against the values of the Saudi culture. All non-human images were conservative in nature and did not portray things against the teachings of Islam or Saudi society. Moreover, 45 websites (out of 66) used images of men and women; this is approximately 68% of the websites including images containing humans (see Fig. 13). However, 21 websites (approximately 32%) used images of men only which shows that the masculinity in Saudi society still prevails. No website used images containing women alone. 48 Arabic websites (~72%) used a combination of images containing both individuals and groups of people (Fig. 14). This reflects the collective nature of Saudi society. In contrast, only 7 websites included pictures of individuals. A total of 47 websites (~64%) incorporated some form of interactive animations ranging from rotating images, loading animations, to CCS animations (see Fig. 15). However, only 20 Arabic websites (~27%) incorporated videos. C. The Performance of the Arabic Websites C. The Performance of the Arabic Websites We undertook a general site analysis to check the performance of the Arabic websites. To this end, GTmetix1 was used to collect useful data about the speed scores of the websites, the site loading time, and the total page size. The data were collected for all 73 Arabic websites and averaged per category as shown in Fig. 16 and Fig. 17. Site performance scores are rated as a relative percentage (100%) to the performance of other websites analyzed by GTmetrix in the last 30 days. Only social media and entertainment websites scored above than 70% of other sites. However, government, education, and news websites scored less than 50% of the other analyzed sites (see Fig. 16). In respect to the site loading time, GTmetrix extracts metrics that capture the average time spent, in seconds, until the website ceases the data transfer process over the network and the onload events are launched on the designated website. The shorter this time is the better it is for the end user. Reduced loading time is also an indication of good implementation practices (e.g. fewer HTTP requests, compressed files…etc.). Author in [25] suggested that the site should take less than 3 seconds to load fully otherwise users might leave the site. Our analysis showed that all categories took, on average, over 5 seconds to load except the social media sites (approximately 3 seconds). Social media loaded fast for they contain a low number of images on their homes pages prior to signing in. Interestingly, government, education, and news websites showed the worst performance taking 10 seconds or longer to fully load (as depicted in Fig. 17). The government websites contained large images as shown earlier in Fig. 12. Authors: (1) Abdallah Namoun, Department of Information Systems, Faculty of Computer and Information Systems, Madinah, Saudi Arabia; (2) Ahmad B. Alkhodre, Department of Information Technology, Faculty of Computer and Information Systems, Madinah, Saudi Arabia. Authors : Authors (1) Abdallah Namoun, Department of Information Systems, Faculty of Computer and Information Systems, Madinah, Saudi Arabia; (2) Ahmad B. Alkhodre, Department of Information Technology, Faculty of Computer and Information Systems, Madinah, Saudi Arabia. This paper is available on arxiv under CC BY 4.0 DEED license. This paper is available on arxiv under CC BY 4.0 DEED license. available on arxiv available on arxiv [1] https://gtmetrix.com/

Part of HackerNoon's growing list of open-source research papers, promoting free access to academic material.

Results: Font, Image Usage, and Performance Trends across 73 Arabic Websites

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

73 Top Saudi Sites Were Analyzed for Font Morphology, Image Design and User Preferences

73 Top Saudi Sites Were Analyzed for Font Morphology, Image Design and User Preferences

Improving Usability Through Better Font and Image Practices in Arabic Websites

Research Methodology for Inspecting Typography and Images in Arabic Websites

Design Arabic Websites with Consistent Fonts, Optimal Sizes, and Culturally Aligned Images

What's in Store for the Future of Arabic Web Design and Usability

73 Top Saudi Sites Were Analyzed for Font Morphology, Image Design and User Preferences

73 Top Saudi Sites Were Analyzed for Font Morphology, Image Design and User Preferences

Improving Usability Through Better Font and Image Practices in Arabic Websites

Research Methodology for Inspecting Typography and Images in Arabic Websites

Design Arabic Websites with Consistent Fonts, Optimal Sizes, and Culturally Aligned Images

What's in Store for the Future of Arabic Web Design and Usability

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps