See discussions, stats, and author profiles for this publication at: https://www.researchgate.

net/publication/336929460

A mobile app for developing visual literacy on in-service teachers

Conference Paper · October 2019

DOI: 10.1145/3362789.3362947

CITATIONS READS
7 253

3 authors, including:

Catalina Huilcapi-Collantes Juan Pablo Hernández Ramos

Pontificia Universidad Católica del Ecuador Universidad de Salamanca
12 PUBLICATIONS   22 CITATIONS    64 PUBLICATIONS   189 CITATIONS   

SEE PROFILE SEE PROFILE

Some of the authors of this publication are also working on these related projects:

Proyecto en el marco de la Estancia UNESCO/ICDE 2019 Movimiento educativo abierto para América Latina: SOStenibles View project

All content following this page was uploaded by Catalina Huilcapi-Collantes on 08 May 2020.

The user has requested enhancement of the downloaded file.

 A mobile app for developing visual literacy on in-service
teachers.
Catalina Huilcapi-Collantes Azucena Hernández Martín Juan Pablo Hernández
Pontifical Catholic University of University of Salamanca, Spain Ramos
Ecuador azuher@usal.es University of Salamanca, Spain
cahuilcapi@puce.edu.ec juanpablo@usal.es

ABSTRACT (León, Spain, October 16-18, 2019), ACM, New York, NY, USA, 6 pages.
https://doi.org/10.1145/3362789.3362947
Visual is a mobile app that promotes Visual Literacy (VL) and it
was created as a resource for a VL training course for in-service
teachers. The VL course performs through blended learning 1. Introduction
approach and Visual app allows users to experience learning-on-
Teachers are involved in countless activities every day, both
the-move [10] and ubiquitous learning thanks to affordances of
inside and outside the school. Their busy schedules leave them
mobile technology.
little time for training as much as information society requires.
The Visual app presents its content in six short units, which are Here, mobile technology stands as a potential way to support
related to the VL course content. Each unit has ten activities, for teacher’s professional development, because its features as
teachers to do them. Performing activities helps teachers to ubiquity and permanent evolving process, allows them to access
improve the understanding about the course topics. Each activity digital learning content anytime and everywhere. Indeed, through
shows immediate feedback to users by evaluating if the response mobile devices teachers can access a large amount of updated
was correct or incorrect. educational content and tools for their own training and teaching.
All of this is possible across different contexts because mobile
Visual app was designed based on user-centered design technology is absolute affordable in digital age and many teachers
methodology. This project aims to achieve an effective integration own a mobile device [15]. Hence, mobile technology can solve
of mobile technology into the teaching-learning process for in- some specific in-service teacher’s training needs, as becoming
service teachers training in VL. visual literate, which helps them to become well-qualified
teachers, key factor in students success [14].
CCS CONCEPTS VL training initiative for in-service teachers pretends to
increase education quality. The fastest track to better education is
• Human-centered computing~User interface design
better teachers [15], so they must know how to communicate
• Applied computing~Interactive learning environments through the different languages and media that people use in
digital era, as visual language. Here, visual literacy is perceived as
KEYWORDS the most crucial literacy for 21st century education [7] because we
live in a visual world [16] and all of us are image users that create
Visual literacy, mobile learning, mobile technology, educational
and actively contribute to visual communication [8]. Besides,
apps, teacher training, mobile apps, user interface design.
visual aids are widely used in classrooms and teaching materials
ACM Reference format: [16] in synchronous or asynchronous classes because they are a
strong learning enhancers [1]. Thus, the visual literacy course
Catalina Huilcapi-Collantes, Azucena Hernández Martín and Juan Pablo
Hernández Ramos. 2019. A mobile app for developing visual literacy on
proposal aims to help teachers to improve their communication
in-service teachers. . In Proceedings of the Seventh International Conference skills through visual language.
on Technological Ecosystems for Enhancing Multiculturality (TEEM 2019) In order to fit the visual literacy course with teacher schedules,
the course was designed under blended learning approach. Visual
Permission to make digital or hard copies of all or part of this work for personal or
classroom use is granted without fee provided that copies are not made or app is a specific resource for asynchronous learning that takes
distributed for profit or commercial advantage and that copies bear this notice and place after face-to-face class. By doing the app activities, teachers
the full citation on the first page. Copyrights for components of this work owned
by others than ACM must be honored. Abstracting with credit is permitted. To
can improve the understanding of visual literacy topics, which are
copy otherwise, or republish, to post on servers or to redistribute to lists, requires based on graphic design principles.
prior specific permission and/or a fee. Request permissions from VL course was designed following RASE pedagogical model, a
Permissions@acm.org.
TEEM'19, October 16–18, 2019, León, Spain student-centered learning approach that enables the integration
© 2019 Association for Computing Machinery. of educational technologies[3, 4]. Hence, Visual App should be
ACM ISBN 978-1-4503-7191-9/19/10...$15.00
https://doi.org/10.1145/3362789.3362947
designed by a related concept as User-Centered Design (UCD)
that, as a methodology, philosophy and an approach of design,
 TEEM 2019, October, 2019, León, Spain C. Huilcapi-Collantes et al.

