Делаем мобильную версию сайта продающей: 100+ пунктов, которые нельзя игнорировать. Часть первая

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

Подпишись на наш Телеграм и читай все статьи и новости первым!

Сайт

Начнем разбор с основы сайта и его «скелета»: 

Наличие мобильной версии

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

1. Адаптивный дизайн — лучшее решение по мнению Google.
2. Динамический показ.
3. Полноценная (отдельная) мобильная версия сайта.
4. Мобильное приложение сайта с уникальным дизайном и оформлением. 

Навигационное меню 

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

Наличие нескольких языков 

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

Быстрая смена языка 

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

Отсутствие горизонтальных полос скролла 

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

Размеры изображений 

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

Стандарт разметки 

Меню и все другие функции (горячие кнопки, корзина, чат с поддержкой) должны быть на привычных для пользователей местах. Не нужно экспериментировать и пытаться менять блоки местами. Есть определенный стандарт разметки, который прослеживается у 90% всех сайтов: меню слева, текст посередине, кнопка вызова поддержки внизу, обычно в правом углу, и так далее. Придерживайтесь похожих стандартов — люди не станут привыкать к вашему нестандартному размещению блоков. Другие стандарты разметки: 

1. Контакты — в правом верхнем углу.
2. Поиск — вверху (посередине или справа).
3. Корзина — в правом верхнем углу.
4. Вход в личный кабинет — в правом верхнем углу.
5. Лого компании — в верхнем левом или правом углу 

Контакты 

Пользователи должны иметь возможность без проблем связаться с владельцем сайта или другим ответственным лицом. Укажите максимум возможных средств коммуникации, но не больше двух адресов для одного канала. Оставьте мобильный телефон, электронный адрес, Skype, профиль в мессенджерах. Люди должны иметь возможность «достучаться» до вас любым способом, которым они предпочитают пользоваться. 

Кликабельный логотип 

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

Быстрый скроллинг 

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

CTA-кнопки на каждой странице 

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

Отсутствие агрессивного контента 

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

Дизайн

С основой сайта разобрались, теперь предлагаем перейти к дизайну. Чтобы пользователям хотелось повторно вернуться на сайт, а его использование не вызывало дискомфорта, площадка должна соответствовать приведенным ниже пунктам. 

Единое оформление 

Не должно быть разброса в оформлении — все страницы и разделы необходимо оформить в одном стиле и приблизительно в одинаковом цвете (или в сочетании цветовых оттенков). Немного выделяться должны CTA-кнопки, чтобы их было проще найти. При этом постарайтесь выделять их так, чтобы это не резало глаз. 

Свободное пространство 

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

Размер горячих кнопок 

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

Шрифт и размер текста 

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

Управление кнопками

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

Напоминания 

Каждая CTA-кнопка должна быть заметной и призывать клиента совершить целевое действие. Чем приоритетнее кнопка, тем больше она выделяется на фоне остальных. На каждой странице сайта должен быть призыв к действию, оформленный в виде кнопки: 

1. Купить.
2. Заказать.
3. Заказать обратный звонок.
4. Получить консультацию.
5. Продолжить. 

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

Кнопка = действие 

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

К тому же, действия должны быть четко описаны заранее, чтобы сразу было понятно, куда юзера перенесет нажатие. «Заказать» и «Купить» — это правильные кнопки. «Далее» и «Продолжить» — абстрактные, плохие кнопки. Люди не понимают, что их ждет после перехода, поэтому в голове у них не выстраивается модель покупки. Четко обозначьте все действия — это сэкономит время (ваше и покупателей), а также повысит конверсию сайта. 

Визуальный эффект после нажатия 

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

Нежелательные кнопки должны находиться далеко от желательных 

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

Поиск

Следующим по значимости пунктом, формирующим продающий сайт, является поиск. Давайте же его максимально оптимизируем!  

Строка поиска должна быть в одном месте 

Начнем с того, что в обеих версиях сайта (в десктоп и в мобильной) должна присутствовать поисковая строка, причем размещается она в одном и том же месте. 

Поисковая строка открыта 

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

Строку поиска можно очистить одной кнопкой 

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

Поиск с ошибками и опечатками 

Поиск должен быть настроен так, чтобы даже запросы с грубыми ошибками и опечатками все равно корректно отображались. Также не помешает добавить автоматические исправления и/или подсказки в духе «Возможно, вы имели ввиду...» 

Поиск по синонимам и сленгу 

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

1. Запрос: смартфон — отображаются смартфоны.
2. Сленговый запрос: мобила — отображаются смартфоны.
3. Запрос синонима: телефон — отображаются смартфоны. 

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

Поиск вне зависимости от порядка введенных ключей

Поиск должен одинаково корректно показывать результаты, вне зависимости от порядка введенных слов. То есть по запросам «Купить смартфон в Москве» и «Москва смартфон купить» должны высвечиваться одни и те же результаты.

История запросов 

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

А на этом наша первая часть подошла к концу. Скоро здесь будет ссылка на вторую часть темы, не пропустите. А пока что мы прощаемся. До скорого!