x
 
Александр Штейников
19 января 2012

Добрый день!

Возник вопрос о том, как должны вести себя кнопки в вебе при наведении на них курсора? Не помню как в Виндоусе, но в ОС Х кнопки никак не реагируют на курсор и он остаётся в виде стрелки.

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

Мне кажется, что кнопка (если продолжать метафору реальной кнопки) должна нажиматься пальцем и не реагировать на наведение курсора.

Я понимаю, что вопрос бредовый и можно сделать как угодно, но он не даёт мне покоя. Как лучше?



Мышь — довольно неуклюжее приспособление для прицеливания в кнопки по сравнению с обычным человеческим пальцем. Поэтому обратная связь в виде эффектов наведения помогает «старику Фиттсу».

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

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

А кнопки?

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

Остаётся изменение самой кнопки. На нашем сайте важные кнопки имеют пуленепробиваемый «кондовый» вид, вселяющий уверенность в завтрашнем дне. Такой же и эффект наведения:

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


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

Комментарии

Максим Кучер
19 января 2012

Разве только изменения цвета кнопки достаточно? Кажется, что кнопка видит, что над ней курсор, а вот курсор не видит, что под ним кнопка. Нет уверенности, что клик сработает :-)

Юрий Хан
19 января 2012

В Firefox’е кнопки отображаются и реагируют на наведение так, как указано в выбранной пользователем теме — но только до тех пор, пока дизайнер не начинает задаваться вопросом, какого цвета должны быть кнопки и их фаски/рамки и как им реагировать на наведение. В последнем же случае резко «тупеют» и становятся кирпично-прямоугольными и ровно такого цвета, как сказано.

Пожалуйста, не трогайте внешний вид кнопок.

Никита Прокопов
19 января 2012

Хочу заметить, что спокойные традиционные десктоп-интерфейсы выработали у меня привычку нажимать на кнопку, уводить курсор в сторону и отпускать — просто проверить, что она нажимается. Так что, возможно, ховер не самая плохая идея.

Максим Ахмадинуров
19 января 2012

Мне нравится, как сделано на сайте http://www.utorrent.com

Какой бы цвет ни был у кнопки, при наведении цвет кнопки становится чёрным — предельно ясно и уверенно :-)

Сергей Кондауров
19 января 2012

Для меня гораздо спокойнее видеть палец при наведении на любые кликабельные элементы в интернете.

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

В конце концов, что плохого в пальце? Мы наводим курсор на интерактивный элемент и курсор изменяется. Хуже точно не будет. Наоборот, часто бывают проблемы со «стильными» плоскими кнопками, которым вдобавок не нарисовали ховер или ховер практически не заметен :-)

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

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

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


Цель рубрики — обсуждение вопросов дизайна всех видов, текста в дизайне и взаимоотношений дизайнеров с клиентами.

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

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

Вот такой веб 2.0.

Карусели и слайдеры 10 3 Иногда люди, когда пытаются оценить, насколько выгодно расположены элементы на форме, рисуют линию, по которой якобы глаз скользит 2 Печатаю я текст и вдруг обнаруживаю, что делаю это в неправильной раскладке 10 2




Недавно всплыло

Что вы думаете о способе указывать цвету прозрачность в шестнадцатеричном виде вместо более традиционного RGBA? 3 Расскажите о клише и устойчивых выражениях 13 Как сделать нагляднее таблицу перфорированных лотков? Часть вторая 5 Поделитесь соображениями, как работать, путешествуя 8