An important part of the project is to design and implement a user interface (UI) for the assisting tool. The UI is the “face” of the project and plays a vital part for its success. The UI defines the user experience. Good user experience can make people like the tool, while inadequate user experience can make people dislike and abandon the tool despite its other benefits.
This paper describes the key requirements to build a UI suitable for people with autism spectrum disorders, and presents the actual design of the assisting tool, developed under the FIRST project. It gives concrete recommendations about the best practices how to develop a UI for people with ASD, and what UI elements should be avoided.
Accessibility is designing products so that people with disabilities can use them. Accessibility makes user interfaces perceivable, operable, and understandable by people with a wide range of abilities, and people in a wide range of circumstances, environments, and conditions [4]. Accessibility of software applications has been a concern for many years. Despite that, accessibility is often overlooked by application developers, due to the extra costs and efforts involved in the development of accessible user interface [5,6]. Significant amount of research has been done in regard to accessibility, and there are many existing standards and guidelines for design and development of accessible applications.
It should be noted that these guidelines are mostly targeted towards users with visual and hearing, and even physical impairments. As autism encompasses a spectrum of symptoms that vary in severity among individuals, the software must be personalizable, enabling users to adapt documents to match their own reading and comprehension abilities. People with ASD may have no such impairments but still find it difficult to process visual information and use software applications efficiently. Therefore, these guidelines and standards, while giving a solid foundation to building an accessible UI, are not sufficient for creating good user experience for users with ASD. This paper presents an overview of methodologies, oriented towards the accessibility of information for people with ASD, which is then used to extract the key requirements for a successful UI.
2. Overview of Open Book
Open Book tool is a distributed software system for assisting people with ASD in reading documents. It employs various natural-language-processing (NLP) techniques to simplify documents and provide aids while reading. The tool is built using a distributed architecture that consolidates various NLP components and language resources be used into a single system.
A quick feature overview of Open Book tool will help comprehend better the user interface of the tool, presented later on in this paper. The tool is still under development and therefore the feature set is subject to change.
The primary features of Open Book are:
• Simplify text to improve reading comprehension using natural-language-processing technologies, which are out of the scope of the current paper.
• Present documents in an easy to read user interface.
• Rich personalization features: enable users quickly adapt the presentation of documents (font typeface, font size, line spacing, colors) to their preferences.
• Provide assistive tools: access to dictionaries and images.
• Personal library of documents for later access.
• Interaction with intermediaries and helpers.
3. Approach to Design
When designing an accessible interface, when possible, an accessibility specialist(s) should be included on your design team, either staff or consultant. Whether or not you have an accessibility specialist, it's helpful for all members of the design team to have some understanding of accessibility issues [7]. Further, feedback from actual users with special needs is also beneficial for the accessibility of the UI.
The design process of the UI for the reading assistive tool of the FIRST project involves bibliographical research of existing publications on the problems with users with ASD, and from users with ASD. Under the project, consultation with users with ASD has been conducted [8]. The feedback from the survey is taken into consideration while designing the UI.
4. Reading Comprehension
Text is a primary building component of UI. Text is used to annotate various interactive elements. It is also used to provide quick context-based assistive information, also known as hints to interactive elements. As mentionedabove, reading comprehension is one of the difficulties people with ASD experience. Complex UI with many text fragments will reduce usability. It is important to organize the textual UI elements in such a way, that they do not impose reading difficulties.
Many researches reveal that using visual cues (pictures and icons) to illustrate concepts improves reading comprehension.
Language comprehenders form a mental representation of the implied shape of objects mentioned in the text. In the present study, the influence of prior visual experience on subsequent reading was assessed. In two separate phases, participants saw a picture of an object and read a text about the object, suggesting the same or a different shape.
When the shapes in the two phases mismatched, ERPs during reading showed a larger N400 amplitude than when the shapes matched, suggesting that a picture presented incidentally 15 min earlier affected reading. These results further strengthen the case for the interaction of language and visual experience during language comprehension [9,10].
The UK Department of Health created a methodology for preparation of documents for people with learning disabilities [10]. The guiding principles of the methodology are:
• Rule 1: Each idea needs both words and pictures— both pictures and words are important.
• Rule 2: Pictures and words go next to each other— this helps more people to understand the information.
• Rule 3: Make sure that it is clear which pictures support which bits of text.
• Rule 4: Pictures must be easy to understand.
• Rule 5: Pictures should go on the left.
• Rule 6: Pictures can be drawings, photographs or other images.
• Rule 7: Make sure that pictures are as big as possible.
• Rule 8: Words must be easy to understand.
• Rule 9: If you use difficult words, say what they mean using easy words.
• Rule 10: Words go on the right.
• Rule 11: Words must be written clearly—a font like Arial is good.
• Rule 12: Words must be big—a font size of at least 14 point is good.
• Rule 13: Each sentence must be short as possible— more than 15 words are harder to read.
• Rule 14: Each document must be short—more than 20 pages are too long.
These rules possibly cater for people with greater reading difficulties (lower IQ) than people with high functioning autism [10]. Therefore, despite the fact that the methodology is directed towards text documents, but it can be successfully applied to UI design. This is confirmed by other studies [11,12].
Another methodology is created by Freyhoff, Hess, Kerr, Tronbacke and Van Der Veken in their “Make it Simple: European Guidelines for the Production of Easyto-Read Information for People with Learning Disability for authors, editors, information providers, translators and other interested persons” report [13]. This report forms part of a project to develop “Easy to Read Guidelines” for EU languages to ensure access to information by people with language disability.
The report defines additional recommendations on layout:
• Never use a picture as background for the text. This can make reading the text very difficult.
• Try to put one sentence on one line. If this is not possible, try to have separate clauses on separate lines or break the sentence into separate lines at the points where people would naturally pause.
• Keep sentences together on one page.
• Do not fill your page with too much information. The layout and text-flow should support the structure of the text. If the text introduces a new idea, consider beginning a new page. The text should flow logically and not leapfrog across the page or be continued several pages later.
• Use a maximum of two typefaces. You could use one typeface for the text and perhaps one other for the headings.
• Use clear typefaces. A clear typeface is preferred, for example Arial, Helvetica or Times New Roman.
• Use a large type-size. The size of the letters should not be too small. 14 points are the recommended minimum for people with visual impairments.
• Be careful about how you emphasize text. Do not use block capitals and italics in the text. Use bold text or underlining for emphasis.
• Make sure the illustrations are in a sharp focus. Observe the quality of photographs in the printed version. If you use a photocopier to reproduce the publication, the setting copy should be printed in halftone.
• Never use inverted printing (light text on a dark background). Dark print on light paper is easiest to read.
• Use colors for pictures, boxes, etc. if possible.
• Use headings and other “navigational aids”.
• For dates use the full format “Saturday, 26 September 1998”.
• Telephone numbers should be separated: 034-22.33.44 or 034-22 33 44
• Always use the numeral and not the equivalent word - even for numbers below 10. For example 3, 67, 239.
• Never use roman numerals.
• Do not justify the text on the right hand side. A ragged right edge makes a column of text easier to read.
• Do not hyphenate long words at the right margin of the text. Keep words together.
5. Using Multimedia
The reading comprehension problems can temp application developers and UI designers to rely heavily on multimedia elements to replace the text-based information. Recommendations to use pictures along with text are further imposing such trends [12,14]. However, it should be noted that rich multimedia interface can result in poor user experience, too.
A study in 2008 [15] was carried out with 10 ASD boys, aged 12 years, and 10 neuro-typical children (8 boys, 2 girls, aged 9 years). Participants had poorer performance on richer multimedia interfaces. Users lacked the initiative to organizing multimodal sources of information. Alteration in the ability to contextualize, affected executive functions [16] and alteration in the disengagement of attention. Most notable difficulty was when facing “open” tasks where they had to imagine several alternative solutions. There was not a difference in performance between “cartoon” characters and “human”. Users learned via training when the interface was simple. Extra modalities that would stimulate typical children may seem confusing for ASD. There has to be a very clear causal link between an action and its effect [15].
6. Personalization
Personalization is a key element for the successful user experience for people with ASD, because they have very different personal preferences and needs [17]. The research described in this paper investigates the inclusion of people with ASD in participatory design of user interfaces. It notes that people with ASD can benefit from this as it enables them to directly ensure that the interface is personalized to their individual needs. It has the advantage that intermediaries do not serve as proxies for end users, but end users themselves have direct input in the design process.
Importance of personalization is confirmed by the study of Stern and Shalev in 2012 [18]. Two groups of adolescents (participants with ADHD and normal controls) were assessed and compared in four different conditions (standard printed, spaced printed, standard on computer screen, spaced on computer screen). In addition, participants completed a visual sustained attention task. The study aimed at investigating the relation between sustained attention and reading comprehension among adolescents with and without ADHD. Another goal was to examine the impact of two manipulations of the text on the efficiency of reading comprehension: Spacing (standardvs. double-spacing) and Type of presentation (computer screen vs. hand copy). Reading comprehension of two groups of adolescents (participants with ADHD and normal controls) was assessed and compared in four different conditions (standard printed, spaced printed, standard on computer screen, spaced on computer screen). In addition, participants completed a visual sustained attention task.
Significant differences in reading comprehension and in sustained attention were obtained between the two groups. Also, a significant correlation was obtained between sustained attention and reading comprehension. Moreover, a significant interaction was revealed between presentation-type, spacing and level of sustained attention on reading comprehension [18].
7. UI Design Recommendations for People with ASD
UI design recommendations follow the guidelines set forth by the World Wide Web Consortium (W3C) through the Web Accessibility Initiative (WAI) to improve web access to people with disabilities by means of the concept of “inclusive design”. These recommendations aim to improve accessibility (which develops the efficacy of the tool) and usability (which increases its efficiency) and establish the ideal interaction and interdependence between the different components of the web development (i.e. content, web browser, assistive technology, user, developer, authoring tools and evaluation tools).
The findings described in this paper enable us define the following requirements for UI for people with ASD:
7.1. Presentation
wang#title3_4:spwang#title3_4:sp• Do:
• Use contrast between font and background.
• Use soft, mild colors.
• Make sure text box is clearly separated from the rest.
• Present text in a single column.
• Use simple graphics.
• Use clear, sans-serif fonts.
wang#title3_4:sp• Do not:
• Do not use bright colors.
• Do not user background images.
• Do not overlap transparent images and text.
• Do not use pop-up elements and distractions.
• No element should stand out too much.
• Do not have horizontal scrolling.
7.2. Navigation and Page Loading
wang#title3_4:spwang#title3_4:sp• Do:
• Strive for simple, clear navigation.
• Indicate on each page clearly where the user is.
• Support navigation with mouse or keyboard.
• Allow the use of browser’s buttons.
• Pages should load fast.
• Use visual indicators for time-consuming actions.
• Have a Help button.
• Do not:
• Use complex menus.
7.3. Interaction
wang#title3_4:spwang#title3_4:sp• Do:
• Design for simplicity and few elements on screen.
• Try to have one toolbar.
• Use clear, large buttons with both icons and text.
• Give short instructions of use at every step [19,20].
wang#title3_4:sp• Do not:
• Avoid cluttered interface [19].
• Do not use many-colored icons.
• Avoid buttons with icons only, except for the most popular actions. For example, “back”.
7.4. Personalization
Allow personalization of:
• Font type and size.
• Line-spacing.
• Themes for text background and foreground colors.
8. Design Implementation
Based on the defined requirements and recommendations, the UI of Open Book has been designed and developed. The collected guidelines and requirements impacted both the user interface, and the functionality of Open Book. For example, the personalization requirements dictated the respective features of Open Book.
The primary activities of users in Open Book can be summarized the use-case diagram, as shown on Figure 1.
In this paper I illustrate the design with the following pages:
• Simplify text.
• Document Library.
• Read document.
The screens on Figures 2 and 3 illustrate the concepts of clear interface with mild colors, and no distraction elements. The contrast is good, and there are no bright colors. Image elements are small, and unobtrusive. Command buttons stand out clearly from the other elements.
Figure 4 demonstrates several of the discussed design concepts. There is a single toolbar with buttons labelled by a combination of images (icons) and text to label command buttons. Again, icons are simple and do not use bright colors. Users can the option to switch between the original text and the simplified text. This is achieved using tabs to ensure single-column text layout. Text is justified and wrapped to avoid horizontal scroll.
Finally, in order to make the tool accessible via multiple platforms, the front-end of Open Book is developed
Figure 1. Use-case diagram for Open Book.
as a web-based application. That defines the technical requirements:
• HTML5.
• CSS3 and Media Queries for responsible design.
• JavaScript.
9. Conclusions
This paper outlines the reading-comprehension difficulties for people with ASD and the presentation methods which can be used to overcome these difficulties.
Based on the findings, it makes specific recommendations on how to design UI for people with ASD by listing good and improper practices. Further, it describes how the user interface for Open Book, a reading assistive distributed tool, is designed and implemented.
Preliminary demonstrations to clinical specialists and people with ASD have caused positive feedback on the design. In the third year of the FIRST project the UI will be extensively tested with approximately 300 hundred users with ASD.
It must be noted that the UI-design paradigms, presented in this paper, are not limited to people with ASD or people with other reading comprehension difficulties. They can be used to improve the accessibility of general-purpose graphic user interfaces as well.
Figure 2. Enter text for simplification.
Figure 4. Read and personalize document.
Acknowledgements
The project leading to this research product is partially funded by the European Commission under the Seventh Framework Programme (FP7-2007-2013) for Research and Technological Development under grant agreement № 287607. This paper reflects the views only of the authors, and the Commission cannot be held responsible for any use which may be made of the information contained therein.
I would like thank all the partners from the consortium of the FIRST project, and especially the clinical partners from Deletrea, Spain for their extensive research, and Parallel World, Bulgaria for their invaluable contributions during the implementation of the user interface.