Антон Ловчиков
15 июля 2010

Очень часто встречаю на сайтах псевдокнопки, большие и сочные, побуждающие посетителей совершить какое-то действие, например, зарегистрироваться на сайте (первые два примера). Приём хороший и, как мне кажется, работающий. Но с точки зрения семантики не совсем правильно: это же не кнопки, а ссылки. На некоторых проектах я стал использовать «банерные ссылки» — подчёркнутые ссылки с подложкой в виде объемной кнопки (третий пример). Но многим этот приём кажется странным.

Как вы считаете, можно ли закрыть глаза на семантику и использовать псевдокнопки или же есть какое-то другое решение?



Антон!

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

Посетители нашего трёхдневного курса знают, что кнопке исторически позволено нести навигационную функцию — например вызова «организатора стилей» в Ворде.

Предполагаю, что семантические праведники предложат использовать <button> с графическим фоном.

P. S.

Дата следующего набора в Школу стажёров пока неизвестна.

 
Мы напишем вам, когда будет открыт набор. Без спама.

Поделиться

Комментарии


15 июля 2010

По-моему, кнопка или ссылка могут быть технически реализованы как угодно. Главное, чтобы в браузере они вели себя так, как мы того ожидаем.

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

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

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

Ольга Романова
15 июля 2010

Хотелось бы рассмотреть и обратную ситуацию, когда кнопки внешне выглядят ссылками (слово с подчёркиванием). Тем самым пытаются придать им низкий вес, показать второстепенность. Уважаемые советчики, хорошо ли это?

Леонид Назаров
15 июля 2010

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

Стасис Чепулис
15 июля 2010

Единственное место, где уместно подчёркивание на кнопке — кнопка, выполняющая действие «подчеркнуть» в текстовом редакторе.

Олег Данилов
15 июля 2010

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

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

Игорь Алексеенко
15 июля 2010

<button /> использовать можно, но чтобы кнопка по нажатию на неё переводила на другую страницу, нужно или использовать js и вешать обработчик нажатия на кнопку, что не даёт возможности пользователям с отключенным js её использовать по назначению; или чтобы она работала без js, нужно делать эту кнопку submit и обрамлять формой с action, что порождает лишнюю сущность и тоже не полезно для семантики, поскольку мы не отправляем никакие данные на страницу, на которую собираемся перейти.

Поэтому, на мой взгляд, нет ничего страшного в том, чтобы сделать кнопку ссылкой. К тому же сделать кнопку c поведением как у ссылки нет ничего сложного, это решается одним css.

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

Алексей Рытов
15 июля 2010

По мне — полная ерунда. В коде — это обычная ссылка, любой браузер её отобразит. Ну а то, что я раскрасил её с помощью css — это не грех!

Эдуард Гомоляко
16 июля 2010

Не, <button> не пойдёт. Если у пользователя нет JS, то он никуда не попадёт. Нужен <a href> и стиль для него в виде кнопки. Без подчёркиваний, конечно же.


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

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

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

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





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

Кто ты? 1 4 7 Как сделать плавный переход от общения с администратором к директору? 1