A Blue-Dot Experience
(Part I)

October 18th, 2016

Welcome to the first part of my blog series, A Blue Dot Experience. In this three part series I will share some tips and tricks I have learned from working with the user experience of indoor positioning systems. More specifically the look, feel and behaviour of the user position, or what is commonly referred to as the blue dot.

During my time here at Senion I have got a lot of experience of the blue dot. I have seen the blue dot grow from a single black line to the smooth blue dot we have today in our applications. The road hasn’t been obvious, and it couldn’t have been done without all the experience we have obtained together with our customers over the years.

Actually, one of my first contributions to Senion was turning the blue dot into an actual dot, that is blue. Before there was only a black line to visualise the position and the heading.

senion-old-blue-dot

As you can see the visual appearance of the user position was not the main focus in the beginning. While the black line did show the position and heading of the user, it was not that great of an experience. The blue dot has gone through several updates after that, continuously improving the look and feel.

With this post I want to briefly go through some simple tips that can improve the visual appearance of the blue dot.

Interpolation algorithms

There are many different ideas and implementation on how to update the blue dot on the screen. The simplest solution is to just update the screen with the new position. However, this will result in a very jumpy appearance when the dot just appears on the new position.

A common solution that I have seen is by adding some sort of interpolating of the positions. One algorithm for this is the “moving average” algorithm. In short, it works by re-calculating the position as the average of the last couple of position updates. While this might seem like a good and robust solution, it often comes with some irritating flaws. When applying an interpolation on the position updates, it comes with the cost of responsiveness. This solution often gives a smooth result but to the user, it feels like the position lags behind.

While this might seem like a good and robust solution, it often comes with some irritating flaws.

As we can see in the image below, the moving average dot (shown in red) moves smoothly, but is delayed and will give a feeling of being off. Depending on how the moving average algorithm is implemented, the delay can be several seconds long. To the end user, this could be the difference between ok and wow!

rolling_raw2

Interpolation filters
+ Steady blue dot
– Loss of responsiveness

There has to be a better way.

Animate the position

After much tinkering, here’s what I discovered: instead of using a moving average algorithm, we can get both stability and responsiveness with the help of animation. The idea is very simple. Rather than trying to apply some algorithm to the position update, just animate the dot from the current position to the new position. Depending on how you have implemented your map, the exact solution will differ, but the main idea here is to just create a smooth animation from the previous position to the new position. If you are using Core Location on iOS or Animator on Android, you get this functionality built in. This might seem like a simple solution, but of all implementations I have seen and tried, this is the one, in my opinion, that resulted in the best user experience. The image below shows the animated dot (in green) compared to the actual “raw” position. As you can see, the animated dot follows the actual position more closely and will give the user a smooth and responsive experience.

animated_raw1

After writing the first draft of this post I found myself on the train between Linköping and Nyköping. I thought, how has Apple and Google implemented the blue dot in their Maps applications? So I opened Google Maps and looked at the dot when traveling through the forests of Kolmården. What I found was far from great. The blue dot was jumpy and no animation of any sort was applied to its movements. Also, since the app was designed to be used on roads it often snapped to the closest road whenever one was close enough. I then opened Apple Maps and here I found a much smoother blue dot. Whenever a new position was received, it animated to the new location. So there you have it – two different approaches to this issue in everyday apps.

***

This was the first part of my blog series. Stay tuned for Part 2, in which we will go through and discuss the size of the blue dot, how the indoor environment differs from traditional GPS user interfaces, and why it matters.

The entire guide along with technical documentation on how to implement these concepts in your app is available on our Developer portal.

If you have any ideas you’d like to share, or questions to ask on this topic, don’t hesitate to send me an email and I’d be happy to discuss further.

Tim Bjärengren

Tim is a Senior Software Engineer and Front End Specialist at Senion.

UX Guide

A Blue Dot Experience (I)

Read more ➜

UX Guide

A Blue Dot Experience (II)

Read more ➜

UX Guide

A Blue Dot Experience (III)

Read more ➜