Маркетинг-кит

Мы собрали для вас самые актуальные инструменты и «фишки» в разработке, которые помогут сделать качественный и удобный сайт. А в качестве бонуса составили список антитрендов, которые лучше оставить в 2020-м.

Запланировали разработку сайта? Сначала прочитайте наша подборку, чтобы не ничего не упустить! А если вы прямо сейчас работаете с какой-то веб-студией над новым сайтом, то можете применить некоторые «фишки» в работе. Безусловно, список трендов может быть значительно больше. Однако многие инструменты ситуативны: в одних случаях их применение может оказаться удачным, в других — очень неудобным. Поэтому мы подготовили список практически универсальных вещей.

Тренды:

  1. Интеграция с мессенджерами. К примеру, сейчас очень популярна интеграция с Telegram — у него бесплатное открытое API. Есть и другие варианты, некоторые из них платные. Интеграция с мессенджерами позволяет быстро отвечать на вопросы и реагировать на заявки, собранные на сайте. Процесс подключения в целом простой: настраивается чат-бот, который отправляет уведомления, что кто-то на сайте хочет заказать товар, оставлена заявка на обратный звонок и т. д.
  2. Дизайн Mobile-first. О Mobile-first мы слышим много в последние годы. Сейчас довольно часто сначала создают дизайн-макеты для телефонов, а потом уже адаптируют их под десктопные устройства. Решение о такой последовательности в разработке принимается на основании данных «Яндекс. Метрики» — если большая часть трафика идёт со смартфонов, то имеет смысл сначала рисовать макеты под них. Важно здесь учитывать UX (User Experience): например, большинство телефонов сейчас имеет большой экран, и большой палец правой руки не дотягивается до его верха. Надо об этом помнить и не размещать в этой части экрана важные CTA (призывы к действию).
  3. Защита персональных данных. Нельзя выводить автоматически активные чек-боксы согласия с политикой обработки персональных данных или вообще убирать данный чек-бокс. Это не только тренд, но и правило.
  4. Доступность сайтов. Актуальна в дизайне и вёрстке. Примеры требований к сайту: дизайн должен быть достаточно контрастным, текст — легко читаемым, вёрстка — адаптирована под программы для чтения с экрана. Даже в chrome dev tools появился параметр accessibility, определяющий уровень контрастности элемента (кнопки, текста, иконки), который важен для восприятия контента людьми с нарушениями зрения. На сайтах медучреждений и государственных учреждений в соответствии с действующим законодательством обязательно должна быть предусмотрена версия для слабовидящих.
  5. Изображения на прозрачном фоне. Есть тенденция вырезать объекты из фотографий и размещать в дизайне страниц. Так они выглядят более гармонично в общей канве.
  6. Простые формы. Всё чаще встречаются формы из двух полей — «Имя» и «Текст сообщения». Дизайн форм сводится к тому, чтобы пользователю было как можно проще оставить заявку на сайте, а значит, стать не просто пользователем, а лидом.
  7. Максимально удобная навигация. К ней относятся меню (шапка и футер), поиск по сайту, фильтры, сортировки, пагинация. Это очень важные элементы, которым, к сожалению, не всегда уделяется достаточно внимания. Особенно актуальна детальная работа с навигацией для интернет-магазинов и сайтов-каталогов. Стоит проработать теги в каталоге, постоянно поддерживать их в актуальном состоянии (например, для интернет-гипермаркета в декабре будет актуальным вывести подборки «Новогодний стол», «Подарки», «Украшение дома»). Поиск по сайту должен искать по категориям, названиям товаров, описанию. Продвинутый поиск — учитывать синонимы, связанные товары и давать пользователю подсказки. Стоит заметить, что после разработки навигацию нужно поддерживать в актуальном состоянии.
  8. Простая анимация плоской графики. Но главное — не переборщить! Можно симпатично анимировать логотип, прелоадер, процесс добавления товара в «Корзину». Итоговый результат зависит от качества придуманных «фишек».

Антитренды: от чего пора отказаться

  1. Капча с галочкой (ReCaptcha 2.0). Сегодня можно ставить невидимую защиту от спама, которая позволит обойтись без выбора светофоров или фонарей на картинках. Тем не менее, некоторые заказчики сайтов до сих пор думают, что обязательно должна быть галочка, и негодуют, если её нет.
  2. Закреплённая шапка сайта. Речь о закреплении всей шапки целиком и перекрывании части драгоценного места на экране. Гораздо лучше продумать, какой именно контент из шапки может понадобиться пользователю, когда он прокрутил страницу вниз, и оставить только его. Например, мы привыкли видеть лого в закреплённой шапке, но с точки зрения надобности его можно убрать, освободив место под более важную кнопку. В адаптиве под мобильные как вариант — сделать тулбар внизу экрана, прямо под пальцами.
  3. Отсутствие цены, контактов и другой важной информации. Независимо от того, как именно строится ваше ценообразование, посетители сайта не захотят оставлять заявку и ждать, пока им ответят или перезвонят. Если не хочется лишаться большей части лидов, то лучше позаботиться о том, чтобы пользователь получил всю нужную информацию как можно быстрее.
  4. Всплывающие окна, чаты, купоны. Всё, что может мелькнуть и/или перекрыть важный контент, за которым пользователь пришёл на сайт, скорее раздражает пользователей, чем продаёт. Если вы уверены, что в вашем случае ситуация строится по-другому, — проведите полноценное A/B-тестирование: оцените конверсию с всплывающим баннером и без него. И на основании этого принимайте решение.
  5. Сложная анимация, тяжёлые картинки и видео в дизайне. Сейчас лучше уделить внимание не эстетическим характеристикам сайта (тем более что вкус — очень субъективное понятие), а его удобству. Сложные визуальные эффекты делают сайт тяжелее, заставляют его дольше загружаться. Аналогичная ситуация с большими, пусть и качественными изображениями и видеороликами, размещёнными просто для красоты (например, фоном).
  6. Стоковые фотографии, ненастоящий контент. Использование чужих картинок, фейковых отзывов на сайте легко считывается и часто отталкивает. Если своих материалов пока нет, то можно в первое время разместить стоковые картинки и продумать детали сбора нужного контента. Например, предложить клиентам бонусы за отзывы. Но гораздо лучше устроить фотосессию или отрисовать собственные уникальные картинки с графическим дизайнером.
  7. Некачественный контент. Маленькие изображения, на которых видны пиксели, — моветон. Иконки в png — тоже. Надо использовать svg (гибкую векторную графику) и следить за качеством картинок. И не стоит забывать про тексты: ошибки и опечатки тоже портят впечатление о владельце сайта.