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

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

VI. DISCUSSION

Our comprehensive inspection of current practices concerning text formatting and image usage within the top visited Arabic websites in Saudi Arabia revealed various interesting findings. The usability inspection was performed to gather insights about the font types and sizes used to style Arabic text, especially that they could directly influence the legibility of text on websites.

Let us review and attempt to answer the research questions posited in the introduction. What font types and font sizes are used by major Arabic websites? On the positive side, the selection of the Arabic websites included a large pool of websites, which were selected objectively by relying on Alexa Internet latest ranking. In effect, the inspection covered a total of 73 top viewed websites (52 local and 21 international) in Saudi Arabia. The websites' ranking is based on a set of metrics, primarily the average viewing time for the last three months.

Typically, a font has several characteristics including type, size, width, weight, and serifs [37], [46]. However, for the purpose of this research, we directed our focus towards two key font characteristics namely type and size. On the web, font type usually refers to the font family that represents a certain typeface, including all sizes and styles, for example, Arial and Verdana. To style a particular family type, the size of text may be increased or decreased using the font size attribute. There are different ways to resize the font including Ems (em), pixels (px), points (pt), and percent (%). In our font size analysis, we used pixels (px) as the sole measurement for the font since it is the main measurement unit for media shown on computer screens. Moreover, web designers usually use pixels as their key measurement unit for font size. Points, however, are used to measure font size for print media.

It is noted that more than half of the Arabic websites breached the principle of consistency when applying font types to the text. This means that multiple font types were used on the same web pages. Previous research, however, has already emphasized the role of consistency of user interface elements, such as font, in the overall usability of websites [35], [36]. On that basis, it is recommended that designers should adhere to the same font family to create attractive and consistent Arabic web designs.

Moreover, there was no evident consensus amongst the websites in favoring a particular font type in order to display the Arabic text. More than 35 font types were used by the selected 73 websites. There are various potential theories that could explain this staggering variability; firstly, the lack of research and thereby guidelines with respect to styling Arabic text to guide the effective design of Arabic websites; secondly, the weak conformance to international design practices and recommendations; thirdly, the lack of awareness that text formatting might ultimately impact text legibility and thereby readers' mental load and overall satisfaction.

Nonetheless, a pattern of font usage emerged within the Arabic websites; six font types recurred several times in the formatting of titles/headline, menus, and paragraphs. These font types were used differently according to the type of text element. For titles and menus, Droid Arabic Kufi, Tahoma, Helvetica, and Arial, emerged as favorites. It is no surprise that Droid Arabic Kufi came out as a winner for it is a unique font that reflects the Arabic calligraphy. This font gives a true feeling of the traditional Arabic scripts (Kufic scripts) that date back to the 7th century. For paragraphs, Tahoma, Helvetica, Arial and Times New Roman were used more frequently.

International recommendations suggest using font type Verdana since it is one of the most legible fonts as rated by online readers of English websites [38]. Nonetheless, this font did not appear frequently in the Arabic websites that we tested. Moreover, other famous fonts that were found earlier to be legible or attractive by English readers, such as Georgia [18] and Courier [10], did not rank well in the Arabic websites. However, Arial emerged as one of the top six font types used by the Arabic websites. Previous research confirmed that font type Arial was read significantly faster and was perceived as legible [10].

Design guidelines have indicated that font size 12 points (~ 16 pixels) is the most suited size for displaying text on English websites [39]. This is somewhat disputable as subsequent research suggested the use of font size 14 points (~19 pixels) instead. For displaying the Arabic text, recommendations are inconclusive yet. For example, [17] proposed to use font 14 points (~19 pixels) whereas [4] argued that font size 16 (22 pixels) to 18 points (~24 pixels) must be used for better readability. These suggestions are in strike contrast with the current practices of the Arabic web design. More than 60% of the inspected websites used font size ranging between 12 pixels to 16 pixels (i.e. 9 points to 12 points) to style the paragraphs. Similarly, menu items are sized from 13 pixels to 14 pixels, which is still considerably illegible [17].

In respect to using images in web design, we aimed at answering the following question. What types of images are incorporated within the Saudi websites given the Saudi culture? All Arabic websites included images as part of their content. Authors in [40] and [41] suggested that graphics improve the overall attractiveness of websites. Moreover, 90% of the Arabic websites we tested included human images. This is known to improve user engagement, trust, and satisfaction [21]. However, 80% of the Arabic websites used conservative images that respect the Islamic identity and cultural values of the Saudi people. Research studies agree that web designs should adhere to the cultural values of its users to achieve success and acceptance [42], [43], [44]. Two-thirds of the websites used images of both genders. The remaining third, however, used images of men only. This could be explained by the masculine dimension of the Saudi society as indicated by Hofstede scores [45]. More than 80% of the websites included images containing groups of people. Again, this can be justified by the collectivism dimension of the Saudi society [45]. Finally, there was high usage of animations, possibly, in an attempt to engage web visitors and improve the aesthetics of the websites. Evidently, the high presence of images in these websites contributed to lower performance scores and increased site loading time. Optimization of images‟ size, using the appropriate image compression techniques, is therefore recommended as a result of our analysis.