Академия интернет-маркетинга
№1
 
Модальное окно

Несколько требований к юзабилити мобильного сайта

Вы постоянно видите, что конверсия со смартфонов и планшетов у вас значительно ниже, чем с ПК? А также не растет вовлечение и лояльность мобильных клиентов? Самое время проверить свой сайт на наличие типовых ошибок в его мобильной версии.

  1. 5
  2. 4
  3. 3
  4. 2
  5. 1
(1 голос, в среднем: 5 из 5)

Автор статьи, эксперт businesability
Сергей Немеров

 
работает и пишет для AskUsers

 

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

 

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

 

Быть готовым

 

Прежде всего, у современного сайта должна БЫТЬ мобильная версия, или, что еще лучше, — адаптивный дизайн сайта должен сразу идеально подстраиваться под различные типы устройств. Адаптивность вашего дизайна — это не только растягивание или сжимание размера картинок и шрифтов, но множество других вещей:

  1. Сокрытие в мобильной версии второстепенных “тяжелых” блоков на страницах, подгрузка нового контента более частыми, но мелкими порциями,
  2. Отказ от слишком сложных скриптов или онлайн-калькуляторов на вашем сайте,
  3. Перестановка блоков местами для более корректного отображения при вертикальном просмотре на смартфоне,
  4. И многое многое другое, о чем более подробно вы сможете прочесть в данной статье

мобильный вариант сайта

 

Человеческие руки

 

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

 

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

 

как рассчитывать карту юзабилити

 

Размеры

 

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

 

удобный сайт

 

Отступы

 

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

 

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

 

важно, чтобы строки не сливались

 

Без клавиатуры хорошо!

 

Сегодня мобильные пользователи в большинстве своем крайне не любят лишний раз пользоваться виртуальной клавиатурой на телефоне. Поэтому вам стоит задуматься: “А сможете ли вы где-либо заменить стандартное поле ввода информации на более удобный элемент интерфейса? Например на так называемые ползунки?”

 

ползунки

 

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

 

Минимум форматов и переходов

 

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

 

Скорость загрузки

 

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

 

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

 

плоский дизайн

 

Сторонние решения

 

Задумайтесь, удобно ли будет клиенту с недорогим смартфоном в руке пользоваться вашим онлайн-чатом или каждые 2 минуты закрывать выскакивающие на него окна с предложением перезвонить в течении 20 секунд? Конечно же нет, но он будет вынужден это делать, если вы не оставили ему выбора и более удобных инструментов взаимодействия. Или, что еще вероятне, покинет такой сайт, код которого чрезмерно напичкан сторонними продающими решениями, более пригодными для ПК-версии.

 

чрезмерно пестрый сайт

 

Сначала — мобильные!

 

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

 

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

 

сначала мобильные

 

Как же быть?

 

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

 

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

Ната Заяц

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

Если Вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Поделитесь этим материалом с вашими друзьями в социальных сетях:

 

Подпишись на обновления блога

Поделитесь вашим мнением. Оставьте комментарий!

Подпишись на обновления блога

  • Новое видео

  • Популярное

  • Комментарии

  • 301 редирект Adsense alt API B2B B2C Call tracking Click CMS CPA CPC CPI CPO CRM CSS CTR DMOZ E-commerce email-маркетинг Facebook Google Google Adsense Google Adwords Google Analytics Google Panda Google Tag Manager Google Trends Instagram KeyCollector KPI Landing page PageRank PPC Rambler Robots.txt ROI Rookie RTB SaaS Sape SEM Seopult serm SERP Sitemap SMO Title Twitter URL Usability UTM-метка Webmasters Whois XML Xrumer Yahoo YML YouTube АГС Алгоритм Анкоры Аудит сайта Ключевые слова Конверсия Контент Микроразметка Медийная реклама Метатеги Оптимизация сайта Оффер Парсинг Партнерская программа Перелинковка Поддомен Поисковая система Баннерная реклама ВКонтакте Видео-реклама Виральность Вирусный маркетинг Воронка продаж Геотаргетинг Донор ссылок Емейл Индекс Индексация Интернет-магазин Интернет-маркетинг Лидогенерация Линкбилдинг Лендинг РСЯ Ремаркетинг Редирект Рекламная кампания Релевантность Ретаргетинг Рунет ТИЦ Тизерная реклама Спам Таргетинг Таргетированная реклама Сниппет Социальная сеть Трафик Ссылки маркетинговый анализ Фильтр Целевая аудитория ЧПУ инструменты для маркетолога клиенты контекстная реклама контент-маркетинг креатив планирование подборки Яндекс Яндекс.Каталог Яндекс.Метрика Яндекс.Вебмастер Яндекс.Вордстат Яндекс.Деньги Яндекс Директ продвижение на Запад автоматизация контекстной рекламы аудит контекстной рекламы аутрич бизнес веб-дизайн веб-аналитика отзывы покупателей рассылка сервисы маркетолога стратегия контент-маркетинга телеграм-каналы фейсбук юзабилити