Web maps are powerful tools for visualizing and communicating spatial data, but they also pose challenges for users with different skill levels, expectations, and goals. How can you design web maps that are accessible, engaging, and effective for a diverse audience? In this article, we will explore some key principles and best practices for web map design and usability.
Before you start designing your web map, you need to understand who your users are, what they want to do with your map, and how they will interact with it. You can use user personas, scenarios, and surveys to identify your target audience and their needs, preferences, and pain points. You can also use analytics tools, such as Google Analytics, to track how users access, navigate, and use your web map.
Always work backwards from users. The GIS industry is large with a range of user types having various needs for different industries they are in. Start by talking to them and ask the key questions such as: 1. what are your current experiences with incumbent platforms you feel frustrated about? 2. What are the type of geospatial data you are dealing with on the daily basis?
Using the story map approach allows different levels of knowledge and information to be shared from the same map resource. ArcInfo is one platform for this which works well. The critical aspect to providing appropriate information to the right level is to clearly understand your different audiences - as Lawrence says, work backwards from the users and craft storymaps accordingly.
Every single design process has to start with the users. It's easy for a developer to constantly look through their own eyes, but in reality, the user is not the developer. It's important to storyboard interactions so you can see how people would naturally interact with something. It's low fidelity, but very informative process-wise.
Depending on your users' skill levels, you may need to choose a web map platform that offers different levels of customization, interactivity, and functionality. For example, if your users are beginners or casual browsers, you may want to use a simple and intuitive platform, such as ArcGIS Online or Carto, that allows you to create and share web maps with minimal coding. If your users are experts or analysts, you may want to use a more advanced and flexible platform, such as Leaflet or Mapbox, that allows you to create and customize web maps with code and plugins.
One of the most important principles of web map design is to make your map clear and simple. You want to avoid clutter, confusion, and distraction, and focus on the main message and purpose of your map. You can achieve this by using appropriate colors, symbols, scales, projections, and basemaps, and by applying the principles of visual hierarchy, contrast, alignment, and balance. You can also use legends, pop-ups, labels, and tooltips to provide additional information and context.
It is important to make the web map intuitive and less overwhelmed by too many details, for this we have to choose the most important layers to appear in the map with the application of appropriate colors and symbology according to the context (vegetation, buildings, roads) we can also add some pop ups and a clear description (outside of the map frame) for more precisions about the map
Another key principle of web map design is to make your map perform well and be accessible to all users. You want to ensure that your map loads fast, responds smoothly, and adapts to different devices and screen sizes. You can achieve this by using web map standards, such as GeoJSON and Vector Tiles, and by optimizing your data size, format, and projection. You can also use accessibility tools, such as color contrast checkers and screen readers, to make your map accessible to users with visual impairments or disabilities.
Other ways to improve performance apart from switching to more performing map standards, is to use GPU in rendering the map items. There are newer map platforms such as MaplibreGL or DeckGL that focuses on providing user a better GPU-based browser map experience. Check these out before you are already spending months over a non-GPU platform.
The final step of web map design is to test and iterate your map based on user feedback and evaluation. You want to check if your map meets your users' needs, expectations, and goals, and if it has any usability issues or errors. You can use various methods, such as usability testing, user testing, heuristic evaluation, and A/B testing, to collect and analyze user data and feedback. You can also use web map tools, such as Maputnik or Mapshaper, to edit and refine your map.