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


10.04.2022 Время чтения - 10 минут 1813

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

Cancel as a link vs. Cancel as a button

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

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

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

Почему так? Ссылки уходят корнями в первые дни существования всемирной паутины. Это то, что делает интернет сетью. Кнопки – это форма скевоморфизма, которая переводит физический мир переключателей и нажатия кнопок в цифровой. Таким образом, ссылки и кнопки, а соответственно, навигация и действия используются по-разному:

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

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

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

Блок-схема, показывающая создание нового ресурса из списка ресурсов, заставляющая пользователя переходить на страницу сведений о недавно созданном ресурсе.
Различие между навигацией и действиями

UI дизайн

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

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

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

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

Table showing a list of fruits

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

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

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

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

Добавить новый фрукт

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

Как правило, в наши дни часто можно увидеть кнопку (или FAB – плавающую кнопку) вместо ссылки для взаимодействия «добавить новый фрукт». Однако само это взаимодействие не является действием. Это просто изменение состояния, которое показывает нам форму для создания нового элемента. Значит, это навигация. Такой вид как бы говорит пользователю, что он не выполняет манипуляции с данными напрямую, когда нажимает на «добавить новый фрукт», но может ожидать, что вот это новое представление, которое покажется после перехода по ссылке, уже даст ему выполнить нужную задачу. Именно поэтому я не советую FAB или вообще кнопки для такого взаимодействия.

Кнопки вместо ссылок там, где взаимодействием по умолчанию это навигация. 
Спасибо, Material UI

Уже после перехода к новому состоянию интерфейса пользователь наконец может выполнить действие. Тут уже можно ожидать кнопку, указывающую на то, что пользователь действительно «добавляет новый фрукт» в список:

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

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

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

Фильтрация и сортировка

При просмотре списка фруктов пользователь может сузить свой список, применив фильтр. Он решает применить фильтр «яблоки» и отсортировать список по «весу». Конечно, это манипулирование данными и заслуживает кнопки, верно? Что ж, глядя на то, что на самом деле делает пользователь, мы замечаем, что данные вообще не подвергались манипуляциям. Все фрукты в списке все еще существуют. Ничего не добавлялось и не менялось. Единственное, что сделал пользователь, – это применил другое представление или изменил состояние интерфейса. Это означает, что в фильтры или сортировку ставим ссылки, а не кнопки:

Фильтрация и сортировка

Очистка фильтра

Также это облегчает понимание того, почему взаимодействие с пользователем под названием «очистить все фильтры» или «сбросить сортировку» не должно быть кнопкой, а требует ссылки. Все потому, что это тоже не действие. Это изменение состояния пользовательского интерфейса, возвращение к состоянию его предварительного просмотра. Никакие данные снова не были изменены:

Clear — это фильтры в виде ссылки (это изменение состояния пользовательского интерфейса, а не фактическое манипулирование данными), обозначенные «деструктивным» красным цветом, чтобы предупредить пользователя.

Возврат к странице предварительного просмотра

Как было сказано ранее, один из вариантов взаимодействий –автоматический переход пользователя на страничку только что добавленного фрукта после выполнения действия. Но что, если пользователь захочет вернуться на предыдущую страницу (в список фруктов)? Что ж, это, конечно, сильно зависит от того, как это представлено в интерфейсе, но обычно можно ожидать, что пользователю предложат одну из этих опций (или обе):

  1. Навигация «Назад»
  2. Хлебные крошки

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

Обратная навигация либо по обратной ссылке, либо по полной хлебным крошкам. 
Бонус: ссылка «Редактировать» для запуска навигации по редактированию
(не действие!)

Еще обычно существует и третий вариант: кнопка «Назад» в самом браузере. Да, это кнопка, а не ссылка.

Закрытие боковой панели

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

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

Закрытие – это не действие, это изменение состояния пользовательского интерфейса

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

Будь то внутри боковой панели, или внутри всплывающего окна (модальное представление), или, может быть, даже просто на форме полной страницы (редактирование фрукта на странице деталей о нем). Всякий раз, когда пользователь хочет нажать «отмена» действия, он в основном делает то же самое, что описано в разделе «Закрытие боковой панели». Он прерывает действие и, таким образом, возвращаются к предыдущему состоянию интерфейса. Таким образом, нужна ссылка, а не кнопка.

Ответ на вопрос этой статьи

«Но отмена – это же действие, разве нет?»

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

«А если это отмена моей подписки на Netflix?»

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

Путающая путаница

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

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

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

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

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

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

Ааа, старый Digg. Ссылки везде! Даже в основной навигации
Основной навигацией Google раньше были гиперссылки

Расширение возможностей пользователя за счет последовательности

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

Здесь подразумевается действие, выполняемые непосредственно над элементом в строке (то есть сразу, без переходов в другие окна):

А здесь подразумевается навигация, так как действие выполняется в другом представлении (новом окне, которое откроется по ссылке):

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

Заключение

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

Подводя итог

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