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

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

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

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

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

Продукт

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

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

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

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

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

Отзывы

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

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

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

Корзина

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

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

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

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

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

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

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

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

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

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

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

В заключение

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

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

Кстати...

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