Любой владелец интернет-магазина хочет, чтобы его бизнес был успешным. В интернете много говорят о маркетинге, дизайне интерфейсов, конверсии. Но молчат о том, как реализация всех этих задумок влияет на бизнес и как разработчики могут повлиять на юзабилити сайта. Мы подготовили для вас список из 5 фишек front-end, на которые стоит обратить внимание, чтобы увеличить доходность своего бизнеса.
Конечно, владельцу e-commerce проекта не обязательно вникать во все тонкости разработки. Но есть такие детали, которые лежат на поверхности. О них расскажет Денис Бородаенко, руководитель группы front-end разработки в Uplab.
1. Корзина для оформления заказов «на лету»
После того, как пользователь выбрал нужный ему продукт и его характеристики, он захочет добавить его в корзину или в список желаний. Проиллюстрируйте процесс добавления товара в корзину анимацией, чтобы сделать его визуально очевидным.
Самое элементарное решение — увеличить счетчик товаров на иконке с корзиной. Или можно использовать более комплексную анимацию.
Анимация помогает зафиксировать изменения, привлекает и направляет внимание. Даже небольшая анимация может упростить понимание интерфейса и, следовательно, сэкономит время и нервы пользователя.
Кроме того, знакомые объекты и действия вызывают у пользователя теплые чувства на уровне подсознания. Даже иконки реальных объектов распознаются лучше, чем символические. Всё это помогает сформировать доверие к продукту / сервису и желание использовать его снова.
Например, на сайте ASOS после нажатия кнопки «Добавить в корзину», появляется небольшое окно рядом со значком корзины в меню, уведомляющее о том, что товар ждет покупки:
Элемент исчезает через несколько секунд. На нем также есть дополнительные кнопки для быстрой навигации: «Перейти в корзину» и «Оформить заказ».
На Яндекс.Маркете сразу три маркера:
- Меняющаяся кнопка.
- Счетчик на иконке корзины.
- Всплывающее окно, предлагающее перейти в корзину или продолжить покупки. Там же находится раздел «С этим товаром часто покупают».
Кстати, разместить значок корзины лучше всего в привычном месте в правом верхнем углу, чтобы пользователь долго не искал. Рядом со значком, кроме количества товаров, можно также указать сумму покупок. На сайте Amazon все эти рекомендации соединились: корзина и сумма покупки — всегда перед глазами в дополнительном окошке, а еще сайт рекомендует похожие товары.
Всё это создает ощущение посещения реального магазина. Например, ты пришел в отдел канцелярии, повыбирал, сложил разные товары в свою корзинку, походил еще, подумал, а потом купил то, что нравится.
Отсюда вытекает еще одно простое решение — возможность выбора товара «на лету». Когда ты идешь по магазину и смотришь на полки, то стоит лишь протянуть руку, чтобы взять товар. Такой же принцип можно реализовать на сайте. Дайте пользователю возможность добавить товар прямо из списка товаров или любого другого блока товаров на сайте. Сэкономьте его время.
Front-end разработка на основе асинхронных запросов научилась это делать уже давно. Главное — не забывайте это использовать.
2. Автоматическое обновление данных в нескольких вкладках
Еще одна возможность современного фронтенда — это обновление данных в открытых вкладках браузера без дополнительных действий. Как вы могли заметить, когда приходит уведомление в соцсетях или на почту, то оповещение сразу же появляется во всех связанных вкладках сайта. Если вы, конечно, используете браузер и компьютер, чтобы сидеть в соцсетях =)
Поэтому, когда в вашем интернет-магазине покупатель добавил товар в корзину или в список понравившихся товаров, можно мгновенно обновить данные во всех открытых вкладках. Это значит, что перейдя в соседние вкладки, пользователь увидит отложенные товары в корзине и не забудет их купить.
Для реализации таких идей во фронтенде можно использовать localStorage, Web Workers и другие технологии. Оставьте выбор технологий специалистам. А вам, как заказчику, главное — знать, что эта возможность есть и она будет способствовать повышению продаж вашего интернет-магазина.
3. Вспомогательная анимация (UI-анимация)
Анимация элементов (кнопок, триггеров выбора, характеристик товара, типа доставки и др.) может помочь пользователю сориентироваться на сайте. Она должна давать простую и однозначную обратную связь, чтобы вызвать больше доверия к сервису. Чем меньше препятствий встречает на пути к совершению покупки клиент, тем выше вероятность, что он эту покупку совершит.
С примерами вспомогательных анимаций мы сталкиваемся ежеминутно, взаимодействуя с нашими смартфонами. Это настолько привычно, что мы даже перестали их замечать.
Например, если нужно перелистнуть изображение товара, выбрать цвета продукта или другие характеристики — смело используйте swipe (свайп — это специальный жест, когда вы кладете палец на экран смартфона и ведете его не отрывая в нужном направлении), а не ограничивайте пользователя стрелочками вправо и влево.
Чтобы сделать выбор цвета продукта визуально очевидным, рекомендуем сделать фото самого продукта в разных цветах и добавить переключатель в карточке товара или использовать программную обработку для изменения цвета. Это не займет много времени, зато пользователь получит более полное представление о продукте и непременно захочет стать вашим клиентом.
На сайте интернет-магазина американского разработчика и производителя аудиопродукции Sonos доступно программное изменение цвета и свайп:
На сайте shein.com нашли другое интересное решение по демонстрации товара со всех сторон:
Пример выбора цвета товара на том же сайте shein.com. Здесь используются разные фотографии:
Всегда можно найти варианты необычной подачи для привычных элементов. Например, вот как можно стилизовать анимацию классического выбора размера обуви:
Возможности сейчас практически не ограничены. Для реализации таких идей со стороны фронтенда есть всё: от простых CSS библиотек с предустановленными UI-анимациями (Materialize, Tailwind CSS) до полноценных технологий работы с графикой на стороне фронта (WebGL, Canvas).
4. Возможность вернуть товар в корзину
Наверняка, вы сталкивались с тем, что какое-то действие нужно отменить. Например, удаление письма, которое еще было нужно, или, согласно нашей теме, удаление товара из корзины по ошибке.
В таких случаях поможет возможность отмены «бесповоротных» решений. Со стороны разработки сделать это не так уж сложно. Зато покупатель сможет быстро вернуть товар, который он тщательно рассматривал уже 10 минут, а удалил только потому, что отвлекся на глоток горячего кофе и нажал не туда.
Например, на сайте ИКЕА предусмотрели всплывающую подсказку с кнопкой «Отменить удаление товара» и отсчетом времени (не более 5 секунд). Кликнув по кнопке, пользователь может вернуть товар и завершить покупку.
5. Эффективная и бюджетная поддержка e-commerce проекта с точки зрения фронтенда
Рано или поздно при создании проекта вам предложат стек технологий, на которых будет разработан ваш интернет-магазин. Не будем погружаться слишком глубоко, затронем лишь поверхностно front-end разработку в этом направлении.
Главный язык, на котором разрабатывается фронтенд, — это JavaScript. И чтобы воплотить все идеи проекта в реальность, исполнители решают: писать ли им на «чистом» языке JavaScript, либо использовать фреймворки / библиотеки, в частности, React / Vue / Angular.
Зачем вообще об этом задумываться? Если коротко, то для планирования бюджета. Если вы планируете масштабный проект и хотите его поддерживать и развивать, посмотрите в сторону фреймворков. Корректную структуру проекта на основе фреймворков будет легче и дешевле поддерживать.
Если поднять сложный проект на чистом JavaScript, будет использоваться структура проекта, которая известна и понятна только вашим исполнителям. Это может вызвать проблемы с поддержкой и развитием сайта, если вы решите заменить команду разработки.
Может возникнуть «пропасть», которая называется преемственностью кода проекта. В худшем случае вам будут предлагать переписывать весь проект с нуля. А это большие траты ресурсов как временных, так и денежных. В лучшем случае — попытаются что-то сделать, но это может повлечь за собой много так называемых «костылей», которые приводят к ошибкам на сайте, делают его менее удобным и быстрым.
Вот какие сервисы можно рассмотреть, чтобы сэкономить ресурсы и избежать проблем с поддержкой:
- В качестве основы архитектурного решения для проекта можно взять Flux.
- В качестве фреймворков для создания готовых к работе веб-приложений — Next.js или Nuxt.js.
- В качестве хранилища состояний — предлагаем посмотреть в сторону Redux или Vuex.
Использование этих решений позволит придерживаться общих правил создания проекта на уровне программистов и, как следствие, тратить меньше ресурсов на погружение и доработку проекта.
Мы рассказываем вам об этом, чтобы вы могли общаться на одном языке с будущей командой разработчиков и лучше понимать друг друга.
Заключение
Мир фронтенда прекрасен и позволяет выводить ваш проект на новый уровень дохода. Сотрудничая с командами разработки, которые имеют достаточную квалификацию и уделяют время деталям, у вас получится увеличить доход вашего e-commerce проекта, внося минимальные доработки. А еще лучше, если ваши партнеры по разработке учтут все эти нюансы с самого начала.
Немного о front-end & back-end в Uplab
В современном мире веб-разработку делят на front-end и back-end. Это позволяет оптимизировать время и выводить качество проекта на более высокий уровень. В нашем агентстве работает более 15 сотрудников по двум направлениям.
Front-end разработчик создает ту часть, которую видит пользователь, а back-end разработчик отвечает за внутреннюю логику сайта. Если сравнить сайт со зданием, то front-end отвечает за фасад, а над внутренним устройством и инженерными сетями работает back-end.
Сегодня уже недостаточно качественно и адаптивно сверстать макет проекта. Нужно более глубокое погружение и взаимодействие разработчиков с командой аналитиков, проектировщиков, дизайнеров.
В Uplab мы используем такой подход: в разработке любого сайта задействованы специалисты из разных отделов. Когда все члены команды понимают, что и для чего они делают, тогда реализовать описанные выше функции — не проблема, а интересная задача для любимого клиента.
Благодарим за прочтение статьи. Успешных вам проектов! ❤