Кнопка с ссылкой в html: ссылки или кнопки — журнал «Доктайп»

“Отменить”: кнопка или ссылка?

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

Из статьи вы узнаете:

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

А в самом конце получите ответ на главный вопрос — как же правильно оформить опцию “Отменить”.

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

Обычно эта опция расположена рядом с кнопкой основного действия. Если раньше было принято оформлять ее в виде ссылки, то сейчас мы все чаще встречаем кнопку “Отмена”. 

Навигация vs действие

Пользователи приложений обычно имеют дело с взаимодействиями двух видов: навигацией и действиями. Их внешний вид должен различаться, чтобы с первого взгляда было понятно, что есть что.

1. Навигация — это ссылка
2. Действие — это кнопка

Почему? Ссылки берут свое начало с первых дней существования всемирной паутины. Именно они и делают ее паутиной (и не просто паутиной, а всемирной). Кнопки — это форма скевоморфизма, способ перенести привычные нам переключатели и действия из физического мира в цифровой. 

Соответственно, мы используем их по-разному:

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

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

UI-дизайн

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

Информационная архитектура

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

Давайте рассмотрим пример — магазин, который продает фрукты. На сайте представлен список доступных для заказа опций:

Пользователь может сделать следующее:

• Добавить новый фрукт в список.
• Отфильтровать или отсортировать фрукты
• Перейти к подробному описанию конкретного фрукта из списка
• Перейти к подробному описанию страны происхождения конкретного фрукта из списка.

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

Применим описанную логику к стандартному пользовательскому интерфейсу

Добавление нового фрукта

Когда пользователь хочет добавить новый фрукт в список, он нажимает на ссылку «Добавить фрукт», что приводит к изменению состояния пользовательского интерфейса (т.е. появляется форма, в которую нужно внести данные о новом фрукте).

Современные дизайнеры, как правило, используют вместо ссылки кнопку (или FAB — плавающую кнопку целевого действия) для добавления новых элементов. Однако само по себе это взаимодействие не является действием. Это всего лишь изменение состояния, которое открывает модальное окно для создания записи о новом фрукте. Следовательно, мы имеем дело с навигацией.

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

После того, как состояние интерфейса изменилось, пользователь может выполнить действие, и следовательно, он ожидает найти здесь кнопку, непосредственно отвечающую за добавление нового фрукта в список:

«Добавить фрукт» здесь и впрямь является действием, которое подтверждает намерение пользователя и посылает запрос на изменение данных на сервер.

Это взаимодействие вызывает интересную дискуссию: что увидит пользователь, добавив новый фрукт? Вернется ли он к списку фруктов или перейдет на страницу с подробной информацией о новом фрукте? 

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

Забудем на секунду о кнопке / ссылке “Отменить” и рассмотрим другие доступные пользователям взаимодействия, чтобы найти окончательный ответ на наш главный вопрос.

Фильтры и сортировка

Просматривая список фруктов, пользователь может сократить число опций при помощи фильтров. Он решает применить фильтр «Яблоки» и отсортировать список по весу. Конечно, речь о работе с данными и поэтому мы должны увидеть здесь кнопку, не так ли? 

Ну, если мы проанализируем действия пользователя, окажется, что никакие данные в этом случае не подверглись изменениям. Все фрукты по-прежнему в списке. Пользователь ничего не добавил и не отредактировал. Единственное, что он сделал, — изменил внешний вид / состояние интерфейса. А значит, для фильтров или сортировки вместо кнопок необходимо использовать ссылки.

Сбросить фильтры

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

Вернуться на предыдущую страницу

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

Конечно, все зависит от того, как спроектирован конкретный интерфейс, но чаще всего он включает одну из следующих опций (или обе):

1. Элемент “Назад”
2. Хлебные крошки

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

Как правило, существует и третий вариант: кнопка «Назад» в браузере — да, это именно кнопка, а не ссылка. Мы рассмотрим его позднее.

Закрыть боковую панель

Мы еще на шаг приблизились к ответу на главный вопрос этой статьи. Что если пользователь хочет закрыть боковую панель «Добавить новый фрукт»? Обычно для этого необходимо кликнуть либо по экрану за пределами панели, либо по элементу “Закрыть”. 

Снова задав себе вопрос, что делает пользователь, когда «закрывает» боковую панель, мы приходим к выводу, что он, по сути, прерывает действие. Другими словами, возвращается к предыдущему состоянию пользовательского интерфейса. Получается, мы должны использовать ссылку, а не кнопку.

То же самое можно сказать и о закрытии любого другого окна:

