Один и тот же сценарий можно реализовать двумя способами: показать всплывающее окно поверх страницы или увести человека на отдельный экран. Решение кажется мелким, но оно влияет на удобство, на работу кнопки «назад», на возможность поделиться ссылкой и на то, попадёт ли содержимое в поисковую выдачу. Ниже — как мы такой выбор делаем.
Когда что уместно
Когда уместно модальное окно
- Действие короткое и завершается за один-два шага: заказ звонка, подтверждение удаления, выбор города.
- Важно не терять контекст: увеличить фотографию товара, посмотреть характеристики, не уходя из списка.
- Содержимое второстепенное и не должно иметь собственного адреса.
- Человек должен вернуться ровно туда, откуда пришёл, с тем же положением прокрутки и теми же фильтрами.
Когда нужна отдельная страница
- Шагов много: оформление заказа, длинная анкета, загрузка документов.
- На содержимое нужно ссылаться: карточка товара, статья, услуга, вакансия.
- Содержимое должно находиться в поиске.
- К заполнению нужно вернуться позже и продолжить с того же места.
- Внутри есть сложные элементы: карты, таблицы, календари, вложенные списки.
Сравнение по существенным признакам
| Признак | Модальное окно | Отдельная страница |
|---|---|---|
| Кнопка «назад» в браузере | Закроет окно, только если это отдельно предусмотрели | Работает сама собой |
| Ссылка на состояние | Обычно нет | Есть |
| Индексация в поиске | Нет | Да |
| Поведение на телефоне | Часто тесно, клавиатура перекрывает поля | Полный экран, привычная прокрутка |
| Потеря контекста | Минимальная | Есть, нужны хлебные крошки и возврат |
| Аналитика | Нужны отдельные события | Считается как просмотр страницы |
| Сложность разработки | Выше: фокус, прокрутка, состояния | Ниже: обычная страница |
| Сохранение черновика | Требует отдельного решения | Естественно ложится на адрес шага |
Если всё-таки окно
Всплывающее окно — не просто блок поверх страницы. Чтобы оно не превратилось в ловушку, особенно для тех, кто работает с клавиатуры или пользуется программой чтения с экрана, нужен обязательный набор поведения.
- Закрытие по клавише Escape и по клику вне окна.
- Видимая кнопка закрытия, достаточно крупная для пальца.
- Перевод фокуса внутрь окна при открытии и возврат на кнопку, которая его открыла, после закрытия.
- Удержание фокуса внутри окна, пока оно открыто: клавиша перехода не должна уводить на страницу под ним.
- Блокировка прокрутки страницы под окном и обязательная прокрутка внутри самого окна на маленьких экранах.
- Заголовок окна, связанный с ним программно, чтобы он озвучивался при открытии.
- Понятная реакция на потерю данных: если человек начал заполнять форму, случайное закрытие не должно стирать введённое без предупреждения.
Отдельно стоит договориться о вложенности. Окно, открывающее второе окно, почти всегда признак того, что сценарию нужна страница.
Мобильный случай
На телефоне разница между окном и страницей почти стирается: окно и так занимает почти весь экран. Добавляется несколько неприятностей: всплывающая клавиатура перекрывает поля, внутренняя прокрутка конфликтует с прокруткой страницы, а закрытие по клику мимо окна срабатывает случайно.
Поэтому на узких экранах мы часто показываем полноэкранный вариант с обычной шапкой и кнопкой «назад». Это привычнее и надёжнее, чем маленькое окно с полями ввода под всплывающей клавиатурой. Компромиссный вариант — панель, выезжающая снизу: она закрывается жестом вниз и не требует точного попадания по крестику.
Промежуточные варианты
- Раскрытие на месте. Блок разворачивается прямо в списке. Подходит для дополнительных сведений, не требующих действий.
- Боковая панель. Хороша для просмотра деталей рядом со списком: можно быстро переключаться между записями.
- Окно с собственным адресом. Открывается поверх, но меняет адрес и работает с кнопкой «назад». Требует больше кода, зато сохраняет и контекст, и возможность поделиться ссылкой.
- Отдельная страница с возвратом. Полноценный экран, который помнит, откуда пришёл человек, и возвращает его в то же место списка.
Разбор типовых сценариев
Ниже несколько ситуаций, которые встречаются почти в каждом проекте, и решения, к которым мы обычно приходим.
- Заказ обратного звонка. Окно. Два поля, одно действие, возвращаться к нему не нужно.
- Оформление заказа. Страница или несколько страниц. Много данных, возможны прерывания, нужно уметь вернуться.
- Быстрый просмотр товара из списка. Окно или боковая панель, но с обязательной ссылкой на полную карточку: она и индексируется, и нужна для отправки другу.
- Фильтры каталога на телефоне. Полноэкранная панель с кнопкой применения. Мелкое окно здесь неудобно, а страница ломает контекст списка.
- Вход и регистрация. Спорный случай. Окно удобно, когда человек прервался посреди действия; страница нужна, если на вход часто приходят по ссылке из письма.
- Подтверждение удаления. Окно, всегда. Дополнительно даём возможность отменить действие после выполнения, а не только предупреждаем до него.
- Просмотр документа или счёта. Страница: на неё ссылаются, её пересылают, к ней возвращаются.
Как это влияет на поиск
Содержимое, доступное только по нажатию и не имеющее собственного адреса, поисковые системы не покажут отдельным результатом. Если по теме есть спрос, такой сценарий должен быть страницей. Типичный случай — описание услуги, которое дизайнер спрятал во всплывающее окно ради компактности главной: страница теряет возможность приводить людей из поиска.
Обратная ситуация тоже встречается: десятки страниц с почти одинаковым содержанием, созданные там, где хватило бы окна. Это создаёт мусор в индексе и размывает вес по сайту.
Простое правило
Если человек может захотеть отправить ссылку на то, что видит, — это страница. Если содержимое существует только как дополнение к текущему экрану и закрывается за секунду — это окно. Всё остальное решается количеством шагов: больше двух шагов и обязательных полей почти всегда означают страницу.
Ещё одна проверка: представьте, что человек обновил вкладку. Если после обновления он должен остаться там же — нужен адрес, а значит, страница или окно с адресом. Если возврат в исходный список ожидаем и не раздражает — окно подходит.
Если нужно разобрать сценарии целиком
Такие решения удобнее принимать не по одному, а на карте всех сценариев сразу: тогда видно, где сайт теряет людей и где теряет поисковый трафик. Мы спроектируем интерфейс и разложим сценарии по экранам, чтобы каждое действие оказалось там, где ему место. Напишите нам, посмотрим ваш проект.
