За обновлениями можно следить в telegram-канале https://t.me/quasiart

Проблема

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

Затрудняется восприятие информации, расположенной внутри модального окна, так как зачастую для её обзора необходимо прокручивать страницу вертикально, а в худшем случае и горизонтально. Если пользователю необходимо ввести текст в текстовом поле, то клавиатура займёт большую часть пространства.

Клавиатура на мобильном устройстве занимает много места

Решение

Вместо модального окна предлагайте пользователям мобильных устройств аккордеон (accordion).

Аккордеон отображает своё содержимое внутри страницы, не перекрывая другие её элементы. Такой подход сразу отбрасывает различные проблемы, связанные с позиционированием элементов и прокруткой. Также пользователи не потеряют контекст, так как встроенный аккордеон не препятствует взаимодействию с другими элементами страницы; в то время как модальное окно зачастую перекрывает содержимое страницы, делая невозможным, например, скопировать текст страницы.

Модальное окно на мобильном устройстве

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

Важно дать пользователю понять, что появление аккордеона связано с нажатием кнопки: заголовок блока должно хотя бы примерно совпадать с текстом кнопки. Также рекомендуется дать пользователю возможность скрыть аккордеон обратно, добавив кнопку закрытия вверху, что аналогично закрытию модального окна.

Выполнение данной рекомендации сделает использование сайта более комфортным.