Content uploaded by Douglas Menegazzi
Author content
All content in this area was uploaded by Douglas Menegazzi on Apr 21, 2020
Content may be subject to copyright.
Rethinking the Design of Hotspots in Children’s Digital
Picturebooks: Insights from an Exploratory Study
Douglas Menegazzi1, Cristina Sylla2 and Stephania Padovani3
1 Federal University of Santa Catarina, Florianópolis, Brazil
douglas.menegazzi@ufsc.br
2 University of Minho, Braga, Portugal
cristina.sylla@ie.uminho.pt
2 Federal Univeristy of Paraná, Curitiba, Brazil
stephania.padovani@gmail.com
Abstract. Finding the correct hotspots when interacting with digital picture-
books is oft challenging for children. Here, we present an exploratory study car-
ried out with a group of third graders to inform the design of hotspot icons for a
children’s digital picturebook. Based on a selection and analysis of the most
commonly used icons in digital picturebooks, especially apps, we created a low
fidelity paper prototype to investigate children’s preferences and understanding
of the interactive navigation areas, configuration and menus. For this, we invit-
ed the children to draw new icons for each hotspot. Based on the analysis of the
results we designed a proposal of icons that were implemented in a digital pro-
totype for tablets. The prototype was then validated with a similar group of
children, and the results provided valuable insights for the design of hotspots
that can be useful for researchers and designers working and developing digital
picturebooks for children.
Keywords: Interaction Design, User-Centered Design, Children’s Book apps.
1 Introduction
The ability to read and process multimedia texts is a fundamental skill, with an in-
creasing number of readers becoming familiar with convergent interactive multimedia
products [1]. Technologies that were originally unrelated are increasingly becoming
integrated and unified as they develop and advance. “Today, digital picturebooks are
often the first literature young children engage with” [2:1]. In this context, the use of
digital picturebooks during childhood provides a good opportunity to develop these
skills contributing to influence reading frequency [2, 3].
However, along with the opportunities provided by the wide variety of new educa-
tional platforms and interactive mobile devices parents and researchers have also
raised concerns about the drawbacks that these new technologies may pose for the
socio-cognitive development of young children [4]. There is also a lack of publishing
2
standards and an absence of design guidelines for the design of children’s digital pic-
turebooks, and apps in particular [5]. The present criticism on children’s digital books
refers mainly to the often indiscriminate and poor design of multimedia and interac-
tion resources [2, 6]. The integration of the latter needs to be well planned in order to
engage the readers, keeping their attention focused on the digital picturebook, con-
tributing to the story or to the task at hand while avoiding interrupting the narrative
flow or distracting the users [7].
The interaction areas in children’s digital picturebooks, also called hotspots, are
usually highlighted as problematic [8]. When poorly designed, when too much or
accidentally incorporated into the digital picturebook, they provide unnecessary stim-
uli [9] that can lead to impaired learning [10], undermining the understanding of the
story [7, 8], distracting and compromising the reading experience.
Prior work has investigated, how six-to-eight-years old children – the period where
children acquire literacy skills – accompanied by reading mediators interact with chil-
dren’s story apps [11]. The study concluded that very often neither the children nor
their parents were able to identify and to find the icon buttons of the interactive areas
in the app and that one of the main interaction problems with story apps was the
graphic design of the hotspots.
Building on this work, our research investigates aspects related to the design of
hotspots in children’s picturebook apps, namely: (a) icon’s content, (b) visual repre-
sentation of the icons, (c) location on the book pages and on the screen. We focus on
navigation hotspots, menus, and configuration areas of the app. Here, we present an
intervention aimed at identifying children’s needs and preferences for these hotspots.
2 Function and Affordances of Hotspots in Children’s Digital
Picturebooks
In the early electronic books, which run on computers, the "hotspots" originally indi-
cated the areas on which the readers needed to click to activate sounds, animations,
videos and other features, or to navigate thought the digital book [12]. Nowadays, in a
scenario where mobile interactive devices are popular, hotspots are understood as
"specific areas on the screen where readers can touch, slide or squeeze the surface of
the device to generate sounds, animations or even content during reading" [13: 510].
Hotspots in children’s picturebook apps are linked to several modalities such as
sonorous, visual and haptic, among others [14]. The quality of children's digital books
depends largely on the interdependence of resources to create a unified literary expe-
rience [15]. The design and integration of hotspots needs to be careful considered to
provide a multimedia convergence and appropriate interaction for the readers. In or-
der to use the hotspots, the users need to understand their affordances [16]. Particular-
ly for children it is important to adequate the graphic, verbal and iconic representa-
tions to their level of comprehension [5,15] to benefit from a digital picturebook.
The design of hotspots in children’s picturebook apps should guide the reader
through verbal, pictorial or iconic instructions in a way that does not disturb reading,
3
but instead integrating interactive features into the narrative [17]. Therefore, a design
that promotes a deeper immersion while still being congruent with the story has the
potential to stimulate high levels of engagement and reading comprehension through
interactive digital books [7]. In this sense, what may appear to be minor modifications
in the design of hotspots may significantly improve the readers’ experience and the
potential of children’s picturebook apps [18].
A recent study showed that there are at least 13 different kinds of hotspots accord-
ing to their respective functions [17]. Among them are game hotspots, control of vid-
eo and animations, hotspots of virtual or augmented reality interaction, and personali-
zation of the book interface or the reading mode. Here, we focus on three types of
hotspots [17] usually presented as buttons: (1) navigation hotspots, which are essen-
tial for the reader to access different areas of the book and turn the pages; (2) menu
hotspots, which provide access to a list of options, e.g., book chapters; and (3) config-
uration hotspots, which allow the readers to configure the settings, such as sound and
automatic reading.
3 Exploratory Study
Given the importance of involving children in the design of technology [19], which
can strongly contribute to improve its quality by providing designers a better under-
standing of their needs [19, 20], we carried out an exploratory study with a group of
children using a low fidelity paper prototype. The study aimed at assessing children’s
preferences for hotspots icons and understanding how to design them in accordance to
children’s interests. In the following sections we describe the intervention.
3.1 Participants
The study took place at a public primary school’s library and it was carried out with a
group of nine third graders ages eight and nine. The investigation was agreed with the
school principal and the teacher, who had previously requested the parents’ consent
for their children to participate in the study. All the children were familiar with tab-
lets, smartphones and digital books. The majority of them had access to tablet devices
and internet at home and at least seven of them had already read book apps.
3.2 Study Design
Prior to the study, we carefully identified the most commonly used hotspot icons in a
sample of ten commercial book apps for children, and choose for each hotspot the
three icons that appeared most frequently. We printed each selected icon on a small
paper card (5cmX5cm) (see Figure 1) and created a paper prototype that simulated
two pages of a children’s book app. One page represented the home page and the
other represented an inner page. Additionally, we invited the children to draw their
own version of the hotspots.
4
Figure 1: The researcher observing the children choosing their preferred icon cards for the
hotspots "start reading" (left) and "navigation to the home page" (right).
3.3. Procedure and Data Collection
One child at a time - chosen randomly by the teacher - come to the library. The paper
prototype, and a set of color pencils were displayed on the table where the child and
the researcher sat. A smartphone placed on a tripod with a fixed focus on children’s
hand movements recorded their interactions. The researcher started by presenting
himself to the child and then explained the procedure. Next, he collected children’
demographic data, such as use of mobile devices, internet use, familiarity with digital
picture books. The same protocol was followed with every child. The study lasted
about 30 minutes per child and comprised three assessment phases: (i) children’s
preferred icons, (ii) their preferences for the location of the hotspots, (iii) children’s
visual preferences of the hotspots. The data was collected through observation, field
notes, photographs, drawings made by the children and video recordings. In the
following we describe the assessment phases.
3.3.1. Assessing Children’s Preferred Icons
In order to identify if the child knew the function of the hotpot icons represented on
the paper cards, the researcher used the paper prototype representing the app and the
paper cards representing the ten hotspots and asked the children to use them. For this
he showed one representation of each hotspot (three cards). Then he displayed all the
three representations for each hotspot and asked the children to order them according
to their function (see Figure 1). After that the researcher asked the children to choose
a preferred representation for each function. Figure 2 (first row) displays children’s
most preferred items chosen from the ten hotspots selected for the survey. Children’s
preference for specific icons show their familiarity with other digital products, e.g.,
YouTube. For instance, the gear icon (f) is often used in games or for changing the
language and other user settings. One of the microphone representations (i) for “re-
cording reading” was significantly preferred over other and our hypotheses is that this
is because the first one is an icon widely used in communication/message apps used
by children.
5
Figure 2: The 3 different proposals for each hotspot where the first row displays children’s
preferred choices.
3.3.2. Children’s Positioning of Hotspots
Following the first assessment, the researcher invited the children to position their
preferred hotspot icon card on the picturebook app prototype. The researcher ensured
that the child remembered the function of each hotspot and, if necessary, he explained
the purpose of each button (see Figure 3).
Figure 3. Child observing the paper prototype with chosen hotspot cards, the home page (left)
and an inner page (right).
From the interaction layouts created by the children we observed that they usually
positioned the hotspot icons as buttons on the edges of the pages, and rarely on the
inside area. An exception was the navigation hotspot (arrows), which some children
positioned horizontally, on the middle of the pages.
Regarding the “home” representation, the children positioned similar hotspots to-
gether according to their function and icon appearance. For example, in most cases
they placed the hotspots for the “games” and for the “quiz” side by side. The “micro-
phone” icon (used to record reading) was placed close to the “speech” icon (used to
hear a narrated version of the story). In general, in the inner app pages the “home”
hotspot was positioned on the top left-hand corner of the paper prototype, whereas,
the “configuration” and the “menu” hotspots (to access different pages and chapters)
were placed on the opposite bottom side, near the edge of the paper (see Figure 3).
6
The positioning of the hotspot icons by the children shows that they are used to
manipulating digital devices and are influenced by the layout of games and YouTube
videos.
3.3.3. Children’s Hotspot Creation
In the third stage of the intervention, we invited the children to draw icons for
each of the hotspots (see Figure 4). We made clear that they were free to reproduce an
icon that they liked and that represented a certain interaction, or instead to create new
icons, that could better represent the activity linked to it. We observed that the task
was easy for most of the children, but they had some difficulties, specially to repre-
sent the “configuration” icon (f). To represent this icon the children did not create any
innovative drawings, they just copied in their own way one of the options that we had
previously showed them. Our hypothesis is that this is because this specific icon
groups a menu for choosing different user settings (select language, enable/disable
automatic reading and sounds), being a more complex representation if compared to
other hotspots. Most of the drawings are re-readings of the previously chosen icons
(see Figure 2), however, interesting new ideas have also emerged in the intervention.
7
Figure 4. Children drawing (top) the ten new hotspot icons (bottom).
Looking at the illustrations of the ten groups of icons (see Figure 4 - bottom), from
a design and visual communication perspective [21, 22], we observed that the most
expressive graphic elements on these are: (a) two-dimensionality; (b) simplification of
shapes and colors; (c) line structures; (d) organic graphic style. This predominantly
visual style follows the principle of graphic simplicity of shapes and colors commonly
found in the current language of computer icons, flat and not skeuomorph.
Only few children filled the inner area of the drawings, so the line is the main ele-
ment that creates the structure of the icons. Also, only very few children wrote text
near the hotspot, showing a preference for a predominantly iconographic, nonverbal
language. The graphic style that prevailed is organic, even the geometric shapes when
drawn are a little curved and the strokes are tremulous, which is an expected charac-
teristic in children's drawings.
Regarding the symbolic content of the icons, few of them are innovative when
compared to the paper cards that the children used. This means that the previous pro-
posals were well accepted and incorporated by the children in their creations. Howev-
er, it is important to highlight some creative solutions draw by the children. To repre-
sent the “start reading” hotspot, one of the children represented the perspective of the
reader holding the book, as opposed to the hotspot printed on the cards. For a repre-
sentation of the “automatic reading” hotspot – which enables automatic reading by the
device – one child drew one ear while the others drew microphones or the icon of a
person talking. A child redesigned the symbol for the “quiz” and the “feedback”
8
hotspot by replacing one of the question marks with the exclamation mark (see the red
highlighted icons in Figure 4).
4 Design of Hotspot Icons for a Children’s Digital Picturebook
Outgoing from the data collected in the intervention we developed a digital prototype,
which contained the home page and four pages of the picturebook. To better design
the new icons, we analyzed and compared all the collected data following three prin-
ciples for designing graphical interfaces for children [23]: Obvious visibility; Visual
resemblance; and Conceptual resemblance.
Figure 5. The redesigned hotspots (top) in the digital prototype on the app home page (bottom
left) and on an inner app page (bottom right).
These three principles emphasize that icons should be visually conspicuous to at-
tract the attention of the users and resemble the visual features of the metaphors that
they represent, so that the users can recognize them immediately [23]. From the pre-
dominant visual style, we designed the icons (see Figure 5 - top) to resemble a chil-
dren’s drawing with a crayon. All icons are simplified in two-dimensions, in just one
color and without internal filling.
In the design of the hotspot icons for the digital prototype, we diverged from chil-
dren's preferences regarding the position on the interface of the hotspot icon to turn
the pages. Instead, we positioned the pages navigation hotspots on the bottom of the
page (see Figure 5 - bottom). Besides being more convenient to use when the reader
holds the digital device, this position avoids compromising the illustration areas on
the inner pages, since these will contain hotspots for triggering characters and scenar-
ios’ animations. We also considered size and ideal distances recommendations be-
tween interactive buttons [23], keeping in mind that children users have less motor
control of fine gestures [16].
4.1 Validation Session
A second research session was conducted in the school's library with a similar group
of nine third graders ages eight and nine, to validate the icons designed in a digital
9
prototype. The sessions lasted between 10 and 15 minutes per child. The children
were invited to read the app on their own (without researcher intervention), and then
to perform a set of tasks: i) start the reading, ii) navigate between pages and iii) be-
tween chapters, iv) change the language settings) enable/disable auto reading, vi)
return to the home page, vii) access games, quiz and dictionary, and viii) simulate a
audio recording of reading. Each task was linked to one of the redesigned hotspots. In
general, the children were able to complete all the tasks.
Besides verifying that the majority of the children were able to locate and identify
the hotspot icons without problems, we noticed that they followed different paths to
accomplish the same tasks. For instance, some children wanted that each page of the
book contained at least the essential hotspots to navigate between pages, to reconfig-
ure reading modes and to access the most important menus, namely: “chapters” and
“home page”. This indicated the need of integrating specific hotspots on pages which
initially were not designed to include them.
5 Results and Conclusion
In order to design digital books for children, it is important to know children’s prefer-
ences and interests. This intervention showed that children's preferences for the
hotspots are tightly linked to their familiarity and use of other digital products, name-
ly: YouTube, games, Whatsapp or other virtual messenger systems.
By involving children in the design process we received valuable insights for the
design of hotspots in children’s book apps. Further, a co-creation design process with
children can also provide unexpected and creative graphic solutions, e.g. the “start
reading” hotspot using the reader’s perspective, the “automatic reading” hotspot as an
ear, or the microphone hotspot as a "person talking". Or, the “quiz” and the “feed-
back” hotspot with an exclamation mark (see the red highlighted icons in Figure 4).
The children also provided a simplified solution for the app navigation, choosing
shorter ways to perform tasks by including essential hotspots on the book pages that
were not previously included. This is, they placed the most used hotspots (to turn
pages) in the internal pages close to the illustration areas of the story, which provided
an efficient reading flow between pages avoiding interference with other hotspots.
Children’s attractive and playful drawings of the hotspot icons inspired the design of
the hotspot icons for the final digital prototype. They favored a predominantly icono-
graphic, nonverbal language, and their drawings of the hotspots showed a preference
for the outline leaving the inner area empty. This demonstrates their preference for
simple and "clean" icons. However, this may be related to the available materials:
colored pencils, markers and crayons. Children’s ideas and insights may as well be of
value to researchers and designers working in the design of hotspots for children's
digital picturebooks.
10
6 ACKNOWLEDGMENTS
We thank the children from the school EB1 Gualtar, in Braga, Portugal, for their val-
uable contributions to this study and their teachers for allowing us to conduct this
study. The first author acknowledges the fellowship from the National Council of
Scientific and Technological Development – CNPq Brazil, process n: 206788/2017-7.
This study has been financed by the Portuguese Foundation for Science and Technol-
ogy - FCT, and European Regional Development Funds through the Competitiveness
and Internationalization Operational Program reference Mobeybou-POCI-01-0145-
FEDER-032580.
7 REFERENCES
1. Ramos, G.: Habitar a infância: como ler literatura infantil. Tema Editorial, Brasília (2017).
2. Al-Yaqout, G., Nikolajva, M.: Re-conceptualising picturebook theory in the digital age.
Barnelitterært Forskningstidsskrift: Nordic Journal of ChildLit Aesthetics, 6(1), 26971,
(2015).
3. Schugar, H. R., Smith, C. A., Schugar, J. T.: Teaching with Interactive Picture E-Books in
Grades K-6. Reading Teacher, 66(8), 615–624 (2013).
4. Kucirkova, N.: Digitalised early years - Where next? Psychologist, 24(12) 938–940
(2011).
5. Bus, A. G., Takacs, Z. K., Kegel. C. A. T.: Affordances and limitations of electronic story-
books for young children’s emergent literacy. Developmental Review, 35, 79–97 (2015).
6. Smeets, D. J. H., Bus. A. G.: The interactive animated e-book as a word learning device
for kindergartners. Applie Psycholinguistics, 36(4) 1–22 (2012).
7. Kao, G. Y-M., Tsai, C.-C., Liu, C.-Y., Yang. C.-H.: The effects of high/low interactive
electronic storybooks on elementary school students’ reading motivation, story compre-
hension and chromatics concepts. Computers and Education, 100, 56–70 (2016).
8. Morgan, H.: Multimodal Children’s E-Books Help Young Learners in Reading. Early
Childhood Education Journal, Springer, 41(6), 477–483 (2013).
9. Schugar, H. R., Smith, C. A., Schugar, J. T.: Teaching with Interactive Picture E-Books in
Grades K-6. Reading Teacher, 66(8), 615–624 (2013).
10. Bus, A. G., Takacs, Z. K., Kegel C. A. T.: Affordances and limitations of electronic story-
books for young children’s emergent literacy. Developmental Review, 35, 79–97 (2015).
11. Menegazzi, D., Sylla, C., Padovani. S.: Hotspots in picture books apps: an investigation of
the perception of readers from interaction research. In: Conference Synergy and Contradic-
tion – How Picturebooks and Picture Books Work, 39 - 41. University of Cambridge,
Cambridge (2018).
12. Shamir, A., Korat. O.: How to select CD-ROM for young children: The teacher’s role. The
Reading Teacher, 59, 532–543 (2006).
13. Serafini, F., Kachorsky, D. E.: Aguilera. Picture Books in the Digital Age. Reading Teach-
er, 69(5), 509–512 (2016).
14. Menegazzi, D.: O Design de interfaces de livros infantis apps: uma revisão das
características e recomendações. Textura, 20(43), 215-239 (2018)
15. Cahill, M., Mcgill-Frazen. A.: Selecting “app”ealing and “app”ropriate book apps for be-
ginning readers. Reading Teacher, 67, 30–39 (2013).
11
16. Kamysz, K., Wichrowski. M.: A little goat builds the world – an interactive children story
for tablets. Lecture Notes in Computer Science, 8832, 228–23 (2014).
17. Menegazzi, D., Sylla, C., Padovani. S.: Hotspots em livros infantis digitais: um estudo de
classificação das funções. Proceedings of 2nd International Conference on Design and
Digital Communication, 45 – 56. IPCA, Barcelos (2018).
18. Yokota, J., Teale, W. H.: Picture Books and the Digital World. Reading Teacher, 67(8)
577–585 (2014).
19. Druin. A.: The role of children in the design of new technology. Behavior and Information
Technology, 21(1), 1–25(2002).
20. Chiu, S., Koong, C-S., Fan. S-H.: Icon Design Principles for Preschoolers, Implications
Derived from Child Development. Procedia - Social and Behavioral Sciences. SciVerse
ScienceDirect, 64, 228–237 (2015).
21. Dondis. A. D.: Sintaxe da linguagem visual. 3.ed. Martins Fontes, São Paulo (2007).
22. Munari. B.: Design e comunicação visual. Martins Fontes, São Paulo (2001)
23. Sun, X., Plocher, T., Qu, W. An Empirical Study on the Smallest Comfortable Button/Icon
Size on Touch Screen. Usability and Internationalization. HCI and Culture, 615–621
(2007).
