Пользовательский опыт (User Experience, UX) в картографических веб-приложениях определяется не только качеством визуализации данных, но и удобством взаимодействия с картой. В Mapbox GL JS UX формируется через навигацию, отклик интерфейса, работу с данными, анимации, адаптивность и доступность.
Карта выступает полноценным интерактивным интерфейсом, поэтому проектирование пользовательского опыта требует такого же внимания, как разработка форм, меню или информационных панелей.
При создании интерфейсов на основе Mapbox GL JS необходимо учитывать несколько фундаментальных принципов.
Пользователь должен быстро понимать:
Избыточное количество элементов управления снижает удобство использования.
Плохой пример:
Хороший пример:
Каждое действие должно приводить к ожидаемому результату.
Например:
Нестандартное поведение может дезориентировать пользователей.
На карте всегда должны выделяться наиболее важные объекты.
Для этого используются:
Пример:
paint: {
"circle-radius": 8,
"circle-color": "#ff0000"
}Крупные красные точки будут восприниматься как объекты первого уровня важности.
Навигация является одним из важнейших элементов UX.
Mapbox GL JS предоставляет встроенные контролы навигации.
map.addControl(
new mapboxgl.NavigationControl()
);Добавляются кнопки:
Это снижает порог входа для новых пользователей.
Слишком сильное увеличение или уменьшение часто приводит к потере контекста.
const map = new mapboxgl.Map({
container: "map",
style: "mapbox://styles/mapbox/streets-v12",
minZoom: 4,
maxZoom: 16
});Преимущества:
Если приложение работает только в определённом регионе, полезно ограничить перемещение.
map.setMaxBounds([
[30, 40],
[50, 60]
]);Пользователь не сможет уйти за пределы рабочей области.
Определение текущего местоположения существенно улучшает пользовательский опыт.
map.addControl(
new mapboxgl.GeolocateControl({
positionOptions: {
enableHighAccuracy: true
},
trackUserLocation: true
})
);Возможности:
Пользователь должен видеть своё положение максимально очевидно.
Распространённые подходы:
Такие элементы знакомы большинству пользователей мобильных картографических сервисов.
Popup является одним из основных способов отображения информации.
new mapboxgl.Popup()
.setLngLat([37.6173, 55.7558])
.setHTML("<h3>Москва</h3>")
.addTo(map);Всплывающее окно не должно превращаться в полноценную страницу.
Рекомендуется показывать:
Плохо:
<div>
20 абзацев текста...
</div>Хорошо:
<div>
<h3>Магазин</h3>
<p>Открыт до 22:00</p>
</div>Большое количество открытых Popup перегружает интерфейс.
Практика:
let currentPopup;
map.on("click", e => {
if (currentPopup) {
currentPopup.remove();
}
currentPopup = new mapboxgl.Popup()
.setLngLat(e.lngLat)
.setText("Информация")
.addTo(map);
});На экране остаётся только одно окно.
Плавные переходы значительно улучшают восприятие карты.
Метод создаёт анимированный перелёт к указанной точке.
map.flyTo({
center: [37.6173, 55.7558],
zoom: 12,
duration: 3000
});Преимущества:
Для более спокойной анимации применяется:
map.easeTo({
center: [37.6173, 55.7558],
zoom: 12
});Такой переход выглядит мягче и менее агрессивно.
Следует избегать:
Карта должна реагировать быстро и предсказуемо.
Пользователь должен понимать, что приложение реагирует на действия.
При наведении на интерактивный объект полезно менять курсор.
map.on("mouseenter", "places", () => {
map.getCanvas().style.cursor = "pointer";
});
map.on("mouseleave", "places", () => {
map.getCanvas().style.cursor = "";
});Это сигнализирует о возможности взаимодействия.
Объект может выделяться при наведении.
map.setPaintProperty(
"places",
"circle-color",
"#ff0000"
);Пользователь сразу понимает, какой элемент активен.
При длительном получении данных желательно показывать индикатор загрузки.
map.on("dataloading", () => {
loader.style.display = "block";
});
map.on("idle", () => {
loader.style.display = "none";
});Это предотвращает ощущение зависания приложения.
UX напрямую зависит от производительности.
Тысячи маркеров могут сделать карту нечитаемой.
Mapbox поддерживает кластеризацию GeoJSON.
map.addSource("places", {
type: "geojson",
data: data,
cluster: true,
clusterRadius: 50
});Преимущества:
На малых масштабах показываются агрегированные данные.
При увеличении масштаба:
Такой подход называется Progressive Disclosure.
Картографические приложения часто используются на смартфонах.
Для мобильных устройств полезно менять положение элементов управления.
map.addControl(
new mapboxgl.NavigationControl(),
"bottom-right"
);Часто это удобнее стандартного размещения сверху.
Слишком маленькие объекты неудобны для касания.
Рекомендуемые размеры:
На вертикальных экранах пространство ограничено.
Полезные практики:
Качественный UX невозможен без доступности.
Низкий контраст ухудшает читаемость.
Желательно избегать сочетаний:
Лучше использовать отчётливо различимые цвета.
Информация не должна передаваться исключительно через цвет.
Плохо:
Хорошо:
Некоторые пользователи взаимодействуют без мыши.
Интерфейс вокруг карты должен поддерживать:
Во многих приложениях карта работает совместно с дополнительными панелями.
При выборе элемента списка карта должна автоматически центрироваться.
map.flyTo({
center: feature.geometry.coordinates,
zoom: 15
});Связь должна работать в обе стороны.
Клик по карте:
Клик по списку:
Такой подход создаёт целостный пользовательский опыт.
Каждое действие пользователя должно быть частью продуманного сценария.
Типичный сценарий поиска объекта:
На каждом этапе необходимо минимизировать количество действий и снижать когнитивную нагрузку.
Современные приложения часто адаптируют карту под конкретного пользователя.
Примеры:
map.on("moveend", () => {
localStorage.setItem(
"center",
JSON.stringify(map.getCenter())
);
});После повторного открытия приложения пользователь продолжает работу с того места, где остановился.
Для оценки эффективности интерфейса анализируются:
Дополнительно могут использоваться события Mapbox GL JS:
map.on("click", e => {
analytics.track("map_click", {
lng: e.lngLat.lng,
lat: e.lngLat.lat
});
});Сбор подобных данных позволяет выявлять проблемные участки интерфейса и улучшать пользовательский опыт на основе реального поведения пользователей.