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

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

Интересные примеры веб-сайтов Электронной коммерции.

Bonobos.
Bonobos оставляет самые положительные впечатления от совершения покупки. Хорошая типографика и нежные цвета помогают сосредоточиться на продуктах и ​​их особенностях. Механизм взаимодействия с этим веб-сайтом построен таким образом, чтобы пользователь не отвлекался на второстепенную информацию. При добавлении нового элемента в корзину, он появляется в скользящей боковой панели справа, стимулируя клиентов либо совершать дальнейшие покупки, либо приступать к процедуре оформления. Дизайн формы оформления заказа максимально простой и понятный. От пользователей не требуется вводить непомерных объемов данных, а все поля для ввода четко разделены в хорошо управляемые области. И самый главный момент: значок для избранного представляет собой иконку банана! Сейчас это довольно популярно.

Martina Sperl. Martina Sperl — это прекрасный веб-сайт. На сайте этого магазина размещено множество глянцевых фотографий продуктов, а также простая навигационная панель, закрепленная на правой стороне страницы. При наведении указателя на изображение товара отображается информация касательно номера и цены. Все эти данные отображаются жирным шрифтом без засечек. Вы также можете кликнуть на картинку и посмотреть более подробную информацию о продукте и получить 3-D вид мебели (простая серия изображений). Покупка предметов мебели предполагает необходимость заказа по электронной почте. На страницах продуктов представлены смелые изображения товаров в полную ширину, и вы можете нажать на значок “сердечка”, чтобы выразить свою расположенность к продукту. Все это создано с использованием WordPress.

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

Banana Cafe. Веб-сайт Banana Cafe невероятен. 3-D эффекты наведения отлично сочетаются с общей торговой стратегией. Блоки вращаются в разных направлениях, создавая интересное движение по всему сайту. Это не совсем типичный интернет-магазин, а, скорее, коллекция различных предложений для вашего гардероба. Эффекты при наведении курсора позволяют отобразить ссылочный номер, который вы будете использовать при заполнении контактной формы в нижней части страницы. Аудио и видео в фоновом режиме в действительности не нужны, но они очень хорошо дополняют уникальный опыт работы на веб-сайте.

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

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

Walmart.
Совсем недавно на веб-сайте Walmart был выполнен адаптивный редизайн. Навигация была скрыта за кнопкой “Shop All Departments” (все разделы магазина), которая отображает меню вне холста сбоку. Все товарные позиции объединены в хорошо организованную структуру, а элементы интерфейса и типографика обеспечивают удобство обзора. Каждый товар может быть оценен и может получить отметку полезный или не совсем полезный. Как только какой-то товар будет добавлен в корзину, появляется лайтбокс, побуждая клиентов переходить к оформлению товара или к продолжению покупок. Механизм контроля покупок очень хорошо продуман, и вы видите только ту информацию, которая на самом деле вам необходима. Хорошая информация архитектура, хорошая планировка, хороший редизайн.

Appliances Online.
Хотя количество элементов в каждой категории на ao.com является довольно многочисленным, процесс совершения покупок и контроль выбора товаров в действительности сделаны очень удобно. На страницах продуктов, клиенты могут сравнить характеристики недавно просмотренных товаров, которые отображаются рядом друг с другом в таблице, а многие продукты помимо этого имеют еще и встроенный видео-обзор. Пользователям предлагается множество вариантов подсчета общей стоимости выбранных товаров и в каждом случае довольно легко выполнить все те шаги, которые в конечном итоге позволят получить нужную вам покупку.

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

GoMacro.
Если вы ищете какой-то необыкновенный интернет-магазин, то вам обязательно стоит заглянуть на GoMacro. Вместо использования обычной сетки товаров, все товары группируются в цветные круги. Необычным является и механизм добавления товара в корзину, поскольку вы буквально помещаете бары в корзину. Механизм совершения платежа также хорошо продуман и к нему достаточно просто перейти через основную навигацию (“Назад” и “Следующий шаг”), которая находится за пределами платежного лайтбокса. GoMacro — это отличный пример того, что даже уникальный дизайн может хорошо работать, а посетив этот магазин вы убедитесь во всем сами.

Lost My Name.
Должен признаться, что это не совсем интернет-магазин, но дизайн платежной формы невероятно привлекателен. В основе дизайна лежит мягкое прикосновение визуального проектирования бренда к веб-формам, что создает общий приятный опыт пользовательского взаимодействия с веб-сайтом. Наверное, наиболее подходящим словом для описания дизайна будет прилагательное “дружественный”.

Indochino.
Веб-сайт Indochino — это, пожалуй, король настроек. В общем, вы можете настроить практически все. Однако для этого требуется взаимодействие с клиентской стороны. Изображения продуктов заметно выделены в качестве фоновых изображений. В костюмах может быть настроено абсолютно все, начиная от отворотов пиджака и до отверстий для пуговиц, а также карманы, подкладки и складки. Перед тем, как вы совершите оплату, вас попросят предоставить подробные данные касательно ваших размеров. Вся эта процедура занимает только 18 шагов. Если вы, в рамках своего магазина, хотите реализовать что-то уникальное со множеством индивидуальных вариантов, то Indochino — это прекрасный пример для обучения. В некоторых случаях адаптивный дизайн работает не совсем правильно, особенно когда дело доходит до страниц с большим количеством доступных опций.

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

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

Benj & Soto. Ben & Soto — это строго функциональный веб-сайт с простым дизайном. Он имеет довольно уникальный тип взаимодействия с пользователем; вы можете украсить куб по своему собственному усмотрению, а затем с помощью вращения просмотреть все шесть сторон. Мне очень нравится, что на этом веб-сайте используются элементы с примечаниями, которые ощутимо упрощают рабочий процесс. Чтобы создать и сохранить свой собственный дизайн вы должны зарегистрироваться или войти в систему с помощью аккаунта Twitter или Facebook. Хороший способ визуализации продукта.

Motorola. Адаптивный интернет-магазин Motorola красиво оформлен и содержит большие фотографии продуктов, которые доминируют по всей области экрана. Двумерный дизайн создает ощущение, что можно приобрести любой продукт без особых проблем. Motorola предлагает своим пользователям создать собственное представление товара. Веб-сайт имеет прекрасный UX (опыт пользовательского взаимодействия с сайтом), с большими четкими кнопками. При ограниченном просмотре, фильтр и поиск реализованы с использованием фиксированного фильтр/поиск меню. В этом случае хорошей идеей может быть использование в качестве аль� …

Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров