Полный гайд: как приводить пользователей к покупке с помощью дизайна — подборка из 38 статей

Привет, это Antro. Собрали материалы о клиентском опыте, UX и проектировании интернет-магазинов в самое подробное руководство на площадке. С его помощью можно довести интернет-магазин до идеала и дизайнерам, и маркетологам, и собственникам.

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

Для этой статьи подготовили подборку из собственных материалов о CX и UX: в них мы рассказываем, что сделать до дизайнерской работы, как переделать интернет-магазин, создать его с нуля, где посмотреть хорошие примеры.

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

Исследования показывают, что похожим образом на бренды смотрят и покупатели: 37% пользователей готовы отказаться от компании уже после первого негативного опыта, а 46,1% покупателей определяют надёжность сайта по его привлекательности.

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

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

Статьи о том, как подготовиться к разработке:

Стоит построить путь пользователя к вашему продукту — CJM. Или не стоит. Разобрались в двух статьях, за которые получили серебро Tagline Awards 2022:

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

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

Мы подробно рассказали, в каких случаях и как редизайнить интернет-магазины четырёх статьях:

Статьи по разработке пишем строго по науке: не фантазируем об идеальном дизайне, а подкрепляем всё измеримыми показателями

Мы создали самый просматриваемый цикл статей о дизайне интернет-магазинов на vc.ru. Всего вышло 6 статей:

Как влияет дизайн магазина на пользователей | Дизайн интернет-магазина: что учесть, чтобы не облажаться?;
Навигация в интернет-магазине | Дизайн интернет-магазина: что учесть, чтобы не облажаться, часть вторая;
Каталог: фильтрация и карточки | Дизайн интернет-магазина: что учесть, чтобы не облажаться — часть третья;
Дизайн страницы продукта | Дизайн интернет-магазина: что учесть, чтобы не облажаться, часть четвёртая;
Разбор корзины на сайте | Дизайн интернет-магазина: что учесть, чтобы не облажаться, часть пятая;
Страница оформления заказа | Дизайн интернет-магазина: что учесть, чтобы не облажаться — часть шестая.

В материалах про магазины стараемся доказывать примерно всё. Иллюстрация из второй статьи цикла

Похожий цикл, но для мобильной версии:

Почему в мобильной версии больше трафика, но меньше продаж | Мобильная версия магазина: как довести пользователя до покупки, часть первая;
Мобильная навигация: как оформлять «хлебные крошки» и карусели | Мобильная версия интернет-магазина: как довести пользователя до покупки, часть вторая;
Функции и must-have контент для мобильного футера | Мобильная версия интернет-магазина: как довести пользователя до покупки, часть третья;
Фильтры и сортировка в мобильной версии | Мобильная версия интернет-магазина: как довести пользователя до покупки, часть четвёртая;
Что писать в карточке товара и какие функции добавлять в мобильный каталог | Мобильная версия интернет-магазина: как довести пользователя до покупки, часть пятая;
О контенте в карточке товара и обратной связи | Мобильная версия интернет-магазина: как довести пользователя до покупки, часть шестая.

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

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

В дизайне мы предусматриваем максимум таких деталей. Описали это в нескольких статьях:

Как в интерфейсе учесть привычки клиента, чтобы привести его к покупке — разобрали статистику и исследования о поведении пользователей в интернет-магазинах;
Как не потерять покупателя в начале пути. Разобрали вход и регистрацию в интернет-магазинах — на примерах популярных маркетплейсов рассмотрели авторизацию в eCommerce;
Возвраты в eCommerce: причины и механики сокращения — около 25% онлайн-покупок возвращают в магазин. Разобрались, почему это происходит, и как снизить процент;
Доступный дизайн: как сделать интерфейс удобным для пожилых — В период с 25 до 60 лет способность использовать сайты снижается на 0,8% в год. Рассказываем, как облегчить интерфейс сайта для возрастных пользователей;
Что учесть в разработке интернет-магазина на Bitrix, чтобы не переплачивать за исправление ошибок — рассказываем о мелочах, которые стоит предусмотреть на Bitrix. С помощью памятки можно оценить свой дизайн или проверить работу подрядчика.

Мелочи разбираем очень придирчиво: на каждое решение показываем соответствующее исследование

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

Прожарки в хронологическом порядке:

В двух (анти)прожарках мы сосредоточились на хороших практиках:

Подписывайтесь на наш телеграм-канал, чтобы больше читать про CX и UX. В нём мы пишем про разработку и исследования в дизайне, рассказываем о своей работе и собираем интересные новости сферы.