Off-Screen Targets

Navigation

M1 HCID Jin YAOM2 HCID Jingxiang GOU

RainBall

AGENDA

• Motivation

• Design Concept & Improvement

• Issues & Solutions

• Demo

MOTIVATION

PROBLEM

• Need to see the alternatives

• Down to street information locations

disappear into off-screen

• Time consuming for Pan-Zoom

MOTIVATIONNAVIGATION METHODS

• Scrolling, Panning & Zoom

Pan & Zoom (Google Maps)

• Space Distortion

Magnifying lenses

• Topological Navigation

Focused item and neighborhood highlighted

DESIGN CONCEPT & IMPROVEMENT

CONCEPT

• Halo shows where in off-screen space the

five restaurants are located.

• Concept off-screen location

• Located in the circle center

• Reaches into the display window

Original off-screen design [1]

DESIGN CONCEPT & IMPROVEMENT

ORIGINAL CONCEPT

• Off-line targets show in arc

• Circle size visualize distance

• Use Border to identify the ARC

• Details with the MAP context

IMPLEMENTS A MODIFIED STREETLAMP

METAPHOR

• Aura : infer the lamp’s existence

• Rings: minimize occlusion

DESIGN CONCEPT & IMPROVEMENT

DESIGN EVOLUTION

• Mono color (red)

• No visual link of direction

• Fading arc to indicate distance

HaloTheory

Interaction with an artifact

Real World

Wedge RainBall

Evaluation Evaluation

Simulation Prototype

Observation

DESIGN CONCEPT & IMPROVEMENT

DarkSlateGray 0x80C0FF3E

OliveDrab 0x80FFFF00

Yellow0x80FFA500

Orange 0x80FF82AB

PaleVioletRed0x8097FFFF

100m

300m

500m

1000

m0m

Co

lor C

od

e

Ra

inB

all

Modal

View

Controller

MODEL

Google map API V2 model, location data

model, location listener, touch event listeners

VIEW

map interface, markers, icons / circles view,

text, etc.

CONTROLLER

location sensor, event listeners control, touch

and gestures, etc.

RainBall Design Process1

2

3

4

5

6

7

Retrieve the Current Location

Receive location updates

Display a location

Monitor distance by location awareness

Test by using mock locations

Provide camera update

Separate proximity level

ISSUES & SOLUTIONS

ISSUE

• Google map API set up.

• Location precision problem

• The need to show targets in boarder

SOLUTION location-aware application

• Could listen to location change and

proximity of locations

• Geofencing: geographic boundaries - around specific locations

- receive notifications when the user

enters/leaves those areas

ISSUES & SOLUTIONS

How to Calculate the Distance between 2 Geo-points

BUILD-IN CLASS

public static void distanceBetween (double

startLatitude, double startLongitude, double

endLatitude, double endLongitude, float[]

results)

Parameters

startLatitude the starting latitude

startLongitude the starting longitude

endLatitude the ending latitude

endLongitude the ending longitude

Results an array of floats to hold the

results

MATHEMATICAL METHOD

Haversine Formula

dlon = lon2 - lon1

dlat = lat2 - lat1

a = (sin(dlat/2))^2 + cos(lat1) * cos(lat2) *

(sin(dlon/2))^2

c = 2 * atan2( sqrt(a), sqrt(1-a) )

d = R * c (where R is the radius of the Earth)

ISSUES & SOLUTIONS

How to Set Radius to Ensure Fixed Padding in Screen

Dx = abs(placelocationPixels.x – targetlocationPixels.x)

Dx = abs(placelocationPixels.x – targetlocationPixels.x)

Ox= Dx – ((screenSize.x / 2) – padding)

Oy= Dy – ((screenSize.y / 2) – padding)

If (Ox < 0) Ox = 0

If (Oy < 0) Oy = 0

Radius = sqrt((Ox*Ox) + (Oy*Oy))

REFERENCE[1] P. Baudisch; R. Rosenholtz. Halo: a technique for visualizing off-screen objects. ACM Conference on Human Factors

in Computing Systems (CHI 2003); 2003 April 5-10; Fort Lauderdale; FL. NY: ACM; 481-488; 2003.

[2] S. Gustafson , P. Baudisch and C. Gutwin , P. Irani, Wedge: clutter-free visualization of off-screen locations, in

Proceedings of the SIGCHI Conference on Human Factors in Computing Systems, Pages 787-796, 2008.

[3] T. Moscovich, F. Chevalier, N. Henry, E. Pietriga and J.-D. Fekete, Topology-Aware Navigation in Large Networks, in

Proceedings of the SIGCHI Conference on Human Factors in Computing Systems, Pages 2319-2328, 2009.

[4] Ghani et al, Dynamic Insets for Context-Aware Graph Navigation, EuroVis'11 Proceedings of the 13th

Eurographics / IEEE - VGTC conference on Visualization, 2011, Pages 861-870.

[5] Google Map API V2, Android

Android Demo

1 2

43