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

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

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

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

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

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

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

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

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

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

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

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

Поделиться
Отправить
Запинить

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

11 комментариев
Сергей Бронников 2019

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

lite 2019

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

Илья Зверев 2019

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

afonin 2019

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

Илья Зверев 2019

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

afonin 2019

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

lite 2019

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

Илья Зверев 2019

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

lite 2019

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

qosmos 2019

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

username 2019

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

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

pfg21 2019

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

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

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

Илья Зверев 2019

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

pfg21 2019

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

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

Илья Зверев 2019

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

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

bopoh13 2019

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

Популярное