book-open 1 test
Основы дизайна

Проектируем подтверждение

Иллюстрация Uran: https://dribbble.com/shots/6673706-Robot/attachments

Советы по проектированию, и какими будут диалоги подтверждения в будущем

Вы читаете перевод статьи “Designing Confirmation”. Над переводом работали Ольга Скулкинаи Ринат Шайхутдинов. При поддержке iSpring.

iSpring — решение для запуска дистанционного обучения.

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

Интересуетесь свежими статьями по продуктовому дизайну (UX/UI)? 🚀

Подписывайтесь на канал в Telegram | ВКонтакте, Instagram, Facebook

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

Medium отображает вот такой тултип, чтобы пользователь подтвердил свое желание опубликовать статью.

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

Полезные советы:

  1. Озвучьте действие в заголовке в форме вопроса
  2. Объясните последствия действия в основном тексте
  3. Еще раз озвучьте действие на кнопке подтверждения
Как нужно: “Удалить локацию? Удаленная локация навсегда исчезнет из сети. Да, удалить локацию”. Как не нужно: “Вы уверены? Вы уверены, что ходите удалить локацию? Да”

Чего стоит избегать:

  1. Неоднозначных вопросов в стиле “Вы уверены?”
  2. Невнятного основного текста
  3. Действий в стиле “да/нет” без уточнения
  4. В некоторых случаях — кнопки “отмена”. Если речь идет о деструктивном действии (например, отменить изменения), пользователи могут воспринять “отмену” как подтверждение действия, хотя на самом деле “отмена” закрывает диалог.

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

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

Подтверждение может отображаться по-разному: в отдельном окне, в тултипе, или в одну строку. Скачивайте этот .sketch-файл и пользуйтесь на здоровье нашими дизайнами в своих проектах.

Диалог подтверждения в форме отдельного окна, тултипа или в одну строку. Скачивайте .sketch-файл.

Какими будут диалоги подтверждения в будущем

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

И вот мы на рубеже 2017 года. Виртуальная реальность, дополненная реальность, носибельные гаджеты, голосовые интерфейсы, управление жестами — все это входит в моду. В будущем взаимодействие станет совершенно другим. Более простым. Изменится ли наше представление о совершении действий?

Как по вашему изменятся диалоги подтверждения? Какие методы и решения появятся?

Подписывайтесь на меня в Twitter, и на Dribbble.