#UIpattern

Michael Gaigg

@michaelgaigg.bsky.social

2 weeks ago

Flow map WHAT Data visualization with straight or geodesic lines have visual limitations. WHY Studying and analyzing relationships between objects is a common task. Visualizing existing, missing or broken c…

Flow Map #UIpattern: Solves data visualizations with straight or geodesic lines that have visual limitations.
mapuipatterns.com/flowmap/
#UX #UXDesign #UI #UIDesign #maps #apps #GIS #esri #esridev #MapUIPattern #dataviz

Michael Gaigg

@michaelgaigg.bsky.social

2 weeks ago

Legend WHAT The meaning of symbols and the symbolic presentation of data is not clear until explained and correlated to a key. WHY The essence of maps is to present features (points, lines, polygons) or p…

Legend #UIpattern: Explains the meaning of symbols through their key. mapuipatterns.com/legend/
#UX #UXDesign #UI #UIDesign #maps #apps #GIS #esri #esridev #MapUIPattern

Michael Gaigg

@michaelgaigg.bsky.social

2 weeks ago

Heat map WHAT Heatmap is a technique to analyze data based on their magnitude. WHY Identify areas of interest that can or need to be acted upon. Popular usages include analyses of crime, infrastructure, wea…

Heat map #UIpattern: analyze data based on their magnitude.
mapuipatterns.com/heatmap/

Michael Gaigg

@michaelgaigg.bsky.social

2 weeks ago

Choropleth map WHAT Visualize how a measurement varies across a geographic area. WHY Choropleth maps provide an easy way to visualize how a measurement varies across a geographic area or show the level of variabi…

Choropleth map #UIpattern: Visualize how a measurement varies across a geographic area. mapuipatterns.com/choropleth-m...

Michael Gaigg

@michaelgaigg.bsky.social

3 weeks ago

Layer list WHAT Users need to show or hide map content WHY Interactive maps are structured such that different geographic datasets are added to the map displayed on top of each other. This stacking works well…

Layer list #UIpattern: Show or hide information in a map.
mapuipatterns.com/layer-list/

Michael Gaigg

@michaelgaigg.bsky.social

3 weeks ago

Theme toggle WHAT The map is overloaded with layers and users struggle to reduce the clutter WHY Interactive maps are collections of layers and each layer that is turned on adds to visual information to the map…

Theme toggle #UIpattern: Turn groups of related layers on and off. mapuipatterns.com/theme-toggle/

Michael Gaigg

@michaelgaigg.bsky.social

3 weeks ago

Data dimming WHAT The map contains too many features so that it is difficult to identify them, distinguish them, pick out relationships, see patterns in the distribution. WHY The same location might be occupied…

Data dimming #UIpattern: Highlight related features that are otherwise difficult to distinguish.
mapuipatterns.com/data-dimming/
#UX #UXDesign #UI #UIDesign #maps #apps #GIS #esri #esridev #MapUIPattern

Michael Gaigg

@michaelgaigg.bsky.social

3 weeks ago

Buffer WHAT Analyze an area surrounding an object or point of interest. WHY It is difficult and sometimes even misleading to rely on visual analysis on the map to identify relevant features. Calculating d…

Buffer #UIpattern: Analyze an area surrounding an object or point of interest. mapuipatterns.com/buffer/
#UX #UXDesign #UI #UIDesign #maps #apps #GIS #esri #esridev #MapUIPattern

Michael Gaigg

@michaelgaigg.bsky.social

1 month ago

Chart marker WHAT The chart marker pattern uses charts to enrich aggregated data or to visualize a second attribute of clustered data. Adding tiny charts to the map is a powerful visualization technique to comm…

Chart Marker #UIpattern: Adding tiny charts to the map is a powerful visualization technique to communicate additional aspects of the data.
mapuipatterns.com/chart-marker/
#UX #UXDesign #UI #UIDesign #maps #apps #GIS #esri #esridev #MapUIPattern

