My Attempt To Make The Map Series StoryMap “More Maps” Button More Intuitive

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.

For all of these, I’ve added organizational branding and user experience enhancements with CSS and JavaScript.  During the development of our Hazard Mitigation Plan map, I discovered a point of contention with the Map Series template (I think Shortlist has the same “issue.”).  It deals with a button that when clicked, opens a list of additional maps to select from.  The button has not text, but a glyphicon symbol.  In this article, I’ll share my solution to helping users better understand the meaning of the button.  My final solution involved adding a tool-tip when users mouse-over the button.  You can check out this solution by visiting our Municipal Comprehensive Plan Maps site.

The final solution to the user enhancement was to add a tool-tip above the button.

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.

The HTML markup for the “more entries” button

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.

My first attempt was to add the words “More Maps” within a span element that was a child of the button element.  In the custom-scripts.js file, I added two lines of code to create a span element and append it to the button element.  As jQuery is loaded with the StoryMap app, my code samples use it instead of Vanilla JavaScript.

define(["dojo/topic"], function(topic) {
// Custom Javascript to be executed while the application is initializing goes here

   // The application is ready
   topic.subscribe("tpl-ready", function(){
      // Custom Javascript to be executed when the application is ready goes here
      // button element that toggles list of additional map tabs
      const moreTabsAnchorElement = $('button.dropdown-toggle');
      // add span element with informative text as last child element within button element
      moreTabsAnchorElement.append('<span>More Maps</span>');
   }); // end tpl-ready
}); // end dojo/topic

First iteration of map enhancement with “More Maps” helper text

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.

The legend button and more maps button collide.  The legend button does not work.

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.

Whenever a user would mouse-over the button representing the list of more maps, a tool-tip would appear over the button with text that states “Click for more maps.”  And when the user would move their mouse off the button, the tool-tip would be hidden.  A little bit a JavaScript and some CSS would solve this.

define(["dojo/topic"], function(topic) {
  // Custom Javascript to be executed while the application is initializing goes   

     // The application is ready
     topic.subscribe("tpl-ready", function(){
        // Custom Javascript to be executed when the application is ready goes here
        // button element that toggles list of additional map tabs
        const moreTabsAnchorElement = $('button.dropdown-toggle');
        // element containing text about more map tabs
        const moreMapsHelpElement = '<span id="moreMapsHelp">Click for more maps</span>';
       // add element as a child to #nav-bar element
       $('#nav-bar').append(moreMapsHelpElement);
       // show the help text about more maps on hover for more tabs button
       moreTabsAnchorElement.hover(function() {
          $('#moreMapsHelp').toggle();
       }); // end tpl-ready
     }); // end dojo/topic
});

The tool-tip now informs users that the button can be clicked to show more maps

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.

Advertisement