5 основных UX-правил дизайна диалоговых окон

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

Что такое диалог?

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

Диалог завершения сессии
Диалог завершения сессии

1. Не частите с диалогами

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

Требовать подтверждения

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

Требование подтверждения, пользователь осведомлён о ситуации
Требование подтверждения, пользователь осведомлён о ситуации

Не открывать внезапные диалоги

Диалог всегда должен открываться лишь после того, как пользователь делает (или сделал) что-то: нажал кнопку, перешёл по ссылке, выбрал опцию и т.д.  Некоторые сайты просто бомбят пользователя предложением подписаться на что-либо или зарегистрироваться — это ужасно раздражает, а зачастую создаёт проблемы для пользователей с мобильным устройством.

2. Связь между диалогом и реальным миром

Диалог должен говорить на языке пользователей : использование слов, фраз и понятий, знакомых пользователю, а не специальные термины системы.

Чёткий вопрос и варианты

Вы должны использовать четкий вопрос или предложение, относящееся к содержимому, например: «Стереть данные?» Или » Удалить учетную запись?». В общем случае, следует избегать извинений, двусмысленности, или вопросов, к примеру: «Внимание!» или «Вы уверены?».

Представляйте в диалоге важную информацию

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

Левый диалог создает неоднозначный вопрос и не даёт пользователю однозначной информации. Правый диалог представляет собой конкретный вопрос, описывает четкие действия.
Левый диалог создает неоднозначный вопрос и не даёт пользователю однозначной информации. Правый диалог представляет собой конкретный вопрос, описывает четкие действия.

Информируйте пользователя об итогах выполнения операции

Когда процесс закончен, не забудьте вывести об этом сообщение для пользователя. Пусть пользователь знает, что  итог достигнут.

Информирование об успешной операции
Информирование об успешной операции

3. Стремитесь к минимализму

Диалоговое окно не должно содержать ничего лишнего, а информация в нём должна быть представлена так, чтобы пользователь её не пропустил.

Количество элементов и опций

Диалоги никогда не должны появляться на экране частично. Вы не должны использовать диалоговое окно, в котором содержится контент с прокруткой.

Минимальное количество действий

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

Лишнее действие в диалоге
Лишнее действие в диалоге

Не стоит делать диалог в несколько шагов

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

4. Выбирайте правильный тип диалога

Диалоги бывают двух основных типов.
1. Модальные — диалог заставляет пользователя обязательно взаимодействовать с ним, чтобы продолжить. Модальный диалог обычно используется для конкретных, блокирующих процессов, где:
контекст раздела не требуется для того, чтобы решить, какие действия предпринять.
Требуется явно либо «принять», либо «отменить» действие для того , чтобы закрыть диалог. Модальный диалог не закрывается из-за клика вне области диалога.
2. Немодальные — позволяют пользователям закрыть диалог без принятия решения, кликнув вне области диалога.

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

Модальное диалоговое окно в Android
Модальное диалоговое окно в Android

5. Визуальная согласованность

Полупрозрачный фон

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

Опция отмены диалога

Пользователю должно быть понятно как отменить диалог — не все пользователи догадываются кликать вне зоны диалога (для немодальных).  Как правило для этого предусматривают кнопку закрытия «Х» в верхнем правом углу — помните, что кнопка должна быть достаточного размера, чтобы нажать на неё при использовании мобильного устройства.

Избегайте двойных диалогов (диалог в диалоге)

Если внутри диалогового окна спрятан ещё один диалог — это очень сложно и приводит к путаннице для большинства пользователей.

Двойной диалог
Двойной диалог

 

Это был адаптированный перевод статьи Ника Бабича.

Будет полезно почитать:

Обратная связь с пользователем, которая его приятно удивит