Несколько лет назад я работал над веб-проектом, насыщенным всплывающими окнами (попапами). После этого опыта я собрал список идей для тестирования попап оверлеев или модальных окон.

Прекрасный пример попап оверлея (модального окна)

1. Обратите внимание на расположение закрывающего крестика X (X close)

(Задается при проектировании). Если крестик X close находится вне всплывающей (попап) области — это 100% идентификатор полного закрытия попапа. Однако в редких случаях, располагаясь внутри попапа, он может закрывать интерактивный контент в нем (конечно, лучше избегать такого UX). Главное — убедиться, что закрыть попап (модальное окно) легко и очевидно.

1. Внешний крестик X close — OK

2. Внутренний крестик X close — OK

3. Здесь не очевидно. Закрывает ли крестик X close интерактивный контент или весь попап?

2. Закрывайте попап разными способами

• Крестик X close;

• Клавиша [ESC];

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

3. Прокрутка внутри попапа

(Задается при проектировании и определяется количеством контента). Весь контент должен помещаться в область попапа или быть доступным для просмотра. Существует несколько распространенных ошибок, связанных с этим случаем:

• Контент выпадает из области попапа;

• Контент не прокручивается внутри попапа.

4. Ошибка: текст выпадает из области попапа

5. Ошибка: текст обрезается и нет возможности его прокрутить

4. Максимальная прокрутка до самого низа

Оверлей или "вуаль" не должны отрываться от экрана.

6. Ошибка: оверлей не был зафиксирован

5. Фоновая прокрутка за оверлеем

(Задается при проектировании). Несмотря на то, что возможность прокрутки устанавливается при разработке, предпочтительнее заблокировать прокрутку фона во время открытого попапа, поскольку это может предотвратить возможные проблемы после его закрытия.

6. Полоса прокрутки браузера во время открытия попапа

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

Анимация:  7. Ошибка: подергивающийся контент

7. Открытый попап с подключенной мышью и без нее

Подключенное устройство (мышь) влияет на отображение полосы прокрутки!

8. Открытие попапа из разных частей страницы

В некоторых случаях открытие попапа из нижней части страницы может привести к прокрутке всей страницы до верха на заднем фоне.

9. Обращайте внимание на место открытия/закрытия попапа на странице

Область просмотра главной страницы не должна меняться после открытия/закрытия попапа.

10. Содержимое всплывающего окна должно быть идемпотентным

(Идемпотентность задается в документации). В идеальном мире повторяющиеся операции "открыть > закрыть > открыть" должны приводить к одному и тому же результату.

11. Попробуйте поискать что-нибудь на странице

Браузер будет искать все на странице (внутри попапа и под оверлеем), и оверлей с попапом не должен разрушаться, если что-то было найдено на заднем фоне.

8. CTRL+F выделяет найденные ключевые слова

12. Несколько всплывающих окон на странице одновременно

(Приоритет устанавливается в документации). Если несколько попапов могут быть открыты одновременно, этот случай должен быть протестирован. Приоритет отображения обычно задается z-index, и это очень хрупкая деталь.

9. Ошибка: небольшие попапы перекрывают основные 

13. Выпадающие меню с попапом

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

10. Ошибка: выпадающий список накладывается на попап

14. Открыть попап по прямой ссылке

(Задается при проектировании или определяется в документации). Наиболее распространенные способы открытия попапа по прямой ссылке, с которыми вы можете столкнуться:

• Путь: http://foo.bar/pop-up

• Строка запроса: http://foo.bar/xyzzy?pop-up=true

• 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», будет много полезной информации для тех, кто начинает свой путь в сфере тестирования. Регистрация по ссылке.