Abstract
This paper presents an accessible platform for the automatic creation of icons through a simple (web) form. The platform allows the creation of personalized icons that can be used as a navigation or search option in web context replacing the usual text keyword metaphor. With the development of this platform we aimed to provide a simpler automatic method of icon creation, allowing users to personalize their icons and share them with others. The icons created are stored in a database that can be used in different Web or digital contexts. As a proof of concept, the platform was integrated with an existing Web application for video searching in the YouTube platform through icons hyperlinks: SAMi [1]. The resulting integrated platform was assessed for usability (user tests) and accessibility (with an automatic assess tool). The results showed the interface is accessible to a group of people with intellectual disabilities, increasing their performance, satisfaction, motivation and autonomy.
Keywords
You have full access to this open access chapter, Download conference paper PDF
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).
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).
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.
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:
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).
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.
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.
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.
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/
References
Rocha, T., Paredes, H., Barroso, J., Bessa, M.: SAMi: an accessible Web application solution for video search for people with intellectual disabilities (2016)
Rocha, T.: Interaction metaphor for access to digital information an autonomous form for people with intellectual disabilities. Ph.D. thesis. University of Trás-os-Montes e Alto Douro, Vila Real (2014)
American Psychological Association (APA): DSM-V- The Diagnostic and Statistical Manual of Mental Disorders - 5th ed. (2013) http://www.dsm5.org/Pages/Default.aspx
Rocha, T.: Accessibility and usability for people with intellectual disabilities. Master thesis. University of Trás-os-Montes and Alto Douro (2009)
Rocha, T., Bessa, M., Gonçalves, M., Cabral, L., Godinho, F., Peres, E., Reis, M., Magalhães, L., Chalmers, A.: The recognition of web pages’ hyperlinks by people with intellectual disabilities: an evaluation study. J. Appl. Res. Intellect. Disabil. 25(6), 542–552 (2012). doi:10.1111/j.1468-3148.2012.00700.x
Aumentative and Alternative Communication (AAC), Inclusive Technology. http://www.inclusive.co.uk/articles/alternative-and-augmentative-communication-aac-a280
Comunicar com símbolos. http://www.anditec.pt/index.php?option=com_virtuemart&view=productdetails&virtuemart_product_id=197&virtuemart_category_id=43
Speaking Dynamically Pro. http://www.mayer-johnson.com/boardmaker-with-speaking-dynamically-pro-v-6
Icon Flow. https://iconsflow.com/
Bell, L.: Web Accessibility: Designing for Dyslexia. IM 31020 (2009). http://lindseybell.com/documents/bell_dyslexia.pdf
Dix, A., Finlay, J., Abowd, G.D., Beale, R.: Human-Computer Interaction. 3rd edn. Pearson – Prentice Hall, Harlow (2004). pp. 775–776, ISBN: 0130-461091
Freeman, E., Clare, L., Savitch, N., Royan, L., Literhland, R., Lindsay, M.: Improving website accessibility for people with early-stage dementia: a preliminary investigation. Aging Ment. Health 9(5), 442–448 (2005)
Roh, S.: Designing accessible web-based instruction for all learners: perspectives of students with disabilities and web-based instructional personnel in higher education. Doctoral dissertation, Indiana University, USA (2004)
Small, J., Schallau, P., Brown, K., Ettinger, D., Blanchard, S., Krahn, G.: Web accessibility for people with cognitive disabilities. In: Resna Procedings (2004)
Zarin, R.: Mejla Pictogram 2.0. Institute of Design in Umea, Sweden and Swedish Institute for Special Needs Education (2009). http://216.46.8.72/tmp/v2/images/pictoCom/Final_report_Pictogram2.pdf
The British Dyslexia Association- BDA.: Dyslexia Style Guide (1972–2012). http://www.bdadyslexia.org.uk/
Aknowledgements
This work is funded by the 2015 Digital Inclusion and Literacy Prize - “Metáfora de interação acessível para navegação Web sem recurso a texto”, promoted by the Portuguese ICT and Society Network, granted by the Portuguese Foundation for Science and Technology (FCT).
Author information
Authors and Affiliations
Corresponding author
Editor information
Editors and Affiliations
Rights and permissions
Copyright information
© 2017 Springer International Publishing AG
About this paper
Cite this paper
Rocha, T., Pinheiro, P., Santos, J., Marques, A., Paredes, H., Barroso, J. (2017). MyAutoIconPlat: An Automatic Platform for Icons Creation. In: Antona, M., Stephanidis, C. (eds) Universal Access in Human–Computer Interaction. Design and Development Approaches and Methods. UAHCI 2017. Lecture Notes in Computer Science(), vol 10277. Springer, Cham. https://doi.org/10.1007/978-3-319-58706-6_34
Download citation
DOI: https://doi.org/10.1007/978-3-319-58706-6_34
Published:
Publisher Name: Springer, Cham
Print ISBN: 978-3-319-58705-9
Online ISBN: 978-3-319-58706-6
eBook Packages: Computer ScienceComputer Science (R0)