Michael Gaigg

@michaelgaigg.bsky.social

1 month ago

Cluster marker WHAT The cluster marker pattern is a common method to avoid visual clutter by grouping points together, and many apps that display point data benefit from this pattern. Cluster marker differentiate…

Cluster Marker #UIpattern: Avoid visual clutter by grouping points together. mapuipatterns.com/cluster-mark...
#UX #UXDesign #UI #UIDesign #maps #apps #GIS #esri #esridev #MapUIPattern

Michael Gaigg

@michaelgaigg.bsky.social

1 month ago

Feature selection WHAT The feature selection pattern uses selected features on the map to create a subset from all the available features. It helps shift the focus from the whole collection of features to the ones t…

Feature selection #UIpattern: Shift the focus from the whole collection of features to the ones that are relevant.
mapuipatterns.com/feature-sele...
#UX #UXDesign #UI #UIDesign #maps #apps #GIS #esri #esridev #MapUIPattern

Michael Gaigg

@michaelgaigg.bsky.social

1 month ago

Timeline slider The timeline slider pattern uses the slider to control the features that correspond to a certain time span. Timeline slider reduces the amount of data to display by showing only the data within tha…

Timeline Slider #UIpattern: Control the features that correspond to a certain time span only. mapuipatterns.com/timeline-sli...
#UX #UXDesign #UI #UIDesign #maps #apps #GIS #esri #esridev #MapUIPattern

Michael Gaigg

@michaelgaigg.bsky.social

1 month ago

Basemap WHAT Users need a geographical reference to understand and relate to the information displayed on top of it. WHY Basemaps help users to orient themselves with both location and scale. A well design…

Spatial Filter #UIpattern: Reduce available features by selecting a specific geographic region or area of interest.
mapuipatterns.com/spatial-filt...
#UX #UXDesign #UI #UIDesign #maps #apps #GIS #esri #esridev #MapUIPattern

Michael Gaigg

@michaelgaigg.bsky.social

1 month ago

Attribute filter WHAT The attribute filter pattern reduces large datasets into more meaningful and manageable selections based on attribute criteria. WHY Filters are omnipresent in modern apps and, like search, are…

Attribute Filter #UIpattern: Reduce large datasets into more meaningful and manageable selections based on attribute criteria. mapuipatterns.com/attribute-fi...
#UX #UXDesign #UI #UIDesign #maps #apps #GIS #esri #esridev #MapUIPattern

Michael Gaigg

@michaelgaigg.bsky.social

1 month ago

2D WHAT Need to see the location of natural or man-made features and phenomena and how they geographically relate to each other. WHY 2D maps are the most familiar type of presentation for road maps si…

2D map #UIpattern: See the location of natural or man-made features and phenomena and how they geographically relate to each other
mapuipatterns.com/2-dimensiona...
#UX #UXDesign #UI #UIDesign #maps #apps #GIS #esri #esridev

Michael Gaigg

@michaelgaigg.bsky.social

1 month ago

Data extract WHAT Extract geographic data for a specific region. WHY A common service for a spatial portal is to deliver data to a user. Data may be vector features (points, lines, polygons) or raster imagery. …

Data extract #UIpattern: Extract geographic data for a specific region. mapuipatterns.com/data-extract/
#UX #UXDesign #UI #UIDesign #maps #apps #GIS #esri #esridev

Michael Gaigg

@michaelgaigg.bsky.social

1 month ago

Small multiples WHAT Comparing changes, patterns or differences in data is difficult to impossible with interactive controls on a single map view. WHY Small Multiples is sometimes also called trellis maps or tile …

Small multiples #UIpattern: series of similar maps using the same size and scale, allowing them to be easily compared
mapuipatterns.com/small-multip...

Michael Gaigg

@michaelgaigg.bsky.social

1 month ago

Side by side WHAT Visually inspect and compare two scenarios spatially, temporally or quantitatively. WHY Comparing spatial-temporal data is a common analytical task to detect changes over time or identify patt…

