This paper describes the requirements for building accessible user interface for users with autism spectrum disorders (ASD) and presents the user interface (UI) of Open Book, a reading assistive tool for people with ASD. The requirements are extracted from both existing research on improving reading comprehension for people with ASD, and from the feedback of users and clinical professionals. The findings are applied in practice to create the user interface of Open Book tool. Key screens of the user interface are presented. It is implied that the features of the UI for people with ASD can be successfully applied to improving overall accessibility of any graphical user interface.
Computer technology and the Internet are already beginning to change the lives of many people with autism spectrum disorders (ASD). Computers can help compensate for verbal and interaction problems and facilitate exchanges between people with ASD, experts and others. They also enable new ways of communication, socializing, learning and employment options [
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 [
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.
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.
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 [
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 [
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 [
• 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 [
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 [
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.
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 [
Personalization is a key element for the successful user experience for people with ASD, because they have very different personal preferences and needs [
Importance of personalization is confirmed by the study of Stern and Shalev in 2012 [
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 [
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:
• 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.
• 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.
• 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.
• Use complex menus.
• 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].
• Avoid cluttered interface [
• Do not use many-colored icons.
• Avoid buttons with icons only, except for the most popular actions. For example, “back”.
Allow personalization of:
• Font type and size.
• Line-spacing.
• Themes for text background and foreground colors.
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
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.
Finally, in order to make the tool accessible via multiple platforms, the front-end of Open Book is developed
as a web-based application. That defines the technical requirements:
• HTML5.
• CSS3 and Media Queries for responsible design.
• JavaScript.
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.
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.