Добрый день. Я занимаюсь web-разработкой и почти всем, что с этим связано.

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

Одной из вещей, затрудняющих использование сайтов на мобильных устройствах, являются модальные окна. На мониторах настольных компьютеров никаких проблем с модальными окнами нет ввиду большого размера экрана. Но на мобильных устройствах модальные окна зачастую отображаются не полностью, так как размер экранов мобильных устройств гораздо меньше, чем у настольных компьютеров. В таких случаях затрудняется восприятие информации, расположенной внутри модального окна, так как для её обзора необходимо прокручивать страницу как вертикально, так и горизонтально. Хуже обстоят дела, если пользователю необходимо вводить текст в текстовом поле с помощью клавиатуры, ведь затруднён просмотр введённого текста.

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

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

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

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

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

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

Комментарии