Изображение из блога компании Miro
Киннерет Ифра, эксперт в разработке микротекстов для UI и автор книги «Microcopy: The Complete Guide», в своей статье даёт рекомендации, как сделать диалоги подтверждения краткими, предельно ясными и не раздражающими, а значит – более полезными для пользователя. Предлагаем вашему вниманию перевод статьи, а после него добавим пару идей из собственного опыта.
***
Перевод статьи «Вы уверены, что хотите это сделать?» Микротексты в диалогах подтверждения»
Обычно диалоговое окно подтверждения появляется, когда пользователь пытается выполнить важное действие. В сообщении пользователю предлагается еще раз подумать, действительно ли он хочет выполнить действие и осознаёт его последствия.
Иными словами, диалог подтверждения возвращает пользователя к моменту выбора и вынуждает его выполнить действие ещё раз. Мы создаём эту помеху сознательно – в конечном итоге она служит на благо пользователя.
Подтверждение или отмена действия
Иногда мы можем предоставить пользователю свободу действий, предполагая, что он знает, что делает. В таких случаях вместо диалога подтверждения лучше дать пользователю возможность отменить действие в течение нескольких секунд после его выполнения.
Пользователь может отменить действие во всплывающем сообщении, которое появляется в верхней или нижней части экрана. Если же пользователь не собирается отменять действие, то ему не нужно ничего делать, сообщение автоматически пропадёт через несколько секунд.
Вот как выглядит всплывающее сообщение в Google Calendar. Оно появляется после удаления мероприятия, на которое не приглашены другие участники.
Такое сообщение пользователь видит в Google Photos при перемещении изображений в корзину:
А вот всплывающее сообщение в Dropbox:
Больше примеров можно найти в статье Керен Ридженски (Keren Rijensky), где она рассказывает о других вариантах интерфейса удаления.
Когда использовать диалог подтверждения, а когда – возможность отмены?
Я задала этот вопрос в группе WE — Women Experience в Facebook и получила замечательные ответы (спасибо, девушки!). На основе этих ответов я выделила четыре ключевых фактора, которые нужно принимать во внимание:
- Обратимость. Если пользователь собирается выполнить необратимое действие, нужно спросить, понимает ли он, что произойдёт дальше. Например, это уместно при попытке удалить элемент без возможности восстановления или отправить отчёт, который впоследствии нельзя будет изменить. Для обратимого действия, например, помещения элемента в корзину, откуда его можно легко восстановить, используется сообщение с отменой.
- Важность. Если действие приведёт к значительному и/или долгосрочному ущербу или иным серьёзным последствиям, обязательно добавьте диалог подтверждения. В результате пользователь остановится и ещё раз задумается, хочет ли он выполнить именно это действие. Если же действие рядовое, а его последствия краткосрочны, можно предоставить пользователю свободу, не создавая лишних преград.
- Сложность. Если пользователь собирается выполнить действие с комплексными последствиями, например, влияющее на настройки других устройств, нужно заранее предупредить об этом. Так пользователь сможет лучше понять, к чему приведёт такое действие. Если же результат очевидный, краткосрочный или незначительный, можно обойтись коротким всплывающим сообщением.
- Частотность. Если пользователь регулярно выполняет одни и те же действия, например, при работе с электронными письмами, запрос подтверждения на каждом шагу быстро ему надоест. К тому же, пользователь вряд ли случайно выполнит действие, с которым он работает каждый день. И наоборот: если пользователь редко выполняет какое-либо действие и мог подзабыть его особенности, лучше использовать диалог подтверждения, чем сообщение с отменой (которое, к тому же, легко пропустить).
Кроме этого, в некоторых продуктах пользователю предлагаются и дополнительные варианты действий, помимо полной отмены (спасибо за подсказку Эфри Элтан). Чуть ниже я приведу пару примеров.
Анатомия диалога подтверждения
Диалог подтверждения включает в себя два или три элемента:
- Заголовок.
- Пояснение в одну-две строки (необязательно).
- Кнопки.
Элемент 1. Заголовок
В заголовке нужно спросить пользователя или сообщить ему об одном ключевом действии, которое нужно подтвердить.
Заголовок должен быть максимально простым, а главное – понятным и однозначным.
В большинстве случаев заголовок должен представлять собой вопрос с двумя взаимоисключающими вариантами ответа, которые легко различить и выбрать нужный: «Да/Нет», «Остаться/Выйти», «Продолжить/Вернуться».
Уже на этом этапе стоит подумать о кнопках: сформулируйте вопрос в заголовке так, чтобы на него можно было дать два однозначных, легко различимых варианта ответа. Эти варианты мы позже используем для кнопок.
Не используйте слишком общие заголовки, такие как «Предупреждение» или «Вы уверены».
Назовите текущее действие – чем конкретнее, тем лучше.
Избегайте вводных фраз, не несущих смысловой нагрузки. Например, «Вы хотите…», «Это действие приведет к…» и всё то же пресловутое «Вы действительно…».
Сообщите главное с самого начала.
Вот отличный пример из Twitter – простое и ясное сообщение:
Почему нужно убрать из сообщений избыточные вступления?
- Сообщения станут краткими, а язык – простым и лёгким для восприятия. Мы и так вынуждаем пользователей тратить время на дополнительное действие. Фраза «Вы действительно…» добавляет сообщению ненужной сложности, в том числе и на эмоциональном уровне.
- Ключевая идея будет более ясной и недвусмысленной. Действия пользователя могут привести к серьёзным последствиям, поэтому формулировать сообщение нужно четко и однозначно. Лишние слова – все, кроме главного вопроса – сделают сообщение расплывчатым и менее ясным.
- Мы не ставим под сомнение действия и знания пользователей. Лишние вопросы подрывают уверенность пользователей в своих знаниях о продукте и умении им пользоваться.
- Мы избавляемся от «воды» – избыточные вступления не несут в себе никакой ценности.
«Выполнить отмену»
Обратите внимание, что слово «Отмена» можно трактовать по-разному, когда речь идет о действиях, связанных с удалением.
Это особенно заметно в сообщениях, в которых переплетаются слова «Отменить» и «Удалить». Из-за двойного отрицания сложнее понять, что предлагается отменить – само действие или его отмену. Лучше выбрать другую формулировку, например, «Назад», «Остаться», «Нет», «Выйти» или любое другое действие, интуитивно понятное в контексте.
Слово «Продолжить» тоже может быть слишком общим и отвлечённым. Стремитесь к точности и указывайте конкретное действие.
Элемент 2 (необязательный). Пояснение
Если вам нечего добавить к тому, что уже сказано в заголовке, добавлять пояснение не нужно.
К сожалению, во многих системах для диалоговых окон подтверждения используется единый шаблон, включающий все три элемента. В таких случаях приходится добавлять пояснение, даже если оно не требуется. Создайте два шаблона, с пояснением и без него, и используйте подходящий для конкретного сообщения вариант. Если же в систему нельзя внести изменения, по крайней мере, постарайтесь не повторяться. Например:
Когда пояснение нужно
Когда пользователь пытается выполнить действие, которое запустит другие действия, ему нужно о них сообщить. Например:
- Удаление связанных элементов — пользователь собирается удалить элемент, что приведёт к удалению связанных с ним элементов.
- Удаление элементов из других учетных записей — пользователь собирается удалить элемент в своей учётной записи, при этом элемент будет удалён и из учётных записей коллег.
- Удаление элементов с других устройств — пользователь собирается удалить элемент из облака, при этом элемент будет удалён и с других устройств, которые синхронизируются с облаком. (А если предупреждение будет не очень понятным, пользователь может с концами удалить фото из месячного отпуска в Испании, а также абсолютно все бэкапы. True story.)
- Противоречащие друг другу действия — пользователь хочет изменить настройки, и это действие противоречит другим настройкам и изменит и их тоже.
Другой распространённый пример – выход или закрытие окна без сохранения изменений. Если пользователь закрывает не до конца заполненную форму или окно создания элемента, нужно предупредить его, что вся сделанная работа пропадёт впустую, и ее придётся начинать сначала.
Например, для работы с новостным приложением пользователю нужно выбрать не менее пяти тем. Если он выберет меньше пяти и попытается выйти из приложения, уже выбранные темы не сохранятся. В таком случае стоит предупредить пользователя об этом:
Чем важнее действие и чем сложнее его отменить, тем тщательнее нужно продумать пояснение. Не забывайте и об элементах дизайна (например, цветах и отступах), которые помогут привлечь внимание пользователя к ключевой информации.
Вот хороший пример из Typeform:
В целом, пояснение – необязательный элемент диалога подтверждения. Добавляйте его, если последствия действия, которое хочет выполнить пользователь, могут быть для него неочевидны.
Объединение заголовка и пояснения
Исходите из того, что пользователи читают только заголовок и надписи на кнопках. Если действие повлечёт за собой серьёзные последствия и вас беспокоит, что пользователь может не прочитать пояснение, включите его в текст заголовка. Еще один вариант – поменять их местами и начать сразу с пояснения. Например:
- Удалить папку и все ее содержимое?
- Данные не будут сохранены. Все равно выйти?
- Эти фотографии будут удалены из всех синхронизированных хранилищ, в том числе из галереи на вашем устройстве. Удалить фотографии без возможности восстановления?
Раз и навсегда, на веки вечные
Если действие необратимо, сообщите об этом. Пользователи привыкли к корзине и другим подобным фичам, которые защищают их от последствий поспешных решений. Если такая возможность не предусмотрена, прямо сообщите, что действие необратимо, и отменить его, вернуться назад или восстановить удалённое будет невозможно. Об этом следует сказать уже в заголовке с помощью недвусмысленных выражений вроде «Без возможности восстановления».
Приведённый выше пример из Typeform как нельзя лучше демонстрирует этот принцип.
YouTube даже требует дополнительно подтвердить удаление видео: пока пользователь не установит специальный флажок, кнопка удаления остаётся недоступной.
Есть вариант получше? Самое время рассказать о нём
Если вам кажется, что пользователь собирается что-то удалить без особой необходимости или выполнить другое действие, которое вряд ли решит его проблему, то диалог подтверждения – идеальное место, чтобы предупредить его об этом.
Вот пример из Facebook:
Элемент 3. Кнопки
При работе над кнопками для диалогов подтверждения следуйте этим рекомендациям:
- Сделайте кнопки легко отличимыми и как можно более понятными
Кнопки должны представлять собой два понятных и легко различимых варианта, которые невозможно перепутать. Каждый вариант должен быть предельно понятен сам по себе. Если заголовок сформулирован удачно, подобрать для кнопок два противоположных ответа на заданный вопрос будет намного проще.
Вот пример из программы AVG, идеально демонстрирующий эту идею:
- Добавьте контекст
Если на кнопках будет только «Да» и «Нет» или «Продолжить» и «Отмена», то пользователи, которые прочли заголовок и/или пояснение, скорее всего, поймут, о чём речь. Однако для тех, кто предпочитает не вдаваться в детали (будем честны – большинство из нас), такая формулировка может оказаться непонятной.
Лучше добавить название действия, по крайней мере, для кнопки с подтверждением: «Да, завершить парковку»; «Все равно выйти»; «Да, удалить»; «Перестать читать»; «Да, отправить» и так далее.
Если заголовок представляет собой вопрос, на который можно ответить «Да» или «Нет», я предпочитаю добавлять перед глаголом «Да» («Да, отправить») или «Всё равно» («Всё равно отправить»). Впрочем, можно использовать и один глагол («Отправить»).
Ниже приведён забавный диалог из Forest, расширения для Chrome. Это расширение предназначено для борьбы с прокрастинацией: пользователь может посадить дерево, которое растёт, пока он работает, но погибает, если перейти на сайт из чёрного списка.
Контекст, который я добавила на картинке справа, не только делает выбор понятнее, но и создаёт эмоциональную преграду для прокрастинации. Кто же захочет погубить маленькое, беззащитное деревце? Кроме того, новый заголовок сформулирован более прямолинейно – так, как я писала выше.
Контекст поможет и тем пользователям, которые хорошо знакомы с системой. Когда из текста на кнопке понятен контекст вопроса, пользователь не тратит время на чтение одних и тех же заголовков.
Вот как выглядит диалог подтверждения, который появляется при попытке удалить изображение из галереи Galaxy. Достаточно прочитать текст на кнопке, чтобы понять, о чём идет речь:
Третье преимущество контекста в том, что на словах, добавленных к привычным «Да/Нет» или «Отмена/Подтвердить», пользователь «притормаживает» и задумывается над тем, что собирается сделать. Это хороший способ предотвратить непродуманные, интуитивные действия. Достаточно добавить «Выйти» на кнопку «Да», и пользователь помедлит ещё долю секунды и задумается, действительно ли он хочет выйти. - Используйте один и тот же глагол в заголовке и на кнопках, чтобы пользователю было легко проследить связь между ними
Следующий пример из Google Photos демонстрирует ещё два принципа разработки текстов для диалогов подтверждения:
- Будьте последовательны — учитывайте надпись на кнопке, при нажатии на которую появится диалог подтверждения, и используйте ту же формулировку. В примере пользователь нажимает кнопку «Очистить корзину», поэтому в диалоге подтверждения тоже используется слово «корзина».
- Сообщайте о главном — в этом действии главное не то, что корзина будет очищена, а то, что её содержимое будет удалено навсегда. Поэтому в тексте на кнопке важно обратить внимание пользователя на удаление данных, а не на очищение корзины. Возможно и ещё более элегантное решение: формулировки можно объединить и назвать кнопку не «Очистить корзину», а «Удалить содержимое корзины».
Подведём итоги
Ниже приведён итоговый пример, в котором доработаны все три элемента диалога подтверждения.
В новом заголовке мы задаём прямой вопрос о конкретном действии.
В новом пояснении мы сообщаем пользователю о последствиях этого действия.
В новых кнопках мы предлагаем легко различимые варианты с указанием контекста.
***
Применение на практике
Итак, какие лайфхаки по текстам в диалогах подтверждения можно вынести из этой статьи? Давайте обобщим:
Заголовок:
- Сделайте заголовок коротким и простым, в идеале – задайте вопрос с двумя взаимоисключающими вариантами ответа.
- Убирайте вводные фразы вроде «Вы действительно…» – это ненужная «вода».
- Избегайте неоднозначности, называйте конкретное действие. Особенно осторожного обращения требуют слова «Отмена» и «Продолжить».
Пояснение:
- Не добавляйте пояснение, если вам нечего добавить к вопросу в заголовке.
- Добавляйте пояснение для действий, которые вызовут другие действия, и для необратимых действий.
- Если действие кажется неуместным, предложите другой вариант.
- Используйте цвета и отступы, чтобы привлечь внимание к ключевой информации.
- Пояснение можно объединить с заголовком. Всё равно многие их не читают.
Кнопки:
- В текстах кнопок используйте ответы на вопрос, заданный в заголовке.
- Добавьте на основную кнопку название действия – например, «Да, выйти». Лучше, если оно будет совпадать с глаголом в заголовке.
И ещё:
- Для некритичных действий и действий, которые можно отменить, диалог подтверждения лучше заменить на всплывающее окно с отменой.
Эти советы перекликаются с теми принципами, которые используются при разработке UI для наших продуктов. Например, в Directum RX для удаления ссылок мы заменили диалог подтверждения на «всплывашку»:
А в одной из версий мы избавились от громоздких формулировок в диалогах:
Бонус: идеи из личного опыта
К рекомендациям из статьи мы можем добавить ещё парочку лайфхаков, которыми пользуемся сами. Вот они:
- Если диалог подтверждения раздражает, его можно отключить. Эту возможность мы тоже добавили в RX 3.5. и теперь пользователи могут не подтверждать рутинные действия вроде отправки задач. При необходимости эти диалоги можно восстановить.
При этом важно, что по умолчанию диалоги подтверждения отображаются: так пользователи изначально получают представление о том, что то или иное действие «критично». А ещё администратор может запретить отключение диалогов в настройках системы. - В диалог подтверждения можно добавить дополнительное действие – не только в виде ссылки, как предлагается в статье, но и в виде дополнительной кнопки.
Лучше, если тексты основной и дополнительной кнопок будут однотипными – например, используйте два глагола. - Кстати, о глаголах. В диалогах подтверждения они предпочтительнее отглагольных существительных: вместо «Выход» лучше написать «Выйти», вместо «Отправка» – «Отправить». Исключение составляет разве что старая добрая «Отмена».
- Старайтесь не использовать слова с отрицательной коннотацией:
- вместо «ошибка», «проблема» лучше использовать «неполадка», «неисправность» или иные контекстные синонимы;
- вместо abort, kill, terminate – end;
- вместо failed, unable – cannot;
- вместо bad – incorrect;
- вместо invalid – is not valid.
Избегайте и таких формулировок, которые звучат как обвинение: «Вы неправильно заполнили…» – лучше объяснить, что именно нужно исправить. Мы же не хотим, чтобы наш интерфейс огорчал пользователя?
Конечно, не хотим – и, взяв на вооружение свой и чужой опыт, вновь отправляемся в бесконечный путь к идеальному UI.
А какими из перечисленных принципов пользуетесь вы? Может быть, вам есть что добавить к этому списку? Пишите комментарии, задавайте вопросы – мы будем рады обменяться опытом.