An illustrated interactive map has been designed for a real estate brokerage company trying to emphasize the focus on a particular subset of a neighborhood. The users are having difficulty figuring out the map is interactive and will provide additional info about a building when they click on it. (Right now they think it's limited to hover interactions). Website URL is thebambergergroup.com
Are there any recommendations on best usability practices for an animated map with isometric projections of buildings? How can we make it so users can intuitively figure out they can access more detailed info on a particular building?
Images detailing current and potential map UX solutions:
This is something that while it might seem trivial, users really like to see it. I'm not saying give them the ability to pan around NYC, but give them the ability to take any building and center it on their screen. When using maps, users want to feel in control and limiting zooming and panning doesn't help.
Currently, the user doesn't have any way to tell which buildings are or are not clickable. Many of those buildings are being used as filler to make it seem more friendly, however this is confusing. The buildings that users can't click on need to be smaller and less vibrant along with the trees and street lights. Granted, they are all the same color and style, but that might take your user a second to figure out (if they catch it at all). Either make all the buildings clickable, shrink the non-clickable ones (my recommendation), or remove the ones that are just there as filler.
Watch your edges
Something you need to keep in mind is what happens when the map slides over (as it currently does). Use the "Subway 33rd and Park" example. When your user clicks on it, the map slides and the subway disappears. This could throw off the user and make them forget where they are currently on the map, which would distract them from their current task and could potentially cause them to leave the page all together.
How can we make it so users can intuitively figure out they can access more detailed info on a particular building?
A few things here:
You have this already when the user hovers over the buildings which is good, but once the user clicks, there isn't a highlight or hover that shows which building is selected. This is important for giving your user an idea of where they clicked and where they need to go next on your map. Consider adding a highlight around the building that has been selected as well as dimming the area around it so the clicked building becomes the central focus of the user's attention.
I'm not sure how feasible this is, but on the initial load, you could have one of the buildings (maybe if one is a featured building of the month?) have a tool tip appear on it and say something like "Click here to find out more about the building of the month!". This would not only give users a look into how the application works, but also that there is more information available.
Related to the one above, consider keeping the sidebar there as a full time piece instead of appearing/disappearing. When no building is clicked, you could have contact info for the group in the pane. If you don't want it there all the time, I would at least make a small pull tab visible so your user can pull out the side bar if they desire.
Your UX solutions
In relation to your solutions, keeping the toggle buttons in the top left is good as it doesn't interfere with any of the clickable buttons (like the subway if it's in the bottom left). The tool tip is good, but it's very jarring, so I would blend what's already there with yours. I would use the color and opacity of what's there with the style (including the point and enlarging it) of yours. For the text, I would consider either expanding and including more information or doing as you suggested and removing it all together.
Make the map 'draggable' via click+hold+drag. Also, make it "zoomable" via scroll-wheel mouse.
Create map load sequence - On a clean canvas, load the buildings FIRST. Then load the map underneath. This way, people know immediately that houses are not baked onto the map and potentially more interactive.
Once the map is loaded, randomly select one of the buildings after the page loads, and show its detail. (see mockup below)
The map needs some cleaning up and refocusing. Some suggestions:
eliminate the 'raised grass' look.
make the Avenues more prominent.
make the road lighter, so the grid doesn't overpower the building.
Eliminate all trees and other houses that are not clickable.
I think #1-3 are relatively easy fixes that should help a lot. But the map really needs fixing visually.
After - (very very very crude mockup)
After 2- (with listing on the right side. When user clicks on a property in the listing, then the site will show the Detail view on the right, and the Map will reposition to reveal the highlighted property)
One thing that stands out to me is the disconnect between the illustration and the real world setting of all the buildings. Every building on that map is in a dense urban area. However, the map implies that they are spread out with massive green areas and trees in between.
As such, the map is creating a rather large disconnect with reality. I'd suggest you consider borrowing heavily from other real estate sites that leverage real world maps...even isometric views. Then, from there, highlight the buildings on the map you wan to highlight. This allows for some additional affordance for the user (they will see that some buildings are marked while others are not, implying the marked buildings can be interacted with on some level).