Cancel vs Close: разница в дизайне


10.09.2019 Время чтения - 7 минут 1355

cancel close

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

 

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

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

Избегание потери работы пользователей

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

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

Например, процесс оформления покупки на Sephora использовал модальное окно для показа бесплатных образцов, которые пользователи могли добавить в корзину. На картинке видно, что предмет был только что выбран нажатием кнопки «Добавить» под ним. После этого кнопка «Добавить» была заменена ссылкой «Удалить», что выглядит так, как будто образец уже добавлен в корзину. Однако, когда пользователь закрыл модальное окно, щелкнув на «×», а не на кнопку «Готово», оказалось, что товара нет в корзине и его придётся добавлять снова.

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

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

Этого можно достигнуть, выполняя следующие действия:

  1. Попросить пользователя подтвердить свое намерение
  2. Использовать явные текстовые метки, а не неоднозначные значки
  3. Предоставление двух разных кнопок: «×» для закрытия окна (с пассивным сохранением промежуточной работы) и «Cancel» для отмены процесса

Запрос подтверждения

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

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

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

Нажатие кнопки «×» или стрелки «Назад» может сбросить любые настройки и вернуть пользователя на несколько шагов назад. Изображение справа: после нажатия «×» появилось диалоговое окно подтверждения для проверки намерений пользователя насчёт фильтров.

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

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

Используйте явные указатели

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

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

Yelp (Слева): текстовые метки для отмены, сброса и применения являются прямыми и четкими, что уменьшает вероятность того, что пользователи случайно закроют меню и потеряют выбранные фильтры. Etsy (Справа): текстовая метка «Очистить» явно даёт пользователям понять, что она делает. А кнопка «Готово» возвращает на страницу с перечнем продуктов с учётом выбранных фильтров.

Функция Close & Save

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

Например, Gmail автоматически сохраняет черновик сообщения, составленный в немодальном окне. Эта практика позволяет пользователям свернуть или закрыть окно при желании, сохраняя при этом своё письмо. При наведении курсора на «×» в верхнем правом углу окна сообщения отображается подсказка, подтверждающая, что черновик будет сохранен и закрыт. Кнопка отмены также по-прежнему доступна.

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

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

Glow Baby: (Слева): Нажатие на «×» в окне с запущенным таймером закрыло окно, не отменяя сам таймер, и, таким образом, позволило пользователю продолжать использовать приложение для участия в обсуждениях сообщества, чтения статей и так далее. (Посередине): Статус запущенного таймера отображается в верхней части экрана. (Справа): Нажатие кнопки «×» во время остановки таймера вызвало кнопки «Сбросить-» или «Отмена», чтобы определить намерение пользователя.

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


Заключение

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

И помните: если сомневаетесь – сначала сохраните, потом — закрывайте.

Статья в оригинале.
Читайте так же: Рекомендации по странице «Связаться с нами»