8

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

  • 1
    Well the first issue appears to be more of an implementation problem. The page only reloads when the user navigates to a new page and then goes back. If you don't want that to happen don't navigate them to a new page. – DasBeasto Jul 27 '16 at 18:55
  • @DasBeasto what do you suggest we do? Have pages open in new tabs? – Dan Bamberger Jul 27 '16 at 18:56
  • 2
    well I personally don't mind the reload as it is pretty expected when navigating between pages, but if you want to avoid it I would suggest treating the page like a Single Page App. i.e. clicking the POI sends an AJAX call and changes the viewstate by loading everything below the header/nav to be the new page info. Then on back button just pop that viewstate off the history stack and go back to the map without ever leaving the page/reloading. – DasBeasto Jul 27 '16 at 19:07
  • BTW, the site does in fact work on mobile, although it is a bit laggy. I tested it by checking Chrome's "Desktop site" checkbox. – Solomon Ucko Dec 31 '18 at 15:20
0

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.

  • Do you mind clarifying the following statements- 1) "I would leave this lateral tab always open", what do you mean by "lateral tab". 2) What do you mean by designing the buildings in a less "skeuomorphic" way". Do you have any examples of this? Thank you very much for your thoughtful response. – Dan Bamberger Feb 25 '18 at 15:22
  • 1) The lateral tab is where pics and info are displayed in your website. 2) By skeumorphic I mean that buildings should be designed with less details and not so realistic – Marco Tatta Feb 25 '18 at 21:36
0

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.

Screenshot

  • 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.
  • Thank you, Johnny. Do you mind clarifying what you mean by "fly-out"? Thanks for your thoughtful input – Dan Bamberger Feb 25 '18 at 16:08
  • Man, that was ages ago. I believe I'm referring the space that shows the details about the selected property. – Johnny UX Feb 27 '18 at 18:44
0

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): enter image description here

Hope this helps.

  • Thank you Ivan. Do you mind clarifying what you mean by the following: 2) Text skewing is incorrect and 3) Font is not comfortable. Thanks again for your thoughtful response – Dan Bamberger Feb 25 '18 at 16:25
  • @DanBamberger, I have edited the image and added a link to comfortable fonts for you. Hope this helps. – Ivan Venediktov Feb 26 '18 at 10:00
0

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.

0

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.

0

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.

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.