Кнопки не нужны

Вчера в телеграме, развивая мысль про интерактивные карты как признак ленивого дизайнера, я написал, что кнопки плюс-минус — худшее, что есть в картах после переключателя слоёв. Кажется, многие читатели восприняли это как шутку, а другие поделились контекстом, когда эти кнопки не заменить. Например, когда нужно управлять телефоном одной рукой, или демонстрировать карту на проекторе с пультом. Все эти проблемы — лишь следствие того, что мы слишком привыкли к плюсу и минусу.

Современные интерактивные карты выглядят гораздо проще классических ГИС: нет панели с полусотней слоёв, нет трёх рядов кнопок управления и панели состояния с рядом загадочных чисел. Мы постепенно избавлялись от лишнего, и теперь карту загораживают только строка поиска и несколько кнопок. К сожалению, для хорошего интерфейса недостаточно убрать лишнее: нужно убрать, а затем переизобрести всё остальное.

Кнопки изменения масштаба появились от свойств тайловой схемы вкупе с линукс-мышлением. Тайлы, из которых состоит карта, устроены просто: на нулевом масштабе один тайл, на первом — четыре (2×2), на втором — шестнадцать (4×4) и так далее, каждый квадратик делится пополам в обоих измерениях. Линукс-мышление требует максимальной конфигурируемости: вдруг пользователь захочет посмотреть на карту конкретно на 13 масштабе, а мы ему не дадим? Поэтому развитие карт идёт увеличением количества уровней масштаба как вглубь, так и вширь, добавлением промежуточных уровней и переходом на векторные тайлы с непрерывным масштабированием. Больше контроля пользователю!

Работа с интерактивной картой похожа на управление автомобилем с ручной коробкой передач. Ты дёргаешь рычаг при езде, довёл действия до автоматизма и понимаешь, зачем это делаешь и чем одна передача отличается от другой. Когда приходит дизайнер и предлагает убрать рычаг, первой реакцией будет от него отмахнуться. Но теперь мы ездим на машинах с двумя педалями вместо трёх с рычагом, и всё меньше людей готовы работать частью механизма. То же и с кнопками масштабирования в интерактивных картах: они упрощают жизнь разработчикам javascript-библиотек и усложняют всем остальным, от пользователей до создателей карт.

Эти кнопки — бич веб-картографии. Как не устаёт напоминать Сергей Голубев, при каждом нажатии на «+» вы видите новую карту, с собственным картостилем и свойствами. На сайте osm.org у нас 20 (двадцать) различных картостилей. Каждое изменение стиля osm-carto затрагивает примерно половину из них, поэтому неудивительно, что дискуссии в репозитории обильно иллюстрированы и могут затягиваться. Но если подумать, действительно ли пользователю нужны все эти карты? Вне компьютера хватает трёх-четырёх: атласа мира, атласа области и карты города. Когда масштабов мало, больше времени остаётся на полировку оформления каждого. А точная настройка интерфейса становится излишней.

Изменить масштаб можно многими способами, в зависимости от устройства и сайта:

  • кнопками плюс-минус на экране;
  • теми же кнопками с зажатым shift для большей скорости;
  • ползунком масштабирования;
  • колёсиком мыши;
  • двойным кликом левой кнопкой;
  • растягиванием прямоугольника мышью с зажатым shift;
  • кнопками «+» и «-» на клавиатуре;
  • перетягиванием двумя пальцами на тачпаде или экране;
  • щипком или расщипком на экране;
  • дважды тыкаешь пальцем, второй раз не отпуская удерживаешь и тянешь вниз или вверх.

Почему так много? Потому что у каждого из этих способов есть недостатки: от сложности обнаружения (последний пункт от Сергея Синицына удивил многих в чате) и отсутствия технической возможности (клавиатура есть не у всех) до неудобства, неточности или низкой скорости отклика.

Но пользователи обычно приходят к вам не для того, чтобы масштабировать карту. Им все эти способы нафиг не нужны. Они хотят посмотреть на данные или понять взаимоотношение географических объектов. Если остановиться и подумать, что нужно пользователю, может оказаться, что либо не нужна интерактивность целиком, либо не нужно масштабирование, либо не нужны двадцать карт и сложные способы переключения между ними.

Как пример альтернативной навигации, я сделал демонстрационный сайт. На нём всего одна кнопка: её достаточно для карты, предназначенной для рассматривания. Кроме того, там всего пять уровней масштаба: достаточно, чтобы за три клика найти нужный дом, а не крутить карту туда-сюда, разглядывая промежуточные стили. Наконец, кнопка стоит внизу: так до неё удобнее дотянуться на телефоне.

Разумеется, для более сложных сайтов одной кнопки может оказаться недостаточно. Но это не повод вестись на традиции и пользоваться стандартными элементами. Всегда можно сделать лучше. Вместо списка нарисовать картинки, вместо картинок встроить карты, вместо карт сделать простой инструмент. Интерактивная карта — всегда зло, но если вы её делаете, думайте о задачах пользователя и не перекладывайте на него свою работу.

