We present an example of a responsive eBook developed in Brazil by the Open University of the Unified Health System with the Federal University of Maranhão. The design of your interface is based on the principles of educational interfaces and standards for Responsive WebDesign.
Abstract:
The creating educational content for mobile devices requires close attention to the technical aspects involved in educational interfaces. We present a mobile educational object developed in Brazil by the Open University of Brazilian National Health System with the Federal University of Maranhão (UNA-SUS/UFMA): the responsive eBook. The design of its interface is based on the principles of educational interfaces and on the standards for Responsive WebDesign. This paper presents an example of an ebook in the field of oral radiographic anatomy.
Introduction:
In the context of Distance Education mediated by the new ICT (Information and Communication Technologies), the creation of Learning Objects (LO) has become an important theme to be studied and discussed. LO can be understood as digital educational resources developed to assist educators in the elaboration of pedagogical strategies that favor students' learning in the digital environment (Braga, Pimentel and Dotta,2014).
When developing learning objects, especially if they are adapted for mobile devices, it is necessary to think carefully about the maintenance of the interface, considering the various possibilities of use. The design of the interface should be consistent with the goals set for learning and with the platforms for accessing those resources.
The objective of this article is to present a multimedia text book model adaptable to mobile devices through the application of the principles of Web Design Sensitivity (RWD), from the example of an ebook in oral radiographic anatomy. It is a model that was used in Brazil by the Open University of the National Health System (UNA-SUS), in partnership with the Federal University of Maranhão (UFMA). The institution works with Permanent Health Education through e-Learning, with an extensive production of diversified learning objects. This work seeks to contribute to the discussion about the development of resources of greater accessibility of e-Learning, through the exploration of mobile devices.
Development:
Ebook as a learning object and the principles of educational interfaces
Ebooks, or digital books, are learning objects capable of integrating texts and elements from electronic media, such as search tools, hyperlinks, multimedia and interactivity objects, etc (Vasileiou and Rowley, 2008; Rodrigues, Chimenti and Nogueira, 2014).
In Brazil, UNA-SUS/UFMA adopts the eBooks as the main source of presentation of contents in its courses. They are available in the Virtual Learning Environment (VLE) for students regularly enrolled in the institution, as well as on mobile device platforms such as the Google Store and the Apple Store. The design of eBooks interface must be aligned with appropriate pedagogical principles, considering its educational role. Content presentation, interaction among elements and the amount of information presented must be thoroughly planned. An attractive interface, with appropriate interaction strategies, has a positive effect on its usability, acceptance as well as on its potential for promoting learning. Some technical aspects that should not be neglected during the construction of a mobile educational interface (Reategui, Boff and Finco, 2010): use of images (the amount of images should be adequate to avoid overloading the pages of the educational resource), presentation of texts (they must have possibility of adaptation of the font size, visual comfort caused by the adequate contrast between fonts and backgrounds, alignment and positioning of texts, etc.), orientation and navigation (presence of elements that allow the user to identify their position in the material in relation to the whole, clarity in the presentation of the elements that need to be clicked, such as links and buttons, clarity and objectivity of the icons), interactivity (it is necessary to observe if there are more interaction elements besides links and navigation buttons, if it is possible to customize the experience with the LO somehow and if it offers results according to the user's actions) and aesthetics (to use appropriately the sizes, colors and quantities of the elements in the interface, as well as to ensure a consistent alignment of the items).
Mobile Learning and Responsive WebDesign
Finding ways to adapt web-based content to mobile devices is a key issue for most applications.Traditionally, in order to have a mobile version of a website, it was necessary to create several customized versions for the characteristics of each target device. Consequently, this demanded excessive costs and was time-consuming. (Bryant et al.2012).
Therefore, the most appropriate solution for proposing an educational object with a mobile web interface should allow pages to be idealized from the design step to be displayed properly through all possible access devices. For this, it is necessary the guidance given by the principles of Responsive Web Design, methodology that uses custom languages to construct pages in such a way that they become "responsive", that is, respond dynamically to changes related to browser screen size and to the type of access device, adapting its interfaces to a suitable visualization for each device.
This methodology is based on three principles related to the use of web development technologies: fluidlayout (the size of the page blocks are adjust so that no content is hidden behind horizontal scroll bars. This principle ensures that all content is displayed regardless of the screen resolution of the access device), flexible images and resources (images and other resources on the responsive web page must also be adaptable and flexible) and Media Queriesuse (it is possible to hide, make appear and reposition elements and interactions according to the current resolution that is being used when accessing the web pages).
Responsive eBookinterface
By adopting a responsive design in an educational object, it is necessary to think about the processes of adapting the elements to various devices so that the pedagogical principles of educational interfaces are maintained in the transition among different screen resolutions.
It is described below how the interface elements of the responsive eBook model presented were designed and implemented based on the technical principles of educational interfaces, as discussed above.
Orientation, Navigation, and Presentation of Texts and Visual Resources
The menu icons are composed of images without text that intuitively suggest their functions, to properly use space in various resolutions.
Fonts have an appropriate size regardless of the screen size, but there is also an accessibility button to increase or decrease the font size to the student's preference. Paragraphs and other visual elements are presented consistently and are fluid, increasing or decreasing their sizes according to the current resolution.
Fluid Images
In the construction of interoperable interfaces, it is important that the images have adequate visualization in all the platforms, since they are part of the educational content and were inserted for specific reasons (Barbosa, Roesler and Reategui, 2009).
Images in the eBook behave in different resolutions: the image is fluid, decreasing in size as the resolution decreases, but a minimum size limit is set for the image to reach, so that it is not too small and unrecognizable.
Interaction and Layout
Each device has different ways of interacting with a web page. There is a difference between the click of the mouse and the touch of the screen. Interaction on touch screens requires a touch area with a size suitable for the fingers of a human. Therefore, when resizing icons that represent some function of the educational object, a minimum size limit must be established so that the functionality can be accessed by touching the screen without any difficulties.
Book icons are sized appropriately at mobile resolutions. As for the layout of the book, the colors, sizes, alignments and quantities of the elements are arranged in an appropriate way, following the principles of the pedagogical interfaces.
Final considerations
This paper presented important requirements according to the principles of educational interfaces, regarding the use of Images, presentation of texts, orientation, navigation, interactivity, and layout of eBook-type learning objects. In addition, some key concepts of Responsive Web Design were presented.
The main point was the presentation of a responsive eBook model as a mobile educational object, developed by UNA-SUS / UFMA in the field of oral radiographic anatomy. Important features in the implementation of this eBook for mobile devices were presented in order to contribute with other researchers and developers of responsive web design. The proposed mobile web interface adapts content in a way that does not harm the student's experience, regardless of the screen resolution of his device.
References
Barbosa, M. L. K., Roesler, V., &Reategui, E. (2009). Uma proposta de modelo de interface interoperável para web, TV digital e dispositivos móveis. RENOTE, 7(1). Retrieved from: http://www.seer.ufrgs.br/renote/article/view/14028
Bryant, J., & Jones, M. (2012). Pro HTML5 performance. Apress.
Reategui, E., & Finco, M. D. (2010). Proposta de diretrizes para avaliação de objetos de aprendizagem considerando aspectos pedagógicos e técnicos. RENOTE, 8(3). Retrieved from: http://www.seer.ufrgs.br/renote/article/view/18066
Vassiliou, M., & Rowley, J. (2008). Progressing the definition of “e-book”. Library Hi Tech, 26(3), 355-368.
Braga, J., Pimentel, E., &Dotta, S. (2014). 1 Processos e Metodologias para o Desenvolvimento de Objetos de Aprendizagem. Objetos de Aprendizagem, 23. Santo André: Editora da UFABC, 2015.163 p.
Rodrigues,M.A.deS.,Chimenti,P.C.P.deS.,&Nogueira,R.R.(2014).Adoçãodeinovaçõesemmercadosem rede: uma análise da introdução do livro didático digital no Brasil. RAI Revista de Administração e Inovação, 11(4),159-192.