Keywords

1 Introduction

In previous studies, it is showed that icons hyperlinks were a usable metaphor for web navigation for people with intellectual disabilities [1, 2, 4], replacing text hyperlinks, the usual metaphor to access Web content. These findings were very important, since text limits the autonomous interaction for people with difficulties in reading and writing activities [2], to provide a solution for a more inclusive and autonomous interaction with Web content by this group of people. Therefore, to overcome the problem, in a previous study, it was presented an accessible Web application that uses icons instead of text to performed video search, called SAMi. SAMi works with the YouTube API and for this reason presents all YouTube videos on an alternative accessible interface [1]. However, SAMi provided limited number of icon hyperlinks for search. Specifically, users had seven general search categories and three advanced categories. Thus, to increase this number, a platform that automatically creates custom-made icons, is presented.

The icons are easily created, users only have to fill a form and choose the icon features, such as: image to represent the search category, form and background color. Afterwards, the icon is stored in the database platform. Moreover, we linked the database platform to the web application (SAMi) allowing users to create unlimited number of icons to perform a YouTube video search. All characteristics of the platform database, development, assessment and the integration with SAMi, are described in this paper.

The paper is structured as follow: in the second section, the background is presented; the third section we first provide a clear description on how SAMi was developed (design, implementation and user tests) then focus on the presentation of the platform where it is discussed its design, implementation and accessibility assessment; in the final section, are presented the conclusions and future work.

2 Background

People with disabilities have their Web interaction constrained because several tools and contents are created without any concern of accessibility or usability. When the focus is on the group of people with intellectual disabilities these constrains increased. A person with intellectual disability has a condition that affects cognitive functions and their development over time, leading to great learning difficulties, which is one of its most recognized characteristics [3]. Thus, writing and reading will be challenging activities for this group of people and can demotivate them to Web interaction. Furthermore, text is the most prominent metaphor for search and navigation on the Web. However, this kind of content limits the autonomous interaction for people with difficulties in reading and writing activities [2]. As a means of intervention to overcome the problem, several studies indicate that images are simpler to interpreter and motivates this specific group of people to autonomous interact with digital environments [1, 2, 4, 5]. In this context, it is believed that complex search or navigation solutions should be avoided when designing solutions for this group of people.

Normally, images have been used, in augmentative and alternative communication (AAC) tools, to represent words or concepts. Specifically, pictograms (Picture Communication Symbol - PCS) are used in several websites and applications to communicate [6], for example, in “Comunicar com Símbolos” [7] and “Speaking Dynamically Pro” [8]. Furthermore, there are some platforms that allow creating icons, such as the Icons Flow [9], where users can combine features, using images, colors and shapes that are pre-defined in the platform. These solutions are limited, users must create under a specific design line (i.e., they users can only create icons represent by drawing, not photography), limiting users choices. Also, they cannot use the icons created in other context, in real platforms, as hyperlinks for Web search or navigation propose.

Hence, the motivation increased to develop a platform, which consists on the creation of custom-made icons that can be used and reused, in real Web platforms or websites, facilitating the Web access to users with reading and writing difficulties and overcoming the necessity to use the traditional text query/keywords for navigation proposes.

The development of this platform aimed at expanding SAMi, allowing an unlimited number of video search on YouTube. For that, this research started to identify and analyze the requirements for icons creation (design oriented and accessibility features), aiming to produce icons that were clearly comprehend. Thus, providing a truly autonomous, satisfactory and valuable experience for users with reading and writing difficulties [1, 2, 4].

3 Platform for Automatic Icons Creation

For generating automatic icons, it was followed the development design process presented in SAMi’ Web application. Specifically, the design features tracked specifics representation, composition and size researches to study how to design accessible and usable icons for people with intellectual disabilities [2]. Thus, to present this process, we described SAMi’ application, next.

3.1 SAMi, an Accessible Web Application

SAMi worked with the YouTube API by displaying all YouTube videos on a simple interface to the user. The search started with one click button. Specifically, the search query was represented by the name of the icon (used as keyword), allowing an easy search, just by selecting the icons categories users wanted to search.

