Designing Great Web Maps
1 like741 views
This article by Aileen Buckley offers guidance on designing effective web maps, emphasizing the importance of responsiveness, clarity, and user interaction. It outlines key considerations such as map purpose, content expectations, design elements like color and symbols, and technical aspects like resolution and projection. Ultimately, understanding how to cater web maps for digital users can enhance their utility and engagement.
Designing Great Web Maps
- 1. Designing Great Web Maps By Aileen Buckley, Esri Mapping Center Lead Comparison of the web Mercator (left) and Winkel Tripel projections (right) Web maps have characteristics that make them different from print its functions should respond rapidly and its purpose should be im- maps or other on-screen maps. This article will help you take those mediately understood. Users also expect what they are viewing to differences into account and create more effective web maps. be of immediate and personal use to them. These characteristics A web map is a map and related content presented in an online en- challenge web mapmakers to design maps that possess high levels vironment with an appropriate interface and optional functionality of graphic and information clarity. for queries and reports. For mapmakers using Esri software, a web Since the web environment is well suited for interaction, more in- map is compiled in ArcGIS for Desktop’s ArcMap, and the interface, formation can be immediately shared using mouse-overs, ToolTips, map elements (e.g., legend, scale bar), query elements, and report ele- information boxes, labels, and hyperlinks. It is possible to show less ments are created using the ArcGIS viewers or ArcGIS APIs, avail- on the map itself (e.g., labels or detailed features) and still convey in- able for JavaScript, Flex, and Silverlight. A web mapping application formation. The map can be linked to databases that report attribute refers to both the script that is created to define the interface and the information, display images, play sounds when users click related elements and functions provided through the interface. map features, or perform analyses by accessing geoprocessing func- When designing a web map, as with any map you make, the first tionality. Web maps can also be portals for downloading or upload- thing to ask is, “What is the purpose for this map?” The answer will ing content. disclose the map’s audience and how it will be used by that audience. Web Map Content Why Web Maps Are Special Users will likely also have certain expectations for web map content. Typically, web users have relatively short attention spans and high They expect current data and sometimes continuously updated data expectations. They do not focus long on content or tasks before be- (e.g., maps that show monitoring sites). They also expect interac- coming distracted, so not only should a web map display quickly, tive maps that support zooming at a minimum but also potentially 50 au Summer 2012 esri.com
- 2. Special Section: Web Maps support query, analysis, and customization. For larger-scale maps, the web Mercator projection. users expect detail and realism. They may even expect the data used If you use a different projection, anyone who wants to use your to make the map to be downloadable and free. As with print maps, map in a mashup will have to use that same projection. If you do data should be complete, consistent, and authoritative. not think anyone will use your map in a mashup, consider alternate projections such as modified Winkel Tripel projection. Making Web Maps Color The workflow for making web maps encompasses four primary Today, computers can display millions of colors, so using web-safe activities: designing the information to be shown on the map, de- colors is a moot issue. Almost every web map is in color. However, signing the map, designing the user experience, and promoting the color on the web is different than color in print. This will have an finished web map. impact on your maps’ appearance. When designing the information to be shown on the map, con- In print, colors are comprised of ink pigments. Using the subtrac- sider not only how the data is modeled but also its completeness, tive color system, these colors are perceived by the viewer as the re- timeliness, and authority. Determine if there are aspects of the data flection of light by the pigment on the page. On a computer monitor, that must be added when compiling the map. When designing the colors are made up of colored light. Using the additive color system, map, consider how the web interface can be used to communicate colors are created by combining red, green, and blue light in different the map’s message and make it appealing to its intended audience. proportions and intensities. The color white is produced by combin- When designing the user experience, consider how users will inter- ing red, green, and blue light at full intensity. act with the map and its related information. Once the map is fin- ished, promote the map not only to its intended audience but also other potential audiences to maximize its value. The additive (top) and subtractive (bottom) color systems Compiling a Web Map Before compiling a web map, you have to determine a few things. What size will it be and what geographic extent will it show? Given those parameters, the map scale and resolution can be determined. Next decide which map projection is best. Choose the colors, fonts, and symbols and decide what to show in the map margins. General guidelines will be given for each of these areas. While this is not an exhaustive set of recommendations, it should help you get started. Size Although web maps are usually designed for a 17- or 19-inch LCD monitors—because that is what most people have on their desk- tops—web maps can also be viewed on other devices such as Tablet PCs, smartphones, or iPads. Design for the primary delivery mode. Sometimes a map design will work well on devices other than the primary delivery mode. Sometimes it won’t. Geographic extent Because users can pan and zoom, the geographic extent of the map can be greater than what is shown on the screen initially. Sometimes it is useful—and necessary—to restrict the map extent. Other times, it makes more sense to provide a global view. It will depend on the map’s purpose. Map scale If readers can zoom in and out, the map scale will be variable. This means that a separate map should be compiled for each map scale to ensure that the zooming experience appears seamless. Learn more about how to do this in ArcMap by reading the Esri Mapping Center blogs “Creating a web map service” and “Working with layers and scale ranges: Tips for organizing the Table of Contents.” Map projection The map projection you use depends on whether the map will be mashed up with other web maps. For example, if you want your map to overlay with maps on ArcGIS Online, Bing, or Google, you’ll use esri.com Summer 2012 au 51
- 3. One consequence of using an additive color system is that light properties make fonts legible on screen. colors viewed on a computer monitor are overly luminous and too With the exception of Georgia and Palatino, these are sans-serif harsh on the eye for extended viewing. Also, the intensity of the light fonts. Serifs are the small lines or decorations added to the ends radiating from a screen displaying pure white can affect the clarity of of the main strokes of the character that theoretically help the let- fine detail in type, point symbols, and line symbols as well as intricate ters flow and lead the eye across text during reading. Serif fonts are patterns, such as rasters used to show hillshades or elevation tints. very popular in print. However, many designers and cartographers Symbols believe that sans-serif fonts are more suitable for web map design To be legible, symbols and text must be large enough to be seen and because serifs compromise the space between characters. This holds distinguished from the background. Although the height of a text true for small blocks of text (e.g., labels on maps, titles, legend text), character varies from font to font, a rule of thumb is that text and but for large blocks of text, serif fonts are still easier to read. symbols should be at least 10 pixels high. That means using fonts Resolution 7 points or larger on a PC and 9 points or larger on a Mac. Computer display resolution is low when compared to print maps. The ability to distinguish a symbol from its background is called For desktop computers, it is common to design for a resolution of contrast. A table of color contrast metrics is a good guide for color 96 dpi (dots per inch) because all LCD monitors support this resolu- selection that will promote contrast. tion. Newer LCDs typically have a native pixel density of 120 dpi and Fonts 144 dpi. Choose resolution based on the type of computer your target When possible, use fonts designed for the web. A recent study identi- audience will mostly likely use. fied Arial (or Helvetica on Macintosh), Verdana, Georgia, Trebuchet, This low resolution, coupled with the color projection issue, will and Century Gothic (all installed on Windows systems), and Lucinda impact the cartographic design of a web map. Because screen dis- Grande and Palatino (installed on most systems) as the most popu- plays are pixels, nonorthogonal lines and sharp edges appear jagged. lar fonts for web design. Good web fonts have a generous amount of These jagged edges can be softened by adding pixels of intermediate space between characters and within characters (i.e., punch width). color between the object and the background (antialiasing), which A tall x-height also opens up the space within a character. These fools the eye into seeing a jagged edge as a smooth one. The luminosity of an image that is primarily white is taxing to the eye when viewed on-screen. 52 au Summer 2012 esri.com
- 4. Special Section: Web Maps This table shows color contrast metrics for combinations of colors for symbols and their backgrounds. Combinations that have higher values result in better legibility. Average Color Contrast Background Color Map marginalia Maps have two basic components: the map itself and information may not want to include a north arrow because orientation may vary about the map, commonly called marginalia (additional information across the map. Instead, including a graticule (latitude and longi- outside the edge of the map displayed in the margins). Map margina- tude lines) or other grid is a good alternative that helps address the lia includes titles, legends, scale bars, scale text, and north arrows, as scale issue as well. well as information about the data used, map projection, author, and For web maps, it is very useful to include the author and publica- publication date. With web maps, it makes sense to include some of tion date and information on the data. Users of web maps expect these items, but not all. data to be current and accurate and sometimes expect to be able to All maps should have a title. For symbology that may be unclear access the data. Knowing who made the map, when it was published, or confusing, include a legend, especially if the map is for an interna- and what data was used to make it helps users assess the validity of tional audience. Cartographic conventions vary. Whether to include the information on or linked to the map. a map scale depends on how much area is shown on the map. If your map covers a large area or is 3D (i.e., is in a perspective rather than Conclusion planimetric view), scale will vary across the map, and a scale bar The web makes it easier for your maps to reach far more people, but or scale text would be inaccurate for all mapped locations. For 3D knowing how to design maps specifically for the web will help you maps and maps that use a projection other than web Mercator, you create maps with immediate and wide appeal that readers will find useful, interesting, and notable. Clear and distinct letter shapes Tall x-height About the Author Aileen Buckley is the lead of the Esri Mapping Center Good web fonts (mappingcenter.esri.com), an Esri website dedicated to helping users make professional-quality maps with ArcGIS. She has more than 25 years of experience in cartography and holds a doctorate in Wide letter spacing Wide punch width geography from Oregon State University. She has written and pre- Characteristics of good web fonts sented widely on cartography and GIS and is one of the authors of (from sitepoint.com/anatomy-web-fonts) Map Use, Seventh Edition, published by Esri Press. esri.com Summer 2012 au 53