Кнопка тоже ссылка. Или нет?

∞ 16 июня, 2009 | 23 комментария

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

Лично я считаю кнопку ссылкой. Например Википедия пишет о гиперссылке следующее:

“Гиперссылка — часть электронного (гипертекстового) документа, ссылающаяся на другой элемент (команда, текст, заголовок, примечание, изображение) в самом документе, на другой объект (файл, директория, приложение), расположенный на локальном компьютере или в компьютерной сети, либо на элементы этого объекта.”

Submit button попадает под это определение. Как минимум это относиться к кнопкам поисковиков. Видимо такие гиганты как например Яндекс и Google с этим не согласны. Кнопки этих поисковых систем нажимаются миллионы раз в день. Но указательный пальчик не появляется.

Причём реализовать это проще простого. Например, добавляем к HTML-коду кнопки поиска класс search:

<input type="submit" value="Найти" class="search" />

И в CSS прописываем свойство этого класса:

.search {cursor: pointer;}

Кто-то может сказать, что «это всё мелочи». Но «юзабилити» не согласится.

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

Кнопка заслуживает указателя 😉

Всего оставлено 23 комментария

Cuprum 17 июня 2009 ∞

Тоже придерживаюсь т.з., что в вебе курсор на кнопке должен превращаться в указатель. Хотя если, кнопка выглядит “дефолтно”, без css-ухищрений, можно в некоторых случаях оставить и стрелочку.
зы. welcome back!
Алексей Скрипник 17 июня 2009 ∞

Какая же это ссылка? Ссылку можно открыть в новом окне, сохранить в закладки или отправить другу.
Никита Вакорин 17 июня 2009 ∞

@Cuprum:

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

@Алексей:

Согласен — все перечисленные действия можно отнести к ссылке. Но тогда как быть, например, с JavaScript’ом, активировать который можно с помощью ссылки (или текста, который выглядит как ссылка), но который не предназначен для открытия в новом окне?

Существует множество ситуаций, в которых щелчок мышки по ссылке активирует действие, которое выполняется в пределах данной страницы. Более того, это действие может выполняться только в определённых условиях, что не позволяет выслать ссылку другу или сохранить в закладки.
Cuprum 17 июня 2009 ∞

2 Никита Вакорин
одиночная кнопка – согласен. Но если это какой-то калькулятор на странице для сложных расчетов с множеством кнопок (без css-оформления) – как раз тот “некоторый случай”, когда вполне можно без cursor:pointer;.
pepelsbey 17 июня 2009 ∞

Всегда поддерживал эту точку зрения.

Кстати, если делать кнопку через input:image, то курсор появляется сам, а если при помощи input:submit или просто button, то нет. Думаю, что стоит сделать похожие вещи похожими.

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

Кнопки отправки комментария скорее стоит сделать более нажимабельными 😉
pepelsbey 17 июня 2009 ∞

Вижу, что кнопки преобразились ) Но вот проблема: во всех реализациях border-radius (Safari, Firefox) есть большая проблема, когда фон вываливается из границ рамки. Решение — не использовать рамку вообще или подобрать более близкие цвета.

Кстати, Safari подсвечивает все поля свойством outline и его тоже можно скруглить: -webkit-outline-radius.
Никита Вакорин 17 июня 2009 ∞

@pepelsbey

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

Кстати, ещё есть -khtml-border-radius для Konqueror. В итоге код кнопки без границ получается таким:
```
#button {
  cursor:pointer;
  border:none;
  border-radius:9px;
  -moz-border-radius:9px;
  -khtml-border-radius:9px;
  -webkit-border-radius:9px;
  }
```
Ну и text-shadow по вкусу.

А что касается полей формы и “аутлайна”, то лучше вообще без него — outline:none

Live redesign. Markup polish in progress 🙂
SelenIT 17 июня 2009 ∞

