Abstract: In this study, we investigate the usability aspects of the website interface design by introducing the design and implementation of a system named Web Interface Evaluation (WIE). This system evaluates the web interface through a study on a number of web interface features about 55 features extracted from different HTML web pages, English and Arabic ones and then classify these pages to high, middle, low quality, this is done by the comparison of the extracted features with threshold values. These threshold values were extracted based on an extensive survey of design, recommendations from recognized experts and usability studies.

INTRODUCTION

Although, professional design companies create most prominent websites, people who having little design experience, build an enormous number of smaller sites, need to make information available online. The usability of websites such as non-profits and small businesses is often substandard. The goal of this research is to create a system to help non-professional website builders away from bad design and toward better ones, a kind of quality checker tool. The user interface of the website is an important issue that must be taken in the consideration. To make websites usable by others, we must apply the usability conditions on it that entails the guidelines of web design accessibility, this will lead users spend more time on these websites.

The proposed system WIE presented in this study evaluates HTML pages by extracting about 55 interface features categorized into graphics, navigation and information. The system classify the web page to high, middle or low, one according to some predefined measures.

Literature survey: Several approaches for evaluating website quality evaluate web pages interface according to a number of pre-determined guidelines such as whether all graphics contain ALT attributes. Other techniques compare quantitative web page measures such as the number of links or graphics to thresholds. The approach presented in this study is working on both guidelines and thresholds.

Ivory (2001) in her research computes a larger set of measures (157), over a larger collection of web pages. A quantitative analysis of a large collection of expert-rated websites reveals that page-level metrics can accurately predict if a site will be highly rated. The analysis also provides empirical evidence that important metrics including page composition, page formatting and overall page characteristics, differ among website categories such as education, community, living and finance. Simulation has also been used for web interface evaluation. For example, web criteria’s site profile attempts to mimic a user’s information-seeking behavior within a model of an implemented site.

This tool uses an idealized user model that follows an explicit, pre-specified navigation path through the site and estimates several metrics such as page load and optimal navigation times. Another example, Chi, Pirolli and Pitkow (UIE, 1999) have developed a simulation approach for generating navigation paths for a site based on content similarity among pages, server log data and linking structure.

The simulation models hypothetical users traversing the site from specified start pages, making use of information scent (i.e., common key words between the user’s goal and content on linked pages) to make navigation decisions. Neither of these approaches, account for the impact of various web page attributes such as the amount of text or layout of links.

Website usability: The effectiveness, efficiency and satisfaction with which specified user can achieve specified goals in particular environments (ISO definition of usability: ISO DIS9241-11).On the face of it, the ISO would seem to give a fair amount of guidance in helping us to decide whether or not a product can be described as fitting the criteria for usability. Systems should be:

Website usability is what makes a website work according whether it intended to make a specific purchase, find a specific piece of information or simply browse (Nielsen, 2000). Designing a usable website design must be grounded in a solid understanding of the intended users and their objectives in using the site. Every design decision from functionality to visual design should be evaluated in terms of what solutions best serves the users ability to fulfill their objectives. Usability testing needs to explore many possible responses, seeking to find any barriers that might be inherent within website. Website interface is one of the most important issues that affect website usability.

Web interface structure: A web interface is a mix of many elements (text, links and graphics), formatting of these elements and other aspects that affect the overall interface quality. Web interface design entails a complex set of activities for addressing these diverse aspects. To gain insight into web design practices, Newman and Landay conducted a study wherein they observed and interviewed eleven professional Web designers (Ivory, 2001, 2002).

One important finding is that most designers viewed web interface design as being comprised of three components (information design, navigation design and graphic design) as shown in Fig. 1. Information design focuses on determining an information structure (i.e., identifying and grouping content items) and developing category labels to reflect the information structure.

Navigation design focuses on developing navigation mechanisms (e.g., navigation bars and links) to facilitate interaction with the information structure. Finally, graphic design focuses on visual presentation and layout. All of these design components affect the overall quality of the web interface.

Experience design encompasses information, navigation and graphic design. However, it also encompasses other aspects that affect the user experience such as download time, the presence of graphical ads, popup windows, etc., information, navigation, graphics and experience design can be further refined into the aspects shown in Fig. 2.

Figure 2 shows that text, link and graphic elements are the building components of web interfaces all other aspects are based on these.

Fig. 1:	Overview of web interface design

Fig. 2:	Aspects associated with web interface structure

The next level of the Fig. 2 addresses formatting of these building blocks while the subsequent level addresses page-level formatting. The top two levels address the performance of pages and the architecture of sites including the consistency, breadth and depth of pages. The bottom three levels of Fig. 2 are associated with information, navigation and graphic design activities while the top two levels, page performance and site architecture associated with experience design (Ivory, 2002; Nielsen, 2006).

Web page measures: Web design can be characterized according to information, navigation, graphic and experience design. We conducted an extensive survey of web design literature including texts written by recognized experts (Nielsen, 2000; Berners-Lee, 1996) in order to identify key features that affect these design aspects and thus the overall quality of a website. We organize 55 of these features into the general classes summarized below; the number of features in each class is in parenthesis.

