Usability analysis of advertising websites interfaces with the use of the universal design principles Analiza użyteczności interfejsów serwisów ogłoszeniowych z uwzględnieniem zasad projektowania uniwersalnego

The aim of the research was to observe how the usage of the universal design principles influences on the accessibility and usability of websites. As one of the analysis’ subjects there was chosen the popular advertising website. It has been confronted with a newly implemented application offering the same functions, but improved with the requirements resulting from the universal design. In order to compare those two services there was conducted the study with the use of eye-tracking, LUT checklists and WAVE Evaluation Tool. These methods made it possible to demonstrate the differences between websites caused by the contrasting implementation methods. The results showed that an application of universal design principles has a positive impact on the websites’ accessibility and usability.


Introduction
According to the report [1], about 15% of all the people that live in the world, have some disabilities. It is really important to take actions that will make their lives easier, so they will not be excluded from society. Accessibility term means, that people with disability have exactly the same access to all of the social life's areas [2]. Nowadays, a lot of activities require using the Internet and when applications are designed for most typical users, people with disability might have some troubles using them [3]. For this reason, it is so important to implement websites using the universal design, which aims to increase accessibility. This technique does not only allow users with disability use websites, but it also makes it easier for all people [4]. The universal design makes the implementation of websites more difficult, but it makes them way more useful, so it is worth making the additional effort. Over the years, websites' interfaces have evolved from an ergonomic point of view. Recently, there is increasingly noticed the need to adapt applications for people with natural computer difficulties. All public websites implemented after 2015 should be adapted to the needs of people with disability. De-spite this recommendation, many of them are designed in a way that makes it difficult for some users to access the whole content.
There are not so many papers about insightful research related to the topic of universal design influence. There can be found articles about the analysis of interfaces usability, but there is lack of papers referring to the comparison of websites with similar functionalities, but implemented with various design approaches.
The main purpose of this paper is to conduct a series of comparative experiments between two similar applications to observe how the universal design techniques affect an accessibility and usability of the website.
There has been specified the research designing a web application using the universal design rules increases its usability.
Some research hypotheses have been specified and they are as follows: • Designing a web application using the universal design rules increases the simplicity and intuitiveness of its use. • Designing a web application using the universal design rules increases its availability for users.
• The possibility of adjusting the contrast and the font size has a positive effect on the effectiveness of using the website.

Literature review
Article [5] contains a set of the eye-tracking patterns related to potential interface usability problems. In order to verify if these assumptions are correct, authors conducted the eye-tracking research, during which participants had to perform specific tasks with the use of two websites. It has been observed that there is a correlation between some patterns and the corresponding usability problems, so during interpretation of the eye-tracking results it is worth paying attention to the occurrence of the presented patterns. The research about the websites' usability with the use of the eye-tracking technology has been also described in [6]. The aim of this article was to observe some typical users' behaviors during finding information at websites. The results have shown that the most users' attention is attracted by informational areas of the page. In [7] there has been described the eye-tracking research with the use of five popular Norwegian websites. The results have shown that the intuitiveness of the interface affects the users' experience. Unfortunately, the research did not include guidelines of the universal design paradigm and the WCAG (Web Content Accessibility Guidelines) 2.0, so there cannot be made conclusions about the influence of following the recommendations relating to the application's design.
Paper [8] refers to the websites' accessibility in terms of meeting the WCAG 2.0 and 2.1 rules. To make the research, authors used various accessibility validators such as Achecker, SortSite and WAVE Evaluation Tool. They were used to verify 54 official websites for vaccination registration in USA. The results have shown the scale of problems with websites' accessibility, because all of examined applications are supported by the government and only two of them had been implemented in accordance with all the WCAG guidelines.
The topic of public websites is also included in the [9], which contains the description of the websites' accessibility research conducted with the use of Tenon and VoiceOver WCAG 2.0 validators. The results have shown that only one website was properly designed for people with disability. Authors also presented the most frequent usability problems which concern the structure of the document, the lack of correct text alternatives, insufficient information about the intended use of the links, unmodifiable font size and the lack of attributes indicating the purpose of the elements.
Article [10] is about the development process of e-learning platform. Three methods were applied to identify potential usability problems: heuristic evaluation, user experience questionnaires and the eyetracking. After revealing some errors, all of them were corrected and then the level of platform's availability was re-verified. The results allowed to state that the usability of the modernized application is at the higher level compared to the original version.
Paper [11] presents research on a procedure for improving a GUI quality. The procedure was applied to the Sale Force Automation application. The authors presented several methods that can be used to evaluate the application. These include expert analysis and cognitive walkthrough. In addition, the authors proposed a new method that is a conglomerate of expert analysis and cognitive walkthrough -LUT checklists. The proposed method proved to be accurate for this type of application interface evaluation, but the authors believe that its versatility makes it applicable to different types of websites. The method helped the experts to carry out the evaluation and made it more structured and consistent.
In the [12] the author described a number of methods for evaluating the quality of software interfaces. Based on the way the evaluation was carried out, he divided them into manual and automatic ones. Among the manual testing methods, the author listed and described, among others, eyetracking. Various methods of presenting test results obtained by eyetracking are described, such as fixation maps, heat maps, point-of-view videos, but it is possible to present and analyze in even more sophisticated ways. Another described manual method was to collect user feedback. The author claimed that with just 5 people, 80% of problems can be detected. In order to properly carry out user feedback collection, it is worth using supporting tools, such as Nielsen-Molich heuristics or LUT checklists based on them. The author described LUT checklists and the metric developed based on them -WUP (Web Usability Points), and showed how they work and how to use them correctly to improve the interface evaluation.

