Карты изображений в интерфейсах: интерактивные зоны и навигация

1.

Применение карт
изображений
в интерфейсах
Как интерактивные зоны превращают
плоскую картинку в навигацию,
каталог и инструмент выбора
Подготовили: Садуов
Адильхан, Армия Айбек
Группа: 24-04

2.

БАЗОВОЕ ОПРЕДЕЛЕНИЕ
Что такое image map
Одна картинка содержит
несколько активных зон.
Каждая зона запускает
собственное действие.
1–4 = hotspot-ы
с разными ссылками,
подсказками или
состояниями
1
2
• Классика: <map> + <area> в HTML
• Современный вариант: DOM / SVG /
canvas-слой поверх изображения
• Пользователь мыслит объектами, а
не координатами
3
4
картинка
02

3.

КАК ИЗМЕНИЛАСЬ РЕАЛИЗАЦИЯ
От координат к слоям
КЛАССИЧЕСКАЯ IMAGE MAP
<img usemap="#rooms">
<map name="rooms">
<area shape="rect"
coords="10,20,180,120"
href="/room-a">
</map>
СОВРЕМЕННЫЙ HOTSPOT-СЛОЙ
• Изображение остаётся
визуальным «полем»
• Слой масштабируется вместе с
контейнером
• Состояния: hover, focus, tap,
selected
• Контент можно связать с
карточкой, фильтром или CTA
Главный сдвиг: от «попадания в пиксель» к смысловой зоне, которую можно
объяснить и озвучить.
03

4.

РЕАЛЬНЫЙ ПОЛЬЗОВАТЕЛЬСКИЙ СЦЕНАРИЙ
Паттерн 1. Географическая навигация
Карты работают как image map
по смыслу,
но технически чаще используют
тайлы, SVG или canvas.
• Объект выбирают через
пространственный контекст
• Клик по зоне раскрывает карточку,
фильтр или маршрут
• Хорошая карта даёт обзор и следующий
шаг одновременно
A
B
C
POI / район / маршрут
Пример: Google Maps и подобные картографические интерфейсы показывают, как hotspots эволюционировали в
полноценные пространственные UI.
04

5.

E-COMMERCE
Паттерн 2. Shop the look
Клик по предмету одежды
заменяет поиск по каталогу
• Точка привязана к объекту на фото
• Pop-over показывает название и цену
• CTA ведёт в карточку товара или корзину
• Подходит для комплектов, комнат,
подборок
Что важно проверить: не закрывает ли pop-over соседние
hotspot-ы и видны ли точки на мобильном экране.
05

6.

КОНТЕНТ И ПРОДУКТОВЫЙ ОБЗОР
Паттерн 3. Изображение как каталог
Интерактивное
изображение становится
слоем навигации по
сущностям
• Подходит для схем, инфографики и
lookbook-ов
• Пользователь исследует
изображение в своём порядке
• Слой можно связать с мультимедиа,
карточками и ссылками
Риск: если активных зон слишком много,
картинка превращается в «поле кнопок».
06

7.

НЕДВИЖИМОСТЬ, ОТЕЛИ, КАМПУСЫ
Паттерн 4. Планировка и виртуальный тур
План помещения —
естественная карта
с зонами, которые нужно
исследовать.
• Клик по комнате открывает фото или
360°-вид
• Hotspot связывает абстрактную схему
с реальным пространством
• Нужен явный fallback: список комнат
или текстовая навигация
КУХНЯ
ГОСТИНАЯ
1
2
СПАЛЬНЯ
ВИД
3
4
07

8.

ГДЕ IMAGE MAPS ЧАЩЕ ВСЕГО ЛОМАЮТСЯ
Адаптивность и доступность
На мобильном
экране
точка должна быть
не только
видимой, но и
нажимаемой.
desktop
tablet
mobile
Не полагаться только на
hover
Дублировать hotspots
списком или текстовыми
Учитывать
ссылками
масштабирование и
Добавлять
alt-текст
соотношение
сторони
понятный focus-state
08

9.

ЧТО СНИЖАЕТ ПОНЯТНОСТЬ ИНТЕРФЕЙСА
Типовые ошибки
1
2
3
Невидимые зоны
Слишком много
точек
Hover-only
Пользователь не
понимает,
куда можно нажать
Картинка превращается
в шум и список кнопок
На touch-устройстве
сценарий исчезает
Проверка перед релизом: можно ли понять зону без подсказки автора, выбрать её с
клавиатуры и пройти сценарий без мыши?
09

10.

ПРАКТИЧЕСКАЯ ОЦЕНКА
Чек-лист хорошей image map
Смысл
Зона соответствует объекту, а не случайному прямоугольнику
Сигнал
Есть видимый hotspot, hover/focus и понятное состояние выбора
Действие
После клика пользователь получает конкретный следующий шаг
Адаптивность
Координаты и размер зон сохраняются при resize
Доступность
Есть alt, клавиатурный доступ и текстовый fallback
Если хотя бы два пункта не выполняются, лучше перейти к обычному списку, фильтрам или
полноценной карте.
10

11.

Вывод
Image map полезна там,
где
пространство уже
объясняет
Карта, предмет, планировка или схема могут
структуру
контента.
стать интерфейсом, если
активные зоны
видимы, адаптивны и ведут к понятному
действию.
Спасибо
11