Кнопки не должны иметь курсор в виде руки

Это первая часть серии из трех частей. Вот часть 2 и часть 3.

Существует мнение, что курсор в виде руки (указатель) означает кликабельность, но это неправильно и потенциально проблематично.

Рука не означает кликабельна

Не случайно браузеры не дают кнопкам (и другим элементам) указатель курсора - это потому, что они не предназначены для этого. Смотрите следующий скриншот:

Страница поиска Google в Chrome на Mac OS

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

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

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

Лицензионное соглашение является ссылкой и получает указатель курсора. Кнопки не.

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

Вот почему, например, флажки никогда не бывают круглыми (а радиоприемники никогда не бывают квадратными). Именно поэтому ссылки, как правило, подчеркнуты. Вот почему ссылки действительно имеют курсор в виде руки.

Что говорят власти

Руководства Microsoft по дизайну говорят о слабой доступности:

Текстовые и графические ссылки используют ручной [...] указатель [...] из-за их слабой доступности. В то время как ссылки могут иметь другие визуальные подсказки, указывающие на то, что они являются ссылками (такими как подчеркивание и специальное размещение), отображение указателя руки при наведении курсора является окончательным указанием ссылки.
Чтобы избежать путаницы, крайне важно не использовать указатель руки для других целей. Например, командные кнопки уже имеют достаточные возможности, поэтому им не требуется указатель руки. Указатель руки должен означать «эта цель - ссылка» и ничего больше.

В Руководстве Apple по человеческому интерфейсу говорится, что курсор в виде руки следует использовать, когда «контент представляет собой ссылку URL». В Руководстве по пользовательскому интерфейсу W3C снова говорится то же самое: «Курсор - это указатель, который указывает на ссылку».

Курсор руки для ссылок

Рука (и часто подчеркнутый текст) означает ссылку. Ссылки не кнопки. Ссылки пришли вместе с Интернетом. Чтобы помочь пользователям понять, что они разные, им дают курсор в виде руки. Это служит дополнительной подсказкой. Вот почему:

  1. При нажатии на ссылку открывается веб-страница или ресурс.
  2. (На рабочем столе) Я могу щелкнуть правой кнопкой мыши по ссылке и сделать много вещей (что я не могу сделать с кнопкой). Откройте в новой вкладке / окне, сохраните ссылку, скопируйте адрес, добавьте в список чтения, добавьте в закладки и многое другое.
  3. (На мобильных устройствах) Я могу нажать и удерживать ссылку и получить аналогичное контекстное меню, как в предыдущем пункте.
  4. Ссылка также говорит мне, что я просто иду куда-то еще. Я не изменяю никакие данные и не делаю изменений в любом случае (как кнопка, вероятно, сделает).

Резюме

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

Курсор руки зарезервирован для ссылок. Это потому, что они уникальны в своем поведении. Браузеры и операционные системы сделали работу за вас - потому что вопреки распространенному мнению - браузеры знают лучше.

Ссылки всегда обрабатывались таким образом, с тех пор как появилась сеть - это соглашение о сети, в котором вам не нужно вводить новшества. Вы можете быть спокойны, зная, что браузеры вас охватили. Это оставляет вас и вашу команду для решения реальных проблем.

Следите за сообщениями

  • Но иногда ссылки выглядят как кнопки
  • Кнопки не должны иметь курсора руки Часть 2

Кстати, я пишу книгу под названием «Шаблоны проектирования форм». Если вы хотите знать, когда он будет выпущен, подпишитесь здесь, и я буду держать вас в курсе.