Какой вариант предпочтительнее с точки зрения UX?
Путаница между кнопками и ссылками — головная боль многих дизайнеров и разработчиков. Если мы будем придерживаться определенной логики и использовать указанные элементы последовательно, людям будет проще разобраться в интерфейсе и выполнить стоящие перед ними задачи.
Из статьи вы узнаете:
- как появились кнопки и ссылки,
- чем они отличаются друг от друга,
- что именно необходимо использовать в том или ином случае — фильтры, сортировка, элементы “Назад”, “Закрыть” и т.д.
А в самом конце получите ответ на главный вопрос — как же правильно оформить опцию “Отменить”.
В ходе взаимодействия с тем или иным приложением мы часто становимся участниками диалога, включающего опцию “Отмена” / “Отменить”. Это происходит, когда пользователь заполняет форму или работает с данными (например, в боковой панели или модальном окне).
Обычно эта опция расположена рядом с кнопкой основного действия. Если раньше было принято оформлять ее в виде ссылки, то сейчас мы все чаще встречаем кнопку “Отмена”.
Навигация vs действие
Пользователи приложений обычно имеют дело с взаимодействиями двух видов: навигацией и действиями. Их внешний вид должен различаться, чтобы с первого взгляда было понятно, что есть что.
- Навигация — это ссылка
- Действие — это кнопка
Почему? Ссылки берут свое начало с первых дней существования всемирной паутины. Именно они и делают ее паутиной (и не просто паутиной, а всемирной). Кнопки — это форма скевоморфизма, способ перенести привычные нам переключатели и действия из физического мира в цифровой.
Соответственно, мы используем их по-разному:
Действия — это манипуляции с данными, которыми пользователь управляет через интерфейс приложения, а навигация — это изменение состояния интерфейса, внутри которого перемещается пользователь. Другими словами, клик по ссылке (навигация) не приводит к изменению данных, но может привести к отображению новых страниц или к изменению внешнего вида текущей страницы.
Таким образом, навигация — это изменение состояния пользовательского интерфейса, а действие — это оперирование данными. Другими словами, переход из одного состояния в другое — это то же самое, что и навигация. Обратите внимание, действия (кнопки) тоже могут запускать навигацию, но это необязательно так.
UI-дизайн
Конечно, внешний вид ссылки или кнопки — это решение дизайнера, но классические ссылки представляют собой синий подчеркнутый текст, а кнопки — блоки с текстом внутри. И ссылки, и кнопки могут включать иконки, которые помогают пользователям быстрее понять, о каком действии или направлении идет речь (полагаться только на иконки не рекомендуется, поскольку такое решение создает чрезмерную когнитивную нагрузку, но это уже другая тема для обсуждения).
Информационная архитектура
Очевидно, что если ваше веб-приложение обладает определенной информационной архитектурой, которая допускает такое поведение, это благоприятно сказывается на опыте взаимодействия. При этом понимание принципов представления данных является ключом к пониманию разницы между манипуляцией данными и изменением состояния интерфейса.
Давайте рассмотрим пример — магазин, который продает фрукты. На сайте представлен список доступных для заказа опций:
Пользователь может сделать следующее:
- Добавить новый фрукт в список.
- Отфильтровать или отсортировать фрукты
- Перейти к подробному описанию конкретного фрукта из списка
- Перейти к подробному описанию страны происхождения конкретного фрукта из списка.
Давайте посмотрим, как будут выглядеть эти взаимодействия, если применить к ним нашу логику.
Применим описанную логику к стандартному пользовательскому интерфейсу
Добавление нового фрукта
Когда пользователь хочет добавить новый фрукт в список, он нажимает на ссылку "Добавить фрукт", что приводит к изменению состояния пользовательского интерфейса (т.е. появляется форма, в которую нужно внести данные о новом фрукте).
Современные дизайнеры, как правило, используют вместо ссылки кнопку (или FAB — плавающую кнопку целевого действия) для добавления новых элементов. Однако само по себе это взаимодействие не является действием. Это всего лишь изменение состояния, которое открывает модальное окно для создания записи о новом фрукте. Следовательно, мы имеем дело с навигацией.
Таким образом мы сообщаем пользователю, что, когда он наживает “Добавить фрукт”, он не оперирует данными напрямую, но может ожидать изменения состояния интерфейса для дальнейшего выполнения этой задачи. Поэтому я не рекомендую использовать FAB или другие виды кнопок для подобных взаимодействий.
После того, как состояние интерфейса изменилось, пользователь может выполнить действие, и следовательно, он ожидает найти здесь кнопку, непосредственно отвечающую за добавление нового фрукта в список:
Это взаимодействие вызывает интересную дискуссию: что увидит пользователь, добавив новый фрукт? Вернется ли он к списку фруктов или перейдет на страницу с подробной информацией о новом фрукте?
Это зависит от того, что важно для пользователя. Чтобы выяснить это, нужно провести ряд исследований. Оба варианта допустимы, но и тот, и другой представляют собой навигацию, хотя и вызванную выполненным действием. (Помните, я говорил, что действия могут запускать навигацию?)
Забудем на секунду о кнопке / ссылке “Отменить” и рассмотрим другие доступные пользователям взаимодействия, чтобы найти окончательный ответ на наш главный вопрос.
Фильтры и сортировка
Просматривая список фруктов, пользователь может сократить число опций при помощи фильтров. Он решает применить фильтр "Яблоки" и отсортировать список по весу. Конечно, речь о работе с данными и поэтому мы должны увидеть здесь кнопку, не так ли?
Ну, если мы проанализируем действия пользователя, окажется, что никакие данные в этом случае не подверглись изменениям. Все фрукты по-прежнему в списке. Пользователь ничего не добавил и не отредактировал. Единственное, что он сделал, — изменил внешний вид / состояние интерфейса. А значит, для фильтров или сортировки вместо кнопок необходимо использовать ссылки.
Сбросить фильтры
Эта логика также позволяет сделать вывод, что и взаимодействие “Сбросить фильтры” / “Отменить сортировку” должно быть не кнопкой (т.е. это не действие), а ссылкой (т.е. это изменение состояния интерфейса или возврат к его прежнему состоянию), поскольку никакие данные не подвергаются изменениям.
Вернуться на предыдущую страницу
Допустимое решение — сделать так, чтобы пользователь автоматически переходил на страницу только что добавленного фрукта. Но что если он захочет вернуться на предыдущую страницу (список фруктов)?
Конечно, все зависит от того, как спроектирован конкретный интерфейс, но чаще всего он включает одну из следующих опций (или обе):
- Элемент “Назад”
- Хлебные крошки
Поскольку и в том, и в другом случае пользователь просто возвращается к предыдущему состоянию интерфейса (и, таким образом, не отменяет внесенные изменения и не выполняет никаких новых операций с данными), мы имеем дело со ссылками.
Как правило, существует и третий вариант: кнопка "Назад" в браузере — да, это именно кнопка, а не ссылка. Мы рассмотрим его позднее.
Закрыть боковую панель
Мы еще на шаг приблизились к ответу на главный вопрос этой статьи. Что если пользователь хочет закрыть боковую панель "Добавить новый фрукт"? Обычно для этого необходимо кликнуть либо по экрану за пределами панели, либо по элементу “Закрыть”.
Снова задав себе вопрос, что делает пользователь, когда "закрывает" боковую панель, мы приходим к выводу, что он, по сути, прерывает действие. Другими словами, возвращается к предыдущему состоянию пользовательского интерфейса. Получается, мы должны использовать ссылку, а не кнопку.
То же самое можно сказать и о закрытии любого другого окна:
Отмена действия
Где бы ни находился элемент “Отменить” — внутри боковой панели, всплывающего (модального) окна или формы (“Редактировать” на странице с подробной информацией о фрукте), взаимодействуя с ним пользователь всякий раз делает ровно то, что было описано в предыдущем разделе — прерывает действие и таким образом возвращается к предыдущему состоянию интерфейса. Следовательно, здесь нужна ссылка, а не кнопка.
"Но ведь отмена — это тоже действие, нет?"
Как вы уже догадались, ответ на этот вопрос — твердое "нет"! Отмена действия — это полная противоположность его выполнению, отказ от действия. Во всех описанных выше случаях отмена действия повлечет за собой возврат к предыдущему состоянию пользовательского интерфейса.
"Но как насчет отмены подписки на Netflix?"
Это интересное исключение, но оно объяснимо. В данном случае "Отменить" — это первичное действие. Пользователь по-прежнему может отменить первичное действие с помощью одноименной ссылки. Конечно, лучше не использовать и там, и там слово “Отменить”, а выбрать разные формулировки.
"Но как насчет iOS, Windows или MacOS?"
В интерфейсах операционных систем кнопки используются повсеместно. Это полностью противоречит всему, что я написал. Однако вы должны понимать, что веб-приложение и операционная система — абсолютно разные вещи.
Следует избегать “зловещей долины” UI. Когда интерфейс имитирует ОС, это сбивает пользователей с толку. Отказ от привычных UI-шаблонов негативно сказывается на юзабилити. Пусть ОС будет ОС, а приложение — приложением.
Именно поэтому отзывчивый дизайн — не то же самое, что нативное мобильное приложение. Это два вида разных пользовательских интерфейсов.
"А как насчет главного меню? Это же точно навигация?"
Да, верно. Это действительно элементы навигации, и взаимодействие с ними приводит только к изменению состояния интерфейса. Поэтому мы ожидаем увидеть не кнопки, а ссылки. На практике же реализация главного меню в виде ряда кнопок стала своего рода стандартом. Вероятнее всего, столкнувшись с таким решением, пользователи не придут в замешательство, поэтому я не вижу здесь серьезной проблемы.
Однако в старые добрые времена было принято представлять пункты главного меню в виде ссылок! (потому что, знаете ли, это навигация). И по сей день в коде эти пункты остаются ссылками, а не кнопками, если речь о семантически правильном HTML.
Будьте последовательны
Сравнивая кнопки и ссылки, мы видим, что между ними существует фундаментальное различие.
Первые инициируют действия, которые выполняются непосредственно внутри таблицы.
Вторые запускают навигацию, то есть действие выполняется в измененном интерфейсе.
Когда вы все делаете последовательно, пользователь понимает, чего ожидать от взаимодействия.
Заключение
Вопрос о том, как лучше оформить элемент “Отменить” — в виде ссылки или кнопки — поднимался и ранее. Я думаю, что эта статья UX movement содержала некоторые правильные выводы: отмена — это не действие, но она все же не должна быть кнопкой. (Мне вообще кажется, что серая кнопка больше похожа на неактивную, но это уже тема другого разговора).
Люк Вроблевски в своем знаменитом посте приходит практически к тем же выводам, что и я (кроме того, он также разбирает вопрос позиционирования элементов).
Взаимодействие с элементом “Отменить” — это прерывание действия и, следовательно, переход к предыдущему состоянию пользовательского интерфейса. Навигация представлена в веб-интерфейсах в виде гиперссылок, поэтому указанная опция должна быть гиперссылкой.
Помните, что это не истина в последней инстанции. Я прекрасно понимаю, что иногда кнопка “Отменить” смотрится более выигрышно. Как и в случае с главным меню, со временем подход может измениться.
