105 советов по UX электронной коммерции: как соблазнить посетителей совершить покупку

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

Вам нужно больше, чем топ-рейтинг в Google. Люди должны иметь возможность перейти к продукту, который они хотят, и доверять вам достаточно, чтобы купить. Ваш UX (пользовательский опыт) электронной коммерции должен быть направлен на укрепление доверия посетителей, помогая им достичь своих целей.

По данным исследовательской компании Nielson Norman Group, существует более 800 лучших практик для удобства использования электронной коммерции. Если у вас нет миллиардов долларов на разработку, вы не сможете выполнить все требования. Этот пост наполнен советами и примерами, чтобы вы могли улучшить дизайн UX электронной коммерции и получить больше конверсий.

Давайте разберем основные рекомендации по типам страниц. Прочтите эту статью, чтобы получить советы по мобильному UX.

Главная страница Советы по UX, которые укрепляют доверие с первого взгляда

Ваша домашняя страница получает больше всего трафика. Сделайте очевидным, что вы продаете товары. Представьте, что ваша домашняя страница — это окно в ваш магазин. Вспомните Macy’s на «Великолепной миле». Украсьте свою домашнюю страницу своими лучшими продуктами и изображениями. Чего вы никогда не увидите в Macy's, так это разных платьев, проносящихся одно за другим по витрине. Я говорю о ползунках здесь. Если вам нужно их использовать, убедитесь, что они удобны для пользователя.

Лучшие практики области героев

Ваша основная область (также называемая избранной областью) — это самая заметная недвижимость на вашей домашней странице. У вас есть только 50 миллисекунд, чтобы произвести хорошее впечатление, вот как это сделать.

Что нужно делать в области героев

1. Используйте простой, незагроможденный дизайн. Используйте как можно меньше слов.
2. Удалите все, что не оказывает влияния. Например, ваши последние записи в блоге.
3. Используйте визуальные очереди, такие как цвет или стрелки, чтобы сосредоточить внимание на одном призыве к действию.
4. Сделайте так, чтобы людям было легко идентифицировать себя. Вы продаете дорогие женские куртки?

Зона героев

1. Украсить. Завитки, блестки и другие бессмысленные символы добавляют когнитивной нагрузки и отвлекают ваших клиентов.
2. Имейте устаревший контент, например рекламные акции прошлой недели или даже прошлого месяца. Вы моментально потеряете доверие.
3. Загромождайте область слишком большим количеством сообщений или рекламных акций.
4. Иметь автоматически продвигающийся слайдер или карусель.
5. Подчеркните продукт, который не является репрезентативным для вашего общего ассортимента.

Навигация по главной странице

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

Навигация по главной странице

1. Дайте посетителям «вид на 30 000 футов» того, что продает ваш сайт, чтобы они могли перейти к определенным категориям.
2. Добавьте наиболее часто используемые инструменты или руководства по покупке.
3. Предоставьте ссылки на политику возврата, обслуживание клиентов, страницы доставки и конфиденциальности.

Навигация по главной странице Что нельзя делать

1. Предположим, вы знаете, что ищут люди.
2. Размещайте каждую категорию и подкатегорию на своей домашней странице.
3. Продвигайте рекламные акции на уровне продукта. Если у вас есть только несколько продуктов, вы можете игнорировать это.
4. Используйте стандартные стоковые фотографии. Это кричит о недостоверности.

Навигация: основа UX

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

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

Главное меню навигации

1. Ограничьте верхнее меню до 7 вариантов.
2. Используйте дополнительную навигацию в правом верхнем углу для таких элементов, как «Свяжитесь с нами».
3. Используйте меню из нескольких столбцов, в котором организованы категории и подкатегории.
4. Покажите качественные изображения вашего продукта.
5. Сделайте свое меню навигации заметным с помощью контрастных цветов.
6. Перекрестные ссылки продуктов в несколько категорий. Кто-то, кто ищет USB-накопитель, может искать его в разделе «Ноутбук», «Аксессуары» или «Компьютеры».

Главное меню навигации Что нельзя делать

1. Имейте один раскрывающийся список, который занимает длинный столбец.
2. Показывать ссылки на пустые страницы категорий на главную навигацию.
3. Чрезмерная классификация продуктов. Если в (под)категории есть только один продукт, удалите категорию и переклассифицируйте продукт.
4. Не используйте расплывчатые варианты, такие как «больше».

Меню корзины покупок

Меню корзины, вероятно, является последней кнопкой, которую пользователь нажмет перед тем, как вынуть кредитную карту. Не пересматривайте этот крошечный значок.

Меню корзины покупок

1. Показать общую цену и количество товаров в корзине.
2. Ссылка на страницу корзины, где они могут увидеть подробную информацию о своем содержимом

