Best way to display photos associated with places on a map?

Question

I have a zoomable, draggable map (leaflet) showing pin points of addresses across a city. For each of those addresses, I have a photo of the building at that address. The photos are big, high-rez shots -- not google street view.

Is there any conventional wisdom (or data) on how to display the images associated with the pin points. I can think of a few options:

• You click a pin point and a big dialog opens, showing the photo. The advantage to this is that the photo looks great. The disadvantage is that you have to click to see the photo: extra step.
• You hover over the pin point and a small photo window opens around your mouse, almost like a tool tip. I don't usually like these because the photos are too small to tell you much.
• I split the screen showing the map on the left and the photos on the right. Whatever point on the map is closest to the users mouse gets its photo shown on the righthand side. The disadvantage here is that you lose some of the detail in the photo, as opposed to the popup.
• A pane in the corner of the map showing the photo.

Are there are other ways? Is there a conventional wisdom on how to do this?

Mobile-friendly is good and -- but not the primary consideration in the design. I can modify some of the coding for small phones.

A little context: I work for a news organization. The city says it has demolished or fixed blighted properties. The photos show if the properties are really fixed -- or just counted as not blighted.

Answer 1

With the information that you provide, I think one of the best options is the combination of one and two. When the user hovers over the icon, a small picture appears, but also add a link text above or below the picture telling the user that there is a better, bigger and more detailed picture.

The picture that should appear when the user hovers shouldn't be the big one just resized to fit the tooltip, it should be small enough, yes, but it should contain only the main relevant detail of the picture, that way you don't lose that much quality and provide enough relevant information to the user to make the decision to click on the link and see the detailed picture.

If the big image has to be analysed, and by that I mean that the user has to check the photo calmly an look for something on it, then open the photo on a new tab/window so the user can really see the image with all the detail, don't use modal windows. If the image is relevant but not detail critical, then you can use a modal window.

In any case, this design doesn't seem to account for disabled people since the action would be happening on a hover state. If you can also provide some listing of the elements that are on screen, it would be a good idea.

Using sections of the screen for the image doesn't seem like a good idea unless the big picture is not that relevant. Not to mention that a design like that would be difficult to move to a mobile version if you decide to do it.

Answer 2

Case 1: deep photo insight

It seems that your users really have to take a deep look at the photos, which is the main reason why the shots are hi-res. If I'm not wrong on this point, I would suggest that clicking/tapping on a pin would navigate the user to a new page, here's why:

• more screen real-estate: hiding the map and giving the user a real new page means that you have all the pixels available to give more context to your photo and reduce noise around your content (you can include a mini-map somewhere in the page to recall the item's position);
• showing a big popup over the map will inevitably hide the majority of the map surface (unless for big desktop screens with your app opened fullscreen) making it rather useless;
• this solution is mobile-friendly: modals and big popups are not welcome on mobile systems; a real "back" button will be more meaningful than some kind of "tap-somewhere-out-of-this-box-to-close-it" logic.

Case 2: quick overview/scanning

The previous solution is obviously not valid if your users are simply having a quick look to the photos to have build an extended "idea" of a certain area, in that case, I would suggest two options:

• (mobile friendly) display a small popup when tapping on the pin. This small popup would contain a "thumbnail" of the photo, which will give access to the page of the item (in other words, you access the page only if you really want to see the big photo);
• (mobile unfriendly) display a set of thumbnails-photos of the items in a marginal area of the screen: hovering on each thumbnail would activate the corresponding pin or even show an arrow that connects the thumbnail with the pin (this one is used in the new GoogleMaps).

Answer 3

A small preview by hovering over a pin, and a larger photo set by clicking on it, takes the user progressively to higher engagement, while they stay in control.

Answer 4

Hover is the best option here. For mobile-friendly design replace hover by first tap on touch devices.

You can set one tooltip with the photo open as a default, to hint that the map is active. Corresponding position in the list of buildings/regions should be highlighted simultaneously.

Photo in the pane is a second best option, however, as the action (hover) and the result (pane) are far from each other, users tend to miss the link between the two, or focus primarily on cursor, ignoring changes in other parts of screen. If you decide to go with pane, top right corner of the map is the best place for the pane.

Don't forget to add a caption saying that this map is active on top of the map or in the text.