1

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:

Current Map UX

[Current Map UX]

Our UX solutions

Our UX solutions

Live version

Live version of the map

Improve this question
9
  • Welcome to the site, @Dan. As phrased, this question might end up closed as off-topic for being too specifically tied to one site. You may want to consider abstracting it out a little bit to ask about best practices for showing interactivity on animated maps with isometric projections of buildings.
    – Graham Herrli
    Oct 21, 2015 at 18:52
  • In usability studies, I've encountered the opposite issue, where people expected a map to be interactive when it was fairly static. The map I was studying was two dimensional (with no isometric projections), clearly to scale, and used conventional visual language of a map. Perhaps one or more of these attributes impacts why people aren't perceiving your map as interactive.
    – Graham Herrli
    Oct 21, 2015 at 18:54
  • Thanks, I've abstracted the question drastically @GrahamHerrli. Can you clarify what you mean by "conventional visual language"?
    – Dan Bamberger
    Oct 21, 2015 at 19:03
  • Is there a particular reason they went with an oblique view like that? I could see buildings getting lost behind other buildings
    – BDD
    Oct 21, 2015 at 19:14
  • Thanks for asking for clarification, @Dan. By "visual language," I mean that many interactive maps have an implicit legend such as showing major roads as wider than minor roads or shading public parks differently from buildings. The map you have looks so uniform that it may come across as more of a cartoon than a map. It also uses many of the same visual styles (high saturation, isometric view) that are common to paper tourists maps, which are not interactive.
    – Graham Herrli
    Oct 21, 2015 at 19:14

3 Answers 3

Reset to default
2

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:

  1. 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.

  2. Visual Hierarchy

    • 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.

  3. 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:

  1. Visual Feedback

    • 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.

  2. Initial Load

    • 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.

  3. Side Bar

    • 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.

Improve this answer
14
  • 1
    Interesting. Were you able to take a look at the proposed solutions above? Some users have also commented that the map is too "cartoonish" for the sale of real estate, and negatively impacted their perception of the business (too childish). I've been looking at mapzen and mapbox for solutions, but at first glance it seems like quite a bit of work to implement. Outside of your suggestions, do you think there's any simple way to change the feel to that of a more "serious" business?
    – Dan Bamberger
    Oct 21, 2015 at 20:08
  • I updated my answer to talk about your solutions. As far as an outside solution, I would go with Mapbox. They have the support and capabilities you could use to make this map less childish. And I know it can seem like a lot, but it's actually pretty straight forward to get a simple web map up and running with Mapbox.js. I would take some time to look through some of their other examples related to real estate and see if it would work for you.
    – BDD
    Oct 21, 2015 at 20:21
  • Really interesting. Main issue with out of the box solutions is that it doesn't emphasize enough the particular buildings and businesses we're focusing on (we're marketing partners w/ local biz and focusing selling on particular buildings). Most real estate sites focus on a very broad geographic range, so it's fine for them to plant a pin or some other basic icon that indicates a point of interest. Whereas we are so hyperlocal, it's important that the design properly conveys that. What do you think of laying our current illustrations on top of a mapbox map replacing our current background?
    – Dan Bamberger
    Oct 21, 2015 at 20:29
  • In addition, some of these other out of the box maps don't seem to have a perspective that's at eye-level yet rather from a birds eye view that would make it difficult to understand
    – Dan Bamberger
    Oct 21, 2015 at 20:33
  • Ahh ok. My guess is people thought it was cartoony because it follows a very flat design for the map. I would consider one of two things. One would be adding some texture to the map to make it seem more realistic. The other would be to go with a regular slippy map. See here
    – BDD
    Oct 21, 2015 at 20:34
2

I visited the site.

http://thebambergergroup.com/

A few suggestions:

  1. Make the map 'draggable' via click+hold+drag. Also, make it "zoomable" via scroll-wheel mouse.

  2. 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.

  3. Once the map is loaded, randomly select one of the buildings after the page loads, and show its detail. (see mockup below)

  4. 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.

Before enter image description here

After - (very very very crude mockup) enter image description here

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)

enter image description here

Improve this answer
14
  • Thanks, Jung. For clarification: what do you mean by "raised grass" look?
    – Dan Bamberger
    Oct 22, 2015 at 3:19
  • Also, we have the waterfall style dropping of the map earlier, is this what you mean? bamberger.nightowls.co Any thoughts on any of the other suggested ideas in the image I attached in the original pos
    – Dan Bamberger
    Oct 22, 2015 at 3:33
  • @DanBamberger oh by 'raised grass', if you look closely at the current map, it looks like each square is elevated slightly above the roadway. making it look 3d and look like all these buildings are sitting on grassy suburban residential block, which certainly isn't the case in Manhattan. I think the earlier version's animation helps, as does the graying out of other buildings. Also, the zoomed-in scale of the map works better. In the mockup you pasted, I think the last one works the best. I think it's important to show Detail view popup for a building on page load.
    – Jung Lee
    Oct 22, 2015 at 5:05
  • @DanBamberger What I listed above is really a stop gap solution. In my opinion, what this page really need is an intuitive, easy-to-scroll listing on the right / left side of the home page. The list would contain name, location, and unit for sale/rent for all the properties... one row per property. As user hover overs the listing, then the corresponding house on the map hovers over. This way, user doesn't have to click through over a dozen different properties.
    – Jung Lee
    Oct 22, 2015 at 5:14
  • Thanks, Jung. Super helpful. I'm having some trouble visualizing some of your recs which I plan on implementing. Can you clarify precisely what you mean here? "what this page really need is an intuitive, easy-to-scroll listing on the right / left side of the home page. The list would contain name, location, and unit for sale/rent for all the properties... one row per property. As user hover overs the listing, then the corresponding house on the map hovers over"
    – Dan Bamberger
    Oct 22, 2015 at 5:26
0

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).

Improve this answer
1
  • Thanks-- do you have any more specific examples of what you're speaking of?
    – Dan Bamberger
    Oct 22, 2015 at 17:35

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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