А я, наверное, жуткий ретрогад, но… не могу согласиться. На мой взгляд, кнопка — прежде всего стандартный элемент интерфейса. Та же форма поиска на сайте — чем она принципиально отличается от встроенной панели поиска в браузере? По-моему, логично, чтобы у пользователя при работе с обоими интерфейсами активировались одни и те же привычки (“не задумываясь ввел, не задумываясь нажал”). Если же при таком привычном наведении на кнопку у нее вдруг сменится курсор на “ссылочный” — кое-кого из пользователей (вроде меня;) это может озадачить: “Хм… А это кнопка или не кнопка? А не уведет ли она меня с этой страницы, где я только что так усердно набирал поисковую фразу?…”

Полностью поддерживаю аргументацию Алексея Скрипника. А насчет JS-овых и аяксовых псевдоссылок — так не случайно же хорошим тоном стало визуально отделять их от обычных (пунктирным подчеркиванием, особой иконкой и т.п.). Хотя вообще вешать JS-функциональность на “глухие” ссылки — имхо, неудачная практика (ее не оправдывает даже :hover в IE6 — все равно ведь без JS толку от этих ссылок ноль!). Для таких вещей в HTML есть… кнопки:)

Менять курсор на “пальчик”, на мой взгляд, стоит лишь для чисто дизайнерско-украшательских элементов, равно не похожих ни на стандартные кнопки, ни на обычные ссылки — чтоб пользователь хоть как-то догадался, что туда можно кликнуть. А когда кликабельность очевидна — незачем ломать стереотипы без нужды…
Никита Вакорин 18 июня 2009 ∞

@SelenIT

Очень ясно, но я остаюсь при своём мнении.

“Та же форма поиска на сайте — чем она принципиально отличается от встроенной панели поиска в браузере?”

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

“…кое-кого из пользователей (вроде меня;) это может озадачить…”

Во первых, считаю, что автор подобного комментария не может быть озадачен столь сложной ситуацией также, как и не может претендовать на звание “жуткий ретроГАд”.

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

“Хм… А это кнопка или не кнопка? А не уведет ли она меня с этой страницы, где я только что так усердно набирал поисковую фразу?…”

Если эта “кнопка не кнопка” хоть как-то похожа на прямоугольник со словом “Найти”, то никакой стереотип неспособен вызвать подобные сомнения.

Согласен, что хорошим тоном считается визуально отделять локальные ссылки, но если даже подчёркивать эти ссылки пунктиром или обозначать иконкой, всё равно необходим указатель ссылки (в виде руки;).
SelenIT 18 июня 2009 ∞

Никита, спасибо за ответ! Вопрос про менюшки, задизайненные под интерфейс ОС, помог мне уточнить мою позицию:). Сначала я хотел было ответить “конечно да, имитировать ОС — так до конца”, но потом сообразил: ведь что такое навигационное меню сайта, как не набор ссылок?

И тут меня осенило: а ведь курсор в виде пальчика — это же прекрасная встроенная лакмусовая бумажка, помогающая отличить элемент системной функциональности (кнопку, select, тулбар, контекстное меню и т.п.) от настоящей ссылки (которую можно открыть колесиком в новом окне, “послать другу” и т.п. по списку), лишь притворяющейся (в силу причуды дизайнера:) таким системным контролом!

Исторически сложилось, что дизайнеры имитируют системные контролы (те же табы, например) ссылками не от хорошей жизни, а из-за бедности выразительных средств HTML вообще и фиговатой, прямо скажем, поддержки имеющихся средств браузерами (пресловутые :hover/:active в IE6). Уже сейчас эта ситуация стремительно меняется (HTML5 обещает возможность создавать свои меню браузера для элементов сайта, CSS3 обещает нативные табы, а IE6 пусть не так уж стремительно, но неуклонно вымирает…) и, на мой взгляд, идет к тому, что сайты будут предоставлять пользователям все больше привычной программной функциональности. Интерактивность больше не будет ограничена одними лишь ссылками да формами, а грань между “обычными сайтами” и веб-приложениями будет стираться. И, по-моему, отталкиваясь от нынешней практики (“раз кликабельно, значит ссылка”) и закрепляя ее навеки, есть риск как раз прозевать прогресс и угодить в “ретрогады” (кстати, забавная очепечатка у меня получилась:).