Меню корзины покупок

1. Замените полную корзину «мини-тележкой». Вашему сайту электронной коммерции нужна страница корзины, а не просто виджет корзины.
2. Прямая ссылка на страницу оформления заказа, которая не показывает все детали продуктов в корзине.

Поиск

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

Поиск в поисках

1. Используйте открытое текстовое поле в верхней части каждой страницы.
2. Используйте фасетный поиск, когда в категории более 20 товаров.
3. Фильтр по цене, цвету, размеру — основные параметры многогранного поиска.

Искать, что нельзя

1. Используйте текст-заполнитель при поиске. Оставьте поле пустым или скажите «Поиск».
2. Используйте субъективные параметры фильтрации, такие как «тяжелая нагрузка» или «легкая нагрузка».

Страницы категорий: Сделайте покупателей на шаг ближе

Страницы категорий могут быть немного сложными. Вы хотите убедиться, что содержимое не слишком тонкое. Дополнительные области текста могут творить чудеса с рейтингом Google, но слишком много текста может запутать вашего клиента.

Учитывая поисковый запрос «купальный костюм», результат от Macy's очень релевантен. Пользователю легко уточнить, что он ищет.

Избавьтесь от беспорядка в навигации по категориям

Будьте избирательны в отношении того, какие подкатегории вы представляете на странице своей категории. Macy's мог бы показать фотографии розовых купальных костюмов, черных купальных костюмов, слитных, раздельных и т. д. Если бы были представлены все варианты, покупатели были бы парализованы количеством вариантов. Вы также не хотите, чтобы люди ошибочно принимали вашу страницу категории за страницу с плохим списком продуктов.

Навигация по категориям

1. Используйте много пустого пространства и ограниченный текст.
2. Опишите подкатегории как можно меньшим количеством слов, но будьте точны.
3. Используйте изображения для правильного представления основных подкатегорий.
4. Используйте только текст для представления менее популярных категорий.
5. Имейте родительскую категорию, если используете мега или выпадающее меню.

Навигация по категориям

1. Покажите неактуальные картинки.
2. Доверяйте только тексту.
3. Используйте многоцветный текст.
4. Активно продвигайте промо.
5. Используйте названия продуктов для подкатегорий.

На сайте Таргета. вам придется очень постараться, чтобы найти «купальники для юниоров».

Содержимое страницы категории

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

Содержимое страницы категории

1. Сосредоточьтесь на потребностях вашего покупателя.
2. Используйте семантические ключевые слова в дополнение к основному ключевому слову.
3. Ответьте на часто задаваемые вопросы, связанные с категорией.

Содержание категории Что нельзя делать

1. Поместите большие блоки текста вверху страницы.
2. Используйте основное ключевое слово снова и снова.
3. Используйте нерелевантные изображения. Можете ли вы поверить фотографии мужского костюма на странице купального костюма Target?
4. Поместите текст в изображения.

Страницы со списком продуктов: информирование и укрепление доверия

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

SEO-контент для страниц со списком продуктов

Удобная для пользователя копия, естественно, будет дружественной к SEO. Вы хотите, чтобы люди (и Google) четко понимали содержание вашей страницы. Вы также хотите мягко увести людей с этой страницы, если они не видят того, что хотят.

Что нужно делать с SEO-контентом

1. Используйте наиболее релевантные ключевые слова с наименьшей сложностью в заголовке страницы и теге h1. Узнайте больше об исследовании ключевых слов.
2. Используйте дополнительные ключевые слова в кратком описании категории.
3. Если необходима дополнительная информация, поместите ее под списком продуктов.
4. Используйте «хлебные крошки», чтобы помочь пользователям ориентироваться и распределять PageRank по страницам ваших категорий.
5. Показать цены и варианты.
6. Предоставьте обзор продукта, если есть кнопка «Добавить в корзину».

SEO-контент, который нельзя делать

1. Добавляйте слишком много контента до того, как продукты будут перечислены.
2. Используйте милые или образные названия продуктов. Если вы продаете детскую обувь, не называйте коричневые сандалии «Джорджем».

Навигация по списку продуктов

Как только у пользователя появится представление о том, что он хочет купить, он сделает покупку на вашей странице со списком товаров. Дайте понять, что у них есть несколько вариантов и страниц для покупок. Вы хотите, чтобы они продолжали искать, если они не видят то, что хотят на первой странице.

Навигация по странице со списком продуктов

1. Покажите количество страниц до и после списков продуктов.
2. Показать общее количество товаров в этой категории.
3. Разрешить пользователям сортировать по: цене,
4. Разрешить пользователям переходить на определенные страницы в результатах.

Перечень продуктов Навигация по страницам Что нельзя делать

