Вопрос о передовой практике пользовательского интерфейса: кнопка «Отмена» или ссылка «Отмена»

У меня есть обсуждение с коллегой о том, что такое «веб-стандарт» для отмены в форме. В нашем обсуждении у нас есть страница «изменить пароль» в качестве примера. У нас есть разработанная кнопка «отправить» и кнопка «отмена». Оба одинакового дизайна.

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

Кто прав? Ссылка или кнопка... или и то, и другое? И почему? Любые ссылки на то, где этот вид стандарта решается?

Br,
Пол Пилен

ИЗМЕНИТЬ Думаю, ответ, набравший наибольшее количество голосов, будет "правильным ответом"?


person Paul Peelen    schedule 19.01.2011    source источник


Ответы (8)


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

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

Кнопки сброса и отмены — статья 2000 года, в которой указывается, что функция сброса вредна и отменяет функции часто не нужны

ОК — Отмена или Отмена — ОК? — соблюдение стандартного порядка повышает удобство использования

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

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

person roryf    schedule 19.01.2011

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

Почему переключатель освещения кабины не находится рядом с кнопкой катапультирования?

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

Сделайте ссылку.

person Horia Dragomir    schedule 19.01.2011
comment
Да, я согласен с этим. Но вопрос не в расположении или дизайне кнопки. Речь идет о том, должна ли быть ссылка или кнопка. Также может быть обычной кнопкой или специальной кнопкой. Так или иначе. - person Paul Peelen; 19.01.2011
comment
Отредактировал ответ, чтобы показать мое предложение сделать его ссылкой, которая ведет пользователя на предыдущую страницу. :-) - person Horia Dragomir; 19.01.2011
comment
Почему рядом с кнопкой катапультирования нет выключателя света в кабине — этот комментарий меня рассмешил. У меня было видение пилота, сидящего в какой-то темной кабине, нащупывающего выключатель, а затем летящего сквозь крышу. - person Matt Asbury; 19.01.2011
comment
Мэтт, именно поэтому триггер отмены выглядит иначе, чем триггер ОК :-) - person Horia Dragomir; 20.01.2011

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

person joelcox    schedule 19.01.2011
comment
Ссылка также имеет дополнительное преимущество, заключающееся в том, что она покидает страницу без отправки данных формы. Вы можете добавить JavaScript к кнопке отмены, чтобы перенаправить пользователя без отправки формы, но всегда казалось глупостью полагаться на JS, чтобы заставить одну базовую HTML-вещь (кнопку) действовать как другую (ссылку), когда вы могли просто использовать ссылка в первую очередь. - person spaaarky21; 10.11.2011

Нет такого стандарта, просто соображения здравого смысла. Перейдите по этой ссылке: http://www.useit.com/alertbox/20000416.html

person Maxim Gueivandov    schedule 19.01.2011

Я бы сказал, что ссылка и кнопка — это одно и то же. Кнопка может быть ссылкой, а текст может быть ссылкой.

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

Опция по умолчанию всегда должна быть в фокусе, а опция счетчика всегда должна быть относительно близко.

Под фокусом я подразумеваю, что кнопка «Отправить» может быть больше или ярче, если она более заметна, чем кнопка «Отмена».

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

person Thomas Davis    schedule 19.01.2011

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

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

person Matt Asbury    schedule 19.01.2011
comment
На самом деле это не так, в этом случае владелец продукта потребовал кнопку отмены. Независимо от причины решения PO это то, что требуется. Хорошим примером является GMail, у них есть такие кнопки, как Экспорт - Отмена, они выглядят точно так же и расположены в таком порядке... странно? - person Paul Peelen; 19.01.2011
comment
Это справедливое замечание. Хотя однажды у меня был клиент, который хотел, чтобы на его веб-сайте с темно-серым фоном был немного светлее (но все же темно-серый) текст, поскольку белый цвет был слишком ярким. Просто потому, что это то, что кто-то хочет, это не делает это лучшим решением. Ваша работа заключается не только в том, чтобы дать клиенту то, что он хочет, но и в том, чтобы посоветовать ему, что будет лучше всего в той или иной ситуации. В конце концов, эта работа отразится и на вас. Сказав, что если определенно должно быть одно или другое, я бы сделал кнопку на значительном расстоянии от кнопки отправки. - person Matt Asbury; 19.01.2011
comment
Да, я знаю об этом. Однако вы обращаетесь к этому с точки зрения фрилансера. Да, я фрилансер... в свободное время. Но в данном случае это крупная компания с межведомственными требованиями. У отдела CQR есть определенные требования, которые они обсуждают с PM/PO. PM / PO поставил это в качестве требования к команде, команда просит меня помочь им с макетом в соответствии с требованиями. Таким образом, это не отразится на мне так, как вы описываете. В конце концов я решил, что у меня будет красная кнопка «Отмена» и сероватая кнопка «Отправить». - person Paul Peelen; 19.01.2011

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

Кстати, я ненавижу, когда есть кнопка для очистки формы. Совершенно ненужный. Хорошо, что это уже не так распространено.

Джон

person prograde    schedule 19.01.2011
comment
Я полностью согласен, форма сброса совершенно не нужна. В этом примере пользователь будет перенаправлен на предыдущую страницу или выйдет из системы (если изменение пароля было принудительным действием). - person Paul Peelen; 19.01.2011

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

person Joe B    schedule 13.07.2011