Полезные соображения насчет курсоров по умолчанию

Перевод статьи 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. Это тоже может быть интересно:

6 Комментарии

  1. Серей


    Использование «пальца» всё равно

    Это как? Гуглотранслейт?


    Многие всё равно применяют к кнопкам указатель в виде курсора. И я так делал.

    указатель в виде курсора — очень занятно.

  2. Алексей

    Вопрос мирового масштаба :-) По-моему это забота дизайнера продумать, как будет интуитивнее восприниматься. Вроде, для кнопки, лично мне привычнее обычный курсор + лёгкая подсветка при наведении…

  3. qleap

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

  4. Юля

    Я всегда задаю курсор-палец элементам, на которые если кликнуть/навести курсор, то что-нибудь произойдет.

  5. newJS

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

    Тоже считаю что палец это призыв «НАЖМИ МЕНЯ», и не более.

    1. Arten

      Тогда нужно ввести дополнительную спецификацию доп курсор для кнопок. Ведь не всегда ясно, что элемент, что то делает.

Оставить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Получать новые комментарии по электронной почте. Вы можете подписаться без комментирования.