1. Заставьте пользователей нажимать стрелки, чтобы переходить на другую страницу.
2. Предположим, что люди прокрутят страницу вверх или нажмут кнопку «Просмотреть все».
3. Используйте крошечные или размытые фотографии продуктов.

Страницы продукта: где встречаются SEO, UX и продажи

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

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

Наслоение содержимого страницы продукта

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

Расслоение содержимого страницы продукта

1. Предоставьте краткое описание продукта в верхней части страницы или рядом с фотографией.
2. Добавьте рамку или затененный фон в «зону действий», где люди выбирают варианты и нажимают вашу кнопку.
3. Представьте варианты заказа в верхней части области действий.
4. Разместите хлебные крошки на страницах товаров.
5. Поместите информацию о продукте, обзоры, данные и т. д. под изображением продукта и областью призыва к действию.

Расслоение содержимого страницы продукта: чего нельзя делать

1. Поместите большой блок текста рядом с кнопкой CTA или над ней.
2. Скройте кнопку добавления в корзину, пока кто-нибудь не сделает выбор.
3. Сделайте информацию о наличии личным щелчком мыши.
4. Внесите тонкое изменение, когда кто-то нажимает кнопку «Добавить в корзину». Люди пропустят ваше сообщение «Успешно добавлено».

Распространенной ошибкой, которую я видел во многих темах электронной коммерции WordPress, были скрытые кнопки «Добавить в корзину».

Изображения страницы продукта

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

Изображения страницы продукта

1. Используйте большие фотографии высокого разрешения на белом фоне.
2. Используйте функции масштабирования, чтобы пользователи могли видеть детали сами.
3. Разрешить пользователям прокручивать изображения вперед и назад.
4. Предоставьте четкие инструкции о включении дополнительных изображений или функций масштабирования.

Изображения на странице продукта

1. Покажите изображения «образа жизни» или свой продукт. Покажите только продукт.
2. Не засоряйте свои фотографии логотипами, водяными знаками или фоном.
3. Принудительно всплывающее окно с изображением, чтобы увидеть более подробную информацию или дополнительные фотографии.

Процесс оформления заказа: создан для доверия

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

Страница корзины покупок

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

Страница корзины покупок

1. Подтвердите все. Продукт, размер, цвет, количество, доступность, дата отгрузки, предполагаемая доставка.
2. Разрешить пользователям переходить непосредственно к продуктам в своей корзине.
3. Упростите изменение количества или удаление товаров. Позвольте пользователям изменить количество на 0, чтобы удалить продукты, или нажмите кнопку «удалить».
4. Покажите изображение товара в том цвете, в котором он был заказан. Если ваш покупатель заказывает черную куртку и видит синюю на кассе, он теряет доверие.
5. Сделайте кнопку «Продолжить оформление заказа» заметной, но позвольте людям продолжить покупки.
6. Покажите общую стоимость двери.

Презентация страницы Sopping Cart

1. Заранее попросите кредитную карту или адрес электронной почты. Пусть люди подтвердят, что они покупают.
2. Не используйте кнопку «Обновить» для удаления продуктов.

Страница регистрации

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

Страница регистрации

1. Подчеркните преимущества создания учетной записи.
2. Используйте простой макет.
3. Не задавайте больше 2 вопросов.

Страница регистрации

1. Заставлять людей создавать учетную запись. Никто не хочет запоминать новое имя пользователя и пароль.
2. Заранее попросите кредитную карту или адрес электронной почты. Пусть люди подтвердят, что они покупают.
3. Не используйте кнопку «Обновить» для удаления продуктов.

Страница оформления заказа

После того, как покупатели почувствуют уверенность в том, что они заказывают нужный товар в нужной компании (вашей), пора начинать вечеринку.

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

Страница оформления заказа

1. Запрашивайте только минимальную необходимую информацию.
2. Замените основную навигацию на «контактную».
3. Сделайте процесс оформления заказа коротким, а шаги четкими и логичными.
4. Показать прогресс в процессе оформления заказа.
5. Разрешите пользователям использовать платежный адрес в качестве адреса доставки одним щелчком мыши.

Страница оформления заказа

1. Представьте новую информацию или выбор.
2. Заставьте людей «присоединиться» или «стать участником».
3. Заставьте людей повторно вводить одну и ту же информацию дважды.

Как выглядит ваш сайт?

Вам не нужно иметь миллион долларов, чтобы создать положительный опыт покупок. Ни один из вышеперечисленных крупных брендов не соответствует более чем 800 рекомендациям, предложенным Nielson Norman Group. Не думайте, что ваши клиенты знают ваш сайт так же, как и вы. Усвойте эти основы, и Google и клиенты полюбят ваш сайт и будут покупать у вас.