places the user as the design process core. As a result, UCD

process allowed us to get to know teacher’s needs, their context
and features like future users of this educational app.
It is important to note that when we refer to students and 2.2 User research
users, we are talking about in-service teachers, because they are The next step on previous research was to interview in-service
our participants. teachers that was made by following guidelines for user
experience research [13]. This user’s interview was crucial at the
beginning of the design process because at this phase we defined
2. Design process app functionalities based on user mental models [17]. The
In order to follow UCD methodology, Visual app design process interview helped to refine the ideas about app design [11]. Five in-
began with previous research that helps to make the app design service teachers were interviewed. They are the future users of
effective. It includes two aspects: analysis of educational inspiring Visual app. Through the interview method, we explored opinions,
mobile apps and user research. Through this research, it is easier motivations, interests, difficulties, frustrations and aspirations of
to identify app functionalities, and it helps to know and define the teachers regarding VL and mobile learning.
user, and the app usage way across different scenarios. Interviewees work on private and public institutions in two
countries, and they work at elementary school, high school,
university and a training center. Interviewee’s age is between 30
2.1 Analysis of educational inspiring mobile and 52 and all of them use ICT in their teaching activity. They
apps have an own mobile device, internet connection at home and
Four mobile apps were analyzed, each one seeks for users to work, and most of them pay a data plan to stay connected all time.
achieve different goals, which are related to some specific 2.2.1. Interview objectives:
learning. To illustrate, the first app teaches users how to code, the 1. Determinates teacher’s predisposition to learn by using a
second helps users to achieve some level of knowledge in any mobile educational app.
language, the third allows users to play while learning, and the 2. Investigates if teachers show some interest and knowledge
last one offers users to exercise the brain by doing some about visual literacy.
intellectual activities. Inspiring mobile app analysis focuses on 3. Identify the problems that teachers face when preparing
kinds of activities, common icons, steps to perform each task, teaching materials due to the lack of visual literacy.
activities and tasks duration, standard interface elements and After the interviews, the results revealed that teachers: (a) are
feedback screens. This analysis was essential because on app prone to use technology with educational purposes, (b) are aware
market, there were no apps for visual literacy or related, so it was of their lack visual literacy and would like to learn and improve
not possible to study a specific app for this purpose. it, and (c) admit that visual literacy influences on teaching work.
As a result, inspiring mobile apps analysis helps us to make a Indeed, we learned that teachers already have specific needs on
features list to design Visual app: VL and mobile learning subjects, which they have identified along
• Common activities: the most common is select and identify their teaching work.
the correct answer to respond a question. It could be from a Additionally, the interview uncovered some ideas for Visual
multiple-choice list. The interface must display only one app:
activity per screen. • Visual app should help clarify visual literacy definition.
• Steps to perform activities: (a) select activities module, (b) • Visual app should help teachers to expand their criteria when
after displaying activities, identify and select pretended choosing visuals for developing instructional material.
correct answer, (c) verify answer by touching bottom, (d) • Visual app should have content and activities that tackle
display feedback screen where there are: next bottom, try composition and visual elements.
again bottom or restore bottom. • Visual app activities should be evaluated immediately so that
• Toolbar essentials: learn icon, profile icon (my achievements, teachers receive feedback and understand associated
my score). concepts.
• Common amount of activities per learning module: ten • Visual app must help teachers to improve and develop skills
• Duration of ten activities: 2 minutes by answering correct all to create visual material.
of them. Finally, the interview helped to empathize [13] with users, so
• Common interface features and elements: (a) content list to it was easier to build user profiles and describe the scenarios in
learn or practice, (b) progress bar on each activity, (c) which they would use Visual app.
progress section to show score, challenges and achievements. 2.2.2. User profiles
(d) Exit, close or pause bottom or icon, (e) colorful and flat Define users or create personas [6] is important because it gives
design, (f) profile section and settings icon, (g) common icons a clear and deep image about who the user is, based on previous
that users already know, and (h) simple toolbar with three or research. Also, user profiles help to make decisions about design
four icons. and functionalities. In this case, the interview disclosed details
about their training, lifestyle, interests, values, attitudes and