Закрытие — это не действие, а изменение состояния интерфейса.

Отмена действия

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

«Но ведь отмена — это тоже действие, нет?»

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

«Но как насчет отмены подписки на Netflix?»

Это интересное исключение, но оно объяснимо. В данном случае «Отменить» — это первичное действие. Пользователь по-прежнему может отменить первичное действие с помощью одноименной ссылки. Конечно, лучше не использовать и там, и там слово “Отменить”, а выбрать разные формулировки.

«Но как насчет iOS, Windows или MacOS?»

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

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

Именно поэтому отзывчивый дизайн — не то же самое, что нативное мобильное приложение. Это два вида разных пользовательских интерфейсов.

«А как насчет главного меню? Это же точно навигация?»

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

Однако в старые добрые времена было принято представлять пункты главного меню в виде ссылок! (потому что, знаете ли, это навигация). И по сей день в коде эти пункты остаются ссылками, а не кнопками, если речь о семантически правильном HTML.

‍

Будьте последовательны

Сравнивая кнопки и ссылки, мы видим, что между ними существует фундаментальное различие.

Первые инициируют действия, которые выполняются непосредственно внутри таблицы.

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

Когда вы все делаете последовательно, пользователь понимает, чего ожидать от взаимодействия.

Заключение

Вопрос о том, как лучше оформить элемент “Отменить” — в виде ссылки или кнопки — поднимался и ранее. Я думаю, что эта статья UX movement содержала некоторые правильные выводы: отмена — это не действие, но она все же не должна быть кнопкой. (Мне вообще кажется, что серая кнопка больше похожа на неактивную, но это уже тема другого разговора).

Люк Вроблевски в своем знаменитом посте приходит практически к тем же выводам, что и я (кроме того, он также разбирает вопрос позиционирования элементов).

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

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

Разница между кнопками и ссылками в UX и SEO

Кнопки часто просят ставить вместо ссылок просто потому, что такой элемент дизайна нравится больше. В этом материале мы поговорим о разнице между кнопками и ссылками сразу в двух плоскостях — UX и SEO.

Кнопки и ссылки в UX

В UX у ссылок и кнопок разный функционал. Ссылки — элемент навигации. Нажимая на ссылку, пользователь переходит к определенному месту на странице (якорь), попадает в новый раздел (внутренняя ссылка) или уходит на другой ресурс (внешняя ссылка). С кликом по внутренней или внешней ссылке меняется URL, а при нажатии на правую кнопку мыши открывается новое окно.

Правильная ссылка оформляется с тегом <a>, атрибутом href и выглядит как текст без плашки. Например, вот так в html коде выглядит внутренняя ссылка одной из публикаций нашего блога.

<p>Напоминаем, что в 2020 году в <a href=»https://nowmedia.ru/blog/seo-teper-i-v-instagram/» target=»_blank»> Instagram США, Канады и нескольких европейских странах заработал поиск по ключевым словам </a></p>

Кнопки оборачивают атрибутом <button> и оформляют плашкой с прямыми или скругленными углами. И вот как кнопка выглядит на сайте и в html.

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

Кнопки и ссылки в SEO

С SEO еще интереснее…В документах расширенной оптимизации Google черным по белому написано: «Роботы Google могут переходить только по ссылкам в корректно оформленных тегах <a> с действительными URL». 

Другие форматы ссылок не поддерживаются. Это значит, что обернутая в <button> ссылка не сканируется, не обрабатывается, а значит и не передает вес страницы-донора странице-рецепиенту. То есть все усилия по внутренней оптимизации — мимо.

Совсем недавно эту тему затронул и Джон Мюллер, которому задали вопрос про специфику сканирования ссылок с button и a href. Сотрудник Google подтвердил, что кнопки не имеют URL-адреса и не являются ссылками, а значит поисковик не сканирует их и не обрабатывает каким-либо другим способом.

Что в очередной раз подтверждает правило — не перемудри! И даже если ссылки кажутся слишком простыми и скучными, у поисковиков и пользователей совсем другое мнение.

Дальше: Про заказные видеоотзывы и здоровый скептицизм

[HTML] — Как добавить ссылку на мою кнопку в HTML? — SheCodes

Узнайте, как добавить ссылку на кнопку в HTML, используя тег привязки, чтобы обернуть кнопку.

👩‍💻 Технический вопрос

Спросил 3 месяца назад в HTML Alex

 
 Как мне добавить ссылку на мою кнопку? 
  

HTML связь якорный тег кнопка

👩‍💻 Инструкции по коду HTML, CSS и JavaScript