Materials and methods
The object of research consists of two websites. One of them is a popular advertising service -Gumtree. It allows users to advertise items they want to sell and then other users can view those announcements. Looking at the number of advertisements, you can see that a lot of people use this website, so it should be accessible for all of them. However, it is not properly adapted in terms of the universal design. A lot of service's views are unintuitive, because of the elements' arrangement. At some parts of the website, it can be seen that the contrast level is too low and additionally it cannot be adjusted to the user's preferences or needs. Another drawback is that the font size is also unchangeable. Content of this website is only available in one language -Polish, so it cannot be understood by people speaking other languages. Blind people or anyone who will try to use a screen reader for this website will also have problems with access to the content, because there are lacks of ARIA attributes in some important places. There are also images, links and buttons that do not have alternative texts, which would be really helpful while using an assistive technology.
To observe, how those issues affect the website's availability, there has been implemented the similar application to the Gumtree, but with some improvements. First, all the interfaces have been changed to increase the clarity of the whole website. All the views have been implemented using appropriate ARIA attributes and various alternative texts, so technologies like screen readers can be easily used with this service. Accessible websites should offer functions of customizing the interface, so the implemented application allows users to increase or decrease font size, enable the high contrast mode and switch the language of the content. Additionally, the application's color pallete was chosen in such a way that page elements meet requirements about contrast values between the foreground and the background.
Both websites have been analysed in terms of availability. To make this happen, there have been conducted a bunch of studies: Three separate methods have been used to make this research: eye-tracking, LUT checklists and WAVE Evaluation Tool, which check the compliance with the WCAG 2.0 rules.

Eye-tracking
Eye-tracking is a method of collecting data concerning the eye movement that can be used to perform statistical analyzes. It relies on device that records the video of the eye. It can be remote, stationary or mobile. Any type is used for slightly different purposes. Remote and stationary devices can record the person's behavior and actions on the computer screen. On the other hand, mobile ones make it possible to record the scene in front of the person. All type of eye-trackers use diodes emitting infrared light that reflects of the eye surface. The contrast between the pupil and the iris makes it possible to precisely detect the image of the pupil whose center is used with the reference points to mark places of looking at the screen [13]. Eye-tracker uses two main states of the eye: a fixation (which consist in stopping the eye's movement) and a saccade (consisting in moving the eyesight between fixations). Duration of each fixation also matters during the analysis [14].
The device used to the research was Gazepoint GP3 HD. Basic parameters of this eye-tracker are presented in the Table 1. To start the eye-tracking research, about twenty scenarios have been prepared, containing screen shots linked with precise instructions for participants of the analysis. Each task was about finding a specific element at the displayed picture. The eye-tracker was cooperating with the iMotions 9.0 platform for the analysis. It made it possible to create the presentation, including all the prepared scenarios and present it to participants.
There was a group of ten students between ages of 23 and 25 years old that took part in the eye-tracking analysis. Several participants were wearing glasses, but this fact was not considered during analysis. All of them claimed that they use the Internet every day, but they have never visited any of examined websites before. All participants were informed about how the experiment will look like and how they should behave during it. This study allowed to observe times of exercising prepared scenarios. It also allowed to receive images containing paths of participants' looking places and generate heatmaps presenting their areas of interest.
Eye-tracking study was also used for example by authors of [5,6,15]. All of described researches consisted of finding usability problems of some websites. The participants were asked to perform defined tasks included in experiment scenarios. All results have shown some usability problems that can be found on public websites, but none of described researches included a project paradigm aspect.