2
 A mobile app for developing visual literacy on in-service
TEEM 2019, October, 2019, León, Spain
teachers.

behavior patterns. The following description illustrates one of Users stories App functionalities
them, a male Hispanic in-service teacher.
“As a user I want to know how Easy to understand icons and
to use the interface simple, intuitive and familiar
immediately because I don’t interface.
want to spend time learning
how to use it.”

“As a user I want to stop Do not incorporate a

doing activities and not to countdown counter in
lose them because I use apps activities.
when I am waiting for
something or someone”.

“As a user I want to get Activities must be evaluated

immediately feedback to immediately and show a
my responses”. feedback.

Once the detail research finished, a flowchart was created to

structure the app content and visualize the steps in the process.

3. Flowchart
Figure 1: Example of user profile. The flowchart shows the main elements, actions and the flow
between sections and screens. See Figure 2.
2.2.3. Define scenarios
Scenarios describes fictitious situations where users are using
Visual app. These are useful to describe the context in which
teachers will do the activities. The following scenario example
relates to the previous profile.
Victor is on the bus, and he is going to work. It is going to take 30
minutes to arrive at high school, so he decides to use Visual app to
review the contents of VL course. Victor is standing inside the bus for
over 15 minutes and then he sits down. When he has to get off the
bus, Victor needs to stop the activity that he was doing in the app.
It is possible to describe several scenarios that help to write
user stories before starting the design.
2.2.4. Users Stories
User stories describe something that users want to accomplish
by using the app [18] and are necessary to decide how to design
each app screen and each element on it. For example:

Figure 2: Flowchart of Visual app

Visual app will have six main topics, which relate with all
topics that users will learn on face-on-face classes during VL
course: Typography, Composition, Type Contrast, Technical
affairs, Meaning and Rhetoric. Each unit or module have ten
activities to do sequentially. Users can do all ten activities without

3
 TEEM 2019, October, 2019, León, Spain C. Huilcapi-Collantes et al.

stopping, or they can stop any activity if they want or need to. 5. Proposal design
The toolbar will have three tools: LEARN that displays the six
Visual app wants to promote VL on in-service teachers by doing
topics, PROFILE where users can see correct, incorrect and undone
learning activities. It encourages them to continue doing each
activities, and CHECK where people can find the mistaken
activity through icons and friendly textual expressions. It helps to
activities of all topics to do again.
create a pleasant and close user experience. Visual app is displayed
only on portrait format because it is easier to use with a single-
4. Wireframe hand and while the user is moving. Moreover, portrait format is
accessible and comfortable to thumb zone and facilitates multi-
Based on flowchart, the wireframe was created, which is a bare- finger tap. All the screens below display details of Visual app
bones depiction of all the components of Visual app screens and prototype for iOS smartphone, specifically iPhone 6.
how they fit together[6]. Wireframe and previous flowchart show
an example of one activity and its flow. Visual app will have 60
activities, so the flow will be the same for all of them. See Figure
3.

