July 11, 2019

Поп-ап и другие всплывающие окна. Разбираемся в терминологии

Валентин – дизайнер интерфейсов. Гоша – разработчик. Они работают в одной компании над одним проектом. Как-то раз подходит Валентин к Гоше с новой задачей: «Давай по нажатию этой кнопки будем открывать попап!».

Сказал и ушел, нарисовав себе в голове такую картину:

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

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

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

Модальность

В зависимости от контекста, слово «модальность» может иметь два разных значения. Применительно к интерфейсу в целом, оно подразумевает наличие различных режимов: например, для набора заглавных букв нужно нажать Caps lock, то есть переключить/выбрать другой режим. А когда мы говорим о всплывающих окнах, модальность означает блокирование работы с интерфейсом, до тех пор пока окно не будет закрыто (обычно это выглядит как затемнение фона).

Классификация всплывающих окон

Alert

Используется, чтобы сообщить об ошибке, либо предупредить пользователя о последствиях действия, которое он собирается совершить. Обычно содержат внутри себя две кнопки, вроде «Сделать что-то» и «Отменить». Алерты чаще всего модальны, то есть блокируют интерфейс позади себя, пока юзер не произведет действие внутри окна. Так как они прерывают работу пользователя, алерты должны использоваться только в крайних случаях.

Например, при безвозвратном удалении файла, либо для подтверждения покупки. Хороший алерт всегда имеет информативный текст, поясняющий что произошло и почему это стоит внимания пользователя. В частности, фраза «Произошла ошибка!» — пример плохого алерта, так как не сообщает никакой полезной информации, но если заменить ее на «Соединение отсутствует! Проверьте, подключен ли ваш компьютер к сети», то юзеру станет намного понятнее в чем проблема и как ее решить.

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

Dialogs (диалоговое окно)

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

Pop-up

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

Notifications

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

Lightbox

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

Tooltip

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

Pop-over

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

В заключение

В данной статье приведена общепринятая классификация всплывающих окон, но в некоторых гайдлайнах можно встретить как дополнения, так и некоторые расхождения: например, где-то popover и tooltip это разные вещи, а где-то – одно и тоже. Главное – придерживаться правил конкретной платформы. Например, в OS X модальное диалоговое окно всегда выезжает сверху и дает ресайзить родительское окно, а в Windows оно всегда появляется посередине и наглухо блокирует родительский интерфейс.

Автор: Денис Данилов. Оригинал статьи можно прочитать тут.