Перевод статьи Some pointers on default cursors с сайта hiddedevries.nl, опубликовано на css-live.ru с разрешения автора — Хидде де Вриса

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

Это не пустяк: ссылки (<a/>) ведут куда-то ещё, кнопки — (<button>-ы) выполняют действия. «Палец» указывает пользователю, что его курсор находится на ссылке, которая перенаправит его куда-то. Причем ее можно открыть в другой вкладке: скопировать ссылку, перетащить её в другое окно, и так далее. Другим интерактивным элементам на странице (к примеру, кнопкам) достанется курсор по умолчанию. Краткая выжимка: палец не означает кликабельность.

Что говорят стандарты

Выше было не моё мнение, а так говорит спецификация CSS, и это поведение по умолчанию во всех браузерах. Это можно увидеть при наведении на кнопки в ОС, или посмотреть на браузерные табы. Или на кнопку «Поиск» в Google.com.

Рекомендации интерфейса для пользователей ОС Apple так же считают, что «палец» указывает на ссылку с адресом.

Рекомендации Microsoft также однозначны:

Во избежание путаницы важно не использовать указатель пальца для других целей. К примеру, у кнопок команд уже есть явная наглядная функциональность, поэтому указатель пальца им не нужен. Указатель пальца должен означать «эта цель — ссылка» и не иначе. (Выделено ими).

Когда мы добавляем кнопке курсор в виде пальца, то указываем пользователям, что их перенаправят в другое место, тогда как этого не произойдет. Таким образом мы нарушаем привычную механику взаимодействия элементов на веб-страницах. Это то же, что наклеить стикер со словами «Толкни меня» на удобную дверную ручку (см. также: Дон Норман).

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

А если всё равно выбрать «палец» для кнопок?

Многие всё равно применяют к кнопкам курсор-палец. И я так делал. Слышал, что многие добавляют указатель для улучшения удобства использования. Кроме того, Bootstrap и другие различные CSS-фреймворки также применяют курсор-палец для кнопок (заметьте, что Normalize тоже так делал, но недавно убрал его).

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

В принципе, я считаю, что сейчас есть два стандарта.

Есть ещё одна сложность: на практике бывает нечто среднее между кнопками и ссылками.

• Ссылка «Вернуться к началу» — буквально ссылка в начало страницы, но, особенно когда она плавно прокручивает страницу, это воспринимается как действие по кнопке.
• В недавно созданном мной компоненте вкладок, каждая вкладка — это ссылка на какую-то область на странице. Визуально при нажатии на неё «открывается» вкладка. Это же действие, так ведь? Но что, если вы нажмете клавишу-модификатор и откроете её в новой вкладке? Это по-прежнему будет работать.
• А что насчёт кнопки «Войти». Похоже на действие, но что, если кнопка — это ссылка, и она просто перемещает пользователя на страницу со входом?
• А что насчёт кнопки в <form method="POST" />? Можно отправить в новую вкладку, что делает её немного похожей на ссылку, но также и отправляет данные, поэтому походит и на кнопку, выполняющую действие. Или форма с GET, у которой вообще не должно быть никаких побочных эффектов?

Я заметил, что в обсуждениях с коллегами, мы говорим о чем-то, как о «кнопке», но у себя в HTML я использую <a />. Или даже наоборот.

Заключение

Вопрос в том, есть ли смысл применять «неправильный» курсор? Когда я поспрашивал в Твиттере, кто-то говорил, что ошибочное применение курсора пальца — не проблема, поскольку это никого не смущает и проблемы с удобством есть как раз у «беспальцевого» курсора.

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

Обновление 12/08/2016: Normalize больше не применяет курсор в виде указателя, как сказал мне Шиме Видас (спасибо!)

Благодарю Крейна Хутмера за примеры с формой.

P.S. Это тоже может быть интересно:

• Как читать W3C-спецификации
• Не боритесь с каскадом, управляйте им!
• Тёмная сторона CSS: выходим за рамки и взрываем звезды с border-image и градиентами