И насчет разницы между работой в окне программы и “окне интернета”: очевидна она лишь для нас, айтишников, работающих с компьютером давно и профессионально. Для очень многих людей, далеких от IT, в компьютерных интерфейсах вообще нет ничего очевидного — все новое и даже порой пугающее:). Таким пользователям не объяснишь, что одна и та же по виду и функции кнопка ведет себя по-разному, т.к. “здесь она относится к сайту, а там — к ОС”, для них от этих объяснений в загадочном и непонятном “простому смертному” мире компьютерных технологий всего лишь добавится еще одной неподвластной здравому смыслу загадкой.

P.S. Я сам вроде понимаю разницу между вебом и ОС, между обычной ссылкой и локальной… но: по работе постоянно имею дело с веб-приложением, где рядом два меню: из обычных ссылок и JS-овых. И мне часто нужно открыть страницу этого приложения в новом табе. И то, что для половины ссылок это элементарно делается “колесиком”, а для другой половины (такого же вида, с таким же курсором!) не делается никак — изрядно бесит… 🙂
Никита Вакорин 18 июня 2009 ∞

Конечно, навигационное меню сайта обычно состоит из набора ссылок. Причём эти “настоящие ссылки” могут быть локальными (ссылаться на элементы в пределах одной страницы) также, как и быть элементами “системной функциональности”. Независимо от предназначения ссылок — они остаются ссылками.

Беру за пример кнопку “Найти” в Яндексе. Она подходит под понятие “системной функциональности”, но является ссылкой на страницу результатов поиска. Причём получившуюся ссылку можно отправить другу, или сохранить в закладках. Недостаток в том, что из-за “фиговатой, прямо скажем, поддержки имеющихся средств браузерами”, этого нельзя реализовать по умолчанию, щёлкнув правой кнопкой мыши по данной кнопке, и заранее сохранить или скопировать ссылку. По этой же причине нельзя с помощью сочетаний клавиш открыть результаты поиска в новой вкладке.

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

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

Кстати есть вот такое CSS-свойство:
```
#link {
  cursor: url(название-курсора.cur);
  }
```
Возможно будущее подарит нам новые “дефолтные” курсоры 😀

Эта тема заставляет меня ощущать себя настоящим “гиком”.
SelenIT 18 июня 2009 ∞

А мне тут еще подумалось: а сама ли кнопка — ссылка на результаты поиска? Ведь, пока в форму ничего не введено, браузер не знает, чего грузить (разве что поиск пустой строки, дзенский такой..:). И открыть в новом окне или сохранить рез-т поиска в закладках через правый клик по кнопке нельзя не из-за “убогих браузеров”, а потому, что кнопка, в отличие от ссылки, не несет в себе всей достаточной информации. Необходимые и достаточные условия для получения этого рез-та — вся форма поиска, кнопка + заполненное поле. Только тогда браузер может сформировать нужный URI, не дожидаясь нажатия (напр. с помощью JS). Кстати, интересно бы сделать такой поисковый виджет, у которого вместо кнопки была бы настоящая динамическая ссылка на результаты (с href, обновляемым по onchange текстового поля). Ни разу такого не видел, но гикам, предполагаю, понравится:).

Но то поиск. А вот делать ссылкой или “как бы ссылкой” кнопку логина, например, на мой взгляд нельзя категорически, даром что она тоже “ведет на другой объект (страницу)”. Возможности даже случайно “послать (не-)другу сессию авторизации” в принципе не должно быть:). Имхо, это справедливо и для всех POST-форм. И юзер должен не только понимать, но и наглядно видеть разницу.