Concerning the navigation system, SAMi was designed to be consistent and straightforward, allowing to minimize the mouse manipulation (users only needed to use the left mouse button, without scrolling) and completely delete the keyboard use. Also, the navigation menu was clear and well defined so that users did not felt lost on the website, thus creating a unique navigation system, by adding visual and positional clues of navigation (breadcrumbs), as proposed in Bell’s research [10]. Therefore, the following navigational elements were integrated: a local hierarchical menu with general and advanced searches by icon categories; breadcrumbs, not only for users’ assistance (especially with dyslexia), as proposed in the work of [11], but also to work with screen readers; in addition, a button was added to make it easier to return to the home page. Furthermore, accessibility issues were ensured as the application allowed hyperlinks to be selected and activated by keyboard commands or left mouse button [12], and all navigation elements with the Tab and Enter keys. The mouse handling was facilitated since the interaction with the prototype simplified the use of this device, users only press one button [13,14,15].

Regarding the interface design, despite we target people with writing and reading we used universal design philosophy with audio help and alternative text, as described in the research of [16]. The colors choice was also very important [10]. Therefore, we intended to guarantee contrast between the background and the iconic hyperlinks elements as proposed by [14], avoiding the black text on white background as affirmed by [10]. Users could choose four main colors with their complementary: yellow (# EDEC90) and light yellow (# FFFFE5); pink (# FFCFC1) and light pink (# FFF1E8); blue (# BEE1F7) and light blue (# F2FAFE); green (# BDFFB5) and light green (# E8FFE5) (Fig. 1).

Fig. 1.
figure 1

SAMi´s color pallete. (Color figure online)

Full size image

Specifically, the icons categories were design using an object representation, a photography composition with a 72 * 72 pixels size for a good visibility, on an HD monitor. This Web application had seven main icons categories and three extra icons for advanced search. All icons contained alternative text for screen reader users.

In Fig. 2, we can observe SAMi’s main interface (Fig. 2).

Fig. 2.
figure 2

SAMi’s main page.

Full size image

SAMi’s interface was divided as follow: at the top, we can see a reserved space for the audio help, in the middle area, it is presented the icon categories to choose; at the bottom the audio can be turn on or off depending on the user’ choice.

In the following screens, it is presented the navigation menu, only with the user’ chosen icons; in the middle, a space was reserved to the search results presentation; and, at the bottom the audio help, the color choice and the MyAutoIconPlat (redirecting to the platform) icons were presented.

In this firs version, SAMi had seven general search categories and to increase capabilities of the prototype, we add a solution for advanced search, adding more three search categories for each general. In detail, for the general search, users could search for: games, music, movies, sports, cooking, sewing and animals’ videos (Fig. 2). Then, there were eight video results presented in each page, they can view more results by clicking the right or left arrow to return to the previous page (Fig. 3). When, the user chose a video, just clicked in the video area, it pops up and opens in another screen on a maximized window.

Fig. 3.
figure 3

SAMi’s videos interface. (Color figure online)

Full size image

3.2 Platform for Automatic Icons Creation: Design and Implementation

As SAMi is limited in the icon categories number, only seven icons for general search and three for advanced, it was necessary to present a tool that allows the creating of more icons, increasing the scope of the search. Therefore, we developed a platform which allows authenticated users to create icons by inserting an image and filling out a form with the image characteristics. The icon created is assessed by the platform administrator and if validated, the icon is used in SAMi’s interface and can be available for all users. This feature allows creating unlimited main and advanced categories for search that can be linked with other interfaces that can integrate icons for search or navigation functions.

The icon creation platform was developed in the PHP programming language and the development of the interfaces took into account accessibility issues as it was developed to be as intuitive as possible and user-friendly.

According to design, we developed the platform using the guidelines provide by other studies that were specified before, as SAMi’s interface was described.

Regarding interaction, users need to login or register in the platform, as it can be seen in Fig. 4:

Fig. 4.
figure 4

(i) Login page (ii) registration page.

Full size image

Specifically, in the first interaction, users need to register. The registration process is simple, it is only require a username, password and email, (ii) if they are a register user only need to login (username, password) (i).

After this step, users have access to all icons previous created (Fig. 5).

Fig. 5.
figure 5

User’ homepage

Full size image

A list with all icons created are presented. Furthermore, users can create a new icon by clicking in the MyAutoIconPlat icon. To simplify the creation process, users need to understand which information and elements to insert in the form, as presented in Fig. 6.

Fig. 6.
figure 6

Icon creation page. (Color figure online)

Full size image

Specifically, they need to describe all icon characteristics, such as: keyword, which will be the keyword added to the be in the search query; image, to be used to represent the search category, replacing the text type keyword; category, the main category that the icon could relate to (e.g., user add an icon to represent football, the main category would be SPORTS); icon type, if the icon to be create is a general category search or an advanced category search (e.g., if the icon is to represent Cristiano Ronaldo, it would be a normal icon, if would represent SPORTS it would be a category icon); alternative text, description text to be “read” by the screen reader technology; shape, stroke that delimited (circle or square) the area of the icon; and color, background color of the shape.

Once the icon is created, it can be submit. At this phase, the icon will be saved in a database, developed in MySQL, and after that the icon cannot be changed, users can only see its characteristics and status. Any change, if necessary, only can be made by the administrator.

After the icon creation, the administrator has to assess the accessibility of the icon. Specifically, the administrator need to login and validate the icons created, by verify all information fill in the form. For that, all icons are presented, as can be seen in Fig. 7.

Fig. 7.
figure 7

Administrator’ homepage (Color figure online)

Full size image

In the administrator interface, the page presents all icons, in a table. New icons, suspended icons and active icons created, need to be assessed and approve. If any form option, directly related to the accessibility or search issues (keyword, icon type, category and alternative text) was entered incorrectly, the administrator can correct it before validating the icon. However, the administrator cannot change design aspects regarding the user’ preference, such as: image, color and form of the icon. These features only can be changed by the creator.

In Fig. 8, it is presented the screen that presented the different icon status: icons to evaluate (new icons), suspended and active icons (Fig. 8). To facilitate the work of the administrator, these icons are divided into three tables, respectively.

Fig. 8.
figure 8

Icon assessment page

Full size image

Users can check the status of the icons, at any time, to see if they have already been under evaluation, suspended or validated.

After the administrator’ validation, the icon is presented in SAMi’s interface and can be use not only by the creator but by all users.

3.3 Preliminary System Assessment

After the creation of the platform it seemed important to perform a preliminary accessibility evaluation. This evaluation consists in the use of an automatic assessment tool, SortSite [17].

The results of the platform’ accessibility assessment showed some programming errors, such as: the use of specific tags, but they were all solved, during the development.

Moreover, Sami’s application was also assessed for usability with new icons created in the platform. For that, 20 participants with intellectual disabilities were invited to partake in this assessment. They were chosen by a psychologist, a special education teacher and an informatics teacher according to their digital abilities. The participants had the same level of computer and Web experience, as they had been part of a previous project of digital integration [1, 2, 4].

Regarding the assessment criteria, we followed the variables of usability evaluation (effectiveness, efficiency and satisfaction). Specifically, for effectiveness, we registered how many participants performed the tasks with success and without giving up. In efficiency, we registered resources spent to achieve effectiveness: time to perform the task, errors made during the interaction with the Web application and difficulties observed. To record satisfaction, we observed if the participants showed comfort when performing the tasks and if they asked to repeat the tasks. The assessment phase took approximately fifteen minutes per individual.

Participants were invited to perform four video search tasks. Results showed that: regarding effectiveness, we observed that all participant finished all tasks with success and no one drop out, on the contrary, when ending the task, they asked if could perform another video search. This indicates a direct link between effectiveness and satisfaction with the use of the prototype. In efficiency, we registered resources spent to achieve effectiveness: time to perform the task (average of 48 s in each task), errors and difficulties register were related to the mouse handling and not to the interface usage.

4 Conclusions and Future Work

SAMi’s application allied with MyAutoIconPlat allows a good Web interaction for people with intellectual disabilities as they can overcame the necessity of writing and reading abilities for search. This icon search approach has unequivocal results in the inclusion of groups already previously excluded because improved efficiency and effectiveness in performing search tasks and provides autonomy on the interaction with digital content.

Furthermore, the platform is operational and prepare to be tested with real users to assess usability (before the platform is online) but also to populate the database.

As future work, we intent to provide, as we defined as one of the most important issues of the icons creation, a solution that allows to, automatically, erase the background of the images chose by the users. At this point, only the images in.png format uses the color background chose by the user. So it is intended that any image format chose by the user, can be automatically edit. Also, we want to test with users such as: teachers, tutors or parents, not only in a play context but also in a learning context, registering user experience.

Given the positive impact as an effective solution to the inclusion and digital literacy, it is considered appropriate to extend the scope in order to make universal interfaces and increase the scope of the platform usage.

More information about SAMi and MyAutoIconPlat check at: http://sami.utad.pt/