Кнопка запускает действие или меняет состояние интерфейса, а ссылка открывает ресурс по адресу - страницу, файл или место на странице. Выбирайте элемент по ожидаемому результату, а не по цвету или форме. Визуальное оформление может меняться, но семантика и поведение должны оставаться понятными людям, клавиатуре и скринридерам.
Как быстро отличить действие от перехода
- Если после активации выполняется операция без перехода на другой адрес, используйте кнопку.
- Если пользователь открывает страницу, файл или якорь, используйте ссылку.
- Подпись должна описывать результат: "Сохранить изменения" для действия, "Условия доставки" для перехода.
- Внешний вид не определяет семантику: ссылка может выглядеть как кнопка, но должна вести по адресу.
- Сохраняйте стандартное поведение элемента: кнопку активируют клавишей пробела или Enter, ссылку - Enter.
Сначала определите намерение пользователя: изменить состояние или открыть ресурс
В дизайне интерфейса сайта начните с вопроса: что должно произойти сразу после активации элемента? Ответ помогает выбрать семантику до обсуждения цвета, размера и расположения.
- Изменяется состояние текущего интерфейса. Например, пользователь включает фильтр, открывает диалог или добавляет товар в корзину. Обычно нужна кнопка.
- Отправляются данные или запускается операция. Отправка формы и подтверждение заказа - действия, для которых используют кнопку.
- Открывается адрес. Переход на страницу внутри сайта или на внешний ресурс - задача ссылки.
- Открывается файл. Если действие ведёт к адресу документа или запускает его загрузку, обычно нужна ссылка.
- Меняется видимость блока. Раскрытие меню или панели - действие; для него подходит кнопка с доступно объявленным состоянием.
- Пользователь перемещается к разделу страницы. Переход к якорю - навигация по адресу, поэтому уместна ссылка.
- Нужно понять поведение без оформления. Представьте элемент без цвета и рамки: если он должен выполнить команду, это кнопка; если открыть место или ресурс - ссылка.
Когда кнопка уместна: отправка формы, запуск процесса и другие действия
Нативная кнопка подходит для операций, которые изменяют данные, состояние или содержимое интерфейса. При разработке дизайна сайта отдельно задайте для неё состояния по умолчанию, при наведении, фокусе, нажатии и недоступности.
| Вариант | Кому подходит | Плюсы | Минусы | Когда выбирать |
|---|---|---|---|---|
| Обычная кнопка действия | Для команд в интерфейсе | Понятная семантика и стандартная клавиатурная активация | Не сообщает адрес назначения | Нужно открыть диалог, применить фильтр или запустить процесс |
| Кнопка отправки формы | Для ввода и подтверждения данных | Связана с отправкой формы и её проверкой | Требует ясной подписи и обратной связи после отправки | Пользователь отправляет заявку, оформляет заказ или сохраняет данные |
| Кнопка-переключатель | Для включения или выключения состояния | Может сообщать текущее состояние вспомогательным технологиям | Состояние должно быть заметно и визуально, и программно | Нужно включить избранное, звук или режим отображения |
| Кнопка, стилизованная под ссылку | Для второстепенной команды | Вписывается в компактный текстовый интерфейс | При неясном оформлении её можно принять за переход | Команда остаётся действием, но должна выглядеть менее акцентно |
Для кнопок важны короткий глагол и предсказуемый результат: "Добавить", "Скачать" как команда подготовки файла или "Показать фильтры". В дизайне кнопок для сайта визуальный приоритет помогает выделить основное действие, но не заменяет понятную подпись.
Когда нужна ссылка: навигация внутри продукта и переход на внешний ресурс
Ссылка уместна, когда пользователь должен перейти по адресу. Не скрывайте этот смысл за обработчиком, который внешне похож на переход, но вместо открытия ресурса неожиданно меняет состояние страницы.
- Если пользователь открывает другую страницу сайта, используйте ссылку с адресом этой страницы.
- Если нужно перейти на внешний сайт, укажите полный адрес и обозначьте назначение перехода, когда оно не очевидно из контекста.
- Если пользователь открывает документ или загружает файл по адресу, используйте ссылку; при необходимости уточните формат или действие в подписи.
- Если нужно переместиться к разделу текущей страницы, задайте ссылке адрес якоря.
- Если элемент раскрывает меню, вкладку или панель без навигации, используйте кнопку, а не ссылку.
Дизайн ссылок на сайте должен показывать кликабельность не только цветом: применяйте узнаваемое оформление, различимый фокус и достаточно ясный текст. Подпись "Подробнее" полезна, если рядом есть контекст, который объясняет, о чём именно будет переход.
Пограничные сценарии: скачать файл, раскрыть меню, перейти к якорю
Для спорного случая пройдите короткую последовательность проверок:
- Назовите ожидаемый результат одним глаголом: "открыть", "перейти", "сохранить", "раскрыть".
- Если результат - переход по адресу, выберите ссылку; если команда меняет состояние или запускает процесс, выберите кнопку.
- Для скачивания проверьте, ведёт ли элемент на файл. Если да, оформите его как ссылку и поясните, что будет загружаться.
- Для меню проверьте, остаётся ли пользователь на текущей странице. Раскрытие без навигации - действие кнопки.
- Для якоря проверьте, меняется ли адрес на фрагмент страницы или происходит прокрутка к разделу. Это навигация, поэтому используйте ссылку.
- Проверьте, сохраняются ли ожидаемые клавиатурное поведение и доступное имя элемента.
Сравнительная таблица: семантика, поведение и визуальные признаки
| Ситуация | Подходящий элемент | Частая ошибка |
|---|---|---|
| Отправка формы | Кнопка отправки | Использовать ссылку без адреса как замену команды |
| Переход на страницу | Ссылка с адресом | Использовать кнопку и вручную имитировать навигацию |
| Раскрытие меню | Кнопка с состоянием раскрытия | Сделать декоративный текст ссылкой без реального перехода |
| Переход к якорю | Ссылка на фрагмент страницы | Использовать кнопку, хотя пользователь перемещается по адресу |
| Ссылка, визуально похожая на кнопку | Ссылка, если она открывает ресурс | Менять семантику только ради нужного внешнего вида |
| Кнопка, оформленная как текстовая ссылка | Кнопка, если она выполняет команду | Убирать визуальные признаки фокуса или интерактивности |
В UI UX дизайне интерфейса следите, чтобы визуальный стиль не вводил в заблуждение: ссылки обычно выделяются как навигационные элементы, а кнопки - как команды. При этом цвет, подчёркивание и форма могут быть частью дизайн-системы, если назначение остаётся различимым.
Проверьте выбор на клавиатуре, скринридере и при наведении
- Убедитесь, что элемент получает клавиатурный фокус и его фокус заметен.
- Проверьте стандартную активацию: Enter для ссылки, пробел или Enter для кнопки.
- Убедитесь, что скринридер сообщает понятное имя и роль элемента.
- Для раскрываемой кнопки проверьте, что вспомогательные технологии получают сведения о состоянии.
- При наведении покажите интерактивность, но не полагайтесь только на эффект наведения: он недоступен на сенсорных устройствах.
Мини-дерево выбора: если элемент открывает адрес, ресурс или якорь - выбирайте ссылку; если отправляет данные, меняет состояние или раскрывает интерфейс - выбирайте кнопку; если поведение смешанное, разделите сценарии на отдельные элементы. Ссылка лучше подходит для навигации, кнопка - для команды; конкретный вариант выбирайте по результату, который ожидает пользователь.
Разбор неоднозначных решений для интерфейсных элементов
Можно ли сделать ссылку похожей на кнопку?
Да, если она действительно ведёт на страницу, файл или другой адрес. Сохраняйте семантику ссылки и не заменяйте её кнопкой только из-за оформления.
Можно ли оформить кнопку как текстовую ссылку?
Да, если элемент выполняет действие, а не открывает адрес. Визуальный стиль не должен мешать распознать интерактивность и увидеть фокус.
Скачивание файла - это действие или переход?
Если элемент ведёт к адресу файла или запускает его загрузку, обычно это ссылка. Уточните в подписи, какой файл или формат получит пользователь.
Какой элемент использовать для раскрытия меню?
Используйте кнопку, потому что меню раскрывается на текущем интерфейсе, а не открывает ресурс. У кнопки должно быть понятно текущее состояние.
Для перехода к разделу страницы нужна кнопка или ссылка?
Нужна ссылка на якорь: пользователь перемещается к месту, обозначенному адресом. Подпись должна называть целевой раздел.
Можно ли запускать переход кнопкой с помощью скрипта?
Если результатом является навигация, предпочтительна ссылка с адресом. Она сохраняет ожидаемое поведение, включая возможность открыть ссылку в новой вкладке.
Как выбрать элемент, если одно нажатие и меняет состояние, и открывает страницу?
Разделите разные намерения на отдельные элементы, если это возможно. Так подпись, семантика и ожидаемый результат будут согласованы.