Очень часто встречаю на сайтах псевдокнопки, большие и сочные

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

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

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

А. Г.

Антон!

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

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

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

Твитнуть

Отправить

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Не,

	Ваш комментарий	Цель рубрики — обсуждение вопросов дизайна всех видов, текста в дизайне и взаимоотношений дизайнеров с клиентами. Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры. Мы ожидаем, что такие комментарии составят около 20% от общего числа. Решение о публикации принимается один раз; мы не имеем возможности комментировать или пересматривать свое решение, хотя оно может быть ошибочно. Уже опубликованные комментарии могут быть удалены через некоторое время, если без них обсуждение не становится менее ценным или интересным. Вот такой веб 2.0.

Имя и фамилия	обязательны полностью для публикации комментария
Электронная почта	адрес не будет опубликован
Ваши соображения
Иллюстрация	гиф или джипег шириной не более 700 пикселей

Похожие советы Синтаксис элементов интерфейса₁₆ Продающая кнопка₃ Носитель: сайт₅₃₄

2 • 1 • 5 • В каком лице формулировать ссылки и баблы на сайте? 5 •

2 • 2 • 1 • Как озаглавить форму записи в парикмахерскую 2 • 1 • Как, с точки зрения синтаксиса элементов интерфейса, подписывать ссылки, иконки, вкладки? 1 • Как, с точки зрения синтаксиса элементов интерфейса, подписывать кнопки? 1 • Как подписывать кнопки? 2 • Подлежащее и сказумое в синтаксисе элементов интерфейса Что такое «синтаксис элементов интерфейса»? Что такое «синтаксис элементов интерфейса»? Что такое «синтаксис элементов интерфейса»? 5 • 3 • В каком лице формулировать ссылки и баблы на сайте? 5 •

1 • 5 • 4 •

