A Blue-Dot Experience
(Part II)

November 1st, 2016

Hi and welcome to the second part of my series on user experience tips and tricks for indoor location apps.

If you haven’t already, check out the first part where we talked about different ways to improve the movement of the blue dot.

While indoor positioning has a lot in common with the outdoor GPS services we use regularly, there are some distinct differences. One of them is the scale of things. In this article we will take a look at how we should adopt to this change in environment to enhance the experience.

Improve the perceived accuracy

To create a great map experience, it has to work at both a large scale and when you look at specifics. It has to work on all zoom levels. If you open up your favourite map application on your mobile device and look at the blue dot on different zoom levels, chances are that it is the same size on all of them. For example, here’s Apple Maps’ blue dot shown on two different zoom levels.

apple-maps-blue-dot-size1

While this is a great solution on an outdoor map, some tweaks must be fixed when using it inside.

Lets look an indoor map, for example a large mall, and apply this same fixed size blue dot. If we first look at the map at a large scale, where you see the whole map at the same time. Here we will expect to see the blue dot hovering over the area of the building where we are and this is just what will happen. This is the desired behaviour in this case and I have no objections about it. In this case, there shouldn’t be any difference between an outdoors and an indoors map view.

Let us then zoom in to get a more precise idea of our location. We are inside of a store and would like to see where. If we now would zoom in close enough, the size the blue dot represented on the map might becomes quite small. Depending on the size of the store and the size of the screen, the diameter could be as small as a few decimeters. This would result in what I like to call a “nervous”-dot, where the perceived accuracy is rather coarse since the dot moves around a lot. We can see this behaviour in the image below. It shows a blue dot with a diameter of 0.5 meter, and due to its small size it moves around a lot even with small movements.

no-resize-when-zoomed

So, here we need to improve the solution from the outdoor maps. The fixed size dot does not work great in this case, so let’s tinker a bit with the fixed size criteria. To improve this case and remove the nervous behaviour I would recommend that you define a minimum diameter of the blue dot to be 2 meters. With this minimum diameter, we won’t allow the the dot to become to small. What we basically would do it that whenever a user zoom in close enough, we start expanding the blue dot. The visualisation below show you how this works. When the 2 meter boundary is reached, the blue dot starts to scale up with the zoom.

no-resize-vs-resize

Okay, so how would this look like on a map. If we look at the same case as before and apply this expanding dot. This will give us a much more stable dot and it won’t feel as nervous. The image below shows the same movements as the one above, but here the dot is 2 meter in diameter.

resize-when-zoomed

What might work in one environment, might not work as good in another. Indoor and outdoor location are based on the same idea, to show your location. However, to give you the best experience you need to apply the right solution for the right environment. With a minimum diameter for the blue dot you will improve the perceived accuracy and give your users a great experience which works on all zoom levels.

***

This was the second part of my blog series. Stay tuned for Part 3, in which we will take a look at different ways we can use the heading for optimal user experience.

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 ➜