Text elements (11): Elements like the amount of text on a page, type, quality and complexity of text on a page. The measures are for both visible (e.g., all link text and heading words) and invisible words (e.g., meta tag keywords).

Text formatting (11): Elements regarding how body text is emphasized whether there is underlined text that is not in text links on the page; font styles and sizes if there is a variation in fonts and the number of text colors.

Link elements (9): Elements related to the number and type of links (e.g., graphic and text links) on a page.

Graphic elements (2): The number and type of images (e.g., animated and link images) on a page.

Graphic formatting (8): The minimum, maximum and average width and height of images as well as the amount of page area covered by them.

Page formatting and performance (14): These include color usage, fonts, use of interactive elements how the page style is controlled and other page characteristics.

MATERIALS AND METHODS

The analysis uses a collection of pages, all of them are informational websites in education, health, financial were selected for evaluation. Figure 3 explores the overall system activities and modules. The 1st step in the system is to download a page by giving the URL to a crawler module. HTML parser module enumerate frames, images, links that appear in a downloaded web page, support information about how element is formatted (e.g., bolded, colored, italicized, etc.) whether it is a link (internal or external one). The feature extraction module produces a set of features for comparison, page level measures assess many sides of web interfaces as we will show that in this study.

The extracted features are used to evaluate HTML pages. The Classifier module will classify pages to either (high, middle or low quality). The improvement stage is to improve the web page interface by providing the improvement list that guide the web designer to modify the web page interface to cope with the usability issues.

Fig. 3:	Overview of the analysis methodology

System implementation:

All WIE modules are implemented using Visual Basic. HTML page downloading module uses the windows API (WinInet) to download the web page of the given URL after that and by the aid of the crawler module that automatically retrieve the pages that have links in the current page, this process repeating itself until all pages of the given website are retrieved. HTML parser program check each line in the HTML page to extract the different characteristics. The following Visual Basic code section explains how we analyze the data inside the HTML file to extract the characteristics regarding to the images on a page: features are extracted from the previous characteristics according to the predefined categories (graphics, information, navigation) (Table 1).

Figure 4 shows a snapshot of WIE system. As shown, the system provides the abilities like webpage downloading, i.e., by the use of the crawler module, so we have to apply this function first. The downloaded page is from a website of a company that advertise it’s experience in the field of civil engineering. Now, we have to choose the pre-processing option to analyze this page.

Table 1:	Web interface features

Fig. 4 :	WIE system main window

The features are then extracted and evaluated using the classification option to produce the list of suggestions to modify the design of this page, some of these are related to the total area of the web page that covered by images in comparison with the amount of text, the lack of sitemap in this website, there is no option to turn off the blinking of the page title or lack of style sheets in this site. As we can see, it is large list of suggestions that gives an indication about the little experience of this site designer, WIE can help in modifying the bad designs.

RESULTS AND DISCUSSION

We examined guidelines for several aspects of web interfaces including the amount of text, fonts, colors and links and provide thresholds for these aspects. We are not suggest that these are the only important aspects of web interfaces, rather we highlight aspects that are relevant to many web pages and can be assessed with the tools. WIE demonstrates how novice web designers might apply the derived thresholds to improve the usability of their designs.

Amount of text on a page: The literature contains contradictory heuristics about the ideal amount of text for a web page. Some researches describes that users prefer all relevant content to appear on one page while others suggest that content should be broken up into smaller units across multiple pages. Furthermore, there is no concrete guidance on how much text is enough or too much. We can suggest that the text in one page not exceed 200 or 250 words is reasonable for information pages.

Font styles and sizes: The analysis on some Arabic web pages revealed that Arabic transparent is the predominant font style used on good pages; questionary with some people have shown these fonts to be more readable than Kuffi fonts online. Variation in font style (i.e., combinations of font face, size, bolding and italics) is acceptable to a certain degree and finally, the font size between 12-14 pts is suitable for information pages.

Use of graphical ads: Most texts suggest that graphical ads should be minimized or avoided. The measures of the number of graphical ads (animated and nonanimated) suggest that good pages are likely to contain no more than two graphical ads.

Length and quality of link text: Some researchers suggest that web designers use 2-4 words in text links; however others suggest that they use links with 7-12 useful words (i.e., words that provide hints about the content on a destination page).

The average link words measure suggests that text links on good pages contain from 2-3 words that is because our Arabic language have a possibility to express things in a small number of words as it is rich enough in comparison with other languages.

Colors combinations: The literature offers various recommendations on using a small number of colors, browser-safe colors, default link colors, color combinations with suitable contrast and so on. The analysis revealed that good pages tend to use from 1-3 colors for body text as well as 1-2 colors for headings.

CONCLUSION

The researchers summarized about 55 interface design features extracted from web pages, all representing page level features. We gathered from books and articles the guidelines of web usability that almost all experts in this field are agree on. Thresholds for some measures are then computed based on these guidelines. In some cases such as the number and types of links and graphical ads what is done in practice contradicts the literature; perhaps these areas need to be examined with further empirical studies.

RECOMMENDATIONS

Future research entails validating the new prediction models, providing designers with more guidance on interpreting model predictions and implementing design changes and building an integrated web site design and evaluation environment.