3 • 1 • Фиолетовый цвет в новом дизайне советов не уместен 1 • 1 • Куда поставить ссылку: на поля или в текст? 2 • 3 • Стоит ли использовать выворотку в вебе и полиграфии? 1 • 1 • 1 • Как расположить 30 видеороликов? 2 • 2 • 1 • 1 • 3 • 1 • Сайты для слабовидящих 2 • 1 • Как оформить портфолио маркетологу? 1 • 2 • 4 • 2 • 2 • 3 • 5 • 2 • 1 • 4 • 1 • 3 • Как правильно в мобильных приложениях ставить ссылки? 1 • 1 • 3 • 1 • 2 • 4 • 2 • 4 • 1 • 3 • 1 • 2 • 3 • 3 • 2 • 3 • 3 • 1 • 2 • 5 • 1 • 1 • 3 • 2 • 1 • 1 • 5 • 2 • 2 • Сдала курсач в Школе редакторов 5 • 8 • 1 • Инфографика про губернаторов Иркутской области. Вторая часть 2 • 4 • 3 • 5 • Нужно, чтобы эти элементы были на странице, но получается сумбур. Четвёртая часть 3 • Нужно, чтобы эти элементы были на странице, но получается сумбур. Третья часть 1 • Нужно, чтобы эти элементы были на странице, но получается сумбур. Вторая часть 1 • 1 • При создании макета сайта зарылся в детали и упустил самое главное. Третья часть 5 • При создании макета сайта зарылся в детали и упустил самое главное. Вторая часть 4 • Как сделать, чтобы человек не ушёл с сайта, докрутив страницу до конца? 1 • 3 • 4 • 4 • 2 • 2 • 2 • 3 • 9 • Интернет-магазин принудительно отправляет пользователя в корзину с формой оформления товара 7 • Расскажите об ушках, цитатах и фактоидах 1 • Как верстать текстовые блоки с иллюстрациями? 2 • 7 • Что нужно знать о подписях в вёрстке? 2 • Как работают элементы управления в вёрстке 3 • 8 • 9 • 12 • Зачем нужны страницы «О компании» и «Команда». 2 • Что должен знать дизайнер об интерлиньяжах, полях, отступах, кеглях, выравниваниях и модульных сетках? 9 • Как лучше всего решить эту задачу, если текст нужно разделить на анонс и основной текст? 2 • 1 • Я не понимаю, как должен быть устроен мир — в смысле сохранения предпочтений 2 • 4 • 1 • 4 • Занимаюсь разработкой интерфейса веб-приложения, в некоторых местах надо показать числовой коэффициент 3 • За какими вещами нужно следить, чтобы при загрузке страница выглядела прилично? 1 • С чего начать изучение ЦСС? 1 • Как сделать, чтобы блок при прокрутке залипал у верхней границы окна браузера? 5 • 10 • Можно ли заверстать несколько разноширинных элементов через равные промежутки в резиновом контейнере? 1 • Как быстро придумать простой логотип для своего сайта? 1 • 3 • Чем отличается блог с комментариями от блога с отключенными комментариями? 3 • Удачное ли решение на сайте в поле пароля указывать, что нажат капслок, как на Маке? 6 • 8 • 6 • 3 • 9 • 11 • 3 • Как поступить правильно по отношению к читателю и поисковикам? 7 • Карусели и слайдеры 10 • 5 • 3 • 2 • 4 • Как вы храните данные для многоязычных сайтов? 3 • 4 • Что делать, если он совершил какие-то действия, а после этого заходит в свой профиль, где уже есть сохранённые данные? 5 • 5 • 2 • 3 • Как правильно сделать подчёркивание многострочного текста, чтобы линия была в три пикселя? 1 • 5 • 4 • Каким способом можно сделать загрузку кастомных шрифтов приятной? 6 • Артём, объясните, пожалуйста, в чём преимущество div перед table 5 • 5 • 5 • 8 • Как размыть объект? 2 • Как выровнять картинку внутри дива по центру, если её ширина больше ширины дива? 4 • Как правильно разделять разряды чисел? 4 • 6 • Артём, как вы подключаете стили для ИЕ? 3 • 7 • 2 • 7 • Стоит ли наращивать вложенность тегов для структурированности кода? 6 • Хочу сделать смену языка на сайте без перезагрузки страницы (и без аякса) 5 • Как на сайте бюро реализована разрядка у прописных букв? 5 • 14 • 4 • Хотим переделать свой и-магазин пиротехники 3 • Действительно ли необходимо цитаты внутри предложения заключать в тег q? 2 • Год назад запустил личный проект «Либретто опер» 2 • Расскажите, пожалуйста, о типах индикаторов загрузки 13 • 1 • Чем обосновано дублирование основного меню в «подвале»? 4 • Необходимо разработать интернет-магазин китайского чая 2 • Хочется, чтобы много красивых картинок на сайте быстро загружались 14 • 5 • В каких единицах стоит задавать размеры шрифта? 8 • 1 • Используете ли вы готовые ЦМС? 3 • 1 • 3 • Как правильно делать подчёркивание ссылок другим цветом? 6 • 1 • 5 • Как в ЦСС работать с родителями? 3 • 2 • Веб-студия рисует дизайн сайта и для выпадающего меню упорно делает пунктирную ссылку 4 • Как вы относитесь к «отложенным товарам» в интернет-магазинах? 3 • 1 • Как верстать ссылки вида http://site.ru/#news, чтобы при нажатии на них сайт не загружался заново? 2 • 16 • Как вы обходитесь без проверки на робота? 8 • 4 • 9 • 2 • 4 • Проблема в том, что ширина таблиц зависит от контента 5 • 2 • 5 • 3 • Как бы вы расставили ссылки в этих новостях с сайта glavbukh.ru? 1 • 1 • Клиент настаивает на длинных-длинных страницах текста в десятки экранов 4 • 2 • 1 • 3 • 5 • Какой делать фавыконку сайта: просто 16×16 или содержащую в себе разные размеры? 10 • 3 • 4 • 2 • 3 • 3 • 7 • 1 • Есть ли какие-то простые, самые базовые принципы по подбору цветовых схем для сайта? 3 • 6 • Без продвижения в поисковиках мы завтра же закроемся 2 • 3 • 1 • 7 • 2 • Дизайнер старательно вырисовывает в макете кнопку, похожую на его любимую в его ОС 4 • 3 • 1 • 4 • 5 • Есть форма, и есть поле ввода, куда пользователь вводит контактный телефон 3 • 2 • 4 • Сейчас хотя бы уж Джаваскрипт работает у всех? 7 • Как писать цены по-английски? 1 • 4 • 5 • 3 • 6 • 2 • 4 • Иногда люди, когда пытаются оценить, насколько выгодно расположены элементы на форме, рисуют линию, по которой якобы глаз скользит 2 • 5 • 2 • Раз уж интерфейс — зло, нужна ли вообще интернет-магазину корзина? 7 • 5 • 4 • 5 • 10 • 6 • 4 • 1 • Собираем и наполняем сайт одному дилеру известной автомобильной марки по гайдлайнам представительства 1 • 1 • 5 • 3 • 2 • 5 • 6 • Хозяин конторы принимает все решения относительно любого дизайна и вообще 3 • 3 • У меня с коллегой возник спор относительно того, какой элемент интерфейса нужно использовать для разлогинивания пользователя в интернете 7 • 6 • Какой должна быть вёрстка сайта — резиновой или фиксированной? 4 • 5 • 7 • 5 • Поскольку мне никто ничего не написал, пообщаюсь сам с собой 5 • 3 • 1 • Подскажите, пожалуйста, как правильно называть header и footer на сайтах по-русски? 1 • 3 • Я вот заметил, что на некоторых сайтах стали использовать статические баннеры 4 • 6 • 4 • 5 • Как вы относитесь к ссылке «наверх»? 12 • 3 • 4 • 5 • Если пользователь при авторизации на сайте трижды неправильно ввёл пароль, то на его электронную почту автоматически высылается письмо с ссылкой на восстановление 5 • 5 • Скажите, как отучить дизайнера лезть в код? 4 • 10 • Имеет ли смысл ставить кнопку «купить» в списке продуктов в интернет-магазинах? 22 • 3 • Зачем формы авторизации часто делают во всплывающих лайтбоксах 2 • Клиент хочет на сайте цветок. Железно 4 • 6 • Когда пользователь нажимает «Скачать файл», у него не открывается новое окно или же вкладка. Значит, ссылку на скачивание тоже надо подчёркивать пунктиром? 3 • 1 • 3 • 5 • 4 • Артём, пытаюсь не допустить настойчивого предложения сделать выключку текста по ширине в вебе 10 • 11 • 8 • 5 • Заметил, что в Советах вы часто используете капитель 3 • 7 • В каком лице формулировать ссылки и баблы на сайте? 5 • При запросе восстановления пароля сайты высылают подтверждение, при нажатии на ссылку генерируется новый пароль и высылается второе письмо 7 • Стоит ли обозначать ссылки, которые что либо меняют простым наведением курсора, волнистой линией? 5 • 3 • 4 • 4 • 17 • 14 • 6 • Что вы думаете по поводу наличия пункта «главная страница» в основном меню сайта? 9 • 4 • 1 • 5 • 2 • 6 • Почему у вас на сайтах везде используется английский перевод в урл, а в блоге — транслит? 6 • 5 • 5 • 8 • 2 • 5 • 1 • 4 • 4 • 7 • 10 • 7 • 6 • 1 • 10 • 2 • 6 • 3 • 5 • 5 • 6 • Почему бы не отвести часть правой стороны экрана под корзину? 13 • 5 • 3 • Как вы относитесь к новому формату форумов — вопросных систем? 3 • Артём, стоит ли учитывать различие регистров букв в адресах страниц? 11 • 2 • 2 • 7 • 8 • 4 • 13 • 12 • 6 • 5 • 2 • 19 • 4 • 2 • 7 • 4 • 3 • 7 • У меня есть сайт о Джумле 4 • 13 • 1 • 23 • Хотелось бы узнать ваше мнение о правиле «главная страница сайта должна умещаться на одном-двух экранах монитора» 3 • 5 • 10 • 9 • 4 • 2 • 2 • 1 • 7 • 4 • 7 • 3 • 5 • 9 • 2 • Что скажете о работе «Информационных архитекторов»? 1 • 6 • 5 • 3 • 2 • Хотелось бы услышать советы по минималистическому дизайну и по дизайну интернет-магазинов 5 • Почему на artgorbunov.ru курсор над горизонтальным скроллбаром имеет вид «движение во все стороны»? 8 • 12 • Подскажите, при создании сайта что раньше должно быть — дизайн или программирование? 9 • 3 • 13 • 6 • 2 • Как вы относитесь к иконке RSS? 8 • 1 • 4 • 3 • 2 • 3 • 5 • 8 • 1 • 9 • 8 • 8 • 6 • 4 • 11 • Для чего нужна висячая пунктуация в вебе? 6 • 4 • 7 • 3 • 11 • 6 • 1 • Шесть тезисов об идеальной электронной книге 12 • 1 • 22 • 6 • 2 • 23 • 9 • 12 • 15 • 3 • 4 • Довольно часто веб-страница должна содержать заведомо большое количество информации 2 • 1 • 9 • 6 • Как вы считаете, стоит ли причислять смайлы к знакам пунктуации? 6 • 1 • 5 • 12 • 2 • 1 • 7 • 8 • 10 • 5 • Что вы думаете о нотации Гарретта? 10 • Делаем открытый сервис «Сколько стоит хороший сайт?» 7 • 10 • 12 • 3 • 6 • 9 • 29 • 7 • 7 • 9 • Существует ли какая-то система нотации для моделирования пользовательского интерфейса, которая бы позволяла обозначать такие свойства элементов, как «резиновость», сохранение выравнивания по какой-либо оси? 10 • 7 • 9 • 12 • 10 • 7 • 12 • 13 • 7 • 16 • 8 • Как можно указать, что все это — PDF, не ставя иконку у каждой ссылки или просто подпись? 7 • 8 • 11 • Какое, по вашему мнению, самое лучшее решение для страницы faq? 7 • 8 • 22 • 7 • 4 • 8 • 6 • 8 • 3 • 9 • 4 • 4 • 10 • Есть ли смысл оформлять подчеркиванием все ссылки вне основного текста? 16 • 20 • Сет Годин только что опубликовал ссылку на результаты исследования движения глаз во время просмотра информации 5 • 7 • 6 • 15 • 1 • 3 • Что вы думаете насчет Google Chart API? 6 • 4 • 6 • 3 • 3 • Стоит ли при проектировании интерфейса опираться на вариант, что в будущем размеры экранов будут продолжать расти? 4 • 10 • 3 • 11 • 14 • 10 • 11 • 6 • 8 • 7 • 15 • 11 • 11 • 4 • 8 • 11 • 1 • 2 • Что изображать на инфоскроллере, чтобы он был действительно информативным? 7 • 2 • 8 • 15 • 7 • 4 • 4 • 9 • 5 • 4 • 11 • 1 • 7 • 3 • 15 • 12 • 9 • 4 • 12 • 17 • Все почтовые программы делятся на два класса: а-ля веб и а-ля десктоп-приложение 6 • 4 • 12 • Оправдана ли замена слова в меню или тексте на его синоним, если это исключает возможные ошибки при чтении? 17 • 15 • Сначала я думал, что 12 пунктов — это, может быть, 12 пикселей, но не так все просто 8 • 11 • 3 • 2 • 23 • 11 •

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

Выбранные элементы списка, как не забывать принципы из советов бюро и когда нужен логотип 1 • Какой движок выбрать для сайта рекламного агентства? 2 • Все уже успели заметить, что вы почти во всех пятничных примерах советуете немного поунижаться 12 • Почему дизайнер должен уметь писать текст? 8 •

Комментарии

Ваш комментарий

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