UI Patterns for Map Applications

Tutorials

Tutorials & Videos

UI/UX Best Practices for Designing Amazing Web Apps 2020 Esri Developer Summit Tech Session, Palm Springs, CA (USA) This video shows Map UI Patterns applied to practical, real-world examples. Patterns described are: Empty State Task Oriented Layout Patterns Visualizing Data Patterns Dealing with complex Data Patterns

General UX

Landing Page

What Problem Does This Solve? Introduce the user to the application and gather first inputs to optimize the map experience Why Use This Pattern? For years map application developers have chosen (intentionally or not) to start the application with the map at the smallest possible scale, i.e. the initial map extent shows the complete extent […]

Dealing with complex Data

Chart Marker

What Problem Does This Solve? Clustering is limited to counts of features without the ability to visualize a second dimension within the data Why Use This Pattern? A common technique to avoid showing too many points on the map is clustering them into bubbles with numbers inside. This mechanism is effective to illustrate the amount […]

Dealing with complex Data

Theme Toggle

What Problem Does This Solve? The map is overloaded with layers and users struggle to reduce the clutter Why Use This Pattern? Interactive maps are collections of layers and each layer that is turned on adds to visual information to the map and if any one of those layers isn’t required or desired it can […]

Interacting with Content

Visited Marker

What Problem Does This Solve? Help users to avoid revisiting the same popup repeatedly Why Use This Pattern? A pattern that has been around since the early days of HTML is to show links that have been visited preciously in a different color. This is considered a usability best practice to help users recall which […]

Exploring Spatial Content

Search this Area

What Problem Does This Solve? Avoid updating features on the map until user has explicitly opted in to do so Why Use This Pattern? Any time a user pans or zooms the map the extent changes and therefore the visible features on the map will change also. Sometimes this behavior is expected but in other […]

General UX

Kitchen Sink

What Problem Does This Solve? Showcase all conceivable functions and data in one page. Why Use This Pattern? The Kitchen Sink approach, sometimes also referred to as Swiss Army Knife app or data portal, is useful for demo applications which showcase all (or almost all) of the features and is a great way to introduce […]

Visualizing Data

Choropleth Map

What Problem Does This Solve? Visualize how a measurement varies across a geographic area. Why Use This Pattern? Choropleth maps provide an easy way to visualize how a measurement varies across a geographic area or show the level of variability within a region. When to Use This Pattern Choropleth maps are important to support analysis […]

Getting Started

The best way to introduce you to the Map UI Pattern library is by relating it to Atomic Design, which many of you are probably familiar with, and which is the basis of most Design Systems. Map patterns (Navigating the Map, Orienting Yourself, Visualizing Data, and Views) and Content patterns (Interacting with Content, Exploring Spatial […]

Navigating the Map

Floor Selector

What Problem Does This Solve? User needs to select a floor/level in a 2-dimensional indoor map. Why Use This Pattern? Indoor maps are inherently 3-dimensional in that they usually include multiple floors or levels. When displaying a planar (2D) map users do not know which level they are looking at or how to select a […]