Нравится статья?
График

Понравится и работать с нами.

Начать

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

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

Принципы мобильного юзабилити

  1. Вместо креатива – проверенные решения. Как бы ни хотелось удивить пользователя и отличиться от конкурентов, в первую очередь, делаем удобно. А для этого нет ничего лучше стандартных кнопок и схем расположения.
  2. Главное – продуманные детали. Удобные кнопки и кликабельный номер – вот то, что приводит к вам клиентов с мобильных устройств.
  3. Большинство законов юзабилити и приемов для десктопной версии сайта работают и здесь. Но к ним добавляются и новые, связанные с малым размером экрана, вертикальной ориентацией и ограничениями по скорости интернета – их мы и разберем далее.

Как адаптировать основные элементы сайта под экран смартфона

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

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

  1. Вместо полного меню каталога – кнопка-«гамбургер». Она выглядит, как 3 горизонтальные полоски в верхнем углу экрана и позволяет быстро открывать или прятать список разделов.

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

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

  1. Закрепленные элементы.Телефон, ссылки на мессенджеры, корзину, «гамбургер» можно закрепить в верхней части экрана, чтобы они оставались под рукой при прокрутке. Только во время теста юзабилити обязательно проверьте, не занимают ли эти элементы слишком много места.
  2. «Аккордеоны»(разделы, которые разворачиваются и сворачиваются касанием). Советуем помещать в них, например, условия доставки, подробную информацию о товарах и всё, на чем можно сэкономить место.

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

Для удобства пользователя можно оформить номер в виде кнопки – как это сделано на сайте клиники.

Как еще улучшить мобильное юзабилити

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

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

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

Например, на сайте клиники список услуг может быть оформлен в виде такой таблицы.
  • Удобные способы оплаты прямо со смартфона. Стараемся избавить покупателя от необходимости вводить данные вручную и предлагаем альтернативу: сохраненные карты, Яндекс.Деньги, PayPal и другие варианты.
Мы знаем, как сильно удобство сайта на мобильных влияет на успех SEO-продвижения, контекстной рекламы и других способов заявить о вашем бизнесе. Поэтому в любой тариф на продвижение сайтов в «Эврике» включена стоимость аудита юзабилити. Мы проанализируем доступность и удобство вашего сайта для пользователей с любого устройства, и если нужно – поработаем с мобильной адаптацией.
Продвижение сайтов в "Эврике"
Технологии, кейсы, стоимость
Поделитесь с друзьями
Комментарии (0)
    Оставьте комментарий
    Подписаться
    Отзывы клиентов
    • Клиника Горбакова
      Многопрофильная клиника
      Результатами мы довольны

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

      Читать полностью
    • Весело деткам
      Агентство детских праздников
      Вышли в лидеры отрасли

      Сайт находится в ТОП-10 Яндекса по основным профильным поисковым запросам. В том, что наша компания получила почетное звание "Лидер отрасли 2017" в области зрелищных мероприятий, есть и заслуга наших высокопрофессиональных партнеров.

      Читать полностью
    • Senior Group
      Сеть пансионов для пожилых
      Группа компаний Senior Group благодарит

      рекламное агентство "Эврика" за ведение эффективных рекламных кампаний в Google Adwords, Яндекс.Директ и социальных сетях, а также ведение интернет-сайта www.seniorgroup.ru.

      Читать полностью
    • Замки Тут
      Магазин фурнитуры
      Вложения полностью окупаются

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

      Читать полностью
    • Спорт(+)Мода
      Спортивная одежда премиум-класса
      Сотрудничаем с 2012 года

      К февралю 2013 более 70% запросов было в ТОП-10. Совместная работа в 2013 году привела к значительному росту посещаемости. В декабре 2014 года сайт посетило 48 000 человек. Благодарны компании "Эврика" за оперативное внесение необходимых изменений и профессиональные консультации. Рекомендуем компанию "Эврика" как надежного и интересного партнера.

      Читать полностью
    Оставьте заявку
    Нажимая на кнопку Отправить, я даю согласие на обработку персональных данных
    Или просто
    Позвоните
    Напишите
    sales@aevrika.ru
    Приезжайте

    Москва, ул. Народного Ополчения, д. 34, стр. 1