Пт, 5/04/19 – 9:26 | 2 комментария

Эта статья о том, что для успеха Landing Page важна не только визуальная привлекательность. От лендингов ждут высоких конверсий. Эффективность лендингового сайта особенно …

Читать статью »
Дизайн

Секреты веб-дизайна, примеры стильных сайтов

Тренды / ТОП

Топ лучших идей, новые тенденции и тренды WEB’а

Маркетинг

Статьи о маркетинге сайтов, примеры эффективности

Свой сайт

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

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

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

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

UX-дизайны интернет-магазинов: хорошие и плохие. 21 пример

21 января 2018 2 комментария

Суть UX дизайна в том, чтобы проникая в голову посетителя e-commerce сайта, создать увлекательный, простой и бесшовный опыт пользования. Как быстро передать необходимую информацию и при этом успеть подарить хорошее настроение? Отличный UX (пользовательский опыт) вызывает удовлетворение, увеличивающее выработку допамина в мозге. Правильный интернет-магазин стремится поддержать позитивные желания: ознакомиться, запомнить, заказать. UX-дизайном можно повысить лояльность к онлайн-магазину, увеличить конверсию и продажи.

Далее, как продуманный UX-дизайн eCommerce сайта поощряет энтузиазм онлайн-шопперов, стимулирует желание делать последующие заказы.

Интернет-магазины с элементами хорошего UX

Хороший UXD: Asos

Дизайн этого интернет-магазина часто приводят в качестве образцового и тому есть объяснение – великолепный UX, интуитивный интерфейс. Популярный e-commerce ресурс имеет отличные изображения, внятные описания в разговорном стиле, ясные призывы Call-to-Action с переходами в секции каталога и очевидные выгоды (бесплатная доставка и т.д.).

Еще одна особенность: видео с демонстрацией изделия на модели, чтобы посетитель мог разглядеть товар и покупать уверенно. Полезны опции выбора размера / ZOOM-увеличения / «купить образ».


Читайте также:  20 WooCommerce шаблонов для создания Маркетплейса

Хороший UXD: Berghaus

Бренд одежды для активного образа жизни, узнаваемый с первой секунды посещения онлайн-магазина.

Бренд до тонкостей понимает целевую аудиторию. Hero-изображение в первом экране – это воодушевляющее приглашение. Поклонников экстрима главная страница соблазняет мощными призыввами к действию: Распродажа на конец сезона, Собирайся, Призрак экспедиции… и обращением к посетителю «подобрано для тебя / тебе приглянулось». Также, геометрия в дизайне помогает выразить стиль.

Читайте также:  Удивительные примеры геометрии в дизайне сайтов

Хороший UXD: Rent The Runway

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


Хороший UXD: Zara

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

Хороший UXD: Graze

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

Graze может послужить примером хорошего и простого UX-дизайна.

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

Хороший UXD: TopShop

Продающему много товаров интернет-магазину, UX-дизайн дается намного трудней. Как упорядоченно организовать продажу каждой модели джинсов? Мощные фильтры каталогов помогают отсортировать по цене, цвету и стилю.

Функциональность, простота с уникальной структурой соответствуют ожиданиям современного пользователя. Стильность задает минималистичная графика элементов интерфейса: иконка таблицы размеров, trackbar ценового диапазона… Hover-взаимодействия со сменой картинки приободряют посетителя, стимулируют продолжать.


Хороший UXD: Protest

Выпадающее меню обеспечивает гармоничную компактность и быструю навигацию.

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

Читайте также:  Анимация по правилам UX-дизайна: полное руководство

Хороший UXD: New Look 

В этом минималистичном интернет-магазине интересен подход к UX/UI-дизайну карточки товара.

Выскальзывающие боковые панели для положений о доставке / возврате и таблицы размеров слева и для предлагаемых товаров справа, не уводят клиента с товарной страницы. Посетитель сам контролирует просмотр листая курсором или воспользовавшись ссылкой View full page. Это значит потенциальный покупатель не потеряется, сэкономит время и охотнее воспользуется предложением (позитивный опыт пользования).


Хороший UXD: Firebox

Онлайн-магазин продает необычные подарки и дерзкие вещицы. Товары не вписывающиеся в стандарты Firebox представил креативно и ярко. Их ТОП-50 — идеальный способ представить на рассмотрение наиболее популярное.

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


Хороший UXD: Lazy Oaf

Интернет-покупатели часто видят достаточно однообразные интерфейсы и многим не хватает ощущений, которые они получали от листания журналов и перечней товаров в торговых точках оффлайн. Крутым оформлением lookbook-коллекций, Lazy Oaf пробуждает у пользователя знакомое чувство оживления. Вместо «перечисления» товаров один за другим, изделия показаны в различных интересных комбинациях. Ведь так они выглядели в тех буклетах / каталогах, именно так их применение себе и представляют многие покупатели.

Это чем-то напоминает продажу «по старинке» – с эффектом присутствия.


Хороший UXD: ModCloth

Онлайновый продавец одежды стремится сделать опыт покупок лучшим в своем классе. Например, в разделе OUTFIT PHOTOS можно увидеть, как люди носят продаваемую брендом одежду – одно дело на модели, другое в реальности. Есть возможность взглянуть на другую расцветку прямо из каталога.


Хороший UXD: Bonobos

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


Хороший UXD: Ayr

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

UX-дизайн: чего не следует делать

House Of Fraser

Крупнейший в мире онлайновый Department Store делает ошибки, заметные сразу после загрузки главной страницы.

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

Поп-ап в самом начале ознакомления с сайтом – это вообще зло. Но агрессивный маркетинг на этом е-Сommerce сайте видимо практикуется.


Walmart

Продавая все подряд, Wal Mart решает непростую задачу. Но как классифицировать, скомпоновать и представить все это в удобном для пользования виде? Трудно сказать, но явно не так.

В этом месиве категорий невозможно быстро сориентироваться и что-либо отыскать. Слишком большой выбор с большей вероятностью вызовет паническое желание покинуть ресурс.


Ray-Ban

Довольно небольшой выбор товаров и по большей части сайт дружественен к пользователю. Однако как и многие другие E-commerce сайты, также досаждает клиентам:

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

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