В чем разница между Modal, Popup, Popover и Lightbox?
Я видел много терминов, используемых для описания ящиков сообщений, которые уведомляют и предупреждают пользователей или отображают информацию, такую как модальные, всплывающие, popover и лайтбокс.
В чем разница между этими компонентами?
Когда и для какого типа текста следует использовать каждый из этих компонентов?
2 ответа
Все эти компоненты пользовательского интерфейса представляют собой контейнеры /окна, которые отображаются поверх содержимого, с которым вы в настоящее время просматриваете /взаимодействуете. Различные имена основаны на том внимании, которое они заслуживают, в контексте, в котором вы находитесь, и о том, как вы можете взаимодействовать с ними.
Предупреждение . Эти сообщения требуют немедленного внимания. Окно /контейнер обычно заблокирован, что означает, что вы не можете отменить это поле или продолжить то, что хотите, пока вы явно не подтвердите содержимое, что обычно делается путем нажатия кнопки внутри контейнера. Кнопки в этом окне обычно «ОК» или «Отмена». (Если вы показываете много из них, это, как правило, провал дизайна, потому что ожидания вашего пользователя не соответствуют ожиданиям пользовательского интерфейса.)
Popovers — это расширение всплывающих подсказок , которые содержат больше контента, кроме простого текста. Они часто имеют заголовок и могут включать изображения и т. Д.
Векторы тестирования всплывающих оверлеев
Несколько лет назад я работал над веб-проектом, насыщенным всплывающими окнами (попапами). После этого опыта я собрал список идей для тестирования попап оверлеев или модальных окон.
Прекрасный пример попап оверлея (модального окна)
1. Обратите внимание на расположение закрывающего крестика X (X close)
(Задается при проектировании). Если крестик X close находится вне всплывающей (попап) области — это 100% идентификатор полного закрытия попапа. Однако в редких случаях, располагаясь внутри попапа, он может закрывать интерактивный контент в нем (конечно, лучше избегать такого UX). Главное — убедиться, что закрыть попап (модальное окно) легко и очевидно.
1. Внешний крестик X close — OK
2. Внутренний крестик X close — OK
3. Здесь не очевидно. Закрывает ли крестик X close интерактивный контент или весь попап?
2. Закрывайте попап разными способами
Крестик X close;
Клик по оверлею за пределами попапа — этот способ задается в дизайне и маркетинге. Предпочтительнее дать возможность пользователю закрыть попап любым способом, но некоторые менеджеры боятся снизить коэффициент конверсии, если у пользователей будет больше возможностей для отказа.
3. Прокрутка внутри попапа
(Задается при проектировании и определяется количеством контента). Весь контент должен помещаться в область попапа или быть доступным для просмотра. Существует несколько распространенных ошибок, связанных с этим случаем:
Контент выпадает из области попапа;
Контент не прокручивается внутри попапа.
4. Ошибка: текст выпадает из области попапа
5. Ошибка: текст обрезается и нет возможности его прокрутить
4. Максимальная прокрутка до самого низа
Оверлей или «вуаль» не должны отрываться от экрана.
6. Ошибка: оверлей не был зафиксирован
5. Фоновая прокрутка за оверлеем
(Задается при проектировании). Несмотря на то, что возможность прокрутки устанавливается при разработке, предпочтительнее заблокировать прокрутку фона во время открытого попапа, поскольку это может предотвратить возможные проблемы после его закрытия.
6. Полоса прокрутки браузера во время открытия попапа
Автоматическое скрытие полосы прокрутки браузера может привести к подергиванию всей страницы. Лучше ненужная полоса прокрутки, чем раздражающий пользовательский опыт.
Анимация: 7. Ошибка: подергивающийся контент
7. Открытый попап с подключенной мышью и без нее
Подключенное устройство (мышь) влияет на отображение полосы прокрутки!
8. Открытие попапа из разных частей страницы
В некоторых случаях открытие попапа из нижней части страницы может привести к прокрутке всей страницы до верха на заднем фоне.
9. Обращайте внимание на место открытия/закрытия попапа на странице
Область просмотра главной страницы не должна меняться после открытия/закрытия попапа.
10. Содержимое всплывающего окна должно быть идемпотентным
(Идемпотентность задается в документации). В идеальном мире повторяющиеся операции «открыть > закрыть > открыть» должны приводить к одному и тому же результату.
11. Попробуйте поискать что-нибудь на странице
Браузер будет искать все на странице (внутри попапа и под оверлеем), и оверлей с попапом не должен разрушаться, если что-то было найдено на заднем фоне.
8. CTRL+F выделяет найденные ключевые слова
12. Несколько всплывающих окон на странице одновременно
(Приоритет устанавливается в документации). Если несколько попапов могут быть открыты одновременно, этот случай должен быть протестирован. Приоритет отображения обычно задается z-index, и это очень хрупкая деталь.
9. Ошибка: небольшие попапы перекрывают основные
13. Выпадающие меню с попапом
Попробуйте совместить открытые выпадающие меню с попапом. Это очень частый случай, когда выпадающие селекты оказываются поверх оверлея.
10. Ошибка: выпадающий список накладывается на попап
14. Открыть попап по прямой ссылке
(Задается при проектировании или определяется в документации). Наиболее распространенные способы открытия попапа по прямой ссылке, с которыми вы можете столкнуться:
URL с UTM-параметрами: http://foo.bar/pop-up?utm_source=medium — особый случай строки запроса, но убедитесь, что параметры не исчезнут после открытия;
Хэш-параметр: http://foo.bar/xyzzy#pop-up — это крайний случай для Firefox.
15. Навигация по кнопке браузера [Back] (Назад)
(Задается при проектировании и в случае возможности работы с прямыми ссылками). Описание того, как это должно работать, почти всегда отсутствует в документации. Что произойдет, если мы нажмем кнопку [Back] после открытия попапа? Должно ли это закрывать попап или возвращать на предыдущую страницу? — Открытие предыдущей страницы более ожидаемо с точки зрения глобального поведения браузера, но это всегда дискуссионно и зависит от конкретного пользовательского интерфейса.
16. Клавиатурная навигация
Попробуйте открыть попап с помощью клавиш клавиатуры и взаимодействовать с ним используя [TAB] и [ENTER]. Основная проблема в этом случае заключается в том, что разработчики забывают переключить внимание на открывшийся попап, и фокус навигации пользователя остается под ним. Это проблема доступности, соответствующая критериям WCAG 2.1.1 Клавиатура и 2.1.2 No Keyboard Trap: клавиатурная навигация не должна содержать ловушек.
17. Сравните попап с мокапом проекта
(Задается при проектировании). Габариты попапа должны соответствовать мокапу. Процент прозрачности оверлея должен соответствовать мокапу — прозрачность может быть задана разными способами, например, с помощью непрозрачности. Одно и то же значение непрозрачности в браузере может отличаться от аналогичного в дизайнерском мокапе и зависит от графического редактора (Sketch и Figma здесь предпочтительнее, чтобы избежать подобных коллизий).
11. Сравните разницу в степени непрозрачности: 70% против 80%
Кстати, визуально процент непрозрачности позволяет решить проблему, когда два попапа открываются одновременно друг на друга — задний попап будет скрыт, но уменьшение прозрачности из-за двух оверлеев проявит его.
18. Проверьте сенсорную версию на физическом мобильном устройстве
Иногда режим отзывчивого дизайна в десктопных браузерах может не отображать реальное поведение попапа на сенсорном устройстве.
19. Проверьте в режиме инкогнито (приватное окно) в Safari
Это крайний случай. Если у вас есть внешний виджет (или iframe), который требует авторизации внутри попапа, скорее всего, возникнут проблемы.
20. Проверьте в IE 11 и Edge 14/15
Только в том случае, если данным браузером пользуется значительное количество пользователей.
Приведенный выше список не является полным и может быть дополнен новыми кейсами в зависимости от контекста конкретного проекта.
Бесплатные шрифты, использованные в иллюстрациях: Calluna Regular и Calluna Sans Regular.
Всех желающих приглашаем на открытое занятие для начинающих тестировщиков «Виды тестирования или про навыки тестировщика для собеседования и начала работы в IT», будет много полезной информации для тех, кто начинает свой путь в сфере тестирования. Регистрация по ссылке.
Всплывающие окна: 10 плохих трендов и альтернатив
Из десятилетий исследований пользователей мы знаем, что им не нравятся «всплывашки» и модальные окна. Недавно мне напомнили об этом во время очередного юзабилити-исследования. Пытаясь выполнить задачу, пользователь бросил свой телефон через стол, когда столкнулся с несколькими поп-апами подряд. Он отказался выполнять задание и ушёл с сайта со затаённой злобой на компанию. Несколько других участников исследования испытывали примерно те же эмоции, ну только телефонов уже не кидали.
Всплывающее окно (поп-ап, оверлей) появляется поверх всего содержимого страницы. Их можно классифицировать так:
1. В зависимости от того, может ли пользователь взаимодействовать с содержимым страницы:
- Модальные: содержимое страницы недоступно до того момента, пока пользователь явно не повзаимодействует с оверлеем.
- Немодальные: пользователь может взаимодействовать с контентом на фоне (к примеру, переходить по ссылкам или нажимать кнопки), даже когда поп-ап всё ещё активен.
2. В зависимости от того, затемнён ли фон:
- Если фон затемнён, «всплывашку» называют лайтбоксом.
- Названия у всплывающего окна на незатемнённом фоне пока нет.
И пусть лайтбоксы обычно являются модальными окнами, это не всегда обязательно так.
В течение нескольких недель я делал скриншот каждой «всплывашки», которая попадалась мне пути на сайтах и в мобильных приложениях. В среднем, выходило около 25 в неделю, а это намного выше терпения всякого человека. Довольно показательно для сегодняшнего пользовательского опыта в интернете. Этот эксперимент вкупе с моим юзабилити-исследованием вскрыл кучу плохих способов использования поп-апов. Да и вообще проблему переизбытка всплывающих окон.
Мы близки к точке невозврата, когда веб-сайты окончательно превратят поп-апы из полезного элемента дизайна в причину ненависти и недовольства. В этом материале я выделю проблемы и расскажу о ключевых факторах, которые нужно принять во внимание при работе со «всплывашками». И предложу альтернативы этому инструменту, которые в некоторых ситуациях будут более к месту.
Время «всплывания»: не прерывайте взаимодействие или выполнение ключевых задач
1. Поп-ап появляется до загрузки содержимого главной страницы. Вне зависимости от вида всплывающего окна, никогда не используйте его, пока пользователь не понял ценности вашего сайта или приложения. Этот тренд невероятно навязчив, поскольку выполнение пользовательской задачи прерывается ещё до того, как он «приземляется» на страницу. Люди привыкли к окнам, которые появляются слишком рано, поэтому либо игнорируют их, либо ищут способ как можно быстрее их закрыть, чтобы вернуться к своей задаче. Поп-апы, появляющиеся до загрузки страницы, сразу настраивают пользователя против сайта. Кроме того, это ещё и риск упасть в выдаче, поскольку Google наказывает за ограниченный доступ к содержимому (особенно, на мобильных устройствах).
Что сделать вместо этого. Дождитесь момента, когда поп-ап будет оправдан контекстом. Используйте принцип взаимности: сначала предоставьте пользователю ценность, а только потом просите что-то взамен – будь то адрес электронной почты или просто его время на закрытие «всплывашки». Проведите исследование аудитории, чтобы определить лучший контекст для любого содержимого поп-апов, которые вы планировали показывать. Во многих ситуациях окажется, что вам и не поп-ап был нужен вовсе. Единственный оправданный случай использования «всплывашки» до загрузки страницы – запрос возрастных данных у пользователя или его согласия на использование cookies.
2. Показ всплывающего окна сразу после залогинивания. Такое окно одинаково раздражающее с предыдущим пунктом. Когда пользователь вошёл в систему, у него сразу же есть новое задание. Иначе зачем он вообще логинился?! Сразу же показывать поп-ап – только сбивать внимание и мешать выполнению задачи. Пользователь не только закроет его, но и, скорее всего, взбесится из-за дополнительного времени, которое пришлось потратить на это бесполезное действие.
Что сделать вместо этого. Дайте залогинившимся пользователям побольше времени и пространства для выполнения своих задач. Не надо сразу же показывать поп-ап. В дальнейшем можно познакомить его с помощью «всплывашек» с новым полезным функционалом, но только в том случае, если он действительно поможет пользователю выполнить свою задачу лучше и быстрее. В таких случаях используйте менее навязчивые способы, например, маленькие немодальные оверлеи.
3. Запрос адреса почты до первого взаимодействия. Многие сайты и приложения запрашивают e-mail пользователя ещё до того, как у них даже была возможность повзаимодействовать с контентом. E-commerce, новостные сайты и приложения, а также блоги – главные «нарушители» в данной категории. Это плохой вариант не только потому, что пользователей бесит окно, оно появляется невовремя или слишком рано запрашивает почту. Это ещё и приводит к мысли о том, что раз вы так по-спамерски собираете адреса, то и письма будете слать в том же ключе.
К примеру, одна из пользователей, зашедших на сайт Uncommon Goods’, была крайне недовольна окном о доступе к секретным распродажам за e-mail. Она сказала: «Меня реально раздражает, когда такие штуки появляются прежде, чем я вообще что-либо сделаю на сайте. Откуда мне знать, хочу ли я подписываться на подписку, если я только сюда попала? Я бы сделала этот выбор позже».
Есть много компромиссов, на которые нужно пойти, запрашивая у пользователей адрес почты. Сайты и приложения часто используют преждевременные модальные окна, потому что они дают небольшой прирост в метриках. Но эти краткосрочные успехи ведут к недовольству среди пользователей – они, как правило, не видят никакой мотивации в предложениях типа секретных распродаж.
Что сделать вместо этого. Вместо того, чтобы показывать поп-апы с почтой так рано, подумайте, в какие моменты пользователи скорее всего поделятся с вами своими данными. Они просматривают категорию, для которой есть соответствующий промокод? Или они только что до конца прочитали пост в блоге. Эти моменты – позволительные триггеры для небольших немодальных оверлеев в верхнем или нижнем правом углу страницы. Предложите пользователям что-то ценное и осязаемое в обмен на адрес почты, но не ожидайте, что они будут им делиться.
4. Просьба о фидбеке до момента, пока пользователь не сделал что-то вразумительное. Получать обратную связь от пользователей важно, но не заставляйте их делиться мнением, пока они вообще ещё ничего не сделали на сайте. Сайты и приложения зачастую «тычут» поп-апами для фидбека очень рано в надежде, что человек поставит высокую оценку и продолжит выполнение своей задачи. Но такое происходит редко, гораздо чаще пользователи закрывают окно и больше никогда не хотят к нему возвращаться.
Фидбек в нужных точках пользовательского пути даёт классные инсайты о проблемах и барьерах пользователя. Но если запросить его слишком рано, вы рискуете не получить вообще ничего в самый важный момент. К примеру, одна из участниц исследования, пытаясь оплатить счёт за телефон на ATT.com, была недовольна «всплывашкой», которая сразу вылезла на странице с оплатой. Она сказала: «Ок, я бы оставила фидбек после закрытия счёта, но теперь я немного раздражена, что это окно появилось ещё до того, как я вообще получила хоть какой-то опыт».
Что сделать вместо этого. Запросите у пользователя фидбек сразу после того, как он выполнил ключевое задание на вашем сайте. Такой подход не отвлекает и гарантирует, что обратная связь будет основана на актуальном взаимодействии. Например, приложение для видео-конференций BlueJeans запрашивает фидбек сразу же после звонка. Эта просьба не преждевременна, оправдана контекстом и подаётся в нужное время.
5. Прерывание важных пользовательских задач просьбой о фидбеке. Пользователи ненавидят, когда их сбивают. Но примеров сайтов и приложений, которые прерывают важные пользовательские задачи прямо на полпути предостаточно. Ребят, в большинстве случаев оставление фидбека – не главная причина, почему пользователь пришёл на сайт. Так что не надо «выкидывать» всплывающие окна в самый неподходящий для этого момент.
Что сделать вместо этого. Кроме того, чтобы спрашивать пользователей о фидбеке только после выполнения главного действия, дайте им возможность в любой момент самим оставить отзыв. Виджет сбоку экрана, ссылка в футере или в навигации – отличная альтернатива отвлекающим модальным окнам. И это ещё даёт пользователю ощущение контроля над ситуацией – если что-то пойдёт не так, они буду знать, куда писать.
6. Показ «всплывашек» одна за другой. Поп-апы, которые появляются поверх друг друга, заставляют ваш сайт выглядеть непрофессионально и неорганизованно. А ещё это расстраивает пользователей и тратит их время на закрытие каждого. Если вы используете несколько разных окон, оттестите их перед внедрением, чтобы избежать такой ситуации.
Что сделать вместо этого. Если вам важно показать важную информацию в поп-апе (например, предупреждения или сообщение об ошибке), убедитесь, что показывается только один за раз. А ещё лучше, не используйте для этого всплывающие окна, потому что люди обычно закрывают их, не читая. Вместо этого сделайте сообщение прямо на странице, визуально выделив его. Только убедитесь, что текст действительно предоставляет пользователю то, что поможет ему в этот момент решить проблему и двинуться дальше.
Контекст «всплывания»: не препятствуйте переходам или доступу к содержимому страницы
7. Модальное окно с подтверждением перехода на субдомен или новый сайт. Некоторые сайты компаний перенаправляют пользователя на контент, расположенный на субдомене или другом сайте. А прежде чем «отпустить» его с миром, показывают модальный оверлей с предупреждением о переходе. Такой тип поп-апа переоценивает перенаправлением, пользователи чувствуют себя растеряно. Особенно, если ссылка открывается в новом окне.
Во время одного из наших юзабилити-исследований участник искал вакансии на сайте HSBC. За время сессии его дважды отправляли на субдомены, и он столкнулся с двумя подобными «всплывашками». Он сказал: «Меня продолжают перенаправлять на другие сайты, я уже запутался, где я нахожусь. Если процесс отклика на вакансию такой сложный и несвязный, я, если честно, не думаю, что это хорошее место работы. Всё это напоминает кашу, и не важно, насколько хорошо выглядит сайт».
Что сделать вместо этого. Убрать модальные окна, минимизировать количество переходов и всегда сохранять возможность для пользователя вернуться на основной сайт. Если вам нужно предупредить его о переходе, используйте менее навязчивые инструменты. Например, подсказки при наведении на ссылку.
8. Блокирование содержимого страницы модальными окнами. Когда вы сразу же показываете модальный поп-ап при загрузке страницы со статьёй или каким-то другим длинным материалов (как, например, в разделах «О нас» или «Новости»), сначала может показаться, что вы предлагаете доступ к тексту в обмен на что-то. Такой контекст снижает доверие к сайту.
Что сделать вместо этого. Позвольте пользователю «употребить» контент целиком, не мешайте ему. Замените поп-ап небольшим легкоскрываемым баннером в самом верху страницы. Это своеобразное «самообслуживание» для пользователи – если захочет, он сам оставит адрес почты, нет необходимости блокировать ему всю страницу.
Содержимое «всплывания»: не думайте, что поп-ап донесёт какое-то важное сообщение
9. Использование модальных оверлеев для предупреждений об использовании cookies или политике конфиденциальности. Пользователи поспешно закрывают модальные окна, поскольку знают, что ничего хорошего они им не принесут. Так что, чтобы донести до них важную информацию, не нужно использовать поп-апы.
Что сделать вместо этого. Лучше подойдут немодальные небольшие окошки внизу или сбоку страницы. Они намного менее бесячие и позволяют пользователям продолжать выполнение задач.
10. Предложение сменить канал (например, перейти в приложение) в модальных окнах без разъяснения преимуществ такого перехода. Для e-commerce и новостных сайтов окна, предлагающие перейти в мобильное приложения, не редкость. Такие оверлеи во многих ситуациях – настоящая проблема: часто пользователи сайта заходят на него один раз в жизни. Им совершенно не нужно это приложение для выполнения обычного задания.
Понятно, почему компании хотят скачиваний своих приложений, но модальные окна для подобной рекламы не подходят. Даже пользователи, у которых установлено приложение, неохотно переходят в него, потому что боятся начать процесс заново. Модальное окно только побеспокоит их.
Что сделать вместо этого. Рассказывайте о своём приложении, но не ценой прерывания текущего задания пользователя. Подумайте над более простыми методами привлечения внимания, например, о верхнем баннере. И обязательно расскажите о преимуществах перехода в другой канал.
Заключение
Бульк, бульк – это ваши бесконечные «всплывашки». Перестаньте портить пользовательский опыт.
В качестве заключения вам, наверное, хотелось узнать, когда же допустимо использовать поп-апы. Если коротко: делайте это максимально аккуратно. Не поддавайтесь на мнение толпы и не бесите своих пользователей ради краткосрочного роста метрик. Изучайте альтернативные способы, которые уважают нужны клиентов и выполняют все необходимые вам функции: собирают фидбек и адреса почты, уведомляют пользователей о сборе их личных данных или советуют им использовать и другие каналы.
Вы всё ещё можете использовать модальные окна для показа суперважной информации, но только при крайней необходимости. Не прерывайте выполнение задач и не блокируйте содержимое страницы большим навязчивым поп-апом. Проводите юзабилити-исследования, чтобы убедиться, что ваши «всплывашки» не напрягают пользователей, а плюсом вы получите полезные инсайты по улучшению их опыта в целом.