Are there any recommendations on best usability practices for an animated map with isometric projections of buildings?
From a cartographic perspective, you should follow the same guidelines as working on a regular web map. From what I can tell, you have most of them. I would consider a few things though:
Zoom and Pan
- 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.