Лучшие статьи и кейсы стартапов
Включить уведомления
Дадим сигнал, когда появится
что-то суперстоящее.
Спасибо, не надо
Вопросы Проекты Вакансии
создание и продвижение сайтов
Рекомендуем
Продвинуть свой проект
Лучшие проекты за неделю
30
Эбиа

Эбиа

www.ebia.ru

21
YAGLA

YAGLA

yagla.ru

16
Cookiezz

Cookiezz

cookiezz.com.ua

15
Enlite

Enlite

enlited.ru

15
likearea

likearea

smm.li

15
SE Ranking

SE Ranking

seranking.ru

11
Relap

Relap

relap.io

11
Perezvoni.com

Perezvoni.com

perezvoni.com

11
E-Commerce and Venture projects

E-Commerce and Venture projects

Продажа товаров от производителей оптом и в розницу

Показать следующие
Рейтинг проектов
Подписывайтесь на Спарк в Facebook

Продающие сайты: в чем особенности их дизайна

2 417 0 В избранное Сохранено
Авторизуйтесь
Вход с паролем
При создании интернет-магазинов новички часто забывают об особенностях электронной коммерции. Дизайнер и проектировщик интерфейсов Байрон Хоувенс предлагает заострить внимание на некоторых моментах в юзабилити - делимся переводом его статьи.

Байрон Хоувенс (Byron Houwens) — дизайнер и проектировщик интерфейсов, фронтенд разработчик. В настоящий момент занимается фронтенд разработкой развивающихся образовательных проектов; живет в Кейптауне, Южная Африка.

Не секрет, что электронная торговля (или как ее называют “e-commerce”) приобрела популярность и резко распространилась в последние десять лет. Уже всем известны такие гиганты среди интернет-магазинов, как Amazon и Alibaba, а похожие на eBay сайты появляются изо дня в день.

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

Поэтому если вы сейчас разрабатываете свой интернет-магазин, то вам необходимо узнать особенности этого типа веб-сайтов, чтобы сделать интерфейс понятным, удобным и в принципе крутым для клиентов. Кстати, 20 мая мы будем проводить семинар "Интернет-магазин своими руками" - регистрация здесь

Продукт

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

Тенденция увеличивать картинки товаров появилась не просто так. Люди “встречают по одёжке”, и интернет-шопинг — не исключение. Большие, детализированные изображения позволяют хорошо рассмотреть товар перед покупкой, и именно это повышает уровень доверия к продавцу.

Удивительно, но зачастую как раз внешний вид товара на фотографии становится решающим фактором в решении, совершить покупку или нет.

eo6FO4DyU6o1H-YkrjaYSWpQzm66xH7Y1l7rsQ_1

Nielsen Norman Group провели исследование айтрекинга — отслеживание координат взора — и установили, что пользователи по-разному реагируют на товары на двух разных сайтах. Выбирая книжные полки (сайт на скриншоте слева), покупатели направляют взор преимущественно на сами изображения, в то время как при выборе телевизора с плоским экраном всё внимание сосредоточено на тексты с техническими характеристиками товаров.

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

Отзывы

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

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

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

MuMIH9QvjRN4trFCeQVlwiZtB5wR_uSl2UVJ6fFd

Корзина

Этот аспект имеет большое значение в проектировании интерфейсов для e-commerce, однако им многие пренебрегают или допускают ошибки. Важный процесс добавления товара в корзину часто упрощен, будучи легко интегрированным в юзабилити (при этом всё чаще применяется “slippy”(проворный) UX).

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

Takealot.com, ведущий интернет-магазин в Южной Африке, имеет именно такую проблему. При добавлении товара в корзину мне не приходит никакое оповещение, и мне приходится тратить время на поиск кнопки корзины где-то в верхнем правом углу страницы, чтобы убедиться, что я его уже добавил.

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

U--B9lxmqeKYEqQPwAjplLpd_YjKgnNDW_h3HjP6

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

Еще одна впечатляющая деталь Takealot: корзина предупреждает о некоторых особенностях товара, например, необходимость иметь плеер Blu-Ray для воспроизведения Blu-Ray дисков, которые вы покупаете. Вы можете еще улучшить UX путём добавления предлагаемых плееров Blu-Ray, доступных на вашем сайте, тем самым предоставив возможность купить сразу несколько нужных товаров одновременно и ничего не забыть.

Искусственный интеллект

Такая особенность редко встречалась в электронной торговле до сих пор, но в последнее время она набирает обороты, при этом многие крупные компании в e-commerce организуют команды специалистов специально для разработки своих ИИ-систем.

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

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

q2pLtZNb_053bPLMU_NXdCmPYLwuJuWbZFYdxSet

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

В заключение

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

Источник: http://www.sitepoint.com/ecommerce-design-different/

Кстати...

20 мая мы проводим бесплатный мастер-класс по созданию интернет-магазина своими руками на платформе Truvisibility. За час мы вместе с вами создадим сайт под ключ, и вы научитесь делать интернет-магазины самостоятельно и без денежных вложений. Приходите или подключайтесь онлайн на workshop.truvisibility.com

0
Комментариев еще не оставлено
Выбрать файл
Читайте далее
Загружаем…
Блог проекта
Расскажите историю о создании или развитии проекта, поиске команды, проблемах и решениях
Написать
Личный блог
Продвигайте свои услуги или личный бренд через интересные кейсы и статьи
Написать