11 Обязательных Фишек Адаптации Вашего Сайта Под Мобильные Устройства

Print Friendly, PDF & Email

Вы теряете клиентов прямо сейчас…

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

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

Начнем…

1. Скройте меню навигации

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

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

Так, например, выглядит выпадающее меню на нашем сайте:

пример адаптации меню

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

Горизонтальную полосу прокрутки меню применил Google. Каждая ссылка имеет выпадающий список, который появляется при нажатии. Выглядит это так:

пример горизонтального меню

Важно! Оба варианта выигрышные. Главное правило — меню должно занимать минимум места на экране.

2. Сделайте большую кнопку призыва

Конечно, кнопка призыва к действию должна быть яркой! Но ещё важнее сделать ее удобной. Потому позаботьтесь, чтобы призыв к действию («Купить», «Получить доступ» и т. д.) был больших размеров. Так на него легче нажать.

Вот как может выглядеть призыв на мобильных устройствах:

пример призывов

Важно! Большие кнопки улучшают удобство и простоту использования.

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

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

пример активной ссылки

3. Адаптируйте шрифт

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

Важно! Лучше не помещать текст на цветной фон. Для гаджетов больше подходит черный текст на светлом фоне.

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

пример адаптация шрифтов

4. Покажите важную информацию

Все сведения и пункты, которые могут заинтересовать пользователя:

  • контактные данные;
  • ваше местоположение;
  • цена;
  • призыв к действию.

Эти моменты обязательно должны быть максимально заметными. Если информацию трудно найти, посетитель просто уйдет.

Вот 2 примера, как можно разместить такую информацию:

важная информация

5. Измените порядок блоков

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

6. Чем шире экран, тем больше контента

Здесь все просто: если у человека планшет, то на экране будет расположено больше контента, чем на мобильном. Это же касается и горизонтального чтения на телефоне. В соответствии с этим адаптируйте количество отображаемого контента.

Как пример посмотрите, как меняется количество товаров в зависимости от горизонтального или вертикального чтения на телефоне:

больше контента

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

Лучшим вариантом для галереи изображений или характеристик будут длинные ленты прокрутки. Такой вариант очень удобный, т. к. не заставляет посетителя делать лишние движения. Длинная прокрутка также хорошо работает на планшете и на рабочем столе компьютера. Еще 1 хороший вариант — это перелистываемая «карусель» со стрелками влево/вправо.

Например, интернет-магазин iStore использует оба варианта:

длинные прокрутки

8. Оптимизируйте пользовательский опыт для сенсорных экранов

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

Давайте объясню на примере. Компания BORNgroup осуществила нереально крутую задумку. Они работают с адаптацией сайтов и улучшением пользовательского опыта. Что же они придумали? Человек, который интересуется вопросом улучшения качества веб-странички, заходит на их сайт и видит перед собой блок картинок. Изображения на любой вкус:

  • красивые женщины;
  • крутые часы;
  • машины;
  • стильные наушники и т. д.

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

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

Посмотрите, как выглядит их задумка:

ux адаптация

Кстати, я купился именно на это, когда попал к ним 🙂

9. Используйте значки

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

Важно! Такие значки должны быть яркими и тематическими (если пункт касается проверки скорости, сделайте, например, значок спидометра или секундомера).

Вот несколько примеров:

значки адаптация

10. Адаптируйте видео

Об этом многие забывают. Представьте, захотели вы посмотреть фильм на мобильном, а видео открылось только на пол экрана. Как ощущения?

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

Ваше видео всегда должно быть по  размеру экрана. Вот так:

адаптация видео

11. Не бойтесь длинных прокруток

Выложили всю важную информацию в верхней части экрана? Считайте, что попросили клиента найти помаду в женской сумочке.

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

И последнее…

Помните, 60% покупают интернет-пользователей совершают покупки, не подходя к компьютеру. Так что если вы не позаботитесь (прямо сейчас) об адаптации вашей странички, вы потеряете массу клиентов.

Да, уместить всю важную информацию на маленьком экране очень сложно. Но уверен, советы из этой статьи помогут вам справиться на отлично.

Применяйте:)

Было полезно? Ставьте «Лайк»! Так я буду знать, что мне стоит продолжать делиться секретами по адаптации ресурсов под мобильные устройства. 

Есть еще 5 минут? Проверьте, не допустили ли вы 7 Критических Ошибок, Которые Уничтожают Результативность Ваших Заголовков. Узнайте прямо сейчас!