Александра Савельева написала о подтверждении пользовательского действия в модальном окне.

— Проблема в том, что пользователи подтверждают свои действия не задумываясь и, например, иногда удаляют не то, что хотели;
— Можно реализовать отмену действия в течение 10 секунд и отображать уведомление об этом. Так делает Gmail после отправки письма. Фактически, действие происходит на 10 секунд позднее, если пользователь не решает его отменить;
— Если разработчики не готовы так делать, можно доработать модальное окно: описать, что происходит (человек подтверждает выход именно из профиля Ozon), к чему приведёт подтверждение (перестанут отображаться персональные рекомендации). Окно станет чуть менее стандартным, повысится вероятность, что пользователь в него вчитается;
— К кнопке подтверждения можно добавить кнопку отказа от действия и сделать её акцентной. Кнопки с разрушительными действиями стоит делать красными;
— Для подтверждения самых разрушительных и редких действий (удаление проекта или профиля) можно попросить ввести в текстовое поле какую-нибудь фразу, например, название удаляемого проекта.

#modal

Андрей Насонов написал о модальных окнах.

— Модальное окно отображается поверх страницы и блокирует взаимодействие с ней, пока не будет закрыто. Оно позволяет что-то сделать в контексте родительской страницы и быстро к ней вернуться;
— Оно должно появляться в ответ на действие пользователя. Не стоит отображать в нём сообщение об ошибке или успешном выполнении команды;
— Кнопка закрытия может находиться вне контейнера окна и закрепляться при его прокрутке. Так она будет доступна всегда;
— Ширину окна подбирайте под содержимое, но в одном проекте лучше придерживаться единообразия и не использовать много разных ширин;
— Минимальная высота ограничена высотой содержимого. Если содержимое меняется при взаимодействии (например, при фильтрации списка), высота окна тоже может меняться. В этом случае лучше выравнивать его по верхней границе экрана, чтобы элементы, с которыми взаимодействовал пользователь (поля фильтра), не смещались;
— Если содержимого по вертикали много, лучше обрезать его не границей окна, а границей экрана. Так будет очевиднее, что есть скрытый контент;
— Желательно избегать появления нескольких модальных окон друг над другом. Можно сделать бесшовный переход — заменять контейнер с содержимым в уже отображаемом окне;
— Стоит проработать: 1) Затемнение при отображении второго окна или окна поверх, например, боковой шторки, которая тоже вызывает затемнение; 2) Смещение окна по горизонтали при появлении или скрытии полосы прокрутки;
— Шапку, подвал и другие элементы можно закреплять при прокрутке. В том числе и при условии. Например, подвал с кнопкой а) «Сохранить» — после внесения изменений в форму, б) «Добавить» — после заполнения всех обязательных полей;
— Если в окне пользователь просматривает карточку объекта из списка, вне контейнера можно разместить кнопки перехода к следующему и предыдущему объекту;
— Заголовок должен отвечать на вопрос «Что происходит» или содержать название объекта. Он должен совпадать с текстом кнопки, которая его вызывает: «Редактировать» → «Редактирование заказа»;
— Если он занимает 2 строки, при прокрутке окна можно сократить его до одной строки с … в конце;
— После закрытия окна пользователь должен вернуться к тому месту на странице, где он его открыл.

#modal

Маргарита Хохлова написала о тексте для окон подтверждения.

— Используйте окна подтверждения экономно, так как они прерывают движение по сценарию;
— Скорее всего, такое окно нужно, если событие не частотное, вызывает необратимые последствия, приводит к серьёзным изменениям в работе системы;
— Заголовок должен быть информативным, не выносите важное в подзаголовок. «Подтвердите действие» → «Восстановить письмо из черновиков?»;
— Убирайте неинформативные обороты вроде «Вы уверены…»;
— Формулируйте заголовок без отрицания. «Не применять ввод?» → «Удалить введённый текст?»;
— Предлагайте альтернативу подтверждаемому действию. Возможно, пользователь передумает отказываться от уведомлений, если узнает о возможности настроить их частоту;
— Согласуйте заголовок с кнопками. Если в заголовке речь об отключении, на кнопке пишите «Отключиться»;
— Текст «Ок» и «Отменить» на кнопках недостаточно конкретен, лучше писать о подтверждаемом действии. И лучше, если для действия обычного и такого же действия, но критичного и необратимого, формулировки будут отличаться: «Удалить» → «Всё равно удалить» (несмотря на перечисленные в подзаголовке последствия);
— Не манипулируйте, делайте акцентной кнопку подтверждения, а не отмены действия (Саша Савельева считает иначе).

#writing #modal

Анна Кейли написала о всплывающих окнах (попапах).

— Попап появляется поверх содержимого страницы;
— Может быть немодальным и модальным. Во втором случае содержимое страницы становится недоступным для взаимодействия, пока попап не будет закрыт;
— Лайтбокс — эффект, когда всё кроме попапа затемняется;
— Не отображайте попап сразу после открытия сайта. Часто содержимое попапа можно разместить вне попапа. Исключение: согласие использовать куки и подтверждение возраста;
— Не отображайте его и сразу после входа в личный кабинет. Обычно люди заходят в них с какой-то целью, и попап будет помехой. Дайте немного времени выполнить текущую задачу;
— Если хотите рассказать о функциях, которые помогут с текущей задачей, используйте всплывающие подсказки и небольшое немодальное окно;
— В таком же окне лучше разместить форму сбора имейлов, причём, стоит продумать момент её появления. Например, после прочтения статьи в блоге или при просмотре товарной категории, для которой вы можете предложить промокод;
— Не отображайте попап, когда пользователь выполняет критически важную задачу;
— Если у вас на сайте есть несколько попапов, проверьте, что они не появляются одновременно или один за другим;
— Старайтесь не использовать попапы для сообщений об ошибках или предупреждений о том, как их избежать. Люди могут закрывать их, не читая;
— Не отображайте попап, если пользователь только открыл желаемый контент (например, статью). Попап в этом случае можно заменить ненавязчивым баннером в верхней части страницы;
— Так же можно рассказать о доступности мобильного приложения.

In English. #modal #popup