Дизайн интернет-магазина 2022: какой он?

Тренды UI

Адаптивный дизайн

Исследования последних лет показывают, что пользователи все чаще покупают товары при помощи мобильных телефонов — не просто ищут товары, как было раньше (покупали все же через ПК, потому что удобнее), а именно оформляют заказ.

В англоязычной интернет-среде даже появился специальный термин для обозначения покупок через мобильные телефоны — M-commerce.

И, как считают аналитики компании Deloitte, доля таких покупок к 2023 году вырастет до 75%.

Теперь стало понятно, что эта тенденция развивается во многом благодаря самому молодому поколению — зумерам (16-23). И если вы хотите, чтобы людям было удобно покупать в вашем интернет-магазине через мобильные телефоны и другие портативные устройства, не жалейте денег на качественные адаптивы.

Минимализм и простота

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

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

Старайтесь использовать ограниченный набор элементов — и только функциональные.

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

Помните, что у нас остается все меньше времени на то, чтобы заполучить внимание покупателя — люди все менее терпеливы.

Исследование Deloitte показывает, что за одну секунду ожидания посетитель теряет фокус, а десяти секунд ему достаточно, чтобы все бросить и покинуть сайт.

Поэтому мы рекомендуем расставлять акценты при помощи цвета и избавиться от смыслового мусора в дизайне.

Интерактивные элементы

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

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

Кроме того, вдруг именно интересные и находчивые интерактивные решения помогут вам понравиться и запомниться посетителям и еще не раз к вам вернуться.

Хороший способ вовлечь — это, например:

• Использовать 3D-графику при оформлении разделов (умеренно);
• Заанимировать кнопки CTA;
• Придумать какую-нибудь классную фичу с анимацией для уведомлений — аккуратную и ненавязчивую или просто веселую;
• Рассказать историю вашего бренда через видео с интерактивными элементами.

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

Под качественной мы понимаем такую анимацию, которая одновременно и красива, и не раздражает, и не сильно влияет на скорость загрузки — то есть ваш сайт продолжает «летать»‎.

Что касается форматов графики, мы рекомендуем использовать современные .json и .svg — они на 600% легче .gif.

Цветовые решения

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

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

Итак, какие цветовые решения востребованы в дизайне интернет-магазинов в 2022?

• Простые решения — пастельные оттенки, тени, градиенты

Ничто не должно отвлекать покупателя от товара. В цветах также важны простота и минимализм.

• Темный режим

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

Однако это относится только к OLED-экранам, у которых нет подсветки — они используются в большинстве мобильных телефонов.

Добавьте возможность настроить dark mode на ваш сайт — это создаст дополнительное удобство для тех, кто делает покупки через смартфоны.

UX-тренды

Факторы, влияющие на покупку в зависимости от возраста покупателя

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

Это подтверждают в том числе эксперты компании GWI, которые анализировали рынок с этой точки зрения.

Согласно этому исследованию, для самых молодых — поколения Z (16-23) — важны количество лайков, уникальности продукта и контента, а также возможность забрать товар без прямого контакта с продавцов — через постаматы.

Миллениалы (24-37) ищут кнопку “Купить” в соцсетях. Им также важно иметь возможность задать вопросы бренду — через чат на сайте. Кроме того, они чаще представителей других поколений ищут оптимальное соотношение цены и качества.

У более старших поколений другая градация ценностей.

Поколение X (37-56) — бесплатная доставка, баллы лояльности, купоны и скидки.

Бэби-бумеры (57 и старше) — бесплатная доставка, возможность быстрого возврата, простота заполнения формы заказа.

Поэтому при разработке дизайна интернет-магазина важно знать целевую аудиторию — и внедрять соответствующий функционал.

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

Мы рекомендуем еще в процессе подготовки к созданию сайта определить одну (или две) основные целевые группы — и ориентироваться в дизайне и функционале преимущественно на них.

Социальная коммерция — продажа в соцсетях

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

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

Основными функциями соцсети по-прежнему остаются возможность общения и потребление развлекательного контента.

Возможно, именно из соцсетей и пошел тренд на минимизацию отвлекающих факторов в дизайне интернет-магазинов — внимание и так слишком рассеяно.

Максимизация информации в карточке товара — при этом визуальное ее облегчение

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

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

Правильное изображение товаров

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

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

Фото

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

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

Если вы продаете мебель, сделайте интерьерные фотографии, а также продемонстрируйте текстуру материала, ткань, дерево и другие детали.

Если вы бренд декоративной косметики — покажите, как помада будет смотреться на губах. Это поможет вызвать доверие у покупателя.

Изображение должно быть таким, чтобы человек хотел и мог себя с ним соотнести.

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

Еще одно требование: фотографии должны быстро загружаться — особенно на мобильных телефонах.

Видео

Наличие видео в карточке товара — это также новая норма. Это становится все более важным фактором ранжирования, выбора пользователя для интернет-магазинов.

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

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

Отзывы

Отзывы — это еще одна функция, которая пришла из соцсетей.

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

Особенно ценны отзывы с фотографиями, видео и реальным опытом использования товара — такие отзывы сложнее подделать, поэтому они вызывают больше доверия.

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

Резюме

• Стремитесь к «‎чистому» дизайну, в котором нет лишних деталей — чем меньше и проще, тем больше продаж.
• Сделайте качественные адаптивы вашего сайта — доля покупок с мобильных телефонов стремительно растет.
• Дайте пользователю возможность взаимодействовать с брендом. Добавляйте в дизайн интерактивные детали и микроанимацию — это привнесет элемент игры и развлечения в онлайн-покупки и поможет удержать пользователя.

Также интерактивные фичи могут стать средством самовыражения для бренда — так вы сможете запомниться.

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