Ср, 3/05/17 – 1:15 | One Comment

Чтобы преуспеть на рынке web-дизайна и разработки или в качестве фрилансера, нужно иметь впечатляющее портфолио. Создатели сайта-портфолио сталкиваются с задачами более сложными чем …

Читать статью »
CSS верстка

О красивом оформлении страниц с css3 и html5

Дизайн

О создании веб-дизайна с примерами сайтов

Wordpress

Самое современное для сайта на Wordpress

Шаблоны сайтов

Обзоры шаблонов: лучшие темы для сайта

Свой сайт

Как создать, оформить, сделать сайт лучше

Главная » Интернет магазины

21 пример e-commerce сайтов с UX новшествами в дизайне

21 марта 2014 Один комментарий

E-commerce сайты уже начали в широком масштабе проявлять признаки зрелости, становясь более изящными и динамичными. Это пример того, как продающий сайт реагирует на современные тенденции развития интернет-бизнеса. Новые технологии, такие как HTML5, CSS3 и jQuery вносят что-то новое в опыт пользования сайтами электронной коммерции. В результате мы можем видеть совершенно потрясающие решения на примерах новых дизайнов интернет магазинов.

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

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

Отбросим все это — команда e-commerce инноваторов, рискнувших раздвинуть границы привычного в интернет коммерции, заслуживает признания. Правила иногда кем-то нарушаются, а новшествам часто дают поддержку — даже когда они и не решают всех задач.

Давайте посмотрим на эти примеры e-commerce сайтов, сделавших попытку внести разнообразие в интернет-бизнес. Их новые идеи заслуживают внимания даже за этот небольшой вклад в развитие электронной коммерции и улучшение UX-дизайна (User eXperience Design).

1. Jack Jones

Кластерные решения и агрегирование по группам однородных товаров — популярный тренд в современной интернет торговле. Создание полных комплектов товаров, сгруппированных по их принадлежности вместо разрозненного их представления покупателям, стимулирует сбыт товаров повышенной стоимости. У Jack Jones есть свои идеи, как помочь покупателям определиться с деталями своего образа, поиграв с разными группами изделий.

пример e-commerce сайта

2. Shop Rivegauche

Рив Гош (онлайн-магазин косметики и парфюмерии) добавлен в коллекцию удобных для пользователей дизайнов интернет-магазинов, также, за свой функционал. Расширенный поиск, сортировка по брендам, параметрам, типам товара. Элемент TrackBar, с линейной числовой шкалой: при помощи двух ползунков устанавливается нужный ценовой диапазон.

лучший сайт интернет магазина рив гош

5. Robstep  

На главной странице обилие качественных снимков с товаром. Оригинальные элементы интерфейса сайта (инструмент выбора цвета). В навигации по сайту используется карта активных точек (hotspot) обеспечивающая интерактивную связь с иллюстрациями комплектующих товара, их описаниями, характеристиками и мини-инструкциями в виде в виде диаграмм, текста, фото и анимации.

Пример e-commerce сайта

7. Soulland

Много фонового видео на сайте: начиная от главной и до страниц товаров. Переусердствуй дизайнер и получится путаница, но поддержка необходимого баланса делает страницы более оживленными. Также, удачно оформлена обработка ошибок добавления товара в корзину (без выбора размера).

видео в интернет-магазине

8. Protest

Lookbook – это фото подборка стильных образов. Своеобразный способ привлечь покупателей с реализацией, тут же, этой линейки товаров. Буквальный перевод «заказывать образ». На этом e-commerce сайте для любителей серфинга, вэйкбординга (вейк) и сноубордистов, lookbook посвящен коллекции одежды для серфингистов. Большие изображения и выдвижное боковое меню с единицами товаров, показанных на этой странице. Остается только оформить заказ понравившегося изделия.

пример e-commerce сайта

9. Vertty

