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

Представляю вашему вниманию перевод недавно вышедшей статьи «Modals on Mobile: How to use them wisely» автора Chris Wigley (UXmagazine).

Img

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

С определенного времени модальные окна стали неотъемлемой частью веб-дизайна. Мы уже привыкли к тому, что модальные окна выскакивают везде, включая мобильные устройства. Учитывая их распространенность, можно подумать, что мы в совершенстве освоили дизайн и использование модальных окон на мобильных, чтобы они не ухудшали пользовательский опыт. Если модальные окна становятся привычным элементом, то они должны быть максимально легкими в использовании, понятными и легко закрываемыми. Но почему это не так?

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

Стратегия выхода из модального окна

Если говорить о стратегии и расположении выхода из модального окна, то мобильные модальные окна противоречат всему, что мы знаем о потреблении контента пользователями. На основании наблюдений и анализа поведения пользователей, сделанных достаточно умными людьми (например Luke Wroblewski), было выявлено, что пользователи обычно держат телефон в одной руке, используя большой палец как основной инструмент навигации. Дизайн большинства телефонов и приложений действительно отражает использование большого пальца правой руки.

Однако, кнопка «Закрыть» обычно размещена в правом верхнем углу, что заставляет пользователей перевести внимание обратно к верхней части экрана, чтобы закрыть окно. Используя одну руку, тяжело дотянуться большим пальцем до правого верхнего угла экрана. У меня большие руки, но даже мне сложно это сделать. Забудьте о левшах; это движение не интуитивно и не идеально, только если вы не читаете контент снизу вверх.

Расположение кнопки «Закрыть» в правом верхнем углу также может вызвать ужасное случайное обновление (когда я случайно нажимаю кнопку «Обновить» вместо «Закрыть» из-за того, что они обе такие маленькие и в Safari они размещены рядом друг с другом*).

Такое расположение кнопки «Закрыть» также неудобно при использовании на планшетах. Хотя экран и кнопки там крупнее, возвращать глаза обратно к верхней части окна, чтобы продолжить чтение, здесь тоже неестественно.

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

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

«Не знаешь, куда поместить? Засунь в модальное окно»

Это подводит меня к глубинной и более опасной проблеме: в какой-то момент модальные окна перестали быть элементом для подтверждения действий, став pop-up’ами, служащими свалкой для контента, который не вписывается в другое место на странице. Слишком часто использование модальных окон становится уловкой, чтобы не думать о том, куда поместить контент. В некоторых случаях они отражают недальновидность и легкомыслие разработчиков, которые воспринимают окна как источник нового места — это наиболее простое решение. В других случаях добавление в последний момент новых элементов вместе с недостатком технических навыков или ресурсов для редактирования или сокращения имеющегося на странице контента могут быть основными мотивами для создания модального окна.

Бренд-менеджеры, контент-менеджеры и разработчики — неважно кто, все они должны больше задумываться о том, когда использовать модальные окна, а когда — нет.

Модальные окна хорошо подходят для того, чтобы показывать пользователям новую информацию на той же странице, где они сейчас находятся, без необходимости загрузки новой страницы и использования обычных pop-up’ов.

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

Модальные окна должны использоваться только для следующих целей:

  • Прерывание: заставить пользователя принять решение или завершить задачу в важной части их рабочего процесса. Спросите себя: «Действительно ли я хочу прервать пользователя?»
  • Обратная связь или исправление: подтверждение действия. Например: диалоговое окно «Вы уверены?».
  • Глубокое погружение: фокусирование пользователя на одном элементе, будь то изображение, статья или видео.

Хорошо продуманный контент и расположение модального окна гарантируют интуитивное и ожидаемое путешествие пользователя по вашему сайту. Это также поможет нам избавиться от постоянной «бомбардировки» модальными окнами, которые особенно «разрушительны» на мобильных устройствах.

Сохраните модальные окна!

Модальные окна никуда не исчезают, и, хотя они и могут быть полезны, на мобильных сайтах их нужно использовать более сдержанно. Модальные окна — это очень целевой UX-инструмент, и ответственность за их обдуманное использование в основном лежит на плечах UX-дизайнеров. Если вы убеждены, что используете модальное окно в нужном случае, держите в голове следующие советы по дизайну:

  • Используйте рекомендации по расположению «целей касания» основываясь на принципах эргономики и распространенных пользовательских сценариях.
  • Перепроверьте и обоснуйте использование каждого модального окна. Оно здесь уместно? Если да, верно ли оно отображается на всех устройствах?
  • Избегайте прокрутки в модальных окнах.
  • Разместите кнопку «Закрыть» в нижней правой части экрана. При этом она будет перекрывать контент, но это будет контент, который вы ещё не прочитали, а когда вы прокрутите вверх, она не перекроет или помешает восприятию контента, который вы сейчас читаете.
  • Следуйте отраслевым стандартам в вопросе размера кнопок. Крошечные кнопки чертовски разочаровывают.
  • Спроектируйте кнопку «Закрыть» в модальном окне так, чтобы при наведении на неё на десктопе, она изменялась с кружка «X» на полноценную кнопку в форме капсулы с надписью «Закрыть окно». Это сделает закрытие модального окна более логичным в контексте взаимодействия.
  • Используйте «джина» (или другой эффект) для отображения и скрытия модальных элементов, чтобы предоставить контекстное понимание, откуда появилось окно. Так пользователь будет видеть, где он находится на сайте.

Оригинал: Modals on Mobile: How to use them wisely


* — в оригинале статьи используется понятие «эффекта толстого пальца», когда человек случайно нажимает несколько близко расположенных элементов на экране телефона из-за толщины своего пальца.

Реклама

Добавить комментарий

Заполните поля или щелкните по значку, чтобы оставить свой комментарий:

Логотип WordPress.com

Для комментария используется ваша учётная запись WordPress.com. Выход / Изменить )

Фотография Twitter

Для комментария используется ваша учётная запись Twitter. Выход / Изменить )

Фотография Facebook

Для комментария используется ваша учётная запись Facebook. Выход / Изменить )

Google+ photo

Для комментария используется ваша учётная запись Google+. Выход / Изменить )

Connecting to %s