Курсор на кнопке в браузере — стрелка или палец?

Question

[DanLuchinsky]

Вот озадачился, никак не могу решить. Есть кнопка на сайте — <input type=button value="..."> или <button>...</button>. Нужно ли менять курсор на руку с пальцем (cursor: pointer;) при наведении мыши на нее? С одной стороны это логично: кнопка изначально есть реальный физический объект, на который нажимает не менее реальный человеческий палец, а не какие-то стрелки. С другой стороны, народ привык курсором-пальцем тыкать по ссылкам (текстовым, графическим — не важно, главное — происходит переход на другой адрес), а кнопка на вебе — не обязательно ссылка. Ну и по умолчанию в ОС (по крайней мере, в Windows) курсор на кнопках остается дефолтным, т. е. стрелкой.


В итоге имеем логику на стороне пальца и массовую привычку на стороне стрелки. Так чему отдать предпочтение? Какие еще есть аргументы?

Answer 1

[xanep]

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

Answer 2

[Rampage_Masta]

Палец удобнее, сразу даёт понять что всё ок и можно жать

Comments

[DanLuchinsky]

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

[Rampage_Masta]

Пальцы правят в браузере, они просто везде

[Rampage_Masta]

И вообще резонный вопрос «Зачем изобретать велосипед?»

Answer 3

[Михаил]

Answer 4

[volos]

только палец

Answer 5

[girichev]

cursor: pointer нагляднее чем смена стиля кнопки, например, если картинки и стили отключены — pointer при наведении на название даст знать что будет действие (с обычным курсором ничего не произойдет).

Google, Apple, Twitter используют pointer

Comments

[Александр Матвеев]

Этим комментарием можно подвести итог)

Answer 6

[fp71g]

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

Answer 7

[Mithgol]

Если читатель привык видеть для гиперссылок палец, направленный вверх, а для кнопок — стрелку, направленную по диагонали вверх и влево, то можно попробовать для кнопок нечто среднее: палец, но направленный по диагонали вверх и влево. Вот я его нарисовал:


Вот тот же палец с двукратным увеличением для удобства просмотра:


Задать произвольную форму курсора, загружая её из файла, можно в соответствии с CSS 2.1, который совсем недавно (7 июня 2011 года) объявлен стандартом (W3C Recommendation). Это делается указанием значения url(…) в свойстве cursor.

Answer 8

[Сергей]

1. Если кнопка — действительно кнопка — стрелка
2. Если ссылка, то подчеркнутая и палец.
3. Если аякс ссылка, то пунтирно-подчеркнутая и палец.

4. Если кнопка нарисованная, то тут уже смотря как нарисовали. Если очень похоже на обычную кнопку или навороченную средствами CSS — стрелка. Если рисунок на пол экрана «Зарегистрироваться» или типа того — палец.
Например как на www.e-kontur.ru/ регистрация.

Comments

[Сергей]

навороченную средствами CSS имелась ввиду например гуглокнопка.

Answer 9

[fp71g]

Палец ;)

Comments

[fp71g]

По логике. Но в большинстве случаев (специально просмотрел кучу сайтов -)) на кнопке курсор так и остался курсором. Решать вам.

Answer 10

[bootch]

Что подумает пользователь, когда курсор над кнопкой превратится в руку?
Мысль 1: Комп заглючил или подвис.
Мысль 2: Если я нажму на кнопку, то перейду на сторонний сайт.
…
Мысль N: Создатель сайта специально подумал, что я отождествлю кнопку с реальным физическим объектом и изменившийся курсор подскажет мне, что на кнопку можно нажать.

P.S. Не вводите пользователей в замешательство, они этого не любят.

Comments

[Михаил]

вы когда в хабраредакторе делаете текст жирным боитесь что комп завис?

[fp71g]

А когда нажимаете кнопку «Написать комментарий»? ;)

[DanLuchinsky]

Благодарю за мысль 1, о таком не подумал.

[bootch]

Когда я нажимаю «комментировать» у меня нет никакой уверенности, что форма комментирования выпадет в этом окне, а не откроется в новом. Поэтому я считаю, что изменение курсора над кнопкой «комментировать» — лишнее.
Что касается кнопки «жирный» итп, то такого ощущения не возникает, что вероятно связано с привычкой.

[Александр Матвеев]

При нажатии на «комментировать» нет такой мысли, потому что она подчеркнута пунктиром.

Answer 11

[Vendict]

И ещё одно мнение за стрелку. Больше всего не нравится именно изображения пальца над ссылками. Может потому что он занимает больше места, чем стрелка, может дело привычки. Но на всех Windows-машинах я ставил другой курсор вместо пальца. Хотя тут подумав понял, что в КДЕ он так не мешает.
Т. е. если и уходить от стрелки, то на кастомный курсор, загруженный из файла.

Answer 12

[Bright]

Кнопки в гугле меняют курсор на палец (но их кнопки выглядят несколько нетрадиционно).
Яндекс оставляет стрелку (стандартная кнопка).
Вконтакте (нестандартная кнопка) — палец.
Одноклассники — стандартная кнопка, стрелка.

Эти 4 сайта посещает большая часть интернет-пользователей. Следовательно, они привыкли к простому правилу:
— если кнопка обычная, ожидаем увидеть курсор-стрелку
— если кнопка «красивая» — палец.

Comments

[DanLuchinsky]

Где тогда рубеж между обычностью и красивостью?

[girichev]

DanLuchinsky, стандартную кнопку лучше не трогать, на всех остальных лучше pointer

[Bright]

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

Answer 13

[Kindman]

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

Например, для «классических» веб-форм:
Кнопка [Очистить] — «Стрелка»
Кнопка [Отправить] — «Палец»

Как исключение из этого правила — «ссылки» подчеркнутые пунктиром:
Несмотря на то, что со страницы они не уводят — курсор «палец».

Comments

[Kindman]

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

[Kindman]

Другой пример: «Виртуальная клавиатура».
Алфавитно-цифровые кнопки — «стрелка», кнопка «Энтер» — палец.