Chulakov Design

Модальные окна

Плохо реализованные модальные окна стоят препятствием на пользовательском пути и в 90% случаев вызывают негативные эмоции. В особенности это касается рекламных баннеров — одной из самых распространенных причин отказов посетителей от использования сайта.

Если по каким-либо причинам вы все же решили затемнить экран и привлечь внимание пользователя таким радикальным образом, обязательно учтите:

Название

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

Содержание

Копирайт модальных окон должен соответствовать tone of voice бренда, для которого вы проектируете сайт или приложение. Если конкретных требований по текстам у заказчика нет, создайте впечатление общения приложения с пользователем. Составляйте закрытые вопросы, на которые можно ответить «Да» или «Нет», и тогда у посетителя никогда не возникнет мысли «Что от меня хотят?» и «Что нажимать?»

Расположение

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

Пути отхода

Самое важное — дайте пользователю возможность беспрепятственно закрыть окно. Это может быть кнопка отмены, перекрестие «закрыть», клик (тап) за пределами окна. Также можно добавить возможность закрытия по клавише «Escape».

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