Рекомендации по выбору кнопки вместо ссылки в веб-формах

StackOverflow https://stackoverflow.com/questions/1406316

Вопрос

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

Как эмпирическое правило, я бы сказал, что чистая навигация всегда должна быть выражена ссылкой, а действие должно быть выражено кнопкой.Но есть так много примеров и ситуаций, которые отклоняются от этого, таких как Адреса доставки в Google Checkout Страница. Сохранить выполняет действие и использует кнопку. Редактировать это ссылка, которая переводит пользователя на новую страницу.И то, и другое имеет смысл.Однако, Удалить выполняет действие со ссылкой.

Итак, когда, как и почему мы выбираем кнопки или ссылки?

Примеры Сценариев:

Страница с таблицей пользователей:

  • Ан добавить пользователя функция, которая приведет вас на новую страницу.Ссылка, потому что по ней осуществляется навигация.
  • A сбросить пароль функция, которая остается на той же странице.Кнопка, потому что это действие.
  • Ан экспорт в CSV функция, которая открывает окно загрузки, но остается на той же странице.Я не знаю.
  • Пейджер в нижней части сетки, который использует AJAX для обновления сетки.Ссылки, из-за существующего приоритета.

Мастер с функциями "Далее", "Назад", "Отмена" и "Готово".В то время как Next и Back, вероятно, должны быть ссылками, приоритет говорит, что все они должны быть кнопками.

Это было полезно?

Решение

Хорошими ресурсами являются: Нильсен (да) и это обсуждение

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

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

Я согласен со всеми 5 вашими примерами, хотя загрузка CSV может быть любой и в основном зависит от того, как выглядит остальная часть пользовательского интерфейса (напримересли это часть панели действий, таких как "Загрузить" | "Параметры" | "Закладка", а две другие являются ссылками, то ваши, очевидно, также должны быть ссылками.

Другие советы

Я думаю, что решение основано на том, как вы хотите, чтобы страница работала.Например, если часть навигации включает использование результатов из формы, то вы хотели бы использовать кнопку.

Итак, если у Add User есть поле выбора типа добавляемого пользователя, поскольку оно может определять, какую форму add user использовать, то кнопка.

Для сброса пароля, поскольку он остается на той же странице, кнопка может иметь смысл.

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

Экспортировать в CSV должна быть кнопка, поскольку вы никуда не идете, просто выполняете загрузку.

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

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

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

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

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top