Content uploaded by Paulo Pombinho
Author content
All content in this area was uploaded by Paulo Pombinho on Feb 05, 2020
Content may be subject to copyright.
Available via license: CC BY 4.0
Content may be subject to copyright.
Overview “vs” Detail on mobile devices:
a struggle for screen space
Tiago Gonçalves Ana Paula Afonso Maria Beatriz Carmo Paulo Pombinho
Faculdade de Ciências da Universidade de Lisboa
Campo Grande, 1749-016, Lisboa, Portugal
tgoncalves@lasige.di.fc.ul.pt apa@di.fc.ul.pt bc@di.fc.ul.pt ppombinho@lasige.di.fc.ul.pt
Overview & Detail is a visualization technique suitable for finding points of interest (POIs) located
outside the detailed view. In this study we aim to analyze the effects of the size of the overview on
the users’ performance on mobile devices. For that purpose we compared three different
interfaces, a traditional one, with smaller dimensions overlaying the detailed view; a larger
overview, yet not overlaying the detailed view; and one with a resizable overview. Our results show
the users’ preference for a resizable overview and for a larger, non-overlapping overview.
Overview&Detail, Mini-Map, Visualization, Mobile Devices, User Study, Relevance
1. INTRODUCTION
With the constant evolution of technology, hand-
held devices have conquered an important position
on most users’ daily activities. Nowadays, mobile
devices are powerful enough to display and allow
the interaction with large amounts of information in
several visualization contexts, such as the search
for POIs (Points of Interest) in thematic maps.
However, mobile devices still have several
restrictions; some of them likely to persist, namely
the small dimensions of their screens.
Consequently, the available viewing area is,
sometimes, not large enough to accommodate all
the information required and, therefore, some tends
to be placed off-screen. In these situations, it is
crucial to provide clues about the existence of that
hidden information.
The literature proposes some approaches to
mitigate this problem, namely, Pan & Zoom actions
(Cockburn et al. 2003), Contextual Clues, Focus &
Context techniques (Gustafson et al., 2008) and
Overview & Detail (Burigat et al., 2011a). This
paper is focused on the Overview & Detail
technique. Despite being a well known technique in
desktop applications, their adoption in mobile
applications is scarce. This technique, commonly
used in desktop applications for the visualization of
geographic information and video-games, consists
in the simultaneous use of one or multiple
overviews of the information space, frequently, as a
small-scale thumbnail, overlapping a detailed view,
usually highlighted on the overview, as the
viewfinder (Figure 1). Typically, there is a tight
coupling between the two views, i.e. when
changing the detailed view’s position, usually with
panning or zooming operations, the viewfinder on
the overview changes accordingly. Similarly, if the
position of the viewfinder is changed, the
visualization on the detailed view is also changed.
Figure 1: Overview & Detail technique
Overview & Detail interfaces usually offer the
following benefits: more efficient navigation through
the use of the viewfinder instead of the detailed
view; aiding users keeping track of their current
position, through the use of the viewfinder’s
position; providing relevant information for the
user’s current task; giving the user a greater feeling
of control of the navigation process (Hornbaek et
al., 2002). However, it also presents some
disadvantages, namely: the simultaneous use of
two views may require a greater physical and
mental effort, since it is necessary to indirectly link
information from two differently scaled views; the
use of an overview reduces the available space
and it may be intrusive as some information on the
detailed view might be hidden behind the overview;
© The Authors. Published by BISL.
Proceedings of the BCS HCI 2012
People & Computers XXVI, Birmingham, UK
233
Overview “vs” Detail on mobile devices: a struggle for screen space
Gonçalves, Afonso, Carmo, Pombinho
the small size of the overview, and therefore its
small level of detail may inhibit a good visualization
and its understanding (Burigat et al., 2008,
Chittaro, 2006).
Our study focuses on the two last mentioned
problems, aiming to understand if the size of the
overview has any significant effect on the user’s
efficiency (how fast does the user complete a
task?) and effectiveness (how many errors does
the user commit during the task?). Indeed, this
problem received little attention by the mobile
community, despite the existence of several
comparative studies with Overview & Detail
interfaces (Burigat et al., 2011b). Therefore, this
study points out open issues and it aims to help
mobile designers to decide upon a proper Overview
& Detail interface. For this purpose, we have
analysed three different approaches for this
technique and performed a user study with 30
volunteers. In the following, we describe in detail
the interfaces considered for the experiment. Then,
we explain the details of the user study, followed by
the analysis and discussion of the results. Finally,
we point out our main conclusions and future work.
2. CONSIDERED INTERFACES
Figure 2 shows the three considered interfaces in
our study. The first interface (Figure 2a), “Classic
Overview”, follows the most usual approach to the
Overview & Detail technique. In this interface, the
detailed view is overlaid by an overview that
consists of a small-scaled thumbnail that highlights
the detailed view’s position by the use of the
viewfinder. Also, like in the detailed view, the
overview contains a thematic layer with the
distribution of all POIs contained on the information
space (Burigat et al., 2011b). The POIs displayed
on both layers are adapted according with their
relevance (Reichenbacher, 2007), by the use of a
colour and transparency code (Gonçalves et al.,
2011). Besides, we have considered that the
context of visualization is limited to that of the
information space, i.e. the geographical area where
the queried POI can be found. Additionally, as
suggested in previous studies (Burigat et al.,
2011b), to improve the user’s efficiency, the
viewfinder is customizable, allowing the user to
drag and select its relative position inside the
overview and, therefore, the geographical position
of the detailed view. Finally, unlike most
approaches, we placed the overview on the upper
left corner, rather than one of the lower corners of
the screen. This was done to prevent interaction
errors and optimize the visualization of the
overview, since the lower borders of current touch-
screen mobile devices tend to be the most used
areas. In the second interface (Figure 2b), “Split-
Screen”, the screen area is divided into two
non-overlapping views. Consequently, although this
means that less space is used for the detailed view,
the overview’s larger size provides a visualization
with more detailed context and, since there are no
overlapping views, it is assured that all POIs visible
on the viewfinder are never located behind the
overview. Finally, it is expected that the size of the
overview and the detailed view is task dependent
(Plaisant et al., 1995). Therefore, the third interface
(Figures 2c and 2d), “Resizable”, allows resizing
the overview and, consequently, the detailed view,
by holding and dragging the square at the lower
right corner of the overview. According with the
size, the overview will adapt its visualization in
order to always present the highest possible level
of detail and scale. When the overview’s width
matches the screen’s width, the interface will adapt
itself to prevent the overlapping of views, similarly
to the Split-Screen interface. The main benefit of
this interface consists on the freedom given to the
user, since it allows using any of the previously
mentioned approaches, including hiding the
overview (Figure 2c), nearly on-the-fly.
Nevertheless, by giving too many choices, the
users may end up choosing an interface that is not
as helpful as desired, or get distracted by focusing
their attention on resizing the overview, rather than
on their current task.
3. USER STUDY
We conducted a comparative user study to
evaluate the potential differences on users’
efficiency and effectiveness using the three
described interfaces. Based on each interface’s
features, our hypotheses are the following:
(i) Due to the freedom provided, by the
resizing of the overview, it is expected that
the users prefer the Resizable interface;
moreover, it is also expected that the Split-
Screen interface is preferred over the
Classic Overview, because its overview
does not overlap the detailed view;
(ii) For the same reason, it is expected that, in
tasks with the Resizable interface, the
users choose a non-overlaid interface, by
resizing the overview to a similar size of the
one on the Split-Screen interface;
(iii) It is expected that the users are less
accurate with the Classic interface than with
the Split-Screen, since the overview of the
first presents the information with lesser
detail than the second;
(iv) It is expected that, with the Resizable
interface, the users take more time to finish
the tasks, yet committing less errors, due to
the possibility of customizing the overview;
(v) Since the Split-Screen interface provides a
larger area to drag the viewfinder, it is
expected that the users interact more with
the overview of the Split-Screen interface,
rather than the one on the Classic interface.
234
Overview “vs” Detail on mobile devices: a struggle for screen space
Gonçalves, Afonso, Carmo, Pombinho
(a) (b) (c) (d)
Figure 2: Considered interfaces for the study. a) Classic Overview & Detail interface b) Split-Screen interface c) Resizable
interface hidden d) Resizable interface with custom dimensions
3.1 Participants and Materials
The study had the participation of 30 volunteers (20
male, 10 female), with ages ranging from 18 to 53,
averaging 28. 27 had some previous experience
with geographic visualization applications; 22 had
some experience with mobile applications, four of
them using them frequently, while the others just
occasionally. The study was carried out on a touch-
screen HTC Desire, running the Android OS 2.2,
featuring a 1GHz processor and a 3.7-in touch
screen with a 480x800 resolution.
3.2 Tasks
To test our hypotheses, the users were asked to
perform three tasks with the three described
interfaces. The first task was an Order task, where
each user was asked to select, on the detailed
view, all the highly relevant POIs (10 POIs out of
40) from the one closest to the user’s represented
location, to the furthest. The users had to tap on
the POI’s graphical representation. This task
combines a simple, yet common, action done by
any user, i.e. to find the closest POI to their
location, with a complex spatial task that requires
the comparison of the distance to the off-screen
POIs while keeping the context of visualization. The
second and third tasks concerned the exploration
and memorization of the POIs’ locations. In the
second task (Explore), the users were asked to
select all highly relevant POIs on the map and to
memorize their approximated location (2 POIs out
of 10). In the third task (Recall), the users had to
select, on the detailed view, the location of the
POIs selected on the previous task. Although this
task does not require the comparison of distances,
nor other characteristics from the POIs, but their
relevance, it requires that the users create a
“mental map” of the information space.
3.3 Experimental design and procedure
All participants carried out the experiment
individually, at a location of their choice. At the
beginning of the study they were briefed about the
objective of the experiment and provided with an
explanation and a demonstration for each interface.
Before carrying out each task, they were presented
with a training task to allow them to familiarize with
the interface and the device itself and to clarify any
doubts concerning the tasks.
After the training phase, the users carried out the
tasks with the three interfaces. To mitigate
sequence effects, on each task, the order of
presentation of the interfaces was counterbalanced
using a Latin-square design. Each Explore task
was immediately followed by its Recall task
counterpart, to prevent users from mistaking the
locations of the different configurations.
Additionally, in the Recall task, the starting size for
the Overview is the same as the last used on the
Explore task. At the end of each task, the users
were asked to express their opinions, to report their
experience with the interfaces and to order them,
according with their preferences.
To prevent learning effects, three different map
configurations were used, on the Order and
Exploration tasks, one per interface. Configurations
were kept as similar as possible in terms of POI
distribution and distance between them.
Additionally, to prevent any indirect influence
regarding the size of the overview with the
Resizable interface, at the beginning of each task,
the overview was hidden at the upper left corner of
the screen (Figure 2c). The users were notified
about that.
For each user and for all tasks the following
parameters were logged: task completion time;
number of panning operations, on the detailed view
and on the overview; average size used for the
overview; number of overview resizes. For the
Order task it was also logged the number of POIs
incorrectly selected (i.e. points that were not the
closest to the user’s position); while on the Recall
task it was logged the user’s accuracy, i.e. the
distance of the selected position to the actual POI
target.
235
Overview “vs” Detail on mobile devices: a struggle for screen space
Gonçalves, Afonso, Carmo, Pombinho
4. RESULTS
4.1 Task completion times
Figure 3 shows the mean times for the completion
for each task. Task completion times were subject
to the Shapiro-Wilk test of normality. As the test
revealed some deviations from the normal
distribution, the data was normalised using a log-
transformation. An ANOVA test with repeated
measures was then applied to the normalised data.
In the Order task, although the users seemed to
have taken longer to finish the task with the Split-
Screen interface, no significant difference was
revealed by the ANOVA test.
In the Explore task, ANOVA revealed a significant
difference in the variation (F = 9.895, p < 0.005).
Using the Bonferroni test for pairwise comparisons,
a significant difference was revealed between the
Resizable interface and both the Classic and Split-
Screen interfaces (p = 0.046 and p = 0.001,
respectively). On the Recall task, however, no
significant differences were detected.
4.2 Errors and Accuracy
The Shapiro-Wilk test revealed deviations from a
normal distribution for the error data of the Order
Task (Figure 4a). As no transformation done could
normalize the data, we used Friedman’s test to
analyze the errors committed, which revealed a
significant difference between the mean results
(p < 0.005). Then, we applied the Wilcoxon Signed
Rank test for pairwise comparisons, revealing a
significant difference between the Resizable
interface and the others (p < 0.005 in both).
Similarly, the same process was used to the mean
distance errors on the Recall task (Figure 4b),
where an error for each user was measured as the
average of the distance (in meters) between the
location indicated by the user and the correct
location for the two target points. However, no
statistical significance was detected.
4.3 User actions
We analyzed the differences between the rates of
use of the detailed view compared with the ones of
the overview, in the three interfaces (Figure 5). As
the Shapiro-Wilk test for normality revealed
deviations from a normal distribution and no
transformation done could normalize the data,
Friedman’s test was used to investigate the
differences between the data. Only the Order task
revealed statistically significant results (p = 0.007).
The Wilcoxon Signed Rank test for pairwise
comparisons revealed significant differences
between the Classic and Split-Screen interfaces,
and between the Classic and Resizable interfaces
(p = 0.041 and p = 0.008, respectively). Then, we
analyzed the number of overview resize actions
performed with the Resizable interface (Figure 6).
As no user performed any resize operation during
the Recall task, we used the Wilcoxon Signed Rank
test to compare the mean results obtained from the
Order task with those of the Explore task which
revealed a significant difference (p = 0.016).
Figure 3: Mean completion times for each task
(a) (b)
Figure 4: (a) Mean errors in the Order task (b) Mean
distance errors in the Recall task
Figure 5: Rate of pan operations with the detailed view
Figure 6: Mean number of overview resizes with the
Resizable interface for each task
4.4 Average Overview Size
Table 1 shows the average dimension of the
overview used, on each task, with the Resizable
interface. The screen’s resolution is 480x800 pixels
236
Overview “vs” Detail on mobile devices: a struggle for screen space
Gonçalves, Afonso, Carmo, Pombinho
and the overview of the Classic interface has a
dimension of 240x240 pixels. For each task, the
Shapiro-Wilk test for normality was used on both
the average width and height used revealing small
deviations from a normal distribution. Therefore,
the data was normalized using a log-
transformation. Then an ANOVA test with repeated
measures was used, only revealing a statistically
significant difference on the average height used
(F = 5.44, p = 0.005). Using a Bonferroni test for
multiple comparisons, a significant difference
between the Order and Explore tasks was revealed
(p = 0.025) as well as between the Explore and
Recall tasks (p < 0.005). Table 2 shows the rate of
the use of a non-overlapping overview with the
Resizable interface (i.e. an overview with a width
as large as the screen). Friedman’s test was used
to compare the results of the different tasks, not
revealing any statistically significant difference.
Table 1: Mean overview size used on each task with the
Resizable interface
Average
Size (pixels)
Task
Order
Explore
Recall
Width
424
375
413
Height
343
295
335
Table 2: Rate of use of a non-overlapping overview with
the Resizable interface
Rate of use (%)
Task
Order
Explore
Recall
No use
26
37
37
At least once
22
7
0
Always
52
56
63
Figure 7: Mean preference for each interface
4.5 Users’ preferences
To analyze the users’ preferences, we ranked the
interfaces according with the order they provided at
the end of the study (Figure 7). As the Shapiro-Wilk
test for normality showed deviations from a normal
distribution, we used Friedman’s test to compare
the data. The test revealed a statistically
significance between the groups (p < 0.005).
Performing a Wilcoxon test for pairwise comparison
revealed a statistically significant difference
between all pairs (p = 0.002 for the Classic and
Split-Screen interfaces; p < 0.001 for the Classic
and Resizable interfaces and p = 0.001 for the Split
Screen and the Resizable interfaces).
5. DISCUSSION
Overall the results of this experiment partially
confirm four out of five hypotheses. Globally, users
showed positive feedback and preferred the
Resizable interface over the others. This result is
not surprising, as this interface allows the use of
any of the other interfaces. Additionally, comparing
the Split-Screen with the Classic interface, the
majority of users has shown preference for the
Split-Screen. According with their feedback, this
difference is based on the fact that, with a Split-
Screen interface, the overview does not overlap the
detailed view and allows the context to be shown
with a larger level of detail, even if taking more
screen space. Interestingly, two users commented
that the “like centred” overview on the top of the
screen helped them to perform better in the tasks.
This comment needs further evaluation, though it is
still worth mentioning. Overall, these results
support our first hypothesis.
Analysing the average size used for the overview
and the rate of use of a non-overlapping overview,
with the Resizable interface, suggests the users’
interest on a non-overlapping overview, and/or with
larger dimensions than those of the Classic
interface. Therefore, these results support our
second hypothesis.
Comparing the task completion times on the
various tasks, we observe that, in the Explore task,
the users took longer to finish the task with the
Resizable overview. It was an expected result,
considering the need to resize the overview, at the
beginning of the task as well as during the task. On
the other hand, comparing the errors committed in
the Order task, there is a significantly smaller
amount of errors with the Resizable interface.
Judging by the users’ comments, the possibility of
resizing the overview actively helped them
comparing the distance between the POIs. These
comments are supported by the significantly larger
number of overview resizing operations on this
task, rather than the others. These last results
support only partially our fourth hypothesis, since
these results were not observed in all tasks.
Analysing the users’ actions, in terms of panning
operations, it reveals, in the Order task, that a
larger overview facilitates the interaction with the
viewfinder, which has positive effects on users’
performance (Burigat et al., 2011b). This is
supported by the observation of a significantly
larger use of the overview to navigate with the
Split-Screen interface than with the Classic
interface. These results support our fifth
hypothesis. In fact, 10 users specifically
commented that, since the overview was smaller in
237
Overview “vs” Detail on mobile devices: a struggle for screen space
Gonçalves, Afonso, Carmo, Pombinho
the Classic interface, it was harder for them to
manipulate the viewfinder. Additionally, four of
them proposed that rather than dragging the
viewfinder, the user could just tap on the overview
to select the position of the viewfinder.
Finally, contrary to our third hypothesis, there was
no significant difference in terms of accuracy, on
the Recall task. In fact, only 8 users pointed that
the use of a larger overview helped them perform in
the task, as they could get more reference points
from the overview. Overall, according with the
users’ feedback, their strategy was similar: use first
the overview to know the approximated location of
the POI and then, if needed, use some landmark
on the detailed view as reference to obtain a more
precise location. This can lead us to conclude that
for tasks that require the memorization of locations,
the detailed view may compensate the overview’s
size, but this assumption would require further
investigation.
6. CONCLUSIONS
In this study we analysed the effects of the
overview size on the users’ effectiveness and
efficiency and compared three different approaches
for the Overview & Detail interface on mobile
devices. The results highlight the users’ preference
for the use of a resizable, as well as a non-
overlapping overview. However, despite these
characteristics, no significant difference was
detected in terms of efficiency, unless for simple
exploration tasks, and in terms of accuracy, on
memorization tasks. On the other hand, according
with the users’ feedback and their actions during
the tasks, the use of a resizable overview can be a
relevant factor for a better effectiveness, on
complex tasks, where the user is required to
perform several comparisons between the POIs on
the thematic map. Finally, the results also reveal a
significantly larger use of the overview to navigate
through the information space, in comparison with
a smaller one, on complex tasks. Based on these
results, an important guideline for mobile interface
design that requires this technique is the use of a
customizable overview.
Nevertheless, the knowledge about this technique
on mobile applications is still limited and there are
some open questions. In future studies, we want to
compare other methods of interaction with the
overview, besides dragging the viewfinder; and to
study the possible benefits of the use of distance
clues on the overview. Also, as in this study we
used a limited context of visualization, we would
like to study these effects on a non-limited context,
like the one used on Google Maps.
7. ACKNOWLEDGEMENTS
The authors acknowledge the financial support of
FCT – Fundação para a Ciência e Tecnologia
(Portuguese Science and Technology Foundation)
through the project SInteliGIS (PTDC/EIA-
EIA/109840/2009) and the scholarships
SFRH/BD/78837/2011 and SFRH/BD/46546/2008.
8. REFERENCES
Burigat, S. and Chittaro, L. (2011a) Visualizing
references to off-screen content on mobile
devices: A comparison of arrows, wedge and
overview+ detail. Interacting with Computers,
23(2), p.156-166.
Burigat, S. and Chittaro, L. (2011b) On the
effectiveness of Overview+Detail visualization on
mobile devices. Pervasive Ubiquitous
Computing, p.1-15.
Burigat, S., Chittaro, L. and Gabrielli, S. (2006)
Visualizing Locations of Off-Screen Objects on
Mobile Devices: A comparative Evaluation of
Three Approaches. In Proceedings of MobileHCI
2006, Espoo, Finland, p. 239-246.
Burigat, S., Chittaro, L. and Parlato, E. (2008) Map,
Diagram, and Web Page Navigation on Mobile
Devices: The effectiveness of Zoomable User
Interfaces with Overviews. In Proceedings of
MobileHCI 2008, Amsterdam, Netherlands,
p.147-156.
Chittaro, L. (2006) Visualizing Information on
Mobile Devices. IEEE Computer, 39(3), p.40-45.
Cockburn, A. & Savage, J. (2003). Comparing
speed-dependent automatic zooming with
traditional scroll, pan and zoom methods. In Proc
of BSC HCI 2003, Bath, UK, 87-102.
Gonçalves, T. et al. (2011) Evaluation of HaloDot:
Visualization of relevance of off-screen objects
with over cluttering prevention on mobile
devices. In Proceedings of Interact 2011, Lisbon,
Portugal, vol. 4, p.300-308.
Gustafson, S., Baudisch, P. & Irani, P. (2008).
Wedge: Clutter-free visualization of off-screen
locations. In Proceedings of CHI 2008, Florence,
Italy 787-796.
Reichenbacher, T. (2007) The concept of relevance
in mobile Maps. Location based Services and
Telecartography. p. 231-246.
Hornbaek, K., Bederson, B.B., and Plaisant, C.
(2002) Navigation patterns and usability of
zoomable user interfaces with and without an
overview. ACM Transactions on Computer-
Human Interaction, 9(4), p. 362-389.
Plaisant, C., Carr, D. and Shneiderman, B. (1995)
Image-Browser Taxonomy and Guidelines for
Designers. IEEE Software, 12(2), p. 21-31.
238