Поделиться
Отправить
Запинить
11 комментариев
Сергей Бронников

Никогда не пользовался кнопками +/-, а вот кнопкой «Показать мое местоположение». Она экономит время.

lite

Особенно не нужны кнопки «плюс» и «минус» на таких встраиваемых картах https://5ka.ru/stores/ (наверное, половина русских сайтов такими оснащена). Ведь эту карту так удобно скроллить на десктопе.

Илья Зверев

На таких картах и интерактивность не нужна.

afonin

Мне кажется, гораздо приоритетнее задача отказа от меркатора, чем решения проблем с зумом. Потому что много зумов это просто неудобно, а меркатор искажает мозги миллиардов людей. Пользуясь той же аналогией с рычагом в машине: давайте вместо АКПП разработаем хотя бы фары 8)

Илья Зверев

Интерактивные карты почти всегда используются на масштабах, где проекция не важна, главное углы сохранять.

afonin

По-всякому бывает, тем более пользователь же двигает зум, в т.ч. отдаляется и видит Гренландию больше Африки

lite

Насчет https://5ka.ru/stores/  — если непонятно, там вообще нет никакого способа зазумиться, кроме кнопок «+» и «-„. И если тебе нужно без использования этих кнопок посмотреть время работы магазина в Рязани (а тебе показало карту СПб, потому что оно решило, что ты находишься в нем, ну или ты на самом деле в нем находишься) — то надо всего лишь 300 раз подвинуть мышкой картинку внутри экрана.

Илья Зверев

А представь, если бы разработчикам сказали, что никакой интерактивности. Они бы быстро придумали список городов для переключения и приближение к району одной кнопкой. Возможно, и значки бы сделали не такими ядрёными, и клика для получения информации о магазине не потребовалось бы.

lite

отличная идея — пролистывать список из 1000 городов (в РФ их точно не меньше, а ведь магазины есть еще и в сельских пунктах). К слову, примерно так сделано на сайте «Магнита» — и я матерю их каждый раз за такое решение.

qosmos

Негодная идея. Сродни той, что в браузерах нужно убрать адресную строку.

username

Без кнопок +/- на мобильном девайсе решение простой задачи «подняться на уровень выше, чтобы найти что-то рядом», особенно в условиях медленного интернета, превратится в боль и страдания.
Брейнфак вот очень простой язык, и на нем можно написать любую программу. Только почему-то желающих немного.

pfg21

идея интересна, хотя тыкать кнопкой в картах обычно для другой функциональности применяется. более современный вариант колесико мышки.

мысль «давайте откажемся от ... и настанет светлое будущее» глупа.

создаешь инструментарий, выкладываешь в общий доступ и если задумка понравится пользователю то предыдущая схема работы с интерфейсом отомрет сама собой.

Илья Зверев

Заметка про то, что нужно для задачи выбирать самый удобный способ навигации, иногда изобретая велосипед. Что использовать навигацию из стандартных библиотек не всегда хорошо, а не что существующая схема 100% плоха и нужно поменять стандартные библиотеки.

pfg21

прям с первого абзаца идет совершенно другой посыл :)
«я написал, что кнопки плюс-минус — худшее, что есть в картах после переключателя слоёв.» (пардон если все таки вырвал из контекста)
кувалда в век станков с ЧПУ и 3д-принтеров из титанового песка конечно вещчъ устаревшая, но из гаража я ее выкидывать конечно не буду :)

великий махинатор дизайнер Джобс к к первым макам прикладывал однокнопочную мышь, ибо тоже что-то там считал из области дизайна будущего, но пользователи плювались и ненавидели эту мышь по вполне ясным функциональным неудобствам.

Илья Зверев

Разумеется, я не буду убирать, например, со своего osmz.ru/imagery ни кнопки ±, ни переключатель слоёв. В первом абзаце посыл про ленивого ux-дизайнера. Джобс был прав: одной кнопки хватит всем, если делать интерфейсы, которым достаточно одной кнопки. Посмотри на телефоны и планшеты: там есть только один тап, а не левый и правый. Технари предпочитают об этом не задумываться, поэтому мы сейчас имеем мышки со стандартными тремя и нередко 5-6 кнопками. Добавить кнопку или пункт в меню проще, чем подумать, как обойтись без них — возможно, с переделкой всего интерфейса.

То же и с элементами интерактивности в карте: если не задумываться, имеем стандартный набор из 3+ кнопок и требование каких-то действий после открытия (приблизить, передвинуть, щёлкнуть в маркер) вместо того, чтобы сразу считать нужную информацию.

bopoh13

Илья, на мобиле довольно удобно. Только верхняя шторка браузера мешает поймать кнопку ;)