4

I'm building a very small app that allows my users to post content to a map.

The home screen of the app contains a map with all of the posts (as seen below).

PROBLEMS

01 - if a user posts a post from the same area, two pins will be on top of each other so you won't be able to access one of them

02 - if a lot of content is posted it will be hard to click on each pin

03 - when you zoom all the way out, there will be too many pins

Can anyone recommend trying anything else please?

enter image description here

  • What happens when you click on a pin today? – tohster Mar 20 '15 at 12:40
  • It loads the content (text based or image). The number reflects the number of likes it has. – oo7 Mar 20 '15 at 14:42
  • Sorry I meant, 1. is the content in a modal box, a slidein panel, a tooltip, etc? 2. What's the difference between green and blue pins? 3. What does the content look like... Is it posts from different users, is there a title to each post, etc? All of this is relevant to possible design approaches – tohster Mar 20 '15 at 15:09
  • Apologies, i'll explain the full process. Green = Posts (text based or photo based) from different users on the app. Blue = Questions (text based or photo based) from different users on the app (if someone drops a question, other users in that area receive a notification). When you click on a pin a new screen slides up, which looks similar enough to a Facebook post and you can comment under it. There is no title on the post. If you click the X the post slides back down. – oo7 Mar 20 '15 at 15:24
  • OK got it. I can answer but unfortunately it'll have to be tomorrow as it's going to take some explaining... – tohster Mar 20 '15 at 17:56
4

"How do I do clustering on a map correctly" is a common question in mapping applications.

Short answer: Clustering doesn't work. There is no such thing as good clustering UX, as clustering is not good UX.

The reason is simple: The user is either interested in an area, or a point. He might be interested in the density of an area (population, number of ice cream shops within 5 minutes of walk, whatever), but points have no density.

The "average" of two points will be neither of them. Sometimes this is meaningful (the average of the stones of Stonehenge might represent the monument), but most of the time, it does not make any sense.

This perhaps explains why neither Google Maps, Nokia Maps, or any other large-scale map providers don't have clustering on their map. Note: most of them had it in concept phase, Google Maps' even reached A/B test stage when it was dropped.

Of course, like for every UX rule of thumb, there are exceptions. So far I have seen only one: property adverts. It is a meaningful information how many properties are on sale in a given area, albeit the one I saw had the notion of districts and neighborhoods for clustering. (it's http://otthonterkep.hu/ )

The solution is also connected to this: you should decide whether you have areas, or point of interests. Of course, what might be a point from "above" could be an area when looked closely: for example, a city.

An area can have density, and then you can do density coloring of the area. If you don't have defined geographical areas for whatever reason, you might use heatmaps, or cell-based density information (which are essentially artifical areas).

Clustering is essentially density information shown as points - again, with no attached meaning.

Display density based on regions if possible, always show top questions of any view as a list beneath the map, and show individual questions only once zoomed in enough so that they can be safely tapped independently.

Suppose you consider heatmaps, in case you don't have regions.

One of my map products once defined maximal heat of restaurants as any point, from where at least 20 restaurants are within 5 minutes of walking distance, medium heat was 10 restaurants, and no heat was defined for any place where at least 2 restaurants weren't available - so single-standing structures wouldn't cause "heat", as heat was about choice and abundance.

This was zoomlevel-agnostic - a common mistake what heatmap providers do is that they measure in pixels instead of meters, therefore their map tells a different story on each zoomlevel.

Once zoomed in, you've seen places meeting the best 10% criteria (or, to be more precise: the ones who were over the neck of the exponential curve of ratings) highlighted with big icons, while the rest of them were little dots - something like Google Maps does if it still does it for "restaurant" searches.

I hope it answers your questions.

The author works at a map-centered company, had 2 map-based startups, and worked for one of the biggest map providers of the word as a UX Designer/Prototyper at the Map Design department.

1

You're already communicating two dimensions of information with your icons:

  • Number of likes
  • Type of icon (question, post)

You want to add a third dimension (multiple posts per icon). It's going to be difficult to do this because:

  • Having icons communicate more than 2 dimensions of information is not a good idea.
  • You are going to need some way to aggregate the number of posts / questions for a multiple icon.

Here's one possibility:

enter image description here

  • Use the + sign to denote some kind of aggregation of the likes contained within the multi-icon (e.g. select the modal number of likes, or the total number of likes.
  • Tapping on a multi-icon brings up a modal panel with the posts/questions in that location, then user can select which one she wants to see.

Implementing this will be really hard

Google maps, Yelp, Hotels.com, and many others have failed to do a good job here because the algorithms for geographical clustering aren't easy.

  • For example, imagine you have 10 points in a straight line.
  • Do you group them in to 2 groups of 5, 3 groups of 3 or 4, or 5 groups of 2?
  • Where do you determine the location of the multi-pointer? How are you going to do this in real time as the user zooms in and out of the map?

If you do succeed in creating decent zoomable clustering, please drop a note to show us your results because someone might buy your company just for that algorithm!!

  • 1
    Tohster, many thanks for the detailed reply, much appreciated. I have implemented clustering on a clien't website before - keaneauctioneers.com - so i was thinking of using a similar approach (circles to denote clustered pins). I will need to decide: 01 - what default zoom level is set when a user opens the map, 02 - different cluster rules for different zoom levels. For ease of use, i think i will just treat blue and green as one, and use a circle to denote a group of clustered pins. When you are filtering the map / display you also just to view the data (pins) in list view. – oo7 Mar 21 '15 at 11:18
  • Take a look at this does something similar to the above: github.com/jawj/OverlappingMarkerSpiderfier – Tahir Khalid Jun 9 '18 at 15:58
1

This is a common problem with maps. There is a solution called MarkerClustering. You can read more about it on the web. Here are some starting points: https://developers.google.com/maps/articles/toomanymarkers

And here is an example of its implementation: http://leaflet.github.io/Leaflet.markercluster/example/marker-clustering-realworld.388.html

MarkerCluster example

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.