5 советов по мобильному UX, которым должен следовать каждый дизайнер

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

Как правило, эти проблемы решаются после запуска сайта, когда в отчетах Google Search Console об удобстве использования мобильных устройств начинают появляться ошибки. Хотя команды разработчиков часто могут устранять такие ошибки, для дизайнеров гораздо эффективнее понимать и внедрять передовые методы мобильного UX с самого начала.

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

Сосредоточьтесь на расстоянии между элементами дизайна

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

Распространенная ошибка мобильного юзабилити в Google Search Console заключается в том, что «кликабельные элементы расположены слишком близко друг к другу».

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

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

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

Следовательно, вам нужно спроектировать достаточное пространство между кнопками и элементами, чтобы у посетителя не было неприятного мобильного опыта.

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

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

Обеспечьте удобочитаемость текста и шрифта

Помимо пробелов, еще одной распространенной ошибкой мобильного использования в отчетах Google Search Console является «текст слишком мал для чтения». Несмотря на то, что разработчик может настроить некоторые аспекты размера шрифта, есть несколько лучших практик UX, которые дизайнеры могут внедрить с самого начала с точки зрения удобочитаемости.

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

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

В своих проектах вы также можете увеличить высоту строки между строками текста, чтобы повысить читабельность страницы.

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

Поскольку посетители могут находиться в помещении или на улице или при плохом освещении, важно соблюдать стандарты контраста между цветами фона и переднего плана.

Это также играет роль в доступности и создании веб-сайта, совместимого с ADA. Согласно стандартам WCAG 2.1, рекомендуется коэффициент контрастности не менее 4,5:1 для обычного текста и 3:1 для крупного текста.

Убедитесь, что наведение курсора и анимация соответствуют рекомендациям.

Сегодня большинство веб-дизайнов включают некоторые микроанимации и интерактивные компоненты; это распространенный запрос от клиентов в процессе редизайна.

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

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

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

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

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

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

Планируйте размещение всплывающих окон и сторонних элементов

Всегда было много споров о том, использовать ли всплывающие формы на веб-сайтах и ​​реализовывать ли их на мобильных устройствах.

Одним из аргументов в пользу того, чтобы избегать всплывающих форм на мобильных устройствах, является то, что посетителю может быть сложнее закрыть форму или сообщение. С января 2017 года Google предостерегает от использования навязчивых межстраничных объявлений, которые блокируют весь контент на странице от просмотра посетителем, поскольку они особенно проблематичны на мобильных устройствах.

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

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

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

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

Пересмотрите дизайн и размещение формы

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

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

При разработке всех форм на сайте рекомендуется как для настольных, так и для мобильных устройств максимально сократить количество полей формы и четко указать, какое поле является обязательным.

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

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

Вывод

Учитывая повышенное внимание к производительности мобильных устройств, применение некоторых из вышеперечисленных идей на практике при разработке проектов сэкономит вам время и нервы при запуске этих проектов. Есть ли дополнительные советы по мобильному UX, которые помогли вашему дизайну? Оставьте комментарий ниже!

Далее: Развивайте свои навыки веб-дизайна с помощью полезных онлайн-курсов!

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

Эта статья предлагает исчерпывающий список некоторых из лучших онлайн-курсов для веб-дизайнеров (+ сколько они стоят), так что вам не придется тратить еще больше времени на поиск всех доступных вариантов!