Очаровательный сайт по продаже одного товара — пляжного полотенца с символичной формой на основе треугольников. На главной странице карусель из видов товара с возможностью подобрать свой любимый цвет. Оригинальное решение с совершением покупки по кнопке «get yours» — цвет логотипа инвертируется на белый, а фон страницы меняется в соответствии с цветом выбранного товара.

пример e-commerce сайта

Читайте также:  Как правильно оформить главную страницу: 42 сайта в пример

10. Bellroy

У многих вызывает интерес проводимая компания: «Сделай свой бумажник компактным». У Bellroy веб-сайт подстать их продукции — оригинальный и удобный, с приятным дизайном. Располагают к просмотру функциональные слайдеры с фото товара и полезной информацией. Красиво сочетаются разные шрифты. В раскрывающихся меню использованы товарные ярлыки в виде рисунков от руки. И вся продукция представлена по шкале: от футляра для кредитных и дисконтных карт до туристического кошелька-органайзера — с разбиением на подгруппы. Продуманный дизайн и удобная навигация помогают продающему сайту выполнять свои задачи.

оригинальный продающий сайт с красивым дизайном

11. House of Fraser

После недавней доработки и модернизации онлайн-магазин House of Fraser выглядит очень неплохо. Использование инновационной технологии True Fit, позволяет магазину минимизировать возвраты товара, помогая потребителю подобрать подходящий размер.

ecommerce магазин

13. Colette Malouf

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

дизайн e-commerce сайта

15. KitchenAid

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

пример e-commerce сайта

17. Folk

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

пример e-commerce сайта

18. Greats

Эти кроссовки можно покрутить с помощью мыши.

пример креативного сайта электронной коммерции

19. Luvd

Мягкий и приятный адаптивный дизайн, много выразительных оптимистичных фотографий, фото-бэкграундов, полноэкранных видео и крупных призрачных кнопок. Интерфейс и дизайн ориентированы на выполнение задачи — ЗАИНТЕРЕСОВАТЬ и ПРОДАТЬ товар. Логотип и разделы в ликом меню, по размерам шрифтов выглядят намного скромнее заголовков в блоге или наименований на продуктовых страницах. Индикация текущего раздела блога дополнена цветными полупрозрачными элементами (прикрепленными к изображениям). В карточке товара изображения можно пролистывать с клавиатуры, курсором или просто кликая по нему. Нет в наличии нужного размера? Вместо «Добавить в корзину» и опции «Количество» вы увидите контурную кнопку Waitlist (лист ожидания товара), открывающую модальное окно с эффектом затемнения фона.

20. Wild Berries

Опция быстрого просмотра может служить альтернативой переходу на внутреннюю страницу. Находясь в каталоге, вы можете увидеть возможные расцветки товара на моделях, а в диалоговом окне уже сами параметры модели (Определите свой размер). Возможен видео-ролик и есть дополнительное описание, выпадающим списком. Другие полезные опции: фильтр по стилям, брендам, другим параметрам и TrackBar с двумя бегунками для выбора товара в определенном диапазоне цен. Подобные удобства просмотра или получения нужных результатов поиска — пример лучшего удовлетворения потребностей клиентов и хорошего UX-дизайна для интернет-магазина.

примеры интернет магазинов

21. Nasty Gal

Магазином Nasty Gal «скверная девчонка», завершим этот обзор UX-дизайнов для сайтов электронной коммерции. Наверное, его можно считать лучшим примером того, каким должен быть интернет магазин, с точки зрения соответствия пользовательским ожиданиям (User eXperience). Его функциональные возможности: Quick view, LookBook, использование клавиатуры (стрелки право/лево) для перемещения по позициям товара. Разнообразие опций фильтрации, включая TrackBar. В выпадающем меню Shop, покупателю предложено определиться с выбором:  Can’t live without (Не могу жить без) — вечернего наряда / распродаж. Валюта определяется автоматически, но иной выбор сохранится на будущее. Легкостью пользования и своей понятностью этот e-commerce сайт во многом обязан минималистичному стилю, структуре и, конечно же, UX дизайну.

магазин nasty gal

Читайте также:  9 трендов в веб-дизайне на 2017 год