Side by side pattern: Visually inspect and compare two scenarios spatially, temporally or quantitatively.
mapuipatterns.com/side-by-side/
#UX #UXDesign #UI #UIDesign #maps #apps #GIS #esri #esridev #UIpattern

Michael Gaigg

@michaelgaigg.bsky.social

1 month ago

Swipe WHAT Interactively reveal content by peeling back a layer to see the content underneath it. This method provides a temporary view of the data without the specified layer. WHY It is often useful to …

Swipe UI pattern: reveal content by peeling back a layer to see the content underneath it.
mapuipatterns.com/swipe/
#UX #UXDesign #UI #UIDesign #maps #apps #GIS #esri #esridev #UIpattern

Michael Gaigg

@michaelgaigg.bsky.social

1 month ago

Basemap gallery WHAT User needs to choose the appropriate background for their map from a pre-defined set of available basemaps. WHY Basemaps provide the underlying foundation of a map. Choosing the right basemap …

Basemap gallery #UIpattern: Select from a pre-defined set of available map backgrounds mapuipatterns.com/basemap-gall...

Michael Gaigg

@michaelgaigg.bsky.social

1 month ago

Callout WHAT It’s hard to clearly identify the point associated with its labels, multiple labels overlap because of their length, size, or nearby position, or only some features need to be highlighted. WHY…

Call-out UI: pattern to avoid overlapping labels.
mapuipatterns.com/call-out/
#UX #UXDesign #UI #UIDesign #maps #apps #GIS #esri #esridev #UIpattern

Michael Gaigg

@michaelgaigg.bsky.social

1 month ago

3D WHAT The 3D pattern features maps that provide appealing, realistic views that are great for complex landscapes and vertical information. They provide a real-world view that can be easier to interp…

3D maps UI pattern: provide appealing, realistic views that are great for complex landscapes and vertical information
mapuipatterns.com/3-dimensiona...
#UX #UXDesign #UI #UIDesign #maps #apps #GIS #esri #esridev #UIpattern

Michael Gaigg

@michaelgaigg.bsky.social

1 month ago

Info pop-up WHAT The info pop-up pattern employs the primary vehicle for accessing content and retrieving information about features on the map. The info pop-up, sometimes also called info window or just pop-u…

Info Pop-up: primary method of accessing content and retrieving information about features on the map.
mapuipatterns.com/info-popup/
#UX #UXDesign #UI #UIDesign #maps #apps #GIS #esri #esridev #UIpattern

Michael Gaigg

@michaelgaigg.bsky.social

1 month ago

Visited marker WHAT The visited marker pattern uses markers symbolized to show users which marker has already been visited, helping them avoid revisiting the same info pop-up repeatedly. WHY A pattern that has be…

Visited Marker: indicate which marker has already been visited
mapuipatterns.com/visited-mark...
#UX #UXDesign #UI #UIDesign #maps #apps #GIS #esri #esridev #UIpattern

Michael Gaigg

@michaelgaigg.bsky.social

2 months ago

Rich marker WHAT The rich marker pattern extends simple markers on the map to show a key metric, performance indicator, or other important information. WHY Sometimes the color, size, or shape of a marker is no…

Rich marker: extend simple markers in the map to show a key metric, performance indicator, or other important information
mapuipatterns.com/rich-marker/
#UX #UXDesign #UI #UIDesign #maps #apps #GIS #esri #esridev #UIpattern

Michael Gaigg

@michaelgaigg.bsky.social

2 months ago

Marker WHAT A marker, sometimes also called a map pin, identifies a location in the map. This location can be a place, point of interest, or any other object. WHY Adding markers is one of the most importa…

Marker #UIpattern: pinpoint the location in a mpa and establish a connection to reveal additional content
mapuipatterns.com/marker/
#UX #UXDesign #UI #UIDesign #maps #apps #GIS #esri #esridev #patterns