Тренды и антитренды в разработке сайтов
Мы собрали для вас самые актуальные инструменты и «фишки» в разработке, которые помогут сделать качественный и удобный сайт. А в качестве бонуса составили список антитрендов, которые лучше оставить в прошлом.
Безусловно, список трендов может быть значительно больше. Однако многие инструменты ситуативны: в одних случаях их применение может оказаться удачным, в других — очень неудобным. Поэтому мы подготовили список практически универсальных вещей.
Тренды:
- Интеграция с мессенджерами. К примеру, сейчас очень популярна интеграция с Telegram — у него бесплатное открытое API. Есть и другие варианты, некоторые из них платные. Интеграция с мессенджерами позволяет быстро отвечать на вопросы и реагировать на заявки, собранные на сайте. Процесс подключения в целом простой: настраивается чат-бот, который отправляет уведомления, что кто-то на сайте хочет заказать товар, оставлена заявка на обратный звонок и т. д.
- Дизайн Mobile-first. О Mobile-first мы слышим много в последние годы. Сейчас довольно часто сначала создают дизайн-макеты для телефонов, а потом уже адаптируют их под десктопные устройства. Решение о такой последовательности в разработке принимается на основании данных «Яндекс. Метрики» — если большая часть трафика идёт со смартфонов, то имеет смысл сначала рисовать макеты под них. Важно здесь учитывать UX (User Experience): например, большинство телефонов сейчас имеет большой экран, и большой палец правой руки не дотягивается до его верха. Надо об этом помнить и не размещать в этой части экрана важные CTA (призывы к действию).
- Защита персональных данных. Нельзя выводить автоматически активные чек-боксы согласия с политикой обработки персональных данных или вообще убирать данный чек-бокс. Это не только тренд, но и правило.
- Доступность сайтов. Актуальна в дизайне и вёрстке. Примеры требований к сайту: дизайн должен быть достаточно контрастным, текст — легко читаемым, вёрстка — адаптирована под программы для чтения с экрана. Даже в chrome dev tools появился параметр accessibility, определяющий уровень контрастности элемента (кнопки, текста, иконки), который важен для восприятия контента людьми с нарушениями зрения. На сайтах медучреждений и государственных учреждений в соответствии с действующим законодательством обязательно должна быть предусмотрена версия для слабовидящих.
- Изображения на прозрачном фоне. Есть тенденция вырезать объекты из фотографий и размещать в дизайне страниц. Так они выглядят более гармонично в общей канве.
- Простые формы. Всё чаще встречаются формы из двух полей — «Имя» и «Текст сообщения». Дизайн форм сводится к тому, чтобы пользователю было как можно проще оставить заявку на сайте, а значит, стать не просто пользователем, а лидом.
- Максимально удобная навигация. К ней относятся меню (шапка и футер), поиск по сайту, фильтры, сортировки, пагинация. Это очень важные элементы, которым, к сожалению, не всегда уделяется достаточно внимания. Особенно актуальна детальная работа с навигацией для интернет-магазинов и сайтов-каталогов. Стоит проработать теги в каталоге, постоянно поддерживать их в актуальном состоянии (например, для интернет-гипермаркета в декабре будет актуальным вывести подборки «Новогодний стол», «Подарки», «Украшение дома»). Поиск по сайту должен искать по категориям, названиям товаров, описанию. Продвинутый поиск — учитывать синонимы, связанные товары и давать пользователю подсказки. Стоит заметить, что после разработки навигацию нужно поддерживать в актуальном состоянии.
- Простая анимация плоской графики. Но главное — не переборщить! Можно симпатично анимировать логотип, прелоадер, процесс добавления товара в «Корзину». Итоговый результат зависит от качества придуманных «фишек».
- 3D-дизайн. Очень хорошо подходит для демонстрации оборудования, товаров, с помощью него создаются интерактивные карты. Или, к примеру, пользователь кликает на какой-то элемент – и получает новую информацию. Это дает больший эффект вовлеченности в сайт. Так, в интерне-магазине можно вращать телефон, смотреть на него с разных сторон. Также набирают популярность 3D-иконки.
Антитренды: от чего пора отказаться
- Капча с галочкой (ReCaptcha 2.0). Сегодня можно ставить невидимую защиту от спама, которая позволит обойтись без выбора светофоров или фонарей на картинках. Тем не менее, некоторые заказчики сайтов до сих пор думают, что обязательно должна быть галочка, и негодуют, если её нет.
- Закреплённая шапка сайта. Речь о закреплении всей шапки целиком и перекрывании части драгоценного места на экране. Гораздо лучше продумать, какой именно контент из шапки может понадобиться пользователю, когда он прокрутил страницу вниз, и оставить только его. Например, мы привыкли видеть лого в закреплённой шапке, но с точки зрения надобности его можно убрать, освободив место под более важную кнопку. В адаптиве под мобильные как вариант — сделать тулбар внизу экрана, прямо под пальцами.
- Отсутствие цены, контактов и другой важной информации. Независимо от того, как именно строится ваше ценообразование, посетители сайта не захотят оставлять заявку и ждать, пока им ответят или перезвонят. Если не хочется лишаться большей части лидов, то лучше позаботиться о том, чтобы пользователь получил всю нужную информацию как можно быстрее.
- Всплывающие окна, чаты, купоны. Всё, что может мелькнуть и/или перекрыть важный контент, за которым пользователь пришёл на сайт, скорее раздражает пользователей, чем продаёт. Если вы уверены, что в вашем случае ситуация строится по-другому, — проведите полноценное A/B-тестирование: оцените конверсию с всплывающим баннером и без него. И на основании этого принимайте решение.
- Сложная анимация, тяжёлые картинки и видео в дизайне. Сейчас лучше уделить внимание не эстетическим характеристикам сайта (тем более что вкус — очень субъективное понятие), а его удобству. Сложные визуальные эффекты делают сайт тяжелее, заставляют его дольше загружаться. Аналогичная ситуация с большими, пусть и качественными изображениями и видеороликами, размещёнными просто для красоты (например, фоном).
- Стоковые фотографии, ненастоящий контент. Использование чужих картинок, фейковых отзывов на сайте легко считывается и часто отталкивает. Если своих материалов пока нет, то можно в первое время разместить стоковые картинки и продумать детали сбора нужного контента. Например, предложить клиентам бонусы за отзывы. Но гораздо лучше устроить фотосессию или отрисовать собственные уникальные картинки с графическим дизайнером.
- Некачественный контент. Маленькие изображения, на которых видны пиксели, — моветон. Иконки в png — тоже. Надо использовать svg (гибкую векторную графику) и следить за качеством картинок. И не стоит забывать про тексты: ошибки и опечатки тоже портят впечатление о владельце сайта.
Ошибочка: пользователь кликает на кОкой-то элемент.
очевидно же что прикола ради, не всей же статье быть сугубо научной))0)
спасибо за интересную статью
рады, что было полезно!
Со стоковыми фото, как, собственно, и со своими важно уметь работать. Здесь и подбор важен, и какой-то общий дизайн всё же должен присутствовать, поэтому даже если отснять собственный материал, это может не помочь. Особенно, если фото выполнены посредственно, пусть и в хорошем качестве, но привлекательности сайту такой контент точно не придаст
А касательно удобства сайта - это реально мегаважно, в помощь обычно приходит затест и обратная связь от обычных пользователей, даже ничего придумывать не нужно