Как улучшить дизайн мобильной версии сайта

Советы по улучшению юзабилити мобильной версии сайта
22.10.2017 КОММЕНТАРИИ: 0

По состоянию на февраль 2017 года почти 50% веб-страниц в мире просматривалось с экранов мобильных устройств. И этот показатель неуклонно растёт. По прогнозам экспертов, к концу 2020 года глобальный мобильный трафик увеличится в 7 раз. В России, согласно результатам исследования Яндекса, ещё в 2015 году насчитывалось свыше 50 млн мобильных пользователей. Смартфоны и планшеты оказались невероятно удобными устройствами для поиска информации и совершения покупок в интернете. Казалось бы, владельцам бизнеса достаточно создать адаптивный сайт — и заявки рекой потекут. Ан нет, современным мобильным пользователям не так-то просто угодить… Удобство взаимодействия с сайтом для них заключается в первую очередь в бесшовной навигации.

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

  1. Упростите меню

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

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

Сократите количество пунктов в мобильном меню

  1. Не заставляйте людей печатать

Толстые пальцы, крошечная клавиатура и досада от того, что нужно вбивать СТОЛЬКО информации. Такое положение кого хочешь выведет из равновесия. К сожалению, никто из мобильных посетителей не догадывается перевернуть экран набок и печатать в ландшафтном режиме. По статистике, 90% пользователей во время набора текста продолжают держать телефон вертикально. Так что без подсказок и автозаполнения никак не обойтись. Везде, где это возможно, используйте выпадающее меню.

Используйте выпадающие списки в формах на сайте и в приложении

Снизить процент ручного ввода текста также помогут следующие функции:

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

Используйте функцию запоминания логина и пароля

  1. Не изощряйтесь с иконками

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

  • масштабируются без потери качества;
  • легко добавляются и настраиваются;
  • на 100% адаптивны;
  • полностью соответствуют требованиям кросс-браузерности;
  • одинаково удобны для сенсорного управления и управления с помощью мыши.

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

Используйте общепонятные иконки

Также будьте аккуратны при использовании сердечек и звёздочек. Их смысл можно трактовать по-разному. Если из контекста непонятно значение пиктограммы, если существует риск двоякого прочтения, лучше отказаться от её использования вообще или подписать.

Подписывайте непонятные иконки

  1. Будьте точны и лаконичны

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

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

Подписывайте кнопки навигации кратко, чётко и понятно

  1. Не забывайте о возможности фильтрации

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

Рассмотрите возможность использования фильтров в мобильной версии интернет-магазина

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

  1. Оптимизируйте сайт под мобильный поиск

По сообщению Google, 9 из 10 пользователей смартфонов приходят на сайт из мобильного поиска. И примерно половина из них совершает покупки! Одной этой статистики достаточно, чтобы оценить важность присутствия сайта вверху мобильной выдачи Яндекса и Google. Оптимизируя сайт под поиск на смартфонах и планшетах, необходимо учитывать следующие аспекты:

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

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

Подводя итоги

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

 

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


Защитный код
Обновить