Пользовательский контроль и свобода (юзабилити эвристика #3)

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

Третья юзабилити эвристика Якоба Нилсена для дизайнеров пользовательского интерфейса — «Пользовательский контроль и свобода».

Данный принцип гласит:

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

Часть наилучшего пользовательского опыта заключается во взращенном по мере использования системы ощущении контроля пользователей над интерфейсом (UI). Пользователям необходимо предоставить возможность быстро исправить ошибки или вернуться к совершённому ранее выбору. Способность с лёгкостью выйти из затруднительной ситуации побуждает пользователя исследовать, что облегчает обучение и обнаружение предоставленного функционала, особенностей системы. Это также способствует увеличению общего количества использования или продаж (в случае исследования пространства продуктового магазина). И напротив, когда интерфейс не предоставляет таких опций, пользователи чувствуют себя пойманными в ловушку и обычно сообщают о недовольстве.

Здесь представлено несколько UI контроллеров (элементов управления), которые обычно позволяют пользователям вернуться на предыдущее состояние в системе:

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

Никогда не препятствуйте пользователям в попытке уйти с вашего сайта, отключив кнопку браузера «Назад». Некоторые сайты намеренно создаются навязчивыми, не позволяя пользователям вернуться в поисковую систему. Если вы будете использовать подобную тактику, несмотря на то, что пользователи останутся на вашем сайте на несколько секунд дольше (поскольку попросту не смогут уйти), вы довольно быстро вызовите их раздражение — и стоит пожелать вам удачи в попытке заполучить их в качестве желающих дальше иметь с вами дело! Чаще всего выбор в пользу подобного проектирования является результатом в приоритизации достижения показателей амбициозных метрик над достижением реальных UX-целей (улучшения пользовательского опыта). Вместо того, чтобы ловить пользователей, отключая кнопку «Назад», сайтам следует предоставлять ценный контент, из-за которого они сами захотят остаться.

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

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

Когда в вашем решении реализованы лайтбоксы и модальные окна, зачастую при столкновении с ними пользователи остаются дезориентированными, поскольку думают, что они находятся на новой странице, в особенности, когда модальное окно может занимать практически весь экран. Следовательно, для возврата на предыдущий (основной) экран чаще всего пользователи пытаются воспользоваться кнопкой браузера «Назад», вместо того, чтобы тапнуть по ссылке «Закрыть» или аналогичной кнопке-иконке «Х». Такое действие перенаправляет пользователей не на один, а на два шага назад, вызывая недоумение и ощущение дезориентации.

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

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

В мобильных приложениях пользователи склонны переносить свои знания о назначении кнопки «Назад» из опыта взаимодействия с веб-системами и у них есть соответствующие ожидания от её использования: для пользователя — это способ вернуться на один шаг назад (в независимости от того, откуда он пришёл). К сожалению, довольно часто дизайнеры используют её совершенно иначе — как способ передвижения вверх по иерархии ИА (информационной архитектуры сайта/приложения). В результате чего пользователи могут остаться дезориентированными. В примере, представленном ниже, пользователям достаточно свайпнуть (пролистать) слева направо для того, чтобы перейти к прочтению следующей новости в приложении BBC News (порядок отображения при переходе соответствует порядку размещения новостей в вертикальном списке, представленном в перечне новостной страницы). Таким образом, пользователи не могут воспользоваться кнопкой «Назад» для возврата к прочтению той или иной новости, которую они просматривали в процессе перелистывания. При использовании данной кнопки пользователи перемещаются на шаг вверх по ИА, к перечню новостной страницы, а не к просмотренной ранее статье.

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

Для правильного размещения обозначений «Закрыть», «Выйти» или «Отменить» следуйте стандартам проектирования, тогда пользователи смогут без труда найти данные опции там, где они обычно ожидают их обнаружить. К примеру в лайтбоксе, который открывается поверх страницы, для пользователей является привычным расположение кнопки-иконки «✕» в правом верхнем углу.

В качестве примера выше представлен попап (модальное окно) на сайте Harper’s Bazaar’s, приглашающий пользователя рассмотреть возможность подписки. Ссылка «Закрыть» отображена слева внизу, за пределами окна. Её сложно обнаружить из-за необычного расположения и отсутствия должного контраста с задним фоном.

Вдобавок к расположению в ожидаемом месте используйте универсальные иконки (общепринятые для понимания), чтобы пользователи могли понять значение ссылки. Сопроводите иконки текстовым лейблом или замените их очевидным для понимания текстом. К примеру, используйте «Назад» вместо «<» и «Закрыть» вместо «Х».

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

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

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

Когда пользователь вносит изменения в состояние системы, у него должна быть возможность исправить его (например, если действие было ошибочным — отменить его или вернуться к предыдущему состоянию). Представьте себе, что вы случайно удалили целый параграф текста и у вас нет возможности его вернуть!

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

В последнем примере застройщик домов Mattamy предоставляет на своем сайте интерактивный чертёж плана дома, где пользователи могут рассмотреть несколько возможных вариаций планировки. Для того, чтобы применить или отменить какие-либо структурные изменения в планировке, в панели слева пользователям достаточно отметить, либо убрать отметку в списке. К сожалению, кнопка «Сбросить настройки» (обведена красным) может быть ошибочно воспринята за кнопку «Вернуть».

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

Помните функцию на iOS встряхнуть-чтобы-вернуть? Эта фича, к сожалению, не используется по причине как раз-таки того, что её было сложно обнаружить (пользователям было сложно самостоятельно догадаться о том, как она работает).

При проектировании десктопных версий продуктов не рассчитывайте на то, что пользователи будут знать о возможности использования горячих клавиш. Хорошей идеей является визуально обозначить в пользовательском интерфейсе опцию возврата/отмены последнего действия. Данная функция должна быть размещена там, где пользователь обычно предполагает её найти. В приложениях WYSIWYG (от англ. What-You-See-Is-What-You-Get — что-ты-видишь-то-и получаешь) таких, как текстовые редакторы или дизайнерское ПО опция «Вернуть» (Undo) обычно расположена в панели инструментов или в основном меню приложения. В веб-приложениях без хрома* опция возврата обычно является контекстной — она может располагаться в появляющемся на время снэкбаре или в контекстном меню.

*Хром ( от англ. Chrome) — это элементы дизайна интерфейса операционной системы / сайта / приложения, которые окружают содержимое экрана. Данные элементы предоставляют информацию или команды для работы с контентом (вместо того, чтобы являться его частью). Например, в текстовом редакторе «Word» хромом будет являться: строка меню, панель инструментов, линейки, полоса прокрутки, сайдбар с доп функциями.

В случае, если опция «Вернуть» (Undo) предоставляется контекстно, убедитесь в том, что она хорошо обозначена посредством соответствующего элемента интерфейса. В «Google Drive», когда пользователь вносит изменения в файл, в левом нижнем углу окна появляется снэкбар, в котором содержится подтверждение совершенного изменения с возможностью его отмены (размещена опция «Вернуть» (Undo)). К сожалению это сообщение появляется всего на несколько секунд. Пользователям необходимо знать заранее, что если они захотят вернуться в предыдущее состояние / отменить последнее действие, то им необходимо очень быстро отреагировать, чтобы воспользоваться данной опцией. (Также для осуществления возврата можно использовать горячие клавиши, но это никак не обозначено в интерфейсе).

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