Ever since Esri released the StoryMaps platform, I was a fan. I remember working with the Lancaster County Planning Commission thinking about how we could deploy one of these for the Northwest River Trail. When I took the opportunity to work as a GIS Specialist with Cumberland County, I built my first StoryMap showcasing the disc golf courses within our county.
I’ve built a few web map applications using the StoryMaps platform. We’ve use Map Tour to showcase the Yellow Breeches Creek Water Trail; inform the public about how our Capital Bridge Improvement Program is progressing with Shortlist; and built a tool (Planning Review) to assist planners with Map Series.
A Visually Ambiguous Button
When you have Map Series in the “Tabbed” layout, the app appears to put as many map tabs as possible. Clicking on a tab activates a new map to load. The tabs are list elements with a child button element. The last tab in the row has a span element with the “glyphicon-th-list” glyphicon symbol. The span is a child of the button. I assume this icon is supposed to represent more maps. Whenever you click the button, a drop-down list appears with additional maps to choose from.
The span has an aria-hidden=true value. The button has an aria-label=”More entries”. I think that part is good. I wish that last tab would have text that states “More Maps” or “More Entries.” That way it would be even clearer that the tab is related to accessing a list of more maps.
Solution #1 – Explicit Text Within Span Element
Frustrated that users were presented with an icon instead of descriptive text, I set out to improve the user experience of understanding there were more map tabs to discover.
Now, it would be easier to navigate this map application! Users would clearly see that this last button represented more map tabs. I felt great until I received an e-mail from a user that the map legend wouldn’t work. The app was still in the development stages, so it wasn’t at production yet.
This user typically uses Internet Explorer 11. Most users within my organization use this browser by default. Most users also have a smaller computer monitor. So I tested in IE11 with a smaller browser window.
What I discovered was that the “More Maps” modified button and map legend button were colliding with each other. Users could click on the button to view more maps. But when users would click on the legend, nothing would happen.
After experimenting with different font sizes for the map tabs, it appeared that the Map Series StoryMap template was built to put as many map tabs on the navigation row as possible. And it would leave just enough room for the tab that represented more maps. Furthermore, I wasn’t able to consistently reproduce this issue on Google Chrome.
Solution #2 – Add A Simple Tool-Tip
At this point I was annoyed. My brilliant solution was not brilliant. And it was definitely not a solution! Back to the drawing board I went. As I considered possible steps forward, the idea of a tool-tip came to mind. It wasn’t as good as explicit text on the button. But it would still inform users about the presence of more maps to select from.
I would still like to see the button element that provides access to the list of additional map to have meaningful text instead of a cryptic symbol. Perhaps someday I’ll figure out a better solution. But for the time being, my tool-tip will have to suffice.
If you have any ideas on how to improve this user experience enhancement, please share by leaving a comment. If you’ve worked with the Map Series StoryMap, or any StoryMaps, I’d love to hear your take on this as well.