Content uploaded by Tiago Gonçalves
Author content
All content in this area was uploaded by Tiago Gonçalves on Feb 25, 2016
Content may be subject to copyright.
P. Campos et al. (Eds.): INTERACT 2011, Part IV, LNCS 6949, pp. 300–308, 2011.
© IFIP International Federation for Information Processing 2011
Evaluation of HaloDot: Visualization of Relevance of
Off-Screen Objects with over Cluttering Prevention on
Mobile Devices
Tiago Gonçalves, Ana Paula Afonso,
Maria Beatriz Carmo, and Paulo Pombinho
Faculdade de Ciências da Universidade de Lisboa, Portugal
{tgoncalves,ppombinho}@lasige.di.fc.ul.pt,
{apa,bc}@di.fc.ul.pt
Abstract. The complexity of presenting and exploring large amounts of
graphical data, on mobile devices, increases due to their small screen size. To
mitigate this problem several approaches have been proposed to give clues
about objects that are located off-screen. In this paper we present a user study
comparing the Halo off-screen visualization technique with HaloDot, our
approach that aims to improve direction awareness, as well as, relevance of off-
screen objects, and to avoid cluttering of Halos. The study shows that searching
and pointing relevant Points of Interest (PoI) can be achieved faster than with
Halo and that the proposed aggregation method is useful.
Keywords: Visualization, Mobile Devices, Off-Screen Objects, Relevance.
1 Introduction
Presenting and exploring large amounts of graphical data on small screens are key
research topics. To search Points of Interest (PoI) in large maps on mobile devices,
panning and zooming can be used to explore surrounding areas that are not visible on
screen. However, as these techniques are cognitively complex and frequently
disorient the user, different approaches to give visual clues of off-screen objects have
already been proposed [1, 2, 3, 4, 5].
Another important issue in mobile visualization is the development of mechanisms
to show the most relevant information to the user, reducing the amount of information
displayed to avoid cluttering. The relevance in a mobile context should capture not
only the location of an object, but also other contextual factors, such as, temporal
constraints and properties or attributes of an object. Research approaches in this topic
aim to establish an appropriate distance function that integrate several contextual
factors beyond the location, namely semantic and temporal relevance [6,7].
In this paper we describe and evaluate our approach, HaloDot that enriches the
Halo off-screen visualization technique [1], aiming to improve direction awareness of
off-screen objects, to give hints about their relevance, and, to prevent cluttering when
there are a large number of off-screen objects.
Evaluation of HaloDot: Visualization of Relevance of Off-Screen Objects 301
This paper is organized as follows. Section 2 describes related work about off-
screen visualization techniques and relevance visualization. Sections 3 present the
HaloDot technique. Section 4 describes the experimental evaluation and reports the
results. Finally, section 5 points out our conclusions and future work.
2 Related Work
There are several approaches to provide hints to the existence and location of objects
that are not visible on the display area. They consist of graphical representations, such
as, lines, arcs or arrows, disposed along the borders of the display area to convey
information about the distance and direction of off-screen objects. Burigat et al. call
them Contextual Cues [8]. Some examples are arrows, Scaled and Stretched arrows
[2], City Lights [3], Halo [1], EdgeRadar [4] or Wedge [5]. Halo is one of the most
known techniques. It consists in surrounding the off-screen objects with rings, which
are just large enough to reach into the border region of the visible area. Based on the
visible portion of the ring, users can infer the location and the direction of the object
at the center of the ring, taking into account the arc position and arc curvature [1]
(Fig.1 left).
The Halo has been compared with other off-screen visualization techniques and is
considered as a successful technique for awareness of the presence of off-screen
objects [2, 4, 5]. However, these studies have also observed that Halo had lower
accuracy in some tasks caused either by the underestimating of the distances or a Halo
cluttering problem.
In the initial phase of our work [9], we observed that none of the visualization
techniques of off-screen objects conveys their relevance. The concept of relevance
and how to represent it has also been subject of various research studies. It is not
enough to select the most relevant objects but it is essential that the filtered objects
show their relevance values [10]. Reichenbacher has suggested the use of “warm”
colors, like red and orange, to represent more relevant spots, while the less relevant
ones would be represented with “colder” colors. Such practice is also mentioned in
[11], that states that colors can be used to represent various meanings, one of them
temperature (warm = red, cold = blue). Wolfe J.M [12] also points out the importance
of color along with other attributes, such as, motion, orientation and size, to guide
users’ attention.
We aim to provide visual clues (based on color and transparency attributes) to
convey information about the relevance and the distance of off-screen objects, i.e., the
distance between its location and the area visible on-screen. Moreover, we want to
avoid cluttering. We started our work using the Halo technique [4] and a function that
returns a value of the relevance of a PoI belonging to [0, 1]. The value of the
relevance of each PoI, is calculated according with the user preferences and his
geographic position [7]. This means that the relevance takes into account the distance
between the geographic location of the user and the PoI, which is different from the
distance represented by the Halo’s arc.
302 T. Gonçalves et al.
3 HaloDot Techniq
u
We have designed HaloDo
t
satisfy the relevance and
d
when a large number of
o
describe our solutions and
i
3.1 HaloDot: Improving
Halo provides location and
shape of the visible portio
n
arc’s size, we decided to e
n
arc’s position. We have dr
a
intersection between the H
a
area where the Halos are
provided in City Lights t
e
adaptation, called HaloDot
.
3.2 HaloDot + Color + T
r
Let us consider the follow
i
area wants to find restaura
n
is the off-screen Italian res
t
and 2 are equidistant from
the user prefers Italian res
t
not give awareness of the r
e
We have decided to us
e
objects, since color is kno
w
“warm-cold” analogy [10,1
with red (warm/hot), the
intermediate relevance wit
h
Fig.1 (right) shows the
most relevant object is re
p
represented with a blue an
d
Fig. 1. An example of
H
u
e
t
that adapts and enhance the Halo interaction techniqu
e
d
irection awareness and prevention of the clutter prob
l
o
ff-screen objects are presented. In the next sections
i
mprovements applied to the Halo technique.
the Awareness of Direction
the distance of the off-screen object based on the size
n
of the arc. Since the distance is already provided by
n
rich the Halo indirect direction representation given by
a
wn the arc of the Halo with a small circle at the poi
n
a
lo's arc and the intrusion border, i.e., the inner limit o
f
visible. This approach combines Halo with the direc
t
e
chnique. Fig. 1 (right) shows an example of this s
m
.
r
ansparency: Awareness of Relevance
i
ng scenario: a user A standing in the center of the vis
i
n
ts with preference to Italian ones. Suppose that the re
t
aurant 1 and the Japanese restaurant 2. Although, obje
c
the user A, restaurant 1 is more relevant than 2, bec
a
t
aurants. As shown in Fig. 1 left, the Halo technique
d
e
levance of off-screen objects.
e
color to represent the relevance of the various off-sc
r
w
n as a good attribute to guide people’s attention. Usi
n
1], we have decided to color the most “relevant HaloD
o
less relevant with blue (cold) and the objects with
h
purple (tepid).
use of this approach applied to the above scenario.
T
p
resented with the red HaloDot and the less releva
n
d
more transparent HaloDot.
H
aloDot with color. Original Halo (left) and HaloDot (right).
e
to
lem
we
and
the
the
n
t of
f
the
t
ion
m
all
i
ble
e
sult
ct 1
a
use
d
oes
r
een
n
g a
o
ts”
h
an
T
he
n
t is
Evaluation of Ha
l
However, our approach
with the color visibility o
f
object 1 (Italian) is further
transparency to deal with
with the distance of the
u
of the most relevant obje
c
(Fig. 1 left).
We decided to apply a
m
away still have a visible H
a
an object is [10], if the tra
n
the off-screen object to the
object off-screen was fur
t
HaloDot's arc would be m
object. To avoid this, th
e
relevance. An interval of
m
the object’s relevance. Th
i
HaloDot than a less releva
n
Fig. 2. HaloDot without
3.3 HaloDot Aggregatio
n
As mentioned by several
cluttering problem when a
l
the use of the color and tr
a
by allowing users to visu
a
screen objects is very large
In resemblance of what
aggregation approach to
m
(Fig. 3 right). We consider
coordinates, overlaying the
grid has a default size, th
o
situation, where a HaloDot
be drawn for each cell wit
h
will have as many HaloDo
t
corresponds to the most rel
e
l
oDot: Visualization of Relevance of Off-Screen Objects
to represent the relevance brings another problem rel
a
f
the most relevant object. Suppose that the most rele
v
away than the object 2 (Japanese). The original Halo
u
distance [1] and the arc’s transparency grows accor
d
u
ser to the off-screen object, which means that the
c
t will be less visible than the arc of the least rele
v
m
inimum transparency level, so even objects that are to
o
a
loDot. Assuming that the more visible, the more rele
v
n
sparency level was selected only based on the distanc
e
visible area, there would be the risk that, if a relevant (
r
t
her away than a less relevant (blue) one, the sec
o
ore visible. This could induce the user to pick the wr
o
e
transparency level is also dependent on the obj
e
m
inimum and maximum transparency is set according
w
i
s way, a relevant object will always have a more vis
i
n
t one (Fig. 2 right).
(left) and with (right) color+transparency to show relevance
n
+ Numbering: Cluttering Prevention
authors [1, 2, 5] one of the Halo’s limitations is
l
arge number of off-screen objects are presented. Altho
u
a
nsparency characteristics of HaloDot could reduce cl
u
a
lly separate the mos
t
relevant, when the number of
o
the visualization could be very difficult (Fig. 3 left).
is done with on-screen icons cluttering [7], we propos
e
m
itigate the clutter problem when arcs density is
h
the existence of a hypothetical grid, based on geogra
p
map, which divides the geographical space into cells.
T
o
ugh it can be changed by the user. Unlike the prev
i
would be drawn for each off-screen object, a HaloDot
w
h
at least one object. This means that, in the worst case,
t
s as cells. The color and transparency shown by a Halo
D
e
vant object it represents.
303
a
ted
v
ant
u
ses
d
ing
arc
v
ant
o
far
v
ant
e
of
r
ed)
ond
o
ng
e
ct's
w
ith
i
ble
the
u
gh
u
tter
off-
e
an
h
igh
p
hic
T
he
i
ous
w
ill
we
D
ot
304 T. Gonçalves et al.
Fig. 3. Halo (left) and HaloDot with aggregation and number clues (right)
To show the number of objects represented by a HaloDot with aggregation we
have investigated several approaches. We tried to change the thickness of the arc
and/or the point of intersection based on the number of objects represented. However,
these demonstrated being very intrusive, even incomprehensible. We have developed
another solution that gives textual information, the number of off-screen objects it
represents, near the point of intersection with the intrusion border (Fig. 3 right).
To overcome the cluttering problem at the corners, in analogy with EdgeRadar,
where the corners represent a larger off-screen area than the borders [4], we have
decided to merge all HaloDots on the corners. Although this means that the HaloDots
at the corners might represent more points, since they correspond to bigger cell areas
and that the aggregations may change by panning the map, we believe that this will
improve the technique, since it greatly reduces the overlap and the intrusiveness of the
HaloDot, therefore, improving interaction.
Even with this merging, there is the risk that some HaloDots, located in different
cells, have centers with a close latitude or longitude, meaning they can overlap the
HaloDots and their textual information. To solve this problem we have considered
two approaches: to aggregate all HaloDots that are in cells arranged orthogonally to
the borders or to aggregate the HaloDots that have their intersection points too close.
Another problem is related with the representation of the center of the aggregated
HaloDot. We have explored two options: the center being the midpoint of the objects
represented or the most relevant object. While the first may be more intuitive, the
second guides the user’s attention to the most relevant objects of his/her search, while
still not hiding information about the others.
4 User Study
We have conducted a user study to evaluate whether the proposed solutions assist the
user in searching for off-screen objects according with their relevance. We intend to
explore and validate our current solutions for the improvement of the representation
of the direction, the representation of the relevance and the aggregation to solve the
problem of cluttering, as well as to collect users’ preferences about our approaches.
To compare the HaloDot improvements with the original Halo, we have done a
experiment where tasks were presented to participants through scenarios.
Evaluation of HaloDot: Visualization of Relevance of Off-Screen Objects 305
We also want to understand the best solution when several design alternatives are
explored, namely: aggregation of HaloDots based on the orthogonally cells
arrangement or based on closeness of intersection points; always display the number
of objects represented by the HaloDot or only if there exists more than one off-screen
object; representation of the center of the HaloDot as the most relevant object or as
the midpoint of the objects represented.
Considering these objectives, our assumptions in the study were the following:
1. Once we have explained the meaning of colors, we expect that users will not
have any difficulties identifying the relevance of PoI. We also expect that users
find the most relevant PoI faster that using original Halo.
2. The aggregation is a useful method and the users will prefer the aggregation of
HaloDots based on cells arranged orthogonally to the borders, since that means,
there are less objects being drawn.
3. The users will prefer the center of the HaloDot being the most relevant object,
since that object satisfies their information need.
4. The users will prefer to always see the textual information of the HaloDot,
because they will find it easier to work with it.
4.1 Participants and Apparatus
This study had the participation of sixteen volunteer subjects balanced in gender (7
female, 9 male) and background (10 from computer science and 6 from other
scientific disciplines and humanities). Their age ranged from 21 to 51 (M=27,
SD=9,2). All users had some familiarity with mapping applications on the Web, such
as Google Maps for planning routes or finding PoI. Seven out of 16 users had used
mobile maps applications occasionally and one uses it daily for finding PoI and
navigating in city environments. Participants had experience with zooming and
panning but none were familiar with halos. Three participants stated they had used
off-screen techniques in video games, such as arrows and mini-map.
The study was carried out on a touch-screen HTC Desire device, running the
Android OS 2.2 featuring a 1GHz processor and a 3.7-in touch screen with 480x800
of resolution. During the study, the map covered all the available screen area of the
device, and it was based on the Google Maps application.
4.2 Tasks
The study consisted of five tasks that correspond to different scenarios. Before the test
the users were informed about the three visualizations techniques in a tourist map
application: no contextual clue about off-screen objects; Halo visualization technique
and HaloDot. The tasks were performed in the same order (task 1, 2, 3) but the order
of the techniques has been counterbalanced as well as the location and relevance
configuration of off-screen PoI to reduce sequence and learning effects.
In the first task the participants were asked to find all the PoI (3 restaurants)
ordering them in increasing distance from the map center (user position). To execute
the task the user had to provide their answer by tapping on the corresponding icon of
the PoI. The dependable variable was the time to complete the task and a rating of the
difficulty in a five point scale. In addition, at the end of the session the users were also
306 T. Gonçalves et al.
interviewed to rate their preference for a particular visualization and if they
understood the characteristics of HaloDot, namely, its textual representation.
In the second task the participants were asked to find the most relevant PoI (i.e. PoI
with the highest relevance value), namely a specific restaurant (e.g. “Good Pizza”).
The number of PoI is exactly the same (20) for each visualization condition.
However, in the HaloDot visualization there is only one red arc that corresponds to
the most relevant PoI. The dependable variable was the time to complete the task and
a rating of the difficulty in a five point scale. In addition, at the end of the session the
users were also interviewed to rate their preference for a particular visualization and if
they understood the characteristics of HaloDot, namely, the color as the representation
of the relevance, and if the most relevant HaloDot arc (red) is the one that guides their
attention.
In the third task we intend to compare the use of HaloDot with two different
conditions in the number of relevant PoI: in the first condition, the number of PoI
with higher relevance (red arc) is one in a total of 20; in the second one: the number
of PoI with higher relevance is higher than one.
The fourth task intends to test the effectiveness of the proposed aggregation
approach. The users were requested to explore the map freely, three times, with 10,
50 and 124 PoI, respectively. The last task intends to compare the different design
alternatives of HaloDot, namely, presentation of the center of the aggregated
HaloDot; the presence of the number of PoI awareness and the aggregation method
preferred. The participants were interviewed to rate their preference for a particular
option.
4.3 Results
The values of mean completion times for the first task are reported in Fig.4 (left). We
have not noticed any relevant result in this task as there is no different effect of the
type of visualization configuration (Halo or HaloDot) in the completion time, beyond
the difference between the use of an off-screen visualization and no technique at all.
At this point few users have noticed the difference between the Halo and the HaloDot,
namely in the point of intersection and only one user did not understand the meaning
of the number awareness in the HaloDot technique, probably due the existence of
few PoI.
For the second task (Fig. 4 middle) a significant main effect was observed for the
“type of visualization”. A significant difference was found between Halo and
HaloDot. This confirms our first hypothesis: users find the most relevant PoI faster
that using original Halo. For the third task and based on Fig. 4 (right) we can see that
even with more “relevant HaloDots”, the users were able to more quickly find the
desired PoI. This also supports our first hypothesis: once we explained the meaning of
colors, we expected that users would not have any difficulties identifying the
relevance of PoI. Comments collected after the execution of these tasks revealed that,
although few users (31%) have associated the color clue with the relevance of the
object, a large number mentioned that the red HaloDots were more visible and
provided clues to guide their attention.
Evaluation of Ha
l
Fig. 4. Mean completion ti
m
(middle); and third task (right
)
In the last two tasks,
alternatives of design. In
t
large number of users expr
e
was very usefull and 75
orthogonally to the border
s
their preferences about the
a positive evaluation of o
u
HaloDot with a center on
textual information (num
b
confusing since it was inte
r
being the total number of
P
one had a high relevance.
Overall users prefered t
h
main reason pointed was
t
reduce the amount of arcs
d
relevant information. Wit
h
improvement of direction
a
feature, however some sug
g
5 Conclusions and
F
In this paper we described
to give relevance clues a
b
application was developed
showed that HaloDot enabl
aggregation is a useful
m
extended and precise co
m
representations (e.g. arro
w
understand and how to opti
m
References
1. Baudisch, P., Rosenholt
z
Proceedings of CHI 2003
2. Burigat, S., Chittaro, L.,
G
devices: A comparative
2006, pp. 239–246 (2006
)
l
oDot: Visualization of Relevance of Off-Screen Objects
m
es with standard deviation bars: first task (left); second
)
the user expressed their preference between sev
e
t
he fourth task, despite the increase of PoI on the ma
p
e
ssed that HaloDot was still usable and that the aggrega
t
% prefered the aggregation based on cells arra
n
s
. This confirms our second hypothesis. When asked a
b
various configurations of the HaloDot, the results exp
r
u
r third and fourth hypotheses: 75% prefered to see
the most relevant PoI, 62% prefered to always see
b
er of PoI). The color of the number revealed to
r
preted as the number of the most relevant PoI, instea
d
P
oI represented by the aggregate HaloDot, where at l
e
h
e HaloDot in comparison with the original Halo, and
t
he usage of different colors and the aggregation as
t
d
rawn and consequently improve the perception of the
m
h
respect of the utility of the point of intersection a
s
a
warness, users have commen
t
ed that it was a very hel
p
g
ested that other shapes could be used, like arrows.
F
uture Work
the HaloDot technique to improve cluttering problems
b
out the off-screen objects. An Android tourist mo
b
to compare the proposed technique with Halo. The st
u
es users to search faster for relevant PoI than Halo and
t
m
ethod. The next step of this work is to perform a
m
m
parison with other variations of the off-screen obj
e
w
s, lines) and relevance hints. This will enable u
s
m
ize them to represent relevance of off-screen objects.
z
, R.E.: Halo: a technique for visualizing off-screen objects
.
, pp. 481–488 (2003)
G
abrielli, S.: Visualizing location of off-screen objects on m
o
evaluation of three approaches. In: Proceedings of Mobile
H
)
307
task
eral
p
, a
t
ion
n
ged
b
out
r
ess
the
the
be
d
of
e
ast
the
t
hey
m
ost
s
an
p
ful
and
b
ile
u
dy
t
hat
m
ore
e
cts
s
to
.
In:
o
bile
H
CI
308 T. Gonçalves et al.
3. Zellweger, P.T., Mackinlay, J.D., Good, L., Stefik, M.J., Baudisch, P.: City Lights:
contextual views in minimal space. In: Extended Abstracts CHI 2003, pp. 838–839 (2003)
4. Gustafson, S.G., Irani, P.P.: Comparing visualizations for tracking off-screen moving
targets. In: Extended Abstracts of CHI 2007, pp. 2399–2404 (2007)
5. Gustafson, S., Baudisch, P., Gutwin, C., Irani, P.: Wedge: clutter-free visualization of off-
screen locations. In: Proceeding of CHI 2008, pp. 787–796 (2008)
6. Swienty, O., Reichenbacher, T., Reppermund, S., Zihl, J.: The role of relevance and
cognition in attention-guiding geovisualisation. The Cartographic Journal 45(3), 227–238
(2008)
7. Pombinho, P., Carmo, M.B., Afonso, A.P.: Evaluation of Overcluttering Prevention
Techniques for Mobile Devices. In: Proceedings IV 2009, pp. 127–134 (2009)
8. Burigat, S., Chittaro, L.: Visualizing references to off-screen content on mobile devices: A
comparasion of Arrows, Wedge and Overview + Detail. Interacting with Computers 23,
156–166 (2011)
9. Gonçalves, T., Afonso, A.P., Carmo, M.B., Pombinho, P.: HaloDot: Visualization of the
Relevance of Off-Screen Objects. In: SIACG 2011, pp. 117–120 (2011)
10. Reichenbacher, T.: The concept of relevance in mobile maps. Location Based Services and
TeleCarthography, 231–246 (2007)
11. Silva, S., Santos, B.S., Madeira, J.: Using Color in Visualization: A Survey. Computer &
Graphics 35(2), 320–333 (2011)
12. Wolfe, J.M., Horowitz, T.S.: What attributes guide the deployment of visual attention and
how do they do it? Nature reviews. Neuroscience 5, 1–7 (2004)
