Привет, я Михаил.
Работаю веб-разработчиком и занимаюсь интернет-проектами: от сайтов и интерфейсов до систем автоматизации.
Отправить мне сообщение

Избегайте модальных окон на мобильных устройствах

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

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

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

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

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

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

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

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