Figure 4: LEARN screen of Visual app

LEARN is the main screen after register. It displays

Typography, Composition, Type Contrast, Technical affairs,
Meaning and Rhetoric icons, see Figure 4. When a teacher selects
one topic icon, it shows a starting module screen. A short text
explains what the module is about and it shows a start bottom. See
Figure 5.

Figure 3: Wireframe of Visual app

.

Figure 5: Typography and Technical Affair starting module

screen.

4
 A mobile app for developing visual literacy on in-service
TEEM 2019, October, 2019, León, Spain
teachers.

The first screen of each activity shows the question, the which is the standard color to indicate a wrong answer. See Figure
answer options and the button to verify. On the top of the screen, 7 (right).
a number bar indicates in violet the activity that a teacher is
performing. Number bar activities in green indicate correct
activities and red indicate the mistaken ones. Next to this bar is
the icon to quit. See Figure 6.

Figure 8: PROFILE screen.

PROFILE screen displays the teacher’s progress on each

module, correct, incorrect and undone activities. This screen
Figure 6: Example of an activity screen. allows teachers to access any module and start it again. In
addition, here users can edit their profile. See Figure 8 (left). A
When teachers verify an activity, the feedback screen displays medal of honor appears where all the activities have been
immediately. The correct answer screen shows a motivating completed. See figure 8 (right).
phrase or word that encourages the user to continue. It also shows
a smiley face icon to provide a familiar and close experience. See
Figure 7 (left). Feedback screen also shows the teacher
achievements. The screen is green because this color was detected
as the standard to identify a successful response.

Figure 9: CHECK screen.

CHECK screen shows all activities performed incorrectly. All

Figure 7: Feedback screens. of them are saved here so that the user can perform them again at
any time. See Figure 9.
The incorrect feedback screen shows a phrase that suggests Toolbar is displayed on LEARN, PROFILE and CHECK screens.
teachers to re-think their answer. It also displays a feedback text
and user achievements. The icon is a sad face and the color is red,

5
 TEEM 2019, October, 2019, León, Spain C. Huilcapi-Collantes et al.

