Потеря данных – одно из самых больших разочарований, которое могут испытать пользователи. Они теряют не только свои данные, но также время и деньги, вложенные в них. Для бизнеса это может означать сотни человеко-часов и тысячи долларов.
Исследование показало, что 30% катастроф с потерей данных вызваны человеческой ошибкой [1]. Хороший UX дизайн может это предотвратить. Ниже приведены различные методы UX, которые можно применить к вашему приложению, чтобы пользователи не разочаровались.
Используйте красные предупреждающие сигналы в подтверждении действия
Когда пользователи нажимают кнопку с деструктивным действием, не выполняйте его немедленно. Возможно, они нажали эту кнопку по ошибке. Вместо этого вам следует предложить пользователям подтвердить действие с помощью экрана подтверждения.
Кнопка призыва к действию на экране подтверждения не должна быть нормального цвета, например, синего. Вместо этого используйте красную кнопку, чтобы предупредить пользователей о том, что они собираются совершить деструктивное действие.
Избегайте использовать красные кнопки для обычного призыва к действию, иначе вы запутаете пользователей. Зарезервируйте красные кнопки только для деструктивных действий. Кнопки холодных оттенков лучше подходят для обычного призыва к действию, потому что они менее тревожны.
Хотя красная кнопка предупредит большинство пользователей, некоторые могут не воспринять ее всерьез. Добавление дополнительных визуальных подсказок усилит предупреждение для всех пользователей. Также это поможет дальтоникам и слабовидящим пользователям, которые нуждаются в других визуальных подсказках, кроме цвета.
Чтобы подчеркнуть серьезность действия, красный предупреждающий сигнал нуждается в большей силе. Вы можете добиться этого, добавив на экран подтверждения значок, представляющий деструктивное действие.
Например, значок для удаления, с которым пользователи лучше всего знакомы – это мусорное ведро. Когда пользователи видят эту иконку, они знают, что собираются что-то удалить, не читая текст.
Кроме того, добавление красной полосы в верхней части экрана еще больше усиливает предупреждающий сигнал. Теперь, когда пользователи увидят экран подтверждения, у них будет три красных предупреждающих сигнала, указывающих на серьезность ситуации.
Привычные тапы
Чем чаще пользователи используют приложение, тем больше вероятность того, что у них разовьются привычные тапы. Привычные тапы позволяют, не задумываясь легко и быстро выполнять задачи. Но из-за этого повышается вероятность случайного нажатия кнопок с деструктивным действием. Красные предупреждающие сигналы могут вывести пользователей из этого состояния рассеянных нажатий.
Красный цвет имеет универсальную ассоциацию с предупреждением и опасностью, и имеет отрицательную коннотацию [2]. Многие предупреждающие знаки и знаки опасности, используют красный, чтобы передать это чувство. В дизайне красная кнопка вызывает у пользователей страх перед опасностью или потерей и используется для предотвращения ошибок. Это работает, потому что люди обладают инстинктом избегать опасность.
Исследования показывают, что красные объекты привлекают внимание и способствуют конгруэнтным моторным реакциям [3]. Это означает, что пользователи могут реагировать быстрее и точнее, когда красные кнопки используются для деструктивных действий. Чем больше внимания пользователи уделяют задаче, тем лучше они ее выполняют.
Сделайте текст диалогового окна сжатым
Красные предупреждающие сигналы могут предотвратить случайные деструктивные действия, но это не единственное, что вы должны учитывать. Вы также должны убедиться, что диалоговое окно легко сканируется, написав его в сжатом формате.
Вместо того, чтобы спрашивать пользователей «Вы уверены, что хотите X?», Поставьте вопросительный знак в конце заголовка диалогового окна. Например, заголовок «Удалить учетную запись?» в нескольких словах говорит: «Вы уверены, что хотите удалить свою учетную запись?».
Мало того, не используйте многословные предложения, чтобы объяснить, что произойдет после подтверждения. Вместо того, чтобы писать: «Если вы удалите свою учетную запись, вы навсегда потеряете свой профиль, сообщения и фотографии», укажите, что они потеряют в формате списка, чтобы они могли его быстро просканировать.
В примере выше, сделав диалоговое окно сжатым, мы сократили текст с 25 до 9 слов. Такое окно намного легче сканировать и понимать.
Лучшее понимание последствий
Целью диалогового окна подтверждения является описание последствий деструктивных действий. Пользователи должны прочитать и понять эти детали, иначе они могут получить неожиданный результат. Но это трудно сделать, когда диалоговое окно многословно.
Большинство пользователей пропускают многословный текст, потому что он требует времени и усилий. Краткий текст предотвращает пропуск и помогает пользователям быстрее выполнять свои задачи, совершать меньше ошибок и запоминать больше информации [4]. Когда диалоговое окно лаконично, пользователи могут лучше понять последствия своих действий и принять правильное решение.
Выравнивайте макет по центру
Краткий текст облегчает сканирование диалогового окна. Но вы можете пойти дальше и упростить сканирование всего экрана подтверждения, выровняв макет по центру. Выровненный по центру макет размещает иконку в линию с текстом диалогового окна, чтобы пользователи могли сканировать их вместе. Это также делает экран симметричным, а иконку более заметной.
Меньше работы для глаз
При взгляде на многословное диалоговое окно и выровненный по левому краю макет будет больше фиксаций глаз и более длинные скачкообразные движения взгляда. Краткое диалоговое окно и выровненный по центру макет требуют меньше визуальных усилий. Благодаря меньшему количеству фиксации глаз и более коротким их движениям пользователи могут быстрее сканировать экран, чтобы принимать обоснованные решения.
Выровненный по центру макет также позволяет пользователям сканировать экран в одном визуальном направлении (сверху вниз). Им не нужно перемещать глаза по экрану, им нужно только сосредоточиться на центре экрана. С выровненным по левому краю макетом пользователи должны сканировать экран в двух визуальных направлениях (слева направо и справа налево). Их глаза должны выполнять больше работы, что замедляет выполнение задачи.
Используйте красные предупреждающие сигналы только для форм подтверждения
Когда деструктивное действие находится на экране подтверждения, вам нужна максимальная концентрация внимания от пользователя. И наоборот, вам не нужно привлекать внимание пользователя, когда на экране подтверждения нет деструктивного действия. В противном случае вы принуждаете пользователей нажать кнопку, когда они не собираются удалять данные.
Не используйте красный предупреждающий сигнал о деструктивном действии, если его нет на экране подтверждения. Например, на экране настроек может быть кнопка «Удалить аккаунт», но она не должна выглядеть, как кнопка призыва к действию, чтобы не привлечь ненужное внимание.
Лучше сделать деструктивное действие отдельной кнопкой с красной текстовой меткой. Использование красного цвета больше, чем нужно, может привести к тому, что пользователи примут его за основную кнопку призыва к действию на экране.
Сведите к минимуму случайные нажатия
Чем чаще пользователи находятся на экране подтверждения, тем больше у них шансов нажать не ту кнопку. Воздерживаясь от деструктивного действия на других экранах, они с меньшей вероятностью попадут на экран подтверждения случайно. Это держит их дальше от опасности.
Отделение разрушительных действий от обычных на других экранах также защищает пользователей от опасности. Пользователи не примут ее за обычную кнопку призыва к действию и не захотят нажать ее.
Предоставьте кнопку отмены в окне подтверждения
Даже с экраном подтверждения могут возникнуть случайные деструктивные действия. Некоторые пользователи могут неправильно прочитать диалоговое окно или все равно нажать неправильную кнопку. После экрана подтверждения предложите пользователям кнопку отмены с сообщением о том, что действие было выполнено.
Поместите кнопку отмены и сообщение о выполнении действия в баннер уведомлений в нижней части экрана. Вы можете сделать кнопку отмены временной или постоянной в зависимости от контекста деструктивного действия.
Временная отмена заставит баннер автоматически исчезнуть через несколько секунд. Постоянная отмена отображает баннер, пока пользователь не отклонит его, нажав кнопку «Закрыть». Помните, что техническая реализация постоянной отмены является более сложной, чем временной.
Дайте пользователям способ отмены действия
Возможность отменить деструктивное действие позволяет пользователям исправить случайное действие, чтобы предотвратить потерю данных. Потеря данных имеет серьезные последствия для бизнеса и жизни людей. Кнопка отмены в окне подтверждения действий не просто сохраняет данные пользователя, но иногда и работу всей его жизни.
Побуждайте пользователей напечатать подтверждение действия
Если кнопка отмены не работает, вы можете предложить пользователям ввести деструктивное действие в текстовое поле для подтверждения. Побуждая их печатать подтверждение действия, вы заставляете их осознать всю его деструктивность. Хотя легко случайно нажать не ту кнопку, невозможно напечатать подтверждение действия случайно, потому что это требует много шагов.
Этот метод не эффективен для часто используемых деструктивных действий. Например, удаление поста является обычным действием в социальных сетях. Требовать, чтобы пользователи печатали подтверждение каждый раз, сделало бы процесс громоздким. Используйте ввод данных для подтверждения действия только для редких деструктивных действий.
Убедитесь, что пользователи осознают последствия своих действий
Гораздо проще бессознательно нажать кнопку, чем напечатать слово. Когда пользователи печатают, они должны думать о том, что они печатают, и нажимать правильные клавиши. Существует больше возможностей для ошибок по сравнению с нажатием кнопки. В результате пользователи не будут случайно нажимать кнопки.
Потеря данных – катастрофа
Когда пользователи попадают на экран подтверждения, они находятся на грани катастрофы. Нажатие на неправильную кнопку может уничтожить их данные, если вы не примете мер, чтобы этого избежать. Примените эти методы UX в своем приложении, и вы избавите своих пользователей от катастрофической потери данных.
Ссылки [en]
- Цена потери данных
- Красный цвет: значение для прикладной психологии и маркетинговых исследований
- Красный цвет привлекает внимание в эмоциональном контексте
- Краткость, сканируемость, целенаправленность: как писать для Интернета
Перевод статьи https://uxmovement.com
Топ коментарі (0)