Спросил 3 дня назад в HTML by Heather

 
 центрировать мои 3 изображения на одной строке 
 

HTML CSS изображение центр флексбокс

👩‍💻 Технический вопрос

Спросил 7 дней назад в HTML by Achilla

 
 Какой код поставить слоган рядом с логотипом 
 

HTML CSS логотип слоган позиционирование

👩‍💻 Технический вопрос

Спросил 7 дней назад в HTML by Rebekah

 
 объясните, как работает "span" 
 

HTML охватывать CSS дизайн функциональный

👩‍💻 Технический вопрос

Спросил 13 дней назад в HTML Хана

 
 разница между тегами div и span 
 

HTML див охватывать блочный уровень встроенный

👩‍💻 Технический вопрос

Спросил 23 дня назад в HTML by Thomas

 
 Написать стандартную викторину с использованием HTML, CSS и JavaScript 
 

HTML CSS JavaScript контрольный опрос веб-разработка

👩‍💻 Технический вопрос

Спросил 23 дня назад в HTML от Боитумело

 
 как перейти от списка к горизонтальному 
 

список горизонтальный CSS показать свойство

👩‍💻 Технический вопрос

Спросил 23 дня назад в HTML Наталия

 
 что такое aria-label? 
 

ария-метка доступность программы для чтения с экрана вспомогательные технологии кнопка

👩‍💻 Технический вопрос

Спросил 23 дня назад в HTML Джози

 
 как центрировать изображение 
 

HTML CSS центр изображение

👩‍💻 Технический вопрос

Спросил 24 дня назад в HTML by Shelah

 
 что делает элемент нижнего колонтитула 
 

нижний колонтитул элемент документ раздел веб-страница

👩‍💻 Технический вопрос

Спросил 24 дня назад в HTML Тинсэ

 
 когда использовать span в html 
 

HTML охватывать встроенные элементы CSS JavaScript

👩‍💻 Технический вопрос

Спросил 25 дней назад в HTML от Lungelo

 
 что такое  
 

HTML тег выделения форматирование текста

👩‍💻 Технический вопрос

Спросил 25 дней назад в HTML Андреана

 
 что делает 
 
 

HTML див контейнер блочный уровень макет

👩‍💻 Технический вопрос

Спросил 26 дней назад в HTML by Shelah

 
 что делает элемент span 
 

HTML пролетный элемент встроенный элемент CSS стиль

👩‍💻 Технический вопрос

Спросил 26 дней назад в HTML Шарлотта

 
 уменьшить поля текста абзаца html css 
 

HTML CSS допуск текстовый элемент значение пикселя

 
 Как я могу добавить комментарии к html коду? 
 

 
 что делает span 
 

 
 что такое  и как это работает? 
 

 
 что делает элемент div и span 
 

 
 что делает элемент em? 
 

 
 что делает элемент hr 
 

 
 как комментировать в html 
 

 
 Напишите мне код панели пользователя 
 

 
 Напишите мне страницу предварительного просмотра заказа для веб-сайта продуктов питания 
 

 
 Напишите мне код страницы регистрации 
 

 
 Напишите мне код страницы входа 
 

 
 html как сделать центрированный список горизонтальным? 
 

 
 html как центрировать горизонтальный список? 
 

 
 Как добавить фото рядом друг с другом 
 

 
 как добавить несколько страниц на целевую страницу 
 

 
 как убрать пробелы между строками в html? 
 

 
 интервал между элементами html 
 

 
 как сделать градиентный фон в HTML? 
 

 
 как сделать линию с цветом, то бишь hr? 
 

 
 У меня есть html-файл, который нельзя изменить, и мне нужно настроить его стиль и вставить содержимое в новый html-файл 
 

 
 Как вставить в html-файл таблицу из другого html-файла и использовать тот же лист style. css 
 

 
 Могу ли я применить CSS-лист моего html-файла к html-объекту? 
 

 
 как закодировать смайлик солнце за облаком 
 

 
 добавить логотип заголовка 
 

 
 как получить логотип заголовка 
 

 
 как добавить html изображение с компьютера скачать 
 

 
 Как сделать изображение фоном для вашего веб-сайта с помощью языка html и CSS 
 

 
 как добавить картинку в html 
 

 
 как добавить ссылку в мой код 
 

 
 как добавить абзац в мой код 
 

 
 расскажите мне больше о сильном элементе 
 

 
 как сделать кнопку с кнопкой ввода 
 

 
 загрузить видео на сайт в формате html, указав постер и ширину 
 

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

 
 что такое атрибуты в HTML? 
 

 
 можете ли вы объяснить 
?