Как улучшить мобильный UX: 11 эффективных стратегий

Почему вы должны сосредоточиться на мобильных пользователях

У вас есть мобильный сайт, не так ли? Вы обновляете его соответствующим контентом и следуете последним рекомендациям по SEO? Конечно, вы делаете! И я уверен, что это обеспечивает отличный пользовательский интерфейс на вашем настольном компьютере или ноутбуке.

Но конвертирует ли он на мобильных устройствах? Поскольку использование мобильного интернета за последние годы резко возросло, ваш мобильный пользовательский опыт (или мобильный UX) должен привлекать столько же внимания, сколько и пользовательский опыт вашего настольного веб-сайта.

В 2022 году до 70 процентов веб-трафика будет приходиться на мобильные устройства — TECHJURY

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

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

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

Как улучшить мобильный UX

1. Используйте дизайн, основанный на задачах

Вопрос: Какова основная причина, по которой пользователи посещают ваш сайт?

Разработайте свой мобильный веб-сайт и его структуру с учетом потребностей пользователя, не забывая при этом о мобильной SEO. Ваш посетитель использует свой мобильный телефон. Может быть, они куда-то едут и им нужно что-то проверить на вашем сайте. Что это может быть? Подумайте немного о том, что посетители делают на вашем веб-сайте (проверьте Google Analytics, руководствуйтесь здравым смыслом в отношении вашего бизнеса или проведите надлежащее тестирование). Затем определитесь с основными задачами для вашего мобильного сайта.

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

Основная цель вашего веб-сайта — помочь посетителям добиться цели. Если кто-то найдет ваш веб-сайт и начнет его просматривать, убедитесь, что он может легко найти и выполнить то, что ему нужно. Вероятно, на их мобильном телефоне есть множество приложений, к которым они привыкли. Использование мобильного устройства может затруднить сосредоточение внимания пользователя. Отвлечения есть везде, не только в телефоне. Разработайте свой мобильный UX, чтобы они выполняли свои задачи, прежде чем переключаться на другие приложения.

2. Будьте проще

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

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

Тонирование также касается ваших анимаций и других микровзаимодействий. Каждый несущественный фрагмент JavaScript, который вы добавляете на свой сайт, усложняет его загрузку и работу. Кроме того, анимация не всегда имеет смысл на мобильном сайте. Так что держите свой сайт стройным и подлым!

3. Оптимизируйте скорость

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

Скорость сайта также является горячей темой в Google. В 2021 году поисковая система анонсировала новый набор показателей под названием Core Web Vitals. Эти показатели дают Google представление о новом факторе ранжирования: Page Experience. В 2022 году пользователи будут судить о мобильных сайтах по тому опыту, который они предлагают пользователям. И, как вы уже догадались, скорость сайта является одним из таких факторов.

Одна из самых простых и эффективных вещей, которые вы можете сделать, — это оптимизировать изображения для SEO и взаимодействия с пользователем. Есть несколько инструментов, которые помогут вам в этом. Мне нравится Imagify, но Smush и Short Pixel — жизнеспособные альтернативы.

Кроме того, вы должны комбинировать и минимизировать загруженные файлы CSS и JavaScript. Чем меньше подключений к серверу требуется, тем быстрее будет работать ваш веб-сайт и лучше работать с мобильными пользователями. Однако этот шаг может сломать ваш сайт, и вам следует довериться профессиональному веб-дизайнеру.

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

4. Используйте кликабельные кнопки

Это настолько очевидно, но все же вызывает беспокойство. Посетители просматривают мобильные веб-сайты, используя пальцы и большие пальцы, а кнопки не всегда обеспечивают достаточно места для быстрого нажатия. Вы можете найти это в разделе Accessible Tap Targets в документации для разработчиков Google. И нам нужно иметь возможность щелкать элементы этим большим пальцем.

В этой статье Google, указанной выше, вы можете найти числа для этой цели касания:

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

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

5. Сосредоточьтесь на мобильной зоне большого пальца

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

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

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

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

6. Добавьте простое меню и опцию поиска

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

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

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

7. Используйте визуальные разделители

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

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

8. Используйте короткие формы

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

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

• Новостная рассылка? Просто адрес электронной почты (с полем ввода <input type="email">).
• Цитировать? Фамилия и адрес электронной почты.
• Магазин? Доставка, счет-фактура и адрес электронной почты. Бонусные баллы за возможность скопировать адрес доставки в адрес счета.

Однако убедитесь, что вы следуете рекомендациям GDPR!

9. Ограничьте размер шрифта

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

1. Размер мобильного экрана. Вы не хотите, чтобы заголовок заполнил экран; вы хотите убедиться, что статья начинается с первого просмотра страницы. Вы также не хотите, чтобы базовый шрифт (например, шрифт вашего абзаца) был слишком маленьким, чтобы его можно было прочитать без необходимости сжимать и масштабировать.
2. Мобильный UX страдает при использовании более трех размеров шрифта. Разница в размерах будет намного заметнее. Вы должны ограничить количество размеров шрифта двумя, может быть, тремя.

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

10. Ограничьте рекламу и всплывающие окна

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

Кроме того, делайте рекламу стильной и ненавязчивой. Вы стремитесь наладить связь и установить отношения с пользователем, а этого не происходит, когда вы кричите «КУПИТЕ МОЙ МАТЕРИАЛ СЕЙЧАС» перед его лицом, как только он заходит на ваш мобильный сайт. Чрезмерно агрессивная реклама создает плохой пользовательский опыт.

11. Проверьте свой мобильный UX. Повторить!

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

Преимущества улучшения мобильного UX

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

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

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

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

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

Вы не знаете, как улучшить мобильный UX?

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

Вы хотите улучшить мобильный UX для своего присутствия в Интернете? Наша команда профессиональных дизайнеров будет рада помочь вам в этом. Но сначала посмотрите наше портфолио и прочитайте наши кейсы.

Тогда, если вы считаете, что мы хорошо подходим для ваших потребностей в мобильном дизайне, давайте поговорим! Мы предлагаем полный спектр консалтинговых и дизайнерских решений для бизнеса и товарных брендов.

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

Улучшили ли вы мобильный UX на своем веб-сайте?

Вы пробовали какие-либо из моих предложений по улучшению мобильного UX? Какие из них вы пробовали и каких результатов достигли? Есть ли у вас какие-либо другие советы или идеи о том, как улучшить мобильный UX?

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

Благодарю вас! Мы ценим вашу помощь в борьбе с плохими бизнес-сайтами, по одному пикселю за раз!

Грегор Сайта
Соучредитель / главный исполнительный директор
@gregorsaita