[Feature] More functional area map pins

Bugs & Features
#1

Area maps have markers for rooms and sub-areas contained within, and clicking on items in the contents list pans the map to the corresponding pin. However, the pins themselves are non-interactive, unlabeled, and often aren’t very visible!

So here are a few things I think might improve the interface; maybe some of them work for Wolfery!

Labels and Interactivity

Right now the pins are nondescript, and it is difficult to understand the correlation between location and pin even with the auto-pan feature. This could be improved by:

  • Displaying the location name on the map when hovering over or clicking on the pin
  • Displaying the location name on the map when clicking the location in the area contents list
  • Highlighting the location in the area contents list whenever the pin’s label is displayed
  • Disabling auto-pan behavior if a location’s position is undefined or removed ⁽¹⁾

Visibility and Style

Because the pin marker is an earthen tone, it is very difficult to see on most maps. I also think pins could stand to be a bit more configurable to aid with map-specific design and better UX.

  • Pin color could be defined as a new parameter for areas and rooms
  • Pin icon could be defined as a new parameter for areas and rooms ⁽²⁾
  • Pin scale could be defined as a new parameter for areas and rooms
  • The zoom level used when auto-panning to the pin could be a third position parameter ⁽³⁾
    ⠀

⁽¹⁾ This affects, for instance, the Do’nezo area in the global Wolfery map, causing it to pan to the top-left corner with no apparent target and suggesting the user should be seeing something.

⁽²⁾ A link to an icon image or a predefined list of standardized markers; something like that.

⁽³⁾ The map currently auto-pans but does not change to an appropriate zoom level (nor is there a one size fits all approach that would solve this problem). The area owner can adjust this to ensure the pin for a selected location is unambiguous, and the underlying region is fully within the viewbox.

5 Likes
[Feature] More functional area locations list
#2

I have plans to improve the pins. Your ideas, which I think all sound great, just adds to my own thoughts!

Pin color

The only thing in your ideas that conflicts with my own thoughts are the coloring:
My thought was to color code pins based on population, so you could get a quick but rough overview where there are people. Maybe something like:

  • Grey : empty
  • Orange: 1 - 5
  • Yellow: 6 - 10
  • White: 10+

That would run into the same visibility issue, though. But this might perhaps be countered by a mode distinct outer shadow around the pin? Even if the pin color matches the background, the border would not.

Pin icon

What would you have in mind? Like a house icon for a building, or a fork/knife icon for a kitchen sort of thing?

As some point, I considered monochrome images as well, which could be used to draw the silhouette of the room you were in. But I found it too complicated for starters.

Pin size (scale)

You mean larger pin markers for larger areas, sort of thing?

Connect pins with lines

I have also considered adding lines between pins based on exists, to make it more clear how to walk to certain room on the map. However, due to how exits behave (being one directional, tied to rooms, destination not shared, etc.), I haven’t found a simple enough solution for it.

[Feature] More functional area locations list
[Feature] More functional area locations list
[Feature] More functional area locations list
#3

In addition to a drop shadow, choosing more bolder, saturated pin colors could also help them stand out from a background. I think it’d be more common to see a map with a less saturated yellow than #FFFF00, for example, than to see that bold and bright yellow, but that’s just an assumption. I think that the drop shadow, or maybe a bolder black outline would be the most beneficial to readability.

One option could be to only render lines from the user’s current room, let them know where they can go immediately, but not the whole route of available exits paths, this would remove the need to determine how to represent one-way routes. The other option would be arrows on one-way routes, pointing from the room with the exit to the one without one.

#4

Hmm…
Perhaps this could be the default behavior on pins with no defined color value? I do think I’d much rather have more control over the style of the map pins than have access to population information that, at least by my reckoning, is clear enough already, and will become clearer with the implementation of pin interactivity.

That being said, I think being able to upload pin icons would be a decent substitute, even if they were tonemapped to fit the population heatmap.

I’m definitely in agreement with this. While a starker outline does help, for accessibility purposes you still wouldn’t want to have a white marker on, say, a snowy environment. Having contrast on the bulk of the marker matters a lot in readability both for typical users and colorblind ones.

A safe metric for visibility is luminance, so if you imagine a greyscale version of the map and markers, you can see at once when things are sort of blending together. Even if you can make out the details perfectly fine with just a little focus, minimizing this hurdle goes a long way to reducing the impression of an overstimulating or “confusing” interface.

As to the rest, it sounds like everything’s on track, and I look forward to see what you come up with!