Привет!

Как “отравить” мобильных пользователей [digital note #34]

Валерия СластенниковаВалерия Сластенникова

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

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

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

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

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

1. Медленная загрузка сайта

Медленная загрузка сайта - отличное оружие против пользователей мобильных устройств. Пользователь успеет сходить на почту, пока грузится сайт? Тогда с “отравлением” посетителей вы справляетесь на “отлично”!

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

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

Кроме того, не забывайте, что скорость сайта является одним из факторов, который влияет на ранжирование в поиске Google и Google AdWords. Так что скорость сайта влияет не только на конверсии, но и на то, попадет ли пользователь вообще к вам на сайт.

Поэтому учитывайте скорость загрузки сайта при разработке концепции.

Оптимизировать скорость также возможно. Вот что об этом говорит Google:

  • Минимизируйте передачу данных.
    • Оптимизируйте изображения.
    • Сократите CSS, JavaScript и HTML.
  • Не блокируйте визуализацию.
    • Оптимизируйте работу CSS.
    • Используйте удобочитаемые размеры шрифтов.
    • Уделите главное внимание визуальному контенту.
  • Оптимизируйте back end.
    • Улучшите время отклика сервера.
    • Используйте сжатие.
    • Используйте кеш браузера.
    • Избегайте ненужных редиректов.

2. Плохая работа над каруселью

Пользователь к вам больше не вернется.

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

На карусели слева непонятно, что контент продолжается справа. В примере справа, этот вопрос решен лучше.

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

Если же вы планируете использовать карусель на мобильных устройствах, убедитесь, что соблюдены следующие критерии:

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

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

3. Сокрытие меню под иконкой-гамбургером

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

Если же показать важные элемент меню невозможно, скройте его под иконкой-гамбургером, но озаглавьте его соответствующим образом - “меню”.

4. Полагаться на жест “смахивание”

Смахните всех пользователей жестом “смахивание”.

Менее распространенные жесты более рискованы в мобильном UI по двум причинам:

  • Пользовательские жесты могут конфликтовать с жестами, которые установлены в браузере по умолчанию.
  • Менее распространенные жесты не знакомы многим пользователям.

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

5. Все активные элементы красивые и маленькие

Одного миллиметра будет достаточно)

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

Если говорить о технической реализации, то нужно помнить о мета теге viewport и воспользоваться подсказкой:

/* 7mm = 44px = 2.75rem */
.touch { height: 2.75rem; }
/* 11mm = 69px = 4.3125rem */
.touch-big { height: 4.3125rem; }

6. Адаптивность только для некоторых разрешений

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

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

Не меняйте дизайн для устройств в портретном и ландшафтном положении.

7. Не кликабельные номера телефонов

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

Это может стать лакомым кусочком. Сделайте номера телефонов кликабельными.

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

8. Отключить масштабирование

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

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

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

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

Также как десктопным пользователям нужна стрелка “назад” и скроллинг, так и мобильным пользователям нужна возможность масштабирования.

9. * { user-select: none } и все будет ок!

Некоторые пользователи гарантированно будут копировать всю информацию с вашего сайта. Это нужно немедленно прекратить!

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

  • иконки навигации,
  • карусели с наложением текста,
  • элементы управления, такие как выпадающее меню.

10. Неправильная загрузка шрифтов

Убейте пользователя мерцающим или пропадающим текстом.

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

11. Захламление страницы социальными кнопками

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

Кнопки Facebook, Twitter и Google не удобны пользователю по нескольким причинам:

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

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

12. Некорректная переадресация с десктопов на мобильные

Такая проблема очень часто встречается на сайтах с m.-версией.

Должно быть так:

  • Если пользователь заходит на сайт www.example.com/example, сервер определяет устройство и перенаправляет его на m.example.com/example (а не на m.example.com).
  • Если такого URL не существует, то лучше оставить пользователя в десктопной версии, чем перенаправлять на главную мобильной.
  • Дайте поисковым машинам знать о существовании двух версий сайта. Используйте <link rel="alternate"> или файл sitemap.xml.

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

13. Хорошенько скрыть контент

Скройте содержимое от пользователя. Оно же ему все-равно не нужно.

Нравится это вам или нет, люди заходят на сайт ради контента. Однако на многих сайтах контент скрыт. По таким вот причинам:

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

Как много пользователей вы уже отравили?

Подведем итоги и оформим небольшой чек-лист:

  • Обеспечить высокую скорость загрузки.
  • Не скрывать контент.
  • Удобный пользовательский интерфейс.
  • Не конфликтовать с настройками браузеров.
  • Корректная переадресация (для мобильных версий)

How To Poison The Mobile User