6. Future work such well-designed apps that users inevitably will compare. Also,
aesthetics motivate learners to persist and engage in web-based
It is essential to make a pedagogical usability evaluation and an
learning, so it is increasingly important that educators consider
user interface evaluation of Visual app with CECAM, by its initials
aesthetic qualities when developing course materials [5].
in Spanish, that means questionnaire to evaluate the quality of m-
Finally, it is necessary that teachers themselves are trained
Learning apps [9]. Education and Designers experts must do the
with mobile technology, so they can experience mobile learning
evaluation. It will help to improve the app.
from their own context and this encourages them to incorporate
Also, usability testing by users is mandatory. Although five
this technology into their own classes.
users tested the app interface during the design process, it is
necessary to test the prototype to identify flaws and remedy them
[12]. ACKNOWLEDGMENTS
Furthermore, it would be a valuable contribution to translate Thanks to teachers who tested the app and participated in the
the Visual app into English, so more people can use it. interview.
Additionally, it will be a challenge to make Visual app an
autonomous tool to promote VL. It could be a long-term goal. REFERENCES
Finally, a mobile app developer must do the implementation in [1] Aisami, R.S. 2015. Learning Styles and Visual Literacy for Learning and
Performance. Procedia - Social and Behavioral Sciences. 176, (Feb. 2015), 538–
order to keep fidelity with Visual app prototype. Thus, teachers 545. DOI:https://doi.org/10.1016/j.sbspro.2015.01.508.
will be able to download Visual app from Android market or they [2] Brumberger, E. 2019. Past, present, future: mapping the research in visual
literacy. Journal of Visual Literacy. (Feb. 2019), 1–16.
can load the app as mobile web on iPhone smartphones and DOI:https://doi.org/10.1080/1051144X.2019.1575043.
others. [3] Churchill, D. et al. 2016. Framework for Designing Mobile Learning
Environments. Mobile Learning Design: Theories and Application. D. Churchill
et al., eds. Springer Singapore. 3–25.
[4] Churchill, D. et al. 2013. Learning design for science education in the 21st
7. Conclusion century. Zbornik Instituta za pedagoska istrazivanja. 45, 2 (2013), 404–421.
DOI:https://doi.org/10.2298/ZIPI1302404C.
This project aims to achieve that in-service teachers will get a [5] David, A. and Glore, P. 2010. The Impact of Design and Aesthetics on Usability,
better understanding of VL course contents, by doing Visual app Credibility, and Learning in an Online Environment. Online Journal of
Distance Learning Administration. 13, 4 (2010).
activities. It is clear that, the best way to teach visual literacy [6] Garrett, J.J. 2011. Elements of User Experience.The: User-Centered Design for the
requires to analyze the context and learners [2]. Therefore, user Web and Beyond. Pearson Education.
[7] Kędra, J. 2018. What does it mean to be visually literate? Examination of visual
research was fundamental, since it has helped to understand their literacy definitions in a context of higher education. Journal of Visual Literacy.
insights and it has given useful recommendations when designing 37, 2 (Apr. 2018), 67–84. DOI:https://doi.org/10.1080/1051144X.2018.1492234.
the app: content and interface. [8] Matusiak, K. et al. 2019. Visual Literacy in Practice: Use of Images in Students’
Academic Work. College & Research Libraries. 80, 1 (2019), 123–139.
In this project, teachers are users and learners, so they have [9] Navarro Cota, C.X. 2016. Framework para evaluar la usabilidad sistemas M-
been treated as the center of each process, and there has been Learning: un enfoque tecnológico y pedagógico.
[10] Pegrum, M. 2016. Future Directions in Mobile Learning. Mobile Learning
nothing assumed about them. They were heard and there was an Design. D. Churchill et al., eds. Springer Singapore.
effort to create an app useful to their needs and their context. [11] Portigal, S. 2013. Interviewing Users: How to Uncover Compelling Insights.
These is what the user-centered design approach is about, which Rosenfeld Media, LLC.
[12] Rubin, J. and Chisnell, D. 2008. Handbook of usability testing. How to plan,
reveals a relationship with student-centered learning. Design, and Conduct Effective Test. Wiley Publishing, Inc.
On the other hand, it has been necessary to demonstrate that [13] Travers, A. 2013. Interviewing for research. A pocket guide to design research.
Five Simple Steps.
design educational apps is a process that must be well planned in [14] UNESCO 2012. Aprendizaje móvil para docentes. Temas globales. UNESCO.
order to get a well-designed result. In fact, a team of teachers, [15] UNESCO 2017. Supporting teachers with mobile technology: lessons drawn from
designers, developers and users should develop educational apps UNESCO projects in Mexico, Nigeria, Senegal and Pakistan. UNESCO.
[16] Yeh, H.-T. and Cheng, Y.-C. 2010. The influence of the instruction of visual
because mobile learning environments must display a good design principles on improving pre-service teachers’ visual literacy.
interface, simple and familiar to learners. The user cannot spend Computers & Education. 54, 1 (Jan. 2010), 244–252.
DOI:https://doi.org/10.1016/j.compedu.2009.08.008.
time learning how to use the app instead of learning with the app. [17] Young, I. 2008. Mental Models. Aligning Design Strategy with Human Behavior.
Educational apps must also display a high aesthetic level in Rosenfeld Media, LLC.
[18] User Stories: A Foundation for UI Design | UX Booth.
order for users to like using them and the experience to be
pleasurable. It is important to remember that app markets have

View publication stats