LUT checklists
There have been also prepared LUT checklists, which aimed to test the availability of both websites. It concerned five separate areas [12]: • navigation and structure; • messages, feedback, help for the user; • application interface; • text of subpages; • data input. Each area consisted of a few subareas to which there were assigned various questions that made it possible to evaluate website's usability and accessibility.
Those checklists were submitted by the same group of participants as for the eye-tracking analysis. They had to answer all questions by selecting number from 1 to 5. Meaning of every rating value has been presented in the Table 2. Table 2: Meaning of ratings [12] Rating Description 1 There were critical usability issues, preventing or discouraging the use of the website. 2 There were serious usability issues that could prevent most users from getting done things, they wanted to do. 3 There were minor usability issues that do not separately cause problems to most users, but their accumulation can affect the quality of the user's work. 4 There were single minor usability problems, that may reduce the quality of work with the website. 5 There were no usability issues or user performance issues.

WAVE Evaluation Tool
Publication [16] is really helpful while creating websites adapted to the widest possible audience [17]. There are some tools that support finding accessibility problems of website basing on guidelines included in this publication. An example of such technology that was used to the analysis is WAVE Evaluation Tool [4]. It allows to observe which WCAG 2.0 rules are not present at the website. For the research, most important information from WAVE Evaluation Tool was if there occurred errors at both websites and what type of errors they were, if there were problems with too low contrast and how many ARIA attributes there were in the code of each service. WAVE Evaluation Tool was also used for example by authors of paper [8]. Of course, there are a lot of different usability validators and the same exact article includes experiments with Achecker and SortSite programs too. Research with the use of Tenon and VoiceOver tools was described in article [9]. Both publications show some examples of the most popular usability problems based on experiments conducted with the use of various accessibility validators. However, all of examined websites had just one version, so the impact of universal design could not be verified.

LUT checklists
After the survey research, there has been calculated a WUP value for each checklist. It reflects the level of usability of the website and it is defined by formula 1 [12]: where: nanumber of question areas sinumber of question sub-areas of the j area qijnumber of questions inside the i area and the j subarea pijkrating of the k question inside the i area and the j sub-area The WUP value is in the range from 1 to 5, where higher value means better website's usability. The comparison of WUP values calculated for both examined services is presented in Figure 1. It shows two boxplots first referring to the Gumtree and second concerning the newly implemented website. It is clearly visible that for the authors' application, WUP values are at a higher level, which means that it received better ratings in surveys. For the Gumtree website, they range from 2.14 to 3.82. The competing app received 3.99 as the lowest value of the WUP, but it has been classified as an outlier. The lowest value calculated for the authors' application which is not an outlier is 4.41. The highest of them is 5, which is the highest possible value, meaning that the respondent considered all aspects of the application included in the survey as not causing usability problems. In the case of Gumtree, the median of WUP value is 2.99, while for the authors' applications it is at the level of 4.8. A clear advantage of the second one indicates a better user experience while using this website.

WAVE Evaluation Tool
As a result of the experiment using the digital accessibility validator there are presented two charts in Figure  2 and Figure 3. The first one contains a graphical comparison of both tested websites in terms of the total number of errors that may have a negative impact on accessibility, in particular for people with disability. The results show that significantly fewer problems were revealed for the application implemented by authorsa total of 9 errors, compared to 186 at the Gumtree website. The most common problems of the second one are: lack of text alternatives for images, very low contrast between the foreground and the background of elements and the shortage of labels assigned to form fields. Additionally, the content of many buttons and links consists only of graphics and almost every subpage does not have a properly defined document language. Figure 3 shows a graph which present a comparison of the ARIA attributes number found in the source codes of both examined webpages. It is worth mentioning that there are not such a number of ARIA attributes to ensure that the tested website is fully accessible, but the use of them directly affects the effectiveness of using the application with the support of assistive technologies. Because of that, it can be concluded that with the increase of the number of ARIA attributes, the level of website's availability increases too. In this aspect, the authors' application is much better adapted to the widest possible group of usersthere were identified 853 ARIA attributes in its source code and Gumtree contains only 241 of them.

