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

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

1. Простое меню

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

На что обратить внимание:

  • Идеальное меню мобильной версии сайта состоит не больше чем из 5-6 пунктов.
  • Используйте максимум два подменю, если они понадобятся.

2. Короткие понятные формы

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

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

В идеале нужно определить оптимальное количество полей формы. В этом поможет A/B-тестирование. Если удалять или изменять по одному полю за раз, то вы узнаете, как это повлияет на количество заполнений. Например, люди вероятнее заполнят форму без необходимости оставить номер телефона.

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

3. Простые поля формы

Форма должна быть простой, особенно если не получается сделать ее как можно короче.

Советы:

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

На сайте РЖД при вводе первых букв города для поиска билетов выпадает список городов, поэтому не приходится вводить весь текст. К тому же, при выборе дат виден календарь, и можно взять билеты туда-обратно на одном экране.

4. Кнопки с CTA на видном месте

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

Выделяйте призывы к действию контрастными цветами и шрифтами и четко указывайте предложение и порядок шагов. Расположите кнопку действия покрупнее на видном месте. Как это, например, делают маркетплейсы Ozon и Wildberries.

5. Быстрый и легкий способ связаться

Главное отличие смартфона от десктопа — возможность сразу позвонить. Достаточно добавить кнопку «связаться», чтобы звонок можно было сделать быстро и легко. Еще можно добавить контактную форму или кнопку для быстрой отправки письма для ценителей переписок.

Полезной будет страница FAQ с часто задаваемыми вопросами, чтобы быстро получить интересующую информацию.

6. Поменьше всплывающих окон

Лучше ограничить всплывающую рекламу (или хотя бы увеличить поле для их закрытия). Если пользователь случайно нажмет на рекламу и откроет ее, когда не хотел этого, то его лояльность быстро снизится. Он может вообще не вернуться на страницу.

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

7. Оптимальный размер кнопок для нажатия пальцем

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

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

8. Быстрая загрузка сайта

Очень важный пункт, который влияет на то, увидит ли вообще пользователь ваш сайт. Более половины пользователей смартфонов и планшетов ожидают, что страница загрузится за четыре секунды и меньше. Поэтому ваш сайт не должен весить больше 1МБ.

На размер страниц влияет визуальный контент: чем больше фото и видео, тем медленнее работает сайт.

Хороший пример проработки дизайна — сайт газеты The New York Times. Он загружается почти мгновенно. Пользователи всегда остаются в курсе событий и могут быстро узнать последние новости, если выдалась свободная минутка.

Надеемся, эти советы помогут сделать мобильные сайты удобными для потребителей, а предпринимателям принесут повышенную прибыль. Если у вас остались вопросы по работе с сайтами, приглашаем присоединиться в наше сообщество зерокодеров в Telegram — Tilda Chat & Community. В чате вы найдете ответы от специалистов разного профиля и сможете обсудить интересные темы.