По-прежнему считаю, что “ссылкой” должна быть только ссылка. Это для браузера любой ‹a href="..."› — ссылка, а для пользователя важен результат, а не техническая реализация. Если вебмастер в угоду дизайну и по недостатку знаний CSS меняет кнопку сабмита формы на ‹a href="#" onclick="document.myform.submit()"›протез кнопки‹/a› (увы, довольно часто, судя по вопросам на форумах) — по сути (функционально) она остается кривой, но кнопкой (по крайней мере, в моем понимании). Да, отличить такой “протез кнопки” от настоящей ссылки можно, но об этом приходится специально себе напоминать (дополнительно напрягать мозг), особенно когда близкорасположенные ссылки и “протезы кнопок” оформлены практически одинаково. Зачем? Тем более когда, действительно, появились кастомные курсоры, дающие возможность различать функционально разные контролы еще более четко и однозначно. Так стоит ли а) ограничивать собственную фантазию и б) заставлять пользователя выполнять лишнюю умственную работу, фактически намеренно вводя его в заблуждение? 🙂
SelenIT 18 июня 2009 ∞

Upd: насчет виджета — протупил я, конечно, что не видел :). У тех же Гугла с Яндексом такое уже есть (напр., если вместо кнопки кликнуть по ссылке “картинки”)…
Никита Вакорин 20 июня 2009 ∞

@SelenIT

«А вот делать ссылкой или “как бы ссылкой” кнопку логина, например, на мой взгляд нельзя категорически, даром что она тоже “ведет на другой объект (страницу)”»

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

А то, что “для пользователя важен результат”, не означает, что визуальное оформление кнопки, которая приведёт к этому результату, не должно оформляться в виде руки с указательным пальцем.

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

И ссылочный указатель кнопки не заставляет пользователя “выполнять лишнюю умственную работу”. Ведь отсутствие обозначения того, что в этом поле нужно ввести поисковую фразу, кроме обозначения, указываемого словом на следующей этому полю кнопке, только подтверждает достаточно развитое в эти дни интуитивное мышление пользователя интернета, в большей степени привитое привычной функцией полей поисковых систем 😀
SelenIT 20 июня 2009 ∞

> то, что “для пользователя важен результат”, не означает, что визуальное оформление кнопки, которая приведёт к этому результату, не должно оформляться в виде руки с указательным пальцем.

На мой взгляд, означает. Именно потому, что у пользователей уже сложился определенный “экспириенс” в работе с веб-формами (тех же поисковиков и т.п.), и этот опыт ближе к работе с десктопными программами, чем со ссылками (вон, многие даже не видят разницы между строкой поисковика и адресной строкой браузера, где уж им разные типы кнопок различать). Поэтому, имхо, тот же Яндекс может обвешивать свое поле поиска все новыми и новыми динамическими ссылками (“картинки”, “блоги”, “ещё”…), но стандартную кнопку (с курсором-стрелкой) не убирает и не меняет. Кстати, ссылка (или все-таки кнопка?) “ещё” на Яндексе оригинальна: она показывает при наведении адрес в статусе, ее можно скопировать и открыть в новом окне… но по простому клику она никуда не переходит, а открывает выпадающий список. Это интуитивно? 😉

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

Опять же, была давным-давно у MS попытка сделать “ссылками” ярлыки рабочего стола (в какой-то редакции Win98, ЕМНИП, было по умолчанию) — не прижилась почему-то (или просто время не пришло?).

Кстати, не так давно был жаркий спор на эту тему на Хабрахабре (я тогда проголосовал за “палец” лишь для нестандартных кнопок). Интересно, что показал бы такой опрос среди не-гиков?..
Никита Вакорин 24 июня 2009 ∞

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

«Кстати, ссылка (или все-таки кнопка?) “ещё” на Яндексе оригинальна: она показывает при наведении адрес в статусе, ее можно скопировать и открыть в новом окне…»

