How to improve the user experience of an illustrated map?

Question

Are there any recommended suggestions to improve the interaction cost for an illustrated map? More precisely, any time a user clicks on a "point of interest" and then goes back to the map, all items load again. Also, from usability testing and watching analytic recordings, it seems as if users aren't clicking all the way through and instead just "hovering" over illustrations on the map. Any suggestions on how we can get users more engaged with the map content? Are there any other sites that have set a good precedent for this?

Link to map here: http://thebambergergroup.com/map/murray-hill/nyc

Answer 1

Here's my two cents. I understand that you're looking for advice from colleagues in this questions, but my biggest piece of advice is to remember the user in "user experience. I would put this same question to your users and see what they need.

First, I'd say I agree with most of the previous comments in regards to the programming and image quality. Now I'll go onto a user perspective.

• I would move your conversation prompt away from the zoom control. When it first loaded it was over the zoom control and took me a second or two two figure out how to close it. (couldn't get it to pop up a second time for the screenshot)
• Second, I would make the close conversation control a little more obvious.
• I would consider instead of using a fly-out for the property details to use and overlay or modal window. The way the fly-out currently works it actually provides me with less information than hovering. So if your goal is click-through, consider providing the users with less information on the hover.
• You may also want to consider allowing users to click through from the prompt. The fly-out isn't a clean and clear user experience. The toggle would be an extra step for me, I want to see the properties available first. You may be able to put a prompt there to go through to the property page for the building info.
• Also the list of properties doesn't seem to need the pictures and the full details. Condensing this information to more of a list format, just showing the price and room count would give me the information I needed and if I was interested in learning more I could click on more details to see the pictures, building info, etc.. (also improve click through rates) by the way with this approach the fly-out would remain viable.
• Off topic I would also consider changing the icons from the google location marker to something more relevant, such as a bus for the bus station and a generic monument marker for other points of interest. The location marker threw me off at first, thinking this were less important areas of interest. If you're worried about visual density you can still lower the opacity.

Answer 2

The address should actually be visible without clicking on the "pin". The popup is good, but until I read your text I had no idea I can click on the building and something will happen. You should provide A short instruction for that.

To be honest, there is more than just clicking.

1. Buildings need to stop jumping and dropping shadow on hover - this is annoying.
2. Text skewing is incorrect (wrong way).
3. Font is not comfortable. (comfortable fonts)
4. Building should be SVGs for smooth zoom.
5. This should not be happening when holding left mouse button):

Hope this helps.

Answer 3

First of all, very nice work. my only issue is the lack of 'texture' on the ground. instead of grey perhaps it could be colour coded? Perhaps green for fields? just a little suggestion but i think it would greatly add to the user experience! hope this helps, Leo Cornelius -CEO of Cornelius innovations.

Answer 4

Not an answer to the question of clickthroughs specifically, but a comment on the map nonetheless.

It won't load on mobile. When I switch my browser to 'desktop mode' the site works just fine, albeit a tad slow. So the site is intentionally blocking me based on my browsers user-agent, and not based on features or plugins like flash. This is a surefire way to lose traffic.

No it isn't great UX to load a laggy page (though I think the page could be optimized a lot), but it's better than nothing. Especially if you swap the "mobile not supported" popup for a "not optimized for mobile" disclaimer.

Answer 5

I like filters; like price ranges for real estate. A filter with dollar signs above the property showing there is something available for sale. Maybe a red dollar sign indicating a price drop or an green for a price increase and another color for no change in price. I like Zillow's feature where you can circle an area to search. I needed the tool tip on how to use it at first but I was a fun feature to use without so much layering that obscured my view of the map.

Answer 6

I think Ivan's recommendations are good. I would like just to add my ideas:

the whole map reloading is a nonsense. Just code it better, leave the page loaded in the browser cache, there is no need to re-do the whole query and wait for the response from the server. This is a simple technical improvement.

I would rather use a map like the airbnb map. Minimal infos are displayed and on the click/tap more information an links are displayed on a lateral tab.

I would leave this lateral tab always open. I would find it more clearly designed.

I would move the chat message popup on the upper right corner, it displays over the +/- button and it is annoyng.

To me the map is very fancy but not very usable: so many POI needs a deeper level of zoom, a view from above (not isometric) and a little less colors and details. I would design the buildings in a less skeuomorphic way.