В последней статье из цикла юзабилити закрепим знания о том, как сделать удобный сайт на примере интернет-магазинов. Рассмотрим, какими должны быть основные элементы сайта в сфере e-commerce.
Чек-лист, что должно быть в интернет-магазине
- Общие параметры. На сайт установлен SSL-сертификат, все страницы сайта содержат однотипную шапку и подвал, а также проработаны каналы коммуникации с клиентами.
- Главная. Главная страница привлекает внимание и побуждает к покупке. Важно, чтобы сразу было понятно, что вы продаёте.
- Каталог товаров. Пользователь может изменить количество товаров на странице. Настроены гибкие фильтры, а также добавлены привлекающие внимание категории.
- Страница товара. Указана необходимая информация о товаре, обязательно — стоимость и наличие.
- Корзина. Значок корзины расположен в привычном месте, на странице нет лишней информации, проработано взаимодействие с товарами.
- Страница оформления заказа. Можно оформить заказ без авторизации. Страница простая, наглядная и предусматривает выбор способа оплаты и доставки.
- Помощь, условия доставки, оплаты, гарантии. На странице подробно изложены ответы на вопросы о работе магазина, условия доставки, возможные способы оплаты и гарантии для пользователей.
- Контакты. Перечислены данные для связи.
- Личный кабинет. Понятна польза от регистрации на сайте. Соблюдены технические аспекты процедуры.
- Программа лояльности. Выбрана подходящая система вознаграждений, которая мотивирует пользователей покупать чаще и при этом не работает в убыток.
- Новости. На сайте рассказывается об актуальных событиях и изменениях в жизни интернет-магазина.
- О компании. Повествование об истории и ценностях компании ведётся не обезличенным тоном и выделяет ваш интернет-магазин.
Теперь эти же аспекты, но подробнее.
Общие параметры
Рассмотрим общие рекомендации ко всем страницам интернет-магазина.
SSL-сертификат
SSL-сертификат — криптографический протокол безопасности. После установки на сайт доступно безопасное соединение HTTPS. Этот префикс отображается в строке браузера и свидетельствует о том, что данные, которые вводит пользователь, защищены от третьих лиц.
Установка SSL-сертификатов желательна для всех сайтов, так как это улучшает ранжирование в поисковой выдаче. Они также помогают защитить данные клиентов от перехвата, поэтому вдвойне рекомендуется устанавливать их на сайты интернет-магазинов.
Подробнее об установке SSL мы писали в статье.
Шапка и подвал
Шапка — это верхняя область сайта, в которой отображаются основные разделы. А подвал — нижняя, содержащая дополнительную информацию (договор оферты, лицензии и свидетельства, иконки соцсетей и так далее). Эти области должны быть идентичными для всех страниц сайта.
Для интернет-магазина это имеет особое значение, так как в шапке закрепляются не только основные разделы, но и элементы, которые пользователи должны видеть везде: телефон, поиск, иконка корзины, личный кабинет.
Если магазин работает в нескольких городах, в шапке размещают метку с выбором региона (города):
В подвале интернет-магазина помещается юридическая информация, необходимая для работы интернет-магазина.
В подвале RU-CENTER даны ссылки на важные разделы сайта, соцсети, гарантийную информацию о защите прав пользователей. А также перечислены партнёры
Коммуникация с клиентами
В сфере e-commerce от коммуникации с клиентом и степени её проработанности зависит размер прибыли. Если покупатель не разобрался в вопросе и не смог связаться с консультантом, он пойдёт на тот сайт, где работает онлайн-чат или можно заказать обратный звонок. Если не предложить пользователю оставить свой email и не высылать на него акционные предложения и персональные скидки, покупательская активность на сайте будет ниже.
Мы посвятили вопросу о коммуникации с клиентами отдельную статью.
От общих параметров перейдём к тому, какие страницы должны быть в интернет-магазине и какими их стоит делать.
Главная
Попадая на главную страницу, пользователь должен сразу понимать, что продаётся в интернет-магазине и чем он отличается от других. Отличие помогает сформулировать УТП — уникальное торговое предложение, выделяющее ваш магазин в своей нише. Продемонстрируйте товары или расскажите о миссии магазина, чтобы зацепить потенциального покупателя, а заодно отсеять нецелевую аудиторию:
Так определяют уникальное предложение на сайте Invisible
Кроме понятности от главной страницы требуется заинтересовывать и побуждать к покупкам. Сделайте сайт визуально привлекательным и функциональным, чтобы добиться этого. О юзабилити веб-дизайна рассказывали в статье.
Также на сайт можно добавить яркие баннеры, рассказывающие об акциях и новинках, или продемонстрировать популярные товары:
Несколько баннеров на сайте L'Oréal Paris сменяют друг друга в слайдере
На главной странице рекомендуется выставлять и товары со скидками. Демонстрация выгоды привлекает покупателей.
Каталог товаров
Каталоги содержат перечень товаров с кратким описанием (название, фотография, цена) и кнопкой для покупки. Если товаров немного, каталог делают одностраничным.
Главное в таких каталогах — удобная навигация. Добавьте возможность сортировать товары по цене, названиям, статусам (новинка, хит и т. п.) и выбирать их количество на странице (оптимально 15–20 штук):
Если же ассортимент широкий, каталог стоит разбить на несколько разделов или даже добавить подразделы. Например, в интернет-магазинах одежды товары сначала разделены по адресату (мужская, женская, детская), а внутри уже разбиваются по типам одежды:
Пример сортировки товаров по каталогам в магазине Puma
Также мы рекомендуем использовать разделы с акционными, популярными, новыми товарами. В них собраны те же товары из других категорий, отфильтрованные по тому или иному признаку:
Фильтры
Гибкие фильтры позволят покупателю быстрее подобрать товары по интересующим его критериям. Перечислим основные рекомендации для этого инструмента:
- можно применить 2 и более фильтров одновременно;
- отображается число найденных товаров;
- результаты быстро загружаются;
- есть кнопка «Очистить», позволяющая сразу снять все фильтры.
Система фильтров на сайте Lamoda
Страница товара
Страницы товаров должны быть информативными и однотипными. Основные элементы страницы товаров:
- Название товара: уникальное наименование.
- Описание: краткое перечисление свойств и параметров товара, его артикул, оформляется списком.
- Фотография: одна или несколько фотографий товара с разных ракурсов, возможность увеличить изображение и рассмотреть детали.
- Цена: должна выделяться на странице. Если на товар действует скидка, зафиксируйте новую цену рядом со старой.
- CTA-кнопка: call to action — призыв к действию, кнопка должна выделяться, а надпись быть точной («Положить в корзину», «Купить», «Добавить в корзину» и т. п.).
Кроме этого, на страницу товара добавляют информацию о доставке, оценку пользователей и количество людей, интересовавшихся товаром; ярлыки (например, если товара нет в наличии и т. п.); возможность перейти к более развёрнутому описанию и похожие товары. Постарайтесь найти гармоничное сочетание подробности и минималистичности:
Корзина
Корзина — это промежуточный этап между выбором товаров и оформлением заказа. Не загромождайте страницу лишними деталями. Эта страница должна содержать информацию о количестве выбранных товаров и сумме покупки. Перечислим рекомендации к этому элементу:
Размещайте иконку «Корзины» в правом верхнем углу сайта. Пользователи привыкли видеть её там, и отсутствие значка в привычном месте не оправдает их ожиданий.
- На иконке отображается количество товаров, положенных в корзину.
- Товары в корзине кликабельны, то есть на их страницы можно перейти.
- Присутствует статус «есть/нет в наличии» и количество товаров.
- Товар можно удалить или, наоборот, увеличить количество предметов.
- Чётко видна конечная стоимость покупки.
- Отражена информация о скидках, доставке, возврате и гарантиях.
- Добавлен блок промокода, если система промокодов используется.
- Контрастная кнопка перехода к оформлению заказа.
- Авторизованные пользователи могут добавить понравившиеся товары в раздел «Избранное».
Так устроена корзина на сайте «Читай-города». Раздел «Избранное» называется «Закладки»
Вы можете использовать механику «похожие предложения» и настроить подбор смежных товаров, которые отображаются на странице заказа. Также её можно использовать, если товара, который выбрал пользователь, нет в наличии. Так вы предложите ему релевантную замену. Основной принцип — выбирать действительно соотносимые товары, а не рандомные:
К кроссовкам на сайте Puma предлагаются релевантные товары (аксессуары для бега, носки). Парфюм вызывает вопросы, но, вероятно, это забота об имидже бегунов
Оформление заказа
Оформление заказа стоит продумать до мелочей и сделать максимально простым и удобным для пользователей. Ведь именно этот этап напрямую связан с получением прибыли.
Часто проблема связана с тем, что оформление заказа невозможно без регистрации или авторизации на сайте. Покупателям приходится тратить лишнее время и отвлекаться от конечной цели: оплатить покупку. Позаботьтесь о пользователях, которые не хотят регистрировать личный кабинет или торопятся.
Добавьте возможность быстрой регистрации или оплаты в один клик, чтобы упростить оформление заказа.
На сайте этого интернет-магазина покупателю предлагается авторизоваться или продолжить покупку как гость
Упрощённая форма регистрации должна содержать минимум полей (ФИО, телефон для связи, адрес доставки и email).
Другие обязательные элементы оформления заказа: выбор способа оплаты и доставки. Оба эти компонента должны содержать варианты, из которых покупатель сможет выбрать удобный для себя. Также стоит позаботиться о безопасности, прозрачности и открытости. Покупатель должен видеть, сколько стоит доставка, когда заказ придёт, и получать чек о транзакции.
Интернет-магазины предлагают такие варианты доставки, как самовывоз, постамат, курьерские и почтовые службы. Определите, как ваши клиенты будут получать заказы, и дайте им возможность выбрать удобный способ. Кратко прокомментируйте особенности каждого варианта, сроки, стоимость и не забудьте дать ссылку на подробное описание условий доставки.
Предоставьте несколько способов оплаты на выбор. Одним покупателям удобно оплачивать покупки банковской картой онлайн, а другие предпочтут расплатиться с курьером после получения товара.
Оплата онлайн должна быть конфиденциальной и безопасной. Удостоверьтесь, что транзакции защищены от злоумышленников.
Если оформление заказа происходит в несколько этапов, покупатель видит, на каком именно он находится и сколько их осталось до совершения покупки:
Заказ на сайте L’Oréal Paris оформляется в три этапа. Блок выше служит напоминанием, на случай если покупатель отвлечётся от оформления заказа
Настройте триггерное сообщение о завершении процедуры. Тогда после оформления заказа на email покупателя придёт сообщение о действиях на сайте. В сообщении укажите свои обязательства по транспортировке товара, сроки, необходимые действия для получения. Также это сообщение может содержать благодарность за покупку.
Помощь, доставка, оплата и гарантии
Исчерпывающее описание способов оплаты, доставки, гарантий потребителей стоит собрать в особый справочный раздел. Отдельно можно зафиксировать справочную информацию о работе интернет-магазина (помощь по работе с сайтом).
В этих справочных разделах пользователи смогут найти ответы, если у них возникнут дополнительные вопросы. Оформить разделы можно в виде простого перечня пунктов или раскрывающимися блоками вопросов-ответов. Главное — закрепите ссылки на эти страницы в подвале сайта.
- Опишите все предоставляемые способы доставки с указанием стоимости, сроков, тарифов и дополнительных сервисов. После прочтения этого мануала у покупателя не должно оставаться вопросов «Могут ли доставить покупку без моего участия/в субботу/рано утром» и т. п.
- Опишите все варианты способов оплаты и всего, что касается биллинга вашего интернет-магазина (подарочные сертификаты, программа лояльности, бонусные баллы и т. п.).
На сайте Hoff справочная информация об оплате — в формате FAQ (часто задаваемых вопросов)
- Разместите информацию о гарантиях на товар (возможности обмена или возврата). Предупреждён — значит вооружён. Вы сможете ссылаться на эти разделы в спорных ситуациях.
- Также этот раздел может включать договор оферты, соглашение об обработке персональных данных, прочую информацию юридического плана.
Контакты
Страница «Контакты» на сайте интернет-магазина выполняет сразу две функции. Во-первых, информационную: вы сообщаете обо всех каналах связи с магазином. Во-вторых, контактоустанавливающую: покупатель видит, что вы не скрываетесь, а также может проверить, не фейковую ли информацию вы указали.
На этой странице рекомендуется размещать следующие данные:
- телефон (лучше, чтобы номер был закреплён в шапке или подвале сайта);
- физический адрес (если у интернет-магазина несколько представительств в разных городах, указывать их все, добавлять виджет карты);
- email для связи (на корпоративную почту могут поступать предложения о сотрудничестве или обратная связь);
- форма обратной связи (чтобы пользователи могли написать вам с сайта);
- ИНН, ОГРН, банковские реквизиты (и другие регистрационные данные продавца).
На сайте SpaDream есть не только необходимая информация для связи, но и отмечаются адреса магазинов на карте
Личный кабинет
Личный кабинет на сайте предназначен для покупателей, которые планируют поддерживать длительные «отношения» с магазином. Например, в личном кабинете человек может один раз добавить адрес доставки или данные банковской карты, чтобы затем они «подтягивались» при оформлении заказа. Также там хранится информация обо всех заказах пользователя, его бонусах, статусах в программе лояльности и т. п.
Но новых пользователей, у которых нет опыта работы с вами, нужно убеждать в том, что регистрация на сайте выгодна. Расскажите о пользе от того, что клиент потратит время на регистрацию, или предложите ему бонусы к заказам. Другие рекомендации к Личному кабинету:
- Регистрация ЛК простая и не занимает много времени.
- Предусмотрена возможность быстрой регистрации через соцсети или Google-аккаунт.
- Нет лишних полей и сущностей (например, вместо логина стоит использовать почту пользователя).
- Есть чек-бокс «Подписаться на рассылку». У пользователя должна быть возможность не ставить галочку и, соответственно, не получать письма.
- Используется форма Double Opt-In (подтверждение регистрации при переходе по ссылке из письма).
Регистрация на сайте М.Видео максимально упрощена: пользователю нужно ввести только телефон и полученный код
Программа лояльности
Программа лояльности — это система поощрений, которая стимулирует покупать больше и оставаться с компанией дольше. Чем больше покупательская активность клиента, тем больше вознаграждений (бонусов и привилегий) он получает. У компании при этом растёт оборот и прибыль.
Программы лояльности бывают разными: начисление бонусов, кешбэк, многоуровневая система скидок, скидки у партнёров и так далее. Чтобы система работала, нужно подбирать такую модель, которая будет привлекательна для ваших клиентов и выгодна бизнесу. Рассмотрим распространённые ошибки:
- Работа в убыток. Так получается, когда на бонусы клиентам тратится больше средств, чем составляет конечная прибыль от их покупок. Проанализируйте средний чек и рассчитайте соотношение прибыли к убытку.
- Неподходящая модель. Выбор системы должен основываться на количестве лояльных клиентов, среднем чеке и частоте покупок. Это очень индивидуальная история, в которой не бывает общих решений. Советуем не копировать чью-то программу, а прежде проанализировать свою целевую аудиторию и погрузиться в расчёты.
- Недостаточная мотивация. Помните, что конечная цель программы лояльности — мотивировать клиентов покупать больше. Мало предложить большие бонусы, нужно, чтобы предложение было релевантно и имело ценность для ваших клиентов.
Пример многоуровневой программы лояльности (Клуба привилегий) интернет-магазина Kerastase
Новости
Размещайте на сайте актуальные новости интернет-магазина, информацию об акциях, изменении режима работы, коллаборациях, партнёрские материалы — всё, что показывает покупателям современную повестку дня. Если последние новости вашего магазина датированы 2018 годом, у пользователей может сложиться впечатление, что магазин заброшен и не работает.
На сайте Л’Этуаль отдельно выделены новости магазина и новости бренда
О компании
На странице «О компании» размещают историю бренда, делятся принципами и ценностями магазина, показывают «отцов-основателей» и т. п. Цель этого контента — показать, что за магазином стоят настоящие люди, которые творят историю, и таким образом создать почву для доверительных отношений.
Распространённые ошибки в рассказе о компании:
- Использовать общие фразы, которые встречаются на страницах каждого второго интернет-магазина. Например, «Добро пожаловать», «Для нас важны качество и оптимальный сервис» и т. п. Такие слова не несут полезной информации и не выделяют вашу компанию.
- Обезличенный тон. Сухая датировка событий также не располагает покупателей к доверительным отношениям с вами.
- Отсутствие позиционирования. Если у вашего магазина отсутствует концепция, он не будет выделяться на фоне остальных площадок вашего сегмента.
Заключение
В завершении цикла напомним о прошлых статьях:
Часть I. Основные параметры юзабилити.
Часть III. Коммуникация с клиентами на сайте.
Учитывая эти советы при разработке сайта, вы сможете создать ресурс, который позволит сделать ваш бизнес успешным и завоевать доверие пользователей.