Eye-tracking
The analysis of the results of the eye-tracking research can be divided into two parts: qualitative and quantitative. The quantitative results of experiments are presented in Figure 4 and Figure 5. The first one shows differences in average time of completing several tasks on two sites compared: Gumtree and the site created by authors. Second one shows average numbers of fixations made by users during completing tasks. These tasks were to find some elements of the interface e.g., first task was: "Find the classifieds search field".  The charts clearly show that any task on the Gumtree page is more difficult to complete than on the other page and in most cases the time difference is significant. Only in the case of the first task, the differences are slight. Screenshots used in research for this task are showed in figures 6 and 7. Additionally, the desired places are marked with red ellipses, and as you can see, search field is positioned in two differed places. In case of the Gumtree site, search field is located on the left side of the top bar. In case of the authors' site, this field is located under the top bar, on the right side above the filters, which as occurred, it may be unintuitive place for it. To understand what is wrong with the placement, you need to know where users expect the search box to be placed. In this case, scanning path and heat maps are helpful and can allow solving this issue. Examples of scanning paths are showed in Figure 8 and Figure 9. This path illustrates how a single user focused their eyesight.   Both figures show that users have found the desired object. The first user expected to see the search box in the top bar, but it did not stop him or her from finding it quickly. It took a little longer for the second user to find the search box and it looks like he or she was not sure if this was what he or she was looking for, which can be deduced from the large number of fixations in the vicinity of the searched object. However, to get more general conclusions, heat maps presented in figures 10 and 11 should be analyzed.
Both heat maps show that users are looking for the search box on the right side of the top bar. Moreover, they seem to check all the distinctive bars, which means that on the authors' website, the filter bar also attracts their attention. That means that the search bar should stand out more. Yellow color on category and localiza-tion selects, may suggest that search bar should be simpler, or that question should be more specific.  Results for the other tasks more significantly shows the influence of using the universal project design rules during designing the interface. Especially task 2 shows, how bad interface can affect on users experienceusers were on average over 4 times longer to search for a category on Gumtree site than on a page provided by the authors. The heat maps for this task are presented in figures 12 and 13. They show that presenting the user with too much information makes the page difficult to read. Although on authors' site the categories are presented in a more concise way, users did not check all categories as in the case of Gumtree and quickly found the right category. This suggests that big icons, associated with categories catch users' attention and allow them to quickly find what they are looking for.
The second part of the eye tracker examination is to check how small changes affect the time to find the desired objects. These changes include making the icons more readable, moving the buttons around, increasing the default font size, or turning on the high-contrast version. Results of that research are presented in Figure  14.
The chart shows that in each case the task on the alternative version of the interface took less time, but in half of the cases the difference is very small. Actions which really makes difference were: changing icon, turning on high-contrast version and increasing font size. The first task was to find the option to change the font size using buttons with two different icons responsible for it. In Figure 15 both icons are presented. The version of the icons at the bottom of this picture is easier for users to find.    In the task 4, alternative version of site was with high contrast, which makes users easier to find desired object, which was localization given by author of the announcement. Basic version of interface is shown in Figure 16, alternative version is in Figure 17.  This result may suggest that allowing the user to enable a high-contrast version of the page may help the user to use the page more productively. It could also mean that an original version might have problems with contrast or colors. Although, the heat map presented in Figure 18 shows that users still have some problems to find proper object, and probably highlighting the field containing the location, or changing its font size may solve this problem, but this is an issue for further consideration and requires further research.
In the task 6, the respondents were to find the option of displaying all advertisements of a given user on interfaces with different font sizes. The interface with bigger font size, and marked desired option is shown in Figure  19. The results of these studies show that minor changes to the interface can slightly improve the user experience, but giving users the ability to customize the page by changing the font size and allowing the choice of high-contrast versions makes a real difference to the usability of the page.

Conclusions and future works
In this paper there has been deeply analysed an impact of the universal design paradigm application to websites. There have been conducted a series of experiments in order to compare two similar applications in terms of usability. All results have shown that applying the principles of universal design implicates increased level of interface's usability. The research made it possible to confirm all the hyoptheses, which were as follows: • Designing a web application using the universal design rules increases the simplicity and intuitiveness of its use. • Designing a web application using the universal design rules increases its availability for users. • The possibility of adjusting the contrast and the font size has a positive effect on the effectiveness of using the website. Future work directions may for example include increasing the number of participants of the experiments, because there were only ten of them. This amount of research group should allow to find almost all of the occurring errors. However, bigger population would authenticate received results and perhaps reveal some other usability problems. The number of eye-tracking scenarios could possibly be increased too. It would allow to compare some different elements in terms of the impact of universal design principles.
There have been compared just two websites. Another future work directions may consist of analyzing more classifieds services. In order to make the whole research more complete, it can be considered to examine some other webpages from various life areas. Research like that could prove that the universal design principles have a positive impact for all applications' target users.