Я бы назвал этот элемент “выпадающим меню”. А рука появляется так как можно нажать. На мой взгляд, было бы правильней, если при наведении курсора мыши выпадающее меню появлялось автоматически, без нажатия. Хотя рядом есть треугольничек, указывающий вниз; и подчёркивание пунктирное. И вообще — это JS:) Возможно, изначально пользователь предполагает, что перейдёт на новую страницу, но при нажатии приятно удивляется быстроте выбора. Тут без юзабилити-тестов не обойтись 😉

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

У сенсорных экранов вообще нет курсоров, обозначающих и следящих за неприкасаемым движением пальца. Видишь ссылку — нажимаешь пальцем. Видишь кнопку — тоже нажимаешь. В случае с мышкой аналогично — перед нажатием появляется указательный палец.
SelenIT 26 июня 2009 ∞

Занятно, что по букве спеки CSS3 Basic UI Module (Candidate Recommendation, BTW) не “кнопка тоже ссылка”, а наоборот — ссылка тоже кнопка! 🙂
Никита Вакорин 27 июня 2009 ∞

Что и требовалось доказать 😀
SelenIT 27 июня 2009 ∞

Доказательство логически неверно :). По частному случаю нельзя делать однозначных выводов об общем правиле.

Иначе получится, что и для чекбоксов, и для радиобаттонов, и для опций меню (select-ов), и для табов — для всех “разновидностей кнопок” (по CSS3) придется лепить ссылочный курсор.

В демонстрации appearance:button курсор дефолтный. Меняется он только для appearance:hyperlink (т.к. “indicates a link”)…
Никита Вакорин 27 июня 2009 ∞

Дефолтное поведение для браузера задаётся appearance:push-button, где у кнопки есть бордюры и она выглядит выпукло.

А что касается appearance:hyperlink, то это правило также применимо для гипертекста (:link,:visited). То есть ссылка может быть стилизована, например, под обычный текст (этой возможностью никого не удивишь). Поэтому совершенно верно — в данном случае, если кнопка ссылка, то курсор меняется на руку.

И вообще, если в спецификации оговаривается, что appearance:push-button — это дефолтное поведение для кнопок “времён” HTML4/XHTML1, то возможно, браузеры ещё не интегрировали дефолтное поведение для “новых времён”.

А логическое заключение и вывод уже можно сделать — кнопка может быть ссылкой 😉
Paul Melekhov 6 июля 2009 ∞

Категорически не согласен с тем, что кнопка является ссылкой. Ссылка — это примитив, содержащий адрес, который может быть открыт. Кнопка — это либо submit (отправка данных формы), либо запрограммированное javascript’ом поведение, результатом которого может быть что угодно, в том числе и переход на некоторый адрес, но не обязательно.

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

Делая курсор “пальчик” при наведении на кнопку вы вводите пользователя в заблуждение, т.к. тем самым говорите ему “нажимай сюда, не бойся, это просто ссылка”. Юзабилити, блин… Юзабилити не должно вводить пользователя в заблуждение. Заменой курсора на кнопке вы ничем не помогаете пользователю.
Paul Melekhov 6 июля 2009 ∞

Сразу добавлю. Если вы скажете “на ссылку можно повесить javascript-обработчик”, то я отвечу: “Ссылку все равно можно открыть, минуя обработчик, открыв ссылку в новом окне/табе, например, при помощи средней кнопки мыши”.
Zigzag 7 июля 2009 ∞

Ребята. Как-то вы все усложняете слишком. Пользователь, имхо, не станет так глубоко мыслить. Я придерживаюсь мнения, что pointer должен стоять на нестандартных кнопках (особенно, если нет hover-состояния) с целью показать, что объект под курсором кликабелен.

Кнопка тоже ссылка. Или нет?

Всего оставлено 23 комментария

Поиск по сайту

Из последнего