Home  Mapping Design recommendations

Design recommendations
for online mapping systems

How to use this page
This page is set up by naming & defining each map function or element within the following 3 groups:

1. Navigating the map
2. Interacting with the map
3. Cartographic items

Following the definitions, each function or element is given a set of design recommendations with supporting rationale. It is followed by an example that illustrates the design recommendations.

1. Navigating the map

Zoom
Magnify or reduce the scale of the map

An example that illustrates these concepts:

Pan bars or buttons
Bars or buttons surrounding the map that when clicked move the view of the map in the corresponding direction

An example that illustrates these concepts:

Pan map
A small box that represents the full map

An example that illustrates these concepts:

Additional discussion of navigating the pan map:
One of the design recommendations is to provide navigation of the large map through the pan map. I've seen this done in 2 different ways:

1. The user clicks on the pan map & the larger extent is re-centered around the click.
2. The user clicks & drags the box in the pan map to re-center the map.

I currently recommend the 2nd method, but also recommend user-testing to determine with evidence which method is best or how they could be improved.

Re-centering with a click
Click on the map & the map re-centers around the click

An example that illustrates these concepts:

2. Interacting with the map

Layer selection & activation
Process used to select or activate layers to be in the map

For this action there are 3 different methods that can be used:

Method	Number of layers added	Example
Checkboxes	Multiple layers at a time
X boxes	1
HTML links	1

Which method is best?
The decision to choose one of the methods should be based on the following considerations:

• User tasks-what will our users be doing to answer what questions?
• Map content-how are the layers related & to what degree do we want users adding layers?
• Usability testing-what method works best under actual use conditions with our audience?
• Technology decisions-what are the limitations of the technology in each of the methods?

Since we have not answered these questions, it's difficult to decide which will work best. However, we can look at the different methods & think about how they should be implemented.

Recommendations
The 3 methods have some common design recommendations & then below are additional recommendations for each method.

Recommendations for all 3 methods

Design recommendations	Rationale
Include complete directions for adding or deleting layers	Directions should be included for any non-html navigation.
Include an indicator of what layers are currently on map	This avoids time wasted by user adding to map what is already there & provides a snapshot of map content.
Include the layer legend as part of the activation/deactivation method	The user can tie the activation/deactivation of layers immediately to what appears or disappears from the map. It's a strong visual cue.
Provide definitions for the layers	The user should not have to guess what the layers mean.
Definitions should be displayed through a pop-up window individually & a single page for all the layer definitions	The pop-up allows the user a short-cut to individual layers with ambiguous names. The single page allows printing & documentation.
Include enough space for long layer names	Abbreviations may not be meaningful to the user.
Do not give users the ability to turn off layers that are necessary for the map	Certain layers are necessary either by providing context or for supplementing other optional layers & should not be removed from the map. Furthermore, these layers should be separated visually from the other layers.

Below are recommendations for 1) the checkbox and 2) the X boxes & HTML links.

1) Checkbox recommendations

Design recommendations	Rationale
Do not load new layers without user permission	Checkboxes imply users choose when to submit or change something.
Allow for adding more than one layer at a time	Checkboxes imply multiple selection (as opposed to radio buttons).
Phrase the submit button appropriately to task, i.e. Add layers to map, Add changes	Meets user expectation by matching verbiage to task & directs user attention to the map.

2) X boxes & HTML links recommendations ,

Design recommendations	Rationale
HTML link & x boxes: minimize reloading time	Since these methods add one layer at a time, long reload times for each layer added would damage the user experience.
HTML links only: Provide a method for the user to remove layers that they have added	We don't want the back button used, & we want to reassure users that they can always remove the layer.

Identify
Method that provides access to additional information about places on the map

An example that illustrates these concepts:

Non-map information display
How information about a geography is displayed or communicated to the user

3. Cartographic items

Legends
An explanatory list of the symbols and/or geographies on the map

An example that illustrates these concepts:

Labels
Display of the name of a point or location on the map

An example that illustrates these concepts:

Scales
Indication of the relationship between distances on a map and corresponding actual distances

An example that illustrates these concepts:

Titles
A descriptive name for the contents of the map

An example:

Home  Mapping Design recommendations

Greater New Orleans Community Data Center [email protected] Copyright © 2000-2002 Greater New Orleans Community Data Center. All Rights